From 51fca8a7a3c78f97688680a09d44a412d4b0c0f3 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Mon, 20 Nov 2023 15:36:15 +0100
Subject: [PATCH] Use "real" conditional rendering for drawers

---
 src/components/drawers/EditItemDrawer.vue |  27 +----
 src/components/drawers/EditKeyResult.vue  | 127 +++++++++-------------
 src/components/drawers/EditObjective.vue  |  86 ++++++---------
 src/components/drawers/KpiDrawer.vue      |  65 ++++-------
 src/views/Item/ItemAbout.vue              |   7 +-
 src/views/Item/ItemMeasurements.vue       |   2 +-
 src/views/Item/ItemOKRs.vue               |   5 +-
 7 files changed, 119 insertions(+), 200 deletions(-)

diff --git a/src/components/drawers/EditItemDrawer.vue b/src/components/drawers/EditItemDrawer.vue
index d5c0f4ae6..6cc9dc361 100644
--- a/src/components/drawers/EditItemDrawer.vue
+++ b/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;
diff --git a/src/components/drawers/EditKeyResult.vue b/src/components/drawers/EditKeyResult.vue
index 5e4b5bafd..7ec16bf05 100644
--- a/src/components/drawers/EditKeyResult.vue
+++ b/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,12 +238,7 @@ export default {
       }
       return [];
     },
-    thisLevelOption() {
-      return {
-        value: this.thisLevel.path,
-        name: this.thisLevel.name,
-      };
-    },
+
     isAdmin() {
       const { organization } = this.activeItem;
       const isAdminOfOrganization = organization
@@ -265,11 +246,18 @@ export default {
         : 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: {
diff --git a/src/components/drawers/EditObjective.vue b/src/components/drawers/EditObjective.vue
index 673d7a9cb..a36750cbe 100644
--- a/src/components/drawers/EditObjective.vue
+++ b/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: {
diff --git a/src/components/drawers/KpiDrawer.vue b/src/components/drawers/KpiDrawer.vue
index 54d6de85c..b223d1a05 100644
--- a/src/components/drawers/KpiDrawer.vue
+++ b/src/components/drawers/KpiDrawer.vue
@@ -1,7 +1,7 @@
 <template>
   <paged-drawer-wrapper
     ref="drawer"
-    :visible="visible"
+    :visible="!!thisKpi"
     :page-count="pageCount"
     @close="$emit('close')"
   >
@@ -250,12 +250,6 @@ export default {
   },
 
   props: {
-    visible: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-
     kpi: {
       type: Object,
       required: false,
@@ -287,41 +281,28 @@ export default {
     },
   },
 
-  watch: {
-    visible: {
-      immediate: true,
-      async handler(visible) {
-        this.thisKpi = null;
-
-        if (!visible) {
-          return;
-        }
-
-        this.$refs.drawer.reset();
-
-        if (!this.kpi) {
-          this.thisKpi = {
-            name: '',
-            description: '',
-            format: 'integer',
-            startValue: 'zero',
-            preferredTrend: 'increase',
-            kpiType: 'plain',
-            updateFrequency: 'daily',
-            sheetUrl: '',
-            sheetName: '',
-            sheetCell: '',
-            api: true,
-            auto: false,
-          };
-          return;
-        }
-
-        this.loading = true;
-        this.thisKpi = this.kpi ? { id: this.kpi.id, ...this.kpi } : {};
-        this.loading = false;
-      },
-    },
+  mounted() {
+    if (!this.kpi) {
+      this.thisKpi = {
+        name: '',
+        description: '',
+        format: 'integer',
+        startValue: 'zero',
+        preferredTrend: 'increase',
+        kpiType: 'plain',
+        updateFrequency: 'daily',
+        sheetUrl: '',
+        sheetName: '',
+        sheetCell: '',
+        api: true,
+        auto: false,
+      };
+      return;
+    }
+
+    this.loading = true;
+    this.thisKpi = this.kpi ? { id: this.kpi.id, ...this.kpi } : {};
+    this.loading = false;
   },
 
   methods: {
diff --git a/src/views/Item/ItemAbout.vue b/src/views/Item/ItemAbout.vue
index 0450be698..a9b452a1e 100644
--- a/src/views/Item/ItemAbout.vue
+++ b/src/views/Item/ItemAbout.vue
@@ -46,10 +46,9 @@
     </template>
 
     <item-drawer
-      :visible="hasEditRights && showItemDrawer"
+      v-if="hasEditRights && showItemDrawer"
       :item="activeItem"
       @close="showItemDrawer = false"
-      @hook:mounted="showItemDrawer = String($route.query.edit).toLowerCase() === 'true'"
     />
 
     <profile-modal
@@ -197,6 +196,10 @@ export default {
     },
   },
 
+  mounted() {
+    this.showItemDrawer = String(this.$route.query.edit).toLowerCase() === 'true';
+  },
+
   methods: {
     openProfileModal(profileId) {
       this.showProfileModal = true;
diff --git a/src/views/Item/ItemMeasurements.vue b/src/views/Item/ItemMeasurements.vue
index 270a9ef17..9bda215e3 100644
--- a/src/views/Item/ItemMeasurements.vue
+++ b/src/views/Item/ItemMeasurements.vue
@@ -65,7 +65,7 @@
     </empty-page>
 
     <kpi-drawer
-      :visible="hasEditRights && showKpiDrawer"
+      v-if="hasEditRights && showKpiDrawer"
       :kpi="drawerEditMode ? activeKpi : null"
       @create="kpiCreated"
       @close="showKpiDrawer = false"
diff --git a/src/views/Item/ItemOKRs.vue b/src/views/Item/ItemOKRs.vue
index 3dfee0e13..312d33d19 100644
--- a/src/views/Item/ItemOKRs.vue
+++ b/src/views/Item/ItemOKRs.vue
@@ -48,7 +48,7 @@
     </empty-page>
 
     <objective-drawer
-      :visible="showObjectiveDrawer"
+      v-if="showObjectiveDrawer"
       :objective="drawerEditMode ? activeObjective : null"
       :newest-objective="newestObjective"
       @create="objectiveCreated"
@@ -64,8 +64,7 @@
     />
 
     <key-result-drawer
-      v-if="activeObjective"
-      :visible="showKeyResultDrawer"
+      v-if="activeObjective && showKeyResultDrawer"
       :objective="activeObjective"
       :key-result="drawerEditMode ? activeKeyResult : null"
       @archive="