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')"
   >
@@ -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;

src/components/drawers/EditKeyResult.vue

@@ -1,7 +1,7 @@
 <template>
   <paged-drawer-wrapper
     ref="drawer"
-    :visible="visible && !!thisKeyResult"
+    :visible="!!thisKeyResult"
     :page-count="pageCount"
     @close="close"
   >
@@ -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: {

src/components/drawers/EditObjective.vue

@@ -1,5 +1,5 @@
 <template>
-  <paged-drawer-wrapper ref="drawer" :visible="visible && !!thisObjective" @close="close">
+  <paged-drawer-wrapper ref="drawer" :visible="!!thisObjective" @close="close">
     <template #title="{ isDone, isSuccess }">
       <template v-if="!isDone">
         {{ $t(editMode ? 'admin.objective.change' : 'admin.objective.new') }}
@@ -168,12 +168,6 @@ export default {
   },
 
   props: {
-    visible: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-
     objective: {
       type: Object,
       required: false,
@@ -261,52 +255,38 @@ export default {
     },
   },
 
-  watch: {
-    visible: {
-      immediate: true,
-      async handler(visible) {
-        this.thisObjective = null;
-        this.periodRange = null;
-        this.lifted = false;
-        if (visible) {
-          this.$refs.drawer.reset();
-        }
-
-        if (!this.objective) {
-          this.thisObjective = {};
-          this.periodRange = null;
-          return;
-        }
-
-        this.loading = true;
-        db.collection('objectives')
-          .doc(this.objective.id)
-          .get()
-          .then((snapshot) => {
-            this.thisObjective = snapshot.data();
-            this.thisObjective.id = this.objective.id;
-            this.periodRange = this.getCurrentDateRange();
-            this.owner = this.thisObjective.parent.path;
-            this.loading = false;
-          });
-
-        const objectiveRef = await db.doc(`objectives/${this.objective.id}`);
-        const keyResults = await db
-          .collection('keyResults')
-          .where('archived', '==', false)
-          .where('objective', '==', objectiveRef);
-        await this.$bind('keyResults', keyResults);
-
-        if (this.canLift) {
-          this.parentRef = await db.doc(
-            this.objective.parent.department || this.objective.parent.organization
-          );
-          const parentData = (await this.parentRef.get()).data();
-          this.parentName = parentData.name;
-          this.parentSlug = parentData.slug;
-        }
-      },
-    },
+  async mounted() {
+    if (!this.objective) {
+      this.thisObjective = {};
+      return;
+    }
+
+    db.collection('objectives')
+      .doc(this.objective.id)
+      .get()
+      .then((snapshot) => {
+        this.thisObjective = snapshot.data();
+        this.thisObjective.id = this.objective.id;
+        this.periodRange = this.getCurrentDateRange();
+        this.owner = this.thisObjective.parent.path;
+        this.loading = false;
+      });
+
+    const objectiveRef = await db.doc(`objectives/${this.objective.id}`);
+    const keyResults = await db
+      .collection('keyResults')
+      .where('archived', '==', false)
+      .where('objective', '==', objectiveRef);
+    await this.$bind('keyResults', keyResults);
+
+    if (this.canLift) {
+      this.parentRef = await db.doc(
+        this.objective.parent.department || this.objective.parent.organization
+      );
+      const parentData = (await this.parentRef.get()).data();
+      this.parentName = parentData.name;
+      this.parentSlug = parentData.slug;
+    }
   },
 
   methods: {