Merge pull request #902 from ExtensionEngine/feature/update-publishing-component

Update publishing component labeling, tooltip and badge

Author: underscope

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,

client/components/repository/common/Sidebar/Badge.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>