From 46e34edf55fe5a3f593a63afee0ba8ab7bbeade9 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Mon, 13 Nov 2023 14:20:21 +0100
Subject: [PATCH] Disable key result owner select on archive

---
 src/components/drawers/EditKeyResult.vue | 13 ++++++-------
 src/locale/locales/nb-NO.json            |  2 +-
 src/styles/_vSelect.scss                 | 19 +++++++++++++++++++
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/components/drawers/EditKeyResult.vue b/src/components/drawers/EditKeyResult.vue
index 877e0b5c9..64121e89e 100644
--- a/src/components/drawers/EditKeyResult.vue
+++ b/src/components/drawers/EditKeyResult.vue
@@ -40,6 +40,7 @@
             v-model="contributor"
             name="owner"
             input-type="select"
+            :disabled="thisKeyResult?.archived"
             :select-options="ownerOptions"
             :label="$t('fields.owner')"
             rules="required"
@@ -89,28 +90,25 @@
           </form-component>
         </template>
 
-        <template
-          v-if="!thisKeyResult?.archived"
-          #actions="{ handleSubmit, submitDisabled }"
-        >
+        <template #actions="{ handleSubmit, submitDisabled }">
           <pkt-button
             v-if="pageIndex === 1"
             :text="$t('btn.cancel')"
             skin="tertiary"
-            :disabled="loading"
+            :disabled="loading || thisKeyResult?.archived"
             @onClick="close"
           />
           <pkt-button
             v-else
             :text="$t('btn.back')"
             skin="tertiary"
-            :disabled="loading"
+            :disabled="loading || thisKeyResult?.archived"
             @onClick="prev"
           />
 
           <btn-save
             :label="pageIndex === pageCount ? $t('btn.complete') : $t('btn.continue')"
-            :disabled="submitDisabled || loading"
+            :disabled="submitDisabled || loading || thisKeyResult?.archived"
             variant="label-only"
             @click="handleSubmit(save)"
           />
@@ -393,6 +391,7 @@ export default {
         await this.syncObjectiveContributor();
         this.thisKeyResult.archived = true;
         this.$emit('archive', this.thisKeyResult);
+        this.$refs.drawer.reset();
       } catch (error) {
         this.$toasted.error(
           this.$t('toaster.error.archive', { document: this.thisKeyResult.name })
diff --git a/src/locale/locales/nb-NO.json b/src/locale/locales/nb-NO.json
index 9c5e301da..df8e062dd 100644
--- a/src/locale/locales/nb-NO.json
+++ b/src/locale/locales/nb-NO.json
@@ -455,7 +455,7 @@
       "new": "Nytt nøkkelresultat",
       "created": "Nøkkelresultatet ble opprettet!",
       "updated": "Nøkkelresultatet ble endret!",
-      "change": "Rediger Nøkkelresultat",
+      "change": "Rediger nøkkelresultat",
       "delete": "Slett nøkkelresultat"
     },
     "measurement": {
diff --git a/src/styles/_vSelect.scss b/src/styles/_vSelect.scss
index 19405650a..0767734ce 100644
--- a/src/styles/_vSelect.scss
+++ b/src/styles/_vSelect.scss
@@ -17,6 +17,9 @@
   --vs-dropdown-option--active-color: var(--color-active);
   --vs-dropdown-box-shadow: 0px 5px 30px -10px rgba(0, 0, 0, 0.2);
   --vs-transition-duration: 100ms;
+  --vs-disabled-bg: var(--color-gray);
+  --vs-disabled-color: var(--color-grayscale-30);
+  --vs-disabled-border: var(--color-grayscale-30);
 }
 
 .vs__dropdown-toggle {
@@ -111,6 +114,22 @@
     }
   }
 
+  &.vs--disabled {
+    color: var(--color-grayscale-30);
+    background-color: var(--color-gray);
+    border-color: var(--color-grayscale-30);
+
+    .vs__selected {
+      color: var(--vs-disabled-color);
+    }
+    .vs__actions {
+      --fg-color: var(--vs-disabled-color);
+    }
+    .vs__dropdown-toggle {
+      border-color: var(--vs-disabled-border);
+    }
+  }
+
   &:focus-within:not(.vs--open) {
     outline: 2px solid var(--color-active);