Add reusable period shortcut component

src/components/drawers/EditObjective.vue

@@ -42,15 +42,15 @@
           rules="required"
         />
 
-        <pkt-button
+        <period-shortcut
           v-if="newestObjective?.startDate && newestObjective?.endDate"
           class="period-suggestion"
-          skin="secondary"
-          size="small"
-          @onClick="useSuggestedPeriod"
-        >
-          {{ formattedPeriod(newestObjective) }}
-        </pkt-button>
+          :label="$t('admin.objective.useLastPeriod')"
+          :start-date="newestObjective.startDate.toDate()"
+          :end-date="newestObjective.endDate.toDate()"
+          :active="isSuggestedPeriod"
+          @click="useSuggestedPeriod"
+        />
 
         <template v-if="!objective?.archived" #actions="{ handleSubmit }">
           <btn-cancel :disabled="loading" @click="close" />
@@ -109,7 +109,7 @@
 
 <script>
 import { mapState } from 'vuex';
-import formattedPeriod from '@/util/okr';
+import { isEqual } from 'date-fns';
 import Objective from '@/db/Objective';
 import firebase from 'firebase/compat/app';
 import locale from 'flatpickr/dist/l10n/no';
@@ -122,6 +122,7 @@ export default {
 
   components: {
     ArchivedRestore: () => import('@/components/ArchivedRestore.vue'),
+    PeriodShortcut: () => import('@/components/period/PeriodShortcut.vue'),
     PktButton,
     PagedDrawerWrapper,
     FormSection,
@@ -166,6 +167,19 @@ export default {
 
   computed: {
     ...mapState(['activeItemRef']),
+
+    isSuggestedPeriod() {
+      if (
+        this.periodRange &&
+        this.newestObjective?.startDate &&
+        this.newestObjective?.endDate &&
+        isEqual(this.periodRange[0], this.newestObjective.startDate.toDate()) &&
+        isEqual(this.periodRange[1], this.newestObjective.endDate.toDate())
+      ) {
+        return true;
+      }
+      return false;
+    },
   },
 
   watch: {
@@ -190,8 +204,6 @@ export default {
   },
 
   methods: {
-    formattedPeriod,
-
     getCurrentDateRange() {
       if (this.thisObjective.startDate && this.thisObjective.endDate) {
         return [this.objective.startDate.toDate(), this.objective.endDate.toDate()];
@@ -286,6 +298,6 @@ export default {
 
 <style lang="scss" scoped>
 .period-suggestion {
-  margin-bottom: 1rem;
+  margin: -0.75rem 0 1rem 0;
 }
 </style>

src/components/period/PeriodSelector.vue

@@ -14,21 +14,13 @@
         {{ $t('general.shortcuts') }}
       </h3>
       <div class="period-selector__options">
-        <span
+        <period-shortcut
           v-for="rangeOption in options"
-          :key="rangeOption.value"
-          :class="[
-            'pkt-tag',
-            'pkt-tag--large',
-            'pkt-tag--thin-text',
-            'pkt-tag--grey',
-            'period-selector__option',
-            { 'period-selector__option--active': value && rangeOption.key === value.key },
-          ]"
+          :key="rangeOption.key"
+          v-bind="rangeOption"
+          :active="value && rangeOption.key === value.key"
           @click="$emit('input', rangeOption)"
-        >
-          {{ rangeOption.label }}
-        </span>
+        />
       </div>
     </div>
   </div>
@@ -37,10 +29,15 @@
 <script>
 import { endOfDay, startOfDay } from 'date-fns';
 import { periodDates } from '@/util';
+import PeriodShortcut from './PeriodShortcut.vue';
 
 export default {
   name: 'PeriodSelector',
 
+  components: {
+    PeriodShortcut,
+  },
+
   props: {
     value: {
       type: Object,
@@ -121,8 +118,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
-
 .period-selector {
   display: flex;
   flex-direction: column;
@@ -141,20 +136,6 @@ export default {
     margin-top: 0.5rem;
   }
 
-  &__option {
-    @include get-text('pkt-txt-16-light');
-    white-space: nowrap;
-
-    &--active {
-      background-color: var(--color-blue-light);
-    }
-
-    &:hover {
-      background-color: var(--color-beige-light);
-      cursor: pointer;
-    }
-  }
-
   ::v-deep .flatpickr {
     &-calendar {
       top: 0;

src/components/period/PeriodShortcut.vue

@@ -0,0 +1,73 @@
+<template>
+  <pkt-button
+    :class="['period-shortcut', { 'pkt-btn--active': active }]"
+    skin="secondary"
+    @onClick="$emit('click', $event)"
+  >
+    <span class="pkt-txt-14">{{ label }}</span>
+    <span v-if="formattedPeriod" class="pkt-txt-12-light">
+      {{ formattedPeriod }}
+    </span>
+  </pkt-button>
+</template>
+
+<script>
+import formattedPeriod from '@/util/okr';
+import { PktButton } from '@oslokommune/punkt-vue2';
+
+export default {
+  name: 'PeriodShortcut',
+
+  components: {
+    PktButton,
+  },
+
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    startDate: {
+      type: [Date, Boolean],
+      required: false,
+      default: null,
+    },
+    endDate: {
+      type: [Date, Boolean],
+      required: false,
+      default: null,
+    },
+    active: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+
+  computed: {
+    formattedPeriod() {
+      const { startDate, endDate } = this;
+      return formattedPeriod({ startDate, endDate });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.period-shortcut {
+  --btn-link-bc: var(--color-gray);
+  --btn-link-bg: var(--color-gray);
+  --btn-focus-bg: var(--color-gray);
+  --btn-active-bg: var(--color-blue-light);
+  --btn-active-bc: var(--color-blue-light);
+  --btn-active-txt: var(--color-blue-dark);
+
+  height: auto;
+  padding: 0.5rem 1rem;
+  white-space: nowrap;
+
+  span {
+    display: block;
+  }
+}
+</style>

src/locale/locales/en-US.json

@@ -421,7 +421,8 @@
       "new": "New objective",
       "created": "Objective was created!",
       "updated": "Objective was updated!",
-      "change": "Edit objective"
+      "change": "Edit objective",
+      "useLastPeriod": "Set to last used period:"
     },
     "keyResult": {
       "new": "New key result",

src/locale/locales/nb-NO.json

@@ -421,7 +421,8 @@
       "new": "Nytt mål",
       "created": "Målet ble opprettet!",
       "updated": "Målet ble endret!",
-      "change": "Rediger mål"
+      "change": "Rediger mål",
+      "useLastPeriod": "Sett til sist brukte periode:"
     },
     "keyResult": {
       "new": "Nytt nøkkelresultat",