Use "real" conditional rendering for drawers

src/components/drawers/EditItemDrawer.vue

@@ -1,7 +1,7 @@
 <template>
   <paged-drawer-wrapper
     ref="drawer"
-    :visible="visible"
+    :visible="!!thisItem"
     :page-count="pageCount"
     @close="$emit('close')"
   >
@@ -102,25 +102,25 @@
           </pkt-alert>
         </template>
 
-        <template v-if="!thisItem?.archived" #actions="{ handleSubmit, submitDisabled }">
+        <template #actions="{ handleSubmit, submitDisabled }">
           <pkt-button
             v-if="pageIndex === 1"
             :text="$t('btn.cancel')"
             skin="tertiary"
-            :disabled="loading"
-            @onClick="$emit('close')"
+            :disabled="loading || thisItem?.archived"
+            @onClick="thisItem = null"
           />
           <pkt-button
             v-else
             :text="$t('btn.back')"
             skin="tertiary"
-            :disabled="loading"
+            :disabled="loading || thisItem?.archived"
             @onClick="prev"
           />
 
           <btn-save
             :label="pageIndex === pageCount ? $t('btn.complete') : $t('btn.continue')"
-            :disabled="submitDisabled || loading"
+            :disabled="submitDisabled || loading || thisItem?.archived"
             variant="label-only"
             @click="handleSubmit(save)"
           />
