Merge pull request #21 from IV1201-Group-2/feature/handle-application…

…-view

Feature/handle application view

src/components/handle_application/StatusCard.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+type StatusKeys = "accepted" | "pending" | "rejected";
+
+type Statuses = {
+  [status in StatusKeys]: {
+    i18nPath: string;
+    icon: string;
+    color: string;
+  };
+};
+
+const basePath = "recruiter.handle-application.";
+const statusPath = basePath + "status.";
+const actionsPath = statusPath + "actions.";
+const undoMsgPath = statusPath + "undo-message.";
+
+const statuses: Statuses = {
+  accepted: {
+    i18nPath: "accepted",
+    icon: "mdi-check-circle",
+    color: "success"
+  },
+  pending: {
+    i18nPath: "pending",
+    icon: "mdi-minus-circle",
+    color: "orange"
+  },
+  rejected: {
+    i18nPath: "rejected",
+    icon: "mdi-close-circle",
+    color: "red"
+  }
+};
+
+const status = ref(statuses.pending);
+const isHandled = computed(() => status.value.i18nPath !== statuses.pending.i18nPath);
+const dialogIsVisible = ref(false);
+const undoMsgBody = computed(() => t(undoMsgPath + "body"));
+
+function accept() {
+  status.value = statuses.accepted;
+}
+
+function reject() {
+  status.value = statuses.rejected;
+}
+
+function undo() {
+  status.value = statuses.pending;
+  hideDialog();
+}
+
+function showDialog() {
+  dialogIsVisible.value = true;
+}
+
+function hideDialog() {
+  dialogIsVisible.value = false;
+}
+</script>
+
+<template>
+  <v-card variant="outlined" max-width="200" class="ml-3">
+    <template #title>
+      {{ $t(statusPath + "header") }}
+    </template>
+    <v-card-item>
+      <v-chip :color="status.color" :append-icon="status.icon">
+        {{ $t(statusPath + status.i18nPath) }}
+      </v-chip>
+    </v-card-item>
+    <v-card-actions>
+      <v-dialog v-if="isHandled" v-model="dialogIsVisible" width="auto">
+        <template #activator="{ props }">
+          <v-btn v-bind="props" @click="showDialog">
+            {{ $t(actionsPath + "undo") }}
+          </v-btn>
+        </template>
+
+        <v-card>
+          <v-card-title>
+            {{ $t(undoMsgPath + "header") }}
+          </v-card-title>
+          <v-card-text class="text-center">
+            <div v-html="undoMsgBody" />
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn color="red" @click="hideDialog">{{ $t(undoMsgPath + "no") }}</v-btn>
+            <v-btn color="success" @click="undo">{{ $t(undoMsgPath + "yes") }}</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+      <v-btn v-if="!isHandled" color="red" class="mr-2" @click="reject">{{ $t(actionsPath + "reject") }}</v-btn>
+      <v-btn v-if="!isHandled" color="success" @click="accept">{{ $t(actionsPath + "accept") }}</v-btn>
+    </v-card-actions>
+  </v-card>
+</template>

src/i18n/locales/en.json

@@ -117,6 +117,46 @@
           "view": "View"
         }
       }
+    },
+    "handle-application": {
+      "header": "Handle Application",
+      "personal-information": {
+        "header": "Personal Information",
+        "first-name": "First Name",
+        "last-name": "Last Name",
+        "person-number": "Person Number",
+        "email": "Email"
+      },
+      "item-list": {
+        "third-column": "Actions",
+        "competence-header": "Competence List",
+        "availability-header": "Availability List"
+      },
+      "competence": {
+        "area-of-expertise": "Area of Expertise",
+        "years-of-experience": "Years of Experience"
+      },
+      "availability": {
+        "start-date": "Start Date",
+        "end-date": "End Date"
+      },
+      "status": {
+        "header": "Status",
+        "pending": "Pending",
+        "accepted": "Accepted",
+        "rejected": "Rejected",
+        "actions": {
+          "accept": "Accept",
+          "reject": "Reject",
+          "undo": "Undo"
+        },
+        "undo-message": {
+          "header": "Caution!",
+          "body": "You are about to undo the status of this application. <br> This may confuse the applicant since you have already informed them of their status. <br><br> Do you want to proceed?",
+          "no": "No",
+          "yes": "Yes"
+        }
+      }
     }
   }
 }

src/i18n/locales/sv.json

@@ -117,6 +117,46 @@
           "view": "Visa"
         }
       }
+    },
+    "handle-application": {
+      "header": "Hantera ansökan",
+      "personal-information": {
+        "header": "Personlig information",
+        "first-name": "Förnamn",
+        "last-name": "Efternamn",
+        "person-number": "Personnummer",
+        "email": "E-postadress"
+      },
+      "item-list": {
+        "third-column": "Handlingar",
+        "competence-header": "Kompetenslista",
+        "availability-header": "Tillgänglighetslista"
+      },
+      "competence": {
+        "area-of-expertise": "Yrkesområde",
+        "years-of-experience": "Antal arbetsår"
+      },
+      "availability": {
+        "start-date": "Startdatum",
+        "end-date": "Slutdatum"
+      },
+      "status": {
+        "header": "Status",
+        "pending": "Bearbetas",
+        "accepted": "Accepterad",
+        "rejected": "Nekad",
+        "actions": {
+          "accept": "Acceptera",
+          "reject": "Neka",
+          "undo": "Återställ"
+        },
+        "undo-message": {
+          "header": "Varning!",
+          "body": "Du är på väg att återställa statusen för denna ansökan. <br> Det kan leda till förvirring för den ansökande eftersom statusen redan delgivits denne. <br><br> Önskar du fortsätta?",
+          "no": "Nej",
+          "yes": "Ja"
+        }
+      }
     }
   }
 }

