From 81fe925f325cfa84b2bdf7be61c1338504eeda90 Mon Sep 17 00:00:00 2001
From: Hrvoje Vucic <hvucic@extensionengine.com>
Date: Fri, 11 Jun 2021 13:43:43 +0200
Subject: [PATCH 1/4] Display published status in Progress page data table and
 sidebar

---
 .../repository/Workflow/Overview/index.vue       | 16 ++++++++++++++--
 .../repository/Workflow/Sidebar/Header.vue       | 14 +++++++++++---
 .../repository/common/Sidebar/Publishing.vue     |  5 +++--
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/client/components/repository/Workflow/Overview/index.vue b/client/components/repository/Workflow/Overview/index.vue
index 73803464e..c9f8e5dcc 100644
--- a/client/components/repository/Workflow/Overview/index.vue
+++ b/client/components/repository/Workflow/Overview/index.vue
@@ -22,6 +22,10 @@
     <template #item.dueDate="{ value }">
       <overview-due-date v-if="value" :value="value" />
     </template>
+    <template v-if="isAdmin || isRepositoryAdmin" #item.publishedAt="{ item }">
+      <publishing-badge :activity="item" />
+      <span>{{ item.publishedAt ? 'Published' : 'Not published' }}</span>
+    </template>
   </v-data-table>
 </template>
 
@@ -33,6 +37,7 @@ import OverviewDueDate from './DueDate';
 import OverviewName from './Name';
 import OverviewPriority from './Priority';
 import OverviewStatus from './Status';
