From c52f7fda35f5857a84897c365f84b465caf681fe Mon Sep 17 00:00:00 2001 From: "Petter H. Juliussen" Date: Thu, 28 Sep 2023 15:41:06 +0200 Subject: [PATCH 1/4] 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)" /> @@ -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)" >
- - {{ activeItem.name }} - +
+ + + {{ activeItem.name }} + +
{{ 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); + } } 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)" />
@@ -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" Date: Thu, 28 Sep 2023 15:41:51 +0200 Subject: [PATCH 2/4] 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 @@