From d11a8c2650cc3c03ea104b01d16e6b535566414e Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Mon, 28 Aug 2023 15:24:39 +0200
Subject: [PATCH 1/6] Generalize the `ArchivedRestore` component

---
 src/components/ArchivedRestore.vue       | 5 ++---
 src/components/drawers/EditKeyResult.vue | 2 +-
 src/components/drawers/EditObjective.vue | 2 +-
 src/locale/locales/en-US.json            | 8 +++++---
 src/locale/locales/nb-NO.json            | 8 +++++---
 src/views/KeyResultHome.vue              | 2 +-
 src/views/ObjectiveHome.vue              | 2 +-
 7 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/components/ArchivedRestore.vue b/src/components/ArchivedRestore.vue
index 7cbe244ed..e462f105d 100644
--- a/src/components/ArchivedRestore.vue
+++ b/src/components/ArchivedRestore.vue
@@ -1,7 +1,7 @@
 <template>
   <pkt-alert :title="$t('archived.heading')" skin="warning" class="archived-alert">
     <div class="archived-alert__body">
-      <p>{{ $t('archived.body', { objectType: objectType }) }}</p>
+      <p>{{ $t(`archived.body.${objectType}`) }} {{ $t('archived.restoreText') }}</p>
 
       <pkt-button
         v-if="hasEditRights"
@@ -35,8 +35,7 @@ export default {
     },
     objectType: {
       type: String,
-      default: 'objekt',
-      required: false,
+      required: true,
     },
   },
 
diff --git a/src/components/drawers/EditKeyResult.vue b/src/components/drawers/EditKeyResult.vue
index 27ac69a67..cea8ccce4 100644
--- a/src/components/drawers/EditKeyResult.vue
+++ b/src/components/drawers/EditKeyResult.vue
@@ -134,7 +134,7 @@
         <archived-restore
           v-if="keyResult.archived"
           :restore="restore"
-          :object-type="$t('archived.keyResult')"
+          object-type="keyResult"
         />
         <div v-else class="button-row">
           <btn-delete :disabled="loading" @click="archive" />
diff --git a/src/components/drawers/EditObjective.vue b/src/components/drawers/EditObjective.vue
index 35607acc7..8efaca8b0 100644
--- a/src/components/drawers/EditObjective.vue
+++ b/src/components/drawers/EditObjective.vue
@@ -97,7 +97,7 @@
         <archived-restore
           v-if="objective.archived"
           :restore="restore"
-          :object-type="$t('archived.objective')"
+          object-type="objective"
         />
         <div v-else class="button-row">
           <btn-delete :disabled="loading" @click="archive" />
