* apply and misapply by open contracts + modals

feature: #8
2023-01-08 00:30:41 +01:00
parent 1872097882
commit 1f9db78a4f
12 changed files with 411 additions and 83 deletions
--- a/mocks/fst.postman_collection.json
+++ b/mocks/fst.postman_collection.json
@@ -190,7 +190,107 @@
 					"_postman_previewlanguage": null,
 					"header": null,
 					"cookie": [],
-					"body": "{\r\n  \"openContracts\": [\r\n    {\r\n      \"id\" : \"DZ22\",\r\n      \"name\" : \"Name1\",\r\n      \"status\" : \"open\",\r\n      \"appointment\" : \"2020-01-01T12:00:00Z\",\r\n      \"notes\" : \"From Feb 2023 To March 2023\"\r\n    },\r\n    {\r\n      \"id\" : \"PC22\",\r\n      \"name\" : \"Name2\",\r\n      \"status\" : \"open\",\r\n      \"appointment\" : \"2020-01-12T12:00:00Z\",\r\n      \"notes\" : \"From Feb 2023 To March 2023\"\r\n    }\r\n  ]\r\n}"
+					"body": "{\r\n  \"openContracts\": [\r\n    {\r\n      \"id\" : \"DZ22\",\r\n      \"name\" : \"Name1\",\r\n      \"status\" : \"open\",\r\n      \"appointment\" : \"2020-01-01T12:00:00Z\",\r\n      \"notes\" : \"From Feb 2023 To March 2023\",\r\n      \"registered\" : true\r\n    },\r\n    {\r\n      \"id\" : \"PC22\",\r\n      \"name\" : \"Name2\",\r\n      \"status\" : \"open\",\r\n      \"appointment\" : \"2020-01-12T12:00:00Z\",\r\n      \"notes\" : \"From Feb 2023 To March 2023\",\r\n      \"registered\" : false\r\n    }\r\n  ]\r\n}"
+				}
+			]
+		},
+		{
+			"name": "Apply for contract",
+			"request": {
+				"method": "POST",
+				"header": [],
+				"body": {
+					"mode": "raw",
+					"raw": "{\r\n    \"id\" : \"DZ2022\",\r\n    \"role\" : \"leiter\"\r\n}"
+				},
+				"url": {
+					"raw": "{{url}}/contract/apply",
+					"host": [
+						"{{url}}"
+					],
+					"path": [
+						"contract",
+						"apply"
+					]
+				}
+			},
+			"response": [
+				{
+					"name": "Apply for contract",
+					"originalRequest": {
+						"method": "POST",
+						"header": [],
+						"body": {
+							"mode": "raw",
+							"raw": "{\r\n    \"id\" : \"DZ2022\",\r\n    \"role\" : \"leiter\" \r\n}"
+						},
+						"url": {
+							"raw": "{{url}}/contract/apply",
+							"host": [
+								"{{url}}"
+							],
+							"path": [
+								"contract",
+								"apply"
+							]
+						}
+					},
+					"status": "OK",
+					"code": 200,
+					"_postman_previewlanguage": null,
+					"header": null,
+					"cookie": [],
+					"body": ""
+				}
+			]
+		},
+		{
+			"name": "New Request",
+			"request": {
+				"method": "POST",
+				"header": [],
+				"body": {
+					"mode": "raw",
+					"raw": "{\r\n    \"id\" : \"DZ2022\"\r\n}"
+				},
+				"url": {
+					"raw": "{{url}}/contract/misapply",
+					"host": [
+						"{{url}}"
+					],
+					"path": [
+						"contract",
+						"misapply"
+					]
+				}
+			},
+			"response": [
+				{
+					"name": "New Request",
+					"originalRequest": {
+						"method": "POST",
+						"header": [],
+						"body": {
+							"mode": "raw",
+							"raw": "{\r\n    \"id\" : \"DZ2022\"\r\n}"
+						},
+						"url": {
+							"raw": "{{url}}/contract/misapply",
+							"host": [
+								"{{url}}"
+							],
+							"path": [
+								"contract",
+								"misapply"
+							]
+						}
+					},
+					"status": "OK",
+					"code": 200,
+					"_postman_previewlanguage": null,
+					"header": null,
+					"cookie": [],
+					"body": null
 				}
 			]
 		}
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,5 +3,24 @@ import { RouterView } from 'vue-router'
 </script>

 <template>
+  <RegisterModal v-if="modal === 'register'" />
+  <DeregisterModal v-if="modal === 'deregister'" />
  <RouterView />
 </template>
