Display published status in Progress page data table and sidebar

client/components/repository/Workflow/Overview/index.vue

@@ -7,8 +7,16 @@
     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
+          v-if="isAdmin || isRepositoryAdmin"
+          :activity="item"
+          :outline-activities="outlineActivities"
+          hide-publish
+          hide-details />
+      </div>
     </template>
     <template #item.status="{ value }">
       <overview-status v-bind="value" />
@@ -32,6 +40,7 @@ import OverviewDueDate from './DueDate';
 import OverviewName from './Name';
 import OverviewPriority from './Priority';
 import OverviewStatus from './Status';
+import Publishing from '@/components/repository/common/Sidebar/Publishing';
 import selectActivity from '@/components/repository/common/selectActivity';
 import { workflow } from '@tailor-cms/config';
 
@@ -42,7 +51,8 @@ export default {
     activities: { type: Array, default: () => [] }
   },
   computed: {
-    ...mapGetters('repository', ['workflow']),
+    ...mapGetters(['isAdmin']),
+    ...mapGetters('repository', ['isRepositoryAdmin', 'workflow', 'outlineActivities']),
     headers() {
       return [{
         text: 'Name',
@@ -65,10 +75,13 @@ export default {
       }];
     },
     items() {
-      return this.activities.map(({ id, data, status }) => ({
+      return this.activities.map(({ id, data, modifiedAt, publishedAt, status, type }) => ({
         ...status,
         id,
         name: data.name,
+        modifiedAt,
+        publishedAt,
+        type,
         status: this.getStatusById(status.status),
         priority: workflow.getPriority(status.priority),
         class: this.isActivitySelected(id) && 'selected'
@@ -97,6 +110,7 @@ export default {
     }
   },
   components: {
+    Publishing,
     OverviewAssignee,
     OverviewDueDate,
     OverviewName,

client/components/repository/Workflow/Sidebar/Header.vue

@@ -5,19 +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="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 })
         }"
@@ -41,10 +46,10 @@
         Copy link
       </v-btn>
       <div class="mt-1 text-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>
@@ -57,26 +62,23 @@ import fecha from 'fecha';
 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 {
   name: 'workflow-sidebar-header',
   inject: ['$schemaService'],
   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 }
+    activity: { type: Object, required: true }
   },
   computed: {
-    ...mapGetters('repository', ['structure']),
+    ...mapGetters(['isAdmin']),
+    ...mapGetters('repository', ['structure', 'outlineActivities', 'isRepositoryAdmin']),
     activityConfig: vm => vm.$schemaService.getLevel(vm.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
@@ -87,6 +89,6 @@ export default {
       return fecha.parse(fecha.format(date, format), format);
     }
   },
-  components: { ActivityCard, LabelChip }
+  components: { ActivityCard, LabelChip, Publishing }
 };
 </script>

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"

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 #activator="{ on }">
         <v-btn
           v-on="on"
@@ -22,22 +22,43 @@
         </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 { activity as activityUtils } from '@tailor-cms/utils';
+import countBy from 'lodash/countBy';
 import fecha from 'fecha';
+import filter from 'lodash/filter';o
+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.`;
+};
+
 const { getDescendants } = activityUtils;
 
 export default {
@@ -46,7 +67,9 @@ export default {
   mixins: [publishMixin],
   props: {
     activity: { type: Object, required: true },
-    outlineActivities: { type: Array, required: true }
+    outlineActivities: { type: Array, required: true },
+    hideDetails: { type: Boolean, default: false },
+    hidePublish: { type: Boolean, default: false }
   },
   computed: {
     config: vm => vm.$schemaService.getLevel(vm.activity.type),
@@ -56,19 +79,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>