From 93a1fc1ebaad236f192fb678d4e63f4d9e0220aa Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Fri, 24 Nov 2017 11:32:34 +0100
Subject: [PATCH] fixes: U4-10670 7.8. Visual indication on the info-tab or
 page in which state a page is

---
 .../content/umbcontentnodeinfo.directive.js   | 75 +++++++++++++++++--
 .../content/umb-content-node-info.html        |  6 ++
 .../umbraco/config/lang/en_us.xml             |  3 +
 3 files changed, 76 insertions(+), 8 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbcontentnodeinfo.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbcontentnodeinfo.directive.js
index bbae025d3e..0f9a560ff2 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbcontentnodeinfo.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbcontentnodeinfo.directive.js
@@ -1,9 +1,13 @@
 (function () {
     'use strict';
 
-    function ContentNodeInfoDirective($timeout, $location, logResource, eventsService, userService) {
+    function ContentNodeInfoDirective($timeout, $location, logResource, eventsService, userService, localizationService) {
 
         function link(scope, element, attrs, ctrl) {
+
+            var evts = [];
+            var isInfoTab = false;
+            scope.publishStatus = {};
             
             function onInit() {
 
@@ -32,15 +36,10 @@
                 // get document type details
                 scope.documentType = scope.node.documentType;
 
-                // load audit trail when on the info tab
-                eventsService.on("app.tabChange", function (event, args) {
-                    if (args.id === -1) {
-                        loadAuditTrail();
-                    }
-                });
-
                 // make sure dates are formatted to the user's locale
                 formatDatesToLocal();
+
+                setNodePublishStatus(scope.node);
                 
             }
 
@@ -120,6 +119,34 @@
                 });
             }
 
+            function setNodePublishStatus(node) {
+                
+                // deleted node
+                if(node.trashed === true) {
+                    scope.publishStatus.label = localizationService.localize("general_deleted");
+                    scope.publishStatus.color = "danger";
+                }
+
+                // unpublished node
+                if(node.published === false && node.trashed === false) {
+                    scope.publishStatus.label = localizationService.localize("content_unpublished");
+                    scope.publishStatus.color = "gray";
+                }
+
+                // published node
+                if(node.hasPublishedVersion === true && node.publishDate && node.published === true) {
+                    scope.publishStatus.label = localizationService.localize("content_published");
+                    scope.publishStatus.color = "success";
+                }
+
+                // published node with pending changes
+                if(node.hasPublishedVersion === true && node.publishDate && node.published === false) {
+                    scope.publishStatus.label = localizationService.localize("content_publishedPendingChanges");
+                    scope.publishStatus.color = "success"
+                }
+
+            }
+
             function setPublishDate(date) {
 
                 // update publish value
@@ -200,6 +227,38 @@
                 });
             }
 
+            // load audit trail when on the info tab
+            evts.push(eventsService.on("app.tabChange", function (event, args) {
+                $timeout(function(){
+                    if (args.id === -1) {
+                        isInfoTab = true;
+                        loadAuditTrail();
+                    } else {
+                        isInfoTab = false;
+                    }
+                });
+            }));
+
+            // watch for content updates - reload content when node is saved, published etc.
+            scope.$watch('node.updateDate', function(newValue, oldValue){
+
+                if(!newValue) { return; }
+                if(newValue === oldValue) { return; }             
+                
+                if(isInfoTab) {
+                    loadAuditTrail();
+                    formatDatesToLocal();
+                    setNodePublishStatus(scope.node);
+                }
+            });
+
+            //ensure to unregister from all events!
+            scope.$on('$destroy', function () {
+                for (var e in evts) {
+                    eventsService.unsubscribe(evts[e]);
+                }
+            });
+
             onInit();
 
         }
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/content/umb-content-node-info.html b/src/Umbraco.Web.UI.Client/src/views/components/content/umb-content-node-info.html
index 28f00ca0e3..1bb6e77840 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/content/umb-content-node-info.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/content/umb-content-node-info.html
@@ -165,6 +165,12 @@
         <umb-box data-element="node-info-general">
             <umb-box-header title-key="general_general"></umb-box-header>
             <umb-box-content class="block-form">
+
+                <umb-control-group data-element="node-info-status" label="@general_status">
+                    <umb-badge size="xs" color="{{publishStatus.color}}">
+                        {{publishStatus.label}}
+                    </umb-badge>
+                </umb-control-group>
                 
                 <umb-control-group data-element="node-info-create-date" label="@template_createdDate">
                     {{node.createDateFormatted}} <localize key="general_by">by</localize> {{ node.owner.name }}
diff --git a/src/Umbraco.Web.UI/umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/umbraco/config/lang/en_us.xml
index 8a5ab85793..b765116090 100644
--- a/src/Umbraco.Web.UI/umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/umbraco/config/lang/en_us.xml
@@ -197,6 +197,8 @@
         <key alias="getUrlException">Could not get the url</key>
         <key alias="routeError">This document is published but its url would collide with content %0%</key>
         <key alias="publish">Publish</key>
+        <key alias="published">Published</key>
+        <key alias="publishedPendingChanges">Published (pending changes)</key>
         <key alias="publishStatus">Publication Status</key>
         <key alias="releaseDate">Publish at</key>
         <key alias="unpublishDate">Unpublish at</key>
@@ -209,6 +211,7 @@
         <key alias="altTextOptional">Alternative text (optional)</key>
         <key alias="type">Type</key>
         <key alias="unPublish">Unpublish</key>
+        <key alias="unpublished">Unpublished</key>
         <key alias="updateDate">Last edited</key>
         <key alias="updateDateDesc" version="7.0">Date/time this document was edited</key>
         <key alias="uploadClear">Remove file(s)</key>