From 00a4ceee65b5b0b36444120ad1c2fba8a9a719ff 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     |  38 ++---
 src/components/drawers/EditKeyResult.vue      | 133 +++++++-----------
 src/components/drawers/EditObjective.vue      |  97 +++++--------
 src/components/drawers/KpiDrawer.vue          |  75 ++++------
 src/components/drawers/PagedDrawerWrapper.vue |   9 +-
 src/components/drawers/SliderContainer.vue    |  35 ++++-
 src/views/Item/ItemAbout.vue                  |   7 +-
 src/views/Item/ItemMeasurements.vue           |   2 +-
 src/views/Item/ItemOKRs.vue                   |   5 +-
 9 files changed, 168 insertions(+), 233 deletions(-)

diff --git a/src/components/drawers/EditItemDrawer.vue b/src/components/drawers/EditItemDrawer.vue
index d5c0f4ae6..7ced802b3 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')"
   >
@@ -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 })
diff --git a/src/components/drawers/EditKeyResult.vue b/src/components/drawers/EditKeyResult.vue
index 5e4b5bafd..5c088387e 100644
--- a/src/components/drawers/EditKeyResult.vue
+++ b/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,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: {
@@ -425,8 +398,8 @@ export default {
       }
     },
 
-    close(e) {
-      this.$emit('close', e);
+    close() {
+      this.thisKeyResult = null;
     },
   },
 };
diff --git a/src/components/drawers/EditObjective.vue b/src/components/drawers/EditObjective.vue
index 673d7a9cb..c40aa664c 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="$emit('close')">
     <template #title="{ isDone, isSuccess }">
       <template v-if="!isDone">
         {{ $t(editMode ? 'admin.objective.change' : 'admin.objective.new') }}
@@ -81,15 +81,12 @@
           </p>
         </pkt-alert>
 
-        <template
-          v-if="!thisObjective?.archived"
-          #actions="{ handleSubmit, submitDisabled }"
-        >
+        <template #actions="{ handleSubmit, submitDisabled }">
           <btn-cancel :disabled="loading" @click="close" />
           <btn-save
             :label="editMode ? $t('btn.updateObjective') : $t('btn.createObjective')"
             variant="label-only"
-            :disabled="submitDisabled || loading"
+            :disabled="submitDisabled || loading || thisObjective?.archived"
             @click="handleSubmit(save)"
           />
         </template>
@@ -168,12 +165,6 @@ export default {
   },
 
   props: {
-    visible: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-
     objective: {
       type: Object,
       required: false,
@@ -261,52 +252,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: {
@@ -407,8 +384,8 @@ export default {
       }
     },
 
-    close(e) {
-      this.$emit('close', e);
+    close() {
+      this.thisObjective = null;
     },
 
     async useSuggestedPeriod() {
diff --git a/src/components/drawers/KpiDrawer.vue b/src/components/drawers/KpiDrawer.vue
index 54d6de85c..8871a504c 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')"
   >
@@ -173,24 +173,24 @@
           </toggle-button>
         </template>
 
-        <template v-if="!thisKpi?.archived" #actions="{ handleSubmit }">
+        <template #actions="{ handleSubmit, submitDisabled }">
           <pkt-button
             v-if="pageIndex === 1"
             :text="$t('btn.cancel')"
             skin="tertiary"
-            :disabled="loading"
-            @onClick="$emit('close')"
+            :disabled="loading || thisKpi?.archived"
+            @onClick="thisKpi = null"
           />
           <pkt-button
             v-else
             :text="$t('btn.back')"
             skin="tertiary"
-            :disabled="loading"
+            :disabled="loading || thisKpi?.archived"
             @onClick="prev"
           />
           <btn-save
             :label="pageIndex === pageCount ? $t('btn.complete') : $t('btn.continue')"
-            :disabled="loading"
+            :disabled="submitDisabled || loading || thisKpi?.archived"
             variant="label-only"
             @click="handleSubmit(save)"
           />
@@ -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/components/drawers/PagedDrawerWrapper.vue b/src/components/drawers/PagedDrawerWrapper.vue
index b4ea442a8..cb45f756f 100644
--- a/src/components/drawers/PagedDrawerWrapper.vue
+++ b/src/components/drawers/PagedDrawerWrapper.vue
@@ -6,9 +6,8 @@
       { 'paged-drawer--done': isDone },
       skin ? `paged-drawer--${skin}` : null,
     ]"
+    :allow-click-outside="isDone"
     @close="$emit('close')"
-    @hidden="reset"
-    @click-outside="clickOutside"
   >
     <template #header>
       <span
@@ -113,12 +112,6 @@ export default {
       this.skin = null;
       this.pageIndex = 1;
     },
-
-    clickOutside(e) {
-      if (this.isDone) {
-        this.$emit('close', e);
-      }
-    },
   },
 };
 </script>
diff --git a/src/components/drawers/SliderContainer.vue b/src/components/drawers/SliderContainer.vue
index 44447768e..6c0fd9e95 100644
--- a/src/components/drawers/SliderContainer.vue
+++ b/src/components/drawers/SliderContainer.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <transition name="fade" mode="out-in">
-      <div v-if="visible" class="overlay" @click.self="$emit('click-outside')"></div>
+      <div v-if="isVisible" class="overlay" @click.self="clickOutside"></div>
     </transition>
-    <transition name="slide" @after-leave="$emit('hidden')">
-      <aside v-if="visible" class="sliderContainer">
+    <transition name="slide" @after-leave="$emit('close')">
+      <aside v-if="isVisible" class="sliderContainer">
         <div class="sliderContainer__closeButtonContainer">
           <pkt-button
             skin="tertiary"
@@ -48,11 +48,36 @@ export default {
       required: true,
       default: false,
     },
+
+    allowClickOutside: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+
+  data: () => ({
+    isVisible: false,
+  }),
+
+  watch: {
+    visible: {
+      immediate: true,
+      handler() {
+        this.isVisible = this.visible;
+      },
+    },
   },
 
   methods: {
-    close(e) {
-      this.$emit('close', e);
+    clickOutside() {
+      if (this.allowClickOutside) {
+        this.close();
+      }
+    },
+
+    close() {
+      this.isVisible = false;
     },
   },
 };
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="