From b4d155f9ae61bbaff1ef2903891b48ba3dfcee7f Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Fri, 18 Aug 2023 14:23:56 +0200
Subject: [PATCH 001/102] Add pane layout components

---
 src/components/layout/PaneLayout.vue | 75 +++++++++++++++++++++++
 src/components/panes/PaneWrapper.vue | 91 ++++++++++++++++++++++++++++
 2 files changed, 166 insertions(+)
 create mode 100644 src/components/layout/PaneLayout.vue
 create mode 100644 src/components/panes/PaneWrapper.vue

diff --git a/src/components/layout/PaneLayout.vue b/src/components/layout/PaneLayout.vue
new file mode 100644
index 000000000..e04a843a6
--- /dev/null
+++ b/src/components/layout/PaneLayout.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="pane-layout">
+    <template v-for="(pane, i) in $slots.default">
+      <transition :key="`pane${i}`" name="slide-fade">
+        <v-nodes v-if="pane.data" :vnodes="pane" />
+      </transition>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PaneLayout',
+
+  components: {
+    VNodes: {
+      functional: true,
+      render: (h, ctx) => ctx.props.vnodes,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/breakpoints' as *;
+
+.pane-layout {
+  display: flex;
+  flex-grow: 1;
+  width: 100%;
+
+  > .pane {
+    display: none;
+    flex: 1 1 auto;
+    width: 0;
+    height: 100%;
+    overflow: auto;
+    border-left: 1px solid var(--color-grayscale-10);
+
+    &:nth-last-child(-n + 1) {
+      display: block;
+    }
+
+    @include bp('laptop-up') {
+      &:nth-last-child(-n + 2) {
+        display: block;
+      }
+    }
+
+    @media screen and (min-width: 135rem) {
+      &:nth-last-child(-n + 3) {
+        display: block;
+      }
+    }
+
+    @media screen and (min-width: 180rem) {
+      &:nth-last-child(-n + 4) {
+        display: block;
+      }
+    }
+  }
+}
+
+.slide-fade-enter-active {
+  transition: all 0.3s ease;
+}
+.slide-fade-leave-active {
+  transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
+}
+.slide-fade-enter,
+.slide-fade-leave-to {
+  transform: translateX(10px);
+  opacity: 0;
+}
+</style>
diff --git a/src/components/panes/PaneWrapper.vue b/src/components/panes/PaneWrapper.vue
new file mode 100644
index 000000000..abfd25162
--- /dev/null
+++ b/src/components/panes/PaneWrapper.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="pane">
+    <div class="pane__inner">
+      <div class="pane__header">
+        <h1>{{ title }}</h1>
+
+        <div class="pane__buttons">
+          <slot name="actions" />
+          <pkt-button
+            v-if="closable"
+            v-tooltip="$t('btn.close')"
+            variant="icon-only"
+            skin="tertiary"
+            size="small"
+            icon-name="close"
+            @onClick="$emit('close')"
+          />
+        </div>
+      </div>
+
+      <div class="pane__body">
+        <slot name="default" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { PktButton } from '@oslokommune/punkt-vue2';
+
+export default {
+  name: 'PaneWrapper',
+
+  components: {
+    PktButton,
+  },
+
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    closable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
+
+.pane {
+  &__inner {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    height: 0;
+    padding: 1.5rem;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    h1 {
+      @include get-text('pkt-txt-20-medium');
+    }
+  }
+
+  &__buttons {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  &__actions {
+    display: flex;
+    gap: 1rem;
+    justify-content: space-between;
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding-bottom: 3rem;
+  }
+}
+</style>

From 16205558c973984371984ef2cc1a57604bbbd17e Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Thu, 24 Aug 2023 11:42:11 +0200
Subject: [PATCH 002/102] Organize new OKR related state in separate store
 module

---
 src/store/index.js        |  50 ++---------------
 src/store/modules/okrs.js | 113 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 117 insertions(+), 46 deletions(-)
 create mode 100644 src/store/modules/okrs.js

diff --git a/src/store/index.js b/src/store/index.js
index 0e80f0273..20fc7d4cf 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -6,6 +6,7 @@ import { sortByLocale } from '@/store/actions/actionUtils';
 
 import defaultPreferences from '@/db/User/defaultPreferences';
 import moduleActions from './actions';
+import okrsModule from './modules/okrs';
 
 Vue.use(Vuex);
 
@@ -139,20 +140,6 @@ export const storeGetters = {
       id: o.id,
     }));
   },
-
-  /**
-   * Return selected objectives for `state.activeItem`.
-   */
-  selectedObjectives: (state, getters) => {
-    if (!state.activeItem || !state.selectedObjectives) {
-      return [];
-    }
-    const objectiveIds = state.selectedObjectives[state.activeItem.id] || [];
-    if (!objectiveIds.length) {
-      return [];
-    }
-    return getters.objectivesWithID.filter((o) => objectiveIds.includes(o.id));
-  },
 };
 
 export const actions = {
@@ -186,15 +173,6 @@ export const actions = {
     return true;
   },
 
-  setSelectedObjective: async ({ commit, state }, objective) => {
-    if (state.activeItem) {
-      commit('SET_SELECTED_OBJECTIVE', {
-        itemId: state.activeItem.id,
-        objectiveId: objective?.id,
-      });
-    }
-  },
-
   setActiveOrganization: async ({ commit, dispatch, state }, orgId) => {
     const orgSlug = orgId
       ? state.organizations.find((org) => org.id === orgId)?.slug || null
@@ -239,26 +217,6 @@ export const mutations = {
     state.selectedPeriod = payload;
   },
 
-  SET_SELECTED_OBJECTIVE(state, { itemId, objectiveId }) {
-    if (Object.hasOwnProperty.call(state.selectedObjectives, itemId)) {
-      const objectives = state.selectedObjectives[itemId];
-
-      if (objectiveId && objectives.includes(objectiveId)) {
-        Vue.set(
-          state.selectedObjectives,
-          itemId,
-          objectives.filter((id) => id !== objectiveId)
-        );
-      } else if (objectiveId) {
-        objectives.push(objectiveId);
-      } else {
-        Vue.delete(state.selectedObjectives, itemId);
-      }
-    } else {
-      Vue.set(state.selectedObjectives, itemId, [objectiveId]);
-    }
-  },
-
   SET_HOME_ORGANIZATION(state, orgSlug) {
     if (!state.user.preferences) {
       state.user.preferences = defaultPreferences;
@@ -268,6 +226,9 @@ export const mutations = {
 };
 
 export default new Vuex.Store({
+  modules: {
+    okrs: okrsModule,
+  },
   state: {
     user: null,
     users: [],
@@ -276,9 +237,7 @@ export default new Vuex.Store({
     products: [],
     activeItem: null,
     activeItemRef: null,
-    activeKeyResult: null,
     activePeriod: null,
-    activeObjective: null,
     periods: [],
     objectives: [],
     objectiveContributors: [],
@@ -290,7 +249,6 @@ export default new Vuex.Store({
     loginLoading: false,
     dataLoading: false,
     selectedPeriod: null,
-    selectedObjectives: {},
     organizationsUnsubscribe: () => {},
     departmentsUnsubscribe: () => {},
     productsUnsubscribe: () => {},
diff --git a/src/store/modules/okrs.js b/src/store/modules/okrs.js
new file mode 100644
index 000000000..5587121c3
--- /dev/null
+++ b/src/store/modules/okrs.js
@@ -0,0 +1,113 @@
+import Vue from 'vue';
+import { firestoreAction } from 'vuexfire';
+import { db } from '@/config/firebaseConfig';
+
+export default {
+  namespaced: true,
+
+  state: () => ({
+    activeObjective: null,
+    activeKeyResult: null,
+    workbenchObjectives: {},
+  }),
+
+  mutations: {
+    ADD_WORKBENCH_OBJECTIVE(state, { itemId, objectiveId }) {
+      if (Object.hasOwnProperty.call(state.workbenchObjectives, itemId)) {
+        const objectives = state.workbenchObjectives[itemId];
+
+        if (objectiveId && !objectives.includes(objectiveId)) {
+          objectives.push(objectiveId);
+        }
+      } else {
+        Vue.set(state.workbenchObjectives, itemId, [objectiveId]);
+      }
+    },
+
+    REMOVE_WORKBENCH_OBJECTIVE(state, { itemId, objectiveId }) {
+      if (Object.hasOwnProperty.call(state.workbenchObjectives, itemId)) {
+        const objectives = state.workbenchObjectives[itemId];
+
+        if (objectiveId && objectives.includes(objectiveId)) {
+          Vue.set(
+            state.workbenchObjectives,
+            itemId,
+            objectives.filter((id) => id !== objectiveId)
+          );
+        }
+      }
+    },
+
+    CLEAR_WORKBENCH_OBJECTIVES(state, { itemId }) {
+      Vue.delete(state.workbenchObjectives, itemId);
+    },
+  },
+
+  actions: {
+    setActiveObjective: firestoreAction(
+      ({ bindFirestoreRef, unbindFirestoreRef, rootGetters }, objectiveId) => {
+        if (!objectiveId) {
+          return unbindFirestoreRef('activeObjective');
+        }
+
+        if (!rootGetters.objectivesWithID.find((o) => o.id === objectiveId)) {
+          return unbindFirestoreRef('activeObjective');
+        }
+
+        return bindFirestoreRef(
+          'activeObjective',
+          db.collection('objectives').doc(objectiveId),
+          { maxRefDepth: 1, wait: true }
+        );
+      }
+    ),
+
+    setActiveKeyResult: firestoreAction(
+      ({ bindFirestoreRef, unbindFirestoreRef }, keyResultId) => {
+        if (!keyResultId) {
+          return unbindFirestoreRef('activeKeyResult');
+        }
+
+        return bindFirestoreRef(
+          'activeKeyResult',
+          db.collection('keyResults').doc(keyResultId),
+          { maxRefDepth: 1, wait: true }
+        );
+      }
+    ),
+
+    addWorkbenchObjective: async ({ commit, rootState }, objectiveId) => {
+      commit('ADD_WORKBENCH_OBJECTIVE', {
+        itemId: rootState.activeItem.id,
+        objectiveId,
+      });
+    },
+
+    removeWorkbenchObjective: async ({ commit, rootState }, objectiveId) => {
+      commit('REMOVE_WORKBENCH_OBJECTIVE', {
+        itemId: rootState.activeItem.id,
+        objectiveId,
+      });
+    },
+
+    clearWorkbenchObjectives: async ({ commit, rootState }) => {
+      commit('CLEAR_WORKBENCH_OBJECTIVES', { itemId: rootState.activeItem.id });
+    },
+  },
+
+  getters: {
+    /**
+     * Return objectives currently in the workbench for `rootState.activeItem`.
+     */
+    workbenchObjectives: (state, getters, rootState, rootGetters) => {
+      if (!rootState.activeItem || !state.workbenchObjectives) {
+        return [];
+      }
+      const objectiveIds = state.workbenchObjectives[rootState.activeItem.id] || [];
+      if (!objectiveIds.length) {
+        return [];
+      }
+      return rootGetters.objectivesWithId.filter((o) => objectiveIds.includes(o.id));
+    },
+  },
+};

From e5c010188e9c7655b1fc0ae8ef50ac34c4a47cf6 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Thu, 24 Aug 2023 12:25:02 +0200
Subject: [PATCH 003/102] Add panes for OKR timeline, objectives and key
 results

---
 src/components/GanttChart.vue                 | 134 +++++---
 src/components/OkrLinkCard.vue                |  98 ++++++
 src/components/ProgressBar.vue                | 114 +++++--
 src/components/panes/KeyResultPane.vue        | 289 ++++++++++++++++++
 src/components/panes/ObjectivePane.vue        | 188 ++++++++++++
 src/components/panes/TimelinePane.vue         |  64 ++++
 src/components/panes/WorkbenchPane.vue        | 115 +++++++
 .../WidgetProgressHistory.vue                 |   8 +-
 src/locale/locales/en-US.json                 |  12 +-
 src/locale/locales/nb-NO.json                 |  12 +-
 10 files changed, 966 insertions(+), 68 deletions(-)
 create mode 100644 src/components/OkrLinkCard.vue
 create mode 100644 src/components/panes/KeyResultPane.vue
 create mode 100644 src/components/panes/ObjectivePane.vue
 create mode 100644 src/components/panes/TimelinePane.vue
 create mode 100644 src/components/panes/WorkbenchPane.vue

diff --git a/src/components/GanttChart.vue b/src/components/GanttChart.vue
index 22c2d522a..ec6987b35 100644
--- a/src/components/GanttChart.vue
+++ b/src/components/GanttChart.vue
@@ -49,28 +49,30 @@
               { 'sep__period--clickable': periodObjectives.length },
             ]"
             :style="periodStyle()"
-            @click="selectPeriodObjectives"
+            @click="periodObjectivesToWorkbench"
           ></div>
         </div>
       </div>
       <template v-if="!loading">
         <div v-if="period.startDate" class="period" :style="periodStyle()"></div>
         <div v-for="group in groupedObjectives" :key="group.i" class="objective-row">
-          <objective-row
+          <okr-link-card
             v-for="o in group.objectives"
             :key="o.objective.id"
-            :objective="o.objective"
-            :compact="true"
+            :route="{
+              name: 'ObjectiveHome',
+              params: { objectiveId: o.objective.id },
+            }"
+            :title="o.objective.name"
+            :tabindex="o.tabindex"
+            :progression="o.objective.progression"
             :style="objectiveStyle(o)"
-            :is-link="false"
-            :class="[
-              {
-                'objective--selected': selectedObjectives
-                  .map((o) => o.id)
-                  .includes(o.objective.id),
-              },
-            ]"
-            @click="selectObjective($event, o)"
+            :active="
+              (activeObjective && activeObjective.id === o.objective.id) ||
+              workbenchObjectives.map((o) => o.id).includes(o.objective.id)
+            "
+            :before-navigate="beforeSelectObjective(o.objective)"
+            :after-navigate="afterSelectObjective"
           />
         </div>
       </template>
@@ -80,7 +82,7 @@
 </template>
 
 <script>
-import { mapActions, mapGetters } from 'vuex';
+import { mapActions, mapGetters, mapState } from 'vuex';
 import {
   addMonths,
   differenceInDays,
@@ -98,7 +100,7 @@ export default {
   name: 'GanttChart',
 
   components: {
-    ObjectiveRow: () => import('@/components/ObjectiveRow.vue'),
+    OkrLinkCard: () => import('@/components/OkrLinkCard.vue'),
   },
 
   props: {
@@ -131,7 +133,8 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['selectedObjectives']),
+    ...mapState('okrs', ['activeObjective']),
+    ...mapGetters('okrs', ['workbenchObjectives']),
 
     minDate() {
       return min([
@@ -198,9 +201,11 @@ export default {
      * the timeline view.
      */
     groupedObjectives() {
-      return this.orderedObjectives.reduce((rows, o) => {
-        return this.placeObjective(o, rows);
-      }, []);
+      return this.orderedObjectives
+        .map((o, i) => ({ tabindex: i + 1, objective: o }))
+        .reduce((rows, o) => {
+          return this.placeObjective(o, rows);
+        }, []);
     },
 
     /**
@@ -260,7 +265,11 @@ export default {
   },
 
   methods: {
-    ...mapActions(['setSelectedObjective']),
+    ...mapActions('okrs', [
+      'addWorkbenchObjective',
+      'removeWorkbenchObjective',
+      'clearWorkbenchObjectives',
+    ]),
 
     /*
      * Return the end date of the last goal in `row`.
@@ -281,8 +290,10 @@ export default {
     placeObjective(o, rows) {
       let i = 0;
 
+      const { objective } = o;
+
       while (i < rows.length) {
-        if (this.rowEndDate(rows[i]) <= this.startDate(o)) {
+        if (this.rowEndDate(rows[i]) <= this.startDate(objective)) {
           break;
         }
         i += 1;
@@ -290,14 +301,14 @@ export default {
 
       if (rows[i]) {
         rows[i].objectives.push({
-          objective: o,
+          ...o,
           /*
            * `dayDiff` is the number of days between this objective and the one
            * before it on the same row. This is used to compute the amount of
            * margin later.
            */
           dayDiff: differenceInDays(
-            endOfDay(this.startDate(o).toDate()),
+            endOfDay(this.startDate(objective).toDate()),
             startOfDay(this.rowEndDate(rows[i]).toDate())
           ),
         });
@@ -306,7 +317,7 @@ export default {
          * `dayDiff: null` means that the objective is the first one in its
          * row.
          */
-        rows[i] = { i, objectives: [{ objective: o, dayDiff: null }] };
+        rows[i] = { i, objectives: [{ ...o, dayDiff: null }] };
       }
 
       return rows;
@@ -399,21 +410,66 @@ export default {
       window.removeEventListener('mouseup', this.stopDrag);
     },
 
-    selectObjective(e, o) {
-      this.setSelectedObjective(o.objective);
-      this.$nextTick(() => {
-        e.currentTarget.scrollIntoView({
-          block: 'center',
-          inline: 'start',
-          behavior: 'smooth',
-        });
+    beforeSelectObjective(objective) {
+      return async (event) => {
+        if (event.metaKey) {
+          event.preventDefault();
+
+          if (this.activeObjective && objective.id !== this.activeObjective.id) {
+            // Add currently active objective to workbench if the next objective
+            // is selected with the modifier key.
+            await this.addWorkbenchObjective(this.activeObjective.id);
+          }
+
+          if (!this.workbenchObjectives.find((o) => o.id === objective.id)) {
+            await this.addWorkbenchObjective(objective.id);
+
+            if (this.activeObjective && objective.id !== this.activeObjective.id) {
+              await this.$router.replace({
+                name: 'ObjectiveHome',
+                params: { objectiveId: objective.id },
+              });
+            }
+          } else {
+            await this.removeWorkbenchObjective(objective.id);
+          }
+        } else if (
+          this.workbenchObjectives.length &&
+          !this.workbenchObjectives.find((o) => objective.id === o.id)
+        ) {
+          // Clear the workbench if an object is selected with the modifier key
+          // and it is not currently listed.
+          this.clearWorkbenchObjectives();
+        }
+      };
+    },
+
+    afterSelectObjective(event) {
+      const target = event.currentTarget;
+      if (!this.activeObjective) {
+        // Hack to ensure that the selected objective is scrolled into view
+        // when the pane transition first occurs. This should be solved by using
+        // transition hooks or by making the timeline canvas responsive to
+        // resizing (i.e. keeping current scroll position).
+        setTimeout(() => this.scrollTo(target), 50);
+      } else {
+        this.$nextTick(() => this.scrollTo(target));
+      }
+    },
+
+    scrollTo(target) {
+      target.scrollIntoView({
+        block: 'center',
+        inline: 'center',
+        behavior: 'smooth',
       });
     },
 
-    selectPeriodObjectives() {
+    async periodObjectivesToWorkbench() {
       this.periodObjectives
-        .filter((po) => !this.selectedObjectives.map((o) => o.id).includes(po.id))
-        .forEach(this.setSelectedObjective);
+        .filter((po) => !this.workbenchObjectives.map((o) => o.id).includes(po.id))
+        .map((o) => o.id)
+        .forEach(this.addWorkbenchObjective);
 
       this.$nextTick(() => {
         if (this.$refs.period) {
@@ -575,15 +631,9 @@ export default {
   margin: 1rem 0;
 }
 
-.objective {
+.okr-link-card {
   position: relative;
   z-index: 1;
-  background: var(--color-white);
-  border: 2px solid var(--color-border);
-
-  &--selected {
-    outline: 2px solid var(--color-hover);
-  }
 }
 
 @keyframes loading {
diff --git a/src/components/OkrLinkCard.vue b/src/components/OkrLinkCard.vue
new file mode 100644
index 000000000..1c9966146
--- /dev/null
+++ b/src/components/OkrLinkCard.vue
@@ -0,0 +1,98 @@
+<template>
+  <router-link v-slot="{ href, navigate, isExactActive }" :to="route" custom>
+    <a
+      :class="['okr-link-card', { 'okr-link-card--active': isExactActive || active }]"
+      :href="href"
+      @click="activate($event, navigate)"
+    >
+      <div class="okr-link-card__title">
+        <span>{{ title }}</span>
+      </div>
+
+      <progress-bar :progression="progression" />
+    </a>
+  </router-link>
+</template>
+
+<script>
+export default {
+  name: 'OkrLinkCard',
+
+  components: {
+    ProgressBar: () => import('@/components/ProgressBar.vue'),
+  },
+
+  props: {
+    route: {
+      type: Object,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+    progression: {
+      type: Number,
+      required: true,
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    beforeNavigate: {
+      type: Function,
+      default: null,
+    },
+    afterNavigate: {
+      type: Function,
+      default: null,
+    },
+  },
+
+  methods: {
+    async activate(event, rootHandler) {
+      if (this.beforeNavigate) {
+        await this.beforeNavigate(event);
+      }
+
+      await rootHandler(event);
+
+      if (this.afterNavigate) {
+        await this.afterNavigate(event);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
+
+.okr-link-card {
+  display: flex;
+  flex-direction: column;
+  min-height: 6.5rem;
+  color: var(--color-text);
+  text-decoration: none;
+  background-color: var(--color-white);
+  border: 2px solid var(--color-grayscale-10);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--color-hover);
+  }
+
+  &--active {
+    color: var(--color-hover);
+    border: 2px solid var(--color-hover);
+  }
+
+  &__title {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    padding: 0.5rem 1rem 0 1rem;
+    @include get-text('pkt-txt-16-medium');
+  }
+}
+</style>
diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue
index 791969b65..5d772500e 100644
--- a/src/components/ProgressBar.vue
+++ b/src/components/ProgressBar.vue
@@ -1,51 +1,127 @@
 <template>
-  <div v-tooltip="label" class="progress">
-    <progress max="100" :value="Math.min(progression, 100)" :aria-label="label" />
+  <div class="progress-bar">
+    <h4 v-if="title" class="progress-bar__title">{{ title }}</h4>
+    <div class="progress-bar__bar">
+      <span class="progress-bar__label" :style="progressLabelStyle">
+        {{ formattedPercent }}
+      </span>
+      <div
+        :class="[
+          'progress-bar__value',
+          { 'progress-bar__value--indicator': progression > 0 && progression < 1 },
+          { 'progress-bar__value--complete': progression >= 1 },
+        ]"
+        :style="progressValueStyle"
+        role="progressbar"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        :aria-valuenow="percent"
+      ></div>
+    </div>
+    <div v-if="leftLabel || rightLabel" class="progress-bar__sub-labels">
+      <span v-if="leftLabel" class="progress-bar__label">
+        {{ leftLabel }}
+      </span>
+      <span v-if="rightLabel" class="progress-bar__label progress-bar__label--right">
+        {{ rightLabel }}
+      </span>
+    </div>
   </div>
 </template>
 
 <script>
-import i18n from '@/locale/i18n';
+import { format } from 'd3-format';
 
 export default {
   name: 'ProgressBar',
 
   props: {
+    title: {
+      type: String,
+      default: null,
+    },
     progression: {
       type: Number,
       default: 0,
     },
+    leftLabel: {
+      type: String,
+      default: null,
+    },
+    rightLabel: {
+      type: String,
+      default: null,
+    },
   },
 
   computed: {
-    label() {
-      return i18n.t('progress.complete', {
-        progress: Math.round(this.progression),
-      });
+    formattedPercent() {
+      return format('.0%')(this.progression);
+    },
+
+    percent() {
+      const percent = this.progression * 100;
+      return percent > 100 ? 100 : percent;
+    },
+
+    progressLabelStyle() {
+      return `left: max(-0.2rem, min(calc(100% - 2.25rem), calc(${this.percent}% - 1rem)))`;
+    },
+
+    progressValueStyle() {
+      return `width: ${this.percent}%`;
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-progress {
-  display: block;
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
+
+.progress-bar {
   width: 100%;
-  height: 0.5rem;
-  border: 0;
-  border-radius: 0;
 
-  &[value],
-  &[value]::-webkit-progress-bar {
-    background: var(--color-grayscale-10);
+  &__title {
+    @include get-text('pkt-txt-14-medium');
   }
 
-  &[value]::-webkit-progress-value {
-    background: var(--color-secondary);
+  &__bar {
+    position: relative;
+    margin-top: 1.5rem;
+    background-color: var(--color-grayscale-10);
+
+    > span {
+      position: absolute;
+      top: -1.25rem;
+      width: 2.1rem;
+      text-align: center;
+    }
   }
 
-  &[value]::-moz-progress-bar {
-    background: var(--color-secondary);
+  &__value {
+    height: 1rem;
+    background-color: var(--color-blue);
+
+    &--indicator {
+      border-right: 1px solid var(--color-blue-dark);
+    }
+
+    &--complete {
+      background-color: var(--color-green);
+    }
+  }
+
+  &__label {
+    @include get-text('pkt-txt-12-medium');
+  }
+
+  &__sub-labels {
+    display: flex;
+    padding: 0.15rem 0.25rem;
+
+    .progress-bar__label--right {
+      margin-left: auto;
+    }
   }
 }
 </style>
diff --git a/src/components/panes/KeyResultPane.vue b/src/components/panes/KeyResultPane.vue
new file mode 100644
index 000000000..7b5612a6e
--- /dev/null
+++ b/src/components/panes/KeyResultPane.vue
@@ -0,0 +1,289 @@
+<template>
+  <pane-wrapper
+    :title="activeKeyResult.name"
+    class="key-result-pane"
+    closable
+    @close="
+      $router.push({ name: 'ObjectiveHome', params: { objectiveId: activeObjective.id } })
+    "
+  >
+    <template #actions>
+      <pkt-button
+        v-if="hasEditRights"
+        v-tooltip="$t('btn.updateKeyResult')"
+        skin="tertiary"
+        size="small"
+        variant="icon-only"
+        icon-name="edit"
+        @onClick="$emit('edit-key-result')"
+      />
+    </template>
+
+    <archived-restore
+      v-if="activeKeyResult.archived"
+      class="mt-size-16"
+      :restore="restore"
+      :object-type="$t('archived.keyResult')"
+    />
+
+    <p v-if="activeKeyResult.description" class="key-result-pane__description">
+      {{ activeKeyResult.description }}
+    </p>
+
+    <progress-bar
+      class="key-result-pane__progression"
+      :title="`${$t('keyResult.progression')}:`"
+      :progression="progression"
+      :right-label="progressionRightLabel"
+    />
+
+    <widget-progress-history
+      class="key-result-pane__values"
+      :title="$t('keyResult.registeredValues')"
+      :progress="progress"
+      :is-loading="isLoading"
+      @update-record="updateHistoryRecord"
+      @delete-record="deleteHistoryRecord"
+    >
+      <template #title-actions>
+        <div v-if="hasEditRights" data-mode="dark">
+          <pkt-button
+            v-tooltip="$t('keyResult.newValue')"
+            :text="$t('keyResult.newValue')"
+            skin="primary"
+            size="small"
+            variant="icon-left"
+            icon-name="plus-sign"
+            @onClick="showValueModal = true"
+          />
+        </div>
+      </template>
+    </widget-progress-history>
+
+    <widget class="key-result-pane__graph" :title="$t('general.graph')">
+      <svg ref="graph" class="graph"></svg>
+    </widget>
+
+    <pkt-alert v-if="activeKeyResult.auto" skin="info">
+      {{ $t('keyResult.autoHelpText') }}
+    </pkt-alert>
+
+    <pkt-alert v-if="activeKeyResult.auto && activeKeyResult.error" skin="error">
+      {{ $t('keyResult.autoError') }} {{ activeKeyResult.error }}
+    </pkt-alert>
+
+    <progress-modal
+      v-if="showValueModal"
+      @create-record="createHistoryRecord"
+      @close="showValueModal = false"
+    />
+  </pane-wrapper>
+</template>
+
+<script>
+import { mapActions, mapGetters, mapState } from 'vuex';
+import { format } from 'd3-format';
+import { max, min } from 'd3-array';
+import { db } from '@/config/firebaseConfig';
+import KeyResult from '@/db/KeyResult';
+import Progress from '@/db/Progress';
+import LineChart from '@/util/LineChart';
+import { getRandomInt } from '@/util';
+import { getKeyResultProgressDetails } from '@/util/keyResultProgress';
+import { PktButton } from '@oslokommune/punkt-vue2';
+import WidgetWrapper from '@/components/widgets/WidgetWrapper.vue';
+import WidgetProgressHistory from '@/components/widgets/WidgetProgressHistory/WidgetProgressHistory.vue';
+import PaneWrapper from '@/components/panes/PaneWrapper.vue';
+import ProgressBar from '@/components/ProgressBar.vue';
+
+export default {
+  name: 'KeyResultPane',
+
+  components: {
+    PktAlert: () => import('@oslokommune/punkt-vue2').then(({ PktAlert }) => PktAlert),
+    ArchivedRestore: () => import('@/components/ArchivedRestore.vue'),
+    ProgressModal: () => import('@/components/modals/ProgressModal.vue'),
+    Widget: WidgetWrapper,
+    WidgetProgressHistory,
+    PaneWrapper,
+    PktButton,
+    ProgressBar,
+  },
+
+  data: () => ({
+    progress: [],
+    graph: null,
+    isLoading: false,
+    showKeyResultDrawer: false,
+    showValueModal: false,
+  }),
+
+  computed: {
+    ...mapState(['activePeriod']),
+    ...mapState('okrs', ['activeObjective', 'activeKeyResult']),
+    ...mapGetters(['hasEditRights']),
+
+    startDate() {
+      return this.activeKeyResult.objective.startDate || this.activePeriod.startDate;
+    },
+
+    endDate() {
+      return this.activeKeyResult.objective.endDate || this.activePeriod.endDate;
+    },
+
+    progression() {
+      const progressDetails = getKeyResultProgressDetails(this.activeKeyResult);
+      return progressDetails.percentageCompleted / 100;
+    },
+
+    progressionRightLabel() {
+      const progressDetails = getKeyResultProgressDetails(this.activeKeyResult);
+
+      if (progressDetails.isCompleted) {
+        return this.randomCompletedMessage();
+      }
+
+      return `${progressDetails.formattedTotalRemainingTasks} ${this.$t(
+        'progress.remaining',
+        { unit: this.activeKeyResult.unit }
+      )}`;
+    },
+  },
+
+  watch: {
+    activeKeyResult: {
+      immediate: true,
+      async handler(keyResult, oldKeyResult) {
+        if (!keyResult || keyResult.id === oldKeyResult?.id) {
+          return;
+        }
+
+        this.isLoading = true;
+        await this.$bind(
+          'progress',
+          db
+            .collection(`keyResults/${keyResult.id}/progress`)
+            .orderBy('timestamp', 'desc')
+        );
+        this.isLoading = false;
+        this.renderGraph();
+      },
+    },
+
+    progress() {
+      this.renderGraph();
+    },
+  },
+
+  methods: {
+    format,
+
+    ...mapActions('okrs', ['setActiveKeyResult']),
+
+    percent(value) {
+      return format('.0%')(value);
+    },
+
+    renderGraph() {
+      if (!this.graph) {
+        this.graph = new LineChart(this.$refs.graph, {
+          height: 450,
+          tooltips: true,
+        });
+      }
+      const { startValue, targetValue } = this.activeKeyResult;
+      const progressValues = this.progress.map((record) => record.value);
+      this.graph.render({
+        startValue: min(progressValues) > startValue ? startValue : null,
+        targetValue: max(progressValues) < targetValue ? targetValue : null,
+        startDate: this.startDate.toDate(),
+        endDate: this.endDate.toDate(),
+        progress: this.progress,
+        initialValue: startValue,
+      });
+    },
+
+    async updateHistoryRecord(id, data, modalCloseHandler) {
+      try {
+        await Progress.update(
+          db.collection('keyResults'),
+          this.activeKeyResult.id,
+          id,
+          data
+        );
+        this.$toasted.show(this.$t('toaster.update.progress'));
+      } catch {
+        this.$toasted.error(this.$t('toaster.error.updateProgress'));
+      } finally {
+        modalCloseHandler();
+      }
+    },
+
+    async deleteHistoryRecord(id) {
+      try {
+        await Progress.remove(db.collection('keyResults'), this.activeKeyResult.id, id);
+        this.$toasted.show(this.$t('toaster.delete.progress'));
+      } catch {
+        this.$toasted.error(this.$t('toaster.error.deleteProgress'));
+      }
+    },
+
+    async createHistoryRecord(data, modalCloseHandler) {
+      try {
+        await Progress.create(db.collection('keyResults'), this.activeKeyResult.id, data);
+        this.$toasted.show(this.$t('toaster.add.progress'));
+      } catch (e) {
+        this.$toasted.error(this.$t('toaster.error.addProgress'));
+      } finally {
+        modalCloseHandler();
+      }
+    },
+
+    async restore() {
+      try {
+        await KeyResult.restore(this.activeKeyResult.id);
+      } catch {
+        this.$toasted.error(
+          this.$t('toaster.error.restore', { document: this.activeKeyResult.id })
+        );
+      }
+    },
+
+    randomCompletedMessage() {
+      const messages = Object.values(this.$t('progress.completedMessages'));
+      const randomIndex = getRandomInt(messages.length);
+
+      return messages[randomIndex];
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/typography';
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
+
+.key-result-pane {
+  &__description {
+    @include get-text('pkt-txt-18-light');
+  }
+
+  &__progression {
+    margin-top: 1rem;
+  }
+
+  &__values,
+  &__graph {
+    margin-top: 3rem;
+  }
+
+  ::v-deep .widget {
+    padding: 0;
+    border: 0;
+
+    h3 {
+      @include get-text('pkt-txt-18-medium');
+    }
+  }
+}
+</style>
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
new file mode 100644
index 000000000..0340f0955
--- /dev/null
+++ b/src/components/panes/ObjectivePane.vue
@@ -0,0 +1,188 @@
+<template>
+  <pane-wrapper
+    :title="activeObjective.name"
+    class="objective-pane"
+    closable
+    @close="$router.push({ name: 'ItemHome' })"
+  >
+    <template #actions>
+      <pkt-button
+        v-tooltip="$t('btn.updateObjective')"
+        skin="tertiary"
+        variant="icon-only"
+        size="small"
+        icon-name="edit"
+        @onClick="$emit('edit-objective')"
+      />
+    </template>
+
+    <span v-if="period" class="objective-pane__period">
+      <pkt-icon name="calendar" />
+      {{ periodDates(period) }}
+    </span>
+
+    <p v-if="activeObjective.description" class="objective-pane__description">
+      {{ activeObjective.description }}
+    </p>
+
+    <progress-bar
+      class="objective-pane__progression"
+      :title="$t('objective.progressionTitle')"
+      :progression="activeObjective.progression"
+    />
+
+    <div class="objective-pane__key-results-header" data-mode="dark">
+      <h3>{{ $t('general.keyResults') }}</h3>
+      <pkt-button
+        v-tooltip="$t('btn.createKeyResult')"
+        :text="$t('btn.createKeyResult')"
+        skin="primary"
+        size="small"
+        variant="icon-left"
+        icon-name="plus-sign"
+        @onClick="$emit('add-key-result')"
+      />
+    </div>
+
+    <div class="objective-pane__key-results">
+      <div v-if="loadingKeyResults">
+        <loading-small />
+        {{ $t('general.loading') }}
+      </div>
+
+      <template v-else-if="keyResults.length">
+        <okr-link-card
+          v-for="keyResult in keyResults"
+          :key="keyResult.id"
+          :route="{
+            name: 'KeyResultHome',
+            params: { objectiveId: activeObjective.id, keyResultId: keyResult.id },
+          }"
+          :title="keyResult.name"
+          :progression="keyResult.progression"
+          :active="activeKeyResult && activeKeyResult.id === keyResult.id"
+        />
+      </template>
+
+      <empty-state
+        v-else
+        :heading="$t('empty.noKeyResults.heading')"
+        :body="$t('empty.noKeyResults.body')"
+      />
+    </div>
+  </pane-wrapper>
+</template>
+
+<script>
+import { format } from 'd3-format';
+import { mapState } from 'vuex';
+import { dateLong, periodDates } from '@/util';
+import { db } from '@/config/firebaseConfig';
+import { PktButton } from '@oslokommune/punkt-vue2';
+import ProgressBar from '@/components/ProgressBar.vue';
+import PaneWrapper from '@/components/panes/PaneWrapper.vue';
+import LoadingSmall from '@/components/LoadingSmall.vue';
+
+export default {
+  name: 'ObjectivePane',
+
+  components: {
+    PaneWrapper,
+    EmptyState: () => import('@/components/EmptyState.vue'),
+    OkrLinkCard: () => import('@/components/OkrLinkCard.vue'),
+    LoadingSmall,
+    PktButton,
+    ProgressBar,
+  },
+
+  data: () => ({
+    loadingKeyResults: false,
+    keyResults: [],
+  }),
+
+  computed: {
+    ...mapState('okrs', ['activeObjective', 'activeKeyResult']),
+
+    period() {
+      if (this.activeObjective.startDate && this.activeObjective.endDate) {
+        return {
+          startDate: this.activeObjective.startDate.toDate(),
+          endDate: this.activeObjective.endDate.toDate(),
+        };
+      }
+
+      if (this.activeObjective.period.startDate && this.activeObjective.period.endDate) {
+        return {
+          startDate: this.activeObjective.period.startDate.toDate(),
+          endDate: this.activeObjective.period.endDate.toDate(),
+        };
+      }
+
+      return null;
+    },
+  },
+
+  watch: {
+    activeObjective: {
+      immediate: true,
+      async handler(objective) {
+        this.loadingKeyResults = true;
+        const objectiveRef = await db.doc(`objectives/${objective.id}`);
+        const keyResults = await db
+          .collection('keyResults')
+          .where('archived', '==', false)
+          .where('objective', '==', objectiveRef)
+          .orderBy('name');
+        await this.$bind('keyResults', keyResults);
+        this.loadingKeyResults = false;
+      },
+    },
+  },
+
+  methods: {
+    dateLong,
+    periodDates,
+
+    percent(value) {
+      return format('.0%')(value);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
+
+.objective-pane {
+  &__period {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    color: var(--color-grayscale-60);
+    --fg-color: var(--color-grayscale-40);
+  }
+
+  &__description {
+    @include get-text('pkt-txt-18-light');
+  }
+
+  &__progression {
+    margin-top: 1rem;
+  }
+
+  h3 {
+    @include get-text('pkt-txt-18-medium');
+  }
+
+  &__key-results-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 3rem 0 0 0;
+  }
+
+  &__key-results > .okr-link-card {
+    margin-bottom: 1rem;
+  }
+}
+</style>
diff --git a/src/components/panes/TimelinePane.vue b/src/components/panes/TimelinePane.vue
new file mode 100644
index 000000000..9808a3348
--- /dev/null
+++ b/src/components/panes/TimelinePane.vue
@@ -0,0 +1,64 @@
+<template>
+  <pane-wrapper :title="$t('general.OKRsLong')" class="timeline-pane">
+    <template #actions>
+      <div v-if="hasEditRights" data-mode="dark">
+        <pkt-button
+          v-tooltip="$t('btn.createObjective')"
+          :text="$t('btn.createObjective')"
+          skin="primary"
+          size="small"
+          variant="icon-left"
+          icon-name="plus-sign"
+          @onClick="$emit('add-objective')"
+        />
+      </div>
+    </template>
+
+    <gantt-chart
+      :objectives="objectivesWithKeyResults"
+      :period="selectedPeriod"
+      :loading="dataLoading"
+    />
+  </pane-wrapper>
+</template>
+
+<script>
+import { mapGetters, mapState } from 'vuex';
+import { PktButton } from '@oslokommune/punkt-vue2';
+import PaneWrapper from '@/components/panes/PaneWrapper.vue';
+import GanttChart from '@/components/GanttChart.vue';
+
+export default {
+  name: 'TimelinePane',
+
+  components: {
+    PaneWrapper,
+    GanttChart,
+    PktButton,
+  },
+
+  computed: {
+    ...mapState(['dataLoading', 'selectedPeriod']),
+    ...mapGetters(['objectivesWithKeyResults', 'hasEditRights']),
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.timeline-pane {
+  ::v-deep .pane__inner {
+    height: 100%;
+    padding: 0;
+  }
+
+  ::v-deep .pane__header {
+    padding: 1.5rem;
+  }
+
+  ::v-deep .pane__body {
+    flex: 1 0 auto;
+    height: 0;
+    padding: 0;
+  }
+}
+</style>
diff --git a/src/components/panes/WorkbenchPane.vue b/src/components/panes/WorkbenchPane.vue
new file mode 100644
index 000000000..1d410b8c6
--- /dev/null
+++ b/src/components/panes/WorkbenchPane.vue
@@ -0,0 +1,115 @@
+<template>
+  <pane-wrapper
+    :title="`${$t('workbench.selectedObjectives')} (${workbenchObjectives.length})`"
+    class="workbench-pane"
+    closable
+    @close="close"
+  >
+    <progress-bar
+      v-if="progression >= 0"
+      class="workbench-pane__progression"
+      :title="$t('workbench.progressionTitle')"
+      :progression="progression"
+    />
+
+    <div class="workbench-pane__objectives">
+      <div v-for="objective in workbenchObjectives" :key="objective.id" class="">
+        <okr-link-card
+          :route="{ name: 'ObjectiveHome', params: { objectiveId: objective.id } }"
+          :title="objective.name"
+          :progression="objective.progression"
+          :active="activeObjective && objective.id === activeObjective.id"
+        />
+
+        <pkt-button
+          v-tooltip.bottom="$t('btn.remove')"
+          class="workbench-pane__remove-button"
+          size="small"
+          variant="icon-only"
+          icon-name="minus-circle"
+          skin="tertiary"
+          @onClick="removeObject(objective)"
+        />
+      </div>
+    </div>
+  </pane-wrapper>
+</template>
+
+<script>
+import { mapActions, mapGetters, mapState } from 'vuex';
+import { PktButton } from '@oslokommune/punkt-vue2';
+import PaneWrapper from '@/components/panes/PaneWrapper.vue';
+
+export default {
+  name: 'WorkbenchPane',
+
+  components: {
+    PaneWrapper,
+    OkrLinkCard: () => import('@/components/OkrLinkCard.vue'),
+    ProgressBar: () => import('@/components/ProgressBar.vue'),
+    PktButton,
+  },
+
+  computed: {
+    ...mapState('okrs', ['activeObjective']),
+    ...mapGetters('okrs', ['workbenchObjectives']),
+
+    progression() {
+      const p = this.workbenchObjectives.map((o) => o.progression);
+      const sum = p.reduce((partialSum, a) => partialSum + a, 0);
+      return sum / this.workbenchObjectives.length;
+    },
+  },
+
+  methods: {
+    ...mapActions('okrs', ['removeWorkbenchObjective', 'clearWorkbenchObjectives']),
+
+    async removeObject(objective) {
+      await this.removeWorkbenchObjective(objective.id);
+
+      // Set next objective as active or unset current if removed.
+      if (this.activeObjective && this.activeObjective.id === objective.id) {
+        if (this.workbenchObjectives.length) {
+          this.$router.replace({
+            name: 'ObjectiveHome',
+            params: { objectiveId: this.workbenchObjectives[0].id },
+          });
+        } else {
+          this.$router.push({ name: 'ItemHome' });
+        }
+      }
+    },
+
+    async close() {
+      await this.clearWorkbenchObjectives();
+      if (this.$route.name !== 'ItemHome') {
+        this.$router.push({ name: 'ItemHome' });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.workbench-pane {
+  &__progression {
+    margin-bottom: 1.5rem;
+  }
+
+  &__objectives > div {
+    position: relative;
+    margin-bottom: 1.5rem;
+  }
+
+  &__remove-button {
+    position: absolute;
+    top: -1rem;
+    right: -1rem;
+    height: 2rem;
+    padding: 0 0.25rem;
+    color: var(--color-grayscale-40);
+    background-color: var(--color-white);
+    border-radius: 50%;
+  }
+}
+</style>
diff --git a/src/components/widgets/WidgetProgressHistory/WidgetProgressHistory.vue b/src/components/widgets/WidgetProgressHistory/WidgetProgressHistory.vue
index c7b518886..804096789 100644
--- a/src/components/widgets/WidgetProgressHistory/WidgetProgressHistory.vue
+++ b/src/components/widgets/WidgetProgressHistory/WidgetProgressHistory.vue
@@ -1,5 +1,6 @@
 <template>
-  <widget :title="$t('widget.history.title')">
+  <widget :title="title ? title : $t('widget.history.title')">
+    <template #title-actions><slot name="title-actions" /></template>
     <progress-history-table
       :history-records="historyRecords"
       :is-loading="isLoading"
@@ -41,6 +42,11 @@ export default {
   },
 
   props: {
+    title: {
+      type: String,
+      required: false,
+      default: null,
+    },
     isLoading: {
       type: Boolean,
       required: true,
diff --git a/src/locale/locales/en-US.json b/src/locale/locales/en-US.json
index 6784e6af5..3f195b0b5 100644
--- a/src/locale/locales/en-US.json
+++ b/src/locale/locales/en-US.json
@@ -184,7 +184,6 @@
     "keyResults": "Key results",
     "success": "Success",
     "objective": "Objective",
-    "selectedObjectives": "Selected objectives",
     "selectObjectivesInPeriod": "Select all objectives in this period",
     "noObjectivesInPeriod": "No objectives in this period",
     "keyResult": "Key result",
@@ -207,7 +206,8 @@
     "newKeyResult": "New key result",
     "step": "Step {step} of {steps}",
     "or": "or",
-    "shortcuts": "Shortcuts"
+    "shortcuts": "Shortcuts",
+    "graph": "Graph"
   },
   "home": {
     "welcome": "Welcome to {appName}!",
@@ -342,9 +342,11 @@
     "description": "Description",
     "startValue": "Start value",
     "targetValue": "Target value",
+    "progression": "Progression",
     "unit": "Unit of measurement",
     "newValue": "New value",
     "editValue": "Edit value",
+    "registeredValues": "Registered values",
     "automation": {
       "header": "Automatic progress registration (Google Sheets)",
       "googleSheetUrl": "Google Sheets URL",
@@ -380,7 +382,7 @@
   },
   "objective": {
     "period": "Period",
-    "progression": "Progress",
+    "progressionTitle": "Progression in percent based on the sum of key results:",
     "weight": "Weight",
     "change": "Change objective",
     "add": "Add objective",
@@ -399,6 +401,10 @@
     "thisQuarter": "This quarter",
     "previousQuarter": "Previous quarter"
   },
+  "workbench": {
+    "selectedObjectives": "Selected objectives",
+    "progressionTitle": "Overall progression based on selected objectives:"
+  },
   "tooltip": {
     "openMenu": "Open menu",
     "keyResultValue": "Insert new value",
diff --git a/src/locale/locales/nb-NO.json b/src/locale/locales/nb-NO.json
index 33ae5ed2a..2d9033238 100644
--- a/src/locale/locales/nb-NO.json
+++ b/src/locale/locales/nb-NO.json
@@ -184,7 +184,6 @@
     "keyResults": "Nøkkelresultater",
     "success": "Suksess",
     "objective": "Mål",
-    "selectedObjectives": "Valgte mål",
     "selectObjectivesInPeriod": "Velg alle mål i denne perioden",
     "noObjectivesInPeriod": "Ingen mål i denne perioden",
     "keyResult": "Nøkkelresultat",
@@ -207,7 +206,8 @@
     "newKeyResult": "Nytt nøkkelresultat",
     "step": "Steg {step} av {steps}",
     "or": "eller",
-    "shortcuts": "Snarveier"
+    "shortcuts": "Snarveier",
+    "graph": "Graf"
   },
   "home": {
     "welcome": "Velkommen til {appName}!",
@@ -342,9 +342,11 @@
     "description": "Beskrivelse",
     "startValue": "Startverdi",
     "targetValue": "Målverdi",
+    "progression": "Progresjon",
     "unit": "Måleenhet",
     "newValue": "Ny verdi",
     "editValue": "Endre verdi",
+    "registeredValues": "Registrerte verdier",
     "automation": {
       "header": "Automatisk registrering av progresjon (Google Sheets)",
       "googleSheetUrl": "Google Sheets URL",
@@ -380,7 +382,7 @@
   },
   "objective": {
     "period": "Periode",
-    "progression": "Progresjon",
+    "progressionTitle": "Prosentvis fremdrift basert på summen av fremdrift i nøkkelresultatene:",
     "weight": "Vekt",
     "change": "Endre mål",
     "add": "Legg til mål",
@@ -399,6 +401,10 @@
     "thisQuarter": "Dette kvartalet",
     "previousQuarter": "Forrige kvartal"
   },
+  "workbench": {
+    "selectedObjectives": "Valgte mål",
+    "progressionTitle": "Samlet progresjon for valgte mål i listen:"
+  },
   "tooltip": {
     "openMenu": "Åpne meny",
     "keyResultValue": "Skriv inn ny måleverdi",

From c51c46de364aa1a2cacdd5ddd6989dd1e428bee8 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Thu, 24 Aug 2023 13:26:37 +0200
Subject: [PATCH 004/102] Use pane layout for item OKR view

---
 src/components/Navigation/SiteHeader.vue  |   7 +-
 src/components/drawers/EditKeyResult.vue  |  71 +++--
 src/components/drawers/EditObjective.vue  |  79 +++--
 src/components/panes/TimelinePane.vue     |   4 +-
 src/router/index.js                       |  26 +-
 src/router/router-guards/index.js         |   1 -
 src/router/router-guards/keyResultHome.js |  25 +-
 src/router/router-guards/objectiveHome.js |  21 --
 src/views/Item/ItemOKRs.vue               | 352 ++++++++++++++--------
 9 files changed, 367 insertions(+), 219 deletions(-)
 delete mode 100644 src/router/router-guards/objectiveHome.js

diff --git a/src/components/Navigation/SiteHeader.vue b/src/components/Navigation/SiteHeader.vue
index 84d9b49c3..fe66cbddb 100644
--- a/src/components/Navigation/SiteHeader.vue
+++ b/src/components/Navigation/SiteHeader.vue
@@ -109,6 +109,9 @@ export default {
           route: { name: 'ItemHome' },
           label: this.$t('general.OKRsLong'),
           shortLabel: this.$t('general.OKRs'),
+          active: ['ItemHome', 'ObjectiveHome', 'KeyResultHome'].includes(
+            this.$route.name
+          ),
         },
         {
           route: { name: 'ItemMeasurements', query: { view: 'list' } },
@@ -158,7 +161,9 @@ export default {
     },
 
     showToolbar() {
-      return ['ItemHome', 'ItemMeasurements'].includes(this.$route.name);
+      return ['ItemHome', 'ObjectiveHome', 'KeyResultHome', 'ItemMeasurements'].includes(
+        this.$route.name
+      );
     },
   },
 
diff --git a/src/components/drawers/EditKeyResult.vue b/src/components/drawers/EditKeyResult.vue
index cea8ccce4..7cc9d8798 100644
--- a/src/components/drawers/EditKeyResult.vue
+++ b/src/components/drawers/EditKeyResult.vue
@@ -1,16 +1,16 @@
 <template>
   <paged-drawer-wrapper
     ref="drawer"
-    :visible="visible"
+    :visible="visible && !!thisKeyResult"
     :page-count="pageCount"
     @close="close"
   >
     <template #title="{ isDone, isSuccess }">
       <template v-if="!isDone">
-        {{ $t(keyResult ? 'admin.keyResult.change' : 'admin.keyResult.new') }}
+        {{ $t(editMode ? 'admin.keyResult.change' : 'admin.keyResult.new') }}
       </template>
       <template v-else-if="isSuccess">
-        {{ $t(keyResult ? 'keyResult.updated' : 'keyResult.created') }}
+        {{ $t(editMode ? 'keyResult.updated' : 'keyResult.created') }}
       </template>
       <template v-else>{{ $t('toaster.error.save') }}</template>
     </template>
@@ -22,7 +22,7 @@
             v-model="thisKeyResult.name"
             input-type="textarea"
             name="name"
-            :disabled="keyResult?.archived"
+            :disabled="thisKeyResult?.archived"
             :rows="2"
             :label="$t('fields.name')"
             rules="required"
@@ -31,7 +31,7 @@
             v-model="thisKeyResult.description"
             input-type="textarea"
             name="description"
-            :disabled="keyResult?.archived"
+            :disabled="thisKeyResult?.archived"
             :rows="2"
             :label="$t('fields.description')"
           />
@@ -79,7 +79,7 @@
           </div>
         </template>
 
-        <template v-if="!keyResult?.archived" #actions="{ handleSubmit }">
+        <template v-if="!thisKeyResult?.archived" #actions="{ handleSubmit }">
           <pkt-button
             v-if="pageIndex === 1"
             :text="$t('btn.cancel')"
@@ -112,7 +112,7 @@
             {{ $t('btn.back') }}
           </pkt-button>
         </template>
-        <template v-else-if="!keyResult">
+        <template v-else-if="!thisKeyResult.id">
           <pkt-button skin="tertiary" @onClick="close">
             {{ $t('btn.close') }}
           </pkt-button>
@@ -130,9 +130,9 @@
     </template>
 
     <template #footer="{ isDone }">
-      <template v-if="keyResult && !isDone">
+      <template v-if="editMode && !isDone">
         <archived-restore
-          v-if="keyResult.archived"
+          v-if="thisKeyResult.archived"
           :restore="restore"
           object-type="keyResult"
         />
@@ -234,17 +234,38 @@ export default {
 
       return [this.thisLevelOption, ...childrenOptions];
     },
+    editMode() {
+      return !!this.thisKeyResult?.id;
+    },
   },
 
   watch: {
     visible: {
       immediate: true,
       async handler(visible) {
-        if (!visible) {
-          this.thisKeyResult = null;
+        this.thisKeyResult = null;
+        if (visible) {
+          this.$refs.drawer.reset();
+        }
+
+        if (!this.keyResult) {
+          this.thisKeyResult = {
+            unit: 'prosent',
+            startValue: 0,
+            targetValue: 100,
+          };
           return;
         }
-        this.thisKeyResult = this.keyResult ? { ...this.keyResult } : {};
+
+        this.loading = true;
+        db.collection('keyResults')
+          .doc(this.keyResult.id)
+          .get()
+          .then((snapshot) => {
+            this.thisKeyResult = snapshot.data();
+            this.thisKeyResult.id = this.keyResult.id;
+            this.loading = false;
+          });
       },
     },
     // thisLevel: {
@@ -281,16 +302,22 @@ export default {
             parent,
           };
 
-          if (this.keyResult) {
-            await KeyResult.update(this.keyResult.id, data);
+          if (this.thisKeyResult?.id) {
+            await KeyResult.update(this.thisKeyResult.id, data);
+            this.$emit('update', this.thisKeyResult);
           } else {
-            await KeyResult.create({
+            const objectiveRef = db.collection('objectives').doc(this.objective.id);
+            const { id } = await KeyResult.create({
               ...data,
-              objective: db.collection('objectives').doc(this.objective.id),
+              objective: objectiveRef,
             });
+            this.thisKeyResult.id = id;
+            this.thisKeyResult.objective = objectiveRef;
+            this.$emit('create', this.thisKeyResult);
           }
           this.$refs.drawer.next();
         } catch (error) {
+          console.log(error);
           this.$refs.drawer.next(false);
           this.$toasted.error(this.$t('toaster.error.save'));
         }
@@ -302,10 +329,12 @@ export default {
     async archive() {
       this.loading = true;
       try {
-        await KeyResult.archive(this.keyResult.id);
+        await KeyResult.archive(this.thisKeyResult.id);
+        this.thisKeyResult.archived = true;
+        this.$emit('archive', this.thisKeyResult);
       } catch (error) {
         this.$toasted.error(
-          this.$t('toaster.error.archive', { document: this.keyResult.name })
+          this.$t('toaster.error.archive', { document: this.thisKeyResult.name })
         );
       }
       this.loading = false;
@@ -313,10 +342,12 @@ export default {
 
     async restore() {
       try {
-        await KeyResult.restore(this.keyResult.id);
+        await KeyResult.restore(this.thisKeyResult.id);
+        this.thisKeyResult.archived = false;
+        this.$emit('restore', this.thisKeyResult);
       } catch {
         this.$toasted.error(
-          this.$t('toaster.error.restore', { document: this.keyResult.id })
+          this.$t('toaster.error.restore', { document: this.thisKeyResult.id })
         );
       }
     },
diff --git a/src/components/drawers/EditObjective.vue b/src/components/drawers/EditObjective.vue
index 8efaca8b0..f28c68b1f 100644
--- a/src/components/drawers/EditObjective.vue
+++ b/src/components/drawers/EditObjective.vue
@@ -1,11 +1,11 @@
 <template>
-  <paged-drawer-wrapper ref="drawer" :visible="visible" @close="close">
+  <paged-drawer-wrapper ref="drawer" :visible="visible && !!thisObjective" @close="close">
     <template #title="{ isDone, isSuccess }">
       <template v-if="!isDone">
-        {{ $t(objective ? 'admin.objective.change' : 'admin.objective.new') }}
+        {{ $t(editMode ? 'admin.objective.change' : 'admin.objective.new') }}
       </template>
       <template v-else-if="isSuccess">
-        {{ $t(objective ? 'objective.updated' : 'admin.objective.created') }}
+        {{ $t(editMode ? 'objective.updated' : 'admin.objective.created') }}
       </template>
       <template v-else>{{ $t('toaster.error.save') }}</template>
     </template>
@@ -16,7 +16,7 @@
           v-model="thisObjective.name"
           input-type="textarea"
           name="name"
-          :disabled="objective?.archived"
+          :disabled="thisObjective?.archived"
           :rows="2"
           :label="$t('fields.name')"
           rules="required"
@@ -25,7 +25,7 @@
         <form-component
           v-model="thisObjective.description"
           input-type="textarea"
-          :disabled="objective?.archived"
+          :disabled="thisObjective?.archived"
           :rows="2"
           name="description"
           :label="$t('fields.description')"
@@ -35,7 +35,7 @@
           v-model="periodRange"
           input-type="date"
           name="period"
-          :disabled="objective?.archived"
+          :disabled="thisObjective?.archived"
           :label="$t('fields.period')"
           :placeholder="$t('general.selectRange')"
           :date-picker-config="flatPickerConfig"
@@ -52,10 +52,10 @@
           {{ formattedPeriod(newestObjective) }}
         </pkt-button>
 
-        <template v-if="!objective?.archived" #actions="{ handleSubmit }">
+        <template v-if="!thisObjective?.archived" #actions="{ handleSubmit }">
           <btn-cancel :disabled="loading" @click="close" />
           <btn-save
-            :label="objective ? $t('btn.updateObjective') : $t('btn.createObjective')"
+            :label="editMode ? $t('btn.updateObjective') : $t('btn.createObjective')"
             variant="label-only"
             :disabled="loading"
             @click="handleSubmit(save)"
@@ -78,13 +78,7 @@
           <pkt-button
             v-if="thisObjective.id"
             skin="secondary"
-            @onClick="
-              $router.push({
-                name: 'ObjectiveHome',
-                params: { objectiveId: thisObjective.id },
-                query: { createKeyResult: '1' },
-              })
-            "
+            @onClick="$emit('add-key-result')"
           >
             {{ $t('btn.createKeyResult') }}
           </pkt-button>
@@ -93,9 +87,9 @@
     </template>
 
     <template #footer="{ isDone }">
-      <template v-if="objective && !isDone">
+      <template v-if="editMode && !isDone">
         <archived-restore
-          v-if="objective.archived"
+          v-if="thisObjective.archived"
           :restore="restore"
           object-type="objective"
         />
@@ -108,7 +102,8 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapActions, mapState } from 'vuex';
+import { db } from '@/config/firebaseConfig';
 import formattedPeriod from '@/util/okr';
 import Objective from '@/db/Objective';
 import firebase from 'firebase/compat/app';
@@ -166,31 +161,45 @@ export default {
 
   computed: {
     ...mapState(['activeItemRef']),
+
+    editMode() {
+      return !!this.thisObjective?.id;
+    },
   },
 
   watch: {
     visible: {
       immediate: true,
       async handler(visible) {
-        if (!visible) {
-          this.thisObjective = null;
-          this.periodRange = null;
-          return;
+        this.thisObjective = null;
+        this.periodRange = null;
+        if (visible) {
+          this.$refs.drawer.reset();
         }
 
-        if (this.objective) {
-          this.thisObjective = { ...this.objective };
-          this.periodRange = this.getCurrentDateRange();
-        } else {
+        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.loading = false;
+          });
       },
     },
   },
 
   methods: {
     formattedPeriod,
+    ...mapActions('okrs', ['setActiveObjective', 'addWorkbenchObjective']),
 
     getCurrentDateRange() {
       if (this.thisObjective.startDate && this.thisObjective.endDate) {
@@ -212,7 +221,7 @@ export default {
         const { name, description, weight, period } = this.thisObjective;
         const [start, end] = this.periodRange;
 
-        if (this.objective) {
+        if (this.thisObjective?.id) {
           const data = {
             name,
             description: description || '',
@@ -228,7 +237,8 @@ export default {
           } else {
             data.period = period;
           }
-          await Objective.update(this.objective.id, data);
+          await Objective.update(this.thisObjective.id, data);
+          this.$emit('update', this.thisObjective);
         } else {
           const { id } = await Objective.create({
             name,
@@ -239,6 +249,7 @@ export default {
             endDate: end,
           });
           this.thisObjective.id = id;
+          this.$emit('create', this.thisObjective);
         }
         this.$refs.drawer.next();
       } catch (error) {
@@ -251,10 +262,12 @@ export default {
     async archive() {
       this.loading = true;
       try {
-        await Objective.archive(this.objective.id);
+        await Objective.archive(this.thisObjective.id);
+        this.thisObjective.archived = true;
+        this.$emit('archive', this.thisObjective);
       } catch (error) {
         this.$toasted.error(
-          this.$t('toaster.error.archive', { document: this.objective.name })
+          this.$t('toaster.error.archive', { document: this.thisObjective.name })
         );
       }
       this.loading = false;
@@ -262,10 +275,12 @@ export default {
 
     async restore() {
       try {
-        await Objective.restore(this.objective.id);
+        await Objective.restore(this.thisObjective.id);
+        this.thisObjective.archived = false;
+        this.$emit('restore', this.thisObjective);
       } catch {
         this.$toasted.error(
-          this.$t('toaster.error.restore', { document: this.objective.id })
+          this.$t('toaster.error.restore', { document: this.thisObjective.id })
         );
       }
     },
diff --git a/src/components/panes/TimelinePane.vue b/src/components/panes/TimelinePane.vue
index 9808a3348..168c4027d 100644
--- a/src/components/panes/TimelinePane.vue
+++ b/src/components/panes/TimelinePane.vue
@@ -15,7 +15,7 @@
     </template>
 
     <gantt-chart
-      :objectives="objectivesWithKeyResults"
+      :objectives="objectivesWithID"
       :period="selectedPeriod"
       :loading="dataLoading"
     />
@@ -39,7 +39,7 @@ export default {
 
   computed: {
     ...mapState(['dataLoading', 'selectedPeriod']),
-    ...mapGetters(['objectivesWithKeyResults', 'hasEditRights']),
+    ...mapGetters(['objectivesWithID', 'hasEditRights']),
   },
 };
 </script>
diff --git a/src/router/index.js b/src/router/index.js
index 41675e126..2795616f6 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -81,6 +81,17 @@ const routes = [
         component: () => import('@/views/Item/ItemOKRs.vue'),
         beforeEnter: routerGuards.itemOKRs,
         beforeRouteUpdate: routerGuards.itemOKRs,
+        children: [
+          {
+            path: 'o/:objectiveId',
+            name: 'ObjectiveHome',
+          },
+          {
+            path: 'o/:objectiveId/k/:keyResultId',
+            name: 'KeyResultHome',
+            beforeEnter: routerGuards.keyResultHome,
+          },
+        ],
       },
       {
         path: 'measurements/:kpiId?',
@@ -99,17 +110,16 @@ const routes = [
         component: () => import('@/views/ItemAdmin/ItemAdminWrapper.vue'),
         beforeEnter: routerGuards.itemAdmin,
       },
+      /*
+       * Redirect old paths for objective and key result details.
+       */
       {
-        path: 'k/:keyResultId',
-        name: 'KeyResultHome',
-        component: () => import('@/views/KeyResultHome.vue'),
-        beforeEnter: routerGuards.keyResultHome,
+        path: 'o/:objectiveId',
+        redirect: (to) => ({ name: 'ObjectiveHome', params: to.params }),
       },
       {
-        path: 'o/:objectiveId',
-        name: 'ObjectiveHome',
-        component: () => import('@/views/ObjectiveHome.vue'),
-        beforeEnter: routerGuards.objectiveHome,
+        path: 'k/:keyResultId',
+        redirect: (to) => ({ name: 'KeyResultHome', params: to.params }),
       },
       /*
        * Aliases for `measurements` -- redirect from the old `dashboard` and
diff --git a/src/router/router-guards/index.js b/src/router/router-guards/index.js
index 895c9433d..e6fa9799d 100644
--- a/src/router/router-guards/index.js
+++ b/src/router/router-guards/index.js
@@ -6,5 +6,4 @@ export { default as itemMeasurements } from './itemMeasurements';
 export { default as itemOKRs } from './itemOKRs';
 export { default as keyResultHome } from './keyResultHome';
 export { default as login } from './login';
-export { default as objectiveHome } from './objectiveHome';
 export { default as requestAccess } from './requestAccess';
diff --git a/src/router/router-guards/keyResultHome.js b/src/router/router-guards/keyResultHome.js
index b6055e593..2463c18b8 100644
--- a/src/router/router-guards/keyResultHome.js
+++ b/src/router/router-guards/keyResultHome.js
@@ -1,13 +1,24 @@
-import store from '@/store';
+import { db } from '@/config/firebaseConfig';
 
 export default async function keyResultHome(to, from, next) {
-  const { keyResultId } = to.params;
+  const { objectiveId, keyResultId } = to.params;
 
-  try {
-    await store.dispatch('set_active_key_result', keyResultId);
+  if (!objectiveId) {
+    // Look up objective id from key result if redirected legacy
+    // key result paths.
+    try {
+      const keyRes = await db.collection('keyResults').doc(keyResultId).get();
+      next({
+        name: 'KeyResultHome',
+        params: {
+          ...to.params,
+          objectiveId: keyRes.data().objective.id,
+        },
+      });
+    } catch {
+      next({ name: 'ItemHome', params: to.params });
+    }
+  } else {
     next();
-  } catch (error) {
-    console.error(error);
-    next(false);
   }
 }
diff --git a/src/router/router-guards/objectiveHome.js b/src/router/router-guards/objectiveHome.js
deleted file mode 100644
index 6ba0d25a5..000000000
--- a/src/router/router-guards/objectiveHome.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import store from '@/store';
-
-export default async function objectiveHome(to, from, next) {
-  const { objectiveId } = to.params;
-
-  try {
-    const activeObjective = await store.dispatch('set_active_objective', objectiveId);
-    const { activeItem, activePeriod } = store.state;
-
-    if (!activePeriod || activePeriod.id !== activeObjective?.period?.id) {
-      await store.dispatch('set_active_period_and_data', {
-        periodId: activeObjective?.period?.id,
-        item: activeItem,
-      });
-    }
-    next();
-  } catch (error) {
-    console.error(error);
-    next(false);
-  }
-}
diff --git a/src/views/Item/ItemOKRs.vue b/src/views/Item/ItemOKRs.vue
index dc31d09e3..5b5790b15 100644
--- a/src/views/Item/ItemOKRs.vue
+++ b/src/views/Item/ItemOKRs.vue
@@ -1,110 +1,128 @@
 <template>
-  <page-layout
-    v-if="objectivesWithID.length || dataLoading"
-    breakpoint="full"
-    :sidebar-grid="false"
-    :sidebar-cols="5"
-  >
-    <template #default>
-      <div class="okrs-timeline">
-        <div class="okrs-timeline__header">
-          <h1 class="pkt-txt-24-medium">{{ $t('general.OKRsLong') }}</h1>
-
-          <div v-if="hasEditRights" data-mode="dark">
-            <pkt-button
-              v-tooltip="$t('btn.createObjective')"
-              :text="$t('btn.createObjective')"
-              skin="primary"
-              variant="icon-left"
-              icon-name="plus-sign"
-              @onClick="showObjectiveDrawer = true"
-            />
-          </div>
-        </div>
-
-        <div class="okrs-timeline__body">
-          <gantt-chart
-            v-if="dataLoading || objectivesWithID.length"
-            :objectives="objectivesWithID"
-            :period="selectedPeriod"
-            :loading="dataLoading"
-          />
-          <empty-state
-            v-else
-            :heading="$t('empty.noObjectivesInPeriod.heading')"
-            :body="$t('empty.noObjectivesInPeriod.body')"
-          />
-        </div>
-      </div>
+  <div class="okr-panes">
+    <pane-layout v-if="!notFoundState && (objectivesWithID.length || dataLoading)">
+      <!-- Timeline -->
+      <timeline-pane @add-objective="openObjectiveDrawer(false)" />
+
+      <!-- Workbench (objective list) -->
+      <workbench-pane v-if="workbenchObjectives.length" />
 
-      <objective-drawer
-        :visible="showObjectiveDrawer"
-        :newest-objective="newestObjective"
-        @close="showObjectiveDrawer = false"
+      <!-- Objective -->
+      <objective-pane
+        v-if="activeObjective"
+        @edit-objective="openObjectiveDrawer(true)"
+        @add-key-result="openKeyResultDrawer(false)"
       />
-    </template>
-
-    <template v-if="selectedObjectives?.length" #sidebar>
-      <objective-workbench />
-    </template>
-  </page-layout>
-
-  <empty-page
-    v-else
-    :heading="$t('empty.noObjectives.heading')"
-    :body="$t('empty.noObjectives.body')"
-  >
-    <div v-if="hasEditRights" data-mode="dark">
-      <pkt-button
-        :text="$t('btn.createObjective')"
-        skin="primary"
-        variant="icon-left"
-        icon-name="plus-sign"
-        @onClick="showObjectiveDrawer = true"
+
+      <!-- Key result -->
+      <key-result-pane
+        v-if="activeObjective && activeKeyResult"
+        @edit-key-result="openKeyResultDrawer(true)"
       />
-    </div>
+    </pane-layout>
+
+    <not-found-page
+      v-else-if="notFoundState"
+      :heading="
+        $t(`notFound.${!activeObjective ? 'objectiveHeading' : 'keyResultHeading'}`)
+      "
+      :body="$t(`notFound.${!activeObjective ? 'objectiveBody' : 'keyResultBody'}`)"
+      back-to="ItemHome"
+      :back-text="$t('btn.back')"
+    />
+
+    <empty-page
+      v-else
+      :heading="$t('empty.noObjectives.heading')"
+      :body="$t('empty.noObjectives.body')"
+    >
+      <div v-if="hasEditRights" data-mode="dark">
+        <pkt-button
+          :text="$t('btn.createObjective')"
+          skin="primary"
+          variant="icon-left"
+          icon-name="plus-sign"
+          @onClick="showObjectiveDrawer = true"
+        />
+      </div>
+    </empty-page>
 
     <objective-drawer
       :visible="showObjectiveDrawer"
-      @close="showObjectiveDrawer = false"
+      :objective="drawerEditMode ? activeObjective : null"
+      :newest-objective="newestObjective"
+      @create="objectiveCreated"
+      @archive="$router.replace({ name: 'ItemHome' })"
+      @restore="
+        $router.replace({
+          name: 'ObjectiveHome',
+          params: { objectiveId: $event.id },
+        })
+      "
+      @close="closeObjectiveDrawer"
+      @add-key-result="openKeyResultDrawer(false)"
+    />
+
+    <key-result-drawer
+      v-if="activeObjective"
+      :visible="showKeyResultDrawer"
+      :objective="activeObjective"
+      :key-result="drawerEditMode ? activeKeyResult : null"
+      @archive="
+        $router.replace({
+          name: 'ObjectiveHome',
+          params: { objectiveId: activeObjective.id },
+        })
+      "
+      @restore="
+        $router.replace({
+          name: 'KeyResultHome',
+          params: { objectiveId: activeObjective.id, keyResultId: $event.id },
+        })
+      "
+      @close="closeKeyResultDrawer"
     />
-  </empty-page>
+  </div>
 </template>
 
 <script>
 import { mapGetters, mapState, mapActions } from 'vuex';
-import routerGuard from '@/router/router-guards/itemOKRs';
 import { PktButton } from '@oslokommune/punkt-vue2';
+import routerGuard from '@/router/router-guards/itemOKRs';
+import PaneLayout from '@/components/layout/PaneLayout.vue';
+import TimelinePane from '@/components/panes/TimelinePane.vue';
 
 export default {
-  name: 'ItemHome',
+  name: 'ItemOKRs',
 
   components: {
-    GanttChart: () => import('@/components/GanttChart.vue'),
-    EmptyState: () => import('@/components/EmptyState.vue'),
+    WorkbenchPane: () => import('@/components/panes/WorkbenchPane.vue'),
+    KeyResultPane: () => import('@/components/panes/KeyResultPane.vue'),
+    ObjectivePane: () => import('@/components/panes/ObjectivePane.vue'),
     EmptyPage: () => import('@/components/pages/EmptyPage.vue'),
-    ObjectiveWorkbench: () => import('@/components/ObjectiveWorkbench.vue'),
+    NotFoundPage: () => import('@/components/pages/NotFoundPage.vue'),
     ObjectiveDrawer: () => import('@/components/drawers/EditObjective.vue'),
+    KeyResultDrawer: () => import('@/components/drawers/EditKeyResult.vue'),
+    PaneLayout,
+    TimelinePane,
     PktButton,
   },
 
   beforeRouteUpdate: routerGuard,
 
   data: () => ({
+    drawerEditMode: false,
     showObjectiveDrawer: false,
+    showKeyResultDrawer: false,
+    notFoundState: false,
   }),
 
   computed: {
-    ...mapState(['activeItem', 'dataLoading', 'selectedPeriod', 'user']),
-    ...mapGetters(['objectivesWithID', 'selectedObjectives', 'hasEditRights']),
-
-    view() {
-      return this.user.preferences.view;
-    },
+    ...mapState(['activeItem', 'dataLoading', 'selectedPeriod']),
+    ...mapState('okrs', ['activeObjective', 'activeKeyResult']),
+    ...mapGetters(['objectivesWithID', 'hasEditRights']),
+    ...mapGetters('okrs', ['workbenchObjectives']),
 
-    /**
-     * Return the most recently created objective for the current item.
-     */
     newestObjective() {
       if (!this.objectivesWithID.length) {
         return null;
@@ -119,73 +137,153 @@ export default {
     },
   },
 
+  watch: {
+    $route: {
+      immediate: false,
+      handler: 'updateActive',
+    },
+  },
+
   async created() {
-    try {
-      await this.setDataLoading(true);
-      await this.set_active_period_and_data({
-        item: this.activeItem,
-      });
-    } catch (e) {
-      console.log(e);
-    } finally {
-      await this.setDataLoading(false);
-    }
+    await this.setData();
+  },
+
+  async beforeDestroy() {
+    await this.setActiveObjective(null);
+    await this.setActiveKeyResult(null);
   },
 
   methods: {
     ...mapActions(['set_active_period_and_data', 'setDataLoading']),
+    ...mapActions('okrs', [
+      'setActiveObjective',
+      'setActiveKeyResult',
+      'clearWorkbenchObjectives',
+    ]),
+
+    async setData() {
+      try {
+        await this.setDataLoading(true);
+        await this.set_active_period_and_data({
+          item: this.activeItem,
+        });
+        await this.updateActive();
+      } catch (e) {
+        console.log(e);
+      } finally {
+        await this.setDataLoading(false);
+      }
+    },
+
+    async updateActive() {
+      this.notFoundState = false;
+      const { objectiveId, keyResultId } = this.$route.params;
+
+      if (!objectiveId && (this.activeObjective || this.activeKeyResult)) {
+        await this.setActiveObjective(null);
+        await this.setActiveKeyResult(null);
+        return;
+      }
+      if (!keyResultId && this.activeKeyResult) {
+        await this.setActiveKeyResult(null);
+      }
+
+      if (objectiveId) {
+        if (objectiveId !== this.activeObjective?.id) {
+          await this.setActiveObjective(objectiveId);
+        }
+        if (!this.activeObjective) {
+          this.notFoundState = true;
+        }
+      }
+
+      if (this.activeObjective && keyResultId) {
+        if (keyResultId !== this.activeKeyResult?.id) {
+          await this.setActiveKeyResult(keyResultId);
+        }
+        if (!this.activeKeyResult) {
+          this.notFoundState = true;
+        }
+      }
+    },
+
+    openObjectiveDrawer(edit) {
+      this.drawerEditMode = edit;
+      this.showObjectiveDrawer = true;
+    },
+
+    closeObjectiveDrawer() {
+      this.showObjectiveDrawer = false;
+      this.drawerEditMode = false;
+    },
+
+    openKeyResultDrawer(edit) {
+      this.drawerEditMode = edit;
+      this.showObjectiveDrawer = false;
+      this.showKeyResultDrawer = true;
+    },
+
+    closeKeyResultDrawer() {
+      this.showKeyResultDrawer = false;
+      this.drawerEditMode = false;
+    },
+
+    async objectiveCreated(objective) {
+      if (!this.objectivesWithID.length) {
+        // `state.objectives` does not seems to be reactive until the first
+        // objective is added. This fixes bug where empty state is still
+        // shown when adding the first objective.
+        await this.setData();
+      }
+
+      this.$router.push({ name: 'ObjectiveHome', params: { objectiveId: objective.id } });
+
+      if (this.workbenchObjectives.length) {
+        await this.addWorkbenchObjective(objective);
+      }
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/breakpoints' as *;
-
-.page {
-  ::v-deep .page__container,
-  ::v-deep .page__main,
-  ::v-deep .page__sidebar {
-    gap: 0;
-    height: 100%;
-    padding: 0;
-  }
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
 
-  ::v-deep .page__sidebar {
-    display: flex;
-    flex-direction: column;
-    border-top: 1px solid var(--color-grayscale-10);
+.okr-panes {
+  display: flex;
+  flex: 1 0 auto;
+  flex-direction: column;
+}
+
+.pane {
+  @include bp('laptop-up') {
+    &.workbench-pane,
+    &.objective-pane:not(:last-child) {
+      min-width: 36rem;
 
-    @include bp('tablet-big-up') {
-      border-top: unset;
-      border-left: 1px solid var(--color-grayscale-10);
+      max-width: 48rem;
     }
   }
-}
 
-.okrs-timeline {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-
-  &__header {
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-    justify-content: space-between;
-    padding: 1.5rem;
+  @media screen and (min-width: 135rem) {
+    &.workbench-pane,
+    &.objective-pane {
+      max-width: 48rem;
+    }
+    &.key-result-pane {
+      min-width: 64rem;
+    }
   }
 
-  &__body {
-    flex: 1 0 auto;
-    height: 0;
+  @media screen and (min-width: 180rem) {
+    &.workbench-pane,
+    &.objective-pane {
+      max-width: 48rem;
+    }
+    &.key-result-pane {
+      min-width: 64rem;
+      max-width: 80rem;
+    }
   }
 }
-
-.objective-workbench {
-  display: flex;
-  flex: 1 0 auto;
-  flex-direction: column;
-  height: 0;
-  overflow: auto;
-}
 </style>

From 68efa0bedca78d372e3d59a52e306fe9888bab06 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Thu, 24 Aug 2023 14:54:58 +0200
Subject: [PATCH 005/102] Add detail widgets to objective and key result panes

---
 src/components/panes/KeyResultPane.vue        | 26 +++++++++++++++----
 src/components/panes/ObjectivePane.vue        | 23 +++++++++++++++-
 .../widgets/WidgetKeyResultDetails.vue        |  4 +--
 .../widgets/WidgetKeyResultNotes.vue          |  4 +--
 .../widgets/WidgetObjectiveDetails.vue        |  4 +--
 src/components/widgets/WidgetWeights.vue      |  2 +-
 src/components/widgets/WidgetWrapper.vue      | 13 ++++++++--
 7 files changed, 61 insertions(+), 15 deletions(-)

diff --git a/src/components/panes/KeyResultPane.vue b/src/components/panes/KeyResultPane.vue
index 7b5612a6e..f0ea6c465 100644
--- a/src/components/panes/KeyResultPane.vue
+++ b/src/components/panes/KeyResultPane.vue
@@ -72,6 +72,16 @@
       {{ $t('keyResult.autoError') }} {{ activeKeyResult.error }}
     </pkt-alert>
 
+    <div class="key-result-pane__widgets">
+      <!--
+        Hide notes widget for now. This one needs work separately. We give the
+        impression that these notes are secret to the team, which is really not
+        the case currently.
+      -->
+      <!-- <widget-key-result-notes /> -->
+      <widget-key-result-details />
+    </div>
+
     <progress-modal
       v-if="showValueModal"
       @create-record="createHistoryRecord"
@@ -93,6 +103,8 @@ import { getKeyResultProgressDetails } from '@/util/keyResultProgress';
 import { PktButton } from '@oslokommune/punkt-vue2';
 import WidgetWrapper from '@/components/widgets/WidgetWrapper.vue';
 import WidgetProgressHistory from '@/components/widgets/WidgetProgressHistory/WidgetProgressHistory.vue';
+// import WidgetKeyResultNotes from '@/components/widgets/WidgetKeyResultNotes.vue';
+import WidgetKeyResultDetails from '@/components/widgets/WidgetKeyResultDetails.vue';
 import PaneWrapper from '@/components/panes/PaneWrapper.vue';
 import ProgressBar from '@/components/ProgressBar.vue';
 
@@ -105,6 +117,8 @@ export default {
     ProgressModal: () => import('@/components/modals/ProgressModal.vue'),
     Widget: WidgetWrapper,
     WidgetProgressHistory,
+    WidgetKeyResultDetails,
+    // WidgetKeyResultNotes,
     PaneWrapper,
     PktButton,
     ProgressBar,
@@ -275,14 +289,16 @@ export default {
   &__values,
   &__graph {
     margin-top: 3rem;
-  }
-
-  ::v-deep .widget {
     padding: 0;
     border: 0;
+  }
+
+  &__widgets {
+    margin-top: 2rem;
 
-    h3 {
-      @include get-text('pkt-txt-18-medium');
+    ::v-deep .widget {
+      border: 0;
+      padding: 0;
     }
   }
 }
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index 0340f0955..c58fa4a47 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -7,6 +7,7 @@
   >
     <template #actions>
       <pkt-button
+        v-if="hasEditRights"
         v-tooltip="$t('btn.updateObjective')"
         skin="tertiary"
         variant="icon-only"
@@ -34,6 +35,7 @@
     <div class="objective-pane__key-results-header" data-mode="dark">
       <h3>{{ $t('general.keyResults') }}</h3>
       <pkt-button
+        v-if="hasEditRights"
         v-tooltip="$t('btn.createKeyResult')"
         :text="$t('btn.createKeyResult')"
         skin="primary"
@@ -70,18 +72,25 @@
         :body="$t('empty.noKeyResults.body')"
       />
     </div>
+
+    <div class="objective-pane__widgets">
+      <widget-weights v-if="keyResults.length" :objective="activeObjective" />
+      <widget-objective-details />
+    </div>
   </pane-wrapper>
 </template>
 
 <script>
 import { format } from 'd3-format';
-import { mapState } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 import { dateLong, periodDates } from '@/util';
 import { db } from '@/config/firebaseConfig';
 import { PktButton } from '@oslokommune/punkt-vue2';
 import ProgressBar from '@/components/ProgressBar.vue';
 import PaneWrapper from '@/components/panes/PaneWrapper.vue';
 import LoadingSmall from '@/components/LoadingSmall.vue';
+import WidgetObjectiveDetails from '@/components/widgets/WidgetObjectiveDetails.vue';
+import WidgetWeights from '@/components/widgets/WidgetWeights.vue';
 
 export default {
   name: 'ObjectivePane',
@@ -93,6 +102,8 @@ export default {
     LoadingSmall,
     PktButton,
     ProgressBar,
+    WidgetWeights,
+    WidgetObjectiveDetails,
   },
 
   data: () => ({
@@ -102,6 +113,7 @@ export default {
 
   computed: {
     ...mapState('okrs', ['activeObjective', 'activeKeyResult']),
+    ...mapGetters(['hasEditRights']),
 
     period() {
       if (this.activeObjective.startDate && this.activeObjective.endDate) {
@@ -184,5 +196,14 @@ export default {
   &__key-results > .okr-link-card {
     margin-bottom: 1rem;
   }
+
+  &__widgets {
+    margin-top: 2rem;
+
+    ::v-deep .widget {
+      border: 0;
+      padding: 0;
+    }
+  }
 }
 </style>
diff --git a/src/components/widgets/WidgetKeyResultDetails.vue b/src/components/widgets/WidgetKeyResultDetails.vue
index 31bf42c3b..2c30ca889 100644
--- a/src/components/widgets/WidgetKeyResultDetails.vue
+++ b/src/components/widgets/WidgetKeyResultDetails.vue
@@ -1,5 +1,5 @@
 <template>
-  <widget v-if="activeKeyResult" :title="$t('general.details')" size="small">
+  <widget v-if="activeKeyResult" :title="$t('general.details')" size="small" collapsable>
     <div class="details">
       <div v-if="activeKeyResult.objective" class="details__item">
         <h3 class="title-3 details__item-heading">{{ $t('keyResult.belongsTo') }}</h3>
@@ -127,7 +127,7 @@ export default {
   }),
 
   computed: {
-    ...mapState(['activeKeyResult']),
+    ...mapState('okrs', ['activeKeyResult']),
     createdBy() {
       return (
         this.activeKeyResult.createdBy.displayName || this.activeKeyResult.createdBy.id
diff --git a/src/components/widgets/WidgetKeyResultNotes.vue b/src/components/widgets/WidgetKeyResultNotes.vue
index dfbaec4df..a8f0c08db 100644
--- a/src/components/widgets/WidgetKeyResultNotes.vue
+++ b/src/components/widgets/WidgetKeyResultNotes.vue
@@ -1,5 +1,5 @@
 <template>
-  <widget :title="$t('keyResultsPage.notes.heading')" size="small">
+  <widget :title="$t('keyResultsPage.notes.heading')" size="small" collapsable>
     <div class="notes">
       <div v-if="editNotes" class="notes--margin-bottom">
         <label>
@@ -62,7 +62,7 @@ export default {
   }),
 
   computed: {
-    ...mapState(['activeKeyResult']),
+    ...mapState('okrs', ['activeKeyResult']),
   },
 
   watch: {
diff --git a/src/components/widgets/WidgetObjectiveDetails.vue b/src/components/widgets/WidgetObjectiveDetails.vue
index dafa80599..f1c735b2e 100644
--- a/src/components/widgets/WidgetObjectiveDetails.vue
+++ b/src/components/widgets/WidgetObjectiveDetails.vue
@@ -1,5 +1,5 @@
 <template>
-  <widget v-if="activeObjective" :title="$t('general.details')" size="small">
+  <widget v-if="activeObjective" :title="$t('general.details')" size="small" collapsable>
     <div class="details">
       <div v-if="formattedPeriod(activeObjective)" class="details__item">
         <h3 class="title-3 details__item-heading">{{ $t('objective.period') }}</h3>
@@ -86,7 +86,7 @@ export default {
   }),
 
   computed: {
-    ...mapState(['activeObjective']),
+    ...mapState('okrs', ['activeObjective']),
     createdBy() {
       return (
         this.activeObjective.createdBy.displayName || this.activeObjective.createdBy.id
diff --git a/src/components/widgets/WidgetWeights.vue b/src/components/widgets/WidgetWeights.vue
index 06f241d13..460d5aa8b 100644
--- a/src/components/widgets/WidgetWeights.vue
+++ b/src/components/widgets/WidgetWeights.vue
@@ -1,5 +1,5 @@
 <template>
-  <widget :title="$t('weight.heading')" size="small">
+  <widget :title="$t('weight.heading')" size="small" collapsable>
     <div class="scales">
       <router-link
         v-for="{ id, weight, name } in keyResults"
diff --git a/src/components/widgets/WidgetWrapper.vue b/src/components/widgets/WidgetWrapper.vue
index ef6250f41..3b7e42ad8 100644
--- a/src/components/widgets/WidgetWrapper.vue
+++ b/src/components/widgets/WidgetWrapper.vue
@@ -73,12 +73,21 @@ export default {
   },
 
   data: () => ({
-    show: true,
+    isCollapsed: false,
   }),
 
+  computed: {
+    show() {
+      if (!this.collapsable) {
+        return true;
+      }
+      return this.isCollapsed;
+    },
+  },
+
   methods: {
     toggle() {
-      this.show = !this.show;
+      this.isCollapsed = !this.isCollapsed;
     },
   },
 };

From cea6afbff14c81af87868f2feab0594863527fe9 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Thu, 24 Aug 2023 15:00:10 +0200
Subject: [PATCH 006/102] Remove old OKR detail views and components

---
 src/components/KeyResultProgressDetails.vue |  54 ---
 src/components/KeyResultRow.vue             | 115 ------
 src/components/KeyResultsList.vue           |  72 ----
 src/components/ObjectiveRow.vue             | 101 -----
 src/components/ObjectiveWorkbench.vue       | 148 --------
 src/components/panes/KeyResultPane.vue      |   9 +-
 src/components/panes/ObjectivePane.vue      |   9 +-
 src/views/KeyResultHome.vue                 | 395 --------------------
 src/views/ObjectiveHome.vue                 | 216 -----------
 9 files changed, 12 insertions(+), 1107 deletions(-)
 delete mode 100644 src/components/KeyResultProgressDetails.vue
 delete mode 100644 src/components/KeyResultRow.vue
 delete mode 100644 src/components/KeyResultsList.vue
 delete mode 100644 src/components/ObjectiveRow.vue
 delete mode 100644 src/components/ObjectiveWorkbench.vue
 delete mode 100644 src/views/KeyResultHome.vue
 delete mode 100644 src/views/ObjectiveHome.vue

diff --git a/src/components/KeyResultProgressDetails.vue b/src/components/KeyResultProgressDetails.vue
deleted file mode 100644
index 64711e575..000000000
--- a/src/components/KeyResultProgressDetails.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-  <div class="keyResultProgressDetails">
-    <div class="keyResultProgressDetails__infoMessage">
-      <strong>{{ progressDetails.percentageCompleted }}%</strong>
-      {{ $t('progress.done') }}
-    </div>
-    <div>
-      <div v-if="progressDetails.isCompleted">
-        {{ randomCompletedMessage() }}
-      </div>
-      <div v-else class="keyResultProgressDetails__infoMessage">
-        <strong>
-          {{ progressDetails.formattedTotalRemainingTasks }}
-        </strong>
-        {{ $t('progress.remaining', { unit }) }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { format } from 'd3-format';
-import vueI18n from '@/locale/i18n';
-import { getRandomInt } from '@/util';
-
-export default {
-  name: 'KeyResultProgressDetails',
-  props: {
-    progressDetails: {
-      type: Object,
-      required: true,
-    },
-    unit: {
-      type: String,
-      required: true,
-    },
-  },
-  methods: {
-    format,
-    randomCompletedMessage() {
-      const messages = Object.values(vueI18n.t('progress.completedMessages'));
-      const randomIndex = getRandomInt(messages.length);
-
-      return messages[randomIndex];
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.keyResultProgressDetails__infoMessage:not(:last-child) {
-  margin-bottom: 0.25rem;
-}
-</style>
diff --git a/src/components/KeyResultRow.vue b/src/components/KeyResultRow.vue
deleted file mode 100644
index 9c9307d00..000000000
--- a/src/components/KeyResultRow.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<template>
-  <div class="key-result-row" :class="{ compact }">
-    <router-link
-      :to="{ name: 'KeyResultHome', params: { keyResultId: keyResult.id } }"
-      class="key-result-row__link"
-    >
-      <div class="key-result-row__info">
-        <h4 class="pkt-txt-16">{{ keyResult.name }}</h4>
-        <p v-if="keyResult.description" class="pkt-txt-14-light">
-          {{ keyResult.description }}
-        </p>
-      </div>
-
-      <div class="key-result-row__progress">
-        <progress-bar :progression="progressPercentage" />
-        <span class="pkt-txt-16">{{ progressPercentage }}%</span>
-      </div>
-    </router-link>
-  </div>
-</template>
-
-<script>
-import { format } from 'd3-format';
-import { numberLocale } from '@/util';
-
-export default {
-  name: 'KeyResultRow',
-
-  components: {
-    ProgressBar: () => import('@/components/ProgressBar.vue'),
-  },
-
-  props: {
-    keyResult: {
-      type: Object,
-      required: true,
-    },
-    compact: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-
-  computed: {
-    progressPercentage() {
-      return Math.round(this.keyResult.progression * 100);
-    },
-  },
-
-  methods: {
-    format,
-
-    formatLargeNumber(value) {
-      return numberLocale.format(',')(value);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/breakpoints' as *;
-
-.key-result-row {
-  &__link {
-    display: flex;
-    flex-direction: column;
-    padding: 1.5rem;
-    color: var(--color-text);
-    text-decoration: none;
-    background-color: var(--color-gray-light);
-
-    &:hover {
-      color: var(--color-white);
-      background-color: var(--color-hover);
-    }
-
-    @include bp('tablet-up') {
-      flex-direction: row;
-    }
-  }
-
-  &__info {
-    display: flex;
-    flex: 0 0 70%;
-    flex-direction: column;
-    gap: 0.5rem;
-    padding-right: 1rem;
-  }
-
-  &__progress {
-    display: flex;
-    flex: 0 0 30%;
-    gap: 1rem;
-    align-items: center;
-
-    .progress {
-      flex: 0 1 80%;
-    }
-
-    span {
-      flex: 1 0 auto;
-      text-align: right;
-    }
-  }
-
-  &.compact .key-result-row__progress .progress {
-    flex-basis: 80%;
-
-    @include bp('tablet-up') {
-      flex-basis: 70%;
-    }
-  }
-}
-</style>
diff --git a/src/components/KeyResultsList.vue b/src/components/KeyResultsList.vue
deleted file mode 100644
index 8bbd31097..000000000
--- a/src/components/KeyResultsList.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-  <ul v-if="keyResults.length" class="key-results-list">
-    <li v-for="keyResult in keyResults" :key="keyResult.id" class="key-results-list__row">
-      <key-result-row :key-result="keyResult" :compact="compact" />
-    </li>
-  </ul>
-  <empty-state
-    v-else-if="showEmptyState && !loading"
-    :heading="$t('empty.noKeyResults.heading')"
-    :body="$t('empty.noKeyResults.body')"
-  />
-</template>
-
-<script>
-import { db } from '@/config/firebaseConfig';
-
-export default {
-  name: 'KeyResultsList',
-
-  components: {
-    EmptyState: () => import('@/components/EmptyState.vue'),
-    KeyResultRow: () => import('@/components/KeyResultRow.vue'),
-  },
-
-  props: {
-    objective: {
-      type: Object,
-      required: true,
-    },
-    compact: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    showEmptyState: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-  },
-
-  data: () => ({
-    loading: true,
-    keyResults: [],
-  }),
-
-  async created() {
-    const objectiveRef = await db.doc(`objectives/${this.objective.id}`);
-    const keyResults = await db
-      .collection('keyResults')
-      .where('archived', '==', false)
-      .where('objective', '==', objectiveRef)
-      .orderBy('name');
-
-    await this.$bind('keyResults', keyResults);
-
-    this.loading = false;
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.key-results-list {
-  &__row {
-    margin-top: 0.25rem;
-
-    &:first-child {
-      margin-top: 0;
-    }
-  }
-}
-</style>
diff --git a/src/components/ObjectiveRow.vue b/src/components/ObjectiveRow.vue
deleted file mode 100644
index 91196e53d..000000000
--- a/src/components/ObjectiveRow.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<template>
-  <component
-    :is="isLink ? 'router-link' : 'div'"
-    :to="isLink ? { name: 'ObjectiveHome', params: { objectiveId: objective.id } } : null"
-    :class="['objective', { 'objective--compact': compact }]"
-    @click="isLink ? () => {} : $emit('click', $event)"
-  >
-    <h3 class="objective__title pkt-txt-18-medium mb-size-8">
-      {{ objective.name }}
-      <pkt-icon v-if="isLink" class="pkt-link__icon" name="chevron-right" />
-    </h3>
-
-    <p v-if="!compact && objective.description" class="mb-size-8">
-      {{ objective.description }}
-    </p>
-
-    <div class="objective__progress">
-      <progress-bar :progression="objective.progression * 100" />
-      {{ percent(objective.progression) }}
-    </div>
-  </component>
-</template>
-
-<script>
-import { mapState } from 'vuex';
-import { format } from 'd3-format';
-
-export default {
-  name: 'ObjectiveRow',
-
-  components: {
-    ProgressBar: () => import('@/components/ProgressBar.vue'),
-  },
-
-  props: {
-    objective: {
-      type: Object,
-      required: true,
-    },
-    compact: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isLink: {
-      type: Boolean,
-      default: true,
-    },
-  },
-
-  computed: {
-    ...mapState(['user']),
-  },
-
-  methods: {
-    percent(value) {
-      return format('.0%')(value);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.objective {
-  display: block;
-  padding: 1.5rem 1.5rem 1.25rem 1.5rem;
-  color: var(--color-text);
-  text-decoration: none;
-  cursor: pointer;
-
-  &--compact {
-    &,
-    & > * {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-  }
-
-  &:hover {
-    color: var(--color-hover);
-  }
-
-  &__title {
-    display: flex;
-    gap: 0.25rem;
-    align-items: center;
-  }
-
-  &__progress {
-    display: flex;
-    gap: 0.75rem;
-    align-items: center;
-    font-weight: 500;
-
-    .progress {
-      flex: 1 1 auto;
-    }
-  }
-}
-</style>
diff --git a/src/components/ObjectiveWorkbench.vue b/src/components/ObjectiveWorkbench.vue
deleted file mode 100644
index 721050e61..000000000
--- a/src/components/ObjectiveWorkbench.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<template>
-  <div class="objective-workbench">
-    <header class="objective-workbench__header">
-      <h1 class="pkt-txt-22-medium">
-        <template v-if="selectedObjectives.length > 1">
-          {{ $t('general.selectedObjectives') }} ({{ selectedObjectives.length }})
-        </template>
-        <router-link
-          v-else
-          :to="{
-            name: 'ObjectiveHome',
-            params: { objectiveId: selectedObjectives[0].id },
-          }"
-          class="pkt-link mb-size-16"
-        >
-          {{ selectedObjectives[0].name }}
-          <pkt-icon class="pkt-link__icon" name="chevron-right" />
-        </router-link>
-      </h1>
-
-      <pkt-button
-        v-tooltip="$t('btn.close')"
-        size="small"
-        variant="icon-only"
-        icon-name="close"
-        skin="tertiary"
-        @onClick="setSelectedObjective(null)"
-      />
-    </header>
-
-    <div
-      :class="singular ? 'objective-workbench__objective' : 'objective-workbench__list'"
-    >
-      <p v-if="singular && selectedObjectives[0].description" class="mb-size-16">
-        {{ selectedObjectives[0].description }}
-      </p>
-
-      <div
-        v-for="objective in selectedObjectives"
-        :key="objective.id"
-        :class="{
-          'objective-workbench__list-item': !singular,
-        }"
-      >
-        <div
-          v-if="singular"
-          class="objective-workbench__objective-progression mb-size-16"
-        >
-          <progress-bar :is-compact="false" :progression="objective.progression * 100" />
-          <span class="pkt-txt-20-medium">
-            {{ percent(objective.progression) }}
-          </span>
-        </div>
-        <objective-row v-else :objective="objective" />
-
-        <key-results-list :objective="objective" :show-empty-state="singular" />
-
-        <pkt-button
-          v-if="!singular"
-          v-tooltip.bottom="$t('btn.remove')"
-          class="objective-workbench__remove-button"
-          size="small"
-          variant="icon-only"
-          icon-name="minus-circle"
-          skin="tertiary"
-          @onClick="setSelectedObjective(objective)"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { format } from 'd3-format';
-import { mapActions, mapGetters } from 'vuex';
-import { PktButton } from '@oslokommune/punkt-vue2';
-
-export default {
-  name: 'ObjectiveWorkbench',
-
-  components: {
-    KeyResultsList: () => import('@/components/KeyResultsList.vue'),
-    ObjectiveRow: () => import('@/components/ObjectiveRow.vue'),
-    ProgressBar: () => import('@/components/ProgressBar.vue'),
-    PktButton,
-  },
-
-  computed: {
-    ...mapGetters(['selectedObjectives']),
-
-    singular() {
-      return this.selectedObjectives.length === 1;
-    },
-  },
-
-  methods: {
-    ...mapActions(['setSelectedObjective']),
-
-    percent(value) {
-      return format('.0%')(value);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.objective-workbench {
-  padding: 1.5rem;
-
-  &__header {
-    display: flex;
-    gap: 1.5rem;
-    align-items: center;
-    justify-content: space-between;
-
-    .pkt-link {
-      text-decoration: none;
-    }
-  }
-
-  &__list-item {
-    position: relative;
-    margin-top: 1.5rem;
-    border: 2px solid var(--color-border);
-  }
-
-  &__remove-button {
-    position: absolute;
-    top: -1rem;
-    right: -1rem;
-    height: 2rem;
-    padding: 0 0.25rem;
-    color: var(--color-grayscale-40);
-    background-color: var(--color-white);
-    border-radius: 50%;
-  }
-
-  &__objective-progression {
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-
-    .progress {
-      flex: 1;
-    }
-  }
-}
-</style>
diff --git a/src/components/panes/KeyResultPane.vue b/src/components/panes/KeyResultPane.vue
index f0ea6c465..1410f2f35 100644
--- a/src/components/panes/KeyResultPane.vue
+++ b/src/components/panes/KeyResultPane.vue
@@ -26,9 +26,11 @@
       :object-type="$t('archived.keyResult')"
     />
 
-    <p v-if="activeKeyResult.description" class="key-result-pane__description">
-      {{ activeKeyResult.description }}
-    </p>
+    <HTML-output
+      v-if="activeKeyResult.description"
+      class="key-result-pane__description"
+      :html="activeKeyResult.description"
+    />
 
     <progress-bar
       class="key-result-pane__progression"
@@ -115,6 +117,7 @@ export default {
     PktAlert: () => import('@oslokommune/punkt-vue2').then(({ PktAlert }) => PktAlert),
     ArchivedRestore: () => import('@/components/ArchivedRestore.vue'),
     ProgressModal: () => import('@/components/modals/ProgressModal.vue'),
+    HTMLOutput: () => import('@/components/HTMLOutput.vue'),
     Widget: WidgetWrapper,
     WidgetProgressHistory,
     WidgetKeyResultDetails,
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index c58fa4a47..60ed8d333 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -22,9 +22,11 @@
       {{ periodDates(period) }}
     </span>
 
-    <p v-if="activeObjective.description" class="objective-pane__description">
-      {{ activeObjective.description }}
-    </p>
+    <HTML-output
+      v-if="activeObjective.description"
+      class="objective-pane__description"
+      :html="activeObjective.description"
+    />
 
     <progress-bar
       class="objective-pane__progression"
@@ -99,6 +101,7 @@ export default {
     PaneWrapper,
     EmptyState: () => import('@/components/EmptyState.vue'),
     OkrLinkCard: () => import('@/components/OkrLinkCard.vue'),
+    HTMLOutput: () => import('@/components/HTMLOutput.vue'),
     LoadingSmall,
     PktButton,
     ProgressBar,
diff --git a/src/views/KeyResultHome.vue b/src/views/KeyResultHome.vue
deleted file mode 100644
index 7c7c1a77e..000000000
--- a/src/views/KeyResultHome.vue
+++ /dev/null
@@ -1,395 +0,0 @@
-<template>
-  <page-layout v-if="activeKeyResult">
-    <template #default>
-      <header>
-        <span class="title-label pkt-txt-16-light">{{ $t('general.keyResult') }}</span>
-        <div class="keyResult__heading">
-          <h2 class="title-1">{{ activeKeyResult.name }}</h2>
-          <div class="keyResult__edit">
-            <pkt-button
-              v-tooltip="$t('admin.keyResult.change')"
-              icon-name="edit"
-              :text="$t('admin.keyResult.change')"
-              :variant="'icon-only'"
-              skin="tertiary"
-              @onClick="showKeyResultDrawer = true"
-            />
-          </div>
-        </div>
-        <HTML-output
-          v-if="activeKeyResult.description"
-          :html="activeKeyResult.description"
-        />
-      </header>
-
-      <archived-restore
-        v-if="activeKeyResult.archived"
-        class="mt-size-16"
-        :restore="restore"
-        object-type="keyResult"
-      />
-
-      <div class="key-result-summary widgets">
-        <widget
-          class="key-result-summary__progress"
-          :title="`${$t('keyResult.registerProgression.value')} (${
-            activeKeyResult.unit
-          })`"
-        >
-          <div class="key-result-summary__progress-inner">
-            <div class="key-result-progression">
-              <span class="key-result-progression__current pkt-txt-24-bold">
-                {{ progressDetails.formattedTotalCompletedTasks }}
-              </span>
-              <span class="key-result-progression__target pkt-txt-12-light">
-                {{
-                  $t('progress.remainingOf', {
-                    progress: progressDetails.formattedTotalNumberOfTasks,
-                  })
-                }}
-              </span>
-            </div>
-
-            <div class="key-result-progress-bar">
-              <key-result-progress-details
-                :progress-details="progressDetails"
-                :unit="activeKeyResult.unit"
-              />
-              <progress-bar :progression="progressDetails.percentageCompleted" />
-            </div>
-          </div>
-        </widget>
-
-        <widget v-if="hasEditRights" class="key-result-summary__value">
-          <key-result-value-form
-            :key-result="activeKeyResult"
-            :loading="isSaving"
-            :comment-rows="2"
-            @save="saveProgress"
-          />
-        </widget>
-      </div>
-
-      <widget class="key-result-graph" :title="$t('objective.progression')">
-        <svg ref="graph" class="graph"></svg>
-      </widget>
-
-      <pkt-alert v-if="activeKeyResult.auto" skin="info">
-        {{ $t('keyResult.autoHelpText') }}
-      </pkt-alert>
-
-      <pkt-alert v-if="activeKeyResult.auto && activeKeyResult.error" skin="error">
-        {{ $t('keyResult.autoError') }} {{ activeKeyResult.error }}
-      </pkt-alert>
-
-      <widget-progress-history
-        :progress="progress"
-        :is-loading="isLoading"
-        @update-record="updateHistoryRecord"
-        @delete-record="deleteHistoryRecord"
-      />
-
-      <key-result-drawer
-        :visible="showKeyResultDrawer"
-        :objective="activeObjective"
-        :key-result="activeKeyResult"
-        @close="showKeyResultDrawer = false"
-      />
-    </template>
-
-    <template #sidebar>
-      <widget-key-result-notes />
-      <widget-key-result-details />
-    </template>
-  </page-layout>
-  <not-found-page
-    v-else
-    :heading="$t('notFound.keyResultHeading')"
-    :body="$t('notFound.keyResultBody')"
-    back-to="ItemHome"
-    :back-text="$t('notFound.linkTextAlt', { page: activeItem.name })"
-  />
-</template>
-
-<script>
-import { mapGetters, mapState } from 'vuex';
-import { format } from 'd3-format';
-import { max, min } from 'd3-array';
-import { db } from '@/config/firebaseConfig';
-import KeyResult from '@/db/KeyResult';
-import Progress from '@/db/Progress';
-import LineChart from '@/util/LineChart';
-import { getKeyResultProgressDetails } from '@/util/keyResultProgress';
-import routerGuard from '@/router/router-guards/keyResultHome';
-import WidgetWrapper from '@/components/widgets/WidgetWrapper.vue';
-import WidgetKeyResultNotes from '@/components/widgets/WidgetKeyResultNotes.vue';
-import WidgetKeyResultDetails from '@/components/widgets/WidgetKeyResultDetails.vue';
-import KeyResultProgressDetails from '@/components/KeyResultProgressDetails.vue';
-import WidgetProgressHistory from '@/components/widgets/WidgetProgressHistory/WidgetProgressHistory.vue';
-import KeyResultValueForm from '@/components/forms/KeyResultValueForm.vue';
-import { PktButton } from '@oslokommune/punkt-vue2';
-
-export default {
-  name: 'KeyResultHome',
-
-  components: {
-    NotFoundPage: () => import('@/components/pages/NotFoundPage.vue'),
-    ProgressBar: () => import('@/components/ProgressBar.vue'),
-    PktAlert: () => import('@oslokommune/punkt-vue2').then(({ PktAlert }) => PktAlert),
-    KeyResultProgressDetails,
-    KeyResultValueForm,
-    Widget: WidgetWrapper,
-    WidgetKeyResultDetails,
-    WidgetKeyResultNotes,
-    WidgetProgressHistory,
-    PktButton,
-    KeyResultDrawer: () => import('@/components/drawers/EditKeyResult.vue'),
-    ArchivedRestore: () => import('@/components/ArchivedRestore.vue'),
-    HTMLOutput: () => import('@/components/HTMLOutput.vue'),
-  },
-
-  beforeRouteUpdate: routerGuard,
-
-  async beforeRouteLeave(to, from, next) {
-    try {
-      await this.$store.dispatch('set_active_key_result', null);
-      next();
-    } catch (error) {
-      console.error(error);
-      next(false);
-    }
-  },
-
-  data: () => ({
-    progress: [],
-    graph: null,
-    isLoading: false,
-    isSaving: false,
-    progressDetails: {},
-    showKeyResultDrawer: false,
-  }),
-
-  computed: {
-    ...mapState([
-      'activeKeyResult',
-      'activeObjective',
-      'activePeriod',
-      'user',
-      'activeItem',
-    ]),
-    ...mapGetters(['hasEditRights']),
-
-    startDate() {
-      return this.activeKeyResult.objective.startDate || this.activePeriod.startDate;
-    },
-
-    endDate() {
-      return this.activeKeyResult.objective.endDate || this.activePeriod.endDate;
-    },
-  },
-
-  watch: {
-    activeKeyResult: {
-      immediate: true,
-      async handler(keyResult) {
-        if (!keyResult) {
-          return;
-        }
-        this.progressDetails = getKeyResultProgressDetails(keyResult);
-        this.isLoading = true;
-        await this.$bind(
-          'progress',
-          db
-            .collection(`keyResults/${keyResult.id}/progress`)
-            .orderBy('timestamp', 'desc')
-        );
-        this.isLoading = false;
-        this.renderGraph();
-      },
-    },
-
-    progress() {
-      this.renderGraph();
-    },
-  },
-
-  mounted() {
-    if (!this.$refs.graph) {
-      return;
-    }
-    if (!this.activeKeyResult) {
-      return;
-    }
-
-    this.renderGraph();
-  },
-
-  methods: {
-    format,
-
-    renderGraph() {
-      if (!this.graph) {
-        this.graph = new LineChart(this.$refs.graph, {
-          height: 450,
-          tooltips: true,
-        });
-      }
-
-      const { startValue, targetValue } = this.activeKeyResult;
-      const progressValues = this.progress.map((record) => record.value);
-
-      this.graph.render({
-        startValue: min(progressValues) > startValue ? startValue : null,
-        targetValue: max(progressValues) < targetValue ? targetValue : null,
-        startDate: this.startDate.toDate(),
-        endDate: this.endDate.toDate(),
-        progress: this.progress,
-        initialValue: startValue,
-      });
-    },
-
-    async updateHistoryRecord(id, data, modalCloseHandler) {
-      try {
-        await Progress.update(
-          db.collection('keyResults'),
-          this.activeKeyResult.id,
-          id,
-          data
-        );
-        this.$toasted.show(this.$t('toaster.update.progress'));
-      } catch {
-        this.$toasted.error(this.$t('toaster.error.updateProgress'));
-      } finally {
-        modalCloseHandler();
-      }
-    },
-
-    async deleteHistoryRecord(id) {
-      try {
-        await Progress.remove(db.collection('keyResults'), this.activeKeyResult.id, id);
-        this.$toasted.show(this.$t('toaster.delete.progress'));
-      } catch {
-        this.$toasted.error(this.$t('toaster.error.deleteProgress'));
-      }
-    },
-
-    async saveProgress(value, comment) {
-      this.isSaving = true;
-      try {
-        await Progress.create(db.collection('keyResults'), this.activeKeyResult.id, {
-          value,
-          comment,
-          timestamp: new Date(),
-        });
-        this.$toasted.show(this.$t('toaster.add.progress'));
-      } catch (e) {
-        console.log(e);
-        this.$toasted.error(this.$t('toaster.error.addProgress'));
-      } finally {
-        this.isSaving = false;
-      }
-    },
-
-    async restore() {
-      try {
-        await KeyResult.restore(this.activeKeyResult.id);
-      } catch {
-        this.$toasted.error(
-          this.$t('toaster.error.restore', { document: this.activeKeyResult.id })
-        );
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-header {
-  display: flex;
-  flex-direction: column;
-}
-
-.title-label {
-  margin-bottom: 0.5rem;
-  color: var(--color-grayscale-40);
-}
-
-.pkt-alert {
-  margin-bottom: 1rem;
-}
-
-.key-result-summary {
-  grid-template-columns: 1fr;
-
-  &__progress {
-    height: 100%;
-
-    &-inner {
-      display: flex;
-      flex-direction: column;
-      gap: 1.5rem;
-    }
-  }
-
-  &__value {
-    margin-bottom: 0;
-
-    ::v-deep form {
-      span:first-child .form-group {
-        margin-top: 0;
-      }
-
-      textarea {
-        resize: vertical;
-      }
-    }
-  }
-
-  @include bp('tablet-up') {
-    grid-auto-columns: 1fr;
-    grid-auto-flow: column;
-
-    .key-result-summary__progress {
-      grid-column: span 7;
-    }
-
-    .key-result-summary__value {
-      grid-column: span 5;
-    }
-  }
-}
-
-.keyResult__edit {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.keyResult__heading {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.key-result-progression {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-
-  &__current {
-    padding: 0.75rem 2rem;
-    background-color: var(--color-gray);
-  }
-
-  &__target {
-    margin-left: 2.5rem;
-    padding: 0.5rem 0.5rem;
-  }
-}
-
-.key-result-progress-bar {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-</style>
diff --git a/src/views/ObjectiveHome.vue b/src/views/ObjectiveHome.vue
deleted file mode 100644
index bf47ebd79..000000000
--- a/src/views/ObjectiveHome.vue
+++ /dev/null
@@ -1,216 +0,0 @@
-<template>
-  <page-layout v-if="activeObjective">
-    <template #default>
-      <header>
-        <span class="title-label pkt-txt-16-light">
-          {{ $t('general.objective') }}
-        </span>
-
-        <div class="objective__heading">
-          <h2 class="title-1">{{ activeObjective.name }}</h2>
-          <div v-if="hasEditRights" class="objective__edit">
-            <pkt-button
-              v-tooltip="$t('objective.change')"
-              icon-name="edit"
-              :text="$t('objective.change')"
-              :variant="'icon-only'"
-              skin="tertiary"
-              @onClick="showObjectiveDrawer = true"
-            />
-          </div>
-        </div>
-        <div class="objective__description">
-          <HTML-output
-            v-if="activeObjective.description"
-            :html="activeObjective.description"
-          />
-          <div
-            v-if="hasEditRights && !activeObjective.archived"
-            data-mode="dark"
-            class="objective__add-key-res"
-          >
-            <pkt-button
-              v-tooltip="$t('btn.createKeyResult')"
-              :text="$t('btn.createKeyResult')"
-              skin="primary"
-              variant="icon-left"
-              icon-name="plus-sign"
-              @onClick="showKeyResultDrawer = true"
-            />
-          </div>
-        </div>
-      </header>
-
-      <archived-restore
-        v-if="activeObjective.archived"
-        :restore="restore"
-        object-type="objective"
-      />
-
-      <section>
-        <key-results-list :objective="activeObjective" />
-      </section>
-
-      <objective-drawer
-        :visible="showObjectiveDrawer"
-        :objective="activeObjective"
-        @close="showObjectiveDrawer = false"
-      />
-
-      <key-result-drawer
-        :visible="showKeyResultDrawer"
-        :objective="activeObjective"
-        @close="closeKeyResultDrawer"
-      />
-    </template>
-
-    <template #sidebar>
-      <widget
-        v-if="typeof activeObjective.progression === 'number'"
-        :title="$t('widget.progression.objective')"
-        size="small"
-      >
-        <progression-chart :progression="activeObjective.progression" :period="period" />
-      </widget>
-      <widget-weights :objective="activeObjective" />
-      <widget-objective-details />
-    </template>
-  </page-layout>
-  <not-found-page
-    v-else
-    :heading="$t('notFound.objectiveHeading')"
-    :body="$t('notFound.objectiveBody')"
-    back-to="ItemHome"
-    :back-text="$t('notFound.linkTextAlt', { page: activeItem.name })"
-  />
-</template>
-
-<script>
-import { mapGetters, mapState } from 'vuex';
-import Objective from '@/db/Objective';
-import routerGuard from '@/router/router-guards/objectiveHome';
-import WidgetWrapper from '@/components/widgets/WidgetWrapper.vue';
-import WidgetObjectiveDetails from '@/components/widgets/WidgetObjectiveDetails.vue';
-import WidgetWeights from '@/components/widgets/WidgetWeights.vue';
-import ProgressionChart from '@/components/ProgressionChart.vue';
-import { PktButton } from '@oslokommune/punkt-vue2';
-import HTMLOutput from '@/components/HTMLOutput.vue';
-
-export default {
-  name: 'ObjectiveHome',
-
-  components: {
-    KeyResultsList: () => import('@/components/KeyResultsList.vue'),
-    NotFoundPage: () => import('@/components/pages/NotFoundPage.vue'),
-    Widget: WidgetWrapper,
-    WidgetWeights,
-    WidgetObjectiveDetails,
-    ProgressionChart,
-    PktButton,
-    HTMLOutput,
-    ObjectiveDrawer: () => import('@/components/drawers/EditObjective.vue'),
-    KeyResultDrawer: () => import('@/components/drawers/EditKeyResult.vue'),
-    ArchivedRestore: () => import('@/components/ArchivedRestore.vue'),
-  },
-
-  beforeRouteUpdate: routerGuard,
-
-  async beforeRouteLeave(to, from, next) {
-    try {
-      await this.$store.dispatch('set_active_key_result', null);
-      next();
-    } catch (error) {
-      console.error(error);
-      next(false);
-    }
-  },
-
-  data: () => ({
-    showObjectiveDrawer: false,
-    showKeyResultDrawer: false,
-  }),
-
-  computed: {
-    ...mapState(['activeObjective', 'activeItem']),
-    ...mapGetters(['hasEditRights']),
-
-    period() {
-      if (this.activeObjective.startDate && this.activeObjective.endDate) {
-        const { startDate, endDate } = this.activeObjective;
-        return { startDate, endDate };
-      }
-
-      return this.activeObjective.period;
-    },
-  },
-
-  watch: {
-    '$route.query': {
-      immediate: true,
-      async handler(query) {
-        this.showKeyResultDrawer = query?.createKeyResult === '1';
-      },
-    },
-  },
-
-  methods: {
-    closeKeyResultDrawer() {
-      this.showKeyResultDrawer = false;
-      const { query } = this.$route;
-      if (query?.createKeyResult) {
-        this.$router.replace({ query: { ...query, createKeyResult: undefined } });
-      }
-    },
-
-    async restore() {
-      try {
-        await Objective.restore(this.activeObjective.id);
-      } catch {
-        this.$toasted.error(
-          this.$t('toaster.error.restore', { document: this.activeObjective.id })
-        );
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-header {
-  display: flex;
-  flex-direction: column;
-}
-
-.title-label {
-  margin-bottom: 0.5rem;
-  color: var(--color-grayscale-40);
-}
-
-.objective__heading {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.objective__heading-text {
-  max-width: 46rem;
-  margin-right: 2.5rem;
-}
-
-.objective__description {
-  display: flex;
-  flex-direction: row;
-  align-items: self-end;
-  justify-content: space-between;
-  padding-bottom: 1rem;
-}
-
-.objective__add-key-res {
-  margin-left: auto;
-}
-
-.key-results-list {
-  margin-top: 1.5rem;
-}
-</style>

From 7e06dfd88447109d686e563f0fc6d0cfa2230dae Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Thu, 24 Aug 2023 15:04:45 +0200
Subject: [PATCH 007/102] Clean up store state for old OKR detail views

---
 src/store/actions/index.js                 |  4 ----
 src/store/actions/set_active_key_result.js | 24 ----------------------
 src/store/actions/set_active_objective.js  | 15 --------------
 3 files changed, 43 deletions(-)
 delete mode 100644 src/store/actions/set_active_key_result.js
 delete mode 100644 src/store/actions/set_active_objective.js

diff --git a/src/store/actions/index.js b/src/store/actions/index.js
index 9f957e6ae..fbcdff81c 100644
--- a/src/store/actions/index.js
+++ b/src/store/actions/index.js
@@ -2,8 +2,6 @@
 import init_state from './init_state';
 import reset_state from './reset_state';
 import set_active_item from './set_active_item';
-import set_active_key_result from './set_active_key_result';
-import set_active_objective from './set_active_objective';
 import set_active_period_and_data from './set_active_period_and_data';
 import set_sub_kpis from './set_sub_kpis.js';
 import set_user from './set_user';
@@ -13,8 +11,6 @@ export default {
   init_state,
   reset_state,
   set_active_item,
-  set_active_key_result,
-  set_active_objective,
   set_active_period_and_data,
   set_sub_kpis,
   set_user,
diff --git a/src/store/actions/set_active_key_result.js b/src/store/actions/set_active_key_result.js
deleted file mode 100644
index 6f3d99ab4..000000000
--- a/src/store/actions/set_active_key_result.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { firestoreAction } from 'vuexfire';
-import { db } from '@/config/firebaseConfig';
-
-export default firestoreAction(
-  async ({ bindFirestoreRef, unbindFirestoreRef, state }, id) => {
-    if (!id) {
-      return unbindFirestoreRef('activeKeyResult');
-    }
-    const reference = db.collection('keyResults').doc(id);
-    const refData = await reference.get().then((snapshot) => snapshot.data());
-
-    if (!refData) {
-      return unbindFirestoreRef('activeKeyResult');
-    }
-
-    const objective = refData.objective;
-
-    if (!state.activeObjective || state.activeObjective.id !== objective.id) {
-      await bindFirestoreRef('activeObjective', objective, { maxRefDepth: 1 });
-    }
-
-    return bindFirestoreRef('activeKeyResult', reference, { maxRefDepth: 2 });
-  }
-);
diff --git a/src/store/actions/set_active_objective.js b/src/store/actions/set_active_objective.js
deleted file mode 100644
index bafbfce6a..000000000
--- a/src/store/actions/set_active_objective.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { firestoreAction } from 'vuexfire';
-import { db } from '@/config/firebaseConfig';
-
-export default firestoreAction(async ({ bindFirestoreRef, unbindFirestoreRef }, id) => {
-  if (!id) {
-    return unbindFirestoreRef('activeObjective');
-  }
-  const reference = db.collection('objectives').doc(id);
-
-  try {
-    return bindFirestoreRef('activeObjective', reference, { maxRefDepth: 1 });
-  } catch (error) {
-    throw new Error(error);
-  }
-});

From b32d1517f4ff3716df5fdea218074203aa4b6c4b Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Thu, 24 Aug 2023 16:14:22 +0200
Subject: [PATCH 008/102] Ensure period is resolved in objective and key result
 details widget

---
 src/components/widgets/WidgetKeyResultDetails.vue | 15 +++++++++------
 src/util/okr.js                                   |  2 +-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/widgets/WidgetKeyResultDetails.vue b/src/components/widgets/WidgetKeyResultDetails.vue
index 2c30ca889..647551063 100644
--- a/src/components/widgets/WidgetKeyResultDetails.vue
+++ b/src/components/widgets/WidgetKeyResultDetails.vue
@@ -1,27 +1,30 @@
 <template>
   <widget v-if="activeKeyResult" :title="$t('general.details')" size="small" collapsable>
     <div class="details">
-      <div v-if="activeKeyResult.objective" class="details__item">
+      <div v-if="activeObjective" class="details__item">
         <h3 class="title-3 details__item-heading">{{ $t('keyResult.belongsTo') }}</h3>
         <div class="details__item-body">
           <div class="details__item-value">
             <router-link
               :to="{
                 name: 'ObjectiveHome',
-                params: { objectiveId: activeKeyResult.objective.id },
+                params: { objectiveId: activeObjective.id },
               }"
             >
-              {{ activeKeyResult.objective.name }}
+              {{ activeObjective.name }}
             </router-link>
           </div>
         </div>
       </div>
 
-      <div v-if="formattedPeriod(activeKeyResult.objective)" class="details__item">
+      <div
+        v-if="activeObjective && formattedPeriod(activeObjective)"
+        class="details__item"
+      >
         <h3 class="title-3 details__item-heading">{{ $t('objective.period') }}</h3>
         <div class="details__item-body">
           <div class="details__item-value">
-            {{ formattedPeriod(activeKeyResult.objective) }}
+            {{ formattedPeriod(activeObjective) }}
           </div>
         </div>
       </div>
@@ -127,7 +130,7 @@ export default {
   }),
 
   computed: {
-    ...mapState('okrs', ['activeKeyResult']),
+    ...mapState('okrs', ['activeObjective', 'activeKeyResult']),
     createdBy() {
       return (
         this.activeKeyResult.createdBy.displayName || this.activeKeyResult.createdBy.id
diff --git a/src/util/okr.js b/src/util/okr.js
index 5dacd9ec0..f0167cf9f 100644
--- a/src/util/okr.js
+++ b/src/util/okr.js
@@ -9,7 +9,7 @@ function formattedPeriod(objective) {
   if (startDate && endDate) {
     return periodDates({ startDate, endDate }, dateShort);
   }
-  if (period) {
+  if (period && typeof period !== 'string') {
     return `${period.name} (${periodDates(period, dateShort)})`;
   }
 

From 81e9674da02df9f113d6340d01d61e066a2b049f Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Fri, 25 Aug 2023 09:01:00 +0200
Subject: [PATCH 009/102] Fix incorrect getter name in store

---
 src/store/modules/okrs.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/store/modules/okrs.js b/src/store/modules/okrs.js
index 5587121c3..c2265508f 100644
--- a/src/store/modules/okrs.js
+++ b/src/store/modules/okrs.js
@@ -107,7 +107,7 @@ export default {
       if (!objectiveIds.length) {
         return [];
       }
-      return rootGetters.objectivesWithId.filter((o) => objectiveIds.includes(o.id));
+      return rootGetters.objectivesWithID.filter((o) => objectiveIds.includes(o.id));
     },
   },
 };

From 7f3bc0597bf9a8b94cc27c45ac6c467f0fa6094e Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Fri, 25 Aug 2023 14:02:27 +0200
Subject: [PATCH 010/102] Cleanup and changelog

---
 CHANGELOG.md                             | 6 ++++++
 src/components/drawers/EditKeyResult.vue | 6 +-----
 src/components/panes/KeyResultPane.vue   | 2 +-
 src/components/panes/ObjectivePane.vue   | 2 +-
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1330eeb0c..dc546ae85 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,12 @@ 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.
+- Detail views for both objectives and key results are now shown as panes in the
+  OKR timeline view. The number of simultaneously visible panes depends on the
+  viewport size (and is otherwise stacked). Clicking objectives in the timeline
+  now toggles the detail pane rather than adding objectives to a list. To group
+  objectives in a list (and see combined progression), the meta key must now be
+  pressed while selecing one or more objectives.
 
 ### Removed
 
diff --git a/src/components/drawers/EditKeyResult.vue b/src/components/drawers/EditKeyResult.vue
index 7cc9d8798..7fd644947 100644
--- a/src/components/drawers/EditKeyResult.vue
+++ b/src/components/drawers/EditKeyResult.vue
@@ -249,11 +249,7 @@ export default {
         }
 
         if (!this.keyResult) {
-          this.thisKeyResult = {
-            unit: 'prosent',
-            startValue: 0,
-            targetValue: 100,
-          };
+          this.thisKeyResult = {};
           return;
         }
 
diff --git a/src/components/panes/KeyResultPane.vue b/src/components/panes/KeyResultPane.vue
index 1410f2f35..dccfd8d38 100644
--- a/src/components/panes/KeyResultPane.vue
+++ b/src/components/panes/KeyResultPane.vue
@@ -300,8 +300,8 @@ export default {
     margin-top: 2rem;
 
     ::v-deep .widget {
-      border: 0;
       padding: 0;
+      border: 0;
     }
   }
 }
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index 60ed8d333..05d5ba166 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -204,8 +204,8 @@ export default {
     margin-top: 2rem;
 
     ::v-deep .widget {
-      border: 0;
       padding: 0;
+      border: 0;
     }
   }
 }

From 714240c7b15112457da9fe671291e0051733d384 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Mon, 28 Aug 2023 12:04:46 +0200
Subject: [PATCH 011/102] Encode user-controlled query params

---
 src/views/Item/ItemOKRs.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/views/Item/ItemOKRs.vue b/src/views/Item/ItemOKRs.vue
index 5b5790b15..3df2e1b07 100644
--- a/src/views/Item/ItemOKRs.vue
+++ b/src/views/Item/ItemOKRs.vue
@@ -87,6 +87,7 @@
 
 <script>
 import { mapGetters, mapState, mapActions } from 'vuex';
+import { firestoreEncode } from '@/util/firebaseUtil';
 import { PktButton } from '@oslokommune/punkt-vue2';
 import routerGuard from '@/router/router-guards/itemOKRs';
 import PaneLayout from '@/components/layout/PaneLayout.vue';
@@ -190,7 +191,7 @@ export default {
 
       if (objectiveId) {
         if (objectiveId !== this.activeObjective?.id) {
-          await this.setActiveObjective(objectiveId);
+          await this.setActiveObjective(firestoreEncode(objectiveId));
         }
         if (!this.activeObjective) {
           this.notFoundState = true;
@@ -199,7 +200,7 @@ export default {
 
       if (this.activeObjective && keyResultId) {
         if (keyResultId !== this.activeKeyResult?.id) {
-          await this.setActiveKeyResult(keyResultId);
+          await this.setActiveKeyResult(firestoreEncode(keyResultId));
         }
         if (!this.activeKeyResult) {
           this.notFoundState = true;

From b47c7aa6df0566e31a8c4347dbcb7fcee94d67c1 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Tue, 29 Aug 2023 13:45:22 +0200
Subject: [PATCH 012/102] Use Punkt typography helper classes directly

---
 src/components/OkrLinkCard.vue         |  5 +----
 src/components/ProgressBar.vue         |  6 +-----
 src/components/panes/KeyResultPane.vue |  4 ----
 src/components/panes/ObjectivePane.vue | 12 +-----------
 src/components/panes/PaneWrapper.vue   |  8 +-------
 5 files changed, 4 insertions(+), 31 deletions(-)

diff --git a/src/components/OkrLinkCard.vue b/src/components/OkrLinkCard.vue
index 1c9966146..9a69e01fa 100644
--- a/src/components/OkrLinkCard.vue
+++ b/src/components/OkrLinkCard.vue
@@ -5,7 +5,7 @@
       :href="href"
       @click="activate($event, navigate)"
     >
-      <div class="okr-link-card__title">
+      <div class="okr-link-card__title pkt-txt-16-medium">
         <span>{{ title }}</span>
       </div>
 
@@ -66,8 +66,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
-
 .okr-link-card {
   display: flex;
   flex-direction: column;
@@ -92,7 +90,6 @@ export default {
     flex-grow: 1;
     align-items: center;
     padding: 0.5rem 1rem 0 1rem;
-    @include get-text('pkt-txt-16-medium');
   }
 }
 </style>
diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue
index 5d772500e..22a715b55 100644
--- a/src/components/ProgressBar.vue
+++ b/src/components/ProgressBar.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="progress-bar">
-    <h4 v-if="title" class="progress-bar__title">{{ title }}</h4>
+    <h4 v-if="title" class="pkt-txt-14-medium">{{ title }}</h4>
     <div class="progress-bar__bar">
       <span class="progress-bar__label" :style="progressLabelStyle">
         {{ formattedPercent }}
@@ -81,10 +81,6 @@ export default {
 .progress-bar {
   width: 100%;
 
-  &__title {
-    @include get-text('pkt-txt-14-medium');
-  }
-
   &__bar {
     position: relative;
     margin-top: 1.5rem;
diff --git a/src/components/panes/KeyResultPane.vue b/src/components/panes/KeyResultPane.vue
index dccfd8d38..b0646858a 100644
--- a/src/components/panes/KeyResultPane.vue
+++ b/src/components/panes/KeyResultPane.vue
@@ -281,10 +281,6 @@ export default {
 @use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
 
 .key-result-pane {
-  &__description {
-    @include get-text('pkt-txt-18-light');
-  }
-
   &__progression {
     margin-top: 1rem;
   }
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index 05d5ba166..73148db64 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -35,7 +35,7 @@
     />
 
     <div class="objective-pane__key-results-header" data-mode="dark">
-      <h3>{{ $t('general.keyResults') }}</h3>
+      <h3 class="pkt-txt-18-medium">{{ $t('general.keyResults') }}</h3>
       <pkt-button
         v-if="hasEditRights"
         v-tooltip="$t('btn.createKeyResult')"
@@ -166,8 +166,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
-
 .objective-pane {
   &__period {
     display: flex;
@@ -177,18 +175,10 @@ export default {
     --fg-color: var(--color-grayscale-40);
   }
 
-  &__description {
-    @include get-text('pkt-txt-18-light');
-  }
-
   &__progression {
     margin-top: 1rem;
   }
 
-  h3 {
-    @include get-text('pkt-txt-18-medium');
-  }
-
   &__key-results-header {
     display: flex;
     align-items: center;
diff --git a/src/components/panes/PaneWrapper.vue b/src/components/panes/PaneWrapper.vue
index abfd25162..d0fb59824 100644
--- a/src/components/panes/PaneWrapper.vue
+++ b/src/components/panes/PaneWrapper.vue
@@ -2,7 +2,7 @@
   <div class="pane">
     <div class="pane__inner">
       <div class="pane__header">
-        <h1>{{ title }}</h1>
+        <h1 class="pkt-txt-20-medium">{{ title }}</h1>
 
         <div class="pane__buttons">
           <slot name="actions" />
@@ -49,8 +49,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
-
 .pane {
   &__inner {
     display: flex;
@@ -64,10 +62,6 @@ export default {
     display: flex;
     align-items: center;
     justify-content: space-between;
-
-    h1 {
-      @include get-text('pkt-txt-20-medium');
-    }
   }
 
   &__buttons {

From 3a8a591f51856b46beb791534a22209f516ad7ed Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Tue, 29 Aug 2023 13:47:48 +0200
Subject: [PATCH 013/102] Fix changelog typo

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dc546ae85..cb8100c2f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -44,7 +44,7 @@ All notable changes to this project will be documented in this file. The format
   viewport size (and is otherwise stacked). Clicking objectives in the timeline
   now toggles the detail pane rather than adding objectives to a list. To group
   objectives in a list (and see combined progression), the meta key must now be
-  pressed while selecing one or more objectives.
+  pressed while selecting one or more objectives.
 
 ### Removed
 

From 210f0af7a891f9c5619988629911c6aa587bfa07 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Tue, 29 Aug 2023 13:50:06 +0200
Subject: [PATCH 014/102] Simplify computed property

---
 src/components/widgets/WidgetWrapper.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/widgets/WidgetWrapper.vue b/src/components/widgets/WidgetWrapper.vue
index 3b7e42ad8..36e7267fb 100644
--- a/src/components/widgets/WidgetWrapper.vue
+++ b/src/components/widgets/WidgetWrapper.vue
@@ -78,10 +78,7 @@ export default {
 
   computed: {
     show() {
-      if (!this.collapsable) {
-        return true;
-      }
-      return this.isCollapsed;
+      return !this.collapsable || this.isCollapsed;
     },
   },
 

From cf578db919532a048f5b690f5efa39edb0e18e0b Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Fri, 1 Sep 2023 12:13:21 +0200
Subject: [PATCH 015/102] Only show scrollbar when content is clipped

---
 src/components/AppLayout.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AppLayout.vue b/src/components/AppLayout.vue
index 41330e59d..f01af5490 100644
--- a/src/components/AppLayout.vue
+++ b/src/components/AppLayout.vue
@@ -43,6 +43,6 @@ export default {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 </style>

From 058f27c2c9df39970a220869c72a96ef6811a4a9 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Fri, 1 Sep 2023 12:24:47 +0200
Subject: [PATCH 016/102] Add more flexible design for objectives and key
 result cards

---
 src/components/OkrLinkCard.vue | 48 +++++++++++++++++++++++++---------
 src/components/ProgressBar.vue | 22 +++++++++++-----
 2 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/src/components/OkrLinkCard.vue b/src/components/OkrLinkCard.vue
index 9a69e01fa..37c93029c 100644
--- a/src/components/OkrLinkCard.vue
+++ b/src/components/OkrLinkCard.vue
@@ -1,25 +1,45 @@
 <template>
   <router-link v-slot="{ href, navigate, isExactActive }" :to="route" custom>
     <a
-      :class="['okr-link-card', { 'okr-link-card--active': isExactActive || active }]"
+      :class="[
+        'okr-link-card',
+        {
+          'okr-link-card--active': isExactActive || active,
+          'okr-link-card--compact': compact,
+        },
+      ]"
       :href="href"
       @click="activate($event, navigate)"
     >
-      <div class="okr-link-card__title pkt-txt-16-medium">
-        <span>{{ title }}</span>
-      </div>
+      <pkt-tag
+        v-if="!compact"
+        class="okr-link-card__owner-tag"
+        text-style="normal-text"
+        skin="yellow"
+        size="small"
+      >
+        {{ activeItem.name }}
+      </pkt-tag>
 
-      <progress-bar :progression="progression" />
+      <span class="pkt-txt-14-medium">
+        {{ title }}
+      </span>
+
+      <progress-bar :progression="progression" :compact="compact" />
     </a>
   </router-link>
 </template>
 
 <script>
+import { mapState } from 'vuex';
+import { PktTag } from '@oslokommune/punkt-vue2';
+
 export default {
   name: 'OkrLinkCard',
 
   components: {
     ProgressBar: () => import('@/components/ProgressBar.vue'),
+    PktTag,
   },
 
   props: {
@@ -39,6 +59,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    compact: {
+      type: Boolean,
+      default: false,
+    },
     beforeNavigate: {
       type: Function,
       default: null,
@@ -49,6 +73,10 @@ export default {
     },
   },
 
+  computed: {
+    ...mapState(['activeItem']),
+  },
+
   methods: {
     async activate(event, rootHandler) {
       if (this.beforeNavigate) {
@@ -69,7 +97,9 @@ export default {
 .okr-link-card {
   display: flex;
   flex-direction: column;
+  gap: 0.5rem;
   min-height: 6.5rem;
+  padding: 1rem;
   color: var(--color-text);
   text-decoration: none;
   background-color: var(--color-white);
@@ -82,14 +112,8 @@ export default {
 
   &--active {
     color: var(--color-hover);
+    background-color: var(--color-blue-5);
     border: 2px solid var(--color-hover);
   }
-
-  &__title {
-    display: flex;
-    flex-grow: 1;
-    align-items: center;
-    padding: 0.5rem 1rem 0 1rem;
-  }
 }
 </style>
diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue
index 22a715b55..dd8c729c6 100644
--- a/src/components/ProgressBar.vue
+++ b/src/components/ProgressBar.vue
@@ -1,10 +1,7 @@
 <template>
-  <div class="progress-bar">
+  <div :class="['progress-bar', { 'progress-bar--compact': compact }]">
     <h4 v-if="title" class="pkt-txt-14-medium">{{ title }}</h4>
     <div class="progress-bar__bar">
-      <span class="progress-bar__label" :style="progressLabelStyle">
-        {{ formattedPercent }}
-      </span>
       <div
         :class="[
           'progress-bar__value',
@@ -17,6 +14,9 @@
         aria-valuemax="100"
         :aria-valuenow="percent"
       ></div>
+      <span class="progress-bar__label" :style="progressLabelStyle">
+        {{ formattedPercent }}
+      </span>
     </div>
     <div v-if="leftLabel || rightLabel" class="progress-bar__sub-labels">
       <span v-if="leftLabel" class="progress-bar__label">
@@ -52,6 +52,10 @@ export default {
       type: String,
       default: null,
     },
+    compact: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   computed: {
@@ -83,12 +87,12 @@ export default {
 
   &__bar {
     position: relative;
-    margin-top: 1.5rem;
+    margin: 0.5rem 0 1rem 0;
     background-color: var(--color-grayscale-10);
 
     > span {
       position: absolute;
-      top: -1.25rem;
+      bottom: -1.25rem;
       width: 2.1rem;
       text-align: center;
     }
@@ -119,5 +123,11 @@ export default {
       margin-left: auto;
     }
   }
+
+  &--compact {
+    .progress-bar__value {
+      height: 0.5rem;
+    }
+  }
 }
 </style>

From 82fb6ab4e88b006423419f95ea73bc6708197ba2 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Fri, 1 Sep 2023 12:26:28 +0200
Subject: [PATCH 017/102] Use absolute positioning for pane close button

---
 src/components/panes/PaneWrapper.vue  | 51 +++++++++++++--------------
 src/components/panes/TimelinePane.vue | 26 ++++++++------
 2 files changed, 40 insertions(+), 37 deletions(-)

diff --git a/src/components/panes/PaneWrapper.vue b/src/components/panes/PaneWrapper.vue
index d0fb59824..08e8213a2 100644
--- a/src/components/panes/PaneWrapper.vue
+++ b/src/components/panes/PaneWrapper.vue
@@ -1,21 +1,21 @@
 <template>
   <div class="pane">
+    <div class="pane__actions">
+      <slot name="actions" />
+      <pkt-button
+        v-if="closable"
+        v-tooltip="$t('btn.close')"
+        variant="icon-only"
+        skin="tertiary"
+        size="medium"
+        icon-name="close"
+        @onClick="$emit('close')"
+      />
+    </div>
+
     <div class="pane__inner">
       <div class="pane__header">
-        <h1 class="pkt-txt-20-medium">{{ title }}</h1>
-
-        <div class="pane__buttons">
-          <slot name="actions" />
-          <pkt-button
-            v-if="closable"
-            v-tooltip="$t('btn.close')"
-            variant="icon-only"
-            skin="tertiary"
-            size="small"
-            icon-name="close"
-            @onClick="$emit('close')"
-          />
-        </div>
+        <h1 class="pkt-txt-18-medium">{{ title }}</h1>
       </div>
 
       <div class="pane__body">
@@ -50,12 +50,22 @@ export default {
 
 <style lang="scss" scoped>
 .pane {
+  position: relative;
+
+  &__actions {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    display: flex;
+    gap: 0.5rem;
+  }
+
   &__inner {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     height: 0;
-    padding: 1.5rem;
+    padding: 1.5rem 2.5rem;
   }
 
   &__header {
@@ -64,17 +74,6 @@ export default {
     justify-content: space-between;
   }
 
-  &__buttons {
-    display: flex;
-    gap: 0.5rem;
-  }
-
-  &__actions {
-    display: flex;
-    gap: 1rem;
-    justify-content: space-between;
-  }
-
   &__body {
     display: flex;
     flex-direction: column;
diff --git a/src/components/panes/TimelinePane.vue b/src/components/panes/TimelinePane.vue
index 168c4027d..630cc7a14 100644
--- a/src/components/panes/TimelinePane.vue
+++ b/src/components/panes/TimelinePane.vue
@@ -1,17 +1,16 @@
 <template>
   <pane-wrapper :title="$t('general.OKRsLong')" class="timeline-pane">
     <template #actions>
-      <div v-if="hasEditRights" data-mode="dark">
-        <pkt-button
-          v-tooltip="$t('btn.createObjective')"
-          :text="$t('btn.createObjective')"
-          skin="primary"
-          size="small"
-          variant="icon-left"
-          icon-name="plus-sign"
-          @onClick="$emit('add-objective')"
-        />
-      </div>
+      <pkt-button
+        v-if="hasEditRights"
+        v-tooltip="$t('btn.createObjective')"
+        :text="$t('btn.createObjective')"
+        skin="primary"
+        size="small"
+        variant="icon-left"
+        icon-name="plus-sign"
+        @onClick="$emit('add-objective')"
+      />
     </template>
 
     <gantt-chart
@@ -46,6 +45,11 @@ export default {
 
 <style lang="scss" scoped>
 .timeline-pane {
+  ::v-deep .pane__actions {
+    top: 1rem;
+    right: 1rem;
+  }
+
   ::v-deep .pane__inner {
     height: 100%;
     padding: 0;

From 166b48b9aca7741ad4b9ca1ebc97f4952df80a3d Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Fri, 1 Sep 2023 12:27:22 +0200
Subject: [PATCH 018/102] Adjust timeline background and period indicator
 colors

---
 src/components/GanttChart.vue        | 12 +++---------
 src/components/OkrLinkCard.vue       |  2 +-
 src/components/layout/PaneLayout.vue |  2 +-
 3 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/components/GanttChart.vue b/src/components/GanttChart.vue
index ec6987b35..ffd0d8109 100644
--- a/src/components/GanttChart.vue
+++ b/src/components/GanttChart.vue
@@ -500,7 +500,7 @@ export default {
   flex-direction: column;
   height: 100%;
   overflow: auto;
-  background-color: var(--color-gray-light);
+  background-color: var(--color-gray);
 
   &__inner {
     position: relative;
@@ -564,7 +564,7 @@ export default {
 
 .sep {
   height: var(--sep-height);
-  background: var(--color-grayscale-10);
+  background: rgba(42, 40, 89, 0.25); // blue-dark, 25%;
   border-top: var(--sep-border-width) solid var(--color-primary);
 
   .sep__period {
@@ -616,13 +616,7 @@ export default {
   position: absolute;
   top: var(--period-offset-top);
   height: calc(100% - var(--period-offset-top));
-  background: repeating-linear-gradient(
-    -45deg,
-    var(--color-blue-dark-10),
-    var(--color-blue-dark-10) 4px,
-    var(--color-gray-light) 4px,
-    var(--color-gray-light) 8px
-  );
+  background-color: rgba(42, 40, 89, 0.15); // blue-dark, 15%
 }
 
 .objective-row {
diff --git a/src/components/OkrLinkCard.vue b/src/components/OkrLinkCard.vue
index 37c93029c..0a7a1faff 100644
--- a/src/components/OkrLinkCard.vue
+++ b/src/components/OkrLinkCard.vue
@@ -103,7 +103,7 @@ export default {
   color: var(--color-text);
   text-decoration: none;
   background-color: var(--color-white);
-  border: 2px solid var(--color-grayscale-10);
+  border: 2px solid rgba(42, 40, 89, 0.25); // blue-dark, 25%
   cursor: pointer;
 
   &:hover {
diff --git a/src/components/layout/PaneLayout.vue b/src/components/layout/PaneLayout.vue
index e04a843a6..aaf4b4e06 100644
--- a/src/components/layout/PaneLayout.vue
+++ b/src/components/layout/PaneLayout.vue
@@ -35,7 +35,7 @@ export default {
     width: 0;
     height: 100%;
     overflow: auto;
-    border-left: 1px solid var(--color-grayscale-10);
+    border-left: 1px solid var(--color-grayscale-20);
 
     &:nth-last-child(-n + 1) {
       display: block;

From a003052eed88817c080b6f7444faf8ad0854eecd Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Fri, 1 Sep 2023 13:14:02 +0200
Subject: [PATCH 019/102] Adjust pane layout for objective and key result
 details

---
 src/components/panes/KeyResultPane.vue |  59 ++++++++---
 src/components/panes/ObjectivePane.vue | 140 ++++++++++++++++++-------
 src/locale/locales/en-US.json          |   2 +-
 src/locale/locales/nb-NO.json          |   4 +-
 4 files changed, 149 insertions(+), 56 deletions(-)

diff --git a/src/components/panes/KeyResultPane.vue b/src/components/panes/KeyResultPane.vue
index b0646858a..69903a1c9 100644
--- a/src/components/panes/KeyResultPane.vue
+++ b/src/components/panes/KeyResultPane.vue
@@ -1,13 +1,22 @@
 <template>
   <pane-wrapper
-    :title="activeKeyResult.name"
+    ref="pane"
+    title="Nøkkelresultat"
     class="key-result-pane"
     closable
     @close="
       $router.push({ name: 'ObjectiveHome', params: { objectiveId: activeObjective.id } })
     "
   >
-    <template #actions>
+    <archived-restore
+      v-if="activeKeyResult.archived"
+      class="mt-size-16"
+      :restore="restore"
+      :object-type="$t('archived.keyResult')"
+    />
+
+    <div class="key-result-pane__title">
+      <h2 class="pkt-txt-16-medium">{{ activeKeyResult.name }}</h2>
       <pkt-button
         v-if="hasEditRights"
         v-tooltip="$t('btn.updateKeyResult')"
@@ -17,14 +26,7 @@
         icon-name="edit"
         @onClick="$emit('edit-key-result')"
       />
-    </template>
-
-    <archived-restore
-      v-if="activeKeyResult.archived"
-      class="mt-size-16"
-      :restore="restore"
-      :object-type="$t('archived.keyResult')"
-    />
+    </div>
 
     <HTML-output
       v-if="activeKeyResult.description"
@@ -48,9 +50,8 @@
       @delete-record="deleteHistoryRecord"
     >
       <template #title-actions>
-        <div v-if="hasEditRights" data-mode="dark">
+        <div v-if="hasEditRights">
           <pkt-button
-            v-tooltip="$t('keyResult.newValue')"
             :text="$t('keyResult.newValue')"
             skin="primary"
             size="small"
@@ -175,6 +176,10 @@ export default {
           return;
         }
 
+        this.$nextTick(() => {
+          this.$refs.pane.$el.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+
         this.isLoading = true;
         await this.$bind(
           'progress',
@@ -277,27 +282,47 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '@/styles/typography';
 @use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
 
 .key-result-pane {
+  &__title {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 1rem;
+
+    .pkt-btn {
+      margin: -0.75rem 0 0 1rem;
+    }
+  }
+
   &__progression {
     margin-top: 1rem;
   }
 
   &__values,
   &__graph {
-    margin-top: 3rem;
     padding: 0;
     border: 0;
   }
+  &__values {
+    margin-top: 1rem;
+  }
 
-  &__widgets {
-    margin-top: 2rem;
+  ::v-deep .widget {
+    padding: 1.5rem 0;
+
+    h3 {
+      @include get-text('pkt-txt-16-medium');
+    }
+  }
 
+  &__widgets {
     ::v-deep .widget {
-      padding: 0;
       border: 0;
+
+      h3 {
+        @include get-text('pkt-txt-16');
+      }
     }
   }
 }
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index 73148db64..b239f356f 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -1,11 +1,13 @@
 <template>
   <pane-wrapper
-    :title="activeObjective.name"
+    ref="pane"
+    title="Mål"
     class="objective-pane"
     closable
     @close="$router.push({ name: 'ItemHome' })"
   >
-    <template #actions>
+    <div class="objective-pane__title">
+      <h2 class="pkt-txt-16-medium">{{ activeObjective.name }}</h2>
       <pkt-button
         v-if="hasEditRights"
         v-tooltip="$t('btn.updateObjective')"
@@ -15,12 +17,7 @@
         icon-name="edit"
         @onClick="$emit('edit-objective')"
       />
-    </template>
-
-    <span v-if="period" class="objective-pane__period">
-      <pkt-icon name="calendar" />
-      {{ periodDates(period) }}
-    </span>
+    </div>
 
     <HTML-output
       v-if="activeObjective.description"
@@ -34,27 +31,33 @@
       :progression="activeObjective.progression"
     />
 
-    <div class="objective-pane__key-results-header" data-mode="dark">
-      <h3 class="pkt-txt-18-medium">{{ $t('general.keyResults') }}</h3>
-      <pkt-button
-        v-if="hasEditRights"
-        v-tooltip="$t('btn.createKeyResult')"
-        :text="$t('btn.createKeyResult')"
-        skin="primary"
-        size="small"
-        variant="icon-left"
-        icon-name="plus-sign"
-        @onClick="$emit('add-key-result')"
-      />
+    <div v-if="period" class="objective-pane__period">
+      <span class="pkt-txt-16-light">{{ $t('objective.period') }}</span>
+      <pkt-tag text-style="normal-text" skin="beige" size="small">
+        {{ periodDates(period) }}
+      </pkt-tag>
     </div>
 
     <div class="objective-pane__key-results">
+      <div class="objective-pane__key-results-header">
+        <h3 class="pkt-txt-16-medium">{{ $t('general.keyResults') }}</h3>
+        <pkt-button
+          v-if="hasEditRights"
+          :text="$t('btn.createKeyResult')"
+          skin="primary"
+          size="small"
+          variant="icon-left"
+          icon-name="plus-sign"
+          @onClick="$emit('add-key-result')"
+        />
+      </div>
+
       <div v-if="loadingKeyResults">
         <loading-small />
         {{ $t('general.loading') }}
       </div>
 
-      <template v-else-if="keyResults.length">
+      <div v-else-if="keyResults.length" class="objective-pane__key-results-list">
         <okr-link-card
           v-for="keyResult in keyResults"
           :key="keyResult.id"
@@ -65,8 +68,9 @@
           :title="keyResult.name"
           :progression="keyResult.progression"
           :active="activeKeyResult && activeKeyResult.id === keyResult.id"
+          compact
         />
-      </template>
+      </div>
 
       <empty-state
         v-else
@@ -87,7 +91,7 @@ import { format } from 'd3-format';
 import { mapGetters, mapState } from 'vuex';
 import { dateLong, periodDates } from '@/util';
 import { db } from '@/config/firebaseConfig';
-import { PktButton } from '@oslokommune/punkt-vue2';
+import { PktButton, PktTag } from '@oslokommune/punkt-vue2';
 import ProgressBar from '@/components/ProgressBar.vue';
 import PaneWrapper from '@/components/panes/PaneWrapper.vue';
 import LoadingSmall from '@/components/LoadingSmall.vue';
@@ -104,6 +108,7 @@ export default {
     HTMLOutput: () => import('@/components/HTMLOutput.vue'),
     LoadingSmall,
     PktButton,
+    PktTag,
     ProgressBar,
     WidgetWeights,
     WidgetObjectiveDetails,
@@ -141,6 +146,9 @@ export default {
     activeObjective: {
       immediate: true,
       async handler(objective) {
+        this.$nextTick(() => {
+          this.$refs.pane.$el.scrollTo({ top: 0, behavior: 'smooth' });
+        });
         this.loadingKeyResults = true;
         const objectiveRef = await db.doc(`objectives/${objective.id}`);
         const keyResults = await db
@@ -166,28 +174,84 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/breakpoints' as *;
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
+
 .objective-pane {
-  &__period {
+  background-color: var(--color-gray-light);
+
+  &__title {
     display: flex;
-    gap: 0.5rem;
-    align-items: center;
-    color: var(--color-grayscale-60);
-    --fg-color: var(--color-grayscale-40);
+    justify-content: space-between;
+    margin-top: 1rem;
+
+    .pkt-btn {
+      margin: -0.75rem 0 0 1rem;
+    }
+  }
+
+  &__period > span {
+    &:first-child {
+      display: block;
+      margin-bottom: 0.25rem;
+      color: var(--color-grayscale-60);
+    }
   }
 
   &__progression {
     margin-top: 1rem;
   }
 
-  &__key-results-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: 3rem 0 0 0;
-  }
+  &__key-results {
+    margin-top: 3rem;
+
+    @include bp('tablet-up') {
+      padding-right: 1.5rem;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 1rem;
+    }
+
+    &-list {
+      position: relative;
 
-  &__key-results > .okr-link-card {
-    margin-bottom: 1rem;
+      @include bp('tablet-up') {
+        margin-left: 3rem;
+      }
+
+      > .okr-link-card {
+        position: relative;
+        margin-top: 1rem;
+
+        @include bp('tablet-up') {
+          &::before,
+          &::after {
+            position: absolute;
+            left: -2.125rem;
+            width: 2rem;
+            border-left: 2px solid var(--color-grayscale-10);
+          }
+
+          &::before {
+            position: absolute;
+            top: 0;
+            left: -2.125rem;
+            height: 50%;
+            border-bottom: 2px solid var(--color-grayscale-10);
+            content: '';
+          }
+          &:not(:last-child)::after {
+            top: 50%;
+            height: calc(50% + 1.5rem);
+            content: '';
+          }
+        }
+      }
+    }
   }
 
   &__widgets {
@@ -196,6 +260,10 @@ export default {
     ::v-deep .widget {
       padding: 0;
       border: 0;
+
+      h3 {
+        @include get-text('pkt-txt-16');
+      }
     }
   }
 }
diff --git a/src/locale/locales/en-US.json b/src/locale/locales/en-US.json
index 3f195b0b5..cc512757b 100644
--- a/src/locale/locales/en-US.json
+++ b/src/locale/locales/en-US.json
@@ -382,7 +382,7 @@
   },
   "objective": {
     "period": "Period",
-    "progressionTitle": "Progression in percent based on the sum of key results:",
+    "progressionTitle": "Objective progression:",
     "weight": "Weight",
     "change": "Change objective",
     "add": "Add objective",
diff --git a/src/locale/locales/nb-NO.json b/src/locale/locales/nb-NO.json
index 2d9033238..2e22a2bdf 100644
--- a/src/locale/locales/nb-NO.json
+++ b/src/locale/locales/nb-NO.json
@@ -381,8 +381,8 @@
     "edit": "Rediger nøkkelresultat"
   },
   "objective": {
-    "period": "Periode",
-    "progressionTitle": "Prosentvis fremdrift basert på summen av fremdrift i nøkkelresultatene:",
+    "period": "Arbeisdperiode",
+    "progressionTitle": "Prosentvis fremdrift for målet:",
     "weight": "Vekt",
     "change": "Endre mål",
     "add": "Legg til mål",

From 367aff2fed00a1b2fde2bd451a973d99cdf158ea Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Fri, 1 Sep 2023 13:21:09 +0200
Subject: [PATCH 020/102] Tighten up the timeline view somewhat

---
 src/components/GanttChart.vue         | 14 ++++++++------
 src/components/panes/TimelinePane.vue |  1 +
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/GanttChart.vue b/src/components/GanttChart.vue
index ffd0d8109..bfc6ba0f7 100644
--- a/src/components/GanttChart.vue
+++ b/src/components/GanttChart.vue
@@ -2,14 +2,19 @@
   <div class="gantt">
     <div class="gantt__inner">
       <div class="month-wrapper" @mousedown="startDrag">
-        <div v-if="!loading" ref="today" class="today" :style="todayStyle()">
+        <div
+          v-if="!loading"
+          ref="today"
+          class="today pkt-txt-14-medium"
+          :style="todayStyle()"
+        >
           {{ $t('general.today') }}
         </div>
         <div class="months">
           <div
             v-for="m in months"
             :key="m.valueOf()"
-            class="month"
+            class="month pkt-txt-12-medium"
             :style="`width: ${getDaysInMonth(m) * PPD}px`"
           >
             <span v-if="!loading">{{ dateLongCompact(m) }}</span>
@@ -121,7 +126,7 @@ export default {
 
   data() {
     return {
-      PPD: 6, // Pixels per day
+      PPD: 4, // Pixels per day
       minPPD: 4,
       lineWidth: '0.25rem',
       endPadding: 75, // Padding in pixels before/after the first/last months
@@ -522,9 +527,7 @@ export default {
 
 .months {
   display: inline-flex;
-  margin-bottom: 0.5rem;
   margin-left: var(--end-padding);
-  font-weight: 500;
 }
 
 .month {
@@ -588,7 +591,6 @@ export default {
   display: inline-block;
   height: 1.5rem;
   color: var(--color-active);
-  font-weight: 500;
 
   &::after {
     position: absolute;
diff --git a/src/components/panes/TimelinePane.vue b/src/components/panes/TimelinePane.vue
index 630cc7a14..991a54624 100644
--- a/src/components/panes/TimelinePane.vue
+++ b/src/components/panes/TimelinePane.vue
@@ -57,6 +57,7 @@ export default {
 
   ::v-deep .pane__header {
     padding: 1.5rem;
+    padding-bottom: 0;
   }
 
   ::v-deep .pane__body {

From 16bc05b2f9cd54057d701a7d97400598c20e28e6 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Fri, 1 Sep 2023 13:29:52 +0200
Subject: [PATCH 021/102] Balance titles for objectives and key results

---
 src/components/OkrLinkCard.vue         | 6 +++++-
 src/components/panes/KeyResultPane.vue | 1 +
 src/components/panes/ObjectivePane.vue | 1 +
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/OkrLinkCard.vue b/src/components/OkrLinkCard.vue
index 0a7a1faff..8471786ef 100644
--- a/src/components/OkrLinkCard.vue
+++ b/src/components/OkrLinkCard.vue
@@ -21,7 +21,7 @@
         {{ activeItem.name }}
       </pkt-tag>
 
-      <span class="pkt-txt-14-medium">
+      <span class="okr-link-card__title pkt-txt-14">
         {{ title }}
       </span>
 
@@ -110,6 +110,10 @@ export default {
     color: var(--color-hover);
   }
 
+  &__title {
+    text-wrap: balance;
+  }
+
   &--active {
     color: var(--color-hover);
     background-color: var(--color-blue-5);
diff --git a/src/components/panes/KeyResultPane.vue b/src/components/panes/KeyResultPane.vue
index 69903a1c9..bc1a32a72 100644
--- a/src/components/panes/KeyResultPane.vue
+++ b/src/components/panes/KeyResultPane.vue
@@ -289,6 +289,7 @@ export default {
     display: flex;
     justify-content: space-between;
     margin-top: 1rem;
+    text-wrap: balance;
 
     .pkt-btn {
       margin: -0.75rem 0 0 1rem;
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index b239f356f..6c641a4da 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -184,6 +184,7 @@ export default {
     display: flex;
     justify-content: space-between;
     margin-top: 1rem;
+    text-wrap: balance;
 
     .pkt-btn {
       margin: -0.75rem 0 0 1rem;

From dececdd235f27f407df50ccb686b0173269f3b8f Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Mon, 4 Sep 2023 17:27:03 +0200
Subject: [PATCH 022/102] Fix missing translations

---
 src/components/panes/KeyResultPane.vue | 2 +-
 src/components/panes/ObjectivePane.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/panes/KeyResultPane.vue b/src/components/panes/KeyResultPane.vue
index bc1a32a72..4fe9c02af 100644
--- a/src/components/panes/KeyResultPane.vue
+++ b/src/components/panes/KeyResultPane.vue
@@ -1,7 +1,7 @@
 <template>
   <pane-wrapper
     ref="pane"
-    title="Nøkkelresultat"
+    :title="$t('general.keyResult')"
     class="key-result-pane"
     closable
     @close="
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index 6c641a4da..9a7af78b7 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -1,7 +1,7 @@
 <template>
   <pane-wrapper
     ref="pane"
-    title="Mål"
+    :title="$t('general.objective')"
     class="objective-pane"
     closable
     @close="$router.push({ name: 'ItemHome' })"

From 8fe0a61aa227e2da37d893db0b2018c4da279887 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Mon, 4 Sep 2023 17:32:22 +0200
Subject: [PATCH 023/102] Lower minimum PPD value for the timeline view

---
 src/components/GanttChart.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/GanttChart.vue b/src/components/GanttChart.vue
index bfc6ba0f7..7e9f6e6e1 100644
--- a/src/components/GanttChart.vue
+++ b/src/components/GanttChart.vue
@@ -127,7 +127,7 @@ export default {
   data() {
     return {
       PPD: 4, // Pixels per day
-      minPPD: 4,
+      minPPD: 3,
       lineWidth: '0.25rem',
       endPadding: 75, // Padding in pixels before/after the first/last months
       now: new Date(),

From bb2fa30aebd5d94bb7e35d2011e264109108da84 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Mon, 4 Sep 2023 17:33:59 +0200
Subject: [PATCH 024/102] Remove unused class name

---
 src/components/OkrLinkCard.vue | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/OkrLinkCard.vue b/src/components/OkrLinkCard.vue
index 8471786ef..e89282407 100644
--- a/src/components/OkrLinkCard.vue
+++ b/src/components/OkrLinkCard.vue
@@ -11,13 +11,7 @@
       :href="href"
       @click="activate($event, navigate)"
     >
-      <pkt-tag
-        v-if="!compact"
-        class="okr-link-card__owner-tag"
-        text-style="normal-text"
-        skin="yellow"
-        size="small"
-      >
+      <pkt-tag v-if="!compact" text-style="normal-text" skin="yellow" size="small">
         {{ activeItem.name }}
       </pkt-tag>
 

From 34c867cb8d498f838656ce77c7d4c518f76e266a Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Mon, 4 Sep 2023 16:00:06 +0200
Subject: [PATCH 025/102] Add event bus for pane transition events

---
 src/components/layout/PaneLayout.vue | 15 ++++++++++++++-
 src/components/layout/paneEvents.js  |  5 +++++
 2 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 src/components/layout/paneEvents.js

diff --git a/src/components/layout/PaneLayout.vue b/src/components/layout/PaneLayout.vue
index aaf4b4e06..0d23919f9 100644
--- a/src/components/layout/PaneLayout.vue
+++ b/src/components/layout/PaneLayout.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="pane-layout">
     <template v-for="(pane, i) in $slots.default">
-      <transition :key="`pane${i}`" name="slide-fade">
+      <transition
+        :key="`pane${i}`"
+        name="slide-fade"
+        @enter="onTransitionEvent('pane-enter', $event)"
+        @leave="onTransitionEvent('pane-leave', $event)"
+      >
         <v-nodes v-if="pane.data" :vnodes="pane" />
       </transition>
     </template>
@@ -9,6 +14,8 @@
 </template>
 
 <script>
+import paneEvents from './paneEvents';
+
 export default {
   name: 'PaneLayout',
 
@@ -18,6 +25,12 @@ export default {
       render: (h, ctx) => ctx.props.vnodes,
     },
   },
+
+  methods: {
+    onTransitionEvent(name, e) {
+      paneEvents.$emit(name, e);
+    },
+  },
 };
 </script>
 
diff --git a/src/components/layout/paneEvents.js b/src/components/layout/paneEvents.js
new file mode 100644
index 000000000..dbdea75ac
--- /dev/null
+++ b/src/components/layout/paneEvents.js
@@ -0,0 +1,5 @@
+import Vue from 'vue';
+
+const paneEvents = new Vue();
+
+export default paneEvents;

From 370ad4fe98ffa1befc50b07d9a3d9d4a9a4afe75 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Mon, 4 Sep 2023 17:18:27 +0200
Subject: [PATCH 026/102] Scroll to active objective after pane is opened

---
 src/components/GanttChart.vue | 50 +++++++++++++++++++++++------------
 1 file changed, 33 insertions(+), 17 deletions(-)

diff --git a/src/components/GanttChart.vue b/src/components/GanttChart.vue
index 7e9f6e6e1..b93a8fd61 100644
--- a/src/components/GanttChart.vue
+++ b/src/components/GanttChart.vue
@@ -76,8 +76,9 @@
               (activeObjective && activeObjective.id === o.objective.id) ||
               workbenchObjectives.map((o) => o.id).includes(o.objective.id)
             "
+            :data-id="o.objective.id"
             :before-navigate="beforeSelectObjective(o.objective)"
-            :after-navigate="afterSelectObjective"
+            @hook:mounted="onObjectiveMounted(o.objective)"
           />
         </div>
       </template>
@@ -100,6 +101,7 @@ import {
   startOfMonth,
 } from 'date-fns';
 import { dateLongCompact } from '@/util';
+import paneEvents from '@/components/layout/paneEvents';
 
 export default {
   name: 'GanttChart',
@@ -267,6 +269,18 @@ export default {
         }
       },
     },
+
+    activeObjective: {
+      handler: 'scrollToObjective',
+    },
+  },
+
+  mounted() {
+    paneEvents.$on('pane-enter', () => {
+      if (this.activeObjective) {
+        this.scrollToObjective(this.activeObjective);
+      }
+    });
   },
 
   methods: {
@@ -449,25 +463,27 @@ export default {
       };
     },
 
-    afterSelectObjective(event) {
-      const target = event.currentTarget;
-      if (!this.activeObjective) {
-        // Hack to ensure that the selected objective is scrolled into view
-        // when the pane transition first occurs. This should be solved by using
-        // transition hooks or by making the timeline canvas responsive to
-        // resizing (i.e. keeping current scroll position).
-        setTimeout(() => this.scrollTo(target), 50);
-      } else {
-        this.$nextTick(() => this.scrollTo(target));
+    onObjectiveMounted(objective) {
+      // Scroll to active objective when first mounted in the timeline.
+      if (objective.id === this.activeObjective?.id) {
+        this.scrollToObjective(objective);
       }
     },
 
-    scrollTo(target) {
-      target.scrollIntoView({
-        block: 'center',
-        inline: 'center',
-        behavior: 'smooth',
-      });
+    scrollToObjective(objective) {
+      if (!objective) {
+        return;
+      }
+
+      const objectiveElQuery = document.querySelectorAll(`[data-id="${objective.id}"]`);
+
+      if (objectiveElQuery.length) {
+        objectiveElQuery[0].scrollIntoView({
+          block: 'center',
+          inline: 'center',
+          behavior: 'smooth',
+        });
+      }
     },
 
     async periodObjectivesToWorkbench() {

From 4607646da51fe64fcbc850cf079ac1ee01bf4dd5 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Tue, 5 Sep 2023 12:16:04 +0200
Subject: [PATCH 027/102] Scroll to objective when added to workbench

---
 src/components/GanttChart.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/GanttChart.vue b/src/components/GanttChart.vue
index b93a8fd61..a0f177bb9 100644
--- a/src/components/GanttChart.vue
+++ b/src/components/GanttChart.vue
@@ -442,6 +442,7 @@ export default {
 
           if (!this.workbenchObjectives.find((o) => o.id === objective.id)) {
             await this.addWorkbenchObjective(objective.id);
+            this.scrollToObjective(objective);
 
             if (this.activeObjective && objective.id !== this.activeObjective.id) {
               await this.$router.replace({

From dc4ca39834814452c1eaeaae6864a3d4449d9677 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Wed, 6 Sep 2023 13:56:56 +0200
Subject: [PATCH 028/102] Remove superfluous tooltip

---
 src/components/panes/TimelinePane.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/panes/TimelinePane.vue b/src/components/panes/TimelinePane.vue
index 991a54624..15d6bcfb3 100644
--- a/src/components/panes/TimelinePane.vue
+++ b/src/components/panes/TimelinePane.vue
@@ -3,7 +3,6 @@
     <template #actions>
       <pkt-button
         v-if="hasEditRights"
-        v-tooltip="$t('btn.createObjective')"
         :text="$t('btn.createObjective')"
         skin="primary"
         size="small"

From b5e62f9b3a3ac2aa1d1c3a342ded5ee2d348bd45 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Wed, 6 Sep 2023 16:28:04 +0200
Subject: [PATCH 029/102] Fix translation typo

---
 src/locale/locales/nb-NO.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/locale/locales/nb-NO.json b/src/locale/locales/nb-NO.json
index 2e22a2bdf..7bd69e3c4 100644
--- a/src/locale/locales/nb-NO.json
+++ b/src/locale/locales/nb-NO.json
@@ -381,7 +381,7 @@
     "edit": "Rediger nøkkelresultat"
   },
   "objective": {
-    "period": "Arbeisdperiode",
+    "period": "Arbeidsperiode",
     "progressionTitle": "Prosentvis fremdrift for målet:",
     "weight": "Vekt",
     "change": "Endre mål",

From 6778b72dac39797bc3c9c6bc9a3e6a633fd1841e Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Thu, 7 Sep 2023 12:38:19 +0200
Subject: [PATCH 030/102] Respect objective period length for cards in the
 timeline

---
 src/components/GanttChart.vue  | 36 ++++++++++++++++++++++++++++++
 src/components/OkrLinkCard.vue | 40 ++++++++++++++++++++++++----------
 src/components/ProgressBar.vue |  6 ++++-
 3 files changed, 69 insertions(+), 13 deletions(-)

diff --git a/src/components/GanttChart.vue b/src/components/GanttChart.vue
index a0f177bb9..a558b32f4 100644
--- a/src/components/GanttChart.vue
+++ b/src/components/GanttChart.vue
@@ -645,8 +645,44 @@ export default {
 }
 
 .okr-link-card {
+  --card-bg-color: var(--color-white);
+
   position: relative;
   z-index: 1;
+  height: 9.5rem;
+  overflow: hidden;
+
+  ::v-deep &__inner {
+    justify-content: space-between;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 1;
+      width: 1rem;
+      height: 100%;
+      background: linear-gradient(
+        90deg,
+        transparent 0%,
+        var(--card-bg-color) 75%,
+        var(--card-bg-color) 100%
+      );
+      content: '';
+    }
+  }
+
+  ::v-deep &__title {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+  }
+
+  &--active {
+    --card-bg-color: var(--color-blue-5);
+  }
 }
 
 @keyframes loading {
diff --git a/src/components/OkrLinkCard.vue b/src/components/OkrLinkCard.vue
index e89282407..bd99988b2 100644
--- a/src/components/OkrLinkCard.vue
+++ b/src/components/OkrLinkCard.vue
@@ -11,15 +11,23 @@
       :href="href"
       @click="activate($event, navigate)"
     >
-      <pkt-tag v-if="!compact" text-style="normal-text" skin="yellow" size="small">
-        {{ activeItem.name }}
-      </pkt-tag>
+      <div class="okr-link-card__inner">
+        <pkt-tag
+          v-if="!compact"
+          text-style="normal-text"
+          skin="yellow"
+          size="small"
+          class="okr-link-card__owner"
+        >
+          {{ activeItem.name }}
+        </pkt-tag>
 
-      <span class="okr-link-card__title pkt-txt-14">
-        {{ title }}
-      </span>
+        <span class="okr-link-card__title pkt-txt-14">
+          {{ title }}
+        </span>
 
-      <progress-bar :progression="progression" :compact="compact" />
+        <progress-bar :progression="progression" :compact="compact" />
+      </div>
     </a>
   </router-link>
 </template>
@@ -89,11 +97,7 @@ export default {
 
 <style lang="scss" scoped>
 .okr-link-card {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  min-height: 6.5rem;
-  padding: 1rem;
+  display: block;
   color: var(--color-text);
   text-decoration: none;
   background-color: var(--color-white);
@@ -104,6 +108,18 @@ export default {
     color: var(--color-hover);
   }
 
+  &__inner {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    height: 100%;
+    padding: 1rem;
+  }
+
+  &__owner {
+    white-space: nowrap;
+  }
+
   &__title {
     text-wrap: balance;
   }
diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue
index dd8c729c6..26ae19d8b 100644
--- a/src/components/ProgressBar.vue
+++ b/src/components/ProgressBar.vue
@@ -85,9 +85,13 @@ export default {
 .progress-bar {
   width: 100%;
 
+  h4 + &__bar {
+    margin-top: 0.5rem;
+  }
+
   &__bar {
     position: relative;
-    margin: 0.5rem 0 1rem 0;
+    margin-bottom: 1rem;
     background-color: var(--color-grayscale-10);
 
     > span {

From 2246dc5511239d26e029e3daf3e3904d0fe76091 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Mon, 25 Sep 2023 14:21:44 +0200
Subject: [PATCH 031/102] Do not scroll to period on mount when an objective is
 active

---
 src/components/GanttChart.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/GanttChart.vue b/src/components/GanttChart.vue
index 8fac5e003..3c880b793 100644
--- a/src/components/GanttChart.vue
+++ b/src/components/GanttChart.vue
@@ -262,7 +262,7 @@ export default {
 
     loading: {
       async handler() {
-        if (!this.loading) {
+        if (!this.loading && !this.activeObjective) {
           this.$nextTick(() => {
             const ref = this.$refs.period || this.$refs.today;
             ref.scrollIntoView({ inline: 'center', behavior: 'instant' });

From 6a0758bc717a5fd9058836dd22e882143ecd1764 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Mon, 25 Sep 2023 14:30:21 +0200
Subject: [PATCH 032/102] Load all components synchronously

---
 src/components/OkrLinkCard.vue         |  3 ++-
 src/components/panes/KeyResultPane.vue | 21 ++++++++++++---------
 src/components/panes/ObjectivePane.vue |  9 ++++++---
 src/components/panes/WorkbenchPane.vue |  6 ++++--
 4 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/components/OkrLinkCard.vue b/src/components/OkrLinkCard.vue
index bd99988b2..86b5cdf45 100644
--- a/src/components/OkrLinkCard.vue
+++ b/src/components/OkrLinkCard.vue
@@ -35,12 +35,13 @@
 <script>
 import { mapState } from 'vuex';
 import { PktTag } from '@oslokommune/punkt-vue2';
+import ProgressBar from '@/components/ProgressBar.vue';
 
 export default {
   name: 'OkrLinkCard',
 
   components: {
-    ProgressBar: () => import('@/components/ProgressBar.vue'),
+    ProgressBar,
     PktTag,
   },
 
diff --git a/src/components/panes/KeyResultPane.vue b/src/components/panes/KeyResultPane.vue
index 4fe9c02af..69e37d672 100644
--- a/src/components/panes/KeyResultPane.vue
+++ b/src/components/panes/KeyResultPane.vue
@@ -103,28 +103,31 @@ import Progress from '@/db/Progress';
 import LineChart from '@/util/LineChart';
 import { getRandomInt } from '@/util';
 import { getKeyResultProgressDetails } from '@/util/keyResultProgress';
-import { PktButton } from '@oslokommune/punkt-vue2';
+import { PktAlert, PktButton } from '@oslokommune/punkt-vue2';
+import PaneWrapper from '@/components/panes/PaneWrapper.vue';
 import WidgetWrapper from '@/components/widgets/WidgetWrapper.vue';
 import WidgetProgressHistory from '@/components/widgets/WidgetProgressHistory/WidgetProgressHistory.vue';
 // import WidgetKeyResultNotes from '@/components/widgets/WidgetKeyResultNotes.vue';
 import WidgetKeyResultDetails from '@/components/widgets/WidgetKeyResultDetails.vue';
-import PaneWrapper from '@/components/panes/PaneWrapper.vue';
+import ArchivedRestore from '@/components/ArchivedRestore.vue';
+import HTMLOutput from '@/components/HTMLOutput.vue';
+import ProgressModal from '@/components/modals/ProgressModal.vue';
 import ProgressBar from '@/components/ProgressBar.vue';
 
 export default {
   name: 'KeyResultPane',
 
   components: {
-    PktAlert: () => import('@oslokommune/punkt-vue2').then(({ PktAlert }) => PktAlert),
-    ArchivedRestore: () => import('@/components/ArchivedRestore.vue'),
-    ProgressModal: () => import('@/components/modals/ProgressModal.vue'),
-    HTMLOutput: () => import('@/components/HTMLOutput.vue'),
+    PktAlert,
+    PktButton,
+    PaneWrapper,
     Widget: WidgetWrapper,
     WidgetProgressHistory,
-    WidgetKeyResultDetails,
     // WidgetKeyResultNotes,
-    PaneWrapper,
-    PktButton,
+    WidgetKeyResultDetails,
+    ArchivedRestore,
+    HTMLOutput,
+    ProgressModal,
     ProgressBar,
   },
 
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index 9a7af78b7..1026eda94 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -97,15 +97,18 @@ import PaneWrapper from '@/components/panes/PaneWrapper.vue';
 import LoadingSmall from '@/components/LoadingSmall.vue';
 import WidgetObjectiveDetails from '@/components/widgets/WidgetObjectiveDetails.vue';
 import WidgetWeights from '@/components/widgets/WidgetWeights.vue';
+import EmptyState from '@/components/EmptyState.vue';
+import OkrLinkCard from '@/components/OkrLinkCard.vue';
+import HTMLOutput from '@/components/HTMLOutput.vue';
 
 export default {
   name: 'ObjectivePane',
 
   components: {
     PaneWrapper,
-    EmptyState: () => import('@/components/EmptyState.vue'),
-    OkrLinkCard: () => import('@/components/OkrLinkCard.vue'),
-    HTMLOutput: () => import('@/components/HTMLOutput.vue'),
+    EmptyState,
+    OkrLinkCard,
+    HTMLOutput,
     LoadingSmall,
     PktButton,
     PktTag,
diff --git a/src/components/panes/WorkbenchPane.vue b/src/components/panes/WorkbenchPane.vue
index 1d410b8c6..0e57847ef 100644
--- a/src/components/panes/WorkbenchPane.vue
+++ b/src/components/panes/WorkbenchPane.vue
@@ -39,14 +39,16 @@
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { PktButton } from '@oslokommune/punkt-vue2';
 import PaneWrapper from '@/components/panes/PaneWrapper.vue';
+import OkrLinkCard from '@/components/OkrLinkCard.vue';
+import ProgressBar from '@/components/ProgressBar.vue';
 
 export default {
   name: 'WorkbenchPane',
 
   components: {
     PaneWrapper,
-    OkrLinkCard: () => import('@/components/OkrLinkCard.vue'),
-    ProgressBar: () => import('@/components/ProgressBar.vue'),
+    OkrLinkCard,
+    ProgressBar,
     PktButton,
   },
 

From fae89b9aa0c8a7b15081ac1a725a2857b88463e3 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Tue, 26 Sep 2023 11:51:12 +0200
Subject: [PATCH 033/102] Sync OKR and measurement header title style

---
 src/views/Item/ItemMeasurements.vue | 34 +++++++++++++++++------------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/views/Item/ItemMeasurements.vue b/src/views/Item/ItemMeasurements.vue
index 944cc34c0..595b9f69e 100644
--- a/src/views/Item/ItemMeasurements.vue
+++ b/src/views/Item/ItemMeasurements.vue
@@ -1,17 +1,18 @@
 <template>
   <div class="measurements-page">
     <div v-if="allKpis.length" class="measurements-page__header">
-      <h1 class="pkt-txt-24-medium">{{ $t('kpi.heading') }}</h1>
+      <h1 class="pkt-txt-18-medium">{{ $t('kpi.heading') }}</h1>
+    </div>
 
-      <div v-if="hasEditRights" data-mode="dark">
-        <pkt-button
-          :text="$t('admin.measurement.new')"
-          skin="primary"
-          variant="icon-left"
-          icon-name="plus-sign"
-          @onClick="openKpiDrawer(false)"
-        />
-      </div>
+    <div v-if="hasEditRights" class="measurements-page__actions">
+      <pkt-button
+        :text="$t('admin.measurement.new')"
+        skin="primary"
+        size="small"
+        variant="icon-left"
+        icon-name="plus-sign"
+        @onClick="openKpiDrawer(false)"
+      />
     </div>
 
     <page-layout
@@ -201,18 +202,23 @@ export default {
 
 <style lang="scss" scoped>
 .measurements-page {
+  position: relative;
   display: flex;
   flex: 1 0 auto;
   flex-direction: column;
 
   &__header {
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-    justify-content: space-between;
     padding: 1.5rem;
   }
 
+  &__actions {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    display: flex;
+    gap: 0.5rem;
+  }
+
   ::v-deep .page__container {
     padding-top: 0.5rem;
   }

From 099e26e4e63785bfa412b2422f89bbb1bc2fb80d Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Tue, 26 Sep 2023 11:53:11 +0200
Subject: [PATCH 034/102] Add breadcrumbs to objective and key result panes

---
 package-lock.json                      | 40 ++++++++++-----------
 package.json                           |  4 +--
 src/components/panes/KeyResultPane.vue | 47 +++++++++++++++++-------
 src/components/panes/ObjectivePane.vue | 49 +++++++++++++++++---------
 src/components/panes/PaneWrapper.vue   |  4 +--
 src/styles/main.scss                   |  4 +++
 6 files changed, 95 insertions(+), 53 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c788ce21f..183c49e0f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "okr-tracker",
       "version": "3.9.0",
       "dependencies": {
-        "@oslokommune/punkt-vue2": "^5.1.21",
+        "@oslokommune/punkt-vue2": "^8.0.6",
         "d3": "^7.6.1",
         "d3-array": "^3.1.1",
         "d3-axis": "^3.0.0",
@@ -51,7 +51,7 @@
       "devDependencies": {
         "@babel/eslint-parser": "7.16.5",
         "@babel/preset-env": "^7.16.5",
-        "@oslokommune/punkt-css": "^5.1.19",
+        "@oslokommune/punkt-css": "^8.0.5",
         "@vitejs/plugin-vue2": "^2.2.0",
         "env-cmd": "^10.1.0",
         "esbuild": "^0.15.14",
@@ -3410,18 +3410,18 @@
       }
     },
     "node_modules/@oslokommune/punkt-assets": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@oslokommune/punkt-assets/-/punkt-assets-3.1.2.tgz",
-      "integrity": "sha512-60DaqN9sGev0f68iJk4PHc8H4Meys+6Rv8OOybga6qGXvEPGIj0pRy5Qn0yw00GB7gR7QTJcdrMB0yIb7XQg9A==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@oslokommune/punkt-assets/-/punkt-assets-8.0.0.tgz",
+      "integrity": "sha512-pUlV6mjqsOxylZ3OdzsbalKZSn59uRR5Xi8YMKbf+a5R6wLTcGBUBmPfjJ3PwjTedGdzfXX6O5E58rbAPpYbOA==",
       "peer": true,
       "engines": {
         "node": ">=16.0.0"
       }
     },
     "node_modules/@oslokommune/punkt-css": {
-      "version": "5.1.19",
-      "resolved": "https://registry.npmjs.org/@oslokommune/punkt-css/-/punkt-css-5.1.19.tgz",
-      "integrity": "sha512-WZcGox2H32uF/GRggFuIyhVEW/jRe44xT7bZkOrMQuKeNe9MX++WDJG16V6aF9wkdcQXUnHDKy2AOGPV3aizBQ==",
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/@oslokommune/punkt-css/-/punkt-css-8.0.5.tgz",
+      "integrity": "sha512-hOKX62tW06R7CbsLRnD+Rp32mmzH1mjJtqic0UhT2AJ4Bkhy1CDXc2P69+YxvViZkS+zA7PAelnl4R8yrkm0vw==",
       "engines": {
         "node": ">=16.0.0"
       },
@@ -3430,9 +3430,9 @@
       }
     },
     "node_modules/@oslokommune/punkt-vue2": {
-      "version": "5.1.21",
-      "resolved": "https://registry.npmjs.org/@oslokommune/punkt-vue2/-/punkt-vue2-5.1.21.tgz",
-      "integrity": "sha512-BMjCokAmv4x83p7xjvLZprHxOjGqNp3VnQ+fcqF51ft0IwRs5GPzlBs9CjvTKry+/iFzWKoZe4k/jDo2dgMLcg==",
+      "version": "8.0.6",
+      "resolved": "https://registry.npmjs.org/@oslokommune/punkt-vue2/-/punkt-vue2-8.0.6.tgz",
+      "integrity": "sha512-7RutHW651yZIlXmicA48hbl6g6AUBYRn50QZF3oPuiCnbsnhyJik3B3/rRrafahEFFvV1jVH5HMXXb9KRo3C2w==",
       "engines": {
         "node": ">=16.0.0"
       },
@@ -20675,21 +20675,21 @@
       }
     },
     "@oslokommune/punkt-assets": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@oslokommune/punkt-assets/-/punkt-assets-3.1.2.tgz",
-      "integrity": "sha512-60DaqN9sGev0f68iJk4PHc8H4Meys+6Rv8OOybga6qGXvEPGIj0pRy5Qn0yw00GB7gR7QTJcdrMB0yIb7XQg9A==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@oslokommune/punkt-assets/-/punkt-assets-8.0.0.tgz",
+      "integrity": "sha512-pUlV6mjqsOxylZ3OdzsbalKZSn59uRR5Xi8YMKbf+a5R6wLTcGBUBmPfjJ3PwjTedGdzfXX6O5E58rbAPpYbOA==",
       "peer": true
     },
     "@oslokommune/punkt-css": {
-      "version": "5.1.19",
-      "resolved": "https://registry.npmjs.org/@oslokommune/punkt-css/-/punkt-css-5.1.19.tgz",
-      "integrity": "sha512-WZcGox2H32uF/GRggFuIyhVEW/jRe44xT7bZkOrMQuKeNe9MX++WDJG16V6aF9wkdcQXUnHDKy2AOGPV3aizBQ==",
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/@oslokommune/punkt-css/-/punkt-css-8.0.5.tgz",
+      "integrity": "sha512-hOKX62tW06R7CbsLRnD+Rp32mmzH1mjJtqic0UhT2AJ4Bkhy1CDXc2P69+YxvViZkS+zA7PAelnl4R8yrkm0vw==",
       "requires": {}
     },
     "@oslokommune/punkt-vue2": {
-      "version": "5.1.21",
-      "resolved": "https://registry.npmjs.org/@oslokommune/punkt-vue2/-/punkt-vue2-5.1.21.tgz",
-      "integrity": "sha512-BMjCokAmv4x83p7xjvLZprHxOjGqNp3VnQ+fcqF51ft0IwRs5GPzlBs9CjvTKry+/iFzWKoZe4k/jDo2dgMLcg==",
+      "version": "8.0.6",
+      "resolved": "https://registry.npmjs.org/@oslokommune/punkt-vue2/-/punkt-vue2-8.0.6.tgz",
+      "integrity": "sha512-7RutHW651yZIlXmicA48hbl6g6AUBYRn50QZF3oPuiCnbsnhyJik3B3/rRrafahEFFvV1jVH5HMXXb9KRo3C2w==",
       "requires": {}
     },
     "@popperjs/core": {
diff --git a/package.json b/package.json
index f4884ecf9..3f0ad17a1 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "node": "18"
   },
   "dependencies": {
-    "@oslokommune/punkt-vue2": "^5.1.21",
+    "@oslokommune/punkt-vue2": "^8.0.6",
     "d3": "^7.6.1",
     "d3-array": "^3.1.1",
     "d3-axis": "^3.0.0",
@@ -66,7 +66,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "7.16.5",
     "@babel/preset-env": "^7.16.5",
-    "@oslokommune/punkt-css": "^5.1.19",
+    "@oslokommune/punkt-css": "^8.0.5",
     "@vitejs/plugin-vue2": "^2.2.0",
     "env-cmd": "^10.1.0",
     "esbuild": "^0.15.14",
diff --git a/src/components/panes/KeyResultPane.vue b/src/components/panes/KeyResultPane.vue
index 69e37d672..d2baed15e 100644
--- a/src/components/panes/KeyResultPane.vue
+++ b/src/components/panes/KeyResultPane.vue
@@ -1,22 +1,24 @@
 <template>
   <pane-wrapper
     ref="pane"
-    :title="$t('general.keyResult')"
     class="key-result-pane"
     closable
     @close="
       $router.push({ name: 'ObjectiveHome', params: { objectiveId: activeObjective.id } })
     "
   >
-    <archived-restore
-      v-if="activeKeyResult.archived"
-      class="mt-size-16"
-      :restore="restore"
-      :object-type="$t('archived.keyResult')"
+    <pkt-breadcrumbs
+      class="pkt-hide-laptop-up"
+      navigation-type="router"
+      :breadcrumbs="breadcrumbs"
     />
 
+    <pkt-tag text-style="normal-text" skin="grey" class="mt-size-8">
+      {{ $t('general.keyResult') }}
+    </pkt-tag>
+
     <div class="key-result-pane__title">
-      <h2 class="pkt-txt-16-medium">{{ activeKeyResult.name }}</h2>
+      <h2 class="pkt-txt-18-medium">{{ activeKeyResult.name }}</h2>
       <pkt-button
         v-if="hasEditRights"
         v-tooltip="$t('btn.updateKeyResult')"
@@ -103,13 +105,12 @@ import Progress from '@/db/Progress';
 import LineChart from '@/util/LineChart';
 import { getRandomInt } from '@/util';
 import { getKeyResultProgressDetails } from '@/util/keyResultProgress';
-import { PktAlert, PktButton } from '@oslokommune/punkt-vue2';
+import { PktAlert, PktBreadcrumbs, PktButton, PktTag } from '@oslokommune/punkt-vue2';
 import PaneWrapper from '@/components/panes/PaneWrapper.vue';
 import WidgetWrapper from '@/components/widgets/WidgetWrapper.vue';
 import WidgetProgressHistory from '@/components/widgets/WidgetProgressHistory/WidgetProgressHistory.vue';
 // import WidgetKeyResultNotes from '@/components/widgets/WidgetKeyResultNotes.vue';
 import WidgetKeyResultDetails from '@/components/widgets/WidgetKeyResultDetails.vue';
-import ArchivedRestore from '@/components/ArchivedRestore.vue';
 import HTMLOutput from '@/components/HTMLOutput.vue';
 import ProgressModal from '@/components/modals/ProgressModal.vue';
 import ProgressBar from '@/components/ProgressBar.vue';
@@ -120,12 +121,13 @@ export default {
   components: {
     PktAlert,
     PktButton,
+    PktBreadcrumbs,
+    PktTag,
     PaneWrapper,
     Widget: WidgetWrapper,
     WidgetProgressHistory,
     // WidgetKeyResultNotes,
     WidgetKeyResultDetails,
-    ArchivedRestore,
     HTMLOutput,
     ProgressModal,
     ProgressBar,
@@ -140,7 +142,7 @@ export default {
   }),
 
   computed: {
-    ...mapState(['activePeriod']),
+    ...mapState(['activeItem', 'activePeriod']),
     ...mapState('okrs', ['activeObjective', 'activeKeyResult']),
     ...mapGetters(['hasEditRights']),
 
@@ -169,6 +171,20 @@ export default {
         { unit: this.activeKeyResult.unit }
       )}`;
     },
+
+    breadcrumbs() {
+      return [
+        { text: this.activeItem.name, href: { name: 'ItemHome' } },
+        {
+          text: this.activeObjective.name,
+          href: {
+            name: 'ObjectiveHome',
+            params: { objectiveId: this.activeObjective.id },
+          },
+        },
+        { text: this.activeKeyResult.name },
+      ];
+    },
   },
 
   watch: {
@@ -291,7 +307,6 @@ export default {
   &__title {
     display: flex;
     justify-content: space-between;
-    margin-top: 1rem;
     text-wrap: balance;
 
     .pkt-btn {
@@ -330,4 +345,12 @@ export default {
     }
   }
 }
+
+::v-deep .pkt-breadcrumbs--mobile {
+  width: 100%;
+
+  .pkt-breadcrumbs__text {
+    white-space: nowrap;
+  }
+}
 </style>
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index 1026eda94..04d1029ef 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -1,13 +1,22 @@
 <template>
   <pane-wrapper
     ref="pane"
-    :title="$t('general.objective')"
     class="objective-pane"
     closable
     @close="$router.push({ name: 'ItemHome' })"
   >
+    <pkt-breadcrumbs
+      class="pkt-hide-laptop-up"
+      navigation-type="router"
+      :breadcrumbs="breadcrumbs"
+    />
+
+    <pkt-tag text-style="normal-text" skin="grey" class="mt-size-8">
+      {{ $t('general.objective') }}
+    </pkt-tag>
+
     <div class="objective-pane__title">
-      <h2 class="pkt-txt-16-medium">{{ activeObjective.name }}</h2>
+      <h2 class="pkt-txt-18-medium">{{ activeObjective.name }}</h2>
       <pkt-button
         v-if="hasEditRights"
         v-tooltip="$t('btn.updateObjective')"
@@ -31,11 +40,9 @@
       :progression="activeObjective.progression"
     />
 
-    <div v-if="period" class="objective-pane__period">
-      <span class="pkt-txt-16-light">{{ $t('objective.period') }}</span>
-      <pkt-tag text-style="normal-text" skin="beige" size="small">
-        {{ periodDates(period) }}
-      </pkt-tag>
+    <div v-if="period" class="mt-size-16">
+      <div class="pkt-txt-14-medium">{{ $t('objective.period') }}</div>
+      <div class="pkt-txt-14">{{ periodDates(period) }}</div>
     </div>
 
     <div class="objective-pane__key-results">
@@ -91,7 +98,7 @@ import { format } from 'd3-format';
 import { mapGetters, mapState } from 'vuex';
 import { dateLong, periodDates } from '@/util';
 import { db } from '@/config/firebaseConfig';
-import { PktButton, PktTag } from '@oslokommune/punkt-vue2';
+import { PktBreadcrumbs, PktButton, PktTag } from '@oslokommune/punkt-vue2';
 import ProgressBar from '@/components/ProgressBar.vue';
 import PaneWrapper from '@/components/panes/PaneWrapper.vue';
 import LoadingSmall from '@/components/LoadingSmall.vue';
@@ -110,6 +117,7 @@ export default {
     OkrLinkCard,
     HTMLOutput,
     LoadingSmall,
+    PktBreadcrumbs,
     PktButton,
     PktTag,
     ProgressBar,
@@ -123,6 +131,7 @@ export default {
   }),
 
   computed: {
+    ...mapState(['activeItem']),
     ...mapState('okrs', ['activeObjective', 'activeKeyResult']),
     ...mapGetters(['hasEditRights']),
 
@@ -143,6 +152,13 @@ export default {
 
       return null;
     },
+
+    breadcrumbs() {
+      return [
+        { text: this.activeItem.name, href: { name: 'ItemHome' } },
+        { text: this.activeObjective.name },
+      ];
+    },
   },
 
   watch: {
@@ -186,7 +202,6 @@ export default {
   &__title {
     display: flex;
     justify-content: space-between;
-    margin-top: 1rem;
     text-wrap: balance;
 
     .pkt-btn {
@@ -194,14 +209,6 @@ export default {
     }
   }
 
-  &__period > span {
-    &:first-child {
-      display: block;
-      margin-bottom: 0.25rem;
-      color: var(--color-grayscale-60);
-    }
-  }
-
   &__progression {
     margin-top: 1rem;
   }
@@ -271,4 +278,12 @@ export default {
     }
   }
 }
+
+::v-deep .pkt-breadcrumbs--mobile {
+  width: 100%;
+
+  .pkt-breadcrumbs__text {
+    white-space: nowrap;
+  }
+}
 </style>
diff --git a/src/components/panes/PaneWrapper.vue b/src/components/panes/PaneWrapper.vue
index 08e8213a2..14e08f6af 100644
--- a/src/components/panes/PaneWrapper.vue
+++ b/src/components/panes/PaneWrapper.vue
@@ -14,7 +14,7 @@
     </div>
 
     <div class="pane__inner">
-      <div class="pane__header">
+      <div v-if="title" class="pane__header">
         <h1 class="pkt-txt-18-medium">{{ title }}</h1>
       </div>
 
@@ -38,7 +38,7 @@ export default {
   props: {
     title: {
       type: String,
-      required: true,
+      default: null,
     },
     closable: {
       type: Boolean,
diff --git a/src/styles/main.scss b/src/styles/main.scss
index e52873fba..e4584d949 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,3 +1,7 @@
+@use '@oslokommune/punkt-css/dist/scss/abstracts/variables' with (
+  $font-path: '@oslokommune/punkt-assets/dist'
+);
+
 @use 'reset';
 @use 'widgets';
 @use 'nav';

From 935d236d8205276157c48266999fcd97a484c035 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Tue, 26 Sep 2023 09:00:47 +0200
Subject: [PATCH 035/102] Support drag & drop for key results

---
 CHANGELOG.md                                  |  1 +
 src/components/drawers/EditObjective.vue      |  2 +-
 src/components/panes/ObjectivePane.vue        | 42 ++++++++++++++++++-
 src/components/period/PeriodShortcut.vue      |  2 +-
 .../widgets/WidgetKeyResultDetails.vue        |  2 +-
 .../widgets/WidgetObjectiveDetails.vue        |  2 +-
 src/util/okr.js                               | 27 +++++++++++-
 7 files changed, 70 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d4072b87c..f2655ab51 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ All notable changes to this project will be documented in this file. The format
   now toggles the detail pane rather than adding objectives to a list. To group
   objectives in a list (and see combined progression), the meta key must now be
   pressed while selecting one or more objectives.
+- Key results can now be rearranged by drag and drop.
 
 ### Removed
 
diff --git a/src/components/drawers/EditObjective.vue b/src/components/drawers/EditObjective.vue
index 56854f937..2fa901769 100644
--- a/src/components/drawers/EditObjective.vue
+++ b/src/components/drawers/EditObjective.vue
@@ -112,7 +112,7 @@
 import { mapActions, mapState } from 'vuex';
 import { isEqual } from 'date-fns';
 import { db } from '@/config/firebaseConfig';
-import formattedPeriod from '@/util/okr';
+import { formattedPeriod } from '@/util/okr';
 import Objective from '@/db/Objective';
 import firebase from 'firebase/compat/app';
 import locale from 'flatpickr/dist/l10n/no';
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index 04d1029ef..d9add2fad 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -64,9 +64,30 @@
         {{ $t('general.loading') }}
       </div>
 
+      <draggable
+        v-else-if="hasEditRights && keyResults.length"
+        v-model="orderedKeyResults"
+        animation="200"
+      >
+        <transition-group class="objective-pane__key-results-list">
+          <okr-link-card
+            v-for="keyResult in orderedKeyResults"
+            :key="keyResult.id"
+            :route="{
+              name: 'KeyResultHome',
+              params: { objectiveId: activeObjective.id, keyResultId: keyResult.id },
+            }"
+            :title="keyResult.name"
+            :progression="keyResult.progression"
+            :active="activeKeyResult && activeKeyResult.id === keyResult.id"
+            compact
+          />
+        </transition-group>
+      </draggable>
+
       <div v-else-if="keyResults.length" class="objective-pane__key-results-list">
         <okr-link-card
-          v-for="keyResult in keyResults"
+          v-for="keyResult in orderedKeyResults"
           :key="keyResult.id"
           :route="{
             name: 'KeyResultHome',
@@ -96,9 +117,12 @@
 <script>
 import { format } from 'd3-format';
 import { mapGetters, mapState } from 'vuex';
+import { PktBreadcrumbs, PktButton, PktTag } from '@oslokommune/punkt-vue2';
+import draggable from 'vuedraggable';
+import { compareKeyResults } from '@/util/okr';
 import { dateLong, periodDates } from '@/util';
 import { db } from '@/config/firebaseConfig';
-import { PktBreadcrumbs, PktButton, PktTag } from '@oslokommune/punkt-vue2';
+import KeyResult from '@/db/KeyResult';
 import ProgressBar from '@/components/ProgressBar.vue';
 import PaneWrapper from '@/components/panes/PaneWrapper.vue';
 import LoadingSmall from '@/components/LoadingSmall.vue';
@@ -112,6 +136,7 @@ export default {
   name: 'ObjectivePane',
 
   components: {
+    draggable,
     PaneWrapper,
     EmptyState,
     OkrLinkCard,
@@ -159,6 +184,19 @@ export default {
         { text: this.activeObjective.name },
       ];
     },
+
+    orderedKeyResults: {
+      get() {
+        return this.keyResults.map((kr) => kr).sort(compareKeyResults);
+      },
+      set(keyResults) {
+        keyResults.forEach((kr, i) => {
+          if (kr.order !== i) {
+            KeyResult.update(kr.id, { order: i });
+          }
+        });
+      },
+    },
   },
 
   watch: {
diff --git a/src/components/period/PeriodShortcut.vue b/src/components/period/PeriodShortcut.vue
index d5bdf4d4d..adb107b31 100644
--- a/src/components/period/PeriodShortcut.vue
+++ b/src/components/period/PeriodShortcut.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import formattedPeriod from '@/util/okr';
+import { formattedPeriod } from '@/util/okr';
 import { PktButton } from '@oslokommune/punkt-vue2';
 
 export default {
diff --git a/src/components/widgets/WidgetKeyResultDetails.vue b/src/components/widgets/WidgetKeyResultDetails.vue
index f2ce12ed6..6a2be4ea0 100644
--- a/src/components/widgets/WidgetKeyResultDetails.vue
+++ b/src/components/widgets/WidgetKeyResultDetails.vue
@@ -113,7 +113,7 @@
 import { mapState } from 'vuex';
 import { db } from '@/config/firebaseConfig';
 import { dateLong } from '@/util';
-import formattedPeriod from '@/util/okr';
+import { formattedPeriod } from '@/util/okr';
 import ProfileModal from '@/components/modals/ProfileModal.vue';
 import Widget from './WidgetWrapper.vue';
 
diff --git a/src/components/widgets/WidgetObjectiveDetails.vue b/src/components/widgets/WidgetObjectiveDetails.vue
index aba16dd8d..c7522b789 100644
--- a/src/components/widgets/WidgetObjectiveDetails.vue
+++ b/src/components/widgets/WidgetObjectiveDetails.vue
@@ -70,7 +70,7 @@
 <script>
 import { mapState } from 'vuex';
 import { dateLong } from '@/util';
-import formattedPeriod from '@/util/okr';
+import { formattedPeriod } from '@/util/okr';
 import ProfileModal from '@/components/modals/ProfileModal.vue';
 import Widget from './WidgetWrapper.vue';
 
diff --git a/src/util/okr.js b/src/util/okr.js
index f0167cf9f..7394d8658 100644
--- a/src/util/okr.js
+++ b/src/util/okr.js
@@ -3,7 +3,7 @@ import { dateShort, periodDates } from '@/util';
 /**
  * Return a nicely formatted period range for `objective`'s period.
  */
-function formattedPeriod(objective) {
+export function formattedPeriod(objective) {
   const { period, startDate, endDate } = objective;
 
   if (startDate && endDate) {
@@ -16,4 +16,27 @@ function formattedPeriod(objective) {
   return null;
 }
 
-export default formattedPeriod;
+/**
+ * Compare two key results for sorting.
+ *
+ * The returned function returns a negative number if `a` should come before
+ * `b`, otherwise it returns a positive number.
+ *
+ * Key results that haven't gotten any order set yet are ordered by their names
+ * instead to retain backwards compatibility.
+ */
+export function compareKeyResults(a, b) {
+  // Sort by order only if both have one.
+  if ('order' in a && 'order' in b) {
+    return a.order - b.order;
+  }
+  // When only one of them has an order, sort that one first.
+  if ('order' in a) {
+    return -1;
+  }
+  if ('order' in b) {
+    return 1;
+  }
+  // Otherwise fall back to ordering by name.
+  return a.name.localeCompare(b.name);
+}

From e3da8b11fef54733d4c6570c31d1e49863a7703e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Thu, 28 Sep 2023 11:12:00 +0200
Subject: [PATCH 036/102] Tweak class placement to fix margin

---
 src/components/panes/ObjectivePane.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index d9add2fad..8a5526175 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -67,9 +67,10 @@
       <draggable
         v-else-if="hasEditRights && keyResults.length"
         v-model="orderedKeyResults"
+        class="objective-pane__key-results-list"
         animation="200"
       >
-        <transition-group class="objective-pane__key-results-list">
+        <transition-group>
           <okr-link-card
             v-for="keyResult in orderedKeyResults"
             :key="keyResult.id"
@@ -272,7 +273,7 @@ export default {
         margin-left: 3rem;
       }
 
-      > .okr-link-card {
+      & .okr-link-card {
         position: relative;
         margin-top: 1rem;
 

From c52f7fda35f5857a84897c365f84b465caf681fe Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Thu, 28 Sep 2023 15:41:06 +0200
Subject: [PATCH 037/102] Add checkboxes for toggling workbench objectives

---
 src/components/GanttChart.vue          | 115 +++++++++++++++++--------
 src/components/OkrLinkCard.vue         |  42 ++++++---
 src/components/panes/WorkbenchPane.vue |   9 +-
 3 files changed, 112 insertions(+), 54 deletions(-)

diff --git a/src/components/GanttChart.vue b/src/components/GanttChart.vue
index 3c880b793..740d75903 100644
--- a/src/components/GanttChart.vue
+++ b/src/components/GanttChart.vue
@@ -72,12 +72,12 @@
             :tabindex="o.tabindex"
             :progression="o.objective.progression"
             :style="objectiveStyle(o)"
-            :active="
-              (activeObjective && activeObjective.id === o.objective.id) ||
-              workbenchObjectives.map((o) => o.id).includes(o.objective.id)
-            "
+            :checkable="workbenchObjectives.length > 0"
+            :checked="workbenchObjectives.map((o) => o.id).includes(o.objective.id)"
+            :active="activeObjective && activeObjective.id === o.objective.id"
             :data-id="o.objective.id"
-            :before-navigate="beforeSelectObjective(o.objective)"
+            :before-navigate="beforeObjectiveNavigate(o.objective)"
+            @toggle="toggleObjective($event, o.objective)"
             @hook:mounted="onObjectiveMounted(o.objective)"
           />
         </div>
@@ -430,41 +430,74 @@ export default {
       window.removeEventListener('mouseup', this.stopDrag);
     },
 
-    beforeSelectObjective(objective) {
+    async selectObjective(objective) {
+      if (!this.workbenchObjectives.length) {
+        if (this.activeObjective && objective.id !== this.activeObjective.id) {
+          // Add currently active objective to workbench if the next objective
+          // is selected for the workbench
+          await this.addWorkbenchObjective(this.activeObjective.id);
+          this.$router.push({ name: 'ItemHome' });
+        }
+      }
+
+      // Add selected objective to workbench
+      await this.addWorkbenchObjective(objective.id);
+      this.scrollToObjective(objective);
+    },
+
+    async unselectObjective(objective) {
+      // Remove objective from workbench
+      await this.removeWorkbenchObjective(objective.id);
+
+      // Set next workbench objective as active if available
+      if (this.activeObjective && this.activeObjective.id === objective.id) {
+        if (this.workbenchObjectives.length) {
+          this.$router.replace({
+            name: 'ObjectiveHome',
+            params: { objectiveId: this.workbenchObjectives[0].id },
+          });
+        } else {
+          this.$router.push({ name: 'ItemHome' });
+        }
+      }
+    },
+
+    beforeObjectiveNavigate(objective) {
       return async (event) => {
-        if (event.metaKey) {
-          event.preventDefault();
+        const modifierKey = event.metaKey || event.altKey;
 
-          if (this.activeObjective && objective.id !== this.activeObjective.id) {
-            // Add currently active objective to workbench if the next objective
-            // is selected with the modifier key.
-            await this.addWorkbenchObjective(this.activeObjective.id);
-          }
+        if (!modifierKey && !this.workbenchObjectives.length) {
+          return;
+        }
 
-          if (!this.workbenchObjectives.find((o) => o.id === objective.id)) {
-            await this.addWorkbenchObjective(objective.id);
-            this.scrollToObjective(objective);
-
-            if (this.activeObjective && objective.id !== this.activeObjective.id) {
-              await this.$router.replace({
-                name: 'ObjectiveHome',
-                params: { objectiveId: objective.id },
-              });
-            }
-          } else {
-            await this.removeWorkbenchObjective(objective.id);
+        // Prevent default link navigation when selecting/unselecting
+        // objectives for the workbench
+        event.preventDefault();
+
+        if (!this.workbenchObjectives.find((o) => o.id === objective.id)) {
+          await this.selectObjective(objective);
+
+          // Replace any active objective with the one newly selected
+          if (this.activeObjective && objective.id !== this.activeObjective.id) {
+            await this.$router.replace({
+              name: 'ObjectiveHome',
+              params: { objectiveId: objective.id },
+            });
           }
-        } else if (
-          this.workbenchObjectives.length &&
-          !this.workbenchObjectives.find((o) => objective.id === o.id)
-        ) {
-          // Clear the workbench if an object is selected with the modifier key
-          // and it is not currently listed.
-          this.clearWorkbenchObjectives();
+        } else {
+          await this.unselectObjective(objective);
         }
       };
     },
 
+    async toggleObjective(checked, objective) {
+      if (checked) {
+        await this.selectObjective(objective);
+      } else {
+        await this.unselectObjective(objective);
+      }
+    },
+
     onObjectiveMounted(objective) {
       // Scroll to active objective when first mounted in the timeline.
       if (objective.id === this.activeObjective?.id) {
@@ -489,10 +522,20 @@ export default {
     },
 
     async periodObjectivesToWorkbench() {
-      this.periodObjectives
-        .filter((po) => !this.workbenchObjectives.map((o) => o.id).includes(po.id))
-        .map((o) => o.id)
-        .forEach(this.addWorkbenchObjective);
+      // Reset and add all objectives within current period to the workbench
+      await this.clearWorkbenchObjectives();
+
+      if (!this.periodObjectives.length) {
+        return;
+      }
+
+      this.periodObjectives.map((o) => o.id).forEach(this.addWorkbenchObjective);
+
+      // Set first workbench objective as active
+      await this.$router.replace({
+        name: 'ObjectiveHome',
+        params: { objectiveId: this.periodObjectives[0].id },
+      });
 
       this.$nextTick(() => {
         if (this.$refs.period) {
diff --git a/src/components/OkrLinkCard.vue b/src/components/OkrLinkCard.vue
index 86b5cdf45..9ee24cf34 100644
--- a/src/components/OkrLinkCard.vue
+++ b/src/components/OkrLinkCard.vue
@@ -5,6 +5,7 @@
         'okr-link-card',
         {
           'okr-link-card--active': isExactActive || active,
+          'okr-link-card--checked': checked,
           'okr-link-card--compact': compact,
         },
       ]"
@@ -12,15 +13,18 @@
       @click="activate($event, navigate)"
     >
       <div class="okr-link-card__inner">
-        <pkt-tag
-          v-if="!compact"
-          text-style="normal-text"
-          skin="yellow"
-          size="small"
-          class="okr-link-card__owner"
-        >
-          {{ activeItem.name }}
-        </pkt-tag>
+        <div v-if="!compact" class="okr-link-card__header">
+          <input
+            v-if="checkable"
+            type="checkbox"
+            class="pkt-form-check-input"
+            :checked="checked"
+            @click.stop="$emit('toggle', $event.target.checked)"
+          />
+          <pkt-tag text-style="normal-text" skin="yellow" size="small">
+            {{ activeItem.name }}
+          </pkt-tag>
+        </div>
 
         <span class="okr-link-card__title pkt-txt-14">
           {{ title }}
@@ -62,6 +66,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    checked: {
+      type: Boolean,
+      default: false,
+    },
+    checkable: {
+      type: Boolean,
+      default: false,
+    },
     compact: {
       type: Boolean,
       default: false,
@@ -117,7 +129,10 @@ export default {
     padding: 1rem;
   }
 
-  &__owner {
+  &__header {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
     white-space: nowrap;
   }
 
@@ -125,10 +140,13 @@ export default {
     text-wrap: balance;
   }
 
-  &--active {
+  &--active,
+  &--checked {
     color: var(--color-hover);
-    background-color: var(--color-blue-5);
     border: 2px solid var(--color-hover);
   }
+  &--active {
+    background-color: var(--color-blue-5);
+  }
 }
 </style>
diff --git a/src/components/panes/WorkbenchPane.vue b/src/components/panes/WorkbenchPane.vue
index 0e57847ef..f380b5eb2 100644
--- a/src/components/panes/WorkbenchPane.vue
+++ b/src/components/panes/WorkbenchPane.vue
@@ -28,7 +28,7 @@
           variant="icon-only"
           icon-name="minus-circle"
           skin="tertiary"
-          @onClick="removeObject(objective)"
+          @onClick="removeObjective(objective)"
         />
       </div>
     </div>
@@ -66,7 +66,7 @@ export default {
   methods: {
     ...mapActions('okrs', ['removeWorkbenchObjective', 'clearWorkbenchObjectives']),
 
-    async removeObject(objective) {
+    async removeObjective(objective) {
       await this.removeWorkbenchObjective(objective.id);
 
       // Set next objective as active or unset current if removed.
@@ -84,9 +84,6 @@ export default {
 
     async close() {
       await this.clearWorkbenchObjectives();
-      if (this.$route.name !== 'ItemHome') {
-        this.$router.push({ name: 'ItemHome' });
-      }
     },
   },
 };
@@ -108,7 +105,7 @@ export default {
     top: -1rem;
     right: -1rem;
     height: 2rem;
-    padding: 0 0.25rem;
+    padding: 0 0.25rem !important;
     color: var(--color-grayscale-40);
     background-color: var(--color-white);
     border-radius: 50%;

From 82176a06bb676f7c07ebb7d928201b3b4d0e0dce Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Thu, 28 Sep 2023 15:41:51 +0200
Subject: [PATCH 038/102] Remove unused store action mappings

---
 src/components/drawers/EditObjective.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/drawers/EditObjective.vue b/src/components/drawers/EditObjective.vue
index 2fa901769..5773c663e 100644
--- a/src/components/drawers/EditObjective.vue
+++ b/src/components/drawers/EditObjective.vue
@@ -109,7 +109,7 @@
 </template>
 
 <script>
-import { mapActions, mapState } from 'vuex';
+import { mapState } from 'vuex';
 import { isEqual } from 'date-fns';
 import { db } from '@/config/firebaseConfig';
 import { formattedPeriod } from '@/util/okr';
@@ -220,7 +220,6 @@ export default {
 
   methods: {
     formattedPeriod,
-    ...mapActions('okrs', ['setActiveObjective', 'addWorkbenchObjective']),
 
     getCurrentDateRange() {
       if (this.thisObjective.startDate && this.thisObjective.endDate) {

From 7de34da0bf17bed7d1f611e22cb96db77a445776 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Thu, 28 Sep 2023 15:42:44 +0200
Subject: [PATCH 039/102] Fix adding newly created objective to workbench

---
 src/views/Item/ItemOKRs.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/Item/ItemOKRs.vue b/src/views/Item/ItemOKRs.vue
index 385797caa..7ad4a3f9d 100644
--- a/src/views/Item/ItemOKRs.vue
+++ b/src/views/Item/ItemOKRs.vue
@@ -166,7 +166,7 @@ export default {
     ...mapActions('okrs', [
       'setActiveObjective',
       'setActiveKeyResult',
-      'clearWorkbenchObjectives',
+      'addWorkbenchObjective',
     ]),
 
     async setData() {
@@ -247,7 +247,7 @@ export default {
       this.$router.push({ name: 'ObjectiveHome', params: { objectiveId: objective.id } });
 
       if (this.workbenchObjectives.length) {
-        await this.addWorkbenchObjective(objective);
+        await this.addWorkbenchObjective(objective.id);
       }
     },
   },

From 285a14c3a6a5c26bdc9487d1f3589a3b5ed0f8e9 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Mon, 2 Oct 2023 15:46:01 +0200
Subject: [PATCH 040/102] Reduce flicker while toggling panes

---
 src/components/GanttChart.vue        | 26 +++++++++++++++++++-------
 src/components/layout/PaneLayout.vue |  4 ++--
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/components/GanttChart.vue b/src/components/GanttChart.vue
index 740d75903..f00febe0a 100644
--- a/src/components/GanttChart.vue
+++ b/src/components/GanttChart.vue
@@ -431,13 +431,25 @@ export default {
     },
 
     async selectObjective(objective) {
-      if (!this.workbenchObjectives.length) {
-        if (this.activeObjective && objective.id !== this.activeObjective.id) {
-          // Add currently active objective to workbench if the next objective
-          // is selected for the workbench
-          await this.addWorkbenchObjective(this.activeObjective.id);
-          this.$router.push({ name: 'ItemHome' });
-        }
+      if (
+        !this.workbenchObjectives.length &&
+        this.activeObjective &&
+        objective.id !== this.activeObjective.id
+      ) {
+        // Close currently active objective if next objective is selected for
+        // the workbench
+        const activeObjectiveId = this.activeObjective.id;
+        this.$router.push({ name: 'ItemHome' });
+
+        // Add both objectives to the workbench using `setTimeout` to give the
+        // browser a chance to "catch up" while toggling panes
+        setTimeout(async () => {
+          await Promise.all(
+            [activeObjectiveId, objective.id].map(this.addWorkbenchObjective)
+          );
+          this.scrollToObjective(objective);
+        });
+        return;
       }
 
       // Add selected objective to workbench
diff --git a/src/components/layout/PaneLayout.vue b/src/components/layout/PaneLayout.vue
index 0d23919f9..bae8965e8 100644
--- a/src/components/layout/PaneLayout.vue
+++ b/src/components/layout/PaneLayout.vue
@@ -75,10 +75,10 @@ export default {
 }
 
 .slide-fade-enter-active {
-  transition: all 0.3s ease;
+  transition: all 0.4s ease;
 }
 .slide-fade-leave-active {
-  transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
+  transition: none;
 }
 .slide-fade-enter,
 .slide-fade-leave-to {

From ea1585b9145bcc8d1d4815fc664eee85b10296dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Mon, 4 Sep 2023 15:13:52 +0200
Subject: [PATCH 041/102] Display contributor tags on objective cards

Contributors on an objective are any
organizations/departments/products owning a key result connected to
the objective.
---
 src/components/GanttChart.vue          |   1 +
 src/components/OkrLinkCard.vue         | 120 ++++++++++++++++++++++++-
 src/components/panes/ObjectivePane.vue |   1 +
 src/components/panes/WorkbenchPane.vue |   1 +
 src/config/colors.js                   |  68 ++++++++++++++
 src/styles/main.scss                   |   7 ++
 src/util/hash.js                       |  31 +++++++
 src/util/index.js                      |  16 ++++
 8 files changed, 242 insertions(+), 3 deletions(-)
 create mode 100644 src/config/colors.js
 create mode 100644 src/util/hash.js

diff --git a/src/components/GanttChart.vue b/src/components/GanttChart.vue
index f00febe0a..d39ad4c67 100644
--- a/src/components/GanttChart.vue
+++ b/src/components/GanttChart.vue
@@ -69,6 +69,7 @@
               params: { objectiveId: o.objective.id },
             }"
             :title="o.objective.name"
+            :objective-id="o.objective.id"
             :tabindex="o.tabindex"
             :progression="o.objective.progression"
             :style="objectiveStyle(o)"
diff --git a/src/components/OkrLinkCard.vue b/src/components/OkrLinkCard.vue
index 9ee24cf34..6236f69e5 100644
--- a/src/components/OkrLinkCard.vue
+++ b/src/components/OkrLinkCard.vue
@@ -13,7 +13,7 @@
       @click="activate($event, navigate)"
     >
       <div class="okr-link-card__inner">
-        <div v-if="!compact" class="okr-link-card__header">
+        <div v-if="!compact" class="okr-link-card__heading">
           <input
             v-if="checkable"
             type="checkbox"
@@ -21,9 +21,35 @@
             :checked="checked"
             @click.stop="$emit('toggle', $event.target.checked)"
           />
-          <pkt-tag text-style="normal-text" skin="yellow" size="small">
-            {{ activeItem.name }}
+          <pkt-tag
+            text-style="normal-text"
+            skin="yellow"
+            size="small"
+            class="okr-link-card__owner"
+          >
+            <template v-if="keyResult">
+              {{ keyResult.parent.name }}
+            </template>
+            <template v-else>
+              {{ activeItem.name }}
+            </template>
           </pkt-tag>
+
+          <ul class="okr-link-card__tags">
+            <li
+              v-for="c in contributors"
+              :key="c.id"
+              v-tooltip="c.name"
+              :class="[
+                'okr-link-card__tag',
+                'pkt-txt-12-medium',
+                `okr-link-card__tag--${contributorTagMode(c.name)}`,
+              ]"
+              :style="{ background: contributorTagColor(c.name) }"
+            >
+              <span>{{ c.name[0] }}</span>
+            </li>
+          </ul>
         </div>
 
         <span class="okr-link-card__title pkt-txt-14">
@@ -39,7 +65,11 @@
 <script>
 import { mapState } from 'vuex';
 import { PktTag } from '@oslokommune/punkt-vue2';
+import CONTRIBUTOR_TAG_COLORS from '@/config/colors';
 import ProgressBar from '@/components/ProgressBar.vue';
+import simpleHash from '@/util/hash';
+import { db } from '@/config/firebaseConfig';
+import { uniqueBy } from '@/util';
 
 export default {
   name: 'OkrLinkCard',
@@ -86,10 +116,48 @@ export default {
       type: Function,
       default: null,
     },
+    objectiveId: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    keyResult: {
+      type: Object,
+      required: false,
+      default: null,
+    },
   },
 
+  data: () => ({
+    keyResults: [],
+  }),
+
   computed: {
     ...mapState(['activeItem']),
+
+    /**
+     * Return a list of unique contributors to the key results in
+     * `this.keyResults`.
+     */
+    contributors() {
+      return uniqueBy(
+        this.keyResults.map((kr) => kr.parent).filter((item) => item.name),
+        'id'
+      );
+    },
+  },
+
+  async created() {
+    if (this.objectiveId !== null) {
+      const objectiveRef = await db.doc(`objectives/${this.objectiveId}`);
+      const keyResults = await db
+        .collection('keyResults')
+        .where('archived', '==', false)
+        .where('objective', '==', objectiveRef)
+        .orderBy('name');
+
+      this.$bind('keyResults', keyResults);
+    }
   },
 
   methods: {
@@ -104,6 +172,24 @@ export default {
         await this.afterNavigate(event);
       }
     },
+
+    /**
+     * Return the color to use for the contributor tag of the
+     * organization/department/product called `name`.
+     */
+    contributorTagColor(name) {
+      const c = CONTRIBUTOR_TAG_COLORS[simpleHash(name) % CONTRIBUTOR_TAG_COLORS.length];
+      return `var(--${c.name})`;
+    },
+
+    /**
+     * Return the color mode to use for the contributor tag of the
+     * organization/department/product called `name`.
+     */
+    contributorTagMode(name) {
+      const c = CONTRIBUTOR_TAG_COLORS[simpleHash(name) % CONTRIBUTOR_TAG_COLORS.length];
+      return c.mode;
+    },
   },
 };
 </script>
@@ -149,4 +235,32 @@ export default {
     background-color: var(--color-blue-5);
   }
 }
+
+.okr-link-card__heading {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: space-between;
+}
+
+.okr-link-card__tags {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.okr-link-card__tag {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+}
+
+.okr-link-card__tag--light {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.okr-link-card__tag--dark {
+  color: var(--color-white);
+}
 </style>
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index 8a5526175..3bb48618a 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -95,6 +95,7 @@
             params: { objectiveId: activeObjective.id, keyResultId: keyResult.id },
           }"
           :title="keyResult.name"
+          :key-result="keyResult"
           :progression="keyResult.progression"
           :active="activeKeyResult && activeKeyResult.id === keyResult.id"
           compact
diff --git a/src/components/panes/WorkbenchPane.vue b/src/components/panes/WorkbenchPane.vue
index f380b5eb2..5e4628248 100644
--- a/src/components/panes/WorkbenchPane.vue
+++ b/src/components/panes/WorkbenchPane.vue
@@ -17,6 +17,7 @@
         <okr-link-card
           :route="{ name: 'ObjectiveHome', params: { objectiveId: objective.id } }"
           :title="objective.name"
+          :objective-id="objective.id"
           :progression="objective.progression"
           :active="activeObjective && objective.id === activeObjective.id"
         />
diff --git a/src/config/colors.js b/src/config/colors.js
new file mode 100644
index 000000000..4b4fb1ac1
--- /dev/null
+++ b/src/config/colors.js
@@ -0,0 +1,68 @@
+const CONTRIBUTOR_TAG_COLORS = [
+  {
+    name: 'color-beige-dark',
+    mode: 'dark',
+  },
+  {
+    name: 'color-beige-light',
+    mode: 'light',
+  },
+  {
+    name: 'color-blue',
+    mode: 'light',
+  },
+  {
+    name: 'color-blue-40',
+    mode: 'dark',
+  },
+  {
+    name: 'color-blue-dark',
+    mode: 'dark',
+  },
+  {
+    name: 'color-blue-dark-15',
+    mode: 'dark',
+  },
+  {
+    name: 'color-blue-light',
+    mode: 'light',
+  },
+  {
+    name: 'color-focus',
+    mode: 'light',
+  },
+  {
+    name: 'color-green-40',
+    mode: 'dark',
+  },
+  {
+    name: 'color-green-dark',
+    mode: 'dark',
+  },
+  {
+    name: 'color-green-dark-15',
+    mode: 'light',
+  },
+  {
+    name: 'color-red-100',
+    mode: 'dark',
+  },
+  {
+    name: 'color-red-20',
+    mode: 'light',
+  },
+  {
+    name: 'color-yellow',
+    mode: 'dark',
+  },
+  {
+    name: 'color-yellow-50',
+    mode: 'light',
+  },
+  {
+    name: 'color-yellow-80',
+    mode: 'dark',
+  },
+];
+
+export default CONTRIBUTOR_TAG_COLORS;
diff --git a/src/styles/main.scss b/src/styles/main.scss
index e4584d949..ca9bd54d7 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -106,7 +106,14 @@ body.using-mouse :not([class^='pkt-'], [class*=' pkt-']):focus {
 
 :root {
   // Colors that are going to be added in Punkt soon.
+  --color-blue-40: #336084;
+  --color-blue-dark-15: #b8ccd9;
   --color-blue-dark-40: #4b5283;
+  --color-green-40: #207354;
+  --color-green-dark-15: #b8d9d4;
+  --color-red-100: #4d0800;
+  --color-red-20: #fad0cb;
+  --color-yellow-80: #774c01;
 
   // Colors in RGB value - add more if needed. SCSS rgba() function
   // can read hex numbers with CSS Variables.
diff --git a/src/util/hash.js b/src/util/hash.js
new file mode 100644
index 000000000..35a339419
--- /dev/null
+++ b/src/util/hash.js
@@ -0,0 +1,31 @@
+/* eslint no-bitwise: 0 */
+
+/**
+ * cyrb53 (c) 2018 bryc (github.com/bryc)
+ *
+ * License: Public domain.
+ *
+ * A fast and simple 53-bit string hash function with decent collision
+ * resistance.
+ *
+ * Largely inspired by MurmurHash2/3, but with a focus on speed/simplicity.
+ */
+function simpleHash(str, seed = 0) {
+  let h1 = 0xdeadbeef ^ seed;
+  let h2 = 0x41c6ce57 ^ seed;
+
+  for (let i = 0, ch; i < str.length; i += 1) {
+    ch = str.charCodeAt(i);
+    h1 = Math.imul(h1 ^ ch, 2654435761);
+    h2 = Math.imul(h2 ^ ch, 1597334677);
+  }
+
+  h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507);
+  h1 ^= Math.imul(h2 ^ (h2 >>> 13), 3266489909);
+  h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507);
+  h2 ^= Math.imul(h1 ^ (h1 >>> 13), 3266489909);
+
+  return 4294967296 * (2097151 & h2) + (h1 >>> 0);
+}
+
+export default simpleHash;
diff --git a/src/util/index.js b/src/util/index.js
index 01a794669..d0cb7885e 100644
--- a/src/util/index.js
+++ b/src/util/index.js
@@ -13,3 +13,19 @@ export { default as toastArchiveAndRevert } from './toastUtils';
 export { default as validateEmail } from './validateEmail';
 
 export const getRandomInt = (max) => Math.floor(Math.random() * max);
+
+/**
+ * Return an array of all members of `arr` that are unique with respect to the
+ * attribute `key`.
+ */
+export function uniqueBy(arr, key) {
+  const res = {};
+
+  arr.forEach((x) => {
+    if (!(x[key] in res)) {
+      res[x[key]] = x;
+    }
+  });
+
+  return Object.values(res);
+}

From f3ee0370016ad923af78a849c9ccf1bdac044709 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Thu, 28 Sep 2023 08:47:16 +0200
Subject: [PATCH 042/102] Rename `OkrLinkCard` -> `ObjectiveLinkCard`

---
 src/components/GanttChart.vue                             | 6 +++---
 src/components/{OkrLinkCard.vue => ObjectiveLinkCard.vue} | 0
 src/components/panes/ObjectivePane.vue                    | 8 ++++----
 src/components/panes/WorkbenchPane.vue                    | 6 +++---
 4 files changed, 10 insertions(+), 10 deletions(-)
 rename src/components/{OkrLinkCard.vue => ObjectiveLinkCard.vue} (100%)

diff --git a/src/components/GanttChart.vue b/src/components/GanttChart.vue
index d39ad4c67..1b3bb8db2 100644
--- a/src/components/GanttChart.vue
+++ b/src/components/GanttChart.vue
@@ -61,7 +61,7 @@
       <template v-if="!loading">
         <div v-if="period.startDate" class="period" :style="periodStyle()"></div>
         <div v-for="group in groupedObjectives" :key="group.i" class="objective-row">
-          <okr-link-card
+          <objective-link-card
             v-for="o in group.objectives"
             :key="o.objective.id"
             :route="{
@@ -103,13 +103,13 @@ import {
 } from 'date-fns';
 import { dateLongCompact } from '@/util';
 import paneEvents from '@/components/layout/paneEvents';
-import OkrLinkCard from '@/components/OkrLinkCard.vue';
+import ObjectiveLinkCard from '@/components/ObjectiveLinkCard.vue';
 
 export default {
   name: 'GanttChart',
 
   components: {
-    OkrLinkCard,
+    ObjectiveLinkCard,
   },
 
   props: {
diff --git a/src/components/OkrLinkCard.vue b/src/components/ObjectiveLinkCard.vue
similarity index 100%
rename from src/components/OkrLinkCard.vue
rename to src/components/ObjectiveLinkCard.vue
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index 3bb48618a..929380a23 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -87,8 +87,8 @@
       </draggable>
 
       <div v-else-if="keyResults.length" class="objective-pane__key-results-list">
-        <okr-link-card
-          v-for="keyResult in orderedKeyResults"
+        <objective-link-card
+          v-for="keyResult in keyResults"
           :key="keyResult.id"
           :route="{
             name: 'KeyResultHome',
@@ -131,7 +131,7 @@ import LoadingSmall from '@/components/LoadingSmall.vue';
 import WidgetObjectiveDetails from '@/components/widgets/WidgetObjectiveDetails.vue';
 import WidgetWeights from '@/components/widgets/WidgetWeights.vue';
 import EmptyState from '@/components/EmptyState.vue';
-import OkrLinkCard from '@/components/OkrLinkCard.vue';
+import ObjectiveLinkCard from '@/components/ObjectiveLinkCard.vue';
 import HTMLOutput from '@/components/HTMLOutput.vue';
 
 export default {
@@ -141,7 +141,7 @@ export default {
     draggable,
     PaneWrapper,
     EmptyState,
-    OkrLinkCard,
+    ObjectiveLinkCard,
     HTMLOutput,
     LoadingSmall,
     PktBreadcrumbs,
diff --git a/src/components/panes/WorkbenchPane.vue b/src/components/panes/WorkbenchPane.vue
index 5e4628248..2bbd08454 100644
--- a/src/components/panes/WorkbenchPane.vue
+++ b/src/components/panes/WorkbenchPane.vue
@@ -14,7 +14,7 @@
 
     <div class="workbench-pane__objectives">
       <div v-for="objective in workbenchObjectives" :key="objective.id" class="">
-        <okr-link-card
+        <objective-link-card
           :route="{ name: 'ObjectiveHome', params: { objectiveId: objective.id } }"
           :title="objective.name"
           :objective-id="objective.id"
@@ -40,7 +40,7 @@
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { PktButton } from '@oslokommune/punkt-vue2';
 import PaneWrapper from '@/components/panes/PaneWrapper.vue';
-import OkrLinkCard from '@/components/OkrLinkCard.vue';
+import ObjectiveLinkCard from '@/components/ObjectiveLinkCard.vue';
 import ProgressBar from '@/components/ProgressBar.vue';
 
 export default {
@@ -48,7 +48,7 @@ export default {
 
   components: {
     PaneWrapper,
-    OkrLinkCard,
+    ObjectiveLinkCard,
     ProgressBar,
     PktButton,
   },

From 1ab02560cfed94bc8d77e8e3be819299e58de7f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Thu, 28 Sep 2023 08:59:53 +0200
Subject: [PATCH 043/102] Rename `okr-link-card` -> `objective-link-card`

---
 src/components/GanttChart.vue          |  2 +-
 src/components/ObjectiveLinkCard.vue   | 36 +++++++++++++-------------
 src/components/panes/ObjectivePane.vue |  4 +--
 3 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/components/GanttChart.vue b/src/components/GanttChart.vue
index 1b3bb8db2..844368e46 100644
--- a/src/components/GanttChart.vue
+++ b/src/components/GanttChart.vue
@@ -701,7 +701,7 @@ export default {
   margin: 1rem 0;
 }
 
-.okr-link-card {
+.objective-link-card {
   --card-bg-color: var(--color-white);
 
   position: relative;
diff --git a/src/components/ObjectiveLinkCard.vue b/src/components/ObjectiveLinkCard.vue
index 6236f69e5..59a4d9903 100644
--- a/src/components/ObjectiveLinkCard.vue
+++ b/src/components/ObjectiveLinkCard.vue
@@ -2,18 +2,18 @@
   <router-link v-slot="{ href, navigate, isExactActive }" :to="route" custom>
     <a
       :class="[
-        'okr-link-card',
+        'objective-link-card',
         {
-          'okr-link-card--active': isExactActive || active,
-          'okr-link-card--checked': checked,
-          'okr-link-card--compact': compact,
+          'objective-link-card--active': isExactActive || active,
+          'objective-link-card--checked': checked,
+          'objective-link-card--compact': compact,
         },
       ]"
       :href="href"
       @click="activate($event, navigate)"
     >
-      <div class="okr-link-card__inner">
-        <div v-if="!compact" class="okr-link-card__heading">
+      <div class="objective-link-card__inner">
+        <div class="objective-link-card__heading">
           <input
             v-if="checkable"
             type="checkbox"
@@ -25,7 +25,7 @@
             text-style="normal-text"
             skin="yellow"
             size="small"
-            class="okr-link-card__owner"
+            class="objective-link-card__owner"
           >
             <template v-if="keyResult">
               {{ keyResult.parent.name }}
@@ -35,15 +35,15 @@
             </template>
           </pkt-tag>
 
-          <ul class="okr-link-card__tags">
+          <ul class="objective-link-card__tags">
             <li
               v-for="c in contributors"
               :key="c.id"
               v-tooltip="c.name"
               :class="[
-                'okr-link-card__tag',
+                'objective-link-card__tag',
                 'pkt-txt-12-medium',
-                `okr-link-card__tag--${contributorTagMode(c.name)}`,
+                `objective-link-card__tag--${contributorTagMode(c.name)}`,
               ]"
               :style="{ background: contributorTagColor(c.name) }"
             >
@@ -52,7 +52,7 @@
           </ul>
         </div>
 
-        <span class="okr-link-card__title pkt-txt-14">
+        <span class="objective-link-card__title pkt-txt-14">
           {{ title }}
         </span>
 
@@ -72,7 +72,7 @@ import { db } from '@/config/firebaseConfig';
 import { uniqueBy } from '@/util';
 
 export default {
-  name: 'OkrLinkCard',
+  name: 'ObjectiveLinkCard',
 
   components: {
     ProgressBar,
@@ -195,7 +195,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.okr-link-card {
+.objective-link-card {
   display: block;
   color: var(--color-text);
   text-decoration: none;
@@ -236,18 +236,18 @@ export default {
   }
 }
 
-.okr-link-card__heading {
+.objective-link-card__heading {
   display: flex;
   gap: 0.5rem;
   justify-content: space-between;
 }
 
-.okr-link-card__tags {
+.objective-link-card__tags {
   display: flex;
   gap: 0.25rem;
 }
 
-.okr-link-card__tag {
+.objective-link-card__tag {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -256,11 +256,11 @@ export default {
   border-radius: 50%;
 }
 
-.okr-link-card__tag--light {
+.objective-link-card__tag--light {
   color: rgba(0, 0, 0, 0.6);
 }
 
-.okr-link-card__tag--dark {
+.objective-link-card__tag--dark {
   color: var(--color-white);
 }
 </style>
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index 929380a23..b0b1f8ee4 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -71,7 +71,7 @@
         animation="200"
       >
         <transition-group>
-          <okr-link-card
+          <objective-link-card
             v-for="keyResult in orderedKeyResults"
             :key="keyResult.id"
             :route="{
@@ -274,7 +274,7 @@ export default {
         margin-left: 3rem;
       }
 
-      & .okr-link-card {
+      & .objective-link-card {
         position: relative;
         margin-top: 1rem;
 

From 9aca7a12653ad638e0c0c263bfbacd210d62d1f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Thu, 28 Sep 2023 09:02:04 +0200
Subject: [PATCH 044/102] Revamp owner/contributor display in objective pane

---
 src/components/KeyResultLinkCard.vue   | 144 +++++++++++++++++++++++++
 src/components/ObjectiveLinkCard.vue   |  53 ++-------
 src/components/panes/ObjectivePane.vue |  88 +++++++++++++--
 src/locale/locales/en-US.json          |   2 +
 src/locale/locales/nb-NO.json          |   2 +
 src/util/okr.js                        |  20 ++++
 6 files changed, 252 insertions(+), 57 deletions(-)
 create mode 100644 src/components/KeyResultLinkCard.vue

diff --git a/src/components/KeyResultLinkCard.vue b/src/components/KeyResultLinkCard.vue
new file mode 100644
index 000000000..0fe4ba1a7
--- /dev/null
+++ b/src/components/KeyResultLinkCard.vue
@@ -0,0 +1,144 @@
+<template>
+  <router-link v-slot="{ href, navigate, isExactActive }" :to="route" custom>
+    <a
+      :class="[
+        'key-result-link-card',
+        {
+          'key-result-link-card--active': isExactActive || active,
+        },
+      ]"
+      :href="href"
+      @click="activate($event, navigate)"
+    >
+      <div class="key-result-link-card__inner">
+        <div class="key-result-link-card__heading">
+          <span class="key-result-link-card__title pkt-txt-14">
+            {{ title }}
+          </span>
+
+          <div class="key-result-link-card__tags">
+            <div
+              v-tooltip="owner"
+              :class="[
+                'key-result-link-card__tag',
+                'pkt-txt-12-bold',
+                `key-result-link-card__tag--${contributorTagMode(owner)}`,
+              ]"
+              :style="{ background: contributorTagColor(owner) }"
+            >
+              <span>{{ owner[0] }}</span>
+            </div>
+          </div>
+        </div>
+
+        <progress-bar :progression="progression" compact />
+      </div>
+    </a>
+  </router-link>
+</template>
+
+<script>
+import { contributorTagColor, contributorTagMode } from '@/util/okr';
+import ProgressBar from '@/components/ProgressBar.vue';
+
+export default {
+  name: 'KeyResultLinkCard',
+
+  components: {
+    ProgressBar,
+  },
+
+  props: {
+    route: {
+      type: Object,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+    progression: {
+      type: Number,
+      required: true,
+    },
+    owner: {
+      type: String,
+      required: true,
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  methods: {
+    contributorTagColor,
+    contributorTagMode,
+
+    async activate(event, rootHandler) {
+      await rootHandler(event);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.key-result-link-card {
+  display: block;
+  color: var(--color-text);
+  text-decoration: none;
+  background-color: var(--color-white);
+  border: 2px solid rgba(42, 40, 89, 0.25); // blue-dark, 25%
+  cursor: pointer;
+
+  &:hover {
+    color: var(--color-hover);
+  }
+
+  &__inner {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    height: 100%;
+    padding: 1rem;
+  }
+
+  &__title {
+    text-wrap: balance;
+  }
+
+  &__heading {
+    display: flex;
+    gap: 0.5rem;
+    justify-content: space-between;
+  }
+
+  &--active {
+    color: var(--color-hover);
+    background-color: var(--color-blue-5);
+    border: 2px solid var(--color-hover);
+  }
+}
+
+.key-result-link-card__tags {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.key-result-link-card__tag {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+}
+
+.key-result-link-card__tag--light {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.key-result-link-card__tag--dark {
+  color: var(--color-white);
+}
+</style>
diff --git a/src/components/ObjectiveLinkCard.vue b/src/components/ObjectiveLinkCard.vue
index 59a4d9903..92c4e88b9 100644
--- a/src/components/ObjectiveLinkCard.vue
+++ b/src/components/ObjectiveLinkCard.vue
@@ -6,7 +6,6 @@
         {
           'objective-link-card--active': isExactActive || active,
           'objective-link-card--checked': checked,
-          'objective-link-card--compact': compact,
         },
       ]"
       :href="href"
@@ -27,12 +26,7 @@
             size="small"
             class="objective-link-card__owner"
           >
-            <template v-if="keyResult">
-              {{ keyResult.parent.name }}
-            </template>
-            <template v-else>
-              {{ activeItem.name }}
-            </template>
+            {{ activeItem.name }}
           </pkt-tag>
 
           <ul class="objective-link-card__tags">
@@ -42,7 +36,7 @@
               v-tooltip="c.name"
               :class="[
                 'objective-link-card__tag',
-                'pkt-txt-12-medium',
+                'pkt-txt-12-bold',
                 `objective-link-card__tag--${contributorTagMode(c.name)}`,
               ]"
               :style="{ background: contributorTagColor(c.name) }"
@@ -56,7 +50,7 @@
           {{ title }}
         </span>
 
-        <progress-bar :progression="progression" :compact="compact" />
+        <progress-bar :progression="progression" />
       </div>
     </a>
   </router-link>
@@ -65,9 +59,8 @@
 <script>
 import { mapState } from 'vuex';
 import { PktTag } from '@oslokommune/punkt-vue2';
-import CONTRIBUTOR_TAG_COLORS from '@/config/colors';
 import ProgressBar from '@/components/ProgressBar.vue';
-import simpleHash from '@/util/hash';
+import { contributorTagColor, contributorTagMode } from '@/util/okr';
 import { db } from '@/config/firebaseConfig';
 import { uniqueBy } from '@/util';
 
@@ -104,28 +97,15 @@ export default {
       type: Boolean,
       default: false,
     },
-    compact: {
-      type: Boolean,
-      default: false,
-    },
     beforeNavigate: {
       type: Function,
       default: null,
     },
-    afterNavigate: {
-      type: Function,
-      default: null,
-    },
     objectiveId: {
       type: String,
       required: false,
       default: null,
     },
-    keyResult: {
-      type: Object,
-      required: false,
-      default: null,
-    },
   },
 
   data: () => ({
@@ -161,34 +141,15 @@ export default {
   },
 
   methods: {
+    contributorTagColor,
+    contributorTagMode,
+
     async activate(event, rootHandler) {
       if (this.beforeNavigate) {
         await this.beforeNavigate(event);
       }
 
       await rootHandler(event);
-
-      if (this.afterNavigate) {
-        await this.afterNavigate(event);
-      }
-    },
-
-    /**
-     * Return the color to use for the contributor tag of the
-     * organization/department/product called `name`.
-     */
-    contributorTagColor(name) {
-      const c = CONTRIBUTOR_TAG_COLORS[simpleHash(name) % CONTRIBUTOR_TAG_COLORS.length];
-      return `var(--${c.name})`;
-    },
-
-    /**
-     * Return the color mode to use for the contributor tag of the
-     * organization/department/product called `name`.
-     */
-    contributorTagMode(name) {
-      const c = CONTRIBUTOR_TAG_COLORS[simpleHash(name) % CONTRIBUTOR_TAG_COLORS.length];
-      return c.mode;
     },
   },
 };
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index b0b1f8ee4..e5e70d64b 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -34,6 +34,33 @@
       :html="activeObjective.description"
     />
 
+    <div class="objective-pane__members">
+      <div>
+        <h4 class="pkt-txt-14-medium">{{ $t('objective.owner') }}</h4>
+        <pkt-tag text-style="normal-text" skin="yellow" size="small">
+          {{ activeObjective.parent.name }}
+        </pkt-tag>
+      </div>
+
+      <div class="objective-pane__contributors">
+        <h4 class="pkt-txt-14-medium">{{ $t('objective.contributors') }}</h4>
+        <ul>
+          <li v-for="c in contributors" :key="c.id" class="objective-pane__contributor">
+            <span class="pkt-txt-14">{{ c.name }}</span>
+            <span
+              class="objective-pane__contributor-tag"
+              :class="[
+                'objective-link-card__tag',
+                'pkt-txt-12-bold',
+                `objective-link-card__tag--${contributorTagMode(c.name)}`,
+              ]"
+              :style="{ background: contributorTagColor(c.name) }"
+            ></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+
     <progress-bar
       class="objective-pane__progression"
       :title="$t('objective.progressionTitle')"
@@ -71,7 +98,7 @@
         animation="200"
       >
         <transition-group>
-          <objective-link-card
+          <key-result-link-card
             v-for="keyResult in orderedKeyResults"
             :key="keyResult.id"
             :route="{
@@ -80,25 +107,24 @@
             }"
             :title="keyResult.name"
             :progression="keyResult.progression"
+            :owner="keyResult.parent?.name ? keyResult.parent.name : ''"
             :active="activeKeyResult && activeKeyResult.id === keyResult.id"
-            compact
           />
         </transition-group>
       </draggable>
 
       <div v-else-if="keyResults.length" class="objective-pane__key-results-list">
-        <objective-link-card
-          v-for="keyResult in keyResults"
+        <key-result-link-card
+          v-for="keyResult in orderedKeyResults"
           :key="keyResult.id"
           :route="{
             name: 'KeyResultHome',
             params: { objectiveId: activeObjective.id, keyResultId: keyResult.id },
           }"
           :title="keyResult.name"
-          :key-result="keyResult"
           :progression="keyResult.progression"
+          :owner="keyResult.parent?.name ? keyResult.parent.name : ''"
           :active="activeKeyResult && activeKeyResult.id === keyResult.id"
-          compact
         />
       </div>
 
@@ -121,9 +147,10 @@ import { format } from 'd3-format';
 import { mapGetters, mapState } from 'vuex';
 import { PktBreadcrumbs, PktButton, PktTag } from '@oslokommune/punkt-vue2';
 import draggable from 'vuedraggable';
-import { compareKeyResults } from '@/util/okr';
-import { dateLong, periodDates } from '@/util';
+import { compareKeyResults, contributorTagColor, contributorTagMode } from '@/util/okr';
+import { dateLong, periodDates, uniqueBy } from '@/util';
 import { db } from '@/config/firebaseConfig';
+import i18n from '@/locale/i18n';
 import KeyResult from '@/db/KeyResult';
 import ProgressBar from '@/components/ProgressBar.vue';
 import PaneWrapper from '@/components/panes/PaneWrapper.vue';
@@ -131,7 +158,7 @@ import LoadingSmall from '@/components/LoadingSmall.vue';
 import WidgetObjectiveDetails from '@/components/widgets/WidgetObjectiveDetails.vue';
 import WidgetWeights from '@/components/widgets/WidgetWeights.vue';
 import EmptyState from '@/components/EmptyState.vue';
-import ObjectiveLinkCard from '@/components/ObjectiveLinkCard.vue';
+import KeyResultLinkCard from '@/components/KeyResultLinkCard.vue';
 import HTMLOutput from '@/components/HTMLOutput.vue';
 
 export default {
@@ -141,7 +168,7 @@ export default {
     draggable,
     PaneWrapper,
     EmptyState,
-    ObjectiveLinkCard,
+    KeyResultLinkCard,
     HTMLOutput,
     LoadingSmall,
     PktBreadcrumbs,
@@ -199,6 +226,13 @@ export default {
         });
       },
     },
+
+    contributors() {
+      return uniqueBy(
+        this.keyResults.map((kr) => kr.parent).filter((item) => item.name),
+        'id'
+      ).sort((a, b) => a.name.localeCompare(b.name, i18n.locale));
+    },
   },
 
   watch: {
@@ -222,6 +256,8 @@ export default {
   },
 
   methods: {
+    contributorTagColor,
+    contributorTagMode,
     dateLong,
     periodDates,
 
@@ -249,6 +285,36 @@ export default {
     }
   }
 
+  &__members {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 1rem;
+
+    & h4 {
+      margin-bottom: 0.25rem;
+    }
+  }
+
+  &__contributors {
+    margin-right: calc(2.5rem + 2px);
+  }
+
+  &__contributor {
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 0.25rem;
+  }
+
+  &__contributor-tag {
+    display: block;
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 50%;
+  }
+
   &__progression {
     margin-top: 1rem;
   }
@@ -274,7 +340,7 @@ export default {
         margin-left: 3rem;
       }
 
-      & .objective-link-card {
+      & .key-result-link-card {
         position: relative;
         margin-top: 1rem;
 
diff --git a/src/locale/locales/en-US.json b/src/locale/locales/en-US.json
index 88b8eef18..c2e479e4c 100644
--- a/src/locale/locales/en-US.json
+++ b/src/locale/locales/en-US.json
@@ -388,6 +388,8 @@
   "objective": {
     "period": "Period",
     "progressionTitle": "Objective progression:",
+    "owner": "Owner",
+    "contributors": "Contributors",
     "weight": "Weight",
     "change": "Change objective",
     "add": "Add objective",
diff --git a/src/locale/locales/nb-NO.json b/src/locale/locales/nb-NO.json
index 70cd484f7..4217b9d03 100644
--- a/src/locale/locales/nb-NO.json
+++ b/src/locale/locales/nb-NO.json
@@ -388,6 +388,8 @@
   "objective": {
     "period": "Arbeidsperiode",
     "progressionTitle": "Prosentvis fremdrift for målet:",
+    "owner": "Eier",
+    "contributors": "Bidragsytere",
     "weight": "Vekt",
     "change": "Endre mål",
     "add": "Legg til mål",
diff --git a/src/util/okr.js b/src/util/okr.js
index 7394d8658..d36c7276b 100644
--- a/src/util/okr.js
+++ b/src/util/okr.js
@@ -1,4 +1,6 @@
 import { dateShort, periodDates } from '@/util';
+import CONTRIBUTOR_TAG_COLORS from '@/config/colors';
+import simpleHash from '@/util/hash';
 
 /**
  * Return a nicely formatted period range for `objective`'s period.
@@ -40,3 +42,21 @@ export function compareKeyResults(a, b) {
   // Otherwise fall back to ordering by name.
   return a.name.localeCompare(b.name);
 }
+
+/**
+ * Return the color to use for the contributor tag of the
+ * organization/department/product called `name`.
+ */
+export function contributorTagColor(name) {
+  const c = CONTRIBUTOR_TAG_COLORS[simpleHash(name) % CONTRIBUTOR_TAG_COLORS.length];
+  return `var(--${c.name})`;
+}
+
+/**
+ * Return the color mode to use for the contributor tag of the
+ * organization/department/product called `name`.
+ */
+export function contributorTagMode(name) {
+  const c = CONTRIBUTOR_TAG_COLORS[simpleHash(name) % CONTRIBUTOR_TAG_COLORS.length];
+  return c.mode;
+}

From 4c0c0ebd7040c1611fd994813e4947784abfcce9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Tue, 3 Oct 2023 14:19:36 +0200
Subject: [PATCH 045/102] Adapt styling to the new checkboxes

---
 src/components/ObjectiveLinkCard.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/ObjectiveLinkCard.vue b/src/components/ObjectiveLinkCard.vue
index 92c4e88b9..7ef618f6c 100644
--- a/src/components/ObjectiveLinkCard.vue
+++ b/src/components/ObjectiveLinkCard.vue
@@ -205,7 +205,9 @@ export default {
 
 .objective-link-card__tags {
   display: flex;
+  flex: 1 0 auto;
   gap: 0.25rem;
+  justify-content: flex-end;
 }
 
 .objective-link-card__tag {

From 76d50438b5c26b0cbcdca213bbe4e4a07bd5ddf6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Tue, 3 Oct 2023 14:22:58 +0200
Subject: [PATCH 046/102] Call `navigate` directly

---
 src/components/KeyResultLinkCard.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/KeyResultLinkCard.vue b/src/components/KeyResultLinkCard.vue
index 0fe4ba1a7..6c876de2f 100644
--- a/src/components/KeyResultLinkCard.vue
+++ b/src/components/KeyResultLinkCard.vue
@@ -8,7 +8,7 @@
         },
       ]"
       :href="href"
-      @click="activate($event, navigate)"
+      @click="navigate($event)"
     >
       <div class="key-result-link-card__inner">
         <div class="key-result-link-card__heading">
@@ -74,10 +74,6 @@ export default {
   methods: {
     contributorTagColor,
     contributorTagMode,
-
-    async activate(event, rootHandler) {
-      await rootHandler(event);
-    },
   },
 };
 </script>

From edf060164d8051b410c4d8117787e900357890a9 Mon Sep 17 00:00:00 2001
From: "Anne M. P." <annemerete.pettersen@origo.oslo.kommune.no>
Date: Thu, 5 Oct 2023 11:55:57 +0200
Subject: [PATCH 047/102] Add contributors to objective

---
 firestore.indexes.json                   |  41 ++++++++
 firestore.rules                          |   1 +
 src/components/drawers/EditKeyResult.vue | 122 +++++++++++++++++++++--
 3 files changed, 155 insertions(+), 9 deletions(-)

diff --git a/firestore.indexes.json b/firestore.indexes.json
index ef4f1e42d..31d88087f 100644
--- a/firestore.indexes.json
+++ b/firestore.indexes.json
@@ -283,6 +283,24 @@
           "order": "DESCENDING"
         }
       ]
+    },
+    {
+      "collectionGroup": "objectiveContributors",
+      "queryScope": "COLLECTION",
+      "fields": [
+        {
+          "fieldPath": "archived",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "item",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "objective",
+          "order": "ASCENDING"
+        }
+      ]
     }
   ],
   "fieldOverrides": [
@@ -469,6 +487,29 @@
           "queryScope": "COLLECTION_GROUP"
         }
       ]
+    },
+    {
+      "collectionGroup": "objectiveContributors",
+      "fieldPath": "auto",
+      "ttl": false,
+      "indexes": [
+        {
+          "order": "ASCENDING",
+          "queryScope": "COLLECTION"
+        },
+        {
+          "order": "DESCENDING",
+          "queryScope": "COLLECTION"
+        },
+        {
+          "arrayConfig": "CONTAINS",
+          "queryScope": "COLLECTION"
+        },
+        {
+          "arrayConfig": "CONTAINS",
+          "queryScope": "COLLECTION_GROUP"
+        }
+      ]
     }
   ]
 }
diff --git a/firestore.rules b/firestore.rules
index 8d391cf01..c8648737a 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -188,6 +188,7 @@ service cloud.firestore {
     match /objectiveContributors/{document} {
       allow read: if isSignedIn();
       allow create: if isSuperAdmin() || isMemberOfObjectiveParentAfter(document, 'objectiveContributors');
+      allow update: if isSuperAdmin() || isMemberOfObjectiveParentAfter(document, 'objectiveContributors');
       allow delete: if isSuperAdmin() || isMemberOfObjectiveParentBefore(document, 'objectiveContributors');
     }
 
diff --git a/src/components/drawers/EditKeyResult.vue b/src/components/drawers/EditKeyResult.vue
index d423229c6..e065af318 100644
--- a/src/components/drawers/EditKeyResult.vue
+++ b/src/components/drawers/EditKeyResult.vue
@@ -35,16 +35,16 @@
             :rows="2"
             :label="$t('fields.description')"
           />
-          <!-- TODO: Include when related views have been implemented -->
-          <!--form-component
+          <form-component
             v-if="isOrganization || isDepartment"
-            v-model="thisKeyResult.parent"
+            v-model="contributor"
             name="owner"
             input-type="select"
             :select-options="ownerOptions"
+            :select-reduce="(option) => option.value"
             :label="$t('fields.owner')"
             rules="required"
-          /-->
+          />
         </template>
 
         <template v-else-if="pageIndex === 2">
@@ -155,11 +155,13 @@
 import { mapState } from 'vuex';
 import { db } from '@/config/firebaseConfig';
 import KeyResult from '@/db/KeyResult';
-import { isDepartment, isOrganization } from '@/util/getActiveItemType';
+import ObjectiveContributors from '@/db/ObjectiveContributors';
 import { PktButton } from '@oslokommune/punkt-vue2';
 import { FormSection, BtnSave, BtnDelete } from '@/components/generic/form';
 import ArchivedRestore from '@/components/ArchivedRestore.vue';
 import PagedDrawerWrapper from '@/components/drawers/PagedDrawerWrapper.vue';
+import { isDepartment, isOrganization } from '@/util/getActiveItemType';
+import getActiveItemType from '@/util/getActiveItemType';
 
 export default {
   name: 'EditKeyResult',
@@ -196,6 +198,9 @@ export default {
     thisKeyResult: null,
     pageCount: 2,
     loading: false,
+    contributor: null,
+    contributors: [],
+    keyResultOwners: [],
   }),
 
   computed: {
@@ -228,6 +233,15 @@ export default {
       }
       return {};
     },
+    childCollection() {
+      if (isOrganization(this.activeItem)) {
+        return 'departments';
+      }
+      if (isDepartment(this.activeItem)) {
+        return 'products';
+      }
+      return null;
+    },
     thisLevelOption() {
       return {
         value: this.thisLevel.path,
@@ -268,8 +282,12 @@ export default {
           .then((snapshot) => {
             this.thisKeyResult = snapshot.data();
             this.thisKeyResult.id = this.keyResult.id;
+            this.contributor = this.ownerOptions.find(o => o.name === this.keyResult.parent.name);
             this.loading = false;
           });
+
+        this.getObjectiveContributors();
+        this.getKeyResultOwners();
       },
     },
     // thisLevel: {
@@ -284,6 +302,8 @@ export default {
   },
 
   methods: {
+    isDepartment, isOrganization,
+
     async save() {
       const { pageIndex, next } = this.$refs.drawer;
 
@@ -295,7 +315,10 @@ export default {
         try {
           const { name, description, unit, weight, startValue, targetValue } =
             this.thisKeyResult;
-          const parent = this.activeItemRef;
+
+          const parent = db.doc(this.contributor);
+          console.log("PARENT. ", parent);
+
           const data = {
             name,
             description: description || '',
@@ -303,7 +326,7 @@ export default {
             weight: weight || 1,
             startValue,
             targetValue,
-            parent,
+            parent
           };
 
           if (this.thisKeyResult?.id) {
@@ -315,10 +338,30 @@ export default {
               ...data,
               objective: objectiveRef,
             });
-            this.thisKeyResult.id = id;
-            this.thisKeyResult.objective = objectiveRef;
+
+            await db.collection('keyResults')
+              .doc(id)
+              .get()
+              .then((snapshot) => {
+                this.thisKeyResult = snapshot.data();
+                this.thisKeyResult.objective = objectiveRef;
+                console.log("snapshot.parent", snapshot);
+                //this.thisKeyResult.parent = snapshot.parent;
+                this.thisKeyResult.id = id;
+                this.contributor = this.ownerOptions.find(o => o.name === this.keyResult.parent.name);
+                this.loading = false;
+              });
+            console.log("kr parent", this.thisKeyResult)
+            //parentRef = await activePeriodRef.get().then((snapshot) => snapshot.data().parent);
+
+            // TODO: Map this shit
+            // this.thisKeyResult.id = id;
+            //this.thisKeyResult.objective = objectiveRef;
+            //this.thisKeyResult.parent = data.parent;
+            //this.keyResultOwners.push(this.thisKeyResult); // TODO: ????
             this.$emit('create', this.thisKeyResult);
           }
+          await this.syncObjectiveContributor();
           this.$refs.drawer.next();
         } catch (error) {
           console.log(error);
@@ -334,6 +377,7 @@ export default {
       this.loading = true;
       try {
         await KeyResult.archive(this.thisKeyResult.id);
+        await this.syncObjectiveContributor();
         this.thisKeyResult.archived = true;
         this.$emit('archive', this.thisKeyResult);
       } catch (error) {
@@ -347,6 +391,7 @@ export default {
     async restore() {
       try {
         await KeyResult.restore(this.thisKeyResult.id);
+        await this.syncObjectiveContributor();
         this.thisKeyResult.archived = false;
         this.$emit('restore', this.thisKeyResult);
       } catch {
@@ -356,6 +401,65 @@ export default {
       }
     },
 
+    async getObjectiveContributors() {
+      const objectiveRef = await db.doc(`objectives/${this.objective.id}`);
+      const objectiveContributorsRefs = db
+        .collection('objectiveContributors')
+        .where('objective', '==', objectiveRef)
+        .where('archived', '==', false);
+
+      this.$bind('contributors', objectiveContributorsRefs);
+    },
+
+    async getKeyResultOwners() {
+      const objectiveRef = await db.doc(`objectives/${this.objective.id}`);
+      const keyResultRefs = db
+        .collection('keyResults')
+        .where('objective', '==', objectiveRef)
+        .where('archived', '==', false);
+
+      this.$bind('keyResultOwners', keyResultRefs);
+    },
+
+    async syncObjectiveContributor() {
+      let contributors = [...this.contributors];
+      let keyResultOwners = [...this.keyResultOwners];
+
+      // Filter out already present links
+      this.contributors.map(c => {
+        this.keyResultOwners.map(k => {
+          if (c.item.name === k.parent.name) {
+            contributors = contributors.filter((con) => con.item.name !== c.item.name);
+            keyResultOwners = keyResultOwners.filter((kr) => kr.parent.name !== k.parent.name);
+          }
+        });
+      });
+
+      // Add missing contributor
+      keyResultOwners.map(k => {
+        this.createObjectiveContributor(k.parent)
+      });
+
+      // Remove redundant contributors
+      contributors.map(c => {
+        this.removeObjectiveContributor(c.item);
+      });
+    },
+
+    createObjectiveContributor(item) {
+      const itemType = getActiveItemType(item);
+      const itemRef = db.doc(`${itemType}s/${item.id}`);
+      const objectiveRef = db.doc(`objectives/${this.objective.id}`);
+      ObjectiveContributors.create(itemRef, objectiveRef);
+    },
+
+    async removeObjectiveContributor(item) {
+      const itemType = getActiveItemType(item);
+      const itemRef = db.doc(`${itemType}s/${item.id}`);
+      const objectiveRef = db.doc(`objectives/${this.objective.id}`);
+      return ObjectiveContributors.remove(itemRef, objectiveRef);
+    },
+
     close(e) {
       this.$emit('close', e);
     },

From 57dd82f94d070a7bca15a219f753d0cc3fc3f35b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Thu, 5 Oct 2023 12:08:04 +0200
Subject: [PATCH 048/102] Testing without `$bind`

---
 src/components/drawers/EditKeyResult.vue | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/drawers/EditKeyResult.vue b/src/components/drawers/EditKeyResult.vue
index e065af318..165ef4c39 100644
--- a/src/components/drawers/EditKeyResult.vue
+++ b/src/components/drawers/EditKeyResult.vue
@@ -413,12 +413,15 @@ export default {
 
     async getKeyResultOwners() {
       const objectiveRef = await db.doc(`objectives/${this.objective.id}`);
-      const keyResultRefs = db
+      const keyResults = await db
         .collection('keyResults')
         .where('objective', '==', objectiveRef)
-        .where('archived', '==', false);
+        .where('archived', '==', false)
+        .get()
+        .then((snapshot) => snapshot.docs)
+        .then((docs) => docs.map((d) => d.data()));
 
-      this.$bind('keyResultOwners', keyResultRefs);
+      this.keyResultOwners = keyResults;
     },
 
     async syncObjectiveContributor() {
@@ -436,8 +439,8 @@ export default {
       });
 
       // Add missing contributor
-      keyResultOwners.map(k => {
-        this.createObjectiveContributor(k.parent)
+      keyResultOwners.map(async (k) => {
+        this.createObjectiveContributor(await k.parent.get());
       });
 
       // Remove redundant contributors
@@ -447,7 +450,7 @@ export default {
     },
 
     createObjectiveContributor(item) {
-      const itemType = getActiveItemType(item);
+      const itemType = getActiveItemType(item.data());
       const itemRef = db.doc(`${itemType}s/${item.id}`);
       const objectiveRef = db.doc(`objectives/${this.objective.id}`);
       ObjectiveContributors.create(itemRef, objectiveRef);

From 7839e20bfcd3b79b98e901929089ed9dbfe16198 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Wed, 4 Oct 2023 09:26:05 +0200
Subject: [PATCH 049/102] Color code objectives and key results

---
 src/components/EmptyState.vue          |   2 +-
 src/components/GanttChart.vue          |   2 +-
 src/components/KeyResultLinkCard.vue   |   6 +-
 src/components/ProgressBar.vue         |  40 ++++--
 src/components/panes/KeyResultPane.vue | 174 ++++++++++++++++---------
 src/components/panes/ObjectivePane.vue | 136 ++++++++++---------
 src/styles/main.scss                   |   2 +-
 7 files changed, 228 insertions(+), 134 deletions(-)

diff --git a/src/components/EmptyState.vue b/src/components/EmptyState.vue
index 2724529a7..34e00910c 100644
--- a/src/components/EmptyState.vue
+++ b/src/components/EmptyState.vue
@@ -78,10 +78,10 @@ $-empty-state-skins: (
     gap: 1rem;
     justify-content: center;
     max-width: map.get(variables.$breakpoints, 'phablet');
-    height: 100%;
     margin-right: auto;
     margin-left: auto;
     padding: 2rem 1.5rem;
+    text-align: center;
 
     @include bp('tablet-up') {
       gap: 1.5rem;
diff --git a/src/components/GanttChart.vue b/src/components/GanttChart.vue
index 844368e46..0e0450e06 100644
--- a/src/components/GanttChart.vue
+++ b/src/components/GanttChart.vue
@@ -579,7 +579,7 @@ export default {
   flex-direction: column;
   height: 100%;
   overflow: auto;
-  background-color: var(--color-gray);
+  background-color: var(--color-gray-light);
 
   &__inner {
     position: relative;
diff --git a/src/components/KeyResultLinkCard.vue b/src/components/KeyResultLinkCard.vue
index 6c876de2f..243adb939 100644
--- a/src/components/KeyResultLinkCard.vue
+++ b/src/components/KeyResultLinkCard.vue
@@ -31,7 +31,7 @@
           </div>
         </div>
 
-        <progress-bar :progression="progression" compact />
+        <progress-bar :progression="progression" skin="yellow" compact />
       </div>
     </a>
   </router-link>
@@ -111,8 +111,8 @@ export default {
 
   &--active {
     color: var(--color-hover);
-    background-color: var(--color-blue-5);
-    border: 2px solid var(--color-hover);
+    background-color: var(--color-yellow-5);
+    border-color: var(--color-yellow);
   }
 }
 
diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue
index 26ae19d8b..3a4080b13 100644
--- a/src/components/ProgressBar.vue
+++ b/src/components/ProgressBar.vue
@@ -1,12 +1,11 @@
 <template>
-  <div :class="['progress-bar', { 'progress-bar--compact': compact }]">
+  <div :class="['progress-bar', skinClass, { 'progress-bar--compact': compact }]">
     <h4 v-if="title" class="pkt-txt-14-medium">{{ title }}</h4>
     <div class="progress-bar__bar">
       <div
         :class="[
           'progress-bar__value',
           { 'progress-bar__value--indicator': progression > 0 && progression < 1 },
-          { 'progress-bar__value--complete': progression >= 1 },
         ]"
         :style="progressValueStyle"
         role="progressbar"
@@ -44,6 +43,11 @@ export default {
       type: Number,
       default: 0,
     },
+    skin: {
+      type: String,
+      default: 'blue',
+      validator: (value) => ['blue', 'yellow', 'green'].includes(value),
+    },
     leftLabel: {
       type: String,
       default: null,
@@ -75,6 +79,13 @@ export default {
     progressValueStyle() {
       return `width: ${this.percent}%`;
     },
+
+    skinClass() {
+      if (this.progression >= 1) {
+        return 'progress-bar--green';
+      }
+      return `progress-bar--${this.skin}`;
+    },
   },
 };
 </script>
@@ -83,6 +94,11 @@ export default {
 @use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
 
 .progress-bar {
+  // Default skin colors: `blue`
+  --progress-bar-bg: var(--color-grayscale-10);
+  --progress-bar-value: var(--color-blue);
+  --progress-bar-value-indicator: var(--color-blue-dark);
+
   width: 100%;
 
   h4 + &__bar {
@@ -92,7 +108,7 @@ export default {
   &__bar {
     position: relative;
     margin-bottom: 1rem;
-    background-color: var(--color-grayscale-10);
+    background-color: var(--progress-bar-bg);
 
     > span {
       position: absolute;
@@ -104,14 +120,10 @@ export default {
 
   &__value {
     height: 1rem;
-    background-color: var(--color-blue);
+    background-color: var(--progress-bar-value);
 
     &--indicator {
-      border-right: 1px solid var(--color-blue-dark);
-    }
-
-    &--complete {
-      background-color: var(--color-green);
+      border-right: 1px solid var(--progress-bar-value-indicator);
     }
   }
 
@@ -133,5 +145,15 @@ export default {
       height: 0.5rem;
     }
   }
+
+  &--green {
+    --progress-bar-value: var(--color-green);
+    --progress-bar-value-indicator: var(--color-green-dark);
+  }
+
+  &--yellow {
+    --progress-bar-value: var(--color-yellow);
+    --progress-bar-value-indicator: var(--color-yellow-70);
+  }
 }
 </style>
diff --git a/src/components/panes/KeyResultPane.vue b/src/components/panes/KeyResultPane.vue
index d2baed15e..4f3668786 100644
--- a/src/components/panes/KeyResultPane.vue
+++ b/src/components/panes/KeyResultPane.vue
@@ -13,57 +13,75 @@
       :breadcrumbs="breadcrumbs"
     />
 
-    <pkt-tag text-style="normal-text" skin="grey" class="mt-size-8">
-      {{ $t('general.keyResult') }}
-    </pkt-tag>
+    <div class="key-result-pane__details">
+      <div class="key-result-pane__header">
+        <pkt-tag text-style="normal-text" skin="yellow">
+          {{ $t('general.keyResult') }}
+        </pkt-tag>
+
+        <pkt-button
+          v-if="hasEditRights"
+          v-tooltip="$t('btn.updateKeyResult')"
+          skin="tertiary"
+          size="small"
+          variant="icon-only"
+          icon-name="edit"
+          @onClick="$emit('edit-key-result')"
+        />
+      </div>
 
-    <div class="key-result-pane__title">
       <h2 class="pkt-txt-18-medium">{{ activeKeyResult.name }}</h2>
-      <pkt-button
-        v-if="hasEditRights"
-        v-tooltip="$t('btn.updateKeyResult')"
-        skin="tertiary"
-        size="small"
-        variant="icon-only"
-        icon-name="edit"
-        @onClick="$emit('edit-key-result')"
+
+      <HTML-output
+        v-if="activeKeyResult.description"
+        class="key-result-pane__description"
+        :html="activeKeyResult.description"
       />
-    </div>
 
-    <HTML-output
-      v-if="activeKeyResult.description"
-      class="key-result-pane__description"
-      :html="activeKeyResult.description"
-    />
+      <progress-bar
+        class="key-result-pane__progression"
+        :title="`${$t('keyResult.progression')}:`"
+        :progression="progression"
+        :right-label="progressionRightLabel"
+        skin="yellow"
+      />
+    </div>
 
-    <progress-bar
-      class="key-result-pane__progression"
-      :title="`${$t('keyResult.progression')}:`"
-      :progression="progression"
-      :right-label="progressionRightLabel"
-    />
+    <div class="key-result-pane__values">
+      <div class="key-result-pane__values-header">
+        <h3 class="pkt-txt-16-medium">{{ $t('keyResult.registeredValues') }}</h3>
+        <pkt-button
+          v-if="hasEditRights"
+          :text="$t('keyResult.newValue')"
+          skin="primary"
+          size="small"
+          variant="icon-left"
+          icon-name="plus-sign"
+          @onClick="showValueModal = true"
+        />
+      </div>
+
+      <div v-if="isLoading">
+        <loading-small />
+        {{ $t('general.loading') }}
+      </div>
+
+      <widget-progress-history
+        v-else-if="progress.length"
+        :progress="progress"
+        :is-loading="isLoading"
+        @update-record="updateHistoryRecord"
+        @delete-record="deleteHistoryRecord"
+      />
 
-    <widget-progress-history
-      class="key-result-pane__values"
-      :title="$t('keyResult.registeredValues')"
-      :progress="progress"
-      :is-loading="isLoading"
-      @update-record="updateHistoryRecord"
-      @delete-record="deleteHistoryRecord"
-    >
-      <template #title-actions>
-        <div v-if="hasEditRights">
-          <pkt-button
-            :text="$t('keyResult.newValue')"
-            skin="primary"
-            size="small"
-            variant="icon-left"
-            icon-name="plus-sign"
-            @onClick="showValueModal = true"
-          />
-        </div>
-      </template>
-    </widget-progress-history>
+      <empty-state
+        v-else
+        icon="history"
+        :heading="$t('widget.history.empty.heading')"
+        :body="$t('empty.noKeyResultProgress')"
+        skin="warning"
+      />
+    </div>
 
     <widget class="key-result-pane__graph" :title="$t('general.graph')">
       <svg ref="graph" class="graph"></svg>
@@ -114,6 +132,8 @@ import WidgetKeyResultDetails from '@/components/widgets/WidgetKeyResultDetails.
 import HTMLOutput from '@/components/HTMLOutput.vue';
 import ProgressModal from '@/components/modals/ProgressModal.vue';
 import ProgressBar from '@/components/ProgressBar.vue';
+import LoadingSmall from '@/components/LoadingSmall.vue';
+import EmptyState from '@/components/EmptyState.vue';
 
 export default {
   name: 'KeyResultPane',
@@ -131,6 +151,8 @@ export default {
     HTMLOutput,
     ProgressModal,
     ProgressBar,
+    LoadingSmall,
+    EmptyState,
   },
 
   data: () => ({
@@ -304,13 +326,28 @@ export default {
 @use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
 
 .key-result-pane {
-  &__title {
+  background-color: #faf6f1;
+
+  &__details {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1.5rem;
+    background-color: var(--color-white);
+    border-left: 0.25rem solid var(--color-yellow-50);
+
+    @include bp('laptop-up') {
+      margin-top: 2rem;
+    }
+  }
+
+  &__header {
     display: flex;
     justify-content: space-between;
     text-wrap: balance;
 
     .pkt-btn {
-      margin: -0.75rem 0 0 1rem;
+      margin: -0.5rem -0.5rem 0 0;
     }
   }
 
@@ -318,27 +355,37 @@ export default {
     margin-top: 1rem;
   }
 
-  &__values,
-  &__graph {
-    padding: 0;
-    border: 0;
-  }
   &__values {
-    margin-top: 1rem;
+    margin-top: 3rem;
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 1rem;
+    }
+
+    ::v-deep .widget__header {
+      // Temporarily hide the history widget header. The table is
+      // to be replaced
+      display: none;
+    }
   }
 
-  ::v-deep .widget {
-    padding: 1.5rem 0;
+  &__graph {
+    margin-top: 3rem;
 
-    h3 {
-      @include get-text('pkt-txt-16-medium');
+    ::v-deep .widget__header {
+      h3 {
+        @include get-text('pkt-txt-16-medium');
+      }
     }
   }
 
   &__widgets {
-    ::v-deep .widget {
-      border: 0;
+    margin-top: 3rem;
 
+    ::v-deep .widget__header {
       h3 {
         @include get-text('pkt-txt-16');
       }
@@ -346,6 +393,15 @@ export default {
   }
 }
 
+.empty {
+  background-color: transparent;
+}
+
+::v-deep .widget {
+  padding: 0;
+  border: 0;
+}
+
 ::v-deep .pkt-breadcrumbs--mobile {
   width: 100%;
 
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index e5e70d64b..bd3c4c58d 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -11,65 +11,68 @@
       :breadcrumbs="breadcrumbs"
     />
 
-    <pkt-tag text-style="normal-text" skin="grey" class="mt-size-8">
-      {{ $t('general.objective') }}
-    </pkt-tag>
+    <div class="objective-pane__details">
+      <div class="objective-pane__header">
+        <pkt-tag text-style="normal-text" skin="blue">
+          {{ $t('general.objective') }}
+        </pkt-tag>
 
-    <div class="objective-pane__title">
-      <h2 class="pkt-txt-18-medium">{{ activeObjective.name }}</h2>
-      <pkt-button
-        v-if="hasEditRights"
-        v-tooltip="$t('btn.updateObjective')"
-        skin="tertiary"
-        variant="icon-only"
-        size="small"
-        icon-name="edit"
-        @onClick="$emit('edit-objective')"
-      />
-    </div>
+        <pkt-button
+          v-if="hasEditRights"
+          v-tooltip="$t('btn.updateObjective')"
+          skin="tertiary"
+          variant="icon-only"
+          size="small"
+          icon-name="edit"
+          @onClick="$emit('edit-objective')"
+        />
+      </div>
 
-    <HTML-output
-      v-if="activeObjective.description"
-      class="objective-pane__description"
-      :html="activeObjective.description"
-    />
+      <h2 class="pkt-txt-18-medium">{{ activeObjective.name }}</h2>
 
-    <div class="objective-pane__members">
-      <div>
-        <h4 class="pkt-txt-14-medium">{{ $t('objective.owner') }}</h4>
-        <pkt-tag text-style="normal-text" skin="yellow" size="small">
-          {{ activeObjective.parent.name }}
-        </pkt-tag>
-      </div>
+      <HTML-output
+        v-if="activeObjective.description"
+        class="objective-pane__description"
+        :html="activeObjective.description"
+      />
 
-      <div class="objective-pane__contributors">
-        <h4 class="pkt-txt-14-medium">{{ $t('objective.contributors') }}</h4>
-        <ul>
-          <li v-for="c in contributors" :key="c.id" class="objective-pane__contributor">
-            <span class="pkt-txt-14">{{ c.name }}</span>
-            <span
-              class="objective-pane__contributor-tag"
-              :class="[
-                'objective-link-card__tag',
-                'pkt-txt-12-bold',
-                `objective-link-card__tag--${contributorTagMode(c.name)}`,
-              ]"
-              :style="{ background: contributorTagColor(c.name) }"
-            ></span>
-          </li>
-        </ul>
+      <div class="objective-pane__members">
+        <div>
+          <h4 class="pkt-txt-14-medium">{{ $t('objective.owner') }}</h4>
+          <pkt-tag text-style="normal-text" skin="yellow" size="small">
+            {{ activeObjective.parent.name }}
+          </pkt-tag>
+        </div>
+
+        <div class="objective-pane__contributors">
+          <h4 class="pkt-txt-14-medium">{{ $t('objective.contributors') }}</h4>
+          <ul>
+            <li v-for="c in contributors" :key="c.id" class="objective-pane__contributor">
+              <span class="pkt-txt-14">{{ c.name }}</span>
+              <span
+                class="objective-pane__contributor-tag"
+                :class="[
+                  'objective-link-card__tag',
+                  'pkt-txt-12-bold',
+                  `objective-link-card__tag--${contributorTagMode(c.name)}`,
+                ]"
+                :style="{ background: contributorTagColor(c.name) }"
+              ></span>
+            </li>
+          </ul>
+        </div>
       </div>
-    </div>
 
-    <progress-bar
-      class="objective-pane__progression"
-      :title="$t('objective.progressionTitle')"
-      :progression="activeObjective.progression"
-    />
+      <progress-bar
+        class="objective-pane__progression"
+        :title="$t('objective.progressionTitle')"
+        :progression="activeObjective.progression"
+      />
 
-    <div v-if="period" class="mt-size-16">
-      <div class="pkt-txt-14-medium">{{ $t('objective.period') }}</div>
-      <div class="pkt-txt-14">{{ periodDates(period) }}</div>
+      <div v-if="period" class="mt-size-16">
+        <div class="pkt-txt-14-medium">{{ $t('objective.period') }}</div>
+        <div class="pkt-txt-14">{{ periodDates(period) }}</div>
+      </div>
     </div>
 
     <div class="objective-pane__key-results">
@@ -273,15 +276,28 @@ export default {
 @use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
 
 .objective-pane {
-  background-color: var(--color-gray-light);
+  background-color: #f5f5f8;
 
-  &__title {
+  &__details {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1.5rem;
+    background-color: var(--color-white);
+    border-left: 0.25rem solid var(--color-blue-light);
+
+    @include bp('laptop-up') {
+      margin-top: 2rem;
+    }
+  }
+
+  &__header {
     display: flex;
     justify-content: space-between;
     text-wrap: balance;
 
     .pkt-btn {
-      margin: -0.75rem 0 0 1rem;
+      margin: -0.5rem -0.5rem 0 0;
     }
   }
 
@@ -322,10 +338,6 @@ export default {
   &__key-results {
     margin-top: 3rem;
 
-    @include bp('tablet-up') {
-      padding-right: 1.5rem;
-    }
-
     &-header {
       display: flex;
       align-items: center;
@@ -337,7 +349,7 @@ export default {
       position: relative;
 
       @include bp('tablet-up') {
-        margin-left: 3rem;
+        margin: 0 3rem;
       }
 
       & .key-result-link-card {
@@ -385,6 +397,10 @@ export default {
   }
 }
 
+.empty {
+  background-color: transparent;
+}
+
 ::v-deep .pkt-breadcrumbs--mobile {
   width: 100%;
 
diff --git a/src/styles/main.scss b/src/styles/main.scss
index ca9bd54d7..451db6587 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -113,7 +113,7 @@ body.using-mouse :not([class^='pkt-'], [class*=' pkt-']):focus {
   --color-green-dark-15: #b8d9d4;
   --color-red-100: #4d0800;
   --color-red-20: #fad0cb;
-  --color-yellow-80: #774c01;
+  --color-yellow-70: #966a1c;
 
   // Colors in RGB value - add more if needed. SCSS rgba() function
   // can read hex numbers with CSS Variables.

From 431810dd4f9896a18be6508c72e51e49154d8f24 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Thu, 5 Oct 2023 14:50:28 +0200
Subject: [PATCH 050/102] Show correct objective owner

---
 src/components/GanttChart.vue          |  8 +---
 src/components/ObjectiveLinkCard.vue   | 62 +++++++++++++-------------
 src/components/panes/ObjectivePane.vue |  4 +-
 src/components/panes/WorkbenchPane.vue |  5 +--
 4 files changed, 35 insertions(+), 44 deletions(-)

diff --git a/src/components/GanttChart.vue b/src/components/GanttChart.vue
index 0e0450e06..27f9b781b 100644
--- a/src/components/GanttChart.vue
+++ b/src/components/GanttChart.vue
@@ -64,14 +64,8 @@
           <objective-link-card
             v-for="o in group.objectives"
             :key="o.objective.id"
-            :route="{
-              name: 'ObjectiveHome',
-              params: { objectiveId: o.objective.id },
-            }"
-            :title="o.objective.name"
-            :objective-id="o.objective.id"
+            :objective="o.objective"
             :tabindex="o.tabindex"
-            :progression="o.objective.progression"
             :style="objectiveStyle(o)"
             :checkable="workbenchObjectives.length > 0"
             :checked="workbenchObjectives.map((o) => o.id).includes(o.objective.id)"
diff --git a/src/components/ObjectiveLinkCard.vue b/src/components/ObjectiveLinkCard.vue
index 7ef618f6c..8a893280e 100644
--- a/src/components/ObjectiveLinkCard.vue
+++ b/src/components/ObjectiveLinkCard.vue
@@ -1,5 +1,9 @@
 <template>
-  <router-link v-slot="{ href, navigate, isExactActive }" :to="route" custom>
+  <router-link
+    v-slot="{ href, navigate, isExactActive }"
+    :to="{ name: 'ObjectiveHome', params: { objectiveId: objective.id } }"
+    custom
+  >
     <a
       :class="[
         'objective-link-card',
@@ -21,12 +25,13 @@
             @click.stop="$emit('toggle', $event.target.checked)"
           />
           <pkt-tag
+            v-if="objectiveOwner"
             text-style="normal-text"
             skin="yellow"
             size="small"
             class="objective-link-card__owner"
           >
-            {{ activeItem.name }}
+            {{ objectiveOwner.name }}
           </pkt-tag>
 
           <ul class="objective-link-card__tags">
@@ -47,17 +52,17 @@
         </div>
 
         <span class="objective-link-card__title pkt-txt-14">
-          {{ title }}
+          {{ objective.name }}
         </span>
 
-        <progress-bar :progression="progression" />
+        <progress-bar :progression="objective.progression" />
       </div>
     </a>
   </router-link>
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import getActiveItemType from '@/util/getActiveItemType';
 import { PktTag } from '@oslokommune/punkt-vue2';
 import ProgressBar from '@/components/ProgressBar.vue';
 import { contributorTagColor, contributorTagMode } from '@/util/okr';
@@ -73,18 +78,10 @@ export default {
   },
 
   props: {
-    route: {
+    objective: {
       type: Object,
       required: true,
     },
-    title: {
-      type: String,
-      required: true,
-    },
-    progression: {
-      type: Number,
-      required: true,
-    },
     active: {
       type: Boolean,
       default: false,
@@ -101,20 +98,14 @@ export default {
       type: Function,
       default: null,
     },
-    objectiveId: {
-      type: String,
-      required: false,
-      default: null,
-    },
   },
 
   data: () => ({
     keyResults: [],
+    objectiveOwner: null,
   }),
 
   computed: {
-    ...mapState(['activeItem']),
-
     /**
      * Return a list of unique contributors to the key results in
      * `this.keyResults`.
@@ -128,15 +119,26 @@ export default {
   },
 
   async created() {
-    if (this.objectiveId !== null) {
-      const objectiveRef = await db.doc(`objectives/${this.objectiveId}`);
-      const keyResults = await db
-        .collection('keyResults')
-        .where('archived', '==', false)
-        .where('objective', '==', objectiveRef)
-        .orderBy('name');
-
-      this.$bind('keyResults', keyResults);
+    if (this.objective === null) {
+      return;
+    }
+
+    const objectiveRef = await db.doc(`objectives/${this.objective.id}`);
+    const keyResults = await db
+      .collection('keyResults')
+      .where('archived', '==', false)
+      .where('objective', '==', objectiveRef)
+      .orderBy('name');
+    this.$bind('keyResults', keyResults);
+
+    if (typeof this.objective.parent === 'string') {
+      this.$bind('objectiveOwner', db.doc(this.objective.parent));
+    } else {
+      const parentType = getActiveItemType(this.objective.parent);
+      this.$bind(
+        'objectiveOwner',
+        db.collection(`${parentType}s`).doc(this.objective.parent.id)
+      );
     }
   },
 
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index bd3c4c58d..1a72149f4 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -39,9 +39,7 @@
       <div class="objective-pane__members">
         <div>
           <h4 class="pkt-txt-14-medium">{{ $t('objective.owner') }}</h4>
-          <pkt-tag text-style="normal-text" skin="yellow" size="small">
-            {{ activeObjective.parent.name }}
-          </pkt-tag>
+          <span class="pkt-txt-14">{{ activeObjective.parent.name }}</span>
         </div>
 
         <div class="objective-pane__contributors">
diff --git a/src/components/panes/WorkbenchPane.vue b/src/components/panes/WorkbenchPane.vue
index 2bbd08454..f74440cde 100644
--- a/src/components/panes/WorkbenchPane.vue
+++ b/src/components/panes/WorkbenchPane.vue
@@ -15,10 +15,7 @@
     <div class="workbench-pane__objectives">
       <div v-for="objective in workbenchObjectives" :key="objective.id" class="">
         <objective-link-card
-          :route="{ name: 'ObjectiveHome', params: { objectiveId: objective.id } }"
-          :title="objective.name"
-          :objective-id="objective.id"
-          :progression="objective.progression"
+          :objective="objective"
           :active="activeObjective && objective.id === activeObjective.id"
         />
 

From 60b360cf4e896962fed78bb894420cdb0568e5c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Fri, 6 Oct 2023 09:19:08 +0200
Subject: [PATCH 051/102] Tweak contributor color pool

---
 src/config/colors.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/config/colors.js b/src/config/colors.js
index 4b4fb1ac1..ba432b932 100644
--- a/src/config/colors.js
+++ b/src/config/colors.js
@@ -7,10 +7,6 @@ const CONTRIBUTOR_TAG_COLORS = [
     name: 'color-beige-light',
     mode: 'light',
   },
-  {
-    name: 'color-blue',
-    mode: 'light',
-  },
   {
     name: 'color-blue-40',
     mode: 'dark',
@@ -23,6 +19,10 @@ const CONTRIBUTOR_TAG_COLORS = [
     name: 'color-blue-dark-15',
     mode: 'dark',
   },
+  {
+    name: 'color-blue-dark-40',
+    mode: 'dark',
+  },
   {
     name: 'color-blue-light',
     mode: 'light',

From a0e39ad59712ddd1f56cd7c43a5a72910e8b2b78 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Thu, 5 Oct 2023 12:15:07 +0200
Subject: [PATCH 052/102] Prevent wrapping in objective card header

---
 src/components/ObjectiveLinkCard.vue | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/components/ObjectiveLinkCard.vue b/src/components/ObjectiveLinkCard.vue
index 8a893280e..730df70b4 100644
--- a/src/components/ObjectiveLinkCard.vue
+++ b/src/components/ObjectiveLinkCard.vue
@@ -178,10 +178,11 @@ export default {
     padding: 1rem;
   }
 
-  &__header {
+  &__heading {
     display: flex;
     gap: 0.5rem;
     align-items: center;
+    justify-content: space-between;
     white-space: nowrap;
   }
 
@@ -199,12 +200,6 @@ export default {
   }
 }
 
-.objective-link-card__heading {
-  display: flex;
-  gap: 0.5rem;
-  justify-content: space-between;
-}
-
 .objective-link-card__tags {
   display: flex;
   flex: 1 0 auto;

From 77bda1e2c9f8d56d85e035f8e96179f536b6d586 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Thu, 5 Oct 2023 12:15:44 +0200
Subject: [PATCH 053/102] Place objective period above progress bar

---
 src/components/panes/ObjectivePane.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index 1a72149f4..66046a5aa 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -61,16 +61,16 @@
         </div>
       </div>
 
+      <div v-if="period" class="mt-size-16">
+        <div class="pkt-txt-14-medium">{{ $t('objective.period') }}</div>
+        <div class="pkt-txt-14">{{ periodDates(period) }}</div>
+      </div>
+
       <progress-bar
         class="objective-pane__progression"
         :title="$t('objective.progressionTitle')"
         :progression="activeObjective.progression"
       />
-
-      <div v-if="period" class="mt-size-16">
-        <div class="pkt-txt-14-medium">{{ $t('objective.period') }}</div>
-        <div class="pkt-txt-14">{{ periodDates(period) }}</div>
-      </div>
     </div>
 
     <div class="objective-pane__key-results">

From 1e0efd15206d11671f6fcc0ba9097d82f2c3dba3 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Fri, 6 Oct 2023 14:33:14 +0200
Subject: [PATCH 054/102] Redesign the key result history listing

---
 src/components/KeyResultValuesList.vue  | 213 ++++++++++++++++++++++++
 src/components/modals/ProgressModal.vue |   8 +-
 src/components/panes/KeyResultPane.vue  |  35 ++--
 src/components/panes/ObjectivePane.vue  |   8 +-
 src/styles/main.scss                    |   1 +
 src/util/format.js                      |   1 +
 src/util/index.js                       |   1 +
 7 files changed, 249 insertions(+), 18 deletions(-)
 create mode 100644 src/components/KeyResultValuesList.vue

diff --git a/src/components/KeyResultValuesList.vue b/src/components/KeyResultValuesList.vue
new file mode 100644
index 000000000..6f85d1538
--- /dev/null
+++ b/src/components/KeyResultValuesList.vue
@@ -0,0 +1,213 @@
+<template>
+  <div class="key-result-values-list">
+    <table class="key-result-values-list__table">
+      <thead>
+        <tr>
+          <th>{{ $t('widget.history.value') }}</th>
+          <th>{{ $t('widget.history.date') }}</th>
+          <th>{{ $t('widget.history.comment') }}</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="record in progress" :key="record.id">
+          <td>
+            {{ formatValue(record.value) }}
+          </td>
+          <td>
+            {{ dateExtraShort(record.timestamp.toDate()) }}
+          </td>
+          <td>
+            <div>
+              <p v-if="record.comment">{{ record.comment }}</p>
+              <div>
+                <user-link
+                  v-if="record.editedBy || record.createdBy"
+                  :user="record.editedBy || record.createdBy"
+                  @open-user-modal="openProfileModal"
+                />
+                <pkt-button
+                  v-if="hasEditRights"
+                  v-tooltip="$t('tooltip.editProgress')"
+                  size="small"
+                  skin="tertiary"
+                  variant="icon-only"
+                  icon-name="edit"
+                  @onClick="$emit('edit-value', record)"
+                />
+              </div>
+            </div>
+          </td>
+          <td>
+            <div>
+              <user-link
+                v-if="record.editedBy || record.createdBy"
+                :user="record.editedBy || record.createdBy"
+                @open-user-modal="openProfileModal"
+              />
+              <pkt-button
+                v-if="hasEditRights"
+                v-tooltip="$t('tooltip.editProgress')"
+                size="small"
+                skin="tertiary"
+                variant="icon-only"
+                icon-name="edit"
+                @onClick="$emit('edit-value', record)"
+              />
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <profile-modal
+      v-if="showProfileModal"
+      :id="chosenProfileId"
+      @close="closeProfileModal"
+    />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { dateExtraShort } from '@/util';
+import { formatValue } from '@/util/keyResultProgress';
+import { PktButton } from '@oslokommune/punkt-vue2';
+import ProfileModal from '@/components/modals/ProfileModal.vue';
+import UserLink from '@/components/widgets/WidgetProgressHistory/UserLink.vue';
+
+export default {
+  name: 'KeyResultValuesList',
+
+  components: {
+    PktButton,
+    ProfileModal,
+    UserLink,
+  },
+
+  props: {
+    progress: {
+      type: Array,
+      required: true,
+    },
+  },
+
+  data: () => ({
+    showProfileModal: false,
+    chosenProfileId: null,
+  }),
+
+  computed: {
+    ...mapGetters(['hasEditRights']),
+  },
+
+  methods: {
+    formatValue,
+    dateExtraShort,
+
+    openProfileModal(profileId) {
+      this.showProfileModal = true;
+      this.chosenProfileId = profileId;
+    },
+
+    closeProfileModal() {
+      this.showProfileModal = false;
+      this.chosenProfileId = null;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/breakpoints' as *;
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
+
+@mixin table-cell-desktop-up {
+  display: none;
+
+  @include bp('desktop-up') {
+    display: table-cell;
+  }
+}
+
+.key-result-values-list__table {
+  border-spacing: 0 0.5rem;
+
+  th {
+    padding: 0 2rem;
+    text-align: left;
+    @include get-text('pkt-txt-14-medium');
+
+    &:nth-child(1),
+    &:nth-child(2) {
+      text-align: center;
+    }
+
+    &:nth-child(4) {
+      @include table-cell-desktop-up;
+    }
+  }
+
+  td {
+    padding: 1rem 2rem;
+    text-align: left;
+    background-color: var(--color-white);
+    @include get-text('pkt-txt-14');
+
+    &:nth-child(1) {
+      @include get-text('pkt-txt-16-bold');
+      color: var(--color-yellow-100);
+      text-align: center;
+      text-wrap: nowrap;
+      background: var(--color-yellow-50);
+    }
+
+    &:nth-child(2) {
+      padding-right: 1rem;
+      text-align: center;
+    }
+
+    &:nth-child(3) {
+      padding-left: 1rem;
+
+      > div {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+
+        > p {
+          @include get-text('pkt-txt-14-light');
+        }
+
+        > div {
+          display: flex;
+          gap: 1rem;
+          align-items: center;
+
+          .pkt-btn {
+            margin-left: auto;
+          }
+
+          @include bp('desktop-up') {
+            display: none;
+          }
+        }
+      }
+    }
+
+    &:nth-child(4) {
+      @include table-cell-desktop-up;
+
+      > div {
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+
+        .pkt-btn {
+          margin-left: auto;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/modals/ProgressModal.vue b/src/components/modals/ProgressModal.vue
index a5f4d0b23..c1a3cabc9 100644
--- a/src/components/modals/ProgressModal.vue
+++ b/src/components/modals/ProgressModal.vue
@@ -45,6 +45,7 @@
       </div>
 
       <template #actions="{ handleSubmit, submitDisabled }">
+        <btn-delete v-if="record" :disabled="loading" @click="deleteRecord" />
         <btn-save :disabled="submitDisabled || loading" @click="handleSubmit(save)" />
       </template>
     </form-section>
@@ -52,7 +53,7 @@
 </template>
 
 <script>
-import { FormSection, BtnSave } from '@/components/generic/form';
+import { FormSection, BtnDelete, BtnSave } from '@/components/generic/form';
 import ModalWrapper from './ModalWrapper.vue';
 
 export default {
@@ -61,6 +62,7 @@ export default {
   components: {
     ModalWrapper,
     FormSection,
+    BtnDelete,
     BtnSave,
   },
 
@@ -132,6 +134,10 @@ export default {
       this.loading = true;
       this.$emit('update-record', this.record.id, this.formattedData, this.close);
     },
+    async deleteRecord() {
+      this.loading = true;
+      this.$emit('delete-record', this.record.id, this.close);
+    },
     close() {
       this.loading = false;
       this.$emit('close');
diff --git a/src/components/panes/KeyResultPane.vue b/src/components/panes/KeyResultPane.vue
index 4f3668786..132fdecf2 100644
--- a/src/components/panes/KeyResultPane.vue
+++ b/src/components/panes/KeyResultPane.vue
@@ -57,7 +57,7 @@
           size="small"
           variant="icon-left"
           icon-name="plus-sign"
-          @onClick="showValueModal = true"
+          @onClick="openValueModal(null)"
         />
       </div>
 
@@ -66,12 +66,12 @@
         {{ $t('general.loading') }}
       </div>
 
-      <widget-progress-history
+      <key-result-values-list
         v-else-if="progress.length"
         :progress="progress"
-        :is-loading="isLoading"
-        @update-record="updateHistoryRecord"
-        @delete-record="deleteHistoryRecord"
+        class="key-result-pane__table"
+        @edit-value="openValueModal"
+        @delete-value="(record) => deleteHistoryRecord(record.id)"
       />
 
       <empty-state
@@ -107,7 +107,10 @@
 
     <progress-modal
       v-if="showValueModal"
+      :record="chosenProgressValue"
       @create-record="createHistoryRecord"
+      @update-record="updateHistoryRecord"
+      @delete-record="deleteHistoryRecord"
       @close="showValueModal = false"
     />
   </pane-wrapper>
@@ -126,9 +129,9 @@ import { getKeyResultProgressDetails } from '@/util/keyResultProgress';
 import { PktAlert, PktBreadcrumbs, PktButton, PktTag } from '@oslokommune/punkt-vue2';
 import PaneWrapper from '@/components/panes/PaneWrapper.vue';
 import WidgetWrapper from '@/components/widgets/WidgetWrapper.vue';
-import WidgetProgressHistory from '@/components/widgets/WidgetProgressHistory/WidgetProgressHistory.vue';
 // import WidgetKeyResultNotes from '@/components/widgets/WidgetKeyResultNotes.vue';
 import WidgetKeyResultDetails from '@/components/widgets/WidgetKeyResultDetails.vue';
+import KeyResultValuesList from '@/components/KeyResultValuesList.vue';
 import HTMLOutput from '@/components/HTMLOutput.vue';
 import ProgressModal from '@/components/modals/ProgressModal.vue';
 import ProgressBar from '@/components/ProgressBar.vue';
@@ -145,9 +148,9 @@ export default {
     PktTag,
     PaneWrapper,
     Widget: WidgetWrapper,
-    WidgetProgressHistory,
     // WidgetKeyResultNotes,
     WidgetKeyResultDetails,
+    KeyResultValuesList,
     HTMLOutput,
     ProgressModal,
     ProgressBar,
@@ -161,6 +164,7 @@ export default {
     isLoading: false,
     showKeyResultDrawer: false,
     showValueModal: false,
+    chosenProgressValue: null,
   }),
 
   computed: {
@@ -282,12 +286,14 @@ export default {
       }
     },
 
-    async deleteHistoryRecord(id) {
+    async deleteHistoryRecord(id, modalCloseHandler) {
       try {
         await Progress.remove(db.collection('keyResults'), this.activeKeyResult.id, id);
         this.$toasted.show(this.$t('toaster.delete.progress'));
       } catch {
         this.$toasted.error(this.$t('toaster.error.deleteProgress'));
+      } finally {
+        modalCloseHandler();
       }
     },
 
@@ -312,6 +318,11 @@ export default {
       }
     },
 
+    openValueModal(record) {
+      this.showValueModal = true;
+      this.chosenProgressValue = record;
+    },
+
     randomCompletedMessage() {
       const messages = Object.values(this.$t('progress.completedMessages'));
       const randomIndex = getRandomInt(messages.length);
@@ -364,12 +375,10 @@ export default {
       justify-content: space-between;
       margin-bottom: 1rem;
     }
+  }
 
-    ::v-deep .widget__header {
-      // Temporarily hide the history widget header. The table is
-      // to be replaced
-      display: none;
-    }
+  &__table {
+    margin-top: 1rem;
   }
 
   &__graph {
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index 66046a5aa..d0164ca9e 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -347,7 +347,7 @@ export default {
       position: relative;
 
       @include bp('tablet-up') {
-        margin: 0 3rem;
+        margin: 0 1.5rem 0 2rem;
       }
 
       & .key-result-link-card {
@@ -358,15 +358,15 @@ export default {
           &::before,
           &::after {
             position: absolute;
-            left: -2.125rem;
-            width: 2rem;
+            left: -2rem;
+            width: 1.875rem;
             border-left: 2px solid var(--color-grayscale-10);
           }
 
           &::before {
             position: absolute;
             top: 0;
-            left: -2.125rem;
+            left: -2rem;
             height: 50%;
             border-bottom: 2px solid var(--color-grayscale-10);
             content: '';
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 451db6587..7a2edbd98 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -114,6 +114,7 @@ body.using-mouse :not([class^='pkt-'], [class*=' pkt-']):focus {
   --color-red-100: #4d0800;
   --color-red-20: #fad0cb;
   --color-yellow-70: #966a1c;
+  --color-yellow-100: #4d3000;
 
   // Colors in RGB value - add more if needed. SCSS rgba() function
   // can read hex numbers with CSS Variables.
diff --git a/src/util/format.js b/src/util/format.js
index de3cb81f1..bc8e67e87 100644
--- a/src/util/format.js
+++ b/src/util/format.js
@@ -4,6 +4,7 @@ import { format, parseISO, formatISO } from 'date-fns';
 export const dateLong = (d) => format(d, 'PPP');
 export const dateLongCompact = (d) => format(d, 'PP');
 export const dateShort = (d) => format(d, 'P');
+export const dateExtraShort = (d) => format(d, 'dd.MM.yy');
 export const dateTimeShort = (d) => format(d, 'Pp');
 export const dateTimeLong = (d) => format(d, 'PPPp');
 
diff --git a/src/util/index.js b/src/util/index.js
index d0cb7885e..c52df3cd4 100644
--- a/src/util/index.js
+++ b/src/util/index.js
@@ -1,6 +1,7 @@
 export { dateLong } from './format';
 export { dateLongCompact } from './format';
 export { dateShort } from './format';
+export { dateExtraShort } from './format';
 export { dateTimeShort } from './format';
 export { dateTimeLong } from './format';
 export { periodDates } from './format';

From 455ad43704271f9a7a156198c7d5d57134d0d526 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Mon, 9 Oct 2023 09:13:02 +0200
Subject: [PATCH 055/102] Move progress graph to key result card

---
 src/components/panes/KeyResultPane.vue  | 28 +++++++------------------
 src/util/LineChart/linechart-helpers.js |  4 ++--
 src/util/LineChart/symbols.js           |  4 ++--
 3 files changed, 12 insertions(+), 24 deletions(-)

diff --git a/src/components/panes/KeyResultPane.vue b/src/components/panes/KeyResultPane.vue
index 132fdecf2..154fd5644 100644
--- a/src/components/panes/KeyResultPane.vue
+++ b/src/components/panes/KeyResultPane.vue
@@ -38,9 +38,11 @@
         :html="activeKeyResult.description"
       />
 
+      <h4 class="pkt-txt-14-medium">{{ $t('keyResult.progression') }}:</h4>
+
+      <svg ref="graph" class="key-result-pane__graph"></svg>
+
       <progress-bar
-        class="key-result-pane__progression"
-        :title="`${$t('keyResult.progression')}:`"
         :progression="progression"
         :right-label="progressionRightLabel"
         skin="yellow"
@@ -83,10 +85,6 @@
       />
     </div>
 
-    <widget class="key-result-pane__graph" :title="$t('general.graph')">
-      <svg ref="graph" class="graph"></svg>
-    </widget>
-
     <pkt-alert v-if="activeKeyResult.auto" skin="info">
       {{ $t('keyResult.autoHelpText') }}
     </pkt-alert>
@@ -128,7 +126,6 @@ import { getRandomInt } from '@/util';
 import { getKeyResultProgressDetails } from '@/util/keyResultProgress';
 import { PktAlert, PktBreadcrumbs, PktButton, PktTag } from '@oslokommune/punkt-vue2';
 import PaneWrapper from '@/components/panes/PaneWrapper.vue';
-import WidgetWrapper from '@/components/widgets/WidgetWrapper.vue';
 // import WidgetKeyResultNotes from '@/components/widgets/WidgetKeyResultNotes.vue';
 import WidgetKeyResultDetails from '@/components/widgets/WidgetKeyResultDetails.vue';
 import KeyResultValuesList from '@/components/KeyResultValuesList.vue';
@@ -147,7 +144,6 @@ export default {
     PktBreadcrumbs,
     PktTag,
     PaneWrapper,
-    Widget: WidgetWrapper,
     // WidgetKeyResultNotes,
     WidgetKeyResultDetails,
     KeyResultValuesList,
@@ -254,7 +250,7 @@ export default {
     renderGraph() {
       if (!this.graph) {
         this.graph = new LineChart(this.$refs.graph, {
-          height: 450,
+          height: 350,
           tooltips: true,
         });
       }
@@ -362,10 +358,6 @@ export default {
     }
   }
 
-  &__progression {
-    margin-top: 1rem;
-  }
-
   &__values {
     margin-top: 3rem;
 
@@ -382,13 +374,9 @@ export default {
   }
 
   &__graph {
-    margin-top: 3rem;
-
-    ::v-deep .widget__header {
-      h3 {
-        @include get-text('pkt-txt-16-medium');
-      }
-    }
+    --graph-value-line: var(--color-yellow);
+    --graph-symbol-fill: var(--color-yellow);
+    --graph-symbol-color: var(--color-yellow-100);
   }
 
   &__widgets {
diff --git a/src/util/LineChart/linechart-helpers.js b/src/util/LineChart/linechart-helpers.js
index 797d2cb6e..8e0705f75 100644
--- a/src/util/LineChart/linechart-helpers.js
+++ b/src/util/LineChart/linechart-helpers.js
@@ -15,8 +15,8 @@ const LEGEND_LABEL_SPACING = 10;
 const Tooltip = Vue.extend(IndicatorTooltip);
 
 export const GRAPH_COLORS = {
-  valueLine: 'var(--color-blue-light)',
-  targetLine: 'var(--color-green)',
+  valueLine: 'var(--graph-value-line, var(--color-blue-light))',
+  targetLine: 'var(--graph-target-line, var(--color-green))',
 };
 
 export function initSvg(svg) {
diff --git a/src/util/LineChart/symbols.js b/src/util/LineChart/symbols.js
index 4e563bd47..3d625dc25 100644
--- a/src/util/LineChart/symbols.js
+++ b/src/util/LineChart/symbols.js
@@ -1,7 +1,7 @@
 // eslint-disable-next-line import/prefer-default-export
 export function addCommentSymbol(el) {
-  const fill = 'var(--color-secondary-light)';
-  const color = 'var(--primary-color)';
+  const fill = 'var(--graph-symbol-fill, var(--color-blue-light))';
+  const color = 'var(--graph-symbol-color, var(--color-blue-dark))';
 
   const pattern = el
     .append('pattern')

From 40db0d5f7d828c54f4477374e508435497ceea86 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Tue, 10 Oct 2023 09:27:36 +0200
Subject: [PATCH 056/102] Fix key result values table responsiveness

---
 src/components/KeyResultValuesList.vue | 126 ++++++-------------------
 1 file changed, 30 insertions(+), 96 deletions(-)

diff --git a/src/components/KeyResultValuesList.vue b/src/components/KeyResultValuesList.vue
index 6f85d1538..1c5643d5b 100644
--- a/src/components/KeyResultValuesList.vue
+++ b/src/components/KeyResultValuesList.vue
@@ -7,6 +7,7 @@
           <th>{{ $t('widget.history.date') }}</th>
           <th>{{ $t('widget.history.comment') }}</th>
           <th></th>
+          <th></th>
         </tr>
       </thead>
       <tbody>
@@ -15,56 +16,30 @@
             {{ formatValue(record.value) }}
           </td>
           <td>
-            {{ dateExtraShort(record.timestamp.toDate()) }}
+            <span v-tooltip="addedBy(record)">
+              {{ dateExtraShort(record.timestamp.toDate()) }}
+            </span>
+          </td>
+          <td>
+            <p v-if="record.comment">{{ record.comment }}</p>
           </td>
           <td>
-            <div>
-              <p v-if="record.comment">{{ record.comment }}</p>
-              <div>
-                <user-link
-                  v-if="record.editedBy || record.createdBy"
-                  :user="record.editedBy || record.createdBy"
-                  @open-user-modal="openProfileModal"
-                />
-                <pkt-button
-                  v-if="hasEditRights"
-                  v-tooltip="$t('tooltip.editProgress')"
-                  size="small"
-                  skin="tertiary"
-                  variant="icon-only"
-                  icon-name="edit"
-                  @onClick="$emit('edit-value', record)"
-                />
-              </div>
-            </div>
+            <span v-if="addedBy(record)">{{ addedBy(record) }}</span>
           </td>
           <td>
-            <div>
-              <user-link
-                v-if="record.editedBy || record.createdBy"
-                :user="record.editedBy || record.createdBy"
-                @open-user-modal="openProfileModal"
-              />
-              <pkt-button
-                v-if="hasEditRights"
-                v-tooltip="$t('tooltip.editProgress')"
-                size="small"
-                skin="tertiary"
-                variant="icon-only"
-                icon-name="edit"
-                @onClick="$emit('edit-value', record)"
-              />
-            </div>
+            <pkt-button
+              v-if="hasEditRights"
+              v-tooltip="$t('tooltip.editProgress')"
+              size="small"
+              skin="tertiary"
+              variant="icon-only"
+              icon-name="edit"
+              @onClick="$emit('edit-value', record)"
+            />
           </td>
         </tr>
       </tbody>
     </table>
-
-    <profile-modal
-      v-if="showProfileModal"
-      :id="chosenProfileId"
-      @close="closeProfileModal"
-    />
   </div>
 </template>
 
@@ -73,16 +48,12 @@ import { mapGetters } from 'vuex';
 import { dateExtraShort } from '@/util';
 import { formatValue } from '@/util/keyResultProgress';
 import { PktButton } from '@oslokommune/punkt-vue2';
-import ProfileModal from '@/components/modals/ProfileModal.vue';
-import UserLink from '@/components/widgets/WidgetProgressHistory/UserLink.vue';
 
 export default {
   name: 'KeyResultValuesList',
 
   components: {
     PktButton,
-    ProfileModal,
-    UserLink,
   },
 
   props: {
@@ -92,11 +63,6 @@ export default {
     },
   },
 
-  data: () => ({
-    showProfileModal: false,
-    chosenProfileId: null,
-  }),
-
   computed: {
     ...mapGetters(['hasEditRights']),
   },
@@ -105,14 +71,9 @@ export default {
     formatValue,
     dateExtraShort,
 
-    openProfileModal(profileId) {
-      this.showProfileModal = true;
-      this.chosenProfileId = profileId;
-    },
-
-    closeProfileModal() {
-      this.showProfileModal = false;
-      this.chosenProfileId = null;
+    addedBy(record) {
+      const user = record.editedBy || record.createdBy;
+      return user ? user.displayName || user.id : null;
     },
   },
 };
@@ -134,7 +95,7 @@ export default {
   border-spacing: 0 0.5rem;
 
   th {
-    padding: 0 2rem;
+    padding: 0 1rem;
     text-align: left;
     @include get-text('pkt-txt-14-medium');
 
@@ -149,13 +110,15 @@ export default {
   }
 
   td {
-    padding: 1rem 2rem;
+    padding: 1rem;
     text-align: left;
+    text-wrap: balance;
     background-color: var(--color-white);
     @include get-text('pkt-txt-14');
 
     &:nth-child(1) {
       @include get-text('pkt-txt-16-bold');
+      padding: 1rem 2rem;
       color: var(--color-yellow-100);
       text-align: center;
       text-wrap: nowrap;
@@ -163,50 +126,21 @@ export default {
     }
 
     &:nth-child(2) {
-      padding-right: 1rem;
+      padding-left: 2rem;
       text-align: center;
     }
 
     &:nth-child(3) {
-      padding-left: 1rem;
-
-      > div {
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-
-        > p {
-          @include get-text('pkt-txt-14-light');
-        }
-
-        > div {
-          display: flex;
-          gap: 1rem;
-          align-items: center;
-
-          .pkt-btn {
-            margin-left: auto;
-          }
-
-          @include bp('desktop-up') {
-            display: none;
-          }
-        }
-      }
+      width: 100%;
     }
 
     &:nth-child(4) {
       @include table-cell-desktop-up;
+      min-width: 10rem;
+    }
 
-      > div {
-        display: flex;
-        gap: 0.5rem;
-        align-items: center;
-
-        .pkt-btn {
-          margin-left: auto;
-        }
-      }
+    &:nth-child(5) {
+      padding-left: 0;
     }
   }
 }

From dede2fa25528d6b72afbf1be3eaea5b453fd260f Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Tue, 10 Oct 2023 14:08:34 +0200
Subject: [PATCH 057/102] Preserve line breaks

---
 src/components/KeyResultValuesList.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/KeyResultValuesList.vue b/src/components/KeyResultValuesList.vue
index 1c5643d5b..29cd4ad84 100644
--- a/src/components/KeyResultValuesList.vue
+++ b/src/components/KeyResultValuesList.vue
@@ -132,6 +132,7 @@ export default {
 
     &:nth-child(3) {
       width: 100%;
+      white-space: pre-line;
     }
 
     &:nth-child(4) {

From 1cc89c46827b35c1b54bb086e213fc2f67440705 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Tue, 10 Oct 2023 14:11:32 +0200
Subject: [PATCH 058/102] Add header label for edited by column

---
 src/components/KeyResultValuesList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/KeyResultValuesList.vue b/src/components/KeyResultValuesList.vue
index 29cd4ad84..ad897e57c 100644
--- a/src/components/KeyResultValuesList.vue
+++ b/src/components/KeyResultValuesList.vue
@@ -6,7 +6,7 @@
           <th>{{ $t('widget.history.value') }}</th>
           <th>{{ $t('widget.history.date') }}</th>
           <th>{{ $t('widget.history.comment') }}</th>
-          <th></th>
+          <th>{{ $t('widget.history.changedBy') }}</th>
           <th></th>
         </tr>
       </thead>

From 7755f728df79681f1903a5906d81c2cceb2a3be8 Mon Sep 17 00:00:00 2001
From: "Anne M. P." <annemerete.pettersen@origo.oslo.kommune.no>
Date: Thu, 12 Oct 2023 08:53:42 +0200
Subject: [PATCH 059/102] Added async await logic

---
 src/components/drawers/EditKeyResult.vue      | 118 ++++++++----------
 .../ObjectiveContributors.js                  |  11 ++
 2 files changed, 65 insertions(+), 64 deletions(-)

diff --git a/src/components/drawers/EditKeyResult.vue b/src/components/drawers/EditKeyResult.vue
index 165ef4c39..3b975a6a5 100644
--- a/src/components/drawers/EditKeyResult.vue
+++ b/src/components/drawers/EditKeyResult.vue
@@ -41,7 +41,6 @@
             name="owner"
             input-type="select"
             :select-options="ownerOptions"
-            :select-reduce="(option) => option.value"
             :label="$t('fields.owner')"
             rules="required"
           />
@@ -199,8 +198,6 @@ export default {
     pageCount: 2,
     loading: false,
     contributor: null,
-    contributors: [],
-    keyResultOwners: [],
   }),
 
   computed: {
@@ -214,11 +211,11 @@ export default {
     thisLevel() {
       if (isOrganization(this.activeItem)) {
         return this.organizations.find((o) => o.id === this.activeItem.id);
-      }
-      if (isDepartment(this.activeItem)) {
+      } else if (isDepartment(this.activeItem)) {
         return this.departments.find((d) => d.id === this.activeItem.id);
+      } else {
+        return this.products.find((p) => p.id === this.activeItem.id);
       }
-      return {};
     },
     children() {
       if (isOrganization(this.activeItem)) {
@@ -231,16 +228,7 @@ export default {
           (product) => product.department.id === this.activeItem.id
         );
       }
-      return {};
-    },
-    childCollection() {
-      if (isOrganization(this.activeItem)) {
-        return 'departments';
-      }
-      if (isDepartment(this.activeItem)) {
-        return 'products';
-      }
-      return null;
+      return [];
     },
     thisLevelOption() {
       return {
@@ -290,15 +278,15 @@ export default {
         this.getKeyResultOwners();
       },
     },
-    // thisLevel: {
-    //   immediate: true,
-    //   async handler() {
-    //     // Set currentLevel as default option for key result owner
-    //     if (!this.keyResult.id) {
-    //       this.thisKeyResult.parent = this.thisLevelOption;
-    //     }
-    //   },
-    // },
+     thisLevel: {
+       immediate: true,
+       async handler() {
+         // Set currentLevel as default option for key result owner
+         if (!this.keyResult?.id) {
+           this.contributor = this.thisLevelOption;
+         }
+       },
+     },
   },
 
   methods: {
@@ -316,8 +304,7 @@ export default {
           const { name, description, unit, weight, startValue, targetValue } =
             this.thisKeyResult;
 
-          const parent = db.doc(this.contributor);
-          console.log("PARENT. ", parent);
+          const parent = db.doc(this.contributor.value);
 
           const data = {
             name,
@@ -338,27 +325,8 @@ export default {
               ...data,
               objective: objectiveRef,
             });
-
-            await db.collection('keyResults')
-              .doc(id)
-              .get()
-              .then((snapshot) => {
-                this.thisKeyResult = snapshot.data();
-                this.thisKeyResult.objective = objectiveRef;
-                console.log("snapshot.parent", snapshot);
-                //this.thisKeyResult.parent = snapshot.parent;
-                this.thisKeyResult.id = id;
-                this.contributor = this.ownerOptions.find(o => o.name === this.keyResult.parent.name);
-                this.loading = false;
-              });
-            console.log("kr parent", this.thisKeyResult)
-            //parentRef = await activePeriodRef.get().then((snapshot) => snapshot.data().parent);
-
-            // TODO: Map this shit
-            // this.thisKeyResult.id = id;
-            //this.thisKeyResult.objective = objectiveRef;
-            //this.thisKeyResult.parent = data.parent;
-            //this.keyResultOwners.push(this.thisKeyResult); // TODO: ????
+            this.thisKeyResult.id = id;
+            this.thisKeyResult.objective = objectiveRef;
             this.$emit('create', this.thisKeyResult);
           }
           await this.syncObjectiveContributor();
@@ -403,12 +371,23 @@ export default {
 
     async getObjectiveContributors() {
       const objectiveRef = await db.doc(`objectives/${this.objective.id}`);
-      const objectiveContributorsRefs = db
+      const objectiveContributors = await db
         .collection('objectiveContributors')
         .where('objective', '==', objectiveRef)
-        .where('archived', '==', false);
+        .where('archived', '==', false)
+        .get()
+        .then((snapshot) => snapshot.docs)
+        .then((docs) => docs.map((d) => d.data()));
 
-      this.$bind('contributors', objectiveContributorsRefs);
+      const contributors = await Promise.all(
+        objectiveContributors.map(async (con) => {
+          return {
+            ref: await con.item.get(),
+            name: await con.item.get().then((snapshot) => snapshot.data().name),
+          }
+        })
+      );
+      return contributors;
     },
 
     async getKeyResultOwners() {
@@ -421,31 +400,42 @@ export default {
         .then((snapshot) => snapshot.docs)
         .then((docs) => docs.map((d) => d.data()));
 
-      this.keyResultOwners = keyResults;
+      const keyResultNames = await Promise.all(
+        keyResults.map(async (owner) => {
+          return {
+            ref: await owner.parent.get(),
+            name: await owner.parent.get().then((snapshot) => snapshot.data().name),
+          }
+        })
+      );
+      return keyResultNames;
     },
 
     async syncObjectiveContributor() {
-      let contributors = [...this.contributors];
-      let keyResultOwners = [...this.keyResultOwners];
+      const keyResultOwners = await this.getKeyResultOwners();
+      const contributors = await this.getObjectiveContributors();
+
+      let contributorsCopy = [...contributors];
+      let keyResultOwnersCopy = [...keyResultOwners];
 
       // Filter out already present links
-      this.contributors.map(c => {
-        this.keyResultOwners.map(k => {
-          if (c.item.name === k.parent.name) {
-            contributors = contributors.filter((con) => con.item.name !== c.item.name);
-            keyResultOwners = keyResultOwners.filter((kr) => kr.parent.name !== k.parent.name);
+      contributors.map(async c => {
+        keyResultOwners.map(async k => {
+          if (c.name === k.name) {
+            contributorsCopy = contributorsCopy.filter((con) => con.name !== c.name);
+            keyResultOwnersCopy = keyResultOwnersCopy.filter((kr) => kr.name !== k.name);
           }
         });
       });
 
       // Add missing contributor
-      keyResultOwners.map(async (k) => {
-        this.createObjectiveContributor(await k.parent.get());
+      keyResultOwnersCopy.map(async (k) => {
+        this.createObjectiveContributor(await k.ref);
       });
 
       // Remove redundant contributors
-      contributors.map(c => {
-        this.removeObjectiveContributor(c.item);
+      contributorsCopy.map(async c => {
+        this.removeObjectiveContributor(await c.ref);
       });
     },
 
@@ -457,7 +447,7 @@ export default {
     },
 
     async removeObjectiveContributor(item) {
-      const itemType = getActiveItemType(item);
+      const itemType = getActiveItemType(item.data());
       const itemRef = db.doc(`${itemType}s/${item.id}`);
       const objectiveRef = db.doc(`objectives/${this.objective.id}`);
       return ObjectiveContributors.remove(itemRef, objectiveRef);
diff --git a/src/db/ObjectiveContributors/ObjectiveContributors.js b/src/db/ObjectiveContributors/ObjectiveContributors.js
index 6fcd4bb62..7f2e8ac16 100644
--- a/src/db/ObjectiveContributors/ObjectiveContributors.js
+++ b/src/db/ObjectiveContributors/ObjectiveContributors.js
@@ -12,6 +12,17 @@ const create = async (itemRef, objectiveRef) => {
     throw new Error(`Cannot find objcetive with ID ${objectiveRef.id}`);
   }
 
+  const contributors = await db
+    .collection('objectiveContributors')
+    .where('objective', '==', objectiveRef)
+    .where('item', '==', itemRef)
+    .get()
+    .then((snapshot) => snapshot.docs.map((doc) => doc.ref));
+
+  if (contributors.length > 0) {
+    return;
+  }
+
   const data = { item: itemRef, objective: objectiveRef };
 
   validateCreateProps(props, data);

From b08daf4ab3a93664a182bf9e16857f50b0624ea7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Thu, 12 Oct 2023 12:52:53 +0200
Subject: [PATCH 060/102] Avoid duplicate objective listing

---
 src/store/index.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/store/index.js b/src/store/index.js
index 20fc7d4cf..53e0fabf5 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -131,8 +131,14 @@ export const storeGetters = {
    * `state.objectiveContributors` enriched with ID.
    */
   objectivesWithID: (state) => {
+    const objectiveIDs = state.objectives.map((o) => o.id);
     const externalObjectives = state.objectiveContributors
-      .filter((oc) => typeof oc.objective !== 'string')
+      .filter((oc) => {
+        return (
+          // Filter out those that aren't external
+          typeof oc.objective !== 'string' && !objectiveIDs.includes(oc.objective.id)
+        );
+      })
       .map((oc) => oc.objective);
 
     return state.objectives.concat(externalObjectives).map((o) => ({

From 6f5c8549aced9d4e22050d22f1ed818a80e6bed8 Mon Sep 17 00:00:00 2001
From: "Anne M. P." <annemerete.pettersen@origo.oslo.kommune.no>
Date: Thu, 12 Oct 2023 12:55:18 +0200
Subject: [PATCH 061/102] Linting

---
 src/components/drawers/EditKeyResult.vue      | 49 ++++++++++---------
 .../ObjectiveContributors.js                  |  2 +-
 2 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/src/components/drawers/EditKeyResult.vue b/src/components/drawers/EditKeyResult.vue
index 3b975a6a5..923d9c54c 100644
--- a/src/components/drawers/EditKeyResult.vue
+++ b/src/components/drawers/EditKeyResult.vue
@@ -159,8 +159,10 @@ import { PktButton } from '@oslokommune/punkt-vue2';
 import { FormSection, BtnSave, BtnDelete } from '@/components/generic/form';
 import ArchivedRestore from '@/components/ArchivedRestore.vue';
 import PagedDrawerWrapper from '@/components/drawers/PagedDrawerWrapper.vue';
-import { isDepartment, isOrganization } from '@/util/getActiveItemType';
-import getActiveItemType from '@/util/getActiveItemType';
+import getActiveItemType, {
+  isDepartment,
+  isOrganization,
+} from '@/util/getActiveItemType';
 
 export default {
   name: 'EditKeyResult',
@@ -211,11 +213,11 @@ export default {
     thisLevel() {
       if (isOrganization(this.activeItem)) {
         return this.organizations.find((o) => o.id === this.activeItem.id);
-      } else if (isDepartment(this.activeItem)) {
+      }
+      if (isDepartment(this.activeItem)) {
         return this.departments.find((d) => d.id === this.activeItem.id);
-      } else {
-        return this.products.find((p) => p.id === this.activeItem.id);
       }
+      return this.products.find((p) => p.id === this.activeItem.id);
     },
     children() {
       if (isOrganization(this.activeItem)) {
@@ -270,7 +272,9 @@ export default {
           .then((snapshot) => {
             this.thisKeyResult = snapshot.data();
             this.thisKeyResult.id = this.keyResult.id;
-            this.contributor = this.ownerOptions.find(o => o.name === this.keyResult.parent.name);
+            this.contributor = this.ownerOptions.find(
+              (o) => o.name === this.keyResult.parent.name
+            );
             this.loading = false;
           });
 
@@ -278,19 +282,20 @@ export default {
         this.getKeyResultOwners();
       },
     },
-     thisLevel: {
-       immediate: true,
-       async handler() {
-         // Set currentLevel as default option for key result owner
-         if (!this.keyResult?.id) {
-           this.contributor = this.thisLevelOption;
-         }
-       },
-     },
+    thisLevel: {
+      immediate: true,
+      async handler() {
+        // Set currentLevel as default option for key result owner
+        if (!this.keyResult?.id) {
+          this.contributor = this.thisLevelOption;
+        }
+      },
+    },
   },
 
   methods: {
-    isDepartment, isOrganization,
+    isDepartment,
+    isOrganization,
 
     async save() {
       const { pageIndex, next } = this.$refs.drawer;
@@ -313,7 +318,7 @@ export default {
             weight: weight || 1,
             startValue,
             targetValue,
-            parent
+            parent,
           };
 
           if (this.thisKeyResult?.id) {
@@ -384,7 +389,7 @@ export default {
           return {
             ref: await con.item.get(),
             name: await con.item.get().then((snapshot) => snapshot.data().name),
-          }
+          };
         })
       );
       return contributors;
@@ -405,7 +410,7 @@ export default {
           return {
             ref: await owner.parent.get(),
             name: await owner.parent.get().then((snapshot) => snapshot.data().name),
-          }
+          };
         })
       );
       return keyResultNames;
@@ -419,8 +424,8 @@ export default {
       let keyResultOwnersCopy = [...keyResultOwners];
 
       // Filter out already present links
-      contributors.map(async c => {
-        keyResultOwners.map(async k => {
+      contributors.map(async (c) => {
+        keyResultOwners.map(async (k) => {
           if (c.name === k.name) {
             contributorsCopy = contributorsCopy.filter((con) => con.name !== c.name);
             keyResultOwnersCopy = keyResultOwnersCopy.filter((kr) => kr.name !== k.name);
@@ -434,7 +439,7 @@ export default {
       });
 
       // Remove redundant contributors
-      contributorsCopy.map(async c => {
+      contributorsCopy.map(async (c) => {
         this.removeObjectiveContributor(await c.ref);
       });
     },
diff --git a/src/db/ObjectiveContributors/ObjectiveContributors.js b/src/db/ObjectiveContributors/ObjectiveContributors.js
index 7f2e8ac16..f1d0e0dd9 100644
--- a/src/db/ObjectiveContributors/ObjectiveContributors.js
+++ b/src/db/ObjectiveContributors/ObjectiveContributors.js
@@ -20,7 +20,7 @@ const create = async (itemRef, objectiveRef) => {
     .then((snapshot) => snapshot.docs.map((doc) => doc.ref));
 
   if (contributors.length > 0) {
-    return;
+    return undefined;
   }
 
   const data = { item: itemRef, objective: objectiveRef };

From 9645877b465aae5d4ad4444ab04274cb547a18d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Thu, 12 Oct 2023 15:01:25 +0200
Subject: [PATCH 062/102] Hide archived external objectives

---
 src/store/index.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/store/index.js b/src/store/index.js
index 53e0fabf5..b112152de 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -135,8 +135,11 @@ export const storeGetters = {
     const externalObjectives = state.objectiveContributors
       .filter((oc) => {
         return (
-          // Filter out those that aren't external
-          typeof oc.objective !== 'string' && !objectiveIDs.includes(oc.objective.id)
+          typeof oc.objective !== 'string' &&
+          // Filter out archived objectives ...
+          !oc.objective.archived &&
+          // ... and those that aren't external.
+          !objectiveIDs.includes(oc.objective.id)
         );
       })
       .map((oc) => oc.objective);

From a964f050e53d8267a51ddc55c7f9662c4581bd21 Mon Sep 17 00:00:00 2001
From: "Anne M. P." <annemerete.pettersen@origo.oslo.kommune.no>
Date: Fri, 13 Oct 2023 12:59:05 +0200
Subject: [PATCH 063/102] Fix after code review

---
 firestore.rules                               |  1 -
 src/components/drawers/EditKeyResult.vue      | 32 +++++++++++--------
 .../ObjectiveContributors.js                  |  3 +-
 3 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/firestore.rules b/firestore.rules
index c8648737a..8d391cf01 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -188,7 +188,6 @@ service cloud.firestore {
     match /objectiveContributors/{document} {
       allow read: if isSignedIn();
       allow create: if isSuperAdmin() || isMemberOfObjectiveParentAfter(document, 'objectiveContributors');
-      allow update: if isSuperAdmin() || isMemberOfObjectiveParentAfter(document, 'objectiveContributors');
       allow delete: if isSuperAdmin() || isMemberOfObjectiveParentBefore(document, 'objectiveContributors');
     }
 
diff --git a/src/components/drawers/EditKeyResult.vue b/src/components/drawers/EditKeyResult.vue
index 923d9c54c..d5b2d3de0 100644
--- a/src/components/drawers/EditKeyResult.vue
+++ b/src/components/drawers/EditKeyResult.vue
@@ -277,9 +277,6 @@ export default {
             );
             this.loading = false;
           });
-
-        this.getObjectiveContributors();
-        this.getKeyResultOwners();
       },
     },
     thisLevel: {
@@ -420,27 +417,36 @@ export default {
       const keyResultOwners = await this.getKeyResultOwners();
       const contributors = await this.getObjectiveContributors();
 
-      let contributorsCopy = [...contributors];
-      let keyResultOwnersCopy = [...keyResultOwners];
+      let redundantContributors = [...contributors];
+      let keyResWithNoContributor = [...keyResultOwners];
 
       // Filter out already present links
-      contributors.map(async (c) => {
-        keyResultOwners.map(async (k) => {
+      contributors.forEach((c) => {
+        keyResultOwners.forEach((k) => {
           if (c.name === k.name) {
-            contributorsCopy = contributorsCopy.filter((con) => con.name !== c.name);
-            keyResultOwnersCopy = keyResultOwnersCopy.filter((kr) => kr.name !== k.name);
+            redundantContributors = redundantContributors.filter(
+              (con) => con.name !== c.name
+            );
+            keyResWithNoContributor = keyResWithNoContributor.filter(
+              (kr) => kr.name !== k.name
+            );
           }
         });
       });
 
+      // We only need one contributor element per unique keyRes parent (here mapped by name)
+      const uniqueKeyResWithNoContributor = keyResWithNoContributor.filter(
+        (value, index, self) => index === self.findIndex((t) => t.name === value.name)
+      );
+
       // Add missing contributor
-      keyResultOwnersCopy.map(async (k) => {
-        this.createObjectiveContributor(await k.ref);
+      uniqueKeyResWithNoContributor.forEach((k) => {
+        this.createObjectiveContributor(k.ref);
       });
 
       // Remove redundant contributors
-      contributorsCopy.map(async (c) => {
-        this.removeObjectiveContributor(await c.ref);
+      redundantContributors.forEach((c) => {
+        this.removeObjectiveContributor(c.ref);
       });
     },
 
diff --git a/src/db/ObjectiveContributors/ObjectiveContributors.js b/src/db/ObjectiveContributors/ObjectiveContributors.js
index f1d0e0dd9..11a546844 100644
--- a/src/db/ObjectiveContributors/ObjectiveContributors.js
+++ b/src/db/ObjectiveContributors/ObjectiveContributors.js
@@ -19,8 +19,9 @@ const create = async (itemRef, objectiveRef) => {
     .get()
     .then((snapshot) => snapshot.docs.map((doc) => doc.ref));
 
+  // Avoid creating duplicates
   if (contributors.length > 0) {
-    return undefined;
+    return contributors[0];
   }
 
   const data = { item: itemRef, objective: objectiveRef };

From 575c0adf60663029922b31ff454a32017a29bd1b Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Wed, 18 Oct 2023 11:00:00 +0200
Subject: [PATCH 064/102] Use less flamboyant color coding of objectives and
 key results

---
 src/components/KeyResultLinkCard.vue   |  6 +--
 src/components/panes/KeyResultPane.vue | 73 +++++++++++---------------
 src/components/panes/ObjectivePane.vue | 29 +++++-----
 src/locale/locales/en-US.json          |  2 +-
 src/locale/locales/nb-NO.json          |  2 +-
 5 files changed, 52 insertions(+), 60 deletions(-)

diff --git a/src/components/KeyResultLinkCard.vue b/src/components/KeyResultLinkCard.vue
index 243adb939..6c876de2f 100644
--- a/src/components/KeyResultLinkCard.vue
+++ b/src/components/KeyResultLinkCard.vue
@@ -31,7 +31,7 @@
           </div>
         </div>
 
-        <progress-bar :progression="progression" skin="yellow" compact />
+        <progress-bar :progression="progression" compact />
       </div>
     </a>
   </router-link>
@@ -111,8 +111,8 @@ export default {
 
   &--active {
     color: var(--color-hover);
-    background-color: var(--color-yellow-5);
-    border-color: var(--color-yellow);
+    background-color: var(--color-blue-5);
+    border: 2px solid var(--color-hover);
   }
 }
 
diff --git a/src/components/panes/KeyResultPane.vue b/src/components/panes/KeyResultPane.vue
index 154fd5644..97f4e15e6 100644
--- a/src/components/panes/KeyResultPane.vue
+++ b/src/components/panes/KeyResultPane.vue
@@ -13,11 +13,13 @@
       :breadcrumbs="breadcrumbs"
     />
 
+    <h1 class="key-result-pane__title pkt-txt-18-medium">
+      {{ $t('general.keyResult') }}
+    </h1>
+
     <div class="key-result-pane__details">
       <div class="key-result-pane__header">
-        <pkt-tag text-style="normal-text" skin="yellow">
-          {{ $t('general.keyResult') }}
-        </pkt-tag>
+        <h2 class="pkt-txt-18-medium">{{ activeKeyResult.name }}</h2>
 
         <pkt-button
           v-if="hasEditRights"
@@ -30,31 +32,17 @@
         />
       </div>
 
-      <h2 class="pkt-txt-18-medium">{{ activeKeyResult.name }}</h2>
-
       <HTML-output
         v-if="activeKeyResult.description"
         class="key-result-pane__description"
         :html="activeKeyResult.description"
       />
 
-      <h4 class="pkt-txt-14-medium">{{ $t('keyResult.progression') }}:</h4>
-
-      <svg ref="graph" class="key-result-pane__graph"></svg>
-
-      <progress-bar
-        :progression="progression"
-        :right-label="progressionRightLabel"
-        skin="yellow"
-      />
-    </div>
-
-    <div class="key-result-pane__values">
-      <div class="key-result-pane__values-header">
-        <h3 class="pkt-txt-16-medium">{{ $t('keyResult.registeredValues') }}</h3>
+      <div class="key-result-pane__progression">
+        <h4 class="pkt-txt-14-medium">{{ $t('keyResult.progression') }}</h4>
         <pkt-button
           v-if="hasEditRights"
-          :text="$t('keyResult.newValue')"
+          :text="$t('widget.history.value')"
           skin="primary"
           size="small"
           variant="icon-left"
@@ -63,6 +51,14 @@
         />
       </div>
 
+      <svg ref="graph" class="key-result-pane__graph"></svg>
+
+      <progress-bar :progression="progression" :right-label="progressionRightLabel" />
+    </div>
+
+    <div class="key-result-pane__values">
+      <h3 class="pkt-txt-16-medium">{{ $t('keyResult.registeredValues') }}</h3>
+
       <div v-if="isLoading">
         <loading-small />
         {{ $t('general.loading') }}
@@ -124,7 +120,7 @@ import Progress from '@/db/Progress';
 import LineChart from '@/util/LineChart';
 import { getRandomInt } from '@/util';
 import { getKeyResultProgressDetails } from '@/util/keyResultProgress';
-import { PktAlert, PktBreadcrumbs, PktButton, PktTag } from '@oslokommune/punkt-vue2';
+import { PktAlert, PktBreadcrumbs, PktButton } from '@oslokommune/punkt-vue2';
 import PaneWrapper from '@/components/panes/PaneWrapper.vue';
 // import WidgetKeyResultNotes from '@/components/widgets/WidgetKeyResultNotes.vue';
 import WidgetKeyResultDetails from '@/components/widgets/WidgetKeyResultDetails.vue';
@@ -142,7 +138,6 @@ export default {
     PktAlert,
     PktButton,
     PktBreadcrumbs,
-    PktTag,
     PaneWrapper,
     // WidgetKeyResultNotes,
     WidgetKeyResultDetails,
@@ -333,7 +328,13 @@ export default {
 @use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
 
 .key-result-pane {
-  background-color: #faf6f1;
+  background-color: var(--color-gray);
+
+  &__title {
+    @include bp('laptop-up') {
+      margin-top: 2rem;
+    }
+  }
 
   &__details {
     display: flex;
@@ -341,11 +342,7 @@ export default {
     gap: 1rem;
     padding: 1.5rem;
     background-color: var(--color-white);
-    border-left: 0.25rem solid var(--color-yellow-50);
-
-    @include bp('laptop-up') {
-      margin-top: 2rem;
-    }
+    border-left: 0.125rem solid var(--color-yellow-50);
   }
 
   &__header {
@@ -358,27 +355,21 @@ export default {
     }
   }
 
+  &__progression {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 0.5rem;
+  }
+
   &__values {
     margin-top: 3rem;
-
-    &-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 1rem;
-    }
   }
 
   &__table {
     margin-top: 1rem;
   }
 
-  &__graph {
-    --graph-value-line: var(--color-yellow);
-    --graph-symbol-fill: var(--color-yellow);
-    --graph-symbol-color: var(--color-yellow-100);
-  }
-
   &__widgets {
     margin-top: 3rem;
 
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index d0164ca9e..daf8c775b 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -11,11 +11,13 @@
       :breadcrumbs="breadcrumbs"
     />
 
+    <h1 class="objective-pane__title pkt-txt-18-medium">
+      {{ $t('general.objective') }}
+    </h1>
+
     <div class="objective-pane__details">
       <div class="objective-pane__header">
-        <pkt-tag text-style="normal-text" skin="blue">
-          {{ $t('general.objective') }}
-        </pkt-tag>
+        <h2 class="pkt-txt-18-medium">{{ activeObjective.name }}</h2>
 
         <pkt-button
           v-if="hasEditRights"
@@ -28,8 +30,6 @@
         />
       </div>
 
-      <h2 class="pkt-txt-18-medium">{{ activeObjective.name }}</h2>
-
       <HTML-output
         v-if="activeObjective.description"
         class="objective-pane__description"
@@ -78,7 +78,7 @@
         <h3 class="pkt-txt-16-medium">{{ $t('general.keyResults') }}</h3>
         <pkt-button
           v-if="hasEditRights"
-          :text="$t('btn.createKeyResult')"
+          :text="$t('general.keyResult')"
           skin="primary"
           size="small"
           variant="icon-left"
@@ -146,7 +146,7 @@
 <script>
 import { format } from 'd3-format';
 import { mapGetters, mapState } from 'vuex';
-import { PktBreadcrumbs, PktButton, PktTag } from '@oslokommune/punkt-vue2';
+import { PktBreadcrumbs, PktButton } from '@oslokommune/punkt-vue2';
 import draggable from 'vuedraggable';
 import { compareKeyResults, contributorTagColor, contributorTagMode } from '@/util/okr';
 import { dateLong, periodDates, uniqueBy } from '@/util';
@@ -174,7 +174,6 @@ export default {
     LoadingSmall,
     PktBreadcrumbs,
     PktButton,
-    PktTag,
     ProgressBar,
     WidgetWeights,
     WidgetObjectiveDetails,
@@ -274,7 +273,13 @@ export default {
 @use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
 
 .objective-pane {
-  background-color: #f5f5f8;
+  background-color: var(--color-gray-light);
+
+  &__title {
+    @include bp('laptop-up') {
+      margin-top: 2rem;
+    }
+  }
 
   &__details {
     display: flex;
@@ -282,11 +287,7 @@ export default {
     gap: 1rem;
     padding: 1.5rem;
     background-color: var(--color-white);
-    border-left: 0.25rem solid var(--color-blue-light);
-
-    @include bp('laptop-up') {
-      margin-top: 2rem;
-    }
+    border-left: 0.125rem solid var(--color-blue);
   }
 
   &__header {
diff --git a/src/locale/locales/en-US.json b/src/locale/locales/en-US.json
index 00f73c2c6..c3e9c7b86 100644
--- a/src/locale/locales/en-US.json
+++ b/src/locale/locales/en-US.json
@@ -347,7 +347,7 @@
     "description": "Description",
     "startValue": "Start value",
     "targetValue": "Target value",
-    "progression": "Progression",
+    "progression": "Key result progression:",
     "unit": "Unit of measurement",
     "defaultUnit": "percent",
     "newValue": "New value",
diff --git a/src/locale/locales/nb-NO.json b/src/locale/locales/nb-NO.json
index 2b6bd4c11..ff50aa020 100644
--- a/src/locale/locales/nb-NO.json
+++ b/src/locale/locales/nb-NO.json
@@ -347,7 +347,7 @@
     "description": "Beskrivelse",
     "startValue": "Startverdi",
     "targetValue": "Målverdi",
-    "progression": "Progresjon",
+    "progression": "Progresjon for nøkkelresultatet:",
     "unit": "Måleenhet",
     "defaultUnit": "prosent",
     "newValue": "Ny verdi",

From 9dc84b849dc378c466a7b5f1e6ec88f1532b78f5 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Wed, 18 Oct 2023 12:24:24 +0200
Subject: [PATCH 065/102] Streamline the key result values list

---
 src/components/KeyResultValuesList.vue | 63 ++++++++++----------------
 src/styles/main.scss                   |  1 -
 2 files changed, 24 insertions(+), 40 deletions(-)

diff --git a/src/components/KeyResultValuesList.vue b/src/components/KeyResultValuesList.vue
index ad897e57c..2299a5051 100644
--- a/src/components/KeyResultValuesList.vue
+++ b/src/components/KeyResultValuesList.vue
@@ -4,10 +4,8 @@
       <thead>
         <tr>
           <th>{{ $t('widget.history.value') }}</th>
-          <th>{{ $t('widget.history.date') }}</th>
+          <th>{{ $t('general.details') }}</th>
           <th>{{ $t('widget.history.comment') }}</th>
-          <th>{{ $t('widget.history.changedBy') }}</th>
-          <th></th>
         </tr>
       </thead>
       <tbody>
@@ -16,17 +14,17 @@
             {{ formatValue(record.value) }}
           </td>
           <td>
-            <span v-tooltip="addedBy(record)">
-              {{ dateExtraShort(record.timestamp.toDate()) }}
+            <span>
+              {{ dateTimeShort(record.timestamp.toDate()) }}
             </span>
+            <div v-if="addedBy(record)" class="mt-size-8">
+              {{ addedBy(record) }}
+            </div>
           </td>
           <td>
-            <p v-if="record.comment">{{ record.comment }}</p>
-          </td>
-          <td>
-            <span v-if="addedBy(record)">{{ addedBy(record) }}</span>
-          </td>
-          <td>
+            <p v-if="record.comment" :class="{ 'mr-size-40': hasEditRights }">
+              {{ record.comment }}
+            </p>
             <pkt-button
               v-if="hasEditRights"
               v-tooltip="$t('tooltip.editProgress')"
@@ -45,7 +43,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { dateExtraShort } from '@/util';
+import { dateTimeShort } from '@/util';
 import { formatValue } from '@/util/keyResultProgress';
 import { PktButton } from '@oslokommune/punkt-vue2';
 
@@ -69,7 +67,7 @@ export default {
 
   methods: {
     formatValue,
-    dateExtraShort,
+    dateTimeShort,
 
     addedBy(record) {
       const user = record.editedBy || record.createdBy;
@@ -97,51 +95,38 @@ export default {
   th {
     padding: 0 1rem;
     text-align: left;
-    @include get-text('pkt-txt-14-medium');
-
-    &:nth-child(1),
-    &:nth-child(2) {
-      text-align: center;
-    }
-
-    &:nth-child(4) {
-      @include table-cell-desktop-up;
-    }
+    @include get-text('pkt-txt-12-medium');
   }
 
   td {
     padding: 1rem;
     text-align: left;
     text-wrap: balance;
+    vertical-align: top;
     background-color: var(--color-white);
-    @include get-text('pkt-txt-14');
+    @include get-text('pkt-txt-14-light');
 
     &:nth-child(1) {
-      @include get-text('pkt-txt-16-bold');
-      padding: 1rem 2rem;
-      color: var(--color-yellow-100);
-      text-align: center;
       text-wrap: nowrap;
-      background: var(--color-yellow-50);
+      border-left: 0.125rem solid var(--color-yellow-50);
     }
 
     &:nth-child(2) {
-      padding-left: 2rem;
-      text-align: center;
+      @include bp('phablet-up') {
+        min-width: 10rem;
+      }
     }
 
     &:nth-child(3) {
+      position: relative;
       width: 100%;
       white-space: pre-line;
-    }
-
-    &:nth-child(4) {
-      @include table-cell-desktop-up;
-      min-width: 10rem;
-    }
 
-    &:nth-child(5) {
-      padding-left: 0;
+      .pkt-btn {
+        position: absolute;
+        top: 0.5rem;
+        right: 0.5rem;
+      }
     }
   }
 }
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 7a2edbd98..451db6587 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -114,7 +114,6 @@ body.using-mouse :not([class^='pkt-'], [class*=' pkt-']):focus {
   --color-red-100: #4d0800;
   --color-red-20: #fad0cb;
   --color-yellow-70: #966a1c;
-  --color-yellow-100: #4d3000;
 
   // Colors in RGB value - add more if needed. SCSS rgba() function
   // can read hex numbers with CSS Variables.

From 45c23e7f88b1272344858cf3090db47e0746c7fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Mon, 9 Oct 2023 13:09:55 +0200
Subject: [PATCH 066/102] Make tweaks to the drag and drop styling

Make tweaks to the drag and drop styling:

- Slow down the animation a tad.

- Make the placeholder ("ghost") totally gray.
---
 src/components/KpiWidgetGroup.vue      | 17 ++++++++++++++++-
 src/components/panes/ObjectivePane.vue | 13 ++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/components/KpiWidgetGroup.vue b/src/components/KpiWidgetGroup.vue
index 8bd1ae505..ac8c621d6 100644
--- a/src/components/KpiWidgetGroup.vue
+++ b/src/components/KpiWidgetGroup.vue
@@ -24,7 +24,7 @@
         </pkt-button>
       </template>
     </div>
-    <draggable v-if="hasEditRights" v-model="orderedKpis" animation="200">
+    <draggable v-if="hasEditRights" v-model="orderedKpis" animation="300">
       <transition-group class="kpi-widget-group__kpis">
         <kpi-widget-group-link
           v-for="kpi in orderedKpis"
@@ -176,4 +176,19 @@ export default {
     }
   }
 }
+
+::v-deep .kpi-widget-group-link.sortable-ghost * {
+  color: var(--color-grayscale-10) !important;
+  background: var(--color-grayscale-10) !important;
+  border-color: var(--color-grayscale-10) !important;
+  fill: var(--color-grayscale-10);
+  stroke: var(--color-grayscale-10);
+
+  & .period-trend-tag__trend {
+    &::after,
+    &::before {
+      border-color: var(--color-grayscale-10);
+    }
+  }
+}
 </style>
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index daf8c775b..b4e1b3c69 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -96,7 +96,7 @@
         v-else-if="hasEditRights && keyResults.length"
         v-model="orderedKeyResults"
         class="objective-pane__key-results-list"
-        animation="200"
+        animation="300"
       >
         <transition-group>
           <key-result-link-card
@@ -379,6 +379,17 @@ export default {
           }
         }
       }
+
+      ::v-deep & .sortable-ghost {
+        background: var(--color-grayscale-10);
+        border-color: var(--color-grayscale-10);
+
+        & .key-result-link-card__inner * {
+          color: var(--color-grayscale-10);
+          background: var(--color-grayscale-10) !important;
+          border-color: var(--color-grayscale-10);
+        }
+      }
     }
   }
 

From 0f88604afe33461a848df60ba79df86d62921f74 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Thu, 19 Oct 2023 11:13:55 +0200
Subject: [PATCH 067/102] Add min/max indicator to progress bars

---
 src/components/ProgressBar.vue         | 108 +++++++++++++++----------
 src/components/panes/KeyResultPane.vue |  23 +-----
 src/components/panes/ObjectivePane.vue |   1 +
 3 files changed, 66 insertions(+), 66 deletions(-)

diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue
index 3a4080b13..7782dddb8 100644
--- a/src/components/ProgressBar.vue
+++ b/src/components/ProgressBar.vue
@@ -1,29 +1,39 @@
 <template>
   <div :class="['progress-bar', skinClass, { 'progress-bar--compact': compact }]">
     <h4 v-if="title" class="pkt-txt-14-medium">{{ title }}</h4>
-    <div class="progress-bar__bar">
+    <div
+      :class="[
+        'progress-bar__bar',
+        { 'progress-bar__bar--min-indicator': showMinMaxIndicators && progression > 0 },
+        { 'progress-bar__bar--max-indicator': showMinMaxIndicators && progression < 1 },
+      ]"
+    >
       <div
-        :class="[
-          'progress-bar__value',
-          { 'progress-bar__value--indicator': progression > 0 && progression < 1 },
-        ]"
+        class="progress-bar__value"
         :style="progressValueStyle"
         role="progressbar"
         aria-valuemin="0"
         aria-valuemax="100"
         :aria-valuenow="percent"
       ></div>
-      <span class="progress-bar__label" :style="progressLabelStyle">
-        {{ formattedPercent }}
-      </span>
-    </div>
-    <div v-if="leftLabel || rightLabel" class="progress-bar__sub-labels">
-      <span v-if="leftLabel" class="progress-bar__label">
-        {{ leftLabel }}
-      </span>
-      <span v-if="rightLabel" class="progress-bar__label progress-bar__label--right">
-        {{ rightLabel }}
-      </span>
+      <div
+        v-if="showMinMaxIndicators && progression > 0.05"
+        class="progress-bar__label progress-bar__label--min"
+      >
+        {{ formatPercent(0) }}
+      </div>
+      <div
+        class="progress-bar__label progress-bar__label--val"
+        :style="progressLabelStyle"
+      >
+        {{ formatPercent(progression) }}
+      </div>
+      <div
+        v-if="showMinMaxIndicators && progression < 0.95"
+        class="progress-bar__label progress-bar__label--max"
+      >
+        {{ formatPercent(1) }}
+      </div>
     </div>
   </div>
 </template>
@@ -48,13 +58,9 @@ export default {
       default: 'blue',
       validator: (value) => ['blue', 'yellow', 'green'].includes(value),
     },
-    leftLabel: {
-      type: String,
-      default: null,
-    },
-    rightLabel: {
-      type: String,
-      default: null,
+    showMinMaxIndicators: {
+      type: Boolean,
+      default: false,
     },
     compact: {
       type: Boolean,
@@ -63,17 +69,13 @@ export default {
   },
 
   computed: {
-    formattedPercent() {
-      return format('.0%')(this.progression);
-    },
-
     percent() {
       const percent = this.progression * 100;
       return percent > 100 ? 100 : percent;
     },
 
     progressLabelStyle() {
-      return `left: max(-0.2rem, min(calc(100% - 2.25rem), calc(${this.percent}% - 1rem)))`;
+      return `left: max(-0.75rem, min(calc(100% - 1.75rem), calc(${this.percent}% - 1.05rem)))`;
     },
 
     progressValueStyle() {
@@ -87,6 +89,12 @@ export default {
       return `progress-bar--${this.skin}`;
     },
   },
+
+  methods: {
+    formatPercent(val) {
+      return format('.0%')(val);
+    },
+  },
 };
 </script>
 
@@ -107,42 +115,54 @@ export default {
 
   &__bar {
     position: relative;
-    margin-bottom: 1rem;
+    margin-bottom: 1.5rem;
     background-color: var(--progress-bar-bg);
 
-    > span {
-      position: absolute;
-      bottom: -1.25rem;
-      width: 2.1rem;
-      text-align: center;
+    &--min-indicator {
+      border-left: 1px solid var(--color-grayscale-50);
+    }
+    &--max-indicator {
+      border-right: 1px solid var(--color-grayscale-50);
     }
   }
 
   &__value {
     height: 1rem;
     background-color: var(--progress-bar-value);
-
-    &--indicator {
-      border-right: 1px solid var(--progress-bar-value-indicator);
-    }
+    border-right: 1px solid var(--progress-bar-value-indicator);
   }
 
   &__label {
+    position: absolute;
+    bottom: -1.5rem;
+    display: none;
+    width: 2.1rem;
+    color: var(--color-grayscale-40);
+    text-align: center;
     @include get-text('pkt-txt-12-medium');
-  }
 
-  &__sub-labels {
-    display: flex;
-    padding: 0.15rem 0.25rem;
+    @include bp('phablet-up') {
+      display: block;
+    }
 
-    .progress-bar__label--right {
-      margin-left: auto;
+    &--min {
+      left: -0.25rem;
+      text-align: left;
+    }
+    &--val {
+      display: block;
+      color: var(--progress-bar-value-indicator);
+    }
+    &--max {
+      right: -0.25rem;
+      text-align: right;
     }
   }
 
   &--compact {
     .progress-bar__value {
       height: 0.5rem;
+      border-right: 0;
     }
   }
 
diff --git a/src/components/panes/KeyResultPane.vue b/src/components/panes/KeyResultPane.vue
index 97f4e15e6..b97cd68ac 100644
--- a/src/components/panes/KeyResultPane.vue
+++ b/src/components/panes/KeyResultPane.vue
@@ -53,7 +53,7 @@
 
       <svg ref="graph" class="key-result-pane__graph"></svg>
 
-      <progress-bar :progression="progression" :right-label="progressionRightLabel" />
+      <progress-bar :progression="progression" :show-min-max-indicators="true" />
     </div>
 
     <div class="key-result-pane__values">
@@ -118,7 +118,6 @@ import { db } from '@/config/firebaseConfig';
 import KeyResult from '@/db/KeyResult';
 import Progress from '@/db/Progress';
 import LineChart from '@/util/LineChart';
-import { getRandomInt } from '@/util';
 import { getKeyResultProgressDetails } from '@/util/keyResultProgress';
 import { PktAlert, PktBreadcrumbs, PktButton } from '@oslokommune/punkt-vue2';
 import PaneWrapper from '@/components/panes/PaneWrapper.vue';
@@ -176,19 +175,6 @@ export default {
       return progressDetails.percentageCompleted / 100;
     },
 
-    progressionRightLabel() {
-      const progressDetails = getKeyResultProgressDetails(this.activeKeyResult);
-
-      if (progressDetails.isCompleted) {
-        return this.randomCompletedMessage();
-      }
-
-      return `${progressDetails.formattedTotalRemainingTasks} ${this.$t(
-        'progress.remaining',
-        { unit: this.activeKeyResult.unit }
-      )}`;
-    },
-
     breadcrumbs() {
       return [
         { text: this.activeItem.name, href: { name: 'ItemHome' } },
@@ -313,13 +299,6 @@ export default {
       this.showValueModal = true;
       this.chosenProgressValue = record;
     },
-
-    randomCompletedMessage() {
-      const messages = Object.values(this.$t('progress.completedMessages'));
-      const randomIndex = getRandomInt(messages.length);
-
-      return messages[randomIndex];
-    },
   },
 };
 </script>
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index b4e1b3c69..0a9032ace 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -70,6 +70,7 @@
         class="objective-pane__progression"
         :title="$t('objective.progressionTitle')"
         :progression="activeObjective.progression"
+        :show-min-max-indicators="true"
       />
     </div>
 

From bb2fa18ad61526843556d60b44ee0a0db0a2cbaa Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Thu, 19 Oct 2023 13:39:39 +0200
Subject: [PATCH 068/102] Allow secondary value indicator for progress bars

---
 src/components/ProgressBar.vue         | 119 +++++++++++++++++--------
 src/components/panes/ObjectivePane.vue |  34 +++++--
 src/components/panes/WorkbenchPane.vue |   4 +-
 3 files changed, 113 insertions(+), 44 deletions(-)

diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue
index 7782dddb8..7d24e05af 100644
--- a/src/components/ProgressBar.vue
+++ b/src/components/ProgressBar.vue
@@ -1,38 +1,55 @@
 <template>
   <div :class="['progress-bar', skinClass, { 'progress-bar--compact': compact }]">
-    <h4 v-if="title" class="pkt-txt-14-medium">{{ title }}</h4>
     <div
       :class="[
         'progress-bar__bar',
+        { 'progress-bar__bar--secondary-val': secondaryProgression !== null },
         { 'progress-bar__bar--min-indicator': showMinMaxIndicators && progression > 0 },
         { 'progress-bar__bar--max-indicator': showMinMaxIndicators && progression < 1 },
       ]"
     >
       <div
-        class="progress-bar__value"
-        :style="progressValueStyle"
+        class="progress-bar__value progress-bar__value--primary"
+        :style="valueStyle"
         role="progressbar"
         aria-valuemin="0"
         aria-valuemax="100"
-        :aria-valuenow="percent"
+        :aria-valuenow="percent(progression)"
+      ></div>
+      <div
+        v-if="secondaryProgression !== null"
+        class="progress-bar__value progress-bar__value--secondary"
+        :style="secondaryValueStyle"
       ></div>
       <div
         v-if="showMinMaxIndicators && progression > 0.05"
         class="progress-bar__label progress-bar__label--min"
       >
-        {{ formatPercent(0) }}
+        {{ percentFormatted(0) }}
       </div>
       <div
         class="progress-bar__label progress-bar__label--val"
-        :style="progressLabelStyle"
+        :style="progressLabelStyle(progression)"
+      >
+        {{ percentFormatted(progression) }}
+      </div>
+      <div
+        v-if="secondaryProgression !== null"
+        class="progress-bar__label progress-bar__label--secondary-val"
+        :style="progressLabelStyle(secondaryProgression)"
       >
-        {{ formatPercent(progression) }}
+        <template v-if="secondaryValueLabel">
+          {{ secondaryValueLabel }}
+        </template>
+        <template v-else>
+          {{ percentFormatted(secondaryProgression) }}
+        </template>
       </div>
       <div
         v-if="showMinMaxIndicators && progression < 0.95"
         class="progress-bar__label progress-bar__label--max"
       >
-        {{ formatPercent(1) }}
+        {{ percentFormatted(1) }}
       </div>
     </div>
   </div>
@@ -45,14 +62,18 @@ export default {
   name: 'ProgressBar',
 
   props: {
-    title: {
-      type: String,
-      default: null,
-    },
     progression: {
       type: Number,
       default: 0,
     },
+    secondaryProgression: {
+      type: Number,
+      default: null,
+    },
+    secondaryValueLabel: {
+      type: String,
+      default: null,
+    },
     skin: {
       type: String,
       default: 'blue',
@@ -69,17 +90,12 @@ export default {
   },
 
   computed: {
-    percent() {
-      const percent = this.progression * 100;
-      return percent > 100 ? 100 : percent;
+    valueStyle() {
+      return `width: ${this.percent(this.progression)}%`;
     },
 
-    progressLabelStyle() {
-      return `left: max(-0.75rem, min(calc(100% - 1.75rem), calc(${this.percent}% - 1.05rem)))`;
-    },
-
-    progressValueStyle() {
-      return `width: ${this.percent}%`;
+    secondaryValueStyle() {
+      return `width: ${this.percent(this.secondaryProgression)}%`;
     },
 
     skinClass() {
@@ -91,8 +107,19 @@ export default {
   },
 
   methods: {
-    formatPercent(val) {
-      return format('.0%')(val);
+    percent(progression) {
+      const percent = progression * 100;
+      return percent > 100 ? 100 : percent;
+    },
+
+    percentFormatted(progression) {
+      return format('.0%')(progression);
+    },
+
+    progressLabelStyle(progression) {
+      return `left: max(-2ch, min(calc(100% - 4ch), calc(${this.percent(
+        progression
+      )}% - 2.5ch)))`;
     },
   },
 };
@@ -109,15 +136,16 @@ export default {
 
   width: 100%;
 
-  h4 + &__bar {
-    margin-top: 0.5rem;
-  }
-
   &__bar {
     position: relative;
+    height: 1rem;
+    margin-top: 0.5rem;
     margin-bottom: 1.5rem;
     background-color: var(--progress-bar-bg);
 
+    &--secondary-val {
+      margin-top: 1.5rem;
+    }
     &--min-indicator {
       border-left: 1px solid var(--color-grayscale-50);
     }
@@ -127,17 +155,26 @@ export default {
   }
 
   &__value {
-    height: 1rem;
-    background-color: var(--progress-bar-value);
-    border-right: 1px solid var(--progress-bar-value-indicator);
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: inherit;
+
+    &--primary {
+      background-color: var(--progress-bar-value);
+      border-right: 1px solid var(--progress-bar-value-indicator);
+    }
+
+    &--secondary {
+      border-right: 1px dashed var(--progress-bar-value-indicator);
+    }
   }
 
   &__label {
     position: absolute;
     bottom: -1.5rem;
     display: none;
-    width: 2.1rem;
-    color: var(--color-grayscale-40);
+    width: 5ch;
     text-align: center;
     @include get-text('pkt-txt-12-medium');
 
@@ -145,14 +182,19 @@ export default {
       display: block;
     }
 
+    &--val,
+    &--secondary-val {
+      display: block;
+      color: var(--progress-bar-value-indicator);
+    }
+    &--secondary-val {
+      top: -1.5rem;
+      bottom: auto;
+    }
     &--min {
       left: -0.25rem;
       text-align: left;
     }
-    &--val {
-      display: block;
-      color: var(--progress-bar-value-indicator);
-    }
     &--max {
       right: -0.25rem;
       text-align: right;
@@ -160,8 +202,11 @@ export default {
   }
 
   &--compact {
-    .progress-bar__value {
+    .progress-bar__bar {
       height: 0.5rem;
+    }
+
+    .progress-bar__value {
       border-right: 0;
     }
   }
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index 0a9032ace..b57d06697 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -66,12 +66,17 @@
         <div class="pkt-txt-14">{{ periodDates(period) }}</div>
       </div>
 
-      <progress-bar
-        class="objective-pane__progression"
-        :title="$t('objective.progressionTitle')"
-        :progression="activeObjective.progression"
-        :show-min-max-indicators="true"
-      />
+      <div class="objective-pane__progression">
+        <h4 class="pkt-txt-14-medium">
+          {{ $t('objective.progressionTitle') }}
+        </h4>
+        <progress-bar
+          :progression="activeObjective.progression"
+          :secondary-progression="periodProgression"
+          :secondary-value-label="$t('general.today')"
+          :show-min-max-indicators="true"
+        />
+      </div>
     </div>
 
     <div class="objective-pane__key-results">
@@ -149,6 +154,7 @@ import { format } from 'd3-format';
 import { mapGetters, mapState } from 'vuex';
 import { PktBreadcrumbs, PktButton } from '@oslokommune/punkt-vue2';
 import draggable from 'vuedraggable';
+import { startOfDay } from 'date-fns';
 import { compareKeyResults, contributorTagColor, contributorTagMode } from '@/util/okr';
 import { dateLong, periodDates, uniqueBy } from '@/util';
 import { db } from '@/config/firebaseConfig';
@@ -208,6 +214,22 @@ export default {
       return null;
     },
 
+    periodProgression() {
+      if (!this.period) {
+        return null;
+      }
+
+      const start = this.period.startDate.getTime();
+      const end = this.period.endDate.getTime();
+      const now = startOfDay(new Date()).getTime();
+
+      if (now < start || now > end) {
+        return null;
+      }
+
+      return (now - start) / (end - start);
+    },
+
     breadcrumbs() {
       return [
         { text: this.activeItem.name, href: { name: 'ItemHome' } },
diff --git a/src/components/panes/WorkbenchPane.vue b/src/components/panes/WorkbenchPane.vue
index f74440cde..6c0577585 100644
--- a/src/components/panes/WorkbenchPane.vue
+++ b/src/components/panes/WorkbenchPane.vue
@@ -5,10 +5,12 @@
     closable
     @close="close"
   >
+    <h4 class="pkt-txt-14-medium">
+      {{ $t('workbench.progressionTitle') }}
+    </h4>
     <progress-bar
       v-if="progression >= 0"
       class="workbench-pane__progression"
-      :title="$t('workbench.progressionTitle')"
       :progression="progression"
     />
 

From 254ada2f0a105c939677e589d66c9cfcf516d32f Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Fri, 20 Oct 2023 09:15:31 +0200
Subject: [PATCH 069/102] Clean out disused progress util and translation keys

---
 src/locale/locales/en-US.json | 13 -------------
 src/locale/locales/nb-NO.json | 13 -------------
 src/util/index.js             |  2 --
 3 files changed, 28 deletions(-)

diff --git a/src/locale/locales/en-US.json b/src/locale/locales/en-US.json
index c3e9c7b86..1233da821 100644
--- a/src/locale/locales/en-US.json
+++ b/src/locale/locales/en-US.json
@@ -651,19 +651,6 @@
       "storyteller": "Storyteller"
     }
   },
-  "progress": {
-    "title": "Progress {progress}",
-    "done": "done",
-    "remaining": "{unit} remaining",
-    "remainingOf": "of {progress}",
-    "complete": "{progress}% complete",
-    "completedMessages": {
-      "1": "You guys are nailing it!",
-      "2": "Well done, guys!",
-      "3": "Wohoo! 100%",
-      "4": "You did it! Awesome!"
-    }
-  },
   "dashboard": {
     "problemDescription": "Problem description",
     "targetAudience": "Target audience",
diff --git a/src/locale/locales/nb-NO.json b/src/locale/locales/nb-NO.json
index ff50aa020..06894c81a 100644
--- a/src/locale/locales/nb-NO.json
+++ b/src/locale/locales/nb-NO.json
@@ -651,19 +651,6 @@
       "storyteller": "Historieforteller"
     }
   },
-  "progress": {
-    "title": "Progresjon {progress}",
-    "done": "fullført",
-    "remaining": "{unit} gjenstår",
-    "remainingOf": "av {progress}",
-    "complete": "{progress} % fullført",
-    "completedMessages": {
-      "1": "Nå er dere gode!",
-      "2": "Dødsbra jobba, folkens!",
-      "3": "Wohoo! 100 %",
-      "4": "Nice, dere klarte det!"
-    }
-  },
   "dashboard": {
     "problemDescription": "Problembeskrivelse",
     "targetAudience": "Målgruppe",
diff --git a/src/util/index.js b/src/util/index.js
index c52df3cd4..c13c5ec97 100644
--- a/src/util/index.js
+++ b/src/util/index.js
@@ -13,8 +13,6 @@ export { default as tableOfContent } from './tableOfContent';
 export { default as toastArchiveAndRevert } from './toastUtils';
 export { default as validateEmail } from './validateEmail';
 
-export const getRandomInt = (max) => Math.floor(Math.random() * max);
-
 /**
  * Return an array of all members of `arr` that are unique with respect to the
  * attribute `key`.

From 201fec062df81aed933ca08762983a6502ec301f Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Fri, 20 Oct 2023 09:19:53 +0200
Subject: [PATCH 070/102] Prevent overlapping indicators

---
 src/components/ProgressBar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue
index 7d24e05af..d1adc2984 100644
--- a/src/components/ProgressBar.vue
+++ b/src/components/ProgressBar.vue
@@ -22,7 +22,7 @@
         :style="secondaryValueStyle"
       ></div>
       <div
-        v-if="showMinMaxIndicators && progression > 0.05"
+        v-if="showMinMaxIndicators && progression > 0.1"
         class="progress-bar__label progress-bar__label--min"
       >
         {{ percentFormatted(0) }}
@@ -46,7 +46,7 @@
         </template>
       </div>
       <div
-        v-if="showMinMaxIndicators && progression < 0.95"
+        v-if="showMinMaxIndicators && progression < 0.9"
         class="progress-bar__label progress-bar__label--max"
       >
         {{ percentFormatted(1) }}

From 521cda2170ae48e39cf8f21200c412eb209ff8d6 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Fri, 20 Oct 2023 09:52:07 +0200
Subject: [PATCH 071/102] Minor sizing adjustments

---
 src/components/GanttChart.vue          | 2 +-
 src/components/KeyResultLinkCard.vue   | 2 +-
 src/components/ProgressBar.vue         | 1 -
 src/components/panes/ObjectivePane.vue | 2 +-
 4 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/GanttChart.vue b/src/components/GanttChart.vue
index 27f9b781b..129923283 100644
--- a/src/components/GanttChart.vue
+++ b/src/components/GanttChart.vue
@@ -700,7 +700,7 @@ export default {
 
   position: relative;
   z-index: 1;
-  height: 9.5rem;
+  height: 10rem;
   overflow: hidden;
 
   ::v-deep &__inner {
diff --git a/src/components/KeyResultLinkCard.vue b/src/components/KeyResultLinkCard.vue
index 6c876de2f..43fd79491 100644
--- a/src/components/KeyResultLinkCard.vue
+++ b/src/components/KeyResultLinkCard.vue
@@ -94,7 +94,7 @@ export default {
   &__inner {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: 1rem;
     height: 100%;
     padding: 1rem;
   }
diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue
index d1adc2984..d5fce9bb4 100644
--- a/src/components/ProgressBar.vue
+++ b/src/components/ProgressBar.vue
@@ -139,7 +139,6 @@ export default {
   &__bar {
     position: relative;
     height: 1rem;
-    margin-top: 0.5rem;
     margin-bottom: 1.5rem;
     background-color: var(--progress-bar-bg);
 
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index b57d06697..685aa38a7 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -67,7 +67,7 @@
       </div>
 
       <div class="objective-pane__progression">
-        <h4 class="pkt-txt-14-medium">
+        <h4 class="pkt-txt-14-medium mb-size-8">
           {{ $t('objective.progressionTitle') }}
         </h4>
         <progress-bar

From ed50285df641b7f7eca78086b3b8e587e3d988aa Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Fri, 20 Oct 2023 10:57:58 +0200
Subject: [PATCH 072/102] Simplify objective details card

---
 src/components/ObjectiveDetailsCard.vue | 212 ++++++++++++++++++++++++
 src/components/panes/ObjectivePane.vue  | 185 +--------------------
 src/locale/locales/nb-NO.json           |   2 +-
 3 files changed, 221 insertions(+), 178 deletions(-)
 create mode 100644 src/components/ObjectiveDetailsCard.vue

diff --git a/src/components/ObjectiveDetailsCard.vue b/src/components/ObjectiveDetailsCard.vue
new file mode 100644
index 000000000..3ca5e8ac0
--- /dev/null
+++ b/src/components/ObjectiveDetailsCard.vue
@@ -0,0 +1,212 @@
+<template>
+  <div :class="['objective-details', { 'objective-details--compact': compact }]">
+    <div class="objective-details__header">
+      <h2>{{ objective.name }}</h2>
+
+      <pkt-button
+        v-if="!compact && hasEditRights"
+        v-tooltip="$t('btn.updateObjective')"
+        skin="tertiary"
+        variant="icon-only"
+        size="small"
+        icon-name="edit"
+        @onClick="$emit('edit-objective')"
+      />
+    </div>
+
+    <HTML-output
+      v-if="objective.description"
+      :html="objective.description"
+      class="objective-details__description"
+    />
+
+    <div class="objective-details__tiles pkt-grid">
+      <div class="pkt-cell pkt-cell--span12 pkt-cell--span5-tablet-up">
+        <h4>{{ $t('objective.owner') }}</h4>
+        {{ objective.parent.name }}
+      </div>
+
+      <div
+        v-if="!compact && contributors.length"
+        class="pkt-cell pkt-cell--span12 pkt-cell--span7-tablet-up"
+      >
+        <h4>{{ $t('objective.contributors') }}</h4>
+        {{ contributors.map((c) => c.name).join(', ') }}
+      </div>
+
+      <div
+        v-if="period"
+        :class="[
+          'pkt-cell',
+          'pkt-cell--span12',
+          { 'pkt-cell--span7-tablet-up': compact },
+        ]"
+      >
+        <h4>{{ $t('objective.period') }}</h4>
+        <span>{{ periodDates(period) }}</span>
+      </div>
+
+      <div v-if="!compact" class="pkt-cell pkt-cell--span12">
+        <h4 class="mb-size-32">{{ $t('objective.progressionTitle') }}</h4>
+        <progress-bar
+          :progression="objective.progression"
+          :secondary-progression="periodProgression"
+          :secondary-value-label="$t('general.today')"
+          :show-min-max-indicators="true"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { startOfDay } from 'date-fns';
+import { PktButton } from '@oslokommune/punkt-vue2';
+import { periodDates, uniqueBy } from '@/util';
+import i18n from '@/locale/i18n';
+import ProgressBar from '@/components/ProgressBar.vue';
+import HTMLOutput from '@/components/HTMLOutput.vue';
+
+export default {
+  name: 'ObjectiveDetailsCard',
+
+  components: {
+    HTMLOutput,
+    PktButton,
+    ProgressBar,
+  },
+
+  props: {
+    objective: {
+      type: Object,
+      required: true,
+    },
+    keyResults: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    compact: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+
+  computed: {
+    ...mapGetters(['hasEditRights']),
+
+    period() {
+      if (this.objective.startDate && this.objective.endDate) {
+        return {
+          startDate: this.objective.startDate.toDate(),
+          endDate: this.objective.endDate.toDate(),
+        };
+      }
+
+      if (this.objective.period.startDate && this.objective.period.endDate) {
+        return {
+          startDate: this.objective.period.startDate.toDate(),
+          endDate: this.objective.period.endDate.toDate(),
+        };
+      }
+
+      return null;
+    },
+
+    periodProgression() {
+      if (!this.period) {
+        return null;
+      }
+
+      const start = this.period.startDate.getTime();
+      const end = this.period.endDate.getTime();
+      const now = startOfDay(new Date()).getTime();
+
+      if (now < start || now > end) {
+        return null;
+      }
+
+      return (now - start) / (end - start);
+    },
+
+    contributors() {
+      return uniqueBy(
+        this.keyResults.map((kr) => kr.parent).filter((item) => item.name),
+        'id'
+      ).sort((a, b) => a.name.localeCompare(b.name, i18n.locale));
+    },
+  },
+
+  methods: {
+    periodDates,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/breakpoints' as *;
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
+
+.objective-details {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 1.5rem;
+  background-color: var(--color-white);
+  border-left: 0.125rem solid var(--color-blue);
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    text-wrap: balance;
+
+    h2 {
+      @include get-text('pkt-txt-18-medium');
+    }
+
+    .pkt-btn {
+      margin: -0.5rem -0.5rem 0 0;
+    }
+  }
+
+  &__description {
+    @include get-text('pkt-txt-16-light');
+  }
+
+  &__tiles {
+    @include get-text('pkt-txt-14');
+
+    h4 {
+      @include get-text('pkt-txt-14-medium');
+      margin-bottom: 0.25rem;
+    }
+  }
+
+  &--compact {
+    gap: 0.5rem;
+  }
+
+  &--compact #{&} {
+    &__header h2 {
+      h2 {
+        @include get-text('pkt-txt-16-medium');
+      }
+    }
+
+    &__description {
+      @include get-text('pkt-txt-14-light');
+    }
+
+    &__tiles {
+      @include get-text('pkt-txt-12');
+
+      h4 {
+        @include get-text('pkt-txt-12-medium');
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index 685aa38a7..d21814947 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -15,69 +15,11 @@
       {{ $t('general.objective') }}
     </h1>
 
-    <div class="objective-pane__details">
-      <div class="objective-pane__header">
-        <h2 class="pkt-txt-18-medium">{{ activeObjective.name }}</h2>
-
-        <pkt-button
-          v-if="hasEditRights"
-          v-tooltip="$t('btn.updateObjective')"
-          skin="tertiary"
-          variant="icon-only"
-          size="small"
-          icon-name="edit"
-          @onClick="$emit('edit-objective')"
-        />
-      </div>
-
-      <HTML-output
-        v-if="activeObjective.description"
-        class="objective-pane__description"
-        :html="activeObjective.description"
-      />
-
-      <div class="objective-pane__members">
-        <div>
-          <h4 class="pkt-txt-14-medium">{{ $t('objective.owner') }}</h4>
-          <span class="pkt-txt-14">{{ activeObjective.parent.name }}</span>
-        </div>
-
-        <div class="objective-pane__contributors">
-          <h4 class="pkt-txt-14-medium">{{ $t('objective.contributors') }}</h4>
-          <ul>
-            <li v-for="c in contributors" :key="c.id" class="objective-pane__contributor">
-              <span class="pkt-txt-14">{{ c.name }}</span>
-              <span
-                class="objective-pane__contributor-tag"
-                :class="[
-                  'objective-link-card__tag',
-                  'pkt-txt-12-bold',
-                  `objective-link-card__tag--${contributorTagMode(c.name)}`,
-                ]"
-                :style="{ background: contributorTagColor(c.name) }"
-              ></span>
-            </li>
-          </ul>
-        </div>
-      </div>
-
-      <div v-if="period" class="mt-size-16">
-        <div class="pkt-txt-14-medium">{{ $t('objective.period') }}</div>
-        <div class="pkt-txt-14">{{ periodDates(period) }}</div>
-      </div>
-
-      <div class="objective-pane__progression">
-        <h4 class="pkt-txt-14-medium mb-size-8">
-          {{ $t('objective.progressionTitle') }}
-        </h4>
-        <progress-bar
-          :progression="activeObjective.progression"
-          :secondary-progression="periodProgression"
-          :secondary-value-label="$t('general.today')"
-          :show-min-max-indicators="true"
-        />
-      </div>
-    </div>
+    <objective-details-card
+      :objective="activeObjective"
+      :key-results="keyResults"
+      @edit-objective="$emit('edit-objective')"
+    />
 
     <div class="objective-pane__key-results">
       <div class="objective-pane__key-results-header">
@@ -150,24 +92,19 @@
 </template>
 
 <script>
-import { format } from 'd3-format';
 import { mapGetters, mapState } from 'vuex';
 import { PktBreadcrumbs, PktButton } from '@oslokommune/punkt-vue2';
 import draggable from 'vuedraggable';
-import { startOfDay } from 'date-fns';
-import { compareKeyResults, contributorTagColor, contributorTagMode } from '@/util/okr';
-import { dateLong, periodDates, uniqueBy } from '@/util';
+import { compareKeyResults } from '@/util/okr';
 import { db } from '@/config/firebaseConfig';
-import i18n from '@/locale/i18n';
 import KeyResult from '@/db/KeyResult';
-import ProgressBar from '@/components/ProgressBar.vue';
+import ObjectiveDetailsCard from '@/components/ObjectiveDetailsCard.vue';
 import PaneWrapper from '@/components/panes/PaneWrapper.vue';
 import LoadingSmall from '@/components/LoadingSmall.vue';
 import WidgetObjectiveDetails from '@/components/widgets/WidgetObjectiveDetails.vue';
 import WidgetWeights from '@/components/widgets/WidgetWeights.vue';
 import EmptyState from '@/components/EmptyState.vue';
 import KeyResultLinkCard from '@/components/KeyResultLinkCard.vue';
-import HTMLOutput from '@/components/HTMLOutput.vue';
 
 export default {
   name: 'ObjectivePane',
@@ -176,12 +113,11 @@ export default {
     draggable,
     PaneWrapper,
     EmptyState,
+    ObjectiveDetailsCard,
     KeyResultLinkCard,
-    HTMLOutput,
     LoadingSmall,
     PktBreadcrumbs,
     PktButton,
-    ProgressBar,
     WidgetWeights,
     WidgetObjectiveDetails,
   },
@@ -196,40 +132,6 @@ export default {
     ...mapState('okrs', ['activeObjective', 'activeKeyResult']),
     ...mapGetters(['hasEditRights']),
 
-    period() {
-      if (this.activeObjective.startDate && this.activeObjective.endDate) {
-        return {
-          startDate: this.activeObjective.startDate.toDate(),
-          endDate: this.activeObjective.endDate.toDate(),
-        };
-      }
-
-      if (this.activeObjective.period.startDate && this.activeObjective.period.endDate) {
-        return {
-          startDate: this.activeObjective.period.startDate.toDate(),
-          endDate: this.activeObjective.period.endDate.toDate(),
-        };
-      }
-
-      return null;
-    },
-
-    periodProgression() {
-      if (!this.period) {
-        return null;
-      }
-
-      const start = this.period.startDate.getTime();
-      const end = this.period.endDate.getTime();
-      const now = startOfDay(new Date()).getTime();
-
-      if (now < start || now > end) {
-        return null;
-      }
-
-      return (now - start) / (end - start);
-    },
-
     breadcrumbs() {
       return [
         { text: this.activeItem.name, href: { name: 'ItemHome' } },
@@ -249,13 +151,6 @@ export default {
         });
       },
     },
-
-    contributors() {
-      return uniqueBy(
-        this.keyResults.map((kr) => kr.parent).filter((item) => item.name),
-        'id'
-      ).sort((a, b) => a.name.localeCompare(b.name, i18n.locale));
-    },
   },
 
   watch: {
@@ -277,17 +172,6 @@ export default {
       },
     },
   },
-
-  methods: {
-    contributorTagColor,
-    contributorTagMode,
-    dateLong,
-    periodDates,
-
-    percent(value) {
-      return format('.0%')(value);
-    },
-  },
 };
 </script>
 
@@ -304,59 +188,6 @@ export default {
     }
   }
 
-  &__details {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    padding: 1.5rem;
-    background-color: var(--color-white);
-    border-left: 0.125rem solid var(--color-blue);
-  }
-
-  &__header {
-    display: flex;
-    justify-content: space-between;
-    text-wrap: balance;
-
-    .pkt-btn {
-      margin: -0.5rem -0.5rem 0 0;
-    }
-  }
-
-  &__members {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 1rem;
-
-    & h4 {
-      margin-bottom: 0.25rem;
-    }
-  }
-
-  &__contributors {
-    margin-right: calc(2.5rem + 2px);
-  }
-
-  &__contributor {
-    display: flex;
-    flex-direction: row;
-    gap: 0.5rem;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: 0.25rem;
-  }
-
-  &__contributor-tag {
-    display: block;
-    width: 1.5rem;
-    height: 1.5rem;
-    border-radius: 50%;
-  }
-
-  &__progression {
-    margin-top: 1rem;
-  }
-
   &__key-results {
     margin-top: 3rem;
 
diff --git a/src/locale/locales/nb-NO.json b/src/locale/locales/nb-NO.json
index 06894c81a..9ea23c488 100644
--- a/src/locale/locales/nb-NO.json
+++ b/src/locale/locales/nb-NO.json
@@ -392,7 +392,7 @@
   "objective": {
     "period": "Arbeidsperiode",
     "progressionTitle": "Prosentvis fremdrift for målet:",
-    "owner": "Eier",
+    "owner": "Ansvarlig",
     "contributors": "Bidragsytere",
     "weight": "Vekt",
     "change": "Endre mål",

From 9193f36e93aca5f678128e99bf3e7edb980f2e43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Fri, 3 Nov 2023 09:14:24 +0100
Subject: [PATCH 073/102] Make org admins able to add objective contributors

---
 firestore.rules                  |  27 ++++++-
 tests/firebase/firestore.test.js | 116 +++++++++++++++++++++++++++++--
 tests/firebase/utils.js          |  10 ++-
 3 files changed, 145 insertions(+), 8 deletions(-)

diff --git a/firestore.rules b/firestore.rules
index 8d391cf01..068e963c6 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -65,6 +65,29 @@ service cloud.firestore {
       return isSignedIn() && (isAdminFromOrgOfProdOrDep || isAdminOfParent);
     }
 
+    //
+    // Return true if the current user is an admin of the parent of the
+    // document's objective.
+    //
+    function isAdminOfObjectiveParent(document, type) {
+      let userDoc = getUserDoc();
+      let userIsAdmin = isAdmin();
+      let doc = getAfter(/databases/$(database)/documents/$(type)/$(document));
+      let objectiveDoc = getAfter(doc.data.objective);
+      let parentDoc = getAfter(objectiveDoc.data.parent);
+
+      // Check whether the parent of the document the user tries to access has
+      // an organization – this means that it is a product or department.
+      let hasOrgDocumentInParent = 'organization' in parentDoc.data;
+      let isAdminFromOrgOfProdOrDep = userIsAdmin && hasOrgDocumentInParent && getAfter(parentDoc.data.organization).id in userDoc.data.admin;
+
+      // Check whether the user has access to the parent, which is an
+      // organization (given that the first check is false).
+      let isAdminOfParent = userIsAdmin && !isAdminFromOrgOfProdOrDep && parentDoc.id in userDoc.data.admin;
+
+      return isSignedIn() && (isAdminFromOrgOfProdOrDep || isAdminOfParent);
+    }
+
     // Is user signed in
     function isSignedIn() {
       // TODO: Must be a verified (whitelisted) user
@@ -187,8 +210,8 @@ service cloud.firestore {
     // TODO: Should also allow create/delete by organization admins.
     match /objectiveContributors/{document} {
       allow read: if isSignedIn();
-      allow create: if isSuperAdmin() || isMemberOfObjectiveParentAfter(document, 'objectiveContributors');
-      allow delete: if isSuperAdmin() || isMemberOfObjectiveParentBefore(document, 'objectiveContributors');
+      allow create: if isSuperAdmin() || isMemberOfObjectiveParentAfter(document, 'objectiveContributors') || isAdminOfObjectiveParent(document, 'objectiveContributors');
+      allow delete: if isSuperAdmin() || isMemberOfObjectiveParentBefore(document, 'objectiveContributors') || isAdminOfObjectiveParent(document, 'objectiveContributors');
     }
 
     match /periods/{document} {
diff --git a/tests/firebase/firestore.test.js b/tests/firebase/firestore.test.js
index 6efe0880b..1d672f3f1 100644
--- a/tests/firebase/firestore.test.js
+++ b/tests/firebase/firestore.test.js
@@ -5,6 +5,7 @@ import {
   withUnauthenticatedUser,
   withAuthenticatedUser,
   expectPermissionDenied,
+  expectAddSucceeds,
   expectUpdateSucceeds,
   expectGetSucceeds,
 } from './utils';
@@ -30,16 +31,55 @@ describe('Test Firestore rules', () => {
       const db = context.firestore();
       const users = db.collection('users');
       const organizations = db.collection('organizations');
+      const departments = db.collection('departments');
+      const products = db.collection('products');
+      const objectives = db.collection('objectives');
+      const objectiveContributors = db.collection('objectiveContributors');
 
       await users
         .doc('superadmin@example.com')
         .set({ name: 'Super Admin', superAdmin: true });
-      await users.doc('user@example.com').set({ name: 'User' });
+      await users
+        .doc('user@example.com')
+        .set({ name: 'User', admin: ['organization-x'] });
       await users.doc('user2@example.com').set({ name: 'User 2' });
+      await users.doc('user3@example.com').set({ name: 'User 3' });
 
       await organizations
-        .doc('organization')
-        .set({ name: 'Organization', team: [users.doc('user@example.com')] });
+        .doc('organization-x')
+        .set({ name: 'Organization X', team: [users.doc('user@example.com')] });
+      await organizations.doc('organization-y').set({ name: 'Organization Y' });
+
+      await departments.doc('department-x1').set({
+        name: 'Department X1',
+        team: [users.doc('user2@example.com')],
+        organization: organizations.doc('organization-x'),
+      });
+      await departments.doc('department-y1').set({
+        name: 'Department Y1',
+        organization: organizations.doc('organization-y'),
+      });
+
+      await products.doc('product-x1').set({
+        name: 'Product X1',
+        team: [users.doc('user3@example.com')],
+        organization: organizations.doc('organization-x'),
+        department: organizations.doc('department-x'),
+      });
+
+      await objectives.doc('department-x1-objective-1').set({
+        name: 'Department X1 - Objective 1',
+        parent: departments.doc('department-x1'),
+      });
+      await objectives.doc('department-y1-objective-1').set({
+        name: 'Department Y1 - Objective 1',
+        parent: departments.doc('department-y1'),
+      });
+
+      await objectiveContributors.doc('objective-contributor-1').set({
+        objective: objectives.doc('department-x1-objective-1'),
+        item: objectives.doc('product-x1'),
+      });
     });
   });
 
@@ -60,8 +100,8 @@ describe('Test Firestore rules', () => {
   });
 
   test('users cannot delete other users', async () => {
-    await withAuthenticatedUser(testEnv, 'user@example.com', async (db) => {
-      const user = db.collection('users').doc('user2@example.com');
+    await withAuthenticatedUser(testEnv, 'user2@example.com', async (db) => {
+      const user = db.collection('users').doc('user3@example.com');
       await expect(user.get()).resolves.toHaveProperty('exists', true);
       await expectPermissionDenied(user.delete());
       await expect(user.get()).resolves.toHaveProperty('exists', true);
@@ -105,6 +145,72 @@ describe('Test Firestore rules', () => {
       await expectPermissionDenied(organizations.add({ foo: 'bar' }));
     });
   });
+
+  test('anonymous users cannot read objective contributors', async () => {
+    await withUnauthenticatedUser(testEnv, async (db) => {
+      const oc = db.collection('objectiveContributors').doc('objective-contributor-1');
+      await expectPermissionDenied(oc.get());
+    });
+  });
+
+  test('users can read objective contributors', async () => {
+    await withAuthenticatedUser(testEnv, 'user@example.com', async (db) => {
+      const objectiveContributors = db.collection('objectiveContributors');
+      await expectGetSucceeds(objectiveContributors.get());
+    });
+  });
+
+  test('anonymous users cannot create objective contributors', async () => {
+    await withAuthenticatedUser(testEnv, 'user@example.com', async (db) => {
+      const objectiveContributors = db.collection('objectiveContributors');
+      await expectPermissionDenied(objectiveContributors.add({ foo: 'bar' }));
+    });
+  });
+
+  test('organization admins can create objective contributors', async () => {
+    await withAuthenticatedUser(testEnv, 'user@example.com', async (db) => {
+      const objectiveContributors = db.collection('objectiveContributors');
+      const departments = db.collection('departments');
+      const objectives = db.collection('objectives');
+
+      await expectAddSucceeds(
+        objectiveContributors.add({
+          objective: objectives.doc('department-x1-objective-1'),
+          item: departments.doc('department-x1'),
+        })
+      );
+    });
+  });
+
+  test('organization admins cannot create objective contributors in other organizations', async () => {
+    await withAuthenticatedUser(testEnv, 'user@example.com', async (db) => {
+      const objectiveContributors = db.collection('objectiveContributors');
+      const departments = db.collection('departments');
+      const objectives = db.collection('objectives');
+
+      await expectPermissionDenied(
+        objectiveContributors.add({
+          objective: objectives.doc('department-y1-objective-1'),
+          item: departments.doc('department-y1'),
+        })
+      );
+    });
+  });
+
+  test('users can create objective contributors for their own objectives', async () => {
+    await withAuthenticatedUser(testEnv, 'user2@example.com', async (db) => {
+      const objectiveContributors = db.collection('objectiveContributors');
+      const departments = db.collection('departments');
+      const objectives = db.collection('objectives');
+
+      await expectAddSucceeds(
+        objectiveContributors.add({
+          objective: objectives.doc('department-x1-objective-1'),
+          item: departments.doc('department-x1'),
+        })
+      );
+    });
+  });
 });
 
 afterAll(async () => {
diff --git a/tests/firebase/utils.js b/tests/firebase/utils.js
index de92018c9..d80a1b8b6 100644
--- a/tests/firebase/utils.js
+++ b/tests/firebase/utils.js
@@ -15,11 +15,19 @@ export async function expectPermissionDenied(promise) {
   expect(errorResult.code).toBe('permission-denied' || 'PERMISSION_DENIED');
 }
 
+export async function expectAddSucceeds(promise) {
+  const successResult = await assertSucceeds(promise);
+  expect(successResult).not.toBeUndefined();
+  return successResult;
+}
+
 export async function expectUpdateSucceeds(promise) {
   const successResult = await assertSucceeds(promise);
   expect(successResult).toBeUndefined();
 }
 
 export async function expectGetSucceeds(promise) {
-  expect(assertSucceeds(promise)).not.toBeUndefined();
+  const successResult = await assertSucceeds(promise);
+  expect(successResult).not.toBeUndefined();
+  return successResult;
 }

From cfd3ccbf520727048e9c8de0a39e4f30d9fccfd1 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Fri, 3 Nov 2023 13:28:21 +0100
Subject: [PATCH 074/102] Clearly indicate objective inheritance and
 contributors

---
 src/components/GanttChart.vue           |   2 +-
 src/components/ItemTag.vue              |  40 ++++++
 src/components/KeyResultLinkCard.vue    |  59 ++------
 src/components/ObjectiveDetailsCard.vue |  10 +-
 src/components/ObjectiveLinkCard.vue    | 171 ++++++++++++++++--------
 src/components/panes/ObjectivePane.vue  |   2 +-
 src/config/colors.js                    |  85 +++---------
 src/locale/locales/en-US.json           |   1 +
 src/locale/locales/nb-NO.json           |   1 +
 src/styles/main.scss                    |   1 +
 src/util/okr.js                         |  11 +-
 11 files changed, 201 insertions(+), 182 deletions(-)
 create mode 100644 src/components/ItemTag.vue

diff --git a/src/components/GanttChart.vue b/src/components/GanttChart.vue
index 129923283..72d987c5b 100644
--- a/src/components/GanttChart.vue
+++ b/src/components/GanttChart.vue
@@ -723,7 +723,7 @@ export default {
     }
   }
 
-  ::v-deep &__title {
+  ::v-deep &__name {
     display: -webkit-box;
     overflow: hidden;
     -webkit-box-orient: vertical;
diff --git a/src/components/ItemTag.vue b/src/components/ItemTag.vue
new file mode 100644
index 000000000..6ffb14fbb
--- /dev/null
+++ b/src/components/ItemTag.vue
@@ -0,0 +1,40 @@
+<template>
+  <span class="item-tag">
+    <span :style="{ background: contributorTagColor(item.name) }"></span>
+    <span>{{ item.name }}</span>
+  </span>
+</template>
+
+<script>
+import { contributorTagColor } from '@/util/okr';
+
+export default {
+  name: 'ItemTag',
+
+  props: {
+    item: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  methods: {
+    contributorTagColor,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.item-tag {
+  display: inline-flex;
+  gap: 0.25rem;
+  align-items: center;
+  text-wrap: nowrap;
+
+  span:first-of-type {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+  }
+}
+</style>
diff --git a/src/components/KeyResultLinkCard.vue b/src/components/KeyResultLinkCard.vue
index 43fd79491..697ac34e4 100644
--- a/src/components/KeyResultLinkCard.vue
+++ b/src/components/KeyResultLinkCard.vue
@@ -15,37 +15,27 @@
           <span class="key-result-link-card__title pkt-txt-14">
             {{ title }}
           </span>
-
-          <div class="key-result-link-card__tags">
-            <div
-              v-tooltip="owner"
-              :class="[
-                'key-result-link-card__tag',
-                'pkt-txt-12-bold',
-                `key-result-link-card__tag--${contributorTagMode(owner)}`,
-              ]"
-              :style="{ background: contributorTagColor(owner) }"
-            >
-              <span>{{ owner[0] }}</span>
-            </div>
-          </div>
         </div>
 
-        <progress-bar :progression="progression" compact />
+        <div>
+          <progress-bar :progression="progression" compact />
+          <item-tag v-if="owner" :item="owner" class="pkt-txt-12-light" />
+        </div>
       </div>
     </a>
   </router-link>
 </template>
 
 <script>
-import { contributorTagColor, contributorTagMode } from '@/util/okr';
 import ProgressBar from '@/components/ProgressBar.vue';
+import ItemTag from '@/components/ItemTag.vue';
 
 export default {
   name: 'KeyResultLinkCard',
 
   components: {
     ProgressBar,
+    ItemTag,
   },
 
   props: {
@@ -62,19 +52,15 @@ export default {
       required: true,
     },
     owner: {
-      type: String,
-      required: true,
+      type: Object,
+      required: false,
+      default: null,
     },
     active: {
       type: Boolean,
       default: false,
     },
   },
-
-  methods: {
-    contributorTagColor,
-    contributorTagMode,
-  },
 };
 </script>
 
@@ -109,32 +95,15 @@ export default {
     justify-content: space-between;
   }
 
+  .item-tag {
+    display: flex;
+    justify-content: end;
+  }
+
   &--active {
     color: var(--color-hover);
     background-color: var(--color-blue-5);
     border: 2px solid var(--color-hover);
   }
 }
-
-.key-result-link-card__tags {
-  display: flex;
-  gap: 0.25rem;
-}
-
-.key-result-link-card__tag {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: 50%;
-}
-
-.key-result-link-card__tag--light {
-  color: rgba(0, 0, 0, 0.6);
-}
-
-.key-result-link-card__tag--dark {
-  color: var(--color-white);
-}
 </style>
diff --git a/src/components/ObjectiveDetailsCard.vue b/src/components/ObjectiveDetailsCard.vue
index 3ca5e8ac0..54627ca27 100644
--- a/src/components/ObjectiveDetailsCard.vue
+++ b/src/components/ObjectiveDetailsCard.vue
@@ -23,7 +23,7 @@
     <div class="objective-details__tiles pkt-grid">
       <div class="pkt-cell pkt-cell--span12 pkt-cell--span5-tablet-up">
         <h4>{{ $t('objective.owner') }}</h4>
-        {{ objective.parent.name }}
+        <item-tag v-if="objective.parent?.name" :item="objective.parent" />
       </div>
 
       <div
@@ -31,7 +31,7 @@
         class="pkt-cell pkt-cell--span12 pkt-cell--span7-tablet-up"
       >
         <h4>{{ $t('objective.contributors') }}</h4>
-        {{ contributors.map((c) => c.name).join(', ') }}
+        <item-tag v-for="c in contributors" :key="c.id" :item="c" />
       </div>
 
       <div
@@ -65,6 +65,7 @@ import { startOfDay } from 'date-fns';
 import { PktButton } from '@oslokommune/punkt-vue2';
 import { periodDates, uniqueBy } from '@/util';
 import i18n from '@/locale/i18n';
+import ItemTag from '@/components/ItemTag.vue';
 import ProgressBar from '@/components/ProgressBar.vue';
 import HTMLOutput from '@/components/HTMLOutput.vue';
 
@@ -74,6 +75,7 @@ export default {
   components: {
     HTMLOutput,
     PktButton,
+    ItemTag,
     ProgressBar,
   },
 
@@ -182,6 +184,10 @@ export default {
       @include get-text('pkt-txt-14-medium');
       margin-bottom: 0.25rem;
     }
+
+    .item-tag:not(:last-child) {
+      margin-right: 1rem;
+    }
   }
 
   &--compact {
diff --git a/src/components/ObjectiveLinkCard.vue b/src/components/ObjectiveLinkCard.vue
index 730df70b4..f448e4739 100644
--- a/src/components/ObjectiveLinkCard.vue
+++ b/src/components/ObjectiveLinkCard.vue
@@ -17,55 +17,64 @@
     >
       <div class="objective-link-card__inner">
         <div class="objective-link-card__heading">
-          <input
-            v-if="checkable"
-            type="checkbox"
-            class="pkt-form-check-input"
-            :checked="checked"
-            @click.stop="$emit('toggle', $event.target.checked)"
-          />
-          <pkt-tag
-            v-if="objectiveOwner"
-            text-style="normal-text"
-            skin="yellow"
-            size="small"
-            class="objective-link-card__owner"
-          >
-            {{ objectiveOwner.name }}
-          </pkt-tag>
-
-          <ul class="objective-link-card__tags">
-            <li
-              v-for="c in contributors"
-              :key="c.id"
-              v-tooltip="c.name"
-              :class="[
-                'objective-link-card__tag',
-                'pkt-txt-12-bold',
-                `objective-link-card__tag--${contributorTagMode(c.name)}`,
-              ]"
-              :style="{ background: contributorTagColor(c.name) }"
-            >
-              <span>{{ c.name[0] }}</span>
-            </li>
-          </ul>
+          <div v-if="checkable" class="pkt-input-check">
+            <div class="pkt-input-check__input">
+              <input
+                type="checkbox"
+                class="pkt-input-check__input-checkbox"
+                :checked="checked"
+                @click.stop="$emit('toggle', $event.target.checked)"
+              />
+            </div>
+          </div>
+          <div class="objective-link-card__title pkt-txt-12">
+            <pkt-icon name="bullseye" />
+            <span v-if="objectiveOwner">
+              {{
+                $t(isInheritedObjective ? 'general.objectiveBy' : 'general.objective', {
+                  owner: objectiveOwner.name,
+                })
+              }}
+            </span>
+          </div>
         </div>
 
-        <span class="objective-link-card__title pkt-txt-14">
+        <span class="objective-link-card__name pkt-txt-14">
           {{ objective.name }}
         </span>
 
-        <progress-bar :progression="objective.progression" />
+        <div class="objective-link-card__footer">
+          <progress-bar :progression="objective.progression" compact />
+
+          <div
+            :class="[
+              'objective-link-card__tags',
+              { 'objective-link-card__tags--empty': !contributors.length },
+              'pkt-txt-12-light',
+            ]"
+          >
+            <template v-if="externalContributors.length">
+              <template v-if="hasOwnKeyResult">
+                <item-tag :item="activeItem" />
+                <pkt-icon
+                  v-if="hasOwnKeyResult && externalContributors.length"
+                  name="plus-sign"
+                />
+              </template>
+              <item-tag v-for="c in externalContributors" :key="c.id" :item="c" />
+            </template>
+          </div>
+        </div>
       </div>
     </a>
   </router-link>
 </template>
 
 <script>
+import { mapState } from 'vuex';
 import getActiveItemType from '@/util/getActiveItemType';
-import { PktTag } from '@oslokommune/punkt-vue2';
 import ProgressBar from '@/components/ProgressBar.vue';
-import { contributorTagColor, contributorTagMode } from '@/util/okr';
+import ItemTag from '@/components/ItemTag.vue';
 import { db } from '@/config/firebaseConfig';
 import { uniqueBy } from '@/util';
 
@@ -74,7 +83,7 @@ export default {
 
   components: {
     ProgressBar,
-    PktTag,
+    ItemTag,
   },
 
   props: {
@@ -106,6 +115,8 @@ export default {
   }),
 
   computed: {
+    ...mapState(['activeItem']),
+
     /**
      * Return a list of unique contributors to the key results in
      * `this.keyResults`.
@@ -116,6 +127,29 @@ export default {
         'id'
       );
     },
+
+    /**
+     * Return a list of contributors that does not include the current item.
+     */
+    externalContributors() {
+      return this.contributors.filter(({ id }) => id !== this.activeItem.id);
+    },
+
+    /**
+     * Return `true` if the current objective has another parent than
+     * `this.activeItem`.
+     */
+    isInheritedObjective() {
+      return this.objectiveOwner && this.objectiveOwner.id !== this.activeItem.id;
+    },
+
+    /**
+     * Return true if `this.activeItem` has own key result attached to this
+     * objective.
+     */
+    hasOwnKeyResult() {
+      return this.contributors.map((c) => c.id).includes(this.activeItem.id);
+    },
   },
 
   async created() {
@@ -143,9 +177,6 @@ export default {
   },
 
   methods: {
-    contributorTagColor,
-    contributorTagMode,
-
     async activate(event, rootHandler) {
       if (this.beforeNavigate) {
         await this.beforeNavigate(event);
@@ -175,21 +206,42 @@ export default {
     flex-direction: column;
     gap: 0.5rem;
     height: 100%;
-    padding: 1rem;
+    padding: 0.75rem 1rem;
   }
 
   &__heading {
     display: flex;
     gap: 0.5rem;
     align-items: center;
-    justify-content: space-between;
+    height: 1.25rem;
     white-space: nowrap;
+
+    .pkt-input-check__input-checkbox {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
   }
 
   &__title {
+    display: flex;
+    gap: 0.25rem;
+    align-items: center;
+    color: var(--color-grayscale-50);
+    --fg-color: var(--color-grayscale-50);
+    line-height: 0.75rem;
+  }
+
+  &__name {
     text-wrap: balance;
   }
 
+  &__footer {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    text-wrap: nowrap;
+  }
+
   &--active,
   &--checked {
     color: var(--color-hover);
@@ -202,25 +254,26 @@ export default {
 
 .objective-link-card__tags {
   display: flex;
-  flex: 1 0 auto;
-  gap: 0.25rem;
-  justify-content: flex-end;
-}
+  gap: 0.75rem;
+  height: 0.75rem;
+  margin-left: auto;
+  line-height: 0.75rem;
 
-.objective-link-card__tag {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: 50%;
-}
+  .pkt-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+    --fg-color: var(--color-grayscale-60);
 
-.objective-link-card__tag--light {
-  color: rgba(0, 0, 0, 0.6);
-}
+    &,
+    ::v-deep > svg {
+      min-width: auto;
+      min-height: auto;
+    }
+  }
 
-.objective-link-card__tag--dark {
-  color: var(--color-white);
+  &--empty {
+    color: var(--color-grayscale-50);
+    font-style: italic;
+  }
 }
 </style>
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index d21814947..ff6ec3e8d 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -56,7 +56,7 @@
             }"
             :title="keyResult.name"
             :progression="keyResult.progression"
-            :owner="keyResult.parent?.name ? keyResult.parent.name : ''"
+            :owner="keyResult.parent?.name ? keyResult.parent : null"
             :active="activeKeyResult && activeKeyResult.id === keyResult.id"
           />
         </transition-group>
diff --git a/src/config/colors.js b/src/config/colors.js
index ba432b932..be3130bed 100644
--- a/src/config/colors.js
+++ b/src/config/colors.js
@@ -1,68 +1,25 @@
 const CONTRIBUTOR_TAG_COLORS = [
-  {
-    name: 'color-beige-dark',
-    mode: 'dark',
-  },
-  {
-    name: 'color-beige-light',
-    mode: 'light',
-  },
-  {
-    name: 'color-blue-40',
-    mode: 'dark',
-  },
-  {
-    name: 'color-blue-dark',
-    mode: 'dark',
-  },
-  {
-    name: 'color-blue-dark-15',
-    mode: 'dark',
-  },
-  {
-    name: 'color-blue-dark-40',
-    mode: 'dark',
-  },
-  {
-    name: 'color-blue-light',
-    mode: 'light',
-  },
-  {
-    name: 'color-focus',
-    mode: 'light',
-  },
-  {
-    name: 'color-green-40',
-    mode: 'dark',
-  },
-  {
-    name: 'color-green-dark',
-    mode: 'dark',
-  },
-  {
-    name: 'color-green-dark-15',
-    mode: 'light',
-  },
-  {
-    name: 'color-red-100',
-    mode: 'dark',
-  },
-  {
-    name: 'color-red-20',
-    mode: 'light',
-  },
-  {
-    name: 'color-yellow',
-    mode: 'dark',
-  },
-  {
-    name: 'color-yellow-50',
-    mode: 'light',
-  },
-  {
-    name: 'color-yellow-80',
-    mode: 'dark',
-  },
+  'color-disabled',
+  'color-green-dark',
+  'color-hover',
+  'color-blue',
+  'color-beige-dark',
+  'color-blue-dark-40',
+  'color-blue-light',
+  'color-yellow-80',
+  'color-red-20',
+  'color-focus',
+  'color-green-dark-15',
+  'color-yellow',
+  'color-red-100',
+  'color-blue-40',
+  'color-focus',
+  'color-green-40',
+  'color-blue-dark',
+  'color-blue-dark-15',
+  'color-yellow-50',
+  'color-green',
+  'color-red',
 ];
 
 export default CONTRIBUTOR_TAG_COLORS;
diff --git a/src/locale/locales/en-US.json b/src/locale/locales/en-US.json
index 1233da821..fcada706f 100644
--- a/src/locale/locales/en-US.json
+++ b/src/locale/locales/en-US.json
@@ -188,6 +188,7 @@
     "keyResults": "Key results",
     "success": "Success",
     "objective": "Objective",
+    "objectiveBy": "Objective by {owner}",
     "selectObjectivesInPeriod": "Select all objectives in this period",
     "noObjectivesInPeriod": "No objectives in this period",
     "keyResult": "Key result",
diff --git a/src/locale/locales/nb-NO.json b/src/locale/locales/nb-NO.json
index 9ea23c488..6e4a7f3c1 100644
--- a/src/locale/locales/nb-NO.json
+++ b/src/locale/locales/nb-NO.json
@@ -188,6 +188,7 @@
     "keyResults": "Nøkkelresultater",
     "success": "Suksess",
     "objective": "Mål",
+    "objectiveBy": "Mål via {owner}",
     "selectObjectivesInPeriod": "Velg alle mål i denne perioden",
     "noObjectivesInPeriod": "Ingen mål i denne perioden",
     "keyResult": "Nøkkelresultat",
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 451db6587..00a5e45ff 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -114,6 +114,7 @@ body.using-mouse :not([class^='pkt-'], [class*=' pkt-']):focus {
   --color-red-100: #4d0800;
   --color-red-20: #fad0cb;
   --color-yellow-70: #966a1c;
+  --color-yellow-80: #774c01;
 
   // Colors in RGB value - add more if needed. SCSS rgba() function
   // can read hex numbers with CSS Variables.
diff --git a/src/util/okr.js b/src/util/okr.js
index d36c7276b..cbf5e2d68 100644
--- a/src/util/okr.js
+++ b/src/util/okr.js
@@ -49,14 +49,5 @@ export function compareKeyResults(a, b) {
  */
 export function contributorTagColor(name) {
   const c = CONTRIBUTOR_TAG_COLORS[simpleHash(name) % CONTRIBUTOR_TAG_COLORS.length];
-  return `var(--${c.name})`;
-}
-
-/**
- * Return the color mode to use for the contributor tag of the
- * organization/department/product called `name`.
- */
-export function contributorTagMode(name) {
-  const c = CONTRIBUTOR_TAG_COLORS[simpleHash(name) % CONTRIBUTOR_TAG_COLORS.length];
-  return c.mode;
+  return `var(--${c})`;
 }

From f3eaa2a535b7e04edc3f87de1b413f7333439aed Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Mon, 6 Nov 2023 12:10:12 +0100
Subject: [PATCH 075/102] Fix item tag text wrapping

---
 src/components/ItemTag.vue           | 2 +-
 src/components/ObjectiveLinkCard.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ItemTag.vue b/src/components/ItemTag.vue
index 6ffb14fbb..8242b3a1d 100644
--- a/src/components/ItemTag.vue
+++ b/src/components/ItemTag.vue
@@ -29,7 +29,7 @@ export default {
   display: inline-flex;
   gap: 0.25rem;
   align-items: center;
-  text-wrap: nowrap;
+  white-space: nowrap;
 
   span:first-of-type {
     width: 0.5rem;
diff --git a/src/components/ObjectiveLinkCard.vue b/src/components/ObjectiveLinkCard.vue
index f448e4739..1c4876fa3 100644
--- a/src/components/ObjectiveLinkCard.vue
+++ b/src/components/ObjectiveLinkCard.vue
@@ -239,7 +239,7 @@ export default {
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
-    text-wrap: nowrap;
+    white-space: nowrap;
   }
 
   &--active,

From d98c2f2bc3c97673d770efcadd572511a08a507c Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Mon, 6 Nov 2023 14:43:16 +0100
Subject: [PATCH 076/102] Reduce number of similar colors

---
 src/config/colors.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/config/colors.js b/src/config/colors.js
index be3130bed..16b805373 100644
--- a/src/config/colors.js
+++ b/src/config/colors.js
@@ -1,6 +1,5 @@
 const CONTRIBUTOR_TAG_COLORS = [
   'color-disabled',
-  'color-green-dark',
   'color-hover',
   'color-blue',
   'color-beige-dark',
@@ -11,11 +10,8 @@ const CONTRIBUTOR_TAG_COLORS = [
   'color-focus',
   'color-green-dark-15',
   'color-yellow',
-  'color-red-100',
-  'color-blue-40',
   'color-focus',
   'color-green-40',
-  'color-blue-dark',
   'color-blue-dark-15',
   'color-yellow-50',
   'color-green',

From abd54b5543b045b79caafe6ea6128445942ddb26 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Mon, 6 Nov 2023 15:38:56 +0100
Subject: [PATCH 077/102] Styling cleanup

---
 src/components/ItemTag.vue           |  7 +++++--
 src/components/ObjectiveLinkCard.vue | 17 +++--------------
 2 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/src/components/ItemTag.vue b/src/components/ItemTag.vue
index 8242b3a1d..200b8e184 100644
--- a/src/components/ItemTag.vue
+++ b/src/components/ItemTag.vue
@@ -1,6 +1,9 @@
 <template>
   <span class="item-tag">
-    <span :style="{ background: contributorTagColor(item.name) }"></span>
+    <span
+      class="item-tag__bullet"
+      :style="{ background: contributorTagColor(item.name) }"
+    ></span>
     <span>{{ item.name }}</span>
   </span>
 </template>
@@ -31,7 +34,7 @@ export default {
   align-items: center;
   white-space: nowrap;
 
-  span:first-of-type {
+  &__bullet {
     width: 0.5rem;
     height: 0.5rem;
     border-radius: 50%;
diff --git a/src/components/ObjectiveLinkCard.vue b/src/components/ObjectiveLinkCard.vue
index 1c4876fa3..1945787b3 100644
--- a/src/components/ObjectiveLinkCard.vue
+++ b/src/components/ObjectiveLinkCard.vue
@@ -46,13 +46,7 @@
         <div class="objective-link-card__footer">
           <progress-bar :progression="objective.progression" compact />
 
-          <div
-            :class="[
-              'objective-link-card__tags',
-              { 'objective-link-card__tags--empty': !contributors.length },
-              'pkt-txt-12-light',
-            ]"
-          >
+          <div class="objective-link-card__tags pkt-txt-12-light">
             <template v-if="externalContributors.length">
               <template v-if="hasOwnKeyResult">
                 <item-tag :item="activeItem" />
@@ -226,8 +220,8 @@ export default {
     display: flex;
     gap: 0.25rem;
     align-items: center;
-    color: var(--color-grayscale-50);
-    --fg-color: var(--color-grayscale-50);
+    color: var(--color-grayscale-60);
+    --fg-color: var(--color-grayscale-60);
     line-height: 0.75rem;
   }
 
@@ -270,10 +264,5 @@ export default {
       min-height: auto;
     }
   }
-
-  &--empty {
-    color: var(--color-grayscale-50);
-    font-style: italic;
-  }
 }
 </style>

From 29870c0458a212d0f007afb8bf61a782727eb19a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Tue, 7 Nov 2023 08:55:09 +0100
Subject: [PATCH 078/102] Fix key result link card `owner` argument type

---
 src/components/panes/ObjectivePane.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index ff6ec3e8d..cd9de8573 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -72,7 +72,7 @@
           }"
           :title="keyResult.name"
           :progression="keyResult.progression"
-          :owner="keyResult.parent?.name ? keyResult.parent.name : ''"
+          :owner="keyResult.parent?.name ? keyResult.parent : null"
           :active="activeKeyResult && activeKeyResult.id === keyResult.id"
         />
       </div>

From fe05bfa53505fc9900808761953bb1bdae37e7ec Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Mon, 6 Nov 2023 11:42:59 +0100
Subject: [PATCH 079/102] Persist timeline PPD using local storage

---
 package-lock.json             | 134 ++++++++++++++++++++++++++++++++++
 package.json                  |   1 +
 src/components/GanttChart.vue |  20 ++++-
 3 files changed, 153 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d043d2e00..e7ade14cb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "3.10.0",
       "dependencies": {
         "@oslokommune/punkt-vue2": "^9.2.6",
+        "@vueuse/core": "^10.5.0",
         "d3": "^7.6.1",
         "d3-array": "^3.1.1",
         "d3-axis": "^3.0.0",
@@ -4076,6 +4077,11 @@
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
       "dev": true
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.18.tgz",
+      "integrity": "sha512-v/ZHEj9xh82usl8LMR3GarzFY1IrbXJw5L4QfQhokjRV91q+SelFqxQWSep1ucXEZ22+dSTwLFkXeur25sPIbw=="
+    },
     "node_modules/@types/yargs": {
       "version": "17.0.24",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.24.tgz",
@@ -4114,6 +4120,89 @@
         "source-map": "^0.6.1"
       }
     },
+    "node_modules/@vueuse/core": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.5.0.tgz",
+      "integrity": "sha512-z/tI2eSvxwLRjOhDm0h/SXAjNm8N5ld6/SC/JQs6o6kpJ6Ya50LnEL8g5hoYu005i28L0zqB5L5yAl8Jl26K3A==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.18",
+        "@vueuse/metadata": "10.5.0",
+        "@vueuse/shared": "10.5.0",
+        "vue-demi": ">=0.14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.5.0.tgz",
+      "integrity": "sha512-fEbElR+MaIYyCkeM0SzWkdoMtOpIwO72x8WsZHRE7IggiOlILttqttM69AS13nrDxosnDBYdyy3C5mR1LCxHsw==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.5.0.tgz",
+      "integrity": "sha512-18iyxbbHYLst9MqU1X1QNdMHIjks6wC7XTVf0KNOv5es/Ms6gjVFCAAWTVP2JStuGqydg3DT+ExpFORUEi9yhg==",
+      "dependencies": {
+        "vue-demi": ">=0.14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/abort-controller": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
@@ -21989,6 +22078,11 @@
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
       "dev": true
     },
+    "@types/web-bluetooth": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.18.tgz",
+      "integrity": "sha512-v/ZHEj9xh82usl8LMR3GarzFY1IrbXJw5L4QfQhokjRV91q+SelFqxQWSep1ucXEZ22+dSTwLFkXeur25sPIbw=="
+    },
     "@types/yargs": {
       "version": "17.0.24",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.24.tgz",
@@ -22021,6 +22115,46 @@
         "source-map": "^0.6.1"
       }
     },
+    "@vueuse/core": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.5.0.tgz",
+      "integrity": "sha512-z/tI2eSvxwLRjOhDm0h/SXAjNm8N5ld6/SC/JQs6o6kpJ6Ya50LnEL8g5hoYu005i28L0zqB5L5yAl8Jl26K3A==",
+      "requires": {
+        "@types/web-bluetooth": "^0.0.18",
+        "@vueuse/metadata": "10.5.0",
+        "@vueuse/shared": "10.5.0",
+        "vue-demi": ">=0.14.6"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.6",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+          "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+          "requires": {}
+        }
+      }
+    },
+    "@vueuse/metadata": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.5.0.tgz",
+      "integrity": "sha512-fEbElR+MaIYyCkeM0SzWkdoMtOpIwO72x8WsZHRE7IggiOlILttqttM69AS13nrDxosnDBYdyy3C5mR1LCxHsw=="
+    },
+    "@vueuse/shared": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.5.0.tgz",
+      "integrity": "sha512-18iyxbbHYLst9MqU1X1QNdMHIjks6wC7XTVf0KNOv5es/Ms6gjVFCAAWTVP2JStuGqydg3DT+ExpFORUEi9yhg==",
+      "requires": {
+        "vue-demi": ">=0.14.6"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.6",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+          "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+          "requires": {}
+        }
+      }
+    },
     "abort-controller": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
diff --git a/package.json b/package.json
index 0548acdab..4635a213c 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@oslokommune/punkt-vue2": "^9.2.6",
+    "@vueuse/core": "^10.5.0",
     "d3": "^7.6.1",
     "d3-array": "^3.1.1",
     "d3-axis": "^3.0.0",
diff --git a/src/components/GanttChart.vue b/src/components/GanttChart.vue
index 72d987c5b..ffaa1d400 100644
--- a/src/components/GanttChart.vue
+++ b/src/components/GanttChart.vue
@@ -95,6 +95,7 @@ import {
   startOfDay,
   startOfMonth,
 } from 'date-fns';
+import { useLocalStorage } from '@vueuse/core';
 import { dateLongCompact } from '@/util';
 import paneEvents from '@/components/layout/paneEvents';
 import ObjectiveLinkCard from '@/components/ObjectiveLinkCard.vue';
@@ -122,10 +123,15 @@ export default {
     },
   },
 
+  setup() {
+    const minPPD = 3;
+    const defaultPPD = 4;
+    const localPPD = useLocalStorage('okr-timeline-ppd', defaultPPD);
+    return { defaultPPD, minPPD, localPPD };
+  },
+
   data() {
     return {
-      PPD: 4, // Pixels per day
-      minPPD: 3,
       lineWidth: '0.25rem',
       endPadding: 75, // Padding in pixels before/after the first/last months
       now: new Date(),
@@ -139,6 +145,16 @@ export default {
     ...mapState('okrs', ['activeObjective']),
     ...mapGetters('okrs', ['workbenchObjectives']),
 
+    PPD: {
+      get() {
+        const ppd = parseFloat(this.localPPD) || this.defaultPPD;
+        return Math.max(this.minPPD, ppd);
+      },
+      set(ppd) {
+        this.localPPD = ppd;
+      },
+    },
+
     minDate() {
       return min([
         this.now,

From 0814136429f163c42313e7d0d186e24e99278f09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Fri, 13 Oct 2023 13:03:16 +0200
Subject: [PATCH 080/102] Support objective lifting

Make it possible to "lift" objectives from a product or department to
the level above (to a department or organization, respectively).
---
 CHANGELOG.md                             |  2 +
 src/components/drawers/EditObjective.vue | 75 +++++++++++++++++++++++-
 src/locale/locales/en-US.json            |  4 +-
 src/locale/locales/nb-NO.json            |  4 +-
 src/store/index.js                       | 37 ++++++++++++
 src/util/getActiveItemType.js            |  4 ++
 6 files changed, 122 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index df919ad0f..baed7f5b1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,8 @@ All notable changes to this project will be documented in this file. The format
 - Key results can now be rearranged by drag and drop.
 - New key results are now given a start value of 0, a target value of 100, and
   percentage as unit of measurement by default.
+- Objectives can now be "lifted" from a product or department to the level above
+  (to a department or organization, respectively).
 
 ### Fixed
 
diff --git a/src/components/drawers/EditObjective.vue b/src/components/drawers/EditObjective.vue
index 5773c663e..27cb7b77a 100644
--- a/src/components/drawers/EditObjective.vue
+++ b/src/components/drawers/EditObjective.vue
@@ -52,6 +52,32 @@
           @click="useSuggestedPeriod"
         />
 
+        <form-component
+          v-if="canLift"
+          v-model="owner"
+          name="owner"
+          input-type="select"
+          :select-options="ownerOptions"
+          :select-reduce="(option) => option.value"
+          select-label="label"
+          label="Målansvarlig"
+          rules="required"
+        />
+
+        <pkt-alert v-if="hasNewOwner" skin="warning">
+          <p>
+            {{
+              $t('admin.objective.liftWarning1', {
+                curOwner: objective.parent.name,
+                newOwner: parentName,
+              })
+            }}
+          </p>
+          <p v-if="!hasParentEditRights">
+            {{ $t('admin.objective.liftWarning2', { newOwner: parentName }) }}
+          </p>
+        </pkt-alert>
+
         <template
           v-if="!thisObjective?.archived"
           #actions="{ handleSubmit, submitDisabled }"
@@ -109,14 +135,14 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 import { isEqual } from 'date-fns';
 import { db } from '@/config/firebaseConfig';
 import { formattedPeriod } from '@/util/okr';
 import Objective from '@/db/Objective';
 import firebase from 'firebase/compat/app';
 import locale from 'flatpickr/dist/l10n/no';
-import { PktButton } from '@oslokommune/punkt-vue2';
+import { PktAlert, PktButton } from '@oslokommune/punkt-vue2';
 import { FormSection, BtnSave, BtnDelete, BtnCancel } from '@/components/generic/form';
 import ArchivedRestore from '@/components/ArchivedRestore.vue';
 import PagedDrawerWrapper from '@/components/drawers/PagedDrawerWrapper.vue';
@@ -128,6 +154,7 @@ export default {
   components: {
     ArchivedRestore,
     PeriodShortcut,
+    PktAlert,
     PktButton,
     PagedDrawerWrapper,
     FormSection,
@@ -168,10 +195,14 @@ export default {
     },
     periodRange: null,
     loading: false,
+    owner: null,
+    parentRef: null,
+    parentName: null,
   }),
 
   computed: {
     ...mapState(['activeItemRef']),
+    ...mapGetters(['hasParentEditRights']),
 
     editMode() {
       return !!this.thisObjective?.id;
@@ -186,6 +217,31 @@ export default {
         isEqual(this.periodRange[1], this.newestObjective.endDate.toDate())
       );
     },
+
+    /**
+     * Return `true` if the user should be able to lift current objective.
+     */
+    canLift() {
+      return this.objective?.parent.department || this.objective?.parent.organization;
+    },
+
+    ownerOptions() {
+      return [
+        { label: this.objective.parent.name, value: this.thisObjective.parent.path },
+        { label: this.parentName, value: this.parentRef.path },
+      ];
+    },
+
+    /**
+     * Return `true` if a new owner has been chosen for the current objective.
+     */
+    hasNewOwner() {
+      return (
+        this.owner &&
+        this.objective &&
+        this.owner.split('/')[1] !== this.objective.parent.id
+      );
+    },
   },
 
   watch: {
@@ -212,8 +268,16 @@ export default {
             this.thisObjective = snapshot.data();
             this.thisObjective.id = this.objective.id;
             this.periodRange = this.getCurrentDateRange();
+            this.owner = this.thisObjective.parent.path;
             this.loading = false;
           });
+
+        if (this.canLift) {
+          this.parentRef = await db.doc(
+            this.objective.parent.department || this.objective.parent.organization
+          );
+          this.parentName = (await this.parentRef.get()).data().name;
+        }
       },
     },
   },
@@ -257,6 +321,9 @@ export default {
           } else {
             data.period = period;
           }
+          if (this.hasNewOwner) {
+            data.parent = this.parentRef;
+          }
           await Objective.update(this.thisObjective.id, data);
           this.$emit('update', this.thisObjective);
         } else {
@@ -323,4 +390,8 @@ export default {
 .period-suggestion {
   margin: -0.75rem 0 1rem 0;
 }
+
+.pkt-alert {
+  margin: 1.5rem 0;
+}
 </style>
diff --git a/src/locale/locales/en-US.json b/src/locale/locales/en-US.json
index fcada706f..06f123cf2 100644
--- a/src/locale/locales/en-US.json
+++ b/src/locale/locales/en-US.json
@@ -442,7 +442,9 @@
       "updated": "Objective was updated!",
       "change": "Edit objective",
       "delete": "Delete objective",
-      "useLastPeriod": "Set to last used period:"
+      "useLastPeriod": "Set to last used period:",
+      "liftWarning1": "With this the objective will move from {curOwner} to {newOwner} and can't be moved back.",
+      "liftWarning2": "You will no longer be able to edit the objective since you aren't a member of {newOwner}."
     },
     "keyResult": {
       "new": "New key result",
diff --git a/src/locale/locales/nb-NO.json b/src/locale/locales/nb-NO.json
index 6e4a7f3c1..1f6e3afcc 100644
--- a/src/locale/locales/nb-NO.json
+++ b/src/locale/locales/nb-NO.json
@@ -442,7 +442,9 @@
       "updated": "Målet ble endret!",
       "change": "Rediger mål",
       "delete": "Slett mål",
-      "useLastPeriod": "Sett til sist brukte periode:"
+      "useLastPeriod": "Sett til sist brukte periode:",
+      "liftWarning1": "Målet vil med dette flyttes fra {curOwner} til {newOwner} og kan ikke flyttes tilbake.",
+      "liftWarning2": "Du vil ikke lenger kunne redigere målet siden du ikke er medlem i {newOwner}."
     },
     "keyResult": {
       "new": "Nytt nøkkelresultat",
diff --git a/src/store/index.js b/src/store/index.js
index b112152de..d858c3043 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@ import { vuexfireMutations } from 'vuexfire';
 import i18n from '@/locale/i18n';
 import { sortByLocale } from '@/store/actions/actionUtils';
 
+import { isDepartment, isProduct } from '@/util/getActiveItemType';
 import defaultPreferences from '@/db/User/defaultPreferences';
 import moduleActions from './actions';
 import okrsModule from './modules/okrs';
@@ -68,6 +69,42 @@ export const storeGetters = {
     return activeItem.team.map(({ id }) => id).includes(user.id);
   },
 
+  /**
+   * Return `true` if the current user is an admin of the active item or a
+   * member of its parent item.
+   */
+  hasParentEditRights: (state) => {
+    const { user, activeItem } = state;
+
+    if (!user || !activeItem) {
+      return false;
+    }
+
+    const { organization } = activeItem;
+
+    const isAdminOfOrganization = organization
+      ? user.admin && user.admin.includes(organization.id)
+      : user.admin && user.admin.includes(activeItem.id);
+
+    if ((user && user.superAdmin) || isAdminOfOrganization) {
+      return true;
+    }
+
+    if (isProduct(activeItem) && activeItem.department.team) {
+      return activeItem.department.team
+        .map((userDoc) => userDoc.split('/')[1])
+        .includes(user.id);
+    }
+
+    if (isDepartment(activeItem) && activeItem.organization.team) {
+      return activeItem.organization.team
+        .map((userDoc) => userDoc.split('/')[1])
+        .includes(user.id);
+    }
+
+    return false;
+  },
+
   sidebarGroups: (state) => {
     const { organizations, departments, products, activeItem } = state;
 
diff --git a/src/util/getActiveItemType.js b/src/util/getActiveItemType.js
index d04e87bb0..c91f7dff0 100644
--- a/src/util/getActiveItemType.js
+++ b/src/util/getActiveItemType.js
@@ -23,3 +23,7 @@ export function isOrganization(item) {
 export function isDepartment(item) {
   return getActiveItemType(item) === 'department';
 }
+
+export function isProduct(item) {
+  return getActiveItemType(item) === 'product';
+}

From 1cb81373a218c304333146dd36cc71c112f95a69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Wed, 1 Nov 2023 08:41:39 +0100
Subject: [PATCH 081/102] Forbid lifting when there are foreign contributors

---
 src/components/drawers/EditObjective.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/drawers/EditObjective.vue b/src/components/drawers/EditObjective.vue
index 27cb7b77a..aa8be98f0 100644
--- a/src/components/drawers/EditObjective.vue
+++ b/src/components/drawers/EditObjective.vue
@@ -198,6 +198,7 @@ export default {
     owner: null,
     parentRef: null,
     parentName: null,
+    keyResults: [],
   }),
 
   computed: {
@@ -222,13 +223,16 @@ export default {
      * Return `true` if the user should be able to lift current objective.
      */
     canLift() {
-      return this.objective?.parent.department || this.objective?.parent.organization;
+      return (
+        (this.objective?.parent.department || this.objective?.parent.organization) &&
+        this.keyResults.every((kr) => kr.parent.id === this.objective.parent.id)
+      );
     },
 
     ownerOptions() {
       return [
         { label: this.objective.parent.name, value: this.thisObjective.parent.path },
-        { label: this.parentName, value: this.parentRef.path },
+        { label: this.parentName, value: this.parentRef?.path },
       ];
     },
 
@@ -272,6 +276,13 @@ export default {
             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

From a42e025c6f743655726e4e353f3e82460e7fcd8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Wed, 1 Nov 2023 10:49:59 +0100
Subject: [PATCH 082/102] Unfocus objective after lifting it

---
 src/components/drawers/EditObjective.vue | 15 ++++++++++++---
 src/locale/locales/en-US.json            |  3 ++-
 src/locale/locales/nb-NO.json            |  3 ++-
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/drawers/EditObjective.vue b/src/components/drawers/EditObjective.vue
index aa8be98f0..0cacfbfe9 100644
--- a/src/components/drawers/EditObjective.vue
+++ b/src/components/drawers/EditObjective.vue
@@ -4,6 +4,9 @@
       <template v-if="!isDone">
         {{ $t(editMode ? 'admin.objective.change' : 'admin.objective.new') }}
       </template>
+      <template v-else-if="lifted">
+        {{ $t('objective.moved') }}
+      </template>
       <template v-else-if="isSuccess">
         {{ $t(editMode ? 'objective.updated' : 'admin.objective.created') }}
       </template>
@@ -105,7 +108,7 @@
             {{ $t('btn.close') }}
           </pkt-button>
           <pkt-button
-            v-if="thisObjective.id"
+            v-if="thisObjective.id && !lifted"
             skin="secondary"
             @onClick="$emit('add-key-result')"
           >
@@ -135,7 +138,7 @@
 </template>
 
 <script>
-import { mapGetters, mapState } from 'vuex';
+import { mapActions, mapGetters, mapState } from 'vuex';
 import { isEqual } from 'date-fns';
 import { db } from '@/config/firebaseConfig';
 import { formattedPeriod } from '@/util/okr';
@@ -199,6 +202,7 @@ export default {
     parentRef: null,
     parentName: null,
     keyResults: [],
+    lifted: false,
   }),
 
   computed: {
@@ -254,6 +258,7 @@ export default {
       async handler(visible) {
         this.thisObjective = null;
         this.periodRange = null;
+        this.lifted = false;
         if (visible) {
           this.$refs.drawer.reset();
         }
@@ -294,6 +299,8 @@ export default {
   },
 
   methods: {
+    ...mapActions('okrs', ['setActiveObjective']),
+
     formattedPeriod,
 
     getCurrentDateRange() {
@@ -334,9 +341,11 @@ export default {
           }
           if (this.hasNewOwner) {
             data.parent = this.parentRef;
+            this.setActiveObjective(null);
+            this.lifted = true;
           }
           await Objective.update(this.thisObjective.id, data);
-          this.$emit('update', this.thisObjective);
+          await this.$emit('update', this.thisObjective);
         } else {
           const { id } = await Objective.create({
             name,
diff --git a/src/locale/locales/en-US.json b/src/locale/locales/en-US.json
index 06f123cf2..0e89c0c04 100644
--- a/src/locale/locales/en-US.json
+++ b/src/locale/locales/en-US.json
@@ -402,7 +402,8 @@
     "editedBy": "Changed by",
     "created": "Created",
     "edited": "Changed",
-    "updated": "Objective was changed!"
+    "updated": "The objective was changed!",
+    "moved": "The objective was moved!"
   },
   "period": {
     "choosePeriod": "Choose period",
diff --git a/src/locale/locales/nb-NO.json b/src/locale/locales/nb-NO.json
index 1f6e3afcc..badb5606c 100644
--- a/src/locale/locales/nb-NO.json
+++ b/src/locale/locales/nb-NO.json
@@ -402,7 +402,8 @@
     "editedBy": "Endret av",
     "created": "Opprettet",
     "edited": "Sist endret",
-    "updated": "Målet ble endret!"
+    "updated": "Målet ble endret!",
+    "moved": "Målet ble flyttet!"
   },
   "period": {
     "choosePeriod": "Velg periode",

From dbd5d208077a03977c57f02d2e04f836270ac072 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Wed, 1 Nov 2023 10:53:15 +0100
Subject: [PATCH 083/102] Tweak lift warning texts

---
 src/locale/locales/en-US.json | 2 +-
 src/locale/locales/nb-NO.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/locale/locales/en-US.json b/src/locale/locales/en-US.json
index 0e89c0c04..2ad3c1d60 100644
--- a/src/locale/locales/en-US.json
+++ b/src/locale/locales/en-US.json
@@ -445,7 +445,7 @@
       "delete": "Delete objective",
       "useLastPeriod": "Set to last used period:",
       "liftWarning1": "With this the objective will move from {curOwner} to {newOwner} and can't be moved back.",
-      "liftWarning2": "You will no longer be able to edit the objective since you aren't a member of {newOwner}."
+      "liftWarning2": "You will no longer be able to edit the objective since you aren't a member of {newOwner}, but you will still be able to add key results to the objective."
     },
     "keyResult": {
       "new": "New key result",
diff --git a/src/locale/locales/nb-NO.json b/src/locale/locales/nb-NO.json
index badb5606c..a6dbccfaa 100644
--- a/src/locale/locales/nb-NO.json
+++ b/src/locale/locales/nb-NO.json
@@ -445,7 +445,7 @@
       "delete": "Slett mål",
       "useLastPeriod": "Sett til sist brukte periode:",
       "liftWarning1": "Målet vil med dette flyttes fra {curOwner} til {newOwner} og kan ikke flyttes tilbake.",
-      "liftWarning2": "Du vil ikke lenger kunne redigere målet siden du ikke er medlem i {newOwner}."
+      "liftWarning2": "Du vil ikke lenger kunne redigere målet siden du ikke er medlem i {newOwner}, men du vil fortsatt kunne legge nøkkelresultater til målet."
     },
     "keyResult": {
       "new": "Nytt nøkkelresultat",

From 835cfa28a7f6aa790ced35a181e3ea53108c05d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Wed, 1 Nov 2023 11:51:36 +0100
Subject: [PATCH 084/102] Fix Firestore rule for objective updates

---
 firestore.rules | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/firestore.rules b/firestore.rules
index 068e963c6..e8f3fcd66 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -112,6 +112,18 @@ service cloud.firestore {
       return userIsMemberOfParent;
     }
 
+    //
+    // Return true if the current user is a member of `document.parent`
+    // *before* performing the action.
+    //
+    function isMemberOfParentBefore(document, type) {
+      let userRef = /databases/$(database)/documents/users/$(request.auth.token.email);
+      let doc = get(/databases/$(database)/documents/$(type)/$(document));
+      let parentDoc = get(doc.data.parent);
+      let userIsMemberOfParent = userRef in parentDoc.data.team;
+      return userIsMemberOfParent;
+    }
+
     //
     // Return true if the current user is a member of the parent of the
     // document's objective *before* performing the action.
@@ -203,7 +215,7 @@ service cloud.firestore {
     match /objectives/{document} {
       allow read: if isSignedIn();
       allow create: if isSuperAdmin() || isMemberOfParent(document, 'objectives') || isAdminOfParent(document, 'objectives');
-      allow update: if isSuperAdmin() || isMemberOfParent(document, 'objectives') || isAdminOfParent(document, 'objectives');
+      allow update: if isSuperAdmin() || isMemberOfParentBefore(document, 'objectives') || isAdminOfParent(document, 'objectives');
       allow delete: if isSuperAdmin();
     }
 

From df6e7b84b33294131235338779fd6c7282430bbe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Wed, 1 Nov 2023 12:11:01 +0100
Subject: [PATCH 085/102] Only close pane when the objective disappears

---
 src/components/drawers/EditObjective.vue | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/drawers/EditObjective.vue b/src/components/drawers/EditObjective.vue
index 0cacfbfe9..f5a76d02a 100644
--- a/src/components/drawers/EditObjective.vue
+++ b/src/components/drawers/EditObjective.vue
@@ -223,13 +223,28 @@ export default {
       );
     },
 
+    /**
+     * Return `true` if the current objective has any foreign contributors.
+     */
+    hasForeignContributors() {
+      return this.keyResults.some((kr) => kr.parent.id !== this.objective.parent.id);
+    },
+
+    /**
+     * Return `true` if the current objective has any key results belonging to
+     * the objective owner itself.
+     */
+    hasSelfContributor() {
+      return this.keyResults.some((kr) => kr.parent.id === this.objective.parent.id);
+    },
+
     /**
      * Return `true` if the user should be able to lift current objective.
      */
     canLift() {
       return (
         (this.objective?.parent.department || this.objective?.parent.organization) &&
-        this.keyResults.every((kr) => kr.parent.id === this.objective.parent.id)
+        !this.hasForeignContributors
       );
     },
 
@@ -341,7 +356,9 @@ export default {
           }
           if (this.hasNewOwner) {
             data.parent = this.parentRef;
-            this.setActiveObjective(null);
+            if (!this.hasSelfContributor) {
+              this.setActiveObjective(null);
+            }
             this.lifted = true;
           }
           await Objective.update(this.thisObjective.id, data);

From 481f3d91432b1d0a9afe44287e82b4cf1bdebf51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Wed, 1 Nov 2023 12:25:52 +0100
Subject: [PATCH 086/102] Link to newly lifted objectives

---
 src/components/drawers/EditObjective.vue | 18 ++++++++++++++++--
 src/locale/locales/en-US.json            |  3 ++-
 src/locale/locales/nb-NO.json            |  3 ++-
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/drawers/EditObjective.vue b/src/components/drawers/EditObjective.vue
index f5a76d02a..10576b5ee 100644
--- a/src/components/drawers/EditObjective.vue
+++ b/src/components/drawers/EditObjective.vue
@@ -104,7 +104,18 @@
           </pkt-button>
         </template>
         <template v-else-if="!objective">
-          <pkt-button skin="tertiary" @onClick="close">
+          <router-link
+            v-if="lifted && !hasSelfContributor"
+            :to="{
+              name: 'ObjectiveHome',
+              params: { objectiveId: thisObjective.id, slug: parentSlug },
+            }"
+            class="pkt-link pkt-txt-18-medium"
+          >
+            <pkt-icon class="pkt-link__icon" name="chevron-right" />
+            {{ $t('admin.objective.goTo') }}
+          </router-link>
+          <pkt-button v-else skin="tertiary" @onClick="close">
             {{ $t('btn.close') }}
           </pkt-button>
           <pkt-button
@@ -201,6 +212,7 @@ export default {
     owner: null,
     parentRef: null,
     parentName: null,
+    parentSlug: null,
     keyResults: [],
     lifted: false,
   }),
@@ -307,7 +319,9 @@ export default {
           this.parentRef = await db.doc(
             this.objective.parent.department || this.objective.parent.organization
           );
-          this.parentName = (await this.parentRef.get()).data().name;
+          const parentData = (await this.parentRef.get()).data();
+          this.parentName = parentData.name;
+          this.parentSlug = parentData.slug;
         }
       },
     },
diff --git a/src/locale/locales/en-US.json b/src/locale/locales/en-US.json
index 2ad3c1d60..325ce3717 100644
--- a/src/locale/locales/en-US.json
+++ b/src/locale/locales/en-US.json
@@ -445,7 +445,8 @@
       "delete": "Delete objective",
       "useLastPeriod": "Set to last used period:",
       "liftWarning1": "With this the objective will move from {curOwner} to {newOwner} and can't be moved back.",
-      "liftWarning2": "You will no longer be able to edit the objective since you aren't a member of {newOwner}, but you will still be able to add key results to the objective."
+      "liftWarning2": "You will no longer be able to edit the objective since you aren't a member of {newOwner}, but you will still be able to add key results to the objective.",
+      "goTo": "Go to the objective"
     },
     "keyResult": {
       "new": "New key result",
diff --git a/src/locale/locales/nb-NO.json b/src/locale/locales/nb-NO.json
index a6dbccfaa..9101670af 100644
--- a/src/locale/locales/nb-NO.json
+++ b/src/locale/locales/nb-NO.json
@@ -445,7 +445,8 @@
       "delete": "Slett mål",
       "useLastPeriod": "Sett til sist brukte periode:",
       "liftWarning1": "Målet vil med dette flyttes fra {curOwner} til {newOwner} og kan ikke flyttes tilbake.",
-      "liftWarning2": "Du vil ikke lenger kunne redigere målet siden du ikke er medlem i {newOwner}, men du vil fortsatt kunne legge nøkkelresultater til målet."
+      "liftWarning2": "Du vil ikke lenger kunne redigere målet siden du ikke er medlem i {newOwner}, men du vil fortsatt kunne legge nøkkelresultater til målet.",
+      "goTo": "Gå til målet"
     },
     "keyResult": {
       "new": "Nytt nøkkelresultat",

From ede1d5578b88f4759be1f1fe6d3c48d2432bce7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Wed, 1 Nov 2023 12:28:03 +0100
Subject: [PATCH 087/102] Add missing translation

---
 src/components/drawers/EditObjective.vue | 2 +-
 src/locale/locales/en-US.json            | 3 ++-
 src/locale/locales/nb-NO.json            | 3 ++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/drawers/EditObjective.vue b/src/components/drawers/EditObjective.vue
index 10576b5ee..83ade09d5 100644
--- a/src/components/drawers/EditObjective.vue
+++ b/src/components/drawers/EditObjective.vue
@@ -63,7 +63,7 @@
           :select-options="ownerOptions"
           :select-reduce="(option) => option.value"
           select-label="label"
-          label="Målansvarlig"
+          :label="$t('admin.objective.responsible')"
           rules="required"
         />
 
diff --git a/src/locale/locales/en-US.json b/src/locale/locales/en-US.json
index 325ce3717..3071586f7 100644
--- a/src/locale/locales/en-US.json
+++ b/src/locale/locales/en-US.json
@@ -446,7 +446,8 @@
       "useLastPeriod": "Set to last used period:",
       "liftWarning1": "With this the objective will move from {curOwner} to {newOwner} and can't be moved back.",
       "liftWarning2": "You will no longer be able to edit the objective since you aren't a member of {newOwner}, but you will still be able to add key results to the objective.",
-      "goTo": "Go to the objective"
+      "goTo": "Go to the objective",
+      "responsible": "Responsible"
     },
     "keyResult": {
       "new": "New key result",
diff --git a/src/locale/locales/nb-NO.json b/src/locale/locales/nb-NO.json
index 9101670af..e4318506b 100644
--- a/src/locale/locales/nb-NO.json
+++ b/src/locale/locales/nb-NO.json
@@ -446,7 +446,8 @@
       "useLastPeriod": "Sett til sist brukte periode:",
       "liftWarning1": "Målet vil med dette flyttes fra {curOwner} til {newOwner} og kan ikke flyttes tilbake.",
       "liftWarning2": "Du vil ikke lenger kunne redigere målet siden du ikke er medlem i {newOwner}, men du vil fortsatt kunne legge nøkkelresultater til målet.",
-      "goTo": "Gå til målet"
+      "goTo": "Gå til målet",
+      "responsible": "Målansvarlig"
     },
     "keyResult": {
       "new": "Nytt nøkkelresultat",

From 251fa0e09cb1cfb49a8cfaecdb6024501f72064e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Tue, 7 Nov 2023 08:51:58 +0100
Subject: [PATCH 088/102] Only objective owners cam edit objectives

---
 src/components/ObjectiveDetailsCard.vue | 26 ++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/ObjectiveDetailsCard.vue b/src/components/ObjectiveDetailsCard.vue
index 54627ca27..a856d99f1 100644
--- a/src/components/ObjectiveDetailsCard.vue
+++ b/src/components/ObjectiveDetailsCard.vue
@@ -4,7 +4,7 @@
       <h2>{{ objective.name }}</h2>
 
       <pkt-button
-        v-if="!compact && hasEditRights"
+        v-if="!compact && canEdit"
         v-tooltip="$t('btn.updateObjective')"
         skin="tertiary"
         variant="icon-only"
@@ -60,7 +60,7 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'vuex';
 import { startOfDay } from 'date-fns';
 import { PktButton } from '@oslokommune/punkt-vue2';
 import { periodDates, uniqueBy } from '@/util';
@@ -97,7 +97,27 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['hasEditRights']),
+    ...mapState(['activeItem', 'user']),
+
+    isAdminOfCurrentOrganization() {
+      return this.user.admin?.includes(
+        this.activeItem.organization
+          ? this.activeItem.organization.id
+          : this.activeItem.id
+      );
+    },
+
+    isMemberOfObjectiveParent() {
+      return this.objective.parent.team?.includes(`users/${this.user.id}`);
+    },
+
+    canEdit() {
+      return (
+        this.user.superAdmin ||
+        this.isAdminOfCurrentOrganization ||
+        this.isMemberOfObjectiveParent
+      );
+    },
 
     period() {
       if (this.objective.startDate && this.objective.endDate) {

From 08f2fb8281ecbc7c21cbb329a06a7277fc975e86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Tue, 7 Nov 2023 09:22:58 +0100
Subject: [PATCH 089/102] Only key result owners can edit key results

---
 src/components/panes/KeyResultPane.vue | 29 +++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/components/panes/KeyResultPane.vue b/src/components/panes/KeyResultPane.vue
index b97cd68ac..65b104000 100644
--- a/src/components/panes/KeyResultPane.vue
+++ b/src/components/panes/KeyResultPane.vue
@@ -22,7 +22,7 @@
         <h2 class="pkt-txt-18-medium">{{ activeKeyResult.name }}</h2>
 
         <pkt-button
-          v-if="hasEditRights"
+          v-if="canEdit"
           v-tooltip="$t('btn.updateKeyResult')"
           skin="tertiary"
           size="small"
@@ -41,7 +41,7 @@
       <div class="key-result-pane__progression">
         <h4 class="pkt-txt-14-medium">{{ $t('keyResult.progression') }}</h4>
         <pkt-button
-          v-if="hasEditRights"
+          v-if="canEdit"
           :text="$t('widget.history.value')"
           skin="primary"
           size="small"
@@ -111,7 +111,7 @@
 </template>
 
 <script>
-import { mapActions, mapGetters, mapState } from 'vuex';
+import { mapActions, mapState } from 'vuex';
 import { format } from 'd3-format';
 import { max, min } from 'd3-array';
 import { db } from '@/config/firebaseConfig';
@@ -158,9 +158,28 @@ export default {
   }),
 
   computed: {
-    ...mapState(['activeItem', 'activePeriod']),
+    ...mapState(['activeItem', 'activePeriod', 'user']),
     ...mapState('okrs', ['activeObjective', 'activeKeyResult']),
-    ...mapGetters(['hasEditRights']),
+
+    isAdminOfCurrentOrganization() {
+      return this.user.admin?.includes(
+        this.activeItem.organization
+          ? this.activeItem.organization.id
+          : this.activeItem.id
+      );
+    },
+
+    isMemberOfKeyResultParent() {
+      return this.activeKeyResult.parent.team?.includes(`users/${this.user.id}`);
+    },
+
+    canEdit() {
+      return (
+        this.user.superAdmin ||
+        this.isAdminOfCurrentOrganization ||
+        this.isMemberOfKeyResultParent
+      );
+    },
 
     startDate() {
       return this.activeKeyResult.objective.startDate || this.activePeriod.startDate;

From 707338b3d8aaab3eb0973c417c1ae8fa7180a9bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Tue, 7 Nov 2023 11:55:36 +0100
Subject: [PATCH 090/102] Replace route when lifting objective away

---
 src/components/drawers/EditObjective.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/drawers/EditObjective.vue b/src/components/drawers/EditObjective.vue
index 83ade09d5..8852bc17b 100644
--- a/src/components/drawers/EditObjective.vue
+++ b/src/components/drawers/EditObjective.vue
@@ -372,6 +372,7 @@ export default {
             data.parent = this.parentRef;
             if (!this.hasSelfContributor) {
               this.setActiveObjective(null);
+              this.$router.replace({ name: 'ItemHome' });
             }
             this.lifted = true;
           }

From 2404a707b0e98c9e80da3d1ed9639bc52eeab7fd Mon Sep 17 00:00:00 2001
From: "Anne M. P." <annemerete.pettersen@origo.oslo.kommune.no>
Date: Thu, 2 Nov 2023 09:43:59 +0100
Subject: [PATCH 091/102] Filter ownerOptions on keyResult

---
 src/components/drawers/EditKeyResult.vue | 42 ++++++++++++++++++------
 src/components/panes/ObjectivePane.vue   | 30 +++++++++++++++--
 2 files changed, 60 insertions(+), 12 deletions(-)

diff --git a/src/components/drawers/EditKeyResult.vue b/src/components/drawers/EditKeyResult.vue
index ac756323b..877e0b5c9 100644
--- a/src/components/drawers/EditKeyResult.vue
+++ b/src/components/drawers/EditKeyResult.vue
@@ -162,7 +162,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 import { db } from '@/config/firebaseConfig';
 import KeyResult from '@/db/KeyResult';
 import ObjectiveContributors from '@/db/ObjectiveContributors';
@@ -225,7 +225,9 @@ export default {
       'organizations',
       'departments',
       'products',
+      'user',
     ]),
+    ...mapGetters(['hasEditRights']),
     thisLevel() {
       if (isOrganization(this.activeItem)) {
         return this.organizations.find((o) => o.id === this.activeItem.id);
@@ -254,13 +256,29 @@ export default {
         name: this.activeItem.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 childrenOptions = this.children.map((child) => ({
-        value: child.path,
-        name: child.name,
-      }));
+      const options = [];
+
+      if (this.hasEditRights) {
+        options.push(this.thisLevelOption);
+      }
 
-      return [this.thisLevelOption, ...childrenOptions];
+      this.children
+        .filter((child) => this.memberOfLevel(child) || this.isAdmin)
+        .map((child) => ({
+          value: child.path,
+          name: child.name,
+        }))
+        .forEach((child) => options.push(child));
+
+      return options;
     },
     editMode() {
       return !!this.thisKeyResult?.id;
@@ -300,12 +318,12 @@ export default {
           });
       },
     },
-    thisLevel: {
+    ownerOptions: {
       immediate: true,
       async handler() {
-        // Set currentLevel as default option for key result owner
-        if (!this.keyResult?.id) {
-          this.contributor = this.thisLevelOption;
+        // Set default option
+        if (!this.keyResult?.id && this.ownerOptions?.length === 1) {
+          this.contributor = this.ownerOptions[0];
         }
       },
     },
@@ -315,6 +333,10 @@ export default {
     isDepartment,
     isOrganization,
 
+    memberOfLevel(level) {
+      return level.team.map(({ id }) => id).includes(this.user.id);
+    },
+
     async save() {
       const { pageIndex, next } = this.$refs.drawer;
 
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index cd9de8573..4c6341ddc 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -25,7 +25,7 @@
       <div class="objective-pane__key-results-header">
         <h3 class="pkt-txt-16-medium">{{ $t('general.keyResults') }}</h3>
         <pkt-button
-          v-if="hasEditRights"
+          v-if="hasEditRights || isMemberOfChild()"
           :text="$t('general.keyResult')"
           skin="primary"
           size="small"
@@ -128,7 +128,7 @@ export default {
   }),
 
   computed: {
-    ...mapState(['activeItem']),
+    ...mapState(['activeItem', 'user', 'departments', 'products']),
     ...mapState('okrs', ['activeObjective', 'activeKeyResult']),
     ...mapGetters(['hasEditRights']),
 
@@ -172,6 +172,32 @@ export default {
       },
     },
   },
+
+  methods: {
+    isMemberOfChild() {
+      const { department, organization, id: parentId } = this.activeObjective.parent;
+
+      if (!organization && !department) {
+        const departmentsWithUser = this.departments.filter(
+          (dep) =>
+            dep.organization.id === parentId &&
+            dep.team.map(({ id }) => id).includes(this.user.id)
+        );
+        return departmentsWithUser.length > 0;
+      }
+
+      if (organization && !department) {
+        const productsWithUser = this.products.filter(
+          (product) =>
+            product.department.id === parentId &&
+            product.team.map(({ id }) => id).includes(this.user.id)
+        );
+        return productsWithUser.length > 0;
+      }
+
+      return false;
+    },
+  },
 };
 </script>
 

From 08318468557fa9b02652690f093aa71ac2e0fef6 Mon Sep 17 00:00:00 2001
From: "Anne M. P." <annemerete.pettersen@origo.oslo.kommune.no>
Date: Tue, 7 Nov 2023 10:16:17 +0100
Subject: [PATCH 092/102] Filter ownerOptions on keyResult

---
 src/components/panes/ObjectivePane.vue | 48 ++++++++++++--------------
 1 file changed, 22 insertions(+), 26 deletions(-)

diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index 4c6341ddc..dd0803d8b 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -151,53 +151,49 @@ export default {
         });
       },
     },
-  },
-
-  watch: {
-    activeObjective: {
-      immediate: true,
-      async handler(objective) {
-        this.$nextTick(() => {
-          this.$refs.pane.$el.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        this.loadingKeyResults = true;
-        const objectiveRef = await db.doc(`objectives/${objective.id}`);
-        const keyResults = await db
-          .collection('keyResults')
-          .where('archived', '==', false)
-          .where('objective', '==', objectiveRef)
-          .orderBy('name');
-        await this.$bind('keyResults', keyResults);
-        this.loadingKeyResults = false;
-      },
-    },
-  },
 
-  methods: {
     isMemberOfChild() {
       const { department, organization, id: parentId } = this.activeObjective.parent;
 
       if (!organization && !department) {
-        const departmentsWithUser = this.departments.filter(
+        return this.departments.some(
           (dep) =>
             dep.organization.id === parentId &&
             dep.team.map(({ id }) => id).includes(this.user.id)
         );
-        return departmentsWithUser.length > 0;
       }
 
       if (organization && !department) {
-        const productsWithUser = this.products.filter(
+        return this.products.some(
           (product) =>
             product.department.id === parentId &&
             product.team.map(({ id }) => id).includes(this.user.id)
         );
-        return productsWithUser.length > 0;
       }
 
       return false;
     },
   },
+
+  watch: {
+    activeObjective: {
+      immediate: true,
+      async handler(objective) {
+        this.$nextTick(() => {
+          this.$refs.pane.$el.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        this.loadingKeyResults = true;
+        const objectiveRef = await db.doc(`objectives/${objective.id}`);
+        const keyResults = await db
+          .collection('keyResults')
+          .where('archived', '==', false)
+          .where('objective', '==', objectiveRef)
+          .orderBy('name');
+        await this.$bind('keyResults', keyResults);
+        this.loadingKeyResults = false;
+      },
+    },
+  },
 };
 </script>
 

From 6ccc5172a0c56a4022e264d42bc693e4393a029b Mon Sep 17 00:00:00 2001
From: "Anne M. P." <annemerete.pettersen@origo.oslo.kommune.no>
Date: Wed, 8 Nov 2023 10:31:06 +0100
Subject: [PATCH 093/102] Fixed computed syntax

---
 src/components/panes/ObjectivePane.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index dd0803d8b..170871431 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -25,7 +25,7 @@
       <div class="objective-pane__key-results-header">
         <h3 class="pkt-txt-16-medium">{{ $t('general.keyResults') }}</h3>
         <pkt-button
-          v-if="hasEditRights || isMemberOfChild()"
+          v-if="hasEditRights || isMemberOfChild"
           :text="$t('general.keyResult')"
           skin="primary"
           size="small"

From b9f092d47bb8c31526efed4b3010fefc69aa04bc Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Wed, 8 Nov 2023 12:31:19 +0100
Subject: [PATCH 094/102] Use Punkt tag in objective card title

---
 src/components/ObjectiveLinkCard.vue | 45 +++++++++++++++++-----------
 1 file changed, 28 insertions(+), 17 deletions(-)

diff --git a/src/components/ObjectiveLinkCard.vue b/src/components/ObjectiveLinkCard.vue
index 1945787b3..ad191805b 100644
--- a/src/components/ObjectiveLinkCard.vue
+++ b/src/components/ObjectiveLinkCard.vue
@@ -27,15 +27,22 @@
               />
             </div>
           </div>
-          <div class="objective-link-card__title pkt-txt-12">
-            <pkt-icon name="bullseye" />
-            <span v-if="objectiveOwner">
-              {{
-                $t(isInheritedObjective ? 'general.objectiveBy' : 'general.objective', {
-                  owner: objectiveOwner.name,
-                })
-              }}
-            </span>
+          <div class="objective-link-card__title">
+            <pkt-tag
+              :skin="
+                isExactActive || active || isInheritedObjective ? 'blue-light' : 'grey'
+              "
+              size="small"
+              text-style="normal-text"
+              icon-name="bullseye"
+            >
+              <template v-if="isInheritedObjective">
+                {{ $t('general.objectiveBy', { owner: objectiveOwner.name }) }}
+              </template>
+              <template v-else>
+                {{ $t('general.objective') }}
+              </template>
+            </pkt-tag>
           </div>
         </div>
 
@@ -48,13 +55,7 @@
 
           <div class="objective-link-card__tags pkt-txt-12-light">
             <template v-if="externalContributors.length">
-              <template v-if="hasOwnKeyResult">
-                <item-tag :item="activeItem" />
-                <pkt-icon
-                  v-if="hasOwnKeyResult && externalContributors.length"
-                  name="plus-sign"
-                />
-              </template>
+              <item-tag v-if="hasOwnKeyResult" :item="activeItem" />
               <item-tag v-for="c in externalContributors" :key="c.id" :item="c" />
             </template>
           </div>
@@ -66,6 +67,7 @@
 
 <script>
 import { mapState } from 'vuex';
+import { PktTag } from '@oslokommune/punkt-vue2';
 import getActiveItemType from '@/util/getActiveItemType';
 import ProgressBar from '@/components/ProgressBar.vue';
 import ItemTag from '@/components/ItemTag.vue';
@@ -76,6 +78,7 @@ export default {
   name: 'ObjectiveLinkCard',
 
   components: {
+    PktTag,
     ProgressBar,
     ItemTag,
   },
@@ -221,8 +224,16 @@ export default {
     gap: 0.25rem;
     align-items: center;
     color: var(--color-grayscale-60);
-    --fg-color: var(--color-grayscale-60);
     line-height: 0.75rem;
+    --fg-color: var(--color-grayscale-60);
+
+    ::v-deep .pkt-tag {
+      font-size: 0.75rem;
+
+      &__icon {
+        margin-right: 0.25rem;
+      }
+    }
   }
 
   &__name {

From d6054573c9b982d26aeb7221bf55c1ce0d335dda Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Wed, 8 Nov 2023 12:47:52 +0100
Subject: [PATCH 095/102] Add item name to OKR and KPI pane titles

---
 src/components/panes/PaneWrapper.vue  |  6 ++++--
 src/components/panes/TimelinePane.vue | 13 +++++++++++--
 src/locale/locales/en-US.json         |  3 ++-
 src/locale/locales/nb-NO.json         |  3 ++-
 src/views/Item/ItemMeasurements.vue   |  9 +++++++--
 5 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/components/panes/PaneWrapper.vue b/src/components/panes/PaneWrapper.vue
index 14e08f6af..7a084595c 100644
--- a/src/components/panes/PaneWrapper.vue
+++ b/src/components/panes/PaneWrapper.vue
@@ -14,8 +14,10 @@
     </div>
 
     <div class="pane__inner">
-      <div v-if="title" class="pane__header">
-        <h1 class="pkt-txt-18-medium">{{ title }}</h1>
+      <div v-if="title || $slots.title" class="pane__header">
+        <slot name="title">
+          <h1 class="pkt-txt-18-medium">{{ title }}</h1>
+        </slot>
       </div>
 
       <div class="pane__body">
diff --git a/src/components/panes/TimelinePane.vue b/src/components/panes/TimelinePane.vue
index 15d6bcfb3..13df85c65 100644
--- a/src/components/panes/TimelinePane.vue
+++ b/src/components/panes/TimelinePane.vue
@@ -1,5 +1,14 @@
 <template>
-  <pane-wrapper :title="$t('general.OKRsLong')" class="timeline-pane">
+  <pane-wrapper class="timeline-pane">
+    <template #title>
+      <h1 class="pkt-txt-18-medium pkt-hide-desktop-up">
+        {{ $t('general.OKRsLong') }}
+      </h1>
+      <h1 class="pkt-txt-18-medium pkt-show-desktop-up">
+        {{ $t('general.OKRsLonger', { name: activeItem.name }) }}
+      </h1>
+    </template>
+
     <template #actions>
       <pkt-button
         v-if="hasEditRights"
@@ -36,7 +45,7 @@ export default {
   },
 
   computed: {
-    ...mapState(['dataLoading', 'selectedPeriod']),
+    ...mapState(['activeItem', 'dataLoading', 'selectedPeriod']),
     ...mapGetters(['objectivesWithID', 'hasEditRights']),
   },
 };
diff --git a/src/locale/locales/en-US.json b/src/locale/locales/en-US.json
index ec9ce9051..166f34f89 100644
--- a/src/locale/locales/en-US.json
+++ b/src/locale/locales/en-US.json
@@ -72,7 +72,6 @@
         "description": "The measurement is considered especially important as an indicator of achievement. If the measurement is registered for a product, it is also displayed as a result indicator for the parent department."
       }
     },
-    "heading": "Measurements",
     "itemRowError": "error",
     "help": {
       "updates": "Measurements can be updated both manually through the OKR Tracker and automatically using a Google Sheets- or API-integration. Note that it is only possible to register a single value within a day. Read more about creating and updating measurements {readMoreLink} (in Norwegian).",
@@ -167,7 +166,9 @@
     "general": "General",
     "OKRs": "OKRs",
     "OKRsLong": "Objectives and Key results",
+    "OKRsLonger": "Objectives and Key results for {name}",
     "KPIs": "Measurements",
+    "KPIsLong": "Measurements for {name}",
     "project": "OKR",
     "loading": "Loading ...",
     "owner": "City of Oslo",
diff --git a/src/locale/locales/nb-NO.json b/src/locale/locales/nb-NO.json
index e26f946ab..9f86a2fd5 100644
--- a/src/locale/locales/nb-NO.json
+++ b/src/locale/locales/nb-NO.json
@@ -72,7 +72,6 @@
         "description": "Målingen anses som en vesentlig indikator for måloppnåelse og fremheves særskilt. Dersom målingen registreres for et produkt, vises den også som del av produktområdets resultatindikatorer. Kan for eksempel være tillknyttet et tildelingsbrev eller andre styringsinstrumenter."
       }
     },
-    "heading": "Målinger",
     "itemRowError": "feil",
     "help": {
       "updates": "Målinger kan både oppdateres manuelt via OKR-trackeren og automatisk via av en Google Sheets- eller API-integrasjon. Merk at det kun er mulig å registrere ett målepunkt per døgn. Les mer om opprettelse og oppdatering av målinger {readMoreLink}.",
@@ -167,7 +166,9 @@
     "general": "Generelt",
     "OKRs": "OKR-er",
     "OKRsLong": "Mål og nøkkelresultater",
+    "OKRsLonger": "Mål og nøkkelresultater for {name}",
     "KPIs": "Målinger",
+    "KPIsLong": "Målinger for {name}",
     "project": "OKR",
     "loading": "Laster ...",
     "owner": "Oslo kommune",
diff --git a/src/views/Item/ItemMeasurements.vue b/src/views/Item/ItemMeasurements.vue
index 595b9f69e..61dde25dc 100644
--- a/src/views/Item/ItemMeasurements.vue
+++ b/src/views/Item/ItemMeasurements.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="measurements-page">
     <div v-if="allKpis.length" class="measurements-page__header">
-      <h1 class="pkt-txt-18-medium">{{ $t('kpi.heading') }}</h1>
+      <h1 class="pkt-txt-18-medium pkt-hide-tablet-up">
+        {{ $t('general.KPIs') }}
+      </h1>
+      <h1 class="pkt-txt-18-medium pkt-show-tablet-up">
+        {{ $t('general.KPIsLong', { name: activeItem.name }) }}
+      </h1>
     </div>
 
     <div v-if="hasEditRights" class="measurements-page__actions">
@@ -97,7 +102,7 @@ export default {
   }),
 
   computed: {
-    ...mapState(['kpis', 'subKpis', 'selectedPeriod']),
+    ...mapState(['activeItem', 'kpis', 'subKpis', 'selectedPeriod']),
     ...mapGetters(['hasEditRights']),
 
     kpiGroups() {

From 7aa2fd4799e771f913e4b0254f153bae327b4315 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Wed, 8 Nov 2023 12:49:17 +0100
Subject: [PATCH 096/102] Adjust objective owner label wording

---
 src/locale/locales/nb-NO.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/locale/locales/nb-NO.json b/src/locale/locales/nb-NO.json
index 9f86a2fd5..9c5e301da 100644
--- a/src/locale/locales/nb-NO.json
+++ b/src/locale/locales/nb-NO.json
@@ -449,7 +449,7 @@
       "liftWarning1": "Målet vil med dette flyttes fra {curOwner} til {newOwner} og kan ikke flyttes tilbake.",
       "liftWarning2": "Du vil ikke lenger kunne redigere målet siden du ikke er medlem i {newOwner}, men du vil fortsatt kunne legge nøkkelresultater til målet.",
       "goTo": "Gå til målet",
-      "responsible": "Målansvarlig"
+      "responsible": "Ansvarlig for målet"
     },
     "keyResult": {
       "new": "Nytt nøkkelresultat",

From 030938a28e2d8021ff62b53db896a8f4d17c09f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Wed, 8 Nov 2023 08:32:08 +0100
Subject: [PATCH 097/102] Fix CodeQL warning about useless conditional

Remove useless conditional check (`user` would always evaluate to
`true`; it is checked earlier in the same function).
---
 src/store/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/store/index.js b/src/store/index.js
index d858c3043..d36ef7605 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -86,7 +86,7 @@ export const storeGetters = {
       ? user.admin && user.admin.includes(organization.id)
       : user.admin && user.admin.includes(activeItem.id);
 
-    if ((user && user.superAdmin) || isAdminOfOrganization) {
+    if (user.superAdmin || isAdminOfOrganization) {
       return true;
     }
 

From 944e019a5bfab3bf6f188985b9f2cb66ef069df0 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Wed, 8 Nov 2023 13:52:33 +0100
Subject: [PATCH 098/102] Fix sub KPI bindings

---
 CHANGELOG.md                                 |  2 +
 src/router/router-guards/itemMeasurements.js |  1 -
 src/store/actions/index.js                   |  2 -
 src/store/actions/set_active_item.js         |  8 +--
 src/store/actions/set_sub_kpis.js            | 36 ------------
 src/store/index.js                           |  4 +-
 src/store/modules/kpis.js                    | 60 ++++++++++++++++++++
 src/views/Item/ItemMeasurements.vue          |  3 +-
 8 files changed, 68 insertions(+), 48 deletions(-)
 delete mode 100644 src/store/actions/set_sub_kpis.js
 create mode 100644 src/store/modules/kpis.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a7bfbe884..8a4ec1dc7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -32,6 +32,8 @@ All notable changes to this project will be documented in this file. The format
 
 - Fixed Markdown rendering of descriptions on objective, key result, and
   measurement detail pages.
+- Product result indicators and key figures are now correctly included as part
+  of parent measurements when switching between items.
 
 ### Security
 
diff --git a/src/router/router-guards/itemMeasurements.js b/src/router/router-guards/itemMeasurements.js
index 6cc17ce57..275ab82ae 100644
--- a/src/router/router-guards/itemMeasurements.js
+++ b/src/router/router-guards/itemMeasurements.js
@@ -29,7 +29,6 @@ export default async function itemMeasurements(to, from, next) {
         label: periodDates({ startDate, endDate }),
       });
     }
-    await store.dispatch('set_sub_kpis', activeItem.id);
     return next();
   } catch (error) {
     console.error(error);
diff --git a/src/store/actions/index.js b/src/store/actions/index.js
index fbcdff81c..a1f2c68ba 100644
--- a/src/store/actions/index.js
+++ b/src/store/actions/index.js
@@ -3,7 +3,6 @@ import init_state from './init_state';
 import reset_state from './reset_state';
 import set_active_item from './set_active_item';
 import set_active_period_and_data from './set_active_period_and_data';
-import set_sub_kpis from './set_sub_kpis.js';
 import set_user from './set_user';
 import update_preferences from './update_preferences';
 
@@ -12,7 +11,6 @@ export default {
   reset_state,
   set_active_item,
   set_active_period_and_data,
-  set_sub_kpis,
   set_user,
   update_preferences,
 };
diff --git a/src/store/actions/set_active_item.js b/src/store/actions/set_active_item.js
index cfdcf1778..cfcb734a3 100644
--- a/src/store/actions/set_active_item.js
+++ b/src/store/actions/set_active_item.js
@@ -1,5 +1,4 @@
 import { firestoreAction } from 'vuexfire';
-import { db } from '@/config/firebaseConfig';
 import getActivePeriod from './actionUtils';
 
 /**
@@ -9,6 +8,7 @@ import getActivePeriod from './actionUtils';
 export default firestoreAction(
   async ({ bindFirestoreRef, unbindFirestoreRef, commit, dispatch }, item) => {
     if (!item) {
+      dispatch('kpis/clearKpis');
       return unbindFirestoreRef('activeItem');
     }
 
@@ -27,11 +27,7 @@ export default firestoreAction(
     });
 
     // Bind KPIs
-    const kpisRef = db
-      .collection('kpis')
-      .where('parent', '==', item)
-      .where('archived', '==', false);
-    await bindFirestoreRef('kpis', kpisRef, { maxRefDepth: 1 });
+    await dispatch('kpis/setKpis');
 
     return true;
   }
diff --git a/src/store/actions/set_sub_kpis.js b/src/store/actions/set_sub_kpis.js
deleted file mode 100644
index d241c785f..000000000
--- a/src/store/actions/set_sub_kpis.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { firestoreAction } from 'vuexfire';
-import { db } from '@/config/firebaseConfig';
-
-export default firestoreAction(
-  async ({ bindFirestoreRef, unbindFirestoreRef }, departmentId) => {
-    if (!departmentId) {
-      return unbindFirestoreRef('subKpis');
-    }
-
-    const department = db.doc(`departments/${departmentId}`);
-    const departmentExists = await department.get().then((ss) => ss.exists);
-
-    if (!departmentExists) {
-      return unbindFirestoreRef('subKpis');
-    }
-
-    const products = await db
-      .collection('products')
-      .where('archived', '==', false)
-      .where('department', '==', department)
-      .limit(10)
-      .get()
-      .then((snapshot) => snapshot.docs.map((doc) => doc.ref));
-
-    if (products.length) {
-      const subKpisRef = db
-        .collection('kpis')
-        .where('archived', '==', false)
-        .where('parent', 'in', products);
-
-      await bindFirestoreRef('subKpis', subKpisRef, { maxRefDepth: 1 });
-    }
-
-    return true;
-  }
-);
diff --git a/src/store/index.js b/src/store/index.js
index d36ef7605..bc85ce25a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -8,6 +8,7 @@ import { isDepartment, isProduct } from '@/util/getActiveItemType';
 import defaultPreferences from '@/db/User/defaultPreferences';
 import moduleActions from './actions';
 import okrsModule from './modules/okrs';
+import kpisModule from './modules/kpis';
 
 Vue.use(Vuex);
 
@@ -274,6 +275,7 @@ export const mutations = {
 export default new Vuex.Store({
   modules: {
     okrs: okrsModule,
+    kpis: kpisModule,
   },
   state: {
     user: null,
@@ -287,8 +289,6 @@ export default new Vuex.Store({
     periods: [],
     objectives: [],
     objectiveContributors: [],
-    kpis: [],
-    subKpis: [],
     loginError: null,
     loading: false,
     providers: import.meta.env.VITE_LOGIN_PROVIDERS.split('-'),
diff --git a/src/store/modules/kpis.js b/src/store/modules/kpis.js
new file mode 100644
index 000000000..9f9c4266d
--- /dev/null
+++ b/src/store/modules/kpis.js
@@ -0,0 +1,60 @@
+import { firestoreAction } from 'vuexfire';
+import { db } from '@/config/firebaseConfig';
+import { isDepartment } from '@/util/getActiveItemType';
+
+export default {
+  namespaced: true,
+
+  state: () => ({
+    kpis: [],
+    subKpis: [],
+  }),
+
+  actions: {
+    setKpis: firestoreAction(
+      async ({ bindFirestoreRef, unbindFirestoreRef, dispatch, rootState }) => {
+        const { activeItem, activeItemRef } = rootState;
+
+        if (!activeItemRef || !activeItem) {
+          dispatch('clearKpis');
+          return;
+        }
+
+        unbindFirestoreRef('subKpis');
+
+        // Bind KPIs
+        const kpisRef = db
+          .collection('kpis')
+          .where('parent', '==', activeItemRef)
+          .where('archived', '==', false);
+
+        await bindFirestoreRef('kpis', kpisRef, { maxRefDepth: 1 });
+
+        if (isDepartment(activeItem)) {
+          // Bind any KPIs from child products
+          const products = await db
+            .collection('products')
+            .where('archived', '==', false)
+            .where('department', '==', activeItemRef)
+            .limit(10)
+            .get()
+            .then((snapshot) => snapshot.docs.map((doc) => doc.ref));
+
+          if (products.length) {
+            const subKpisRef = db
+              .collection('kpis')
+              .where('archived', '==', false)
+              .where('parent', 'in', products);
+
+            await bindFirestoreRef('subKpis', subKpisRef, { maxRefDepth: 1 });
+          }
+        }
+      }
+    ),
+
+    clearKpis: firestoreAction(({ unbindFirestoreRef }) => {
+      unbindFirestoreRef('kpis');
+      unbindFirestoreRef('subKpis');
+    }),
+  },
+};
diff --git a/src/views/Item/ItemMeasurements.vue b/src/views/Item/ItemMeasurements.vue
index 61dde25dc..1f74d86eb 100644
--- a/src/views/Item/ItemMeasurements.vue
+++ b/src/views/Item/ItemMeasurements.vue
@@ -102,7 +102,8 @@ export default {
   }),
 
   computed: {
-    ...mapState(['activeItem', 'kpis', 'subKpis', 'selectedPeriod']),
+    ...mapState(['activeItem', 'selectedPeriod']),
+    ...mapState('kpis', ['kpis', 'subKpis']),
     ...mapGetters(['hasEditRights']),
 
     kpiGroups() {

From 2cd409261233d15d51fd2b513e1cc337c2e7146b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Wed, 8 Nov 2023 12:20:36 +0100
Subject: [PATCH 099/102] More objective contributors Firestore rule tweaks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Make users able to create objective contributors for objectives on
their item's parent item (🤯).
---
 firestore.rules                  | 126 ++++++++++++++++++++++++++-----
 tests/firebase/firestore.test.js |  21 +++++-
 2 files changed, 127 insertions(+), 20 deletions(-)

diff --git a/firestore.rules b/firestore.rules
index 8fd52688e..d876cfc88 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -65,6 +65,50 @@ service cloud.firestore {
       return isSignedIn() && (isAdminFromOrgOfProdOrDep || isAdminOfParent);
     }
 
+    //
+    // Return true if the current user is an admin of the organization that the
+    // document's `item` belongs to *after* performing the action.
+    //
+    function isAdminOfItemAfter(document, type) {
+      let userDoc = getUserDoc();
+      let userIsAdmin = isAdmin();
+      let item = getAfter(/databases/$(database)/documents/$(type)/$(document));
+      let itemDoc = getAfter(item.data.item);
+
+      // Check whether the item of the document the user tries to access has
+      // an organization – this means that it is a product or department.
+      let hasOrgDocumentInItem = 'organization' in itemDoc.data;
+      let isAdminFromOrgOfProdOrDep = userIsAdmin && hasOrgDocumentInItem && getAfter(itemDoc.data.organization).id in userDoc.data.admin;
+
+      // Check whether the user has access to the item, which is an
+      // organization (given that the first check is false).
+      let isAdminOfItem = userIsAdmin && !isAdminFromOrgOfProdOrDep && itemDoc.id in userDoc.data.admin;
+
+      return isSignedIn() && (isAdminFromOrgOfProdOrDep || isAdminOfItem);
+    }
+
+    //
+    // Return true if the current user is an admin of the organization that the
+    // document's `item` belongs to *before* performing the action.
+    //
+    function isAdminOfItemBefore(document, type) {
+      let userDoc = getUserDoc();
+      let userIsAdmin = isAdmin();
+      let item = get(/databases/$(database)/documents/$(type)/$(document));
+      let itemDoc = get(item.data.item);
+
+      // Check whether the item of the document the user tries to access has
+      // an organization – this means that it is a product or department.
+      let hasOrgDocumentInItem = 'organization' in itemDoc.data;
+      let isAdminFromOrgOfProdOrDep = userIsAdmin && hasOrgDocumentInItem && get(itemDoc.data.organization).id in userDoc.data.admin;
+
+      // Check whether the user has access to the item, which is an
+      // organization (given that the first check is false).
+      let isAdminOfItem = userIsAdmin && !isAdminFromOrgOfProdOrDep && itemDoc.id in userDoc.data.admin;
+
+      return isSignedIn() && (isAdminFromOrgOfProdOrDep || isAdminOfItem);
+    }
+
     //
     // Return true if the current user is an admin of the parent of the
     // document's objective.
@@ -88,6 +132,29 @@ service cloud.firestore {
       return isSignedIn() && (isAdminFromOrgOfProdOrDep || isAdminOfParent);
     }
 
+    //
+    // Return true if the current user is an admin of the parent of the
+    // document's objective *before* performing the action.
+    //
+    function isAdminOfObjectiveParentBefore(document, type) {
+      let userDoc = getUserDoc();
+      let userIsAdmin = isAdmin();
+      let doc = get(/databases/$(database)/documents/$(type)/$(document));
+      let objectiveDoc = get(doc.data.objective);
+      let parentDoc = get(objectiveDoc.data.parent);
+
+      // Check whether the parent of the document the user tries to access has
+      // an organization – this means that it is a product or department.
+      let hasOrgDocumentInParent = 'organization' in parentDoc.data;
+      let isAdminFromOrgOfProdOrDep = userIsAdmin && hasOrgDocumentInParent && get(parentDoc.data.organization).id in userDoc.data.admin;
+
+      // Check whether the user has access to the parent, which is an
+      // organization (given that the first check is false).
+      let isAdminOfParent = userIsAdmin && !isAdminFromOrgOfProdOrDep && parentDoc.id in userDoc.data.admin;
+
+      return isSignedIn() && (isAdminFromOrgOfProdOrDep || isAdminOfParent);
+    }
+
     // Is user signed in
     function isSignedIn() {
       // TODO: Must be a verified (whitelisted) user
@@ -125,29 +192,51 @@ service cloud.firestore {
     }
 
     //
-    // Return true if the current user is a member of the parent of the
-    // document's objective *before* performing the action.
+    // Return true if the `objective`'s parent is either `item` or its parent
+    // *after* performing the action.
     //
-    function isMemberOfObjectiveParentBefore(document, type) {
-      let userRef = /databases/$(database)/documents/users/$(request.auth.token.email);
-      let doc = get(/databases/$(database)/documents/$(type)/$(document));
-      let objectiveDoc = get(doc.data.objective);
-      let parentDoc = get(objectiveDoc.data.parent);
-      let userIsMemberOfParent = userRef in parentDoc.data.team;
-      return userIsMemberOfParent;
+    function objectiveParentIsItemOrItemParent(document, type) {
+      let doc = getAfter(/databases/$(database)/documents/$(type)/$(document));
+
+      let itemDoc = getAfter(doc.data.item);
+      let objectiveDoc = getAfter(doc.data.objective);
+      let objectiveParentDoc = getAfter(objectiveDoc.data.parent);
+
+      let isProduct = 'department' in itemDoc.data;
+      let isDepartment = 'organization' in itemDoc.data;
+
+      let objectiveParentIsItemParent = (isProduct && getAfter(itemDoc.data.department) == objectiveParentDoc)
+          || (!isProduct && isDepartment && getAfter(itemDoc.data.organization) == objectiveParentDoc);
+
+      return objectiveParentDoc == itemDoc || objectiveParentIsItemParent;
     }
 
     //
-    // Return true if the current user is a member of the parent of the
-    // document's objective *after* performing the action.
+    // Return true if the current user is a member of `item` *after* performing
+    // the action.
     //
-    function isMemberOfObjectiveParentAfter(document, type) {
+    function isMemberOfItemAfter(document, type) {
       let userRef = /databases/$(database)/documents/users/$(request.auth.token.email);
       let doc = getAfter(/databases/$(database)/documents/$(type)/$(document));
-      let objectiveDoc = getAfter(doc.data.objective);
-      let parentDoc = getAfter(objectiveDoc.data.parent);
-      let userIsMemberOfParent = userRef in parentDoc.data.team;
-      return userIsMemberOfParent;
+
+      let itemDoc = getAfter(doc.data.item);
+      let isMemberOfItem = userRef in itemDoc.data.team;
+
+      return isMemberOfItem;
+    }
+
+    //
+    // Return true if the current user is a member of `item` *before*
+    // performing the action.
+    //
+    function isMemberOfItemBefore(document, type) {
+      let userRef = /databases/$(database)/documents/users/$(request.auth.token.email);
+      let doc = get(/databases/$(database)/documents/$(type)/$(document));
+
+      let itemDoc = get(doc.data.item);
+      let isMemberOfItem = userRef in itemDoc.data.team;
+
+      return isMemberOfItem;
     }
 
     function isSelf(document) {
@@ -219,11 +308,10 @@ service cloud.firestore {
       allow delete: if isSuperAdmin();
     }
 
-    // TODO: Should also allow create/delete by organization admins.
     match /objectiveContributors/{document} {
       allow read: if isSignedIn();
-      allow create: if isSuperAdmin() || isMemberOfObjectiveParentAfter(document, 'objectiveContributors') || isAdminOfObjectiveParent(document, 'objectiveContributors');
-      allow delete: if isSuperAdmin() || isMemberOfObjectiveParentBefore(document, 'objectiveContributors') || isAdminOfObjectiveParent(document, 'objectiveContributors');
+      allow create: if isSuperAdmin() || (isMemberOfItemAfter(document, 'objectiveContributors') && objectiveParentIsItemOrItemParent(document, 'objectiveContributors')) || (isAdminOfItemAfter(document, 'objectiveContributors') && isAdminOfObjectiveParent(document, 'objectiveContributors'));
+      allow delete: if isSuperAdmin() || isMemberOfItemBefore(document, 'objectiveContributors') || (isAdminOfItemBefore(document, 'objectiveContributors') && isAdminOfObjectiveParentBefore(document, 'objectiveContributors'));
     }
 
     match /periods/{document} {
diff --git a/tests/firebase/firestore.test.js b/tests/firebase/firestore.test.js
index 788934b46..2a1583462 100644
--- a/tests/firebase/firestore.test.js
+++ b/tests/firebase/firestore.test.js
@@ -65,7 +65,7 @@ describe('Test Firestore rules', () => {
         name: 'Product X1',
         team: [users.doc('user3@example.com')],
         organization: organizations.doc('organization-x'),
-        department: organizations.doc('department-x'),
+        department: departments.doc('department-x1'),
       });
 
       await objectives.doc('department-x1-objective-1').set({
@@ -76,6 +76,10 @@ describe('Test Firestore rules', () => {
         name: 'Department Y1 - Objective 1',
         parent: departments.doc('department-y1'),
       });
+      await objectives.doc('product-x1-objective-1').set({
+        name: 'Product X1 - Objective 1',
+        parent: departments.doc('product-x1'),
+      });
 
       await objectiveContributors.doc('objective-contributor-1').set({
         objective: objectives.doc('department-x1-objective-1'),
@@ -221,6 +225,21 @@ describe('Test Firestore rules', () => {
     });
   });
 
+  test("users can create objective contributors for objectives on their item's parent item", async () => {
+    await withAuthenticatedUser(testEnv, 'user3@example.com', async (db) => {
+      const objectiveContributors = db.collection('objectiveContributors');
+      const products = db.collection('products');
+      const objectives = db.collection('objectives');
+
+      await expectAddSucceeds(
+        objectiveContributors.add({
+          objective: objectives.doc('department-x1-objective-1'),
+          item: products.doc('product-x1'),
+        })
+      );
+    });
+  });
+
   test('anonymous users cannot read api clients', async () => {
     await withUnauthenticatedUser(testEnv, async (db) => {
       const clients = db.collection('apiClients');

From ce42360bb5af60b68f1491dfdf93e35b6bb7f879 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Fri, 10 Nov 2023 13:36:05 +0100
Subject: [PATCH 100/102] Fix typo

---
 tests/firebase/firestore.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/firebase/firestore.test.js b/tests/firebase/firestore.test.js
index 2a1583462..b37327e6a 100644
--- a/tests/firebase/firestore.test.js
+++ b/tests/firebase/firestore.test.js
@@ -78,7 +78,7 @@ describe('Test Firestore rules', () => {
       });
       await objectives.doc('product-x1-objective-1').set({
         name: 'Product X1 - Objective 1',
-        parent: departments.doc('product-x1'),
+        parent: products.doc('product-x1'),
       });
 
       await objectiveContributors.doc('objective-contributor-1').set({

From 3eb32ea91c0253ee2c15ba6ba843dbdfd550092c Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Fri, 10 Nov 2023 15:28:05 +0100
Subject: [PATCH 101/102] Fix scroll to objective in Chrome

---
 src/components/GanttChart.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/GanttChart.vue b/src/components/GanttChart.vue
index ffaa1d400..082fa1519 100644
--- a/src/components/GanttChart.vue
+++ b/src/components/GanttChart.vue
@@ -536,10 +536,14 @@ export default {
       const objectiveElQuery = document.querySelectorAll(`[data-id="${objective.id}"]`);
 
       if (objectiveElQuery.length) {
-        objectiveElQuery[0].scrollIntoView({
-          block: 'center',
-          inline: 'center',
-          behavior: 'smooth',
+        // Delay `scrollIntoView` until the next event cycle. This seems to be
+        // necessary when `behavior` is set to `smooth` in Chrome.
+        setTimeout(() => {
+          objectiveElQuery[0].scrollIntoView({
+            block: 'center',
+            inline: 'center',
+            behavior: 'smooth',
+          });
         });
       }
     },

From 1c739ef9aee0c3b63ef7a808b0e8578d3754eee0 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Fri, 10 Nov 2023 16:13:15 +0100
Subject: [PATCH 102/102] Do not select an objective by default when adding
 period to workbench

---
 src/components/GanttChart.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/GanttChart.vue b/src/components/GanttChart.vue
index 082fa1519..4bfc663bc 100644
--- a/src/components/GanttChart.vue
+++ b/src/components/GanttChart.vue
@@ -558,11 +558,17 @@ export default {
 
       this.periodObjectives.map((o) => o.id).forEach(this.addWorkbenchObjective);
 
-      // Set first workbench objective as active
-      await this.$router.replace({
-        name: 'ObjectiveHome',
-        params: { objectiveId: this.periodObjectives[0].id },
-      });
+      // Replace any currently active objective with first from workbench if it
+      // is not part of the selection.
+      if (
+        this.activeObjective &&
+        !this.periodObjectives.find((o) => o.id === this.activeObjective.id)
+      ) {
+        await this.$router.replace({
+          name: 'ObjectiveHome',
+          params: { objectiveId: this.periodObjectives[0].id },
+        });
+      }
 
       this.$nextTick(() => {
         if (this.$refs.period) {