From 5d7e0ceff1077718bfa5454f8315358d5cef668d Mon Sep 17 00:00:00 2001
From: Shannon <sdeminick@gmail.com>
Date: Mon, 12 Nov 2018 17:52:21 +1100
Subject: [PATCH] Updates the scheduled publish dialog to show all scheduled
 dates regardless of if the variant is selected. When the variant is selected
 then the date pickers are available, else if there is a persisted date, it's
 just text that is shown.

---
 .../content/overlays/schedule.controller.js   |  20 ++--
 .../src/views/content/overlays/schedule.html  | 101 +++++++++---------
 2 files changed, 63 insertions(+), 58 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.controller.js b/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.controller.js
index 2570eb4fd7..75aad8a4ca 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.controller.js
@@ -105,7 +105,7 @@
             if (type === 'publish') {
                 variant.releaseDatePickerInstance = datePickerInstance;
             } else if (type === 'unpublish') {
-                variant.removeDatePickerInstance = datePickerInstance;
+                variant.expireDatePickerInstance = datePickerInstance;
             }
             $scope.model.disableSubmitButton = !canSchedule();
         };
@@ -134,7 +134,7 @@
             if (type === 'publish') {
                 variant.releaseDatePickerOpen = true;
             } else if (type === 'unpublish') {
-                variant.removeDatePickerOpen = true;
+                variant.expireDatePickerOpen = true;
             }
             checkForBackdropClick();
             $scope.model.disableSubmitButton = !canSchedule();
@@ -150,7 +150,7 @@
                 if (type === 'publish') {
                     variant.releaseDatePickerOpen = false;
                 } else if (type === 'unpublish') {
-                    variant.removeDatePickerOpen = false;
+                    variant.expireDatePickerOpen = false;
                 }
                 checkForBackdropClick();
                 $scope.model.disableSubmitButton = !canSchedule();
@@ -164,7 +164,7 @@
         function checkForBackdropClick() {
 
             var open = _.find(vm.variants, function (variant) {
-                return variant.releaseDatePickerOpen || variant.removeDatePickerOpen;
+                return variant.releaseDatePickerOpen || variant.expireDatePickerOpen;
             });
 
             if(open) {
@@ -196,7 +196,7 @@
             formatDatesToLocal(variant);
 
             // make sure the unpublish date can't be before the publish date
-            variant.removeDatePickerInstance.set("minDate", moment(variant.releaseDate).format("YYYY-MM-DD HH:mm"));
+            variant.expireDatePickerInstance.set("minDate", moment(variant.releaseDate).format("YYYY-MM-DD HH:mm"));
 
         }
 
@@ -236,7 +236,7 @@
                 // we don't have a publish date anymore so we can clear the min date for unpublish
                 var now = new Date();
                 var nowFormatted = moment(now).format("YYYY-MM-DD HH:mm");
-                variant.removeDatePickerInstance.set("minDate", nowFormatted);
+                variant.expireDatePickerInstance.set("minDate", nowFormatted);
             }
         }
 
@@ -261,7 +261,7 @@
                 variant.releaseDateFormatted = dateHelper.getLocalDate(variant.releaseDate, vm.currentUser.locale, "MMM Do YYYY, HH:mm");
             }
             if(variant && variant.expireDate) {
-                variant.removeDateFormatted = dateHelper.getLocalDate(variant.expireDate, vm.currentUser.locale, "MMM Do YYYY, HH:mm");
+                variant.expireDateFormatted = dateHelper.getLocalDate(variant.expireDate, vm.currentUser.locale, "MMM Do YYYY, HH:mm");
             }
         }
         
@@ -322,12 +322,12 @@
                 vm.variants[i].save = false;
                 // remove properties only needed for this dialog
                 delete vm.variants[i].releaseDateFormatted;
-                delete vm.variants[i].removeDateFormatted;
+                delete vm.variants[i].expireDateFormatted;
                 delete vm.variants[i].datePickerConfig;
                 delete vm.variants[i].releaseDatePickerInstance;
-                delete vm.variants[i].removeDatePickerInstance;
+                delete vm.variants[i].expireDatePickerInstance;
                 delete vm.variants[i].releaseDatePickerOpen;
-                delete vm.variants[i].removeDatePickerOpen;
+                delete vm.variants[i].expireDatePickerOpen;
             } 
         });
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.html b/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.html
index 1cbb147e32..25627f004f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.html
@@ -24,7 +24,7 @@
                         on-close="vm.datePickerClose(vm.variants[0], 'publish')">
 
                         <div>