src/stores/applicationForm.ts

@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import { ref, type Ref } from "vue";
-import type { AvailabilityList, CompetenceList } from "@/components/application_form/types";
+import type { AvailabilityList, CompetenceList } from "@/components/generic/types";
 
 export const useApplicationStore = defineStore("application", () => {
   const basePath = "applicant.application-form-page.";

src/stores/auth.ts

@@ -8,7 +8,7 @@ type Role = "Applicant" | "Recruiter" | "";
 export const useAuthStore = defineStore("auth", () => {
   const token = ref("");
   const isAuthenticated = computed(() => !!token.value);
-  const role: Ref<Role> = ref("Recruiter");
+  const role: Ref<Role> = ref("");
 
   function register(registrationForm: RegistrationForm) {
     fetch("https://register-service-c7bdd87bf7fd.herokuapp.com/api/register", {

src/views/applicant/ApplicationConfirmationView.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { storeToRefs } from "pinia";
 import { useApplicationStore } from "@/stores/applicationForm";
-import ItemList from "@/components/application_form/ItemList.vue";
-import PersonalInformation from "@/components/application_form/PersonalInformation.vue";
+import ItemList from "@/components/generic/ItemList.vue";
+import PersonalInformation from "@/components/generic/PersonalInformation.vue";
 import { ref } from "vue";
 const applicationStore = useApplicationStore();
 const { competenceList, availabilityList } = storeToRefs(applicationStore);

src/views/applicant/ApplicationFormView.vue

@@ -4,8 +4,8 @@ import { storeToRefs } from "pinia";
 import { useI18n } from "vue-i18n";
 import { useApplicationStore } from "@/stores/applicationForm";
 import { ApplicationTestId } from "@/util/enums";
-import ItemList from "@/components/application_form/ItemList.vue";
-import PersonalInformation from "@/components/application_form/PersonalInformation.vue";
+import ItemList from "@/components/generic/ItemList.vue";
+import PersonalInformation from "@/components/generic/PersonalInformation.vue";
 const applicationStore = useApplicationStore();
 const { competenceList, availabilityList } = storeToRefs(applicationStore);
 const i18n = useI18n();

src/views/recruiter/HandleApplication.vue

@@ -1,7 +1,85 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import PersonalInformation from "@/components/generic/PersonalInformation.vue";
+import ItemList from "@/components/generic/ItemList.vue";
+import StatusCard from "@/components/handle_application/StatusCard.vue";
+import type { AvailabilityList, CompetenceList } from "@/components/generic/types";
+
+const basePath = "recruiter.handle-application.";
+const itemListPath = basePath + "item-list.";
+const competencePath = basePath + "competence.";
+const availabilityPath = basePath + "availability.";
+
+const testAvailabilityList: AvailabilityList = {
+  __typename: "AvailabilityList",
+  data: [
+    {
+      start: new Date().toISOString().substring(0, 10),
+      end: new Date().toISOString().substring(0, 10)
+    },
+    {
+      start: new Date().toISOString().substring(0, 10),
+      end: new Date().toISOString().substring(0, 10)
+    },
+    {
+      start: new Date().toISOString().substring(0, 10),
+      end: new Date().toISOString().substring(0, 10)
+    },
+    {
+      start: new Date().toISOString().substring(0, 10),
+      end: new Date().toISOString().substring(0, 10)
+    },
+    {
+      start: new Date().toISOString().substring(0, 10),
+      end: new Date().toISOString().substring(0, 10)
+    },
+    {
+      start: new Date().toISOString().substring(0, 10),
+      end: new Date().toISOString().substring(0, 10)
+    }
+  ]
+};
+
+const testCompetenceList: CompetenceList = {
+  __typename: "CompetenceList",
+  data: [
+    {
+      areaOfExpertise: "lotteries",
+      yearsOfExperience: 3
+    },
+    {
+      areaOfExpertise: "ticket-sales",
+      yearsOfExperience: 3
+    }
+  ]
+};
+</script>
 
 <template>
   <main style="height: 30rem">
-    <div class="text-h3 text-center mb-10">Handle Application</div>
+    <div class="text-h3 text-center mb-10">{{ $t(basePath + "header") }}</div>
+    <v-sheet class="d-flex">
+      <v-sheet>
+        <PersonalInformation :base-path="basePath" />
+        <StatusCard />
+      </v-sheet>
+      <v-sheet class="d-flex flex-column justify-space-between">
+        <v-sheet class="d-flex">
+          <ItemList
+            :header-i18n-key="itemListPath + 'competence-header'"
+            :first-column-i18n-key="competencePath + 'area-of-expertise'"
+            :second-column-i18n-key="competencePath + 'years-of-experience'"
+            :disable-delete="true"
+            v-model:list="testCompetenceList"
+          />
+          <ItemList
+            :header-i18n-key="itemListPath + 'availability-header'"
+            :first-column-i18n-key="availabilityPath + 'start-date'"
+            :second-column-i18n-key="availabilityPath + 'end-date'"
+            :disable-delete="true"
+            v-model:list="testAvailabilityList"
+          />
+        </v-sheet>
+      </v-sheet>
+    </v-sheet>
   </main>
 </template>