feat: add baseSalary which can be hidden in the job posting

yawik · Oct 11, 2021 · a41ab09 · a41ab09
1 parent 9f65a73
commit a41ab09
Show file tree

Hide file tree

Showing 7 changed files with 188 additions and 46 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,8 @@
 # Wizard for entering job ad
 
-Standalone wizard based on [quasar](https://quasar.dev/). It is a single page application (SPA) running in the 
-clients browser. The result is a static HTML content.
+Standalone wizard based on [quasar](https://quasar.dev/). It is a single page application (SPA) running in the  clients browser. The result is a static HTML content. 
+
+As an authenticated user it's possible to save the job.
 
 ## Task description
 
@@ -33,7 +34,8 @@ The form is .env-aware.
 |------------------------------|-------------------------------------|
 | YAWIK_URL_PRIVACY            | Link to the Privacy notes           |
 | YAWIK_APP_KEY                | Shared App Key                      |
-| YAWIK_API_URL                | Yawik API                           |  
+| YAWIK_API_URL                | Yawik API                           |
+| YAWIK_ROUTER_BASE            | Router Base of the web app          |
 | YAWIK_SSO_URL                | Keycloak base URL                   |  
 | YAWIK_SSO_REALM              | Keycloak realm                      |  
 | YAWIK_SSO_CLIENT             | Keycloak application ID             |  
@@ -42,7 +44,7 @@ It's possible to show a toolbar with the Logo and a navigation drawer by using q
 
 | Param        | Description       |
 |--------------|-------------------|
-| tb           | show toolbar      |  
+| tb           | hide toolbar      |  
 
 ## Demo
 

diff --git a/docs/fields.md b/docs/fields.md
@@ -2,10 +2,35 @@
 
 ## Job Formular Fields
 
-| Name                        | Value                              |
-|-----------------------------|------------------------------------|
-| jobtitle                    | Title of the joboffer              |
-| joblocation                 | Location of the Joboffer           |
+
+
+| Name                    | Value                              |
+|-------------------------|------------------------------------|
+| acceptTerms             ||
+| applyEmail              ||
+| applyPost               ||
+| applyURL                ||
+| contactInfo             ||
+| contactInfoLabel        ||
+| country                 || Country
+| intro                   ||
+| introLabel              ||
+| jobTitle                | The title of the job (not the title of the posting)|
+| location                | The physical location(s) of the business           |
+| offer                   ||
+| offerLabel              ||
+| organization            | The organization offering the job position. |
+| profile                 ||
+| profileLabel            ||
+| reference               | The hiring organization's unique identifier for the job.|
+| salary                  ||
+| salaryVisibility        ||
+| step                    ||
+| taskLabel               ||
+| tasks                   ||
+| workDuration            || FULL_TIME, PART_TIME                                   |
+| workKind                || Type of employment.                                    |
+
 
 ## Enviroment
 
@@ -22,8 +47,8 @@ You can overwrite values by creating a `.env.local` oder `.dev.production` file.
 | YAWIK_URL_PRIVACY            | Link to the Privacy notes           |
 | YAWIK_APP_KEY                | Shared App Key                      |
 | YAWIK_API_URL                | Yawik API                           |  
+| YAWIK_ROUTER_BASE            | Vue Router Base                     |  
 | YAWIK_SSO_URL                | Keycloak base URL                   |  
 | YAWIK_SSO_REALM              | Keycloak realm                      |  
 | YAWIK_SSO_CLIENT             | Keycloak application ID             | 
 | YAWIK_GOOGLE_MAPS            | Google Maps API Key                 |
-
diff --git a/docs/index.md b/docs/index.md
@@ -2,7 +2,7 @@
 
 With the JobWizard you can create a responsive job advertisement free of charge, quickly and easily. All you need to do is fill in the fields and you will end up with a stand-alone HTML page. You can submit the ad to the job board of your choice for publication.
 
-Or you can register in the JobWizard. Then they can manage your job ad (coming soon.)
+Or you can register in the Job Wizard. Then they can manage your job ad (coming soon.)
 
 ## Status
 
@@ -12,13 +12,13 @@ currently under development. But the following is already working
 * Entering a job ad (Thanks to [Quasar](https://quasar.dev))
 * Download of a job ad with Google for Jobs Markup.
 * Integration of Google Places API 
+* configure colors and layout
 
 
 ## Roadmap
 
-There is Google for Jobs. A great service that makes job ads findable via Google. But there is no entry tool for ads. We want to close this gap.
+There is [Google Jobs](https://de.wikipedia.org/wiki/Google_for_Jobs). A great service that makes job ads findable via Google. But there is no entry tool for ads. We want to close this gap.
 
-* configure colors and layout
 * save Jobs (give jobs an URI)
 * join a newsletter
-* more documentation (running gag)
+* more documentation
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
@@ -77,7 +77,7 @@ export default
   {
     return {
       showDrawer: false,
-      tokenTimer: null,
+      tokenTimer: null
     };
   },
   computed:
@@ -90,10 +90,6 @@ export default
       showFooter()
       {
         return !this.$route.query.hf;
-      },
-      metaTitle()
-      {
-        return this.$t('metaTitle');
       }
     },
   created()
@@ -201,17 +197,11 @@ export default
   {
     "en": {
       "login": "Login",
-      "logout": "Logout",
-      "metaTitle": "",
-      "meta-description": "The Jobwizard is a generator for job ads that look good on mobile and desktop that you can post on Google Jobs",
-      "meta-keyword": "Job ads, ad generator, Google Jobs"
+      "logout": "Logout"
     },
     "de": {
       "login": "Anmelden",
-      "logout": "Abmelden",
-      "meta-title": "",
-      "meta-description": "Der Jobwizard ist ein Generator für Stellenanzeigen, die mobil und auf dem Desktop gut aussehen und die Sie auf Google Jobs schalten können",
-      "meta-keyword": "Stellenanzeigen, Anzeigengenerator, Google Jobs"
+      "logout": "Abmelden"
     }
   }
 </i18n>
diff --git a/src/pages/DialogPreview.vue b/src/pages/DialogPreview.vue
@@ -85,7 +85,10 @@ export default
       },
       htmlHeaderImage()
       {
-        return this[GET_HEADER] ? `<div class="flex" style="width: 100%; padding: 16px 0 0;"><img src="${this[GET_HEADER]}" class="img_header mx-auto"></div>` : '';
+        return this[GET_HEADER]
+          ? `<div class="flex" style="width: 100%; padding: 16px 0 0;">
+          <img src="${this[GET_HEADER]}" class="img_header mx-auto"></div>`
+          : '';
       },
       htmlApply()
       {
@@ -117,11 +120,23 @@ export default
       },
       htmlWorkKind()
       {
-        return this[GET_FORM].workKind.length > 0 ? this[GET_FORM].workKind.map(item => `<li>${this.$t(item)}</li>`).join('') : '';
+        return this[GET_FORM].workKind.length > 0
+          ? this[GET_FORM].workKind.map(item => `${this.$t(item)}`).join(', ')
+          : '';
       },
       htmlWorkDuration()
       {
-        return this[GET_FORM].workDuration.length > 0 ? this[GET_FORM].workDuration.map(item => `<li>${this.$t(item)}</li>`).join('') : '';
+        return this[GET_FORM].workDuration.length > 0
+          ? '<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M12 20C16.4 20 20 16.4 20 12S16.4 4 12 4 4 7.6 4 12 7.6 20 12 20M12 2C17.5 2 22 6.5 22 12S17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2M17 11.5V13H11V7H12.5V11.5H17Z" /></svg>' +
+          this[GET_FORM].workDuration.map(item => `${this.$t(item)}`).join(', ')
+          : '';
+      },
+      htmlSalary()
+      {
+        return !this[GET_FORM].salaryVisibility
+          ? '<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M5,6H23V18H5V6M14,9A3,3 0 0,1 17,12A3,3 0 0,1 14,15A3,3 0 0,1 11,12A3,3 0 0,1 14,9M9,8A2,2 0 0,1 7,10V14A2,2 0 0,1 9,16H19A2,2 0 0,1 21,14V10A2,2 0 0,1 19,8H9M1,10H3V20H19V22H1V10Z" /></svg>' +
+          this[GET_FORM].salary.value.split('|').map(item => item + '.000€').join(' - ')
+          : '';
       },
       htmlCode()
       {
@@ -203,6 +218,14 @@ export default
       border: 1px solid ${this.color}66;
       background-color: ${this.color}11;
     }
+    .info {
+
+    }
+    .info svg {
+      color: ${this.color}88;
+      vertical-align: bottom;
+      margin-right: 5px;
+    }
     .jobdetails {
       border: 1px solid ${this.color}66;
     }
@@ -228,19 +251,13 @@ export default
       <div class="nine columns">
         <h5>${this[GET_FORM].organization || ''}</h5>
         <h1>${this[GET_FORM].jobTitle}</h1>
-        <div>
-        <svg style="width:24px;height:24px" viewBox="0 0 24 24">
-            <path fill="currentColor" d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z" />
-        </svg>
+        <div class="info">
+        <svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z" /></svg>
         ${[this[GET_FORM].country?.label || '', this[GET_FORM].location || ''].filter(val => val).join(', ')}
-        <svg style="width:24px;height:24px" viewBox="0 0 24 24">
-            <path fill="currentColor" d="M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H10V20.09L12.09,18H6V16H14.09L16.09,14H6V12H18.09L20,10.09V8L14,2H6M13,3.5L18.5,9H13V3.5M20.15,13C20,13 19.86,13.05 19.75,13.16L18.73,14.18L20.82,16.26L21.84,15.25C22.05,15.03 22.05,14.67 21.84,14.46L20.54,13.16C20.43,13.05 20.29,13 20.15,13M18.14,14.77L12,20.92V23H14.08L20.23,16.85L18.14,14.77Z" />
-        </svg>
-        ${[this[GET_FORM].workKind]}
-        <svg style="width:24px;height:24px" viewBox="0 0 24 24">
-          <path fill="currentColor" d="M12 20C16.4 20 20 16.4 20 12S16.4 4 12 4 4 7.6 4 12 7.6 20 12 20M12 2C17.5 2 22 6.5 22 12S17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2M17 11.5V13H11V7H12.5V11.5H17Z" />
-        </svg>
-        ${[this[GET_FORM].workDuration]}
+        <svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H10V20.09L12.09,18H6V16H14.09L16.09,14H6V12H18.09L20,10.09V8L14,2H6M13,3.5L18.5,9H13V3.5M20.15,13C20,13 19.86,13.05 19.75,13.16L18.73,14.18L20.82,16.26L21.84,15.25C22.05,15.03 22.05,14.67 21.84,14.46L20.54,13.16C20.43,13.05 20.29,13 20.15,13M18.14,14.77L12,20.92V23H14.08L20.23,16.85L18.14,14.77Z" /></svg>
+        ${this.htmlWorkKind}
+        ${this.htmlWorkDuration}
+        ${this.htmlSalary}
         </div>
       </div>
       ${this.htmlHeaderImage}
@@ -296,6 +313,16 @@ export default
               addressCountry: this[GET_FORM].country,
             }
           },
+          baseSalary: {
+            '@type': 'MonetaryAmount',
+            currency: 'EUR',
+            value: {
+              '@type': 'QuantitativeValue',
+              minValue: this[GET_FORM].salary.value.split('|').map(item => item + '000')[0],
+              maxValue: this[GET_FORM].salary.value.split('|').map(item => item + '000')[1],
+              unitText: 'YEAR'
+            }
+          }
         };
         if (this.employment.length > 0) result.employmentType = this.employment;
         if (this[GET_FORM].applyURL) result.directApply = true;
@@ -394,7 +421,7 @@ export default
     },
     "de": {
       "close": "Schließen",
-      "jobad_wizard": "Job ad Wizard",
+      "jobad_wizard": "Jobad Wizard",
       "intro": "Einleitung",
       "tasks": "Aufgaben",
       "profile": "Profil",