Disable key result owner select on archive

oslokommune · Nov 13, 2023 · 46e34ed · 46e34ed
1 parent 237abf9
commit 46e34ed
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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);