Dim objectives outside the period

Also set the default OKR period to "all".
oslokommune · Dec 4, 2023 · 032354b · 032354b
1 parent 3f6556d
commit 032354b
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 35 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -33,6 +33,8 @@ All notable changes to this project will be documented in this file. The format
 - Any active objective that has been lifted to the parent item, whilst not
   having any contributing key results from the current level, is now kept
   visible in the timeline until manually closed.
+- The default OKR period is now "all". Objectives outside a set period are now
+  dimmed.
 
 ### Fixed
 

diff --git a/src/components/GanttChart.vue b/src/components/GanttChart.vue
@@ -68,9 +68,14 @@
             :tabindex="o.tabindex"
             :style="objectiveStyle(o)"
             :checkable="!isGhostObjective(o.objective) && workbenchObjectives.length > 0"
-            :checked="workbenchObjectives.map((o) => o.id).includes(o.objective.id)"
-            :dimmed="isGhostObjective(o.objective)"
-            :active="activeObjective && activeObjective.id === o.objective.id"
+            :checked="isChecked(o.objective)"
+            :dashed="isGhostObjective(o.objective)"
+            :dimmed="
+              !inCurrentPeriod(o.objective) &&
+              !isActive(o.objective) &&
+              !isChecked(o.objective)
+            "
+            :active="isActive(o.objective)"
             :data-id="o.objective.id"
             :before-navigate="beforeObjectiveNavigate(o.objective)"
             @toggle="toggleObjective($event, o.objective)"
@@ -215,32 +220,7 @@ export default {
      * Return objectives within current `period`.
      */
     periodObjectives() {
-      if (this.period && this.period.key !== 'all') {
-        return this.objectives.filter((objective) => {
-          const { startDate, endDate } = this.period;
-
-          if (objective.startDate && objective.endDate) {
-            return (
-              objective.endDate.toDate() >= startDate &&
-              objective.startDate.toDate() <= endDate
-            );
-          }
-
-          /*
-           * Fall back to checking the old-style `period` reference to retain backwards
-           * compatibility.
-           */
-          if (objective.period.endDate && objective.period.startDate) {
-            return (
-              objective.period.endDate.toDate() >= startDate &&
-              objective.period.startDate.toDate() <= endDate
-            );
-          }
-
-          return false;
-        });
-      }
-      return [];
+      return this.objectives.filter(this.inCurrentPeriod);
     },
   },
 
@@ -561,6 +541,46 @@ export default {
       });
     },
 
+    /**
+     * Return true if `objective` is within the current period (either partly
+     * or fully).
+     */
+    inCurrentPeriod(objective) {
+      if (!this.period || this.period.keys === 'all') {
+        return true;
+      }
+
+      const { startDate, endDate } = this.period;
+
+      if (objective.startDate && objective.endDate) {
+        return (
+          objective.endDate.toDate() >= startDate &&
+          objective.startDate.toDate() <= endDate
+        );
+      }
+
+      /*
+       * Fall back to checking the old-style `period` reference to retain
+       * backwards compatibility.
+       */
+      if (objective.period?.endDate && objective.period?.startDate) {
+        return (
+          objective.period.endDate.toDate() >= startDate &&
+          objective.period.startDate.toDate() <= endDate
+        );
+      }
+
+      return false;
+    },
+
+    isActive(objective) {
+      return this.activeObjective && this.activeObjective.id === objective.id;
+    },
+
+    isChecked(objective) {
+      return this.workbenchObjectives.map((o) => o.id).includes(objective.id);
+    },
+
     isGhostObjective(objective) {
       return !this.objectivesWithID.find((o) => o.id === objective.id);
     },

diff --git a/src/components/ObjectiveLinkCard.vue b/src/components/ObjectiveLinkCard.vue
@@ -10,6 +10,7 @@
         {
           'objective-link-card--active': isExactActive || active,
           'objective-link-card--checked': checked,
+          'objective-link-card--dashed': dashed,
           'objective-link-card--dimmed': dimmed,
         },
       ]"
@@ -93,6 +94,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    dashed: {
+      type: Boolean,
+      default: false,
+    },
     dimmed: {
       type: Boolean,
       default: false,
@@ -273,12 +278,11 @@ export default {
   &--active {
     background-color: var(--color-blue-5);
   }
-  &--dimmed {
+  &--dashed {
     border-style: dashed;
-    opacity: 0.95;
-    > * {
-      opacity: 0.75;
-    }
+  }
+  &--dimmed {
+    opacity: 0.65;
   }
 }
 

diff --git a/src/config/periods.js b/src/config/periods.js
@@ -8,7 +8,7 @@ import {
 } from 'date-fns';
 import i18n from '@/locale/i18n';
 
-export const DEFAULT_OKR_PERIOD = 'quarter';
+export const DEFAULT_OKR_PERIOD = 'all';
 export const DEFAULT_KPI_PERIOD = 'all';
 export const FALLBACK_PERIOD = 'all';