From b633c2795b285688f5be10c05627dcd7ab8c3e53 Mon Sep 17 00:00:00 2001
From: Denys Seredenko <denis-seredenko@ukr.net>
Date: Fri, 13 Jan 2023 20:56:26 +0100
Subject: [PATCH] * change status as admin feature: #13

---
 src/App.vue                                 |  4 +-
 src/components/modals/ChangeStatusModal.vue | 89 +++++++++++++++++++++
 src/components/tabs/ContractTab.vue         |  5 +-
 src/service/ContractsService.js             | 20 +++++
 4 files changed, 116 insertions(+), 2 deletions(-)
 create mode 100644 src/components/modals/ChangeStatusModal.vue

diff --git a/src/App.vue b/src/App.vue
index 48c0b26..4b64a38 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,17 +7,19 @@ import { RouterView } from 'vue-router'
   <DeregisterModal v-if="modal === 'deregister'" />
   <CreateModal v-if="modal === 'createContract'" />
   <DeleteModal v-if="modal === 'deleteModal'" />
+  <ChangeStatusModal v-if="modal === 'changeStatus'" />
   <RouterView />
 </template>
 <script>
 import { mapActions } from 'vuex'
+import ChangeStatusModal from './components/modals/ChangeStatusModal.vue'
 import CreateModal from './components/modals/CreateModal.vue'
 import DeleteModal from './components/modals/DeleteModal.vue'
 import DeregisterModal from './components/modals/DeregisterModal.vue'
 import RegisterModal from './components/modals/RegisterModal.vue'
 
 export default {
-  components: { DeregisterModal, RegisterModal, CreateModal, DeleteModal },
+  components: { DeregisterModal, RegisterModal, CreateModal, DeleteModal, ChangeStatusModal },
   computed: {
     modal() {
       return this.$store.state.modal.modal
diff --git a/src/components/modals/ChangeStatusModal.vue b/src/components/modals/ChangeStatusModal.vue
new file mode 100644
index 0000000..1603815
--- /dev/null
+++ b/src/components/modals/ChangeStatusModal.vue
@@ -0,0 +1,89 @@
+<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">
+          <p class="text-xl font-semibold font-sans">Status wächseln</p>
+          <select
+            id="statuses"
+            v-model="selected"
+            class="bg-gray-50 border mt-2 border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+            <option value="nothing" selected>Choose a status</option>
+            <option v-for="status in statuses" :key="status" :value="status">
+              {{ status }}
+            </option>
+          </select>
+          <button
+            class="inline-block px-6 mt-3 py-2.5 bg-green-500 text-white font-medium text-normal rounded shadow-md">
+            Wächseln
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapActions } from 'vuex'
+import router from '../../router/index'
+import { getStatuses, changeStatus } from '../../service/ContractsService'
+
+export default {
+  data() {
+    return {
+      selected: 'nothing',
+      statuses: ['A', 'B']
+    }
+  },
+  computed: {
+    selectedContract() {
+      return this.$store.state.contracts.selectedContract
+    }
+  },
+  async mounted() {
+    this.statuses = await getStatuses()
+  },
+  methods: {
+    ...mapActions(['closeModal']),
+    changeStatus() {
+      const id = this.selectedContract
+      if (id === null) {
+        this.closeModal()
+        router.push('/error?message=' + 'Contract not found' + '&code=404')
+      }
+      if (selected === 'nothing') return
+      //TODO: provide here contractID
+      changeStatus(id, this.selected)
+        .then(resp => {
+          this.closeModal()
+          this.$router.go()
+        })
+        .catch(error => {
+          console.error(error)
+          this.closeModal()
+          router.push('/error?message=' + error.message + '&code=' + error.code)
+        })
+    }
+  }
+}
+</script>
diff --git a/src/components/tabs/ContractTab.vue b/src/components/tabs/ContractTab.vue
index aef0712..fb62cc3 100644
--- a/src/components/tabs/ContractTab.vue
+++ b/src/components/tabs/ContractTab.vue
@@ -10,7 +10,8 @@
       </button>
       <button
         type="button"
-        class="inline-block max-sm:mt-3 px-6 mr-3 py-2.5 bg-blue-600 text-white font-medium text-xs rounded shadow-md">
+        class="inline-block max-sm:mt-3 px-6 mr-3 py-2.5 bg-blue-600 text-white font-medium text-xs rounded shadow-md"
+        @click="openModal('changeStatus')">
         Status wächseln
       </button>
       <button
@@ -113,6 +114,7 @@
 </template>
 <script>
 import { moveToNextStep } from '../../service/ContractsService'
+import { mapActions } from 'vuex'
 
 export default {
   props: {
@@ -122,6 +124,7 @@ export default {
     }
   },
   methods: {
+    ...mapActions(['openModal']),
     async nextStep() {
       await moveToNextStep(this.contract.id)
         .then(resp => {
diff --git a/src/service/ContractsService.js b/src/service/ContractsService.js
index 2c09ec6..58d7040 100644
--- a/src/service/ContractsService.js
+++ b/src/service/ContractsService.js
@@ -115,3 +115,23 @@ export async function moveToNextStep(contractId) {
     id: contractId
   })
 }
+
+export async function getStatuses(contractId) {
+  return HttpClient.get('/statuses')
+    .then(resp => {
+      //TODO: send also auth token with request
+      return resp.data.statuses
+    })
+    .catch(error => {
+      console.error(error)
+      router.push('/error?message=' + error.message + '&code=' + error.code)
+    })
+}
+
+export async function changeStatus(contractId, newStatus) {
+  //TODO: send also auth token with request
+  return HttpClient.post('/contract/status', {
+    id: contractId,
+    status: newStatus
+  })
+}