-                            <button ng-if="vm.variants[0].releaseDate" class="btn umb-button--xs" style="outline: none;">
+                            <button ng-show="vm.variants[0].releaseDate" class="btn umb-button--xs" style="outline: none;">
                                 {{vm.variants[0].releaseDateFormatted}}
                             </button>
     
@@ -35,7 +35,7 @@
 
                     </umb-flatpickr>
 
-                    <a ng-if="vm.variants[0].releaseDate" ng-click="vm.clearPublishDate(vm.variants[0])" class="btn umb-button--xs dropdown-toggle umb-button-group__toggle" style="margin-left: -2px;">
+                    <a ng-show="vm.variants[0].releaseDate" ng-click="vm.clearPublishDate(vm.variants[0])" class="btn umb-button--xs dropdown-toggle umb-button-group__toggle" style="margin-left: -2px;">
                         <span class="icon icon-wrong"></span>
                     </a>
 
@@ -57,8 +57,8 @@
                         on-close="vm.datePickerClose(vm.variants[0], 'unpublish')">
 
                         <div>
-                            <button ng-if="vm.variants[0].expireDate" class="btn umb-button--xs" style="outline: none;">
-                                {{vm.variants[0].removeDateFormatted}}
+                            <button ng-show="vm.variants[0].expireDate" class="btn umb-button--xs" style="outline: none;">
+                                {{vm.variants[0].expireDateFormatted}}
                             </button>
             
                             <a ng-hide="vm.variants[0].expireDate" href="" class="bold" style="color: #00aea2; text-decoration: underline;">
@@ -68,7 +68,7 @@
 
                     </umb-flatpickr>
 
-                    <a ng-if="vm.variants[0].expireDate" ng-click="vm.clearUnpublishDate(vm.variants[0])" class="btn umb-button--xs dropdown-toggle umb-button-group__toggle" style="margin-left: -2px;">
+                    <a ng-show="vm.variants[0].expireDate" ng-click="vm.clearUnpublishDate(vm.variants[0])" class="btn umb-button--xs dropdown-toggle umb-button-group__toggle" style="margin-left: -2px;">
                         <span class="icon icon-wrong"></span>
                     </a>
 
@@ -105,56 +105,61 @@
                             <div class="umb-permission__description"
                                  ng-if="!scheduleSelectorForm.saveVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
                                 <umb-variant-state variant="variant"></umb-variant-state>
-                                <span ng-if="variant.language.isMandatory"> - <localize key="languages_mandatoryLanguage"></localize></span>
+                                <span ng-show="variant.language.isMandatory"> - <localize key="languages_mandatoryLanguage"></localize></span>
                             </div>
 
-                            <div ng-if="variant.save" class="flex items-center" style="margin-top: 10px; margin-bottom: 10px;">
-                                <div style="font-size: 13px; margin-right: 5px;">Publish: </div>
+                            <div class="flex items-center" style="margin-top: 10px; margin-bottom: 10px;">
 
-                                <div class="btn-group flex" style="font-size: 14px; margin-right: 10px;">
-                                    <umb-flatpickr ng-model="variant.releaseDate"
-                                                   options="variant.datePickerConfig"
-                                                   on-setup="vm.datePickerSetup(variant, 'publish', fpItem)"
-                                                   on-change="vm.datePickerChange(variant, dateStr, 'publish')"
-                                                   on-open="vm.datePickerShow(variant, 'publish')"
-                                                   on-close="vm.datePickerClose(variant, 'publish')">
-                                        <div>
-                                            <button ng-if="variant.releaseDate" class="btn umb-button--xxs" style="outline: none;">
-                                                {{variant.releaseDateFormatted}}
-                                            </button>
+                                <div class="flex items-center" ng-if="variant.releaseDate || variant.save">
+                                    <div style="font-size: 13px; margin-right: 5px;">Publish:<em ng-show="!variant.save">&nbsp;&nbsp;{{variant.releaseDateFormatted}}</em></div>
 