diff --git a/src/locale/locales/en-US.json b/src/locale/locales/en-US.json
index 6b36ca9ad..2c92164e4 100644
--- a/src/locale/locales/en-US.json
+++ b/src/locale/locales/en-US.json
@@ -523,9 +523,11 @@
   },
   "archived": {
     "heading": "Archived",
-    "objective": "objective",
-    "keyResult": "key result",
-    "body": "This {objectType} is archived and is no longer shown in the list of {objectType}s. If you miss it, just restore it."
+    "body": {
+      "objective": "This objective is archived and is no longer shown in the list of objectives.",
+      "keyResult": "This key result is archived and is no longer shown in the list of key results."
+    },
+    "restoreText": "If you miss it, just restore it."
   },
   "sheets": {
     "infoText": "Note! The following address must be given read access to the Google Sheets document:",
diff --git a/src/locale/locales/nb-NO.json b/src/locale/locales/nb-NO.json
index e2c375090..6a8217f5f 100644
--- a/src/locale/locales/nb-NO.json
+++ b/src/locale/locales/nb-NO.json
@@ -523,9 +523,11 @@
   },
   "archived": {
     "heading": "Arkivert",
-    "objective": "mål",
-    "keyResult": "nøkkelresultat",
-    "body": "Dette {objectType}et er arkivert og vises ikke lenger i listen over {objectType}. Savner du det, er det bare å gjenopprette det."
+    "body": {
+      "objective": "Dette målet er arkivert og vises ikke lenger i listen over mål.",
+      "keyResult": "Dette nøkkelresultatet er arkivert og vises ikke lenger i listen over nøkkelresultater."
+    },
+    "restoreText": "Savner du det, er det bare å gjenopprette det."
   },
   "sheets": {
     "infoText": "Merk! Følgende adresse må gis lesetilgang til Google Sheets-dokumentet:",
diff --git a/src/views/KeyResultHome.vue b/src/views/KeyResultHome.vue
index 0e3fa9a76..dbb3f7996 100644
--- a/src/views/KeyResultHome.vue
+++ b/src/views/KeyResultHome.vue
@@ -25,7 +25,7 @@
         v-if="activeKeyResult.archived"
         class="mt-size-16"
         :restore="restore"
-        :object-type="$t('archived.keyResult')"
+        object-type="keyResult"
       />
 
       <div class="key-result-summary widgets">
diff --git a/src/views/ObjectiveHome.vue b/src/views/ObjectiveHome.vue
index ca5548588..04599b30e 100644
--- a/src/views/ObjectiveHome.vue
+++ b/src/views/ObjectiveHome.vue
@@ -43,7 +43,7 @@
       <archived-restore
         v-if="activeObjective.archived"
         :restore="restore"
-        :object-type="$t('archived.objective')"
+        object-type="objective"
       />
 
       <section>

From 08fb6cdc6b96c7a070beb5d9d44747ac3865f29b Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Mon, 28 Aug 2023 15:27:28 +0200
Subject: [PATCH 2/6] Add drawer for editing organizational items

---
 src/components/FormComponent.vue          |   1 +
 src/components/drawers/EditItemDrawer.vue | 308 ++++++++++++++++++++++
 src/locale/locales/en-US.json             |   9 +-
 src/locale/locales/nb-NO.json             |   9 +-
 src/views/Item/ItemAbout.vue              | 111 +++++---
 5 files changed, 395 insertions(+), 43 deletions(-)
 create mode 100644 src/components/drawers/EditItemDrawer.vue

diff --git a/src/components/FormComponent.vue b/src/components/FormComponent.vue
index 0ad7c8a85..b94d74f93 100644
--- a/src/components/FormComponent.vue
+++ b/src/components/FormComponent.vue
@@ -55,6 +55,7 @@
           :options="selectOptions"
           :clearable="selectClearable"
           :reduce="selectReduce"
+          :disabled="disabled"
           :data-cy="dataCy"
           :append-to-body="true"
           @input="$emit('select', $event)"
diff --git a/src/components/drawers/EditItemDrawer.vue b/src/components/drawers/EditItemDrawer.vue
new file mode 100644
index 000000000..9de739e90
--- /dev/null
+++ b/src/components/drawers/EditItemDrawer.vue
@@ -0,0 +1,308 @@
+<template>
+  <paged-drawer-wrapper
+    ref="drawer"
+    :visible="visible"
+    :page-count="pageCount"
+    @close="$emit('close')"
+  >
+    <template #title="{ isDone, isSuccess }">
+      <template v-if="!isDone">
+        {{ $t('admin.item.change', { name: item.name }) }}
+      </template>
+      <template v-else-if="isSuccess">
+        {{ $t('admin.item.updated', { name: thisItem.name }) }}
+      </template>
+      <template v-else>{{ $t('toaster.error.save') }}</template>
+    </template>
+
+    <template #page="{ pageIndex, prev }">
+      <form-section :hide-errors="true">
+        <template v-if="pageIndex === 1">
+          <form-component
+            v-model="thisItem.name"
+            input-type="input"
+            name="name"
+            :disabled="thisItem?.archived"
+            :label="$t('fields.name')"
+            rules="required"
+          />
+          <form-component
+            v-model="thisItem.missionStatement"
+            input-type="textarea"
+            name="missionStatement"
+            :disabled="thisItem?.archived"
+            :rows="6"
+            :label="$t('fields.missionStatement')"
+            rules="required"
+          />
+          <form-component
+            v-model="thisItem.targetAudience"
+            input-type="textarea"
+            name="targetAudience"
+            :disabled="thisItem?.archived"
+            :rows="6"
+            :label="$t('dashboard.targetAudience')"
+          />
+        </template>
+
+        <template v-else-if="pageIndex === 2">
+          <form-component
+            v-if="type === 'department'"
+            v-model="thisItem.organization"
+            input-type="select"
+            name="parent"
+            :disabled="thisItem?.archived"
+            :label="$t('admin.department.parentOrganisation')"
+            rules="required"
+            :select-options="organizations"
+          />
+
+          <form-component
+            v-else-if="type === 'product'"
+            v-model="thisItem.department"
+            input-type="select"
+            name="parent"
+            :disabled="thisItem?.archived"
+            :label="$t('admin.product.parentDepartment')"
+            rules="required"
+            :select-options="departments"
+          />
+
+          <div class="pkt-form-group">
+            <span class="pkt-form-label" for="teamMembers">
+              {{ $t('general.teamMembers') }}
+              <span class="pkt-badge">{{ $t('validation.optional') }}</span>
+            </span>
+            <v-select
+              id="teamMembers"
+              v-model="thisItem.team"
+              multiple
+              :disabled="thisItem?.archived"
+              :options="users"
+              :get-option-label="(option) => option.displayName || option.id"
+            >
+              <template #option="option">
+                {{ option.displayName || option.id }}
+                <span v-if="option.displayName !== option.id">({{ option.id }})</span>
+              </template>
+            </v-select>
+          </div>
+
+          <form-component
+            v-model="thisItem.secret"
+            input-type="input"
+            name="secret"
+            :disabled="thisItem?.archived"
+            :label="$t('fields.secret')"
+          >
+            <template #help><span v-html="$t('admin.apiSecret')" /></template>
+          </form-component>
+        </template>
+
+        <template v-if="!thisItem?.archived" #actions="{ handleSubmit }">
+          <pkt-button
+            v-if="pageIndex === 1"
+            :text="$t('btn.cancel')"
+            skin="tertiary"
+            :disabled="loading"
+            @onClick="$emit('close')"
+          />
+          <pkt-button
+            v-else
+            :text="$t('btn.back')"
+            skin="tertiary"
+            :disabled="loading"
+            @onClick="prev"
+          />
+
+          <btn-save
+            :label="pageIndex === pageCount ? $t('btn.complete') : $t('btn.continue')"
+            :disabled="loading"
+            variant="label-only"
+            @click="handleSubmit(save)"
+          />
+        </template>
+      </form-section>
+    </template>
+
+    <template #footer="{ isDone }">
+      <template v-if="!isDone">
+        <archived-restore
+          v-if="thisItem.archived"
+          :restore="restore"
+          :object-type="type"
+        />
+        <div v-else class="button-row">
+          <btn-delete :disabled="loading" @click="archive" />
+        </div>
+      </template>
+    </template>
+  </paged-drawer-wrapper>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import Organization from '@/db/Organization';
+import Department from '@/db/Department';
+import Product from '@/db/Product';
+import { db } from '@/config/firebaseConfig';
+import { PktButton } from '@oslokommune/punkt-vue2';
+import { FormSection, BtnSave, BtnDelete } from '@/components/generic/form';
+import PagedDrawerWrapper from '@/components/drawers/PagedDrawerWrapper.vue';
+
+export default {
+  name: 'EditItemDrawer',
+
+  components: {
+    ArchivedRestore: () => import('@/components/ArchivedRestore.vue'),
+    PktButton,
+    PagedDrawerWrapper,
+    FormSection,
+    BtnSave,
+    BtnDelete,
+  },
+
+  props: {
+    visible: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+
+    item: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data: () => ({
+    thisItem: null,
+    pageCount: 2,
+    loading: false,
+  }),
+
+  computed: {
+    ...mapState(['organizations', 'departments', 'users']),
+
+    type() {
+      const { department, organization } = this.item;
+      if (organization && department) {
+        return 'product';
+      }
+      if (organization) {
+        return 'department';
+      }
+      return 'organization';
+    },
+  },
+
+  watch: {
+    visible: {
+      immediate: true,
+      async handler(visible) {
+        if (visible) {
+          this.$refs.drawer.reset();
+        }
+        this.loading = true;
+        this.thisItem = { ...this.item };
+        this.loading = false;
+      },
+    },
+  },
+
+  methods: {
+    async save() {
+      const { pageIndex, next } = this.$refs.drawer;
+
+      if (pageIndex < this.pageCount) {
+        next();
+      } else {
+        this.loading = true;
+
+        try {
+          const { id, name, missionStatement, targetAudience, secret } = this.thisItem;
+
+          const team = this.thisItem.team.map((user) =>
+            db.collection('users').doc(user.id)
+          );
+
+          const data = {
+            id,
+            name,
+            team,
+            missionStatement,
+            targetAudience: targetAudience === undefined ? '' : targetAudience,
+            secret: secret === undefined ? '' : secret,
+          };
+
+          if (this.type === 'organization') {
+            await Organization.update(id, data);
+          } else if (this.type === 'department') {
+            const organization = await db
+              .collection('organizations')
+              .doc(this.item.organization.id);
+
+            await Department.update(id, {
+              ...data,
+              organization,
+            });
+          } else {
+            const department = db.collection('departments').doc(this.item.department.id);
+
+            await Product.update(id, {
+              ...data,
+              department,
+            });
+          }
+
+          this.$refs.drawer.next();
+        } catch (error) {
+          this.$refs.drawer.next(false);
+          this.$toasted.error(this.$t('toaster.error.save'));
+        } finally {
+          this.loading = false;
+        }
+      }
+    },
+
+    async archive() {
+      this.loading = true;
+
+      try {
+        await this.getObjectType().archive(this.item.id);
+        this.thisItem.archived = true;
+      } catch (error) {
+        this.$toasted.error(
+          this.$t('toaster.error.archive', { document: this.item.name })
+        );
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    async restore() {
+      try {
+        await this.getObjectType().restore(this.item.id);
+        this.thisItem.archived = false;
+      } catch {
+        this.$toasted.error(
+          this.$t('toaster.error.restore', { document: this.thisKeyResult.id })
+        );
+      }
+    },
+
+    getObjectType() {
+      if (this.type === 'organization') {
+        return Organization;
+      }
+      if (this.type === 'department') {
+        return Department;
+      }
+      if (this.type === 'product') {
+        return Product;
+      }
+      throw new Error(`Unknown object type ${this.type}`);
+    },
+  },
+};
+</script>
diff --git a/src/locale/locales/en-US.json b/src/locale/locales/en-US.json
index 2c92164e4..cad24708b 100644
--- a/src/locale/locales/en-US.json
+++ b/src/locale/locales/en-US.json
@@ -411,6 +411,10 @@
     "copyToClipboard": "Copy to the clipboard"
   },
   "admin": {
+    "item": {
+      "change": "Edit {name}",
+      "updated": "{name} was updated!"
+    },
     "objective": {
       "new": "New objective",
       "created": "Objective was created!",
@@ -525,7 +529,10 @@
     "heading": "Archived",
     "body": {
       "objective": "This objective is archived and is no longer shown in the list of objectives.",
-      "keyResult": "This key result is archived and is no longer shown in the list of key results."
+      "keyResult": "This key result is archived and is no longer shown in the list of key results.",
+      "organization": "This organization is archived and no longer visible.",
+      "department": "This department is archived and no longer visible.",
+      "product": "This product is archived and no longer visible."
     },
     "restoreText": "If you miss it, just restore it."
   },
diff --git a/src/locale/locales/nb-NO.json b/src/locale/locales/nb-NO.json
index 6a8217f5f..08bba85f5 100644
--- a/src/locale/locales/nb-NO.json
+++ b/src/locale/locales/nb-NO.json
@@ -411,6 +411,10 @@
     "copyToClipboard": "Kopier til utklippstavlen"
   },
   "admin": {
+    "item": {
+      "change": "Rediger {name}",
+      "updated": "{name} ble endret!"
+    },
     "objective": {
       "new": "Nytt mål",
       "created": "Målet ble opprettet!",
@@ -525,7 +529,10 @@
     "heading": "Arkivert",
     "body": {
       "objective": "Dette målet er arkivert og vises ikke lenger i listen over mål.",
-      "keyResult": "Dette nøkkelresultatet er arkivert og vises ikke lenger i listen over nøkkelresultater."
+      "keyResult": "Dette nøkkelresultatet er arkivert og vises ikke lenger i listen over nøkkelresultater.",
+      "organization": "Denne organisasjonen er arkivert og ikke lenger synlig.",
+      "department": "Dette produktområdet er arkivert og ikke lenger synlig.",
+      "product": "Dette produktet er arkivert og ikke lenger synlig."
     },
     "restoreText": "Savner du det, er det bare å gjenopprette det."
   },
diff --git a/src/views/Item/ItemAbout.vue b/src/views/Item/ItemAbout.vue
index 71e8ac6fa..7c4b27a47 100644
--- a/src/views/Item/ItemAbout.vue
+++ b/src/views/Item/ItemAbout.vue
@@ -1,50 +1,66 @@
 <template>
-  <page-layout breakpoint="tablet-big">
-    <main class="main">
+  <page-layout breakpoint="tablet-big" class="about-page">
+    <header class="about-page__header">
       <h1 class="pkt-txt-54">{{ activeItem.name }}</h1>
-      <section>
-        <HTML-output class="pkt-txt-24-light" :html="activeItem.missionStatement" />
-      </section>
-
-      <section v-if="activeItem.targetAudience">
-        <h2 class="pkt-txt-30">{{ $t('dashboard.targetAudience') }}</h2>
-        <HTML-output class="pkt-txt-18" :html="activeItem.targetAudience" />
-      </section>
-
-      <section v-if="children">
-        <h2 class="pkt-txt-30">{{ childrenTitle }}</h2>
-        <div
-          v-for="child in children"
-          :key="child.id"
-          class="item-info__box item-info__box--link"
-        >
-          <h3 class="pkt-txt-24">{{ child.name }}</h3>
-          <HTML-output class="pkt-txt-18" :html="child.missionStatement" />
-        </div>
-      </section>
-
-      <!--
-      <h2 class="pkt-txt-30">{{ $t('about.members') }}</h2>
-      <role-members
-        v-for="role in sortByDisplayOrder(Object.keys(teamMembers))"
-        :key="role"
-        :role="role"
-        :members-with-role="teamMembers[role]"
-        @openModal="openProfileModal"
+      <pkt-button
+        v-if="hasEditRights"
+        v-tooltip="$t('admin.item.change', { name: activeItem.name })"
+        skin="tertiary"
+        size="small"
+        variant="icon-only"
+        icon-name="edit"
+        @onClick="showItemDrawer = true"
       />
-      -->
-
-      <profile-modal
-        v-if="showProfileModal"
-        :id="chosenProfileId"
-        @close="closeProfileModal"
-      />
-    </main>
+    </header>
+
+    <section>
+      <HTML-output class="pkt-txt-24-light" :html="activeItem.missionStatement" />
+    </section>
+
+    <section v-if="activeItem.targetAudience">
+      <h2 class="pkt-txt-30">{{ $t('dashboard.targetAudience') }}</h2>
+      <HTML-output class="pkt-txt-18" :html="activeItem.targetAudience" />
+    </section>
+
+    <section v-if="children">
+      <h2 class="pkt-txt-30">{{ childrenTitle }}</h2>
+      <div
+        v-for="child in children"
+        :key="child.id"
+        class="item-info__box item-info__box--link"
+      >
+        <h3 class="pkt-txt-24">{{ child.name }}</h3>
+        <HTML-output class="pkt-txt-18" :html="child.missionStatement" />
+      </div>
+    </section>
+
+    <!--
+    <h2 class="pkt-txt-30">{{ $t('about.members') }}</h2>
+    <role-members
+      v-for="role in sortByDisplayOrder(Object.keys(teamMembers))"
+      :key="role"
+      :role="role"
+      :members-with-role="teamMembers[role]"
+      @openModal="openProfileModal"
+    />
+    -->
+
+    <item-drawer
+      :visible="hasEditRights && showItemDrawer"
+      :item="activeItem"
+      @close="showItemDrawer = false"
+    />
+
+    <profile-modal
+      v-if="showProfileModal"
+      :id="chosenProfileId"
+      @close="closeProfileModal"
+    />
   </page-layout>
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 import {
   possibleDevelopers,
   possibleAdm,
@@ -52,6 +68,7 @@ import {
   displayOrder,
 } from '@/config/jobPositions';
 import HTMLOutput from '@/components/HTMLOutput.vue';
+import { PktButton } from '@oslokommune/punkt-vue2';
 import { isDepartment, isOrganization } from '@/util/getActiveItemType';
 import i18n from '@/locale/i18n';
 
@@ -60,16 +77,20 @@ export default {
 
   components: {
     HTMLOutput,
+    PktButton,
     // RoleMembers: () => import('@/components/RoleMembers.vue'),
+    ItemDrawer: () => import('@/components/drawers/EditItemDrawer.vue'),
     ProfileModal: () => import('@/components/modals/ProfileModal.vue'),
   },
 
   data: () => ({
+    showItemDrawer: false,
     showProfileModal: false,
     chosenProfileId: null,
   }),
 
   computed: {
+    ...mapGetters(['hasEditRights']),
     ...mapState(['activeItem', 'departments', 'products']),
 
     teamMembers() {
@@ -156,8 +177,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.main {
+@use '@/styles/typography';
+
+.about-page {
   padding: 2rem;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
 }
 
 section {

From 58085378f27a82c5adbc597e8aa3ac0f9f8823b8 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Mon, 28 Aug 2023 15:34:23 +0200
Subject: [PATCH 3/6] Remove admin tab for editing item details

---
 CHANGELOG.md                             |   2 +
 src/views/ItemAdmin/ItemAdminGeneral.vue | 237 -----------------------
 src/views/ItemAdmin/ItemAdminWrapper.vue |  34 +---
 3 files changed, 8 insertions(+), 265 deletions(-)
 delete mode 100644 src/views/ItemAdmin/ItemAdminGeneral.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5a86b619e..b89d9e564 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -31,6 +31,8 @@ All notable changes to this project will be documented in this file. The format
 - Progression values are now required to be positive on entry, both from the web
   interface and from the API.
 - The design of the period selector has been refreshed.
+- Organization, deparment and product details are now edited from within the
+  current item's about page.
 
 ### Removed
 
diff --git a/src/views/ItemAdmin/ItemAdminGeneral.vue b/src/views/ItemAdmin/ItemAdminGeneral.vue
deleted file mode 100644
index dc0a706b9..000000000
--- a/src/views/ItemAdmin/ItemAdminGeneral.vue
+++ /dev/null
@@ -1,237 +0,0 @@
-<template>
-  <div v-if="activeItem" class="card">
-    <archived-restore v-if="activeItem.archived" :restore="restore" />
-
-    <form-section>
-      <form-component
-        v-model="activeItem.name"
-        input-type="input"
-        name="name"
-        :label="$t('fields.name')"
-        rules="required"
-        type="text"
-        data-cy="org-name"
-      />
-
-      <form-component
-        v-model="activeItem.slug"
-        input-type="input"
-        :label="$t('fields.slug')"
-        disabled
-      />
-
-      <form-component
-        v-model="activeItem.missionStatement"
-        input-type="textarea"
-        name="missionStatement"
-        :label="$t('fields.missionStatement')"
-        rules="required"
-      />
-
-      <form-component
-        v-model="activeItem.targetAudience"
-        input-type="textarea"
-        name="targetAudience"
-        :label="$t('dashboard.targetAudience')"
-      />
-
-      <form-component
-        v-if="type === 'department'"
-        v-model="activeItem.organization"
-        input-type="select"
-        name="parent"
-        :label="$t('admin.department.parentOrganisation')"
-        rules="required"
-        :select-options="organizations"
-      />
-
-      <form-component
-        v-else-if="type === 'product'"
-        v-model="activeItem.department"
-        input-type="select"
-        name="parent"
-        :label="$t('admin.product.parentDepartment')"
-        rules="required"
-        :select-options="departments"
-      />
-
-      <div class="pkt-form-group">
-        <span class="pkt-form-label" for="teamMembers">
-          {{ $t('general.teamMembers') }}
-          <span class="pkt-badge">{{ $t('validation.optional') }}</span>
-        </span>
-        <v-select
-          id="teamMembers"
-          v-model="activeItem.team"
-          multiple
-          :options="users"
-          :get-option-label="(option) => option.displayName || option.id"
-        >
-          <template #option="option">
-            {{ option.displayName || option.id }}
-            <span v-if="option.displayName !== option.id">({{ option.id }})</span>
-          </template>
-        </v-select>
-      </div>
-
-      <form-component
-        v-model="activeItem.secret"
-        input-type="input"
-        name="secret"
-        :label="$t('fields.secret')"
-      >
-        <template #help><span v-html="$t('admin.apiSecret')" /></template>
-      </form-component>
-
-      <template #actions="{ handleSubmit, submitDisabled }">
-        <btn-delete v-if="!activeItem.archived" :disabled="loading" @click="archive" />
-        <btn-save :disabled="submitDisabled || loading" @click="handleSubmit(update)" />
-      </template>
-    </form-section>
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex';
-import Organization from '@/db/Organization';
-import Department from '@/db/Department';
-import Product from '@/db/Product';
-import { db } from '@/config/firebaseConfig';
-import { toastArchiveAndRevert } from '@/util';
-import { FormSection, BtnSave, BtnDelete } from '@/components/generic/form';
-
-export default {
-  name: 'ItemAdminGeneral',
-
-  components: {
-    ArchivedRestore: () => import('@/components/ArchivedRestore.vue'),
-    FormSection,
-    BtnSave,
-    BtnDelete,
-  },
-
-  data: () => ({
-    loading: false,
-  }),
-
-  computed: {
-    ...mapState(['activeItem', 'organizations', 'departments', 'users']),
-
-    type() {
-      const { department, organization } = this.activeItem;
-      if (organization && department) {
-        return 'product';
-      }
-      if (organization) {
-        return 'department';
-      }
-      return 'organization';
-    },
-  },
-
-  methods: {
-    async update() {
-      this.loading = true;
-      try {
-        const { id, name, missionStatement, targetAudience, secret } = this.activeItem;
-
-        const team = this.activeItem.team.map((user) =>
-          db.collection('users').doc(user.id)
-        );
-
-        const data = {
-          id,
-          name,
-          team,
-          missionStatement,
-          targetAudience: targetAudience === undefined ? '' : targetAudience,
-          secret: secret === undefined ? '' : secret,
-        };
-
-        if (this.type === 'organization') {
-          await Organization.update(id, data);
-        } else if (this.type === 'department') {
-          const organization = await db
-            .collection('organizations')
-            .doc(this.activeItem.organization.id);
-
-          await Department.update(id, {
-            ...data,
-            organization,
-          });
-        } else {
-          const department = db
-            .collection('departments')
-            .doc(this.activeItem.department.id);
-
-          await Product.update(id, {
-            ...data,
-            department,
-          });
-        }
-        this.$toasted.show(this.$t('toaster.savedChanges'));
-      } catch (error) {
-        this.$toasted.error(this.$t('toaster.error.save'));
-        throw new Error(error.message);
-      } finally {
-        this.loading = false;
-      }
-    },
-
-    async archive() {
-      this.loading = true;
-
-      try {
-        this.activeItem.archived = true;
-        this.activeItem.slack = [];
-
-        if (this.type === 'organization') {
-          await Organization.archive(this.activeItem.id);
-        } else if (this.type === 'department') {
-          await Department.archive(this.activeItem.id);
-        } else if (this.type === 'product') {
-          await Product.archive(this.activeItem.id);
-        }
-
-        const restoreCallback = this.restore.bind(this);
-
-        toastArchiveAndRevert({ name: this.activeItem.name, callback: restoreCallback });
-
-        // TODO: Refresh store and sidebar navigation tree
-      } catch (error) {
-        this.$toasted.error(
-          this.$t('toaster.error.archive', { document: this.activeItem.name })
-        );
-        this.activeItem.archived = false;
-        throw new Error(error.message);
-      } finally {
-        this.loading = false;
-      }
-    },
-
-    async restore() {
-      this.loading = true;
-
-      try {
-        if (this.type === 'organization') {
-          await Organization.restore(this.activeItem.id);
-        } else if (this.type === 'department') {
-          await Department.restore(this.activeItem.id);
-        } else if (this.type === 'product') {
-          await Product.restore(this.activeItem.id);
-        }
-
-        this.$toasted.show(this.$t('toaster.restored'));
-        // TODO: Refresh store and sidebar navigation tree
-      } catch (error) {
-        this.$toasted.error(
-          this.$t('toaster.error.restore', { document: this.activeItem.name })
-        );
-        throw new Error(error.message);
-      } finally {
-        this.loading = false;
-      }
-    },
-  },
-};
-</script>
diff --git a/src/views/ItemAdmin/ItemAdminWrapper.vue b/src/views/ItemAdmin/ItemAdminWrapper.vue
index a620fcd35..520f0b374 100644
--- a/src/views/ItemAdmin/ItemAdminWrapper.vue
+++ b/src/views/ItemAdmin/ItemAdminWrapper.vue
@@ -8,8 +8,7 @@
       :tab-ids="tabIds"
     />
     <tab-panel :active-tab="activeTab" :tab-ids="tabIds">
-      <item-admin-general v-if="activeTab === 0" />
-      <item-admin-KPIs v-if="activeTab === 1" />
+      <item-admin-KPIs v-if="activeTab === 0" />
     </tab-panel>
   </page-layout>
 </template>
@@ -18,7 +17,6 @@
 import TabList from '@/components/TabList.vue';
 import TabPanel from '@/components/TabPanel.vue';
 import tabIdsHelper from '@/util/tabUtils';
-import ItemAdminGeneral from './ItemAdminGeneral.vue';
 import ItemAdminKPIs from './ItemAdminKPIs.vue';
 
 export default {
@@ -27,24 +25,18 @@ export default {
   components: {
     TabList,
     TabPanel,
-    ItemAdminGeneral,
     ItemAdminKPIs,
   },
 
   data() {
     return {
-      activeTab: this.getInitialActiveTab(),
+      activeTab: 0,
     };
   },
 
   computed: {
     tabs() {
       return [
-        {
-          icon: 'cogwheel',
-          tabName: this.$t('general.general'),
-          tooltip: null,
-        },
         {
           icon: 'graph',
           tabName: this.$t('general.KPIs'),
@@ -58,26 +50,12 @@ export default {
   },
 
   methods: {
-    getInitialActiveTab() {
-      switch (this.$route.query.tab) {
-        case 'kpi': {
-          return 1;
-        }
-        default: {
-          return 0;
-        }
-      }
-    },
     setActiveTab(tabIndex) {
-      switch (tabIndex) {
-        case 1: {
-          this.$router.push({ query: { tab: 'kpi' } });
-          break;
-        }
-        default: {
-          this.$router.push({ query: {} });
+      this.$router.push({ query: { tab: 'kpi' } }).catch((error) => {
+        if (error.name !== 'NavigationDuplicated') {
+          throw error;
         }
-      }
+      });
       this.activeTab = tabIndex;
     },
   },

From 7ac77bf0540550cd05492a13c2de83d844fe2630 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Tue, 29 Aug 2023 13:10:48 +0200
Subject: [PATCH 4/6] Redirect after item slug change

---
 src/components/drawers/EditItemDrawer.vue | 55 ++++++++++++++++++-----
 src/locale/locales/en-US.json             |  4 +-
 src/locale/locales/nb-NO.json             |  4 +-
 3 files changed, 51 insertions(+), 12 deletions(-)

diff --git a/src/components/drawers/EditItemDrawer.vue b/src/components/drawers/EditItemDrawer.vue
index 9de739e90..f20ea0f8f 100644
--- a/src/components/drawers/EditItemDrawer.vue
+++ b/src/components/drawers/EditItemDrawer.vue
@@ -26,12 +26,15 @@
             :label="$t('fields.name')"
             rules="required"
           />
+          <pkt-alert v-if="thisItem.name !== item.name" skin="info" class="mb-size-16">
+            {{ $t('admin.item.slugChangeInfo', { name: item.name }) }}
+          </pkt-alert>
           <form-component
             v-model="thisItem.missionStatement"
             input-type="textarea"
             name="missionStatement"
             :disabled="thisItem?.archived"
-            :rows="6"
+            :rows="5"
             :label="$t('fields.missionStatement')"
             rules="required"
           />
@@ -40,7 +43,7 @@
             input-type="textarea"
             name="targetAudience"
             :disabled="thisItem?.archived"
-            :rows="6"
+            :rows="4"
             :label="$t('dashboard.targetAudience')"
           />
         </template>
@@ -125,6 +128,12 @@
       </form-section>
     </template>
 
+    <template #done>
+      <em v-if="redirectTimer">
+        {{ $t('admin.item.redirectInfo', { count: redirectCounter }) }}
+      </em>
+    </template>
+
     <template #footer="{ isDone }">
       <template v-if="!isDone">
         <archived-restore
@@ -146,7 +155,7 @@ import Organization from '@/db/Organization';
 import Department from '@/db/Department';
 import Product from '@/db/Product';
 import { db } from '@/config/firebaseConfig';
-import { PktButton } from '@oslokommune/punkt-vue2';
+import { PktAlert, PktButton } from '@oslokommune/punkt-vue2';
 import { FormSection, BtnSave, BtnDelete } from '@/components/generic/form';
 import PagedDrawerWrapper from '@/components/drawers/PagedDrawerWrapper.vue';
 
@@ -155,6 +164,7 @@ export default {
 
   components: {
     ArchivedRestore: () => import('@/components/ArchivedRestore.vue'),
+    PktAlert,
     PktButton,
     PagedDrawerWrapper,
     FormSection,
@@ -179,6 +189,8 @@ export default {
     thisItem: null,
     pageCount: 2,
     loading: false,
+    redirectCounter: 3,
+    redirectTimer: null,
   }),
 
   computed: {
@@ -202,12 +214,33 @@ export default {
       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) {
+        this.redirectTimer = setInterval(() => {
+          this.redirectCounter -= 1;
+          if (this.redirectCounter === 0) {
+            clearInterval(this.redirectTimer);
+            const { name, params, query } = this.$route;
+            this.$router.replace({
+              name,
+              params: { ...params, slug: item.slug },
+              query,
+            });
+          }
+        }, 1000);
+      }
+    },
   },
 
   methods: {
@@ -220,14 +253,14 @@ export default {
         this.loading = true;
 
         try {
-          const { id, name, missionStatement, targetAudience, secret } = this.thisItem;
+          const { id: itemId } = this.item;
+          const { name, missionStatement, targetAudience, secret } = this.thisItem;
 
           const team = this.thisItem.team.map((user) =>
             db.collection('users').doc(user.id)
           );
 
           const data = {
-            id,
             name,
             team,
             missionStatement,
@@ -236,20 +269,22 @@ export default {
           };
 
           if (this.type === 'organization') {
-            await Organization.update(id, data);
+            await Organization.update(itemId, data);
           } else if (this.type === 'department') {
             const organization = await db
               .collection('organizations')
-              .doc(this.item.organization.id);
+              .doc(this.thisItem.organization.id);
 
-            await Department.update(id, {
+            await Department.update(itemId, {
               ...data,
               organization,
             });
           } else {
-            const department = db.collection('departments').doc(this.item.department.id);
+            const department = db
+              .collection('departments')
+              .doc(this.thisItem.department.id);
 
-            await Product.update(id, {
+            await Product.update(itemId, {
               ...data,
               department,
             });
diff --git a/src/locale/locales/en-US.json b/src/locale/locales/en-US.json
index cad24708b..6784e6af5 100644
--- a/src/locale/locales/en-US.json
+++ b/src/locale/locales/en-US.json
@@ -413,7 +413,9 @@
   "admin": {
     "item": {
       "change": "Edit {name}",
-      "updated": "{name} was updated!"
+      "updated": "{name} was updated!",
+      "slugChangeInfo": "When changing the name of this item, the address to it might also change. In that case you will be automatically redirected after saving the form.",
+      "redirectInfo": "You will be redirected in {count} seconds."
     },
     "objective": {
       "new": "New objective",
diff --git a/src/locale/locales/nb-NO.json b/src/locale/locales/nb-NO.json
index 08bba85f5..daf850b19 100644
--- a/src/locale/locales/nb-NO.json
+++ b/src/locale/locales/nb-NO.json
@@ -413,7 +413,9 @@
   "admin": {
     "item": {
       "change": "Rediger {name}",
-      "updated": "{name} ble endret!"
+      "updated": "{name} ble endret!",
+      "slugChangeInfo": "Endring av navn kan også resultere i at gjeldende adresse for \"{name}\" endres. Du blir i så fall automatisk videreført til den nye adressen etter at skjemaet lagres.",
+      "redirectInfo": "Du videreføres om {count} sekunder."
     },
     "objective": {
       "new": "Nytt mål",

From 1c53b0e804025ffafee5a83e9f6db21a7635416a Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Mon, 4 Sep 2023 17:46:59 +0200
Subject: [PATCH 5/6] Fix typos and wording

---
 CHANGELOG.md                  | 7 +++++--
 src/locale/locales/nb-NO.json | 4 ++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b89d9e564..ce3b887d0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,11 @@ All notable changes to this project will be documented in this file. The format
 
 - Fixed create/edit/delete rights for organization admins.
 
+### Changed
+
+- Organization, department and product details are now edited from within the
+  current item's about page.
+
 ## [3.9.0] 2023-09-01
 
 ### Added
@@ -31,8 +36,6 @@ All notable changes to this project will be documented in this file. The format
 - Progression values are now required to be positive on entry, both from the web
   interface and from the API.
 - The design of the period selector has been refreshed.
-- Organization, deparment and product details are now edited from within the
-  current item's about page.
 
 ### Removed
 
diff --git a/src/locale/locales/nb-NO.json b/src/locale/locales/nb-NO.json
index daf850b19..33ae5ed2a 100644
--- a/src/locale/locales/nb-NO.json
+++ b/src/locale/locales/nb-NO.json
@@ -414,8 +414,8 @@
     "item": {
       "change": "Rediger {name}",
       "updated": "{name} ble endret!",
-      "slugChangeInfo": "Endring av navn kan også resultere i at gjeldende adresse for \"{name}\" endres. Du blir i så fall automatisk videreført til den nye adressen etter at skjemaet lagres.",
-      "redirectInfo": "Du videreføres om {count} sekunder."
+      "slugChangeInfo": "Endring av navn kan også resultere i at gjeldende adresse for \"{name}\" endres. Du blir i så fall automatisk videresendt til den nye adressen etter at skjemaet lagres.",
+      "redirectInfo": "Du videresendes om {count} sekunder."
     },
     "objective": {
       "new": "Nytt mål",

From 4c8514dc8c75c702e7be42d05af268fd90790ff8 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Tue, 5 Sep 2023 10:52:17 +0200
Subject: [PATCH 6/6] Remove deprecated sass module import

---
 src/views/Item/ItemAbout.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/views/Item/ItemAbout.vue b/src/views/Item/ItemAbout.vue
index 7c4b27a47..14d8f3575 100644
--- a/src/views/Item/ItemAbout.vue
+++ b/src/views/Item/ItemAbout.vue
@@ -177,8 +177,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '@/styles/typography';
-
 .about-page {
   padding: 2rem;