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