@@ -178,12 +178,6 @@ export default {
   },
 
   props: {
-    visible: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-
     item: {
       type: Object,
       required: true,
@@ -214,21 +208,6 @@ export default {
   },
 
   watch: {
-    visible: {
-      immediate: true,
-      async handler(visible) {
-        if (visible) {
-          this.$refs.drawer.reset();
-          this.redirectTimer = null;
-          this.redirectCounter = 3;
-        }
-
-        this.loading = true;
-        this.thisItem = { ...this.item };
-        this.loading = false;
-      },
-    },
-
     item(item, prevItem) {
       // Watch for slug changes and redirect if needed.
       if (item.id === prevItem.id && item.slug !== prevItem.slug && !this.redirectTimer) {
@@ -248,6 +227,10 @@ export default {
     },
   },
 
+  mounted() {
+    this.thisItem = { ...this.item };
+  },
+
   methods: {
     async save() {
       const { pageIndex, next } = this.$refs.drawer;
@@ -310,6 +293,7 @@ export default {
       try {
         await this.getObjectType().archive(this.item.id);
         this.thisItem.archived = true;
+        this.$refs.drawer.reset();
       } catch (error) {
         this.$toasted.error(
           this.$t('toaster.error.archive', { document: this.item.name })

src/components/drawers/EditKeyResult.vue

@@ -1,9 +1,9 @@
 <template>
   <paged-drawer-wrapper
     ref="drawer"
-    :visible="visible && !!thisKeyResult"
+    :visible="!!thisKeyResult"
     :page-count="pageCount"
-    @close="close"
+    @close="$emit('close')"
   >
     <template #title="{ isDone, isSuccess }">
       <template v-if="!isDone">
@@ -164,7 +164,10 @@ import { mapState, mapGetters } from 'vuex';
 import { PktButton } from '@oslokommune/punkt-vue2';
 import { db } from '@/config/firebaseConfig';
 import { FormSection, BtnSave, BtnDelete } from '@/components/generic/form';
-import { isDepartment, isOrganization } from '@/util/getActiveItemType';
+import getActiveItemType, {
+  isDepartment,
+  isOrganization,
+} from '@/util/getActiveItemType';
 import ArchivedRestore from '@/components/ArchivedRestore.vue';
 import KeyResult from '@/db/KeyResult';
 import PagedDrawerWrapper from '@/components/drawers/PagedDrawerWrapper.vue';
@@ -183,12 +186,6 @@ export default {
   },
 
   props: {
-    visible: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-
     objective: {
       type: Object,
       required: true,
@@ -224,18 +221,7 @@ export default {
       'user',
     ]),
     ...mapGetters(['hasEditRights']),
-    thisLevel() {
-      if (!this.objectiveOwner) {
-        return [];
-      }
-      if (isOrganization(this.objectiveOwner)) {
-        return this.organizations.find((o) => o.id === this.objectiveOwner.id);
-      }
-      if (isDepartment(this.objectiveOwner)) {
-        return this.departments.find((d) => d.id === this.objectiveOwner.id);
-      }
-      return this.products.find((p) => p.id === this.objectiveOwner.id);
-    },
+
     children() {
       if (!this.objectiveOwner) {
         return [];
@@ -252,24 +238,26 @@ export default {
       }
       return [];
     },
-    thisLevelOption() {
-      return {
-        value: this.thisLevel.path,
-        name: this.thisLevel.name,
-      };
-    },
+
     isAdmin() {
       const { organization } = this.activeItem;
       const isAdminOfOrganization = organization
         ? this.user.admin?.includes(organization.id)
         : this.user.admin?.includes(this.activeItem.id);
       return isAdminOfOrganization || this.user.superAdmin;
     },
+
     ownerOptions() {
       const options = [];
 
-      if (this.memberOfLevel(this.objectiveOwner) || this.isAdmin) {
-        options.push(this.thisLevelOption);
+      if (
+        this.objectiveOwner &&
+        (this.memberOfLevel(this.objectiveOwner) || this.isAdmin)
+      ) {
+        const { id, name } = this.objectiveOwner;
+        const parentType = getActiveItemType(this.objective.parent);
+        const path = `${parentType}s/${id}`;
+        options.push({ value: path, name });
       }
 
       this.children
@@ -282,60 +270,45 @@ export default {
 
       return options;
     },
+
     editMode() {
       return !!this.thisKeyResult?.id;
     },
   },
 
-  watch: {
-    visible: {
-      immediate: true,
-      async handler(visible) {
-        this.thisKeyResult = null;
-        if (visible) {
-          this.$refs.drawer.reset();
-        }
-
-        this.keyResultDefaults.unit = this.$t('keyResult.defaultUnit');
-
-        if (!this.keyResult) {
-          this.thisKeyResult = { ...this.keyResultDefaults };
-          return;
-        }
-
-        this.loading = true;
-        db.collection('keyResults')
-          .doc(this.keyResult.id)
-          .get()
-          .then((snapshot) => {
-            this.thisKeyResult = {
-              ...this.keyResultDefaults,
-              ...snapshot.data(),
-            };
-            this.thisKeyResult.id = this.keyResult.id;
-            this.contributor = this.ownerOptions.find(
-              (o) => o.name === this.keyResult.parent.name
-            );
-            this.loading = false;
-          });
-      },
-    },
-    objective: {
-      immediate: true,
-      async handler(objective) {
-        const parentRef = db.doc(await objective.parent);
-        this.$bind('objectiveOwner', parentRef);
-      },
-    },
-    ownerOptions: {
-      immediate: true,
-      async handler() {
-        // Set default option
-        if (!this.keyResult?.id && this.ownerOptions?.length === 1) {
-          this.contributor = this.ownerOptions[0];
-        }
-      },
-    },
+  async mounted() {
+    this.keyResultDefaults.unit = this.$t('keyResult.defaultUnit');
+    this.loading = true;
+
+    const parentType = getActiveItemType(this.objective.parent);
+    await this.$bind(
+      'objectiveOwner',
+      db.collection(`${parentType}s`).doc(this.objective.parent.id)
+    );
+
+    if (!this.keyResult) {
+      this.thisKeyResult = { ...this.keyResultDefaults };
+      this.contributor =
+        this.ownerOptions.find((o) => o.name === this.activeItem.name) ||
+        this.ownerOptions[0];
+      this.loading = false;
+      return;
+    }
+
+    db.collection('keyResults')
+      .doc(this.keyResult.id)
+      .get()
+      .then((snapshot) => {
+        this.thisKeyResult = {
+          ...this.keyResultDefaults,
+          ...snapshot.data(),
+        };
+        this.thisKeyResult.id = this.keyResult.id;
+        this.contributor = this.ownerOptions.find(
+          (o) => o.name === this.keyResult.parent.name
+        );
+        this.loading = false;
+      });
   },
 
   methods: {
@@ -425,8 +398,8 @@ export default {
       }
     },
 
-    close(e) {
-      this.$emit('close', e);
+    close() {
+      this.thisKeyResult = null;
     },
   },
 };