+<script>
+import { mapActions } from 'vuex'
+import DeregisterModal from './components/modals/DeregisterModal.vue'
+import RegisterModal from './components/modals/RegisterModal.vue'
+
+export default {
+  components: { DeregisterModal, RegisterModal },
+  computed: {
+    modal() {
+      return this.$store.state.modal.modal
+    }
+  },
+  methods: {
+    ...mapActions(['openModal', 'closeModal'])
+  }
+}
+</script>
--- a/src/components/modals/DeregisterModal.vue
+++ b/src/components/modals/DeregisterModal.vue
@@ -0,0 +1,80 @@
+<template>
+  <div
+    id="popup-modal"
+    tabindex="-1"
+    class="fixed top-0 left-0 right-0 z-50 flex justify-center text-center p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full">
+    <div class="relative w-full h-full max-w-md md:h-auto">
+      <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+        <button
+          type="button"
+          class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white"
+          data-modal-hide="popup-modal"
+          @click="closeModal()">
+          <svg
+            aria-hidden="true"
+            class="w-5 h-5"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              fill-rule="evenodd"
+              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+              clip-rule="evenodd"></path>
+          </svg>
+          <span class="sr-only">Close modal</span>
+        </button>
+        <div class="p-6 text-center">
+          <svg
+            aria-hidden="true"
+            class="mx-auto mb-4 text-gray-400 w-14 h-14 dark:text-gray-200"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+          </svg>
+          <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
+            Bist du sicher, dass du abmelden möchtest?
+          </h3>
+          <button
+            data-modal-hide="popup-modal"
+            type="button"
+            class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2"
+            @click="deregister()">
+            Ja, bin sicher
+          </button>
+          <button
+            data-modal-hide="popup-modal"
+            type="button"
+            class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
+            @click="closeModal()">
+            Nein, stornieren
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapActions } from 'vuex'
+import { misapply } from '../../service/ContractsService';
+
+export default {
+  computed: {
+    selectedContract() {
+      return this.$store.state.contracts.selectedContract
+    }
+  },
+  methods: {
+    ...mapActions(['closeModal']),
+    deregister() {
+      misapply(this.selectedContract)
+      this.closeModal()
+    }
+  }
+}
+</script>
--- a/src/components/modals/RegisterModal.vue
+++ b/src/components/modals/RegisterModal.vue
@@ -0,0 +1,70 @@
+<template>
+  <div
+    id="popup-modal"
+    tabindex="-1"
+    class="fixed top-0 left-0 right-0 z-50 flex justify-center text-center p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full">
+    <div class="relative w-full h-full max-w-md md:h-auto">
+      <div class="relative bg-white rounded-lg shadow dark:bg-gray-700" @click="closeModal()">
+        <button
+          type="button"
+          class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white"
+          data-modal-hide="popup-modal">
+          <svg
+            aria-hidden="true"
+            class="w-5 h-5"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              fill-rule="evenodd"
+              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+              clip-rule="evenodd"></path>
+          </svg>
+          <span class="sr-only">Close modal</span>
+        </button>
+        <div class="p-6 text-center">
+          <font-awesome-icon icon="fa-solid fa-circle-question" class="h-12" />
+          <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
+            Wie möchtest du anmelden? Als Leiter oder Mitarbeiter
+          </h3>
+          <button
+            class="bg-blue-500 text-white active:bg-emerald-600 font-bold uppercase px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-3 mb-1 ease-linear transition-all duration-150"
+            type="button"
+            @click="apply('leiter')">
+            <font-awesome-icon icon="fa-solid fa-chalkboard-user" class="h-5" /><br />
+            Leiter
+          </button>
+          <button
+            class="bg-blue-500 text-white active:bg-emerald-600 font-bold uppercase px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+            type="button"
+            @click="apply('mitarbeiter')">
+            <font-awesome-icon icon="fa-solid fa-user-large" class="h-5" /><br />
+            Mitarbeiter
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapActions } from 'vuex'
+import { applyContract } from '../../service/ContractsService'
+
+export default {
+  computed: {
+    selectedContract() {
+      return this.$store.state.contracts.selectedContract
+    }
+  },
+  methods: {
+    ...mapActions(['closeModal']),
+    apply(role) {
+      const id = this.selectedContract
+      if (id === null) {
+        //TODO: router push error page
+      }
+      applyContract(id, role)
+    }
+  }
+}
+</script>
--- a/src/components/tabs/ContractTab.vue
+++ b/src/components/tabs/ContractTab.vue
@@ -95,7 +95,7 @@
          <td class="text align-top text-xl pl-4 max-sm:text-base py-2">Beispiele:</td>
          <td class="w-full pl-2 text-lg py-2">
            <ul class="list-disc pl-4">
-              <li v-for="(example, index) in contract.examples" :key="index">
+              <li v-for="(example, index) in contract.examples" :key="example">
                <a :href="example" class="underline">
                  Link {{ index + 1 }}
                  <font-awesome-icon
--- a/src/main.js
+++ b/src/main.js
@@ -11,7 +11,9 @@ import {
  faEnvelope,
  faArrowUpRightFromSquare,
  faCircleUser,
-  faUserLarge
+  faUserLarge,
+  faCircleQuestion,
+  faChalkboardUser
 } from '@fortawesome/free-solid-svg-icons'

 import './assets/main.css'
