Merge pull request #33 from Offroadcode/ui-built-in-props

Added built in doctype properties to the permissions ui

Author: rasmusjp

src/Our.Umbraco.GraphQL/Web/UI/source/controllers/dashboard.controller.js

@@ -26,6 +26,14 @@ angular.module("umbraco").controller("graphql.for.umbraco.dashboardcontroller",
         $scope.selectedDocType = false;
         $scope.selectedDocTypeAlias = '';
         $scope.selectedDocTypeName = '';
+
+        // TODO: pull from API?
+        $scope.builtInProperties = [{ name: "Id", alias: "id" }, { name: "Name", alias: "name" }, { name: "Url", alias: "url" }, 
+            { name: "Url Absolute", alias: "urlAbsolute" }, { name: "Creator Name", alias: "creatorName" }, { name: "Writer Name", alias: "writerName" },
+            { name: "Create Date", alias: "createDate" }, { name: "Update Date", alias: "updateDate" },
+            { name: "Document Type Alias", alias: "documentTypeAlias" }, { name: "Is Visible", alias: "isVisible" },
+            { name: "Index", alias: "index" }, { name: "Level", alias: "level" }, { name: "Parent", alias: "parent" },
+            { name: "Sort Order", alias: "sortOrder" }, { name: "Is First", alias: "isFirst" }, { name: "Is Last", alias: "isLast" }];
     };
 
     /**
@@ -150,15 +158,18 @@ angular.module("umbraco").controller("graphql.for.umbraco.dashboardcontroller",
      * with the matching `propertyAlias`.
      * @param {string} docTypeAlias 
      * @param {string} propertyAlias 
+     * @param {boolean} isBuiltInProperty 
      * @returns {boolean}
      */
-    $scope.isPropertyVisible = function(docTypeAlias, propertyAlias) { 
+    $scope.isPropertyVisible = function(docTypeAlias, propertyAlias, isBuiltInProperty) { 
         var isVisible = false;
         $scope.pendingPermissions.forEach(function(permission) {
             if (permission.alias === docTypeAlias) {
                 permission.properties.forEach(function(property) {
                     if (property.alias === propertyAlias) {
-                        isVisible = true;
+                        if (property.isBuiltInProperty === isBuiltInProperty) {
+                            isVisible = true;
+                        }
                     }
                 })
             }
@@ -228,6 +239,7 @@ angular.module("umbraco").controller("graphql.for.umbraco.dashboardcontroller",
      */
     $scope.onPropertyVisibilityChange = function(e) {
         var propertyAlias = e.target.getAttribute('data-alias');
+        var isBuiltInProperty = e.target.getAttribute('data-isBuiltInProperty');
         var isChecked = e.target.checked;
         var doesDocTypeHavePermissions = false;
         var doesPropertyPermissionExist = false;
@@ -243,7 +255,7 @@ angular.module("umbraco").controller("graphql.for.umbraco.dashboardcontroller",
                 if (!doesPropertyPermissionExist) {
                     permission.properties.push({
                         alias: propertyAlias,
-                        isBuiltInProperty: false, // TODO: Need to know how to get true value for this.
+                        isBuiltInProperty: isBuiltInProperty,
                         notes: '',
                         permission: 'Read'                       
                     });
@@ -255,7 +267,7 @@ angular.module("umbraco").controller("graphql.for.umbraco.dashboardcontroller",
                 alias: $scope.selectedDocTypeAlias,
                 properties: [{
                     alias: propertyAlias,
-                    isBuiltInProperty: false,  // TODO: Need to know how to get true value for this.
+                    isBuiltInProperty: isBuiltInProperty,
                     notes: '',
                     permission: 'Read'                      
                 }]

src/Our.Umbraco.GraphQL/Web/UI/source/resources/graphql.for.umbraco.api.resource.js

@@ -50,7 +50,7 @@ angular.module("umbraco.resources").factory("graphQLForUmbracoApiResource", func
                     return {
                         doctypeAlias: item.DoctypeAlias,
                         propertyAlias: item.PropertyAlias,
-                        isBuiltInProperty: item.IsBuildInProperty,
+                        isBuiltInProperty: item.IsBuiltInProperty,
                         notes: item.Notes,
                         permission: item.Permission
                     };

src/Our.Umbraco.GraphQL/Web/UI/source/views/dashboard.html

@@ -40,6 +40,33 @@ <h4>Select DocType</h4>
         <h4>Select Visible Properties For <i>{{selectedDocTypeName}}</i></h4>
         <p><a class="gql4u-link" ng-click="onChangeDocTypeClick($event)" href="#change-doc-type">Change DocType</a></p>
         <p>Select which properties you would like to have visible to GraphQL within the selected docType.</p>
+        <div>
+            <h5>Built In Properties</h5>
+            <!-- Table of Properties -->
+            <div class="gql4u-table">
+                <div class="head row">
+                    <div class="cell span1 text-center">Visible</div>
+                    <div class="cell span2">Name</div>
+                    <div class="cell span2">Alias</div>
+                    <div class="cell span7"></div>
+                </div>
+                <div class="body">
+                    <div class="row" ng-repeat="property in builtInProperties">
+                        <div class="cell span1 text-center">
+                            <input type="checkbox"
+                                   ng-checked="isPropertyVisible(selectedDocTypeAlias, property.alias, true)"
+                                   ng-click="onPropertyVisibilityChange($event)"
+                                   data-alias={{property.alias}}
+                                   data-isBuiltInProperty="true" />
+                        </div>
+                        <div class="cell span2">{{property.name}}</div>
+                        <div class="cell span2"><em>{{property.alias}}</em></div>
+                        <div class="cell span7"></div>
+                    </div>
+                </div>
+            </div>
+            <!-- End Table -->
+        </div>
         <div ng-repeat="group in groups">
             <h5>{{group.name}}</h5>
             <!-- Table of Properties -->
@@ -55,9 +82,10 @@ <h5>{{group.name}}</h5>
                         <div class="cell span1 text-center">
                             <input 
                                 type="checkbox" 
-                                ng-checked="isPropertyVisible(selectedDocTypeAlias, property.alias)"
+                                ng-checked="isPropertyVisible(selectedDocTypeAlias, property.alias, false)"
                                 ng-click="onPropertyVisibilityChange($event)"
                                 data-alias={{property.alias}}
+                                data-isBuiltInProperty="false"
                             />
                         </div>
                         <div class="cell span2">{{property.name}}</div>