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] 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';