From 280a7445f41c1bb02c9928c015f75255b2fd480f Mon Sep 17 00:00:00 2001
From: Zsolt <zla@umbraco.com>
Date: Mon, 11 Sep 2017 13:05:57 +0200
Subject: [PATCH] media sections properties tab

---
 .../components/content/edit.controller.js     |  2 +
 .../components/umbmedianodeinfo.directive.js  | 54 +++++++++++++++++
 .../content/umb-content-node-info.html        | 19 +-----
 .../views/components/umb-media-node-info.html | 60 +++++++++++++++++++
 .../src/views/media/edit.html                 | 20 ++++++-
 5 files changed, 135 insertions(+), 20 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/umbmedianodeinfo.directive.js
 create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/umb-media-node-info.html

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js
index 96addc05fd..fe489ccefa 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js
@@ -30,6 +30,8 @@
           unPublish: $scope.unPublish
         }
       });
+
+      // Zsolt do some magic with it. swap around
       $scope.defaultButton = buttons.defaultButton;
       $scope.subButtons = buttons.subButtons;
 
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmedianodeinfo.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmedianodeinfo.directive.js
new file mode 100644
index 0000000000..4cda324979
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmedianodeinfo.directive.js
@@ -0,0 +1,54 @@
+(function () {
+    'use strict';
+
+    function MediaNodeInfoDirective($timeout, $location) {
+
+        function link(scope, element, attrs, ctrl) {
+
+            function onInit() {
+
+                scope.allowOpen = true;
+
+                // get document type details
+                scope.documentType = getDocumentType(scope.node);
+                scope.node.createDate = "2017-08-28 15:12:30";
+
+            }
+
+            scope.openDocumentType = function (documentType) {
+                // remove first "#" from url if it is prefixed else the path won't work
+                var url = documentType.url.replace(/^#/, "");
+                $location.path(url);
+            };
+            
+/*             function getBla(node) {
+                
+                var bla = {};
+
+                // finding the create date in properties array
+                angular.forEach(node.properties, function (property){
+                    if (property.alias === "_umb_createdate") {
+                        if (property.value && property.value.length > 0) {
+                            bla = property.value[0];
+                        }
+                    }
+                });
+
+                return bla;
+            } */
+
+            onInit();
+        }
+
+        var directive = {
+            restrict: 'E',
+            replace: true,
+            templateUrl: 'views/components/umb-media-node-info.html'
+        };
+
+        return directive;
+    }
+
+    angular.module('umbraco.directives').directive('umbMediaNodeInfo', MediaNodeInfoDirective);
+
+})();
\ No newline at end of file
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 e05e283252..e46d7b86ac 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
@@ -149,14 +149,10 @@
             <umb-box-header title-key="general_general"></umb-box-header>
             <umb-box-content class="block-form">
                 
-                <umb-control-group label="Created">
+                <umb-control-group label="@template_createdDate">
                     {{node.createDate | amDateFormat:'DD'}} {{ node.createDate | amDateFormat:'MMM'}} {{ node.createDate | amDateFormat:'YYYY'}}, {{node.createDate | amDateFormat:'h:mmA'}} by {{ node.owner.name }}
                 </umb-control-group>
-            <!-- 
-                <umb-control-group label="Created" description="Date/time this document was created">
-                    Created {{ node.createDate }} by {{ node.owner.name }}
-                </umb-control-group>
-             -->
+
                 <umb-control-group label="@content_documentType">
                     <umb-node-preview
                         icon="documentType.icon"
@@ -166,17 +162,6 @@
                     </umb-node-preview>
                 </umb-control-group>
 
-            <!--                 
-                <umb-control-group label="@content_documentType" description="Description here">
-                    <umb-node-preview
-                        icon="documentType.icon"
-                        name="documentType.linkText"
-                        allow-open="allowOpen"
-                        on-open="openDocumentType(documentType)">
-                    </umb-node-preview>
-                </umb-control-group>
-            -->
-
                 <umb-control-group label="@template_template">
                     <select
                         class="input-block-level"
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-node-info.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-node-info.html
new file mode 100644
index 0000000000..4d26227c53
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-node-info.html
@@ -0,0 +1,60 @@
+<div class="umb-package-details">
+    <div class="umb-package-details__main-content">
+        <umb-box>
+            <umb-box-header title-key="general_links"></umb-box-header>
+            <umb-box-content class="block-form">
+
+                <ul class="nav nav-stacked" style="margin-bottom: 0;">
+                    <li>
+                        <a href="{{ content.properties["0"].value.src }}" target="_blank">
+                            <i class="icon icon-window-popin"></i>
+                            <span>{{ content.properties["0"].value.src }}</span>
+                            
+                        </a>
+                    </li>
+                </ul>
+                {{ content.properties[10].value["0"].url }}
+            </umb-box-content>
+        </umb-box>
+    </div>
+
+    <div class="umb-package-details__sidebar">
+        <umb-box>
+            <umb-box-header title-key="general_general"></umb-box-header>
+            <umb-box-content class="block-form">
+                
+                <umb-control-group label="@template_createdDate">
+                    <!-- {{node.createDate | amDateFormat:'DD'}} {{ node.createDate | amDateFormat:'MMM'}} {{ node.createDate | amDateFormat:'YYYY'}}, {{node.createDate | amDateFormat:'h:mmA'}} by {{ node.owner.name }} -->
+
+                </umb-control-group>
+
+                <div ng-repeat="property in content.properties">
+                    <div>{{ property.value | json }}</div>
+                </div>
+            
+                <umb-control-group label="@content_documentType">
+                    <umb-node-preview
+                        icon="documentType.icon"
+                        name="documentType.linkText"
+                        allow-open="allowOpen"
+                        on-open="openDocumentType(documentType)">
+                    </umb-node-preview>
+                </umb-control-group>
+
+                <umb-control-group label="@template_template">
+                    <select
+                        class="input-block-level"
+                        ng-model="node.template"
+                        ng-options="key as value for (key, value) in availableTemplates"
+                        ng-change="updateTemplate(node.template)">
+                    </select>
+                </umb-control-group>
+
+                <umb-control-group label="{{ idSection.name }}">
+                    <div>{{ node.id }}</div>
+                    <small>{{ node.key }}</small>
+                </umb-control-group>
+            </umb-box-content>    
+        </umb-box>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/media/edit.html b/src/Umbraco.Web.UI.Client/src/views/media/edit.html
index 8929d143b7..7cde73505a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/media/edit.html
+++ b/src/Umbraco.Web.UI.Client/src/views/media/edit.html
@@ -22,10 +22,24 @@
             <umb-tabs-content view="true" class="form-horizontal">
                <umb-tab id="tab{{tab.id}}" rel="{{tab.id}}" ng-repeat="tab in content.tabs">
 
-                  <umb-property property="property" ng-repeat="property in tab.properties">
-                     <umb-editor model="property"></umb-editor>
-                  </umb-property>
+                <!-- Other tabs than info -->
+                <div ng-if="tab.id !== 0">
+                    <umb-property property="property" ng-repeat="property in tab.properties">
+                        <umb-editor model="property"></umb-editor>
+                    </umb-property>
+                </div>
 
+                <!-- Info tab -->
+                <div ng-if="tab.id === 0">
+                    <umb-media-node-info>
+                    </umb-media-node-info>
+                </div>
+
+<!--                 <umb-property property="property" ng-repeat="property in tab.properties">
+                    <umb-editor model="property"></umb-editor>
+                </umb-property> -->
+
+                
                </umb-tab>
             </umb-tabs-content>