+import PublishingBadge from '@/components/repository/common/Sidebar/Badge';
 import selectActivity from '@/components/repository/common/selectActivity';
 
 export default {
@@ -42,7 +47,8 @@ export default {
     activities: { type: Array, default: () => [] }
   },
   computed: {
-    ...mapGetters('repository', ['workflow']),
+    ...mapGetters(['isAdmin']),
+    ...mapGetters('repository', ['isRepositoryAdmin', 'workflow']),
     headers() {
       return [{
         text: 'Name',
@@ -62,13 +68,18 @@ export default {
       }, {
         text: 'Due date',
         value: 'dueDate'
+      }, {
+        text: 'Publish state',
+        value: 'publishedAt'
       }];
     },
     items() {
-      return this.activities.map(({ id, data, status }) => ({
+      return this.activities.map(({ id, data, publishedAt, status, type }) => ({
         ...status,
         id,
         name: data.name,
+        publishedAt,
+        type,
         status: this.getStatusById(status.status),
         priority: getPriority(status.priority),
         class: this.isActivitySelected(id) && 'selected'
@@ -97,6 +108,7 @@ export default {
     }
   },
   components: {
+    PublishingBadge,
     OverviewAssignee,
     OverviewDueDate,
     OverviewName,
diff --git a/client/components/repository/Workflow/Sidebar/Header.vue b/client/components/repository/Workflow/Sidebar/Header.vue
index d1b13fe96..d7f0d3e7f 100644
--- a/client/components/repository/Workflow/Sidebar/Header.vue
+++ b/client/components/repository/Workflow/Sidebar/Header.vue
@@ -9,6 +9,11 @@
         :type-label="activityConfig.label"
         :color="activityConfig.color" />
     </div>
+    <publishing
+      v-if="isAdmin || isRepositoryAdmin"
+      :activity="{ publishedAt, type }"
+      :outline-activities="outlineActivities"
+      hide-publish />
     <div class="mt-8">
       <v-tooltip open-delay="500" bottom>
         <template #activator="{ on }">
@@ -58,6 +63,7 @@ import { getLevel } from 'shared/activities';
 import isBefore from 'date-fns/isBefore';
 import LabelChip from '@/components/repository/common/LabelChip';
 import { mapGetters } from 'vuex';
+import Publishing from '@/components/repository/common/Sidebar/Publishing';
 
 export default {
   props: {
@@ -67,10 +73,12 @@ export default {
     name: { type: String, required: true },
     type: { type: String, required: true },
     createdAt: { type: String, required: true },
-    updatedAt: { type: String, default: null }
+    updatedAt: { type: String, default: null },
+    publishedAt: { type: String, default: null }
   },
   computed: {
-    ...mapGetters('repository', ['structure']),
+    ...mapGetters(['isAdmin']),
+    ...mapGetters('repository', ['structure', 'outlineActivities', 'isRepositoryAdmin']),
     activityConfig: vm => getLevel(vm.type),
     isUpdated() {
       if (!this.updatedAt) return false;
@@ -86,6 +94,6 @@ export default {
       return fecha.parse(fecha.format(date, format), format);
     }
   },
-  components: { ActivityCard, LabelChip }
+  components: { ActivityCard, LabelChip, Publishing }
 };
 </script>
diff --git a/client/components/repository/common/Sidebar/Publishing.vue b/client/components/repository/common/Sidebar/Publishing.vue
index 2f37f824a..941d36027 100644
--- a/client/components/repository/common/Sidebar/Publishing.vue
+++ b/client/components/repository/common/Sidebar/Publishing.vue
@@ -1,6 +1,6 @@
 <template>
   <span class="publish-container">
-    <v-menu offset-y left>
+    <v-menu v-if="!hidePublish" offset-y left>
       <template v-slot:activator="{ on }">
         <v-btn
           v-on="on"
@@ -43,7 +43,8 @@ export default {
   mixins: [publishMixin],
   props: {
     activity: { type: Object, required: true },
-    outlineActivities: { type: Array, required: true }
+    outlineActivities: { type: Array, required: true },
+    hidePublish: { type: Boolean, default: false }
   },
   computed: {
     config: vm => getLevel(vm.activity.type),

From 1c9eaeb09e691c8ab3c63853cd3668d4ddc5e2f7 Mon Sep 17 00:00:00 2001
From: Hrvoje Vucic <hvucic@extensionengine.com>
Date: Fri, 18 Jun 2021 11:27:47 +0200
Subject: [PATCH 2/4] Fix incorrect publish state display in sidebar

---
 .../repository/Workflow/Sidebar/Header.vue    | 30 ++++++++-----------
 .../repository/Workflow/Sidebar/index.vue     |  4 +--
 2 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/client/components/repository/Workflow/Sidebar/Header.vue b/client/components/repository/Workflow/Sidebar/Header.vue
index d7f0d3e7f..22d31b942 100644
--- a/client/components/repository/Workflow/Sidebar/Header.vue
+++ b/client/components/repository/Workflow/Sidebar/Header.vue
@@ -5,24 +5,24 @@
         Related <span class="text-lowercase">{{ activityConfig.label }}</span>
       </h5>
       <activity-card
-        v-bind="{ id, name, shortId }"
+        v-bind="{ ...activity, name: activity.data.name }"
         :type-label="activityConfig.label"
         :color="activityConfig.color" />
     </div>
     <publishing
       v-if="isAdmin || isRepositoryAdmin"
-      :activity="{ publishedAt, type }"
+      :activity="activity"
       :outline-activities="outlineActivities"
       hide-publish />
     <div class="mt-8">
       <v-tooltip open-delay="500" bottom>
         <template #activator="{ on }">
-          <label-chip v-on="on">{{ shortId }}</label-chip>
+          <label-chip v-on="on">{{ activity.shortId }}</label-chip>
         </template>
         {{ activityConfig.label }} ID
       </v-tooltip>
       <v-btn
-        v-clipboard:copy="shortId"
+        v-clipboard:copy="activity.shortId"
         v-clipboard:success="() => {
           $snackbar.show('ID copied to the clipboard', { immediate: true })
         }"
@@ -46,10 +46,10 @@
         Copy link
       </v-btn>
       <div class="mt-1 caption grey--text text--darken-1">
-        Created at {{ createdAt | formatDate }}
+        Created at {{ activity.createdAt | formatDate }}
         <template v-if="isUpdated">
           <span class="mx-1">|</span>
-          Updated at {{ updatedAt | formatDate }}
+          Updated at {{ activity.status.updatedAt | formatDate }}
         </template>
       </div>
     </div>
@@ -67,23 +67,17 @@ import Publishing from '@/components/repository/common/Sidebar/Publishing';
 
 export default {
   props: {
-    uid: { type: String, required: true },
-    id: { type: Number, required: true },
-    shortId: { type: String, required: true },
-    name: { type: String, required: true },
-    type: { type: String, required: true },
-    createdAt: { type: String, required: true },
-    updatedAt: { type: String, default: null },
-    publishedAt: { type: String, default: null }
+    activity: { type: Object, required: true }
   },
   computed: {
     ...mapGetters(['isAdmin']),
     ...mapGetters('repository', ['structure', 'outlineActivities', 'isRepositoryAdmin']),
-    activityConfig: vm => getLevel(vm.type),
+    activityConfig: ({ activity }) => getLevel(activity.type),
     isUpdated() {
-      if (!this.updatedAt) return false;
-      const createdAt = this.truncateSeconds(new Date(this.createdAt));
-      const updatedAt = this.truncateSeconds(new Date(this.updatedAt));
+      const { activity } = this;
+      if (!activity.status.updatedAt) return false;
+      const createdAt = this.truncateSeconds(new Date(activity.createdAt));
+      const updatedAt = this.truncateSeconds(new Date(activity.status.updatedAt));
       return isBefore(createdAt, updatedAt);
     },
     statusUrl: () => window.location.href
diff --git a/client/components/repository/Workflow/Sidebar/index.vue b/client/components/repository/Workflow/Sidebar/index.vue
index 24da19805..5d6a0d00d 100644
--- a/client/components/repository/Workflow/Sidebar/index.vue
+++ b/client/components/repository/Workflow/Sidebar/index.vue
@@ -6,9 +6,7 @@
     class="px-4">
     <template v-if="isTrackedActivity">
       <sidebar-header
-        v-bind="selectedActivity"
-        :name="selectedActivity.data.name"
-        :updated-at="selectedActivity.status.updatedAt"
+        :activity="selectedActivity"
         class="pt-4" />
       <status-field-group
         @update="updateStatus"

From e53d8152e3dd27436ca71211aed4f0b369b183c1 Mon Sep 17 00:00:00 2001
From: Hrvoje Vucic <hvucic@extensionengine.com>
Date: Fri, 18 Jun 2021 12:03:14 +0200
Subject: [PATCH 3/4] Display publish state next to activity name

---
 .../repository/Workflow/Overview/index.vue      | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/client/components/repository/Workflow/Overview/index.vue b/client/components/repository/Workflow/Overview/index.vue
index c9f8e5dcc..86bdaf340 100644
--- a/client/components/repository/Workflow/Overview/index.vue
+++ b/client/components/repository/Workflow/Overview/index.vue
@@ -7,8 +7,11 @@
     item-class="class"
     disable-pagination hide-default-footer fixed-header
     class="overview primary lighten-5">
-    <template #item.name="item">
-      <overview-name v-bind="item" />
+    <template #item.name="{ item, value }">
+      <div class="d-flex">
+        <overview-name :value="value" />
+        <publishing-badge v-if="isAdmin || isRepositoryAdmin" :activity="item" />
+      </div>
     </template>
     <template #item.status="{ value }">
       <overview-status v-bind="value" />
@@ -22,10 +25,6 @@
     <template #item.dueDate="{ value }">
       <overview-due-date v-if="value" :value="value" />
     </template>
-    <template v-if="isAdmin || isRepositoryAdmin" #item.publishedAt="{ item }">
-      <publishing-badge :activity="item" />
-      <span>{{ item.publishedAt ? 'Published' : 'Not published' }}</span>
-    </template>
   </v-data-table>
 </template>
 
@@ -68,16 +67,14 @@ export default {
       }, {
         text: 'Due date',
         value: 'dueDate'
-      }, {
-        text: 'Publish state',
-        value: 'publishedAt'
       }];
     },
     items() {
-      return this.activities.map(({ id, data, publishedAt, status, type }) => ({
+      return this.activities.map(({ id, data, modifiedAt, publishedAt, status, type }) => ({
         ...status,
         id,
         name: data.name,
+        modifiedAt,
         publishedAt,
         type,
         status: this.getStatusById(status.status),

From d0443cb4786432b2f3b254ee18e1647342024ae7 Mon Sep 17 00:00:00 2001
From: Hrvoje Vucic <hvucic@extensionengine.com>
Date: Wed, 30 Jun 2021 15:06:07 +0200
Subject: [PATCH 4/4] Update publishing component labeling, tooltip and badge

---
 .../repository/Workflow/Overview/index.vue    | 13 ++-
 .../repository/common/Sidebar/Badge.vue       | 73 -----------------
 .../repository/common/Sidebar/Publishing.vue  | 82 +++++++++++++++----
 3 files changed, 74 insertions(+), 94 deletions(-)
 delete mode 100644 client/components/repository/common/Sidebar/Badge.vue

diff --git a/client/components/repository/Workflow/Overview/index.vue b/client/components/repository/Workflow/Overview/index.vue
index fbf0d0841..681e9feae 100644
--- a/client/components/repository/Workflow/Overview/index.vue
+++ b/client/components/repository/Workflow/Overview/index.vue
@@ -10,7 +10,12 @@
     <template #item.name="{ item, value }">
       <div class="d-flex">
         <overview-name :value="value" />
-        <publishing-badge v-if="isAdmin || isRepositoryAdmin" :activity="item" />
+        <publishing
+          v-if="isAdmin || isRepositoryAdmin"
+          :activity="item"
+          :outline-activities="outlineActivities"
+          hide-publish
+          hide-details />
       </div>
     </template>
     <template #item.status="{ value }">
@@ -36,7 +41,7 @@ import OverviewDueDate from './DueDate';
 import OverviewName from './Name';
 import OverviewPriority from './Priority';
 import OverviewStatus from './Status';
-import PublishingBadge from '@/components/repository/common/Sidebar/Badge';
+import Publishing from '@/components/repository/common/Sidebar/Publishing';
 import selectActivity from '@/components/repository/common/selectActivity';
 
 export default {
@@ -47,7 +52,7 @@ export default {
   },
   computed: {
     ...mapGetters(['isAdmin']),
-    ...mapGetters('repository', ['isRepositoryAdmin', 'workflow']),
+    ...mapGetters('repository', ['isRepositoryAdmin', 'workflow', 'outlineActivities']),
     headers() {
       return [{
         text: 'Name',
@@ -105,7 +110,7 @@ export default {
     }
   },
   components: {
-    PublishingBadge,
+    Publishing,
     OverviewAssignee,
     OverviewDueDate,
     OverviewName,
diff --git a/client/components/repository/common/Sidebar/Badge.vue b/client/components/repository/common/Sidebar/Badge.vue
deleted file mode 100644
index 18d8c5da3..000000000
--- a/client/components/repository/common/Sidebar/Badge.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-  <v-tooltip open-delay="100" max-width="300" left>
-    <template v-slot:activator="{ on }">
-      <span v-on="on">
-        <v-badge :color="badgeColor" inline dot />
-      </span>
-    </template>
-    <span v-if="subtreeHasChanges">{{ descendantsInfo }}</span>
-    <span v-else>{{ activityInfo }}</span>
-  </v-tooltip>
-</template>
-
-<script>
-import { getDescendants, getLabel, isChanged } from '@/utils/activity';
-import countBy from 'lodash/countBy';
-import filter from 'lodash/filter';
-import map from 'lodash/map';
-import { mapGetters } from 'vuex';
-import pluralize from 'pluralize';
-
-const getDescriptor = (count, type) => `${count} ${pluralize(type, count)}`;
-const arrayToSentence = arr => arr.join(', ').replace(/, ([^,]*)$/, ' and $1');
-
-const getActivityInfo = (hasChanges, label) => hasChanges
-  ? `${label} has unpublished changes. `
-  : `${label} is published. `;
-
-const getDescendantsInfo = (descendants, count, label) => {
-  return `${descendants} within this ${label} ${pluralize('has', count)}
-    unpublished changes.`;
-};
-
-export default {
-  name: 'sidebar-badge',
-  props: {
-    activity: { type: Object, default: () => ({}) }
-  },
-  computed: {
-    ...mapGetters('repository', { outline: 'outlineActivities' }),
-    label() {
-      return getLabel(this.activity);
-    },
-    hasChanges() {
-      return isChanged(this.activity);
-    },
-    changedDescendants() {
-      return filter(getDescendants(this.outline, this.activity), isChanged);
-    },
-    subtreeHasChanges() {
-      return !!this.changedDescendants.length;
-    },
-    activityInfo() {
-      const { hasChanges, label } = this;
-      return getActivityInfo(hasChanges, label);
-    },
-    descendantsInfo() {
-      const { changedDescendants, label } = this;
-      const labelCountMap = countBy(changedDescendants, getLabel);
-      const descendants = arrayToSentence(map(labelCountMap, getDescriptor));
-      return getDescendantsInfo(descendants, changedDescendants.length, label);
-    },
-    badgeColor() {
-      return this.hasChanges || this.subtreeHasChanges ? 'orange' : 'green';
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-::v-deep .v-badge {
-  margin: 0 0.125rem 0 0;
-}
-</style>
diff --git a/client/components/repository/common/Sidebar/Publishing.vue b/client/components/repository/common/Sidebar/Publishing.vue
index 941d36027..e13e29fc6 100644
--- a/client/components/repository/common/Sidebar/Publishing.vue
+++ b/client/components/repository/common/Sidebar/Publishing.vue
@@ -22,28 +22,49 @@
         </v-list-item>
       </v-list>
     </v-menu>
-    <div class="publish-status">
-      <publishing-badge :activity="activity" />
-      <span class="pl-1">
-        {{ isPublishing ? publishStatus.message : publishedAtMessage }}
-      </span>
+    <div :class="{ 'mt-4': !hideDetails }" class="d-flex align-center">
+      <v-tooltip open-delay="100" max-width="300" left>
+        <template v-slot:activator="{ on }">
+          <span v-on="on">
+            <v-badge :color="badgeColor" inline dot />
+            <span v-if="!hideDetails" class="ml-1">
+              {{ isPublishing ? publishStatus.message : publishDetails }}
+            </span>
+          </span>
+        </template>
+        <span class="pl-1">
+          {{ publishedAtMessage }}
+        </span>
+      </v-tooltip>
     </div>
   </span>
 </template>
 
 <script>
+import { getDescendants, getLabel, isChanged } from '@/utils/activity';
+import countBy from 'lodash/countBy';
 import fecha from 'fecha';
-import { getDescendants } from 'utils/activity';
+import filter from 'lodash/filter';
 import { getLevel } from 'shared/activities';
+import map from 'lodash/map';
 import { mapActions } from 'vuex';
-import PublishingBadge from './Badge';
+import pluralize from 'pluralize';
 import publishMixin from 'components/common/mixins/publish';
 
+const getDescriptor = (count, type) => `${count} ${pluralize(type, count)}`;
+const arrayToSentence = arr => arr.join(', ').replace(/, ([^,]*)$/, ' and $1');
+const getActivityInfo = hasChanges => hasChanges ? 'Has unpublished changes' : 'Published';
+const getDescendantsInfo = (descendants, count, label) => {
+  return `${descendants} within this ${label} ${pluralize('has', count)}
+    unpublished changes.`;
+};
+
 export default {
   mixins: [publishMixin],
   props: {
     activity: { type: Object, required: true },
     outlineActivities: { type: Array, required: true },
+    hideDetails: { type: Boolean, default: false },
     hidePublish: { type: Boolean, default: false }
   },
   computed: {
@@ -54,19 +75,46 @@ export default {
         ? `Published on ${fecha.format(new Date(publishedAt), 'M/D/YY h:mm A')}`
         : 'Not published';
     },
+    publishDetails() {
+      const {
+        activity: { publishedAt },
+        activityInfo,
+        descendantsInfo,
+        subtreeHasChanges
+      } = this;
+
+      if (!publishedAt) return 'Not published';
+      if (subtreeHasChanges) return descendantsInfo;
+      return activityInfo;
+    },
     activityWithDescendants({ outlineActivities, activity } = this) {
       return [...getDescendants(outlineActivities, activity), activity];
+    },
+    label() {
+      return getLabel(this.activity);
+    },
+    hasChanges() {
+      return isChanged(this.activity);
+    },
+    changedDescendants() {
+      return filter(getDescendants(this.outlineActivities, this.activity), isChanged);
+    },
+    subtreeHasChanges() {
+      return !!this.changedDescendants.length;
+    },
+    activityInfo() {
+      return getActivityInfo(this.hasChanges);
+    },
+    descendantsInfo() {
+      const { changedDescendants, label } = this;
+      const labelCountMap = countBy(changedDescendants, getLabel);
+      const descendants = arrayToSentence(map(labelCountMap, getDescriptor));
+      return getDescendantsInfo(descendants, changedDescendants.length, label);
+    },
+    badgeColor() {
+      return this.hasChanges || this.subtreeHasChanges ? 'orange' : 'green';
     }
   },
-  methods: mapActions('repository/activities', { publishActivity: 'publish' }),
-  components: { PublishingBadge }
+  methods: mapActions('repository/activities', { publishActivity: 'publish' })
 };
 </script>
-
-<style lang="scss" scoped>
-.publish-status {
-  display: flex;
-  align-items: center;
-  padding: 1.125rem 0.375rem 0 0.25rem;
-}
-</style>