@@ -23,6 +25,8 @@ library.add(faEnvelope)
 library.add(faArrowUpRightFromSquare)
 library.add(faCircleUser)
 library.add(faUserLarge)
+library.add(faCircleQuestion)
+library.add(faChalkboardUser)

 const i18n = createI18n()

--- a/src/service/ContractsService.js
+++ b/src/service/ContractsService.js
@@ -45,3 +45,32 @@ export async function getContractById(identifier) {
      router.push('/error?message=' + error.message + '&code=' + error.code)
    })
 }
+
+export async function applyContract(contractID, prefRole) {
+  return HttpClient.post('/contract/apply', {
+    id: contractID,
+    role: prefRole
+  })
+    .then(resp => {
+      //TODO: send also auth token with request
+      return resp.data
+    })
+    .catch(error => {
+      console.error(error)
+      router.push('/error?message=' + error.message + '&code=' + error.code)
+    })
+}
+
+export async function misapply(contractID) {
+  return HttpClient.post('/contract/misapply', {
+    id: contractID
+  })
+    .then(resp => {
+      //TODO: send also auth token with request
+      return resp.data
+    })
+    .catch(error => {
+      console.error(error)
+      router.push('/error?message=' + error.message + '&code=' + error.code)
+    })
+}
--- a/src/store/contracts.module.js
+++ b/src/store/contracts.module.js
@@ -4,7 +4,8 @@ export default {
  state: () => ({
    contracts: [],
    currentContract: null,
-    openContracts: []
+    openContracts: [],
+    selectedContract: null
  }),
  mutations: {
    initContracts(state, data) {
@@ -15,6 +16,9 @@ export default {
    },
    setCurrentContract(state, data) {
      state.currentContract = data
+    },
+    setSelectedContract(state, contractID) {
+      state.selectedContract = contractID
    }
  },
  actions: {
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,6 +1,6 @@
 import { createStore } from 'vuex'
 import contracts from './contracts.module'
-import moduleB from './moduleB.module'
+import modal from './modal.module'
 import keycloak from './keycloak.module'
 import createPersistedState from 'vuex-persistedstate'

@@ -8,7 +8,7 @@ export default createStore({
  modules: {
    keycloak: keycloak,
    contracts: contracts,
-    b: moduleB
+    modal: modal
  },
  plugins: [createPersistedState()]
 })
--- a/src/store/modal.module.js
+++ b/src/store/modal.module.js
@@ -0,0 +1,22 @@
+export default {
+  state: () => ({
+    modal: ''
+  }),
+  mutations: {
+    setModal(state, modalName) {
+      state.modal = modalName
+    },
+    resetModal(state) {
+      state.modal = ''
+    }
+  },
+  actions: {
+    openModal({ commit }, modalName) {
+      commit('setModal', modalName)
+    },
+    closeModal({ commit }) {
+      commit('resetModal')
+    }
+  },
+  getters: {}
+}
--- a/src/store/moduleB.module.js
+++ b/src/store/moduleB.module.js
@@ -1,6 +0,0 @@
-export default {
-  state: () => ({}),
-  mutations: {},
-  actions: {},
-  getters: {}
-}
--- a/src/views/OpenContractsView.vue
+++ b/src/views/OpenContractsView.vue
@@ -2,6 +2,7 @@
 import Navbar from '../components/Navbar.vue'
 </script>
 <template>
+  <div>
    <Navbar /><!-- Causes rerendering each time TODO: possible use in App.vue-->
    <div class="flex justify-center pt-8 pb-8">
      <p
@@ -52,15 +53,23 @@ import Navbar from '../components/Navbar.vue'
                  </button>
                </RouterLink>
                <button
+                  v-if="contract.registered"
                  class="bg-emerald-500 text-white active:bg-emerald-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                  type="button"
-                @click="openDialog('register')">
+                  @click="
+                    selectContract(contract.id);
+                    openModal('register')
+                  ">
                  Anmelden
                </button>
                <button
+                  v-if="!contract.registered"
                  class="bg-red-500 text-white active:bg-red-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                  type="button"
-                @click="openDialog('deregister')">
+                  @click="
+                    selectContract(contract.id);
+                    openModal('deregister')
+                  ">
                  Abmelden
                </button>
              </td>
@@ -69,16 +78,12 @@ import Navbar from '../components/Navbar.vue'
        </table>
      </div>
    </div>
+  </div>
 </template>
 <script>
 import { mapActions } from 'vuex'

 export default {
-  data() {
-    return {
-      dialog: null
-    }
-  },
  computed: {
    openContracts() {
      return this.$store.state.contracts.openContracts
@@ -88,9 +93,10 @@ export default {
    this.fetchOpenContracts()
  },
  methods: {
-    ...mapActions(['fetchOpenContracts']),
-    openDialog(name) {
-      this.dialog = name
+    ...mapActions(['fetchOpenContracts', 'openModal']),
+    selectContract(ID) {
+      console.log(ID)
+      this.$store.commit('setSelectedContract', ID)
    }
  }
 }