Development

package.json

@@ -11,7 +11,8 @@
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
     "vue": "^2.6.11",
-    "vue-router": "^3.1.5"
+    "vue-router": "^3.1.5",
+    "vue-select": "^3.20.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",

src/App.vue

@@ -1,9 +1,5 @@
 <template>
   <div id="app">
-<!--    <div id="nav">-->
-<!--      <router-link to="/">Home</router-link> |-->
-<!--      <router-link to="/about">About</router-link>-->
-<!--    </div>-->
     <router-view/>
   </div>
 </template>

src/main.js

@@ -1,6 +1,9 @@
 import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
+import vSelect from "vue-select";
+
+Vue.component("v-select", vSelect);
 
 Vue.config.productionTip = false;
 

src/router/index.js

@@ -5,24 +5,11 @@ import Form from "../views/Form/Form.vue";
 Vue.use(VueRouter);
 
 const routes = [
-    {
-        path: "/:id",
-        name: "Form with tag",
-        component: Form
-    },
     {
         path: "/",
-        name: "Form without tag",
+        name: "Form",
         component: Form
     }
-    // {
-    //   path: '/about',
-    //   name: 'About',
-    //   // route level code-splitting
-    //   // this generates a separate chunk (about.[hash].js) for this route
-    //   // which is lazy-loaded when the route is visited.
-    //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
-    // }
 ];
 
 const router = new VueRouter({

src/utils/http.js

@@ -1,14 +1,20 @@
 import axios from "axios";
 
+export function xml() {
+    const axiosInstance = axios.create({
+        baseURL: "https://tdsoftware.jobs.personio.de/xml?language=en",
+        headers: {"Content-Type": "application/xml"}
+    });
+
+    return axiosInstance;
+}
+
 export function http() {
     const axiosInstance = axios.create({
-        baseURL: "https://api.prescreenapp.io/v1",
-        headers: {
-            "Content-Type": "application/json",
-            "apikey": "ymXfs1OGyuBOLj6zoxtuG27U0O6UULd9"
-        },
-        data: null
+        baseURL: "https://api.personio.de/v1/recruiting/applications",
+        headers: { "Accept": "application/json", "Content-Type": "application/json", "Authorization": "Bearer 029f0f7593291293cc5c", "X-Company-Id": ""}
     });
 
     return axiosInstance;
 }
+

src/views/Form/Form.js

@@ -1,4 +1,4 @@
-import { http } from "../../utils/http";
+import { xml, http } from "../../utils/http";
 
 export default {
     name: "Form",
@@ -10,52 +10,28 @@ export default {
             interests: "",
             error: "",
             isLoading: false,
-            tags: []
+            openPositions: [],
+            selectedPosition: ""
         };
     },
-    watch: {
-        "$route.params"(to) {
-            if (!to.id) this.getTags();
-            else this.isValidTag();
-        }
-    },
     created() {
-        if(!this.$route.params?.id) this.getTags();
-        else this.isValidTag();
-        // this.get();
+        this.get();
     },
     methods: {
-        async getTags() {
-            this.error = "";
-            try {
-                const response = await http().get("candidate_tag?page_size=100");
-                if(response) {
-                    this.tags = response.data.data.filter(tag => tag["created_at"] >= "2021-10-25T12:53:19+02:00");
-                }
-            }catch(error) {
-                const errorString: string = error.response?.data?.message || "Sending form failed";
-                this.error = "Error: " + errorString;
-            }
-        },
-        async isValidTag() {
-            this.error = "";
-            try {
-                const response = await http().get("candidate_tag?page_size=100");
-                if(!(response && response.data.data.find(tag => String(tag.id) === this.$route.params?.id))) {
-                    await this.$router.push("/");
-                }
-            } catch(error) {
-                const errorString: string = error.response?.data?.message || "Sending form failed";
-                this.error = "Error: " + errorString;
-            }
-        },
         async get() {
             this.error = "";
             try {
-                const response = await http().get("candidate?");
-                console.log("candidate", response.data);
-                const response2 = await http().get("application");
-                console.log("job", response2.data);
+                 const response = await xml().get();      
+                 console.log("open positions", response.data);          
+                 const parser = new DOMParser();
+                 const xmlDoc = parser.parseFromString(response.data, "application/xml");
+                 const nameElements = xmlDoc.getElementsByTagName("name");
+                 for (let i = 0; i < nameElements.length; i++) {
+                    const element = nameElements[i];
+                    if (element.parentNode.nodeName === "position") {
+                        this.openPositions.push(element.innerHTML);
+                    }
+                }
             } catch(error) {
                 const errorString: string = error.response?.data?.message || "Sending form failed";
                 this.error = "Error: " + errorString;
@@ -65,14 +41,13 @@ export default {
             this.error = "";
             this.isLoading = true;
             try {
-                await http().post("candidate", {
-                    profile: {
-                        firstname: this.firstName,
-                        lastname: this.lastName
-                    },
-                    email: this.email,
-                    "candidate_tag_ids": [this.$route.params?.id],
-                    "motivational_letter": this.interests
+                await http().post("data", {
+                    "first_name": this.firstName,
+                    "last_name": this.lastName,
+                    "email": this.email,
+                    "job_position_id": 893585,
+                    "message": this.selectedPosition + " " + this.interests,
+                    "application_date": new Date().toISOString().split("T")[0]
                 });
                 this.$toastr.render("Form send successfully");
                 this.clearForm();

src/views/Form/Form.scss

@@ -1,3 +1,4 @@
+@import '~vue-select/dist/vue-select.css';
 @keyframes rotate {
   from {
     transform: rotate(0deg);
@@ -86,20 +87,6 @@
       }
     }
   }
-
-  .tags {
-    display: flex;
-    flex-direction: column;
-
-    button {
-      border: 1px solid #ddd;
-      border-radius: 5px;
-      padding: 10px;
-      font-size: 16px;
-      background: white;
-      margin: 5px 0;
-    }
-  }
 }
 
 .error {

src/views/Form/Form.vue

@@ -1,27 +1,26 @@
 <template>
   <div class="tds-form">
     <img src="../../assets/tds-banner.jpg">
-    <div v-if="$route.params.id" class="form">
+      <div class="form">
       <form @submit.prevent="send">
         <label>First Name</label>
         <input v-model="firstName" />
         <label>Last Name</label>
         <input v-model="lastName" />
         <label>Email</label>
         <input v-model="email" />
-        <label>Job interests</label>
+        <label>Job Position</label>
+        <v-select v-model="selectedPosition" :options="openPositions"></v-select>
+        <label>Motivation</label>
         <textarea v-model="interests" />
-        <button type="submit" :class="{loading: isLoading}">Subscribe</button>
+        <button type="submit" :class="{loading: isLoading}">Submit</button>
       </form>
 
       <div v-if="error" class="error">{{ error }}</div>
     </div>
-    <div v-else class="tags">
-      Choose a tag
-      <button v-for="tag in tags" :key="tag.id" @click="$router.push('/' + tag.id)">{{ tag.name }}</button>
-    </div>
   </div>
 </template>
 
 <script src="./Form.js" />
 <style lang="scss" src="./Form.scss" scoped />
+