-                                            <a ng-hide="variant.releaseDate" href="" class="bold" style="color: #00aea2; text-decoration: underline;">
-                                                <localize key="content_setDate">Set date</localize>
-                                            </a>
-                                        </div>
-                                    </umb-flatpickr>
-                                    <a ng-if="variant.releaseDate" ng-click="vm.clearPublishDate(variant)" class="btn umb-button--xxs dropdown-toggle umb-button-group__toggle" style="margin-left: -2px;">
-                                        <span class="icon icon-wrong"></span>
-                                    </a>
+                                    <div class="btn-group flex" style="font-size: 14px; margin-right: 10px;" ng-if="variant.save">
+                                        <umb-flatpickr ng-model="variant.releaseDate"
+                                                       options="variant.datePickerConfig"
+                                                       on-setup="vm.datePickerSetup(variant, 'publish', fpItem)"
+                                                       on-change="vm.datePickerChange(variant, dateStr, 'publish')"
+                                                       on-open="vm.datePickerShow(variant, 'publish')"
+                                                       on-close="vm.datePickerClose(variant, 'publish')">
+                                            <div>
+                                                <button ng-show="variant.releaseDate" class="btn umb-button--xxs" style="outline: none;">
+                                                    {{variant.releaseDateFormatted}}
+                                                </button>
+
+                                                <a ng-hide="variant.releaseDate" href="" class="bold" style="color: #00aea2; text-decoration: underline;">
+                                                    <localize key="content_setDate">Set date</localize>
+                                                </a>
+                                            </div>
+                                        </umb-flatpickr>
+                                        <a ng-show="variant.releaseDate" ng-click="vm.clearPublishDate(variant)" class="btn umb-button--xxs dropdown-toggle umb-button-group__toggle" style="margin-left: -2px;">
+                                            <span class="icon icon-wrong"></span>
+                                        </a>
+                                    </div>
                                 </div>
 
-                                <div style="font-size: 13px; margin-right: 5px;">Unpublish:</div>
+                                <div class="flex items-center" ng-if="variant.expireDate || variant.save">
+                                    <div style="font-size: 13px; margin-right: 5px;">Unpublish:<em ng-show="!variant.save">&nbsp;&nbsp;{{variant.expireDateFormatted}}</em></div>
 
-                                <div class="btn-group flex" style="font-size: 14px;">
-                                    <umb-flatpickr ng-model="variant.expireDate"
-                                                   options="variant.datePickerConfig"
-                                                   on-setup="vm.datePickerSetup(variant, 'unpublish', fpItem)"
-                                                   on-change="vm.datePickerChange(variant, dateStr, 'unpublish')"
-                                                   on-open="vm.datePickerShow(variant, 'unpublish')"
-                                                   on-close="vm.datePickerClose(variant, 'unpublish')">
-                                        <div>
-                                            <button ng-if="variant.expireDate" class="btn umb-button--xxs" style="outline: none;">
-                                                {{variant.removeDateFormatted}}
-                                            </button>
+                                    <div class="btn-group flex" style="font-size: 14px;" ng-if="variant.save">
+                                        <umb-flatpickr ng-model="variant.expireDate"
+                                                       options="variant.datePickerConfig"
+                                                       on-setup="vm.datePickerSetup(variant, 'unpublish', fpItem)"
+                                                       on-change="vm.datePickerChange(variant, dateStr, 'unpublish')"
+                                                       on-open="vm.datePickerShow(variant, 'unpublish')"
+                                                       on-close="vm.datePickerClose(variant, 'unpublish')">
+                                            <div>
+                                                <button ng-show="variant.expireDate" class="btn umb-button--xxs" style="outline: none;">
+                                                    {{variant.expireDateFormatted}}
+                                                </button>
 
-                                            <a ng-hide="variant.expireDate" href="" class="bold" style="color: #00aea2; text-decoration: underline;">
-                                                <localize key="content_setDate">Set date</localize>
-                                            </a>
-                                        </div>
-                                    </umb-flatpickr>
-                                    <a ng-if="variant.expireDate" ng-click="vm.clearUnpublishDate(variant)" class="btn umb-button--xxs dropdown-toggle umb-button-group__toggle" style="margin-left: -2px;">
-                                        <span class="icon icon-wrong"></span>
-                                    </a>
+                                                <a ng-hide="variant.expireDate" href="" class="bold" style="color: #00aea2; text-decoration: underline;">
+                                                    <localize key="content_setDate">Set date</localize>
+                                                </a>
+                                            </div>
+                                        </umb-flatpickr>
+                                        <a ng-show="variant.expireDate" ng-click="vm.clearUnpublishDate(variant)" class="btn umb-button--xxs dropdown-toggle umb-button-group__toggle" style="margin-left: -2px;">
+                                            <span class="icon icon-wrong"></span>
+                                        </a>
+                                    </div>
                                 </div>
 
                             </div>
@@ -187,7 +192,7 @@
                     </div>
                     <div class="umb-permission__description">
                         <umb-variant-state variant="variant"></umb-variant-state>
-                        <span ng-if="variant.language.isMandatory"> - <localize key="languages_mandatoryLanguage"></localize></span>
+                        <span ng-show="variant.language.isMandatory"> - <localize key="languages_mandatoryLanguage"></localize></span>
                     </div>
                 </div>
             </div>