article edit UI; sidebar; begin display controller

backend/WebSem/.idea/.idea.WebSem/.idea/workspace.xml

@@ -2,9 +2,6 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="8d054e21-e284-419c-acba-f672639639a4" name="Default" comment="">
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/.idea.WebSem/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/.idea.WebSem/.idea/workspace.xml" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/WebApiWebSem/DataAccess/ArticlesDataAccess.cs" afterPath="$PROJECT_DIR$/WebApiWebSem/DataAccess/ArticlesDataAccess.cs" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/WebApiWebSem/DataAccess/ModelsDbo.cs" afterPath="$PROJECT_DIR$/WebApiWebSem/DataAccess/ModelsDbo.cs" />
       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/../../frontend/WebSem/app/less/app.less" afterPath="$PROJECT_DIR$/../../frontend/WebSem/app/less/app.less" />
       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/../../frontend/WebSem/app/translations/en.json" afterPath="$PROJECT_DIR$/../../frontend/WebSem/app/translations/en.json" />
       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/../../frontend/WebSem/app/views/articlesedit.html" afterPath="$PROJECT_DIR$/../../frontend/WebSem/app/views/articlesedit.html" />
@@ -44,8 +41,8 @@
       <file leaf-file-name="ArticlesDataAccess.cs" pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/WebApiWebSem/DataAccess/ArticlesDataAccess.cs">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="445">
-              <caret line="105" column="43" lean-forward="true" selection-start-line="105" selection-start-column="43" selection-end-line="105" selection-end-column="43" />
+            <state relative-caret-position="318">
+              <caret line="86" column="57" lean-forward="true" selection-start-line="86" selection-start-column="57" selection-end-line="86" selection-end-column="57" />
               <folding>
                 <marker date="1487546558945" expanded="true" signature="6:307" ph="..." />
                 <marker date="1487546558945" expanded="true" signature="342:4021" ph="{...}" />
@@ -286,12 +283,12 @@
       <workItem from="1487108080916" duration="3508000" />
       <workItem from="1487345029610" duration="5634000" />
       <workItem from="1487441650798" duration="14018000" />
-      <workItem from="1487528667649" duration="11486000" />
+      <workItem from="1487528667649" duration="12998000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="38352000" />
+    <option name="totallyTimeSpent" value="39864000" />
   </component>
   <component name="TodoView">
     <todo-panel id="selected-file">
@@ -312,8 +309,8 @@
       <window_info id="Unit Tests" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.26963907" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
       <window_info id="Run Dashboard" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
       <window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="10" side_tool="false" content_ui="tabs" />
-      <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.2282378" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
-      <window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.19745223" sideWeight="0.5" order="12" side_tool="false" content_ui="tabs" />
+      <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.2282378" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
+      <window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.19745223" sideWeight="0.5" order="12" side_tool="false" content_ui="tabs" />
       <window_info id="NuGet" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32908705" sideWeight="0.5" order="13" side_tool="false" content_ui="tabs" />
       <window_info id="Change Signature" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="true" content_ui="tabs" />
       <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.21573876" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
@@ -851,8 +848,8 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/WebApiWebSem/DataAccess/ArticlesDataAccess.cs">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="445">
-          <caret line="105" column="43" lean-forward="true" selection-start-line="105" selection-start-column="43" selection-end-line="105" selection-end-column="43" />
+        <state relative-caret-position="318">
+          <caret line="86" column="57" lean-forward="true" selection-start-line="86" selection-start-column="57" selection-end-line="86" selection-end-column="57" />
           <folding>
             <marker date="1487546558945" expanded="true" signature="6:307" ph="..." />
             <marker date="1487546558945" expanded="true" signature="342:4021" ph="{...}" />

frontend/WebSem/app/app.js

@@ -140,17 +140,22 @@ angular.module('app', [
             ssSideNavSectionsProvider.initWithTheme($mdThemingProvider);
             ssSideNavSectionsProvider.initWithSections([{
                 id: 'toogle_1',
-                name: 'home.name',
+                name: 'home.categories',
                 type: 'heading',
                 children: [{
-                    id: 'link_1',
-                    name: 'home.name',
-                    state: 'home.2',
+                    id: 'persons.name',
+                    name: 'persons.name',
+                    state: 'persons',
                     type: 'link'
                 }, {
-                    id: 'link_1',
-                    name: 'home.name',
-                    state: 'home.2',
+                    id: 'locations.name',
+                    name: 'locations.name',
+                    state: 'locations',
+                    type: 'link'
+                }, {
+                    id: 'countries.name',
+                    name: 'countries.name',
+                    state: 'countries',
                     type: 'link'
                 }]
             },
@@ -189,6 +194,42 @@ angular.module('app', [
                 controller:'HomeController'
             });
 
+            $stateProvider.state('locations', {
+                url:'/locations',
+                parent: 'root',
+                title: "locations.name",
+                reloadOnSearch: false,
+                templateUrl:'views/articlesCategory.html',
+                controller:'articleCategoryController',
+                params: {
+                    type: 'locations'
+                }
+            });
+
+            $stateProvider.state('persons', {
+                url:'/persons',
+                parent: 'root',
+                title: "persons.name",
+                reloadOnSearch: false,
+                templateUrl:'views/articlesCategory.html',
+                controller:'articleCategoryController',
+                params: {
+                    type: 'persons'
+                }
+            });
+
+            $stateProvider.state('countries', {
+                url:'/countries',
+                parent: 'root',
+                title: "countries.name",
+                reloadOnSearch: false,
+                templateUrl:'views/articlesCategory.html',
+                controller:'articleCategoryController',
+                params: {
+                    type: 'countries'
+                }
+            });
+
             addCrudStates($stateProvider, 'articles');
 
             $urlRouterProvider.otherwise('/');

frontend/WebSem/app/controllers/articleCategory.controller.js

@@ -0,0 +1,36 @@
+angular.module('app')
+    .controller('articleCategoryController', ['$scope', '$stateParams', 'articlesBusiness', 'listControllerBuilder',
+        function($scope, $stateParams, articlesBusiness, listControllerBuilder) {
+
+            $scope.business = articlesBusiness;
+            $scope.itemType = 'articles';
+            // $scope.defaultOrder = 'id';
+            // listControllerBuilder.create($scope, $stateParams);
+            //
+            // $scope.getAddItem = function()
+            // {
+            //     return {
+            //         title: $scope.query.filter
+            //     };
+            // };
+            //
+            // $scope.getFilter = function (filter) {
+            //     var label = $scope.appUtils.tr('articles.type').toLowerCase();
+            //     return filter.replace(new RegExp(label + ': *([a-zA-Z0-9]*)'), function(match, p1)
+            //     {
+            //         var type = null;
+            //         for (var t in $scope.appUtils.articleTypes)
+            //         {
+            //             var str = $scope.appUtils.articleTypes[t];
+            //             if ($scope.appUtils.tr('articles.types.' + str).toLowerCase() == p1.toLowerCase())
+            //             {
+            //                 type = str;
+            //                 break;
+            //             }
+            //         }
+            //         return type == null ? '' : 'type:' + type;
+            //     });
+            // };
+            //
+            // $scope.init();
+    }]);

frontend/WebSem/app/index.html

@@ -62,6 +62,7 @@
     <script src="controllers/home.controller.js"></script>
     <script src="controllers/articles.controller.js"></script>
     <script src="controllers/articlesedit.controller.js"></script>
+    <script src="controllers/articleCategory.controller.js"></script>
 
     <!-- Modal Controller -->
 

frontend/WebSem/app/less/app.less

@@ -132,6 +132,14 @@ md-table-container tbody tr {
   padding-left: 8px;
 }
 
+.md-input-small {
+  margin: 0;
+  .md-errors-spacer {
+    min-height: 0;
+    height: 0;
+  }
+}
+
 /**
 ========================================================
 **/

frontend/WebSem/app/translations/en.json

@@ -42,7 +42,17 @@
   },
   "home": {
     "name": "Home",
-    "welcome": "Welcome Home!"
+    "welcome": "Welcome Home!",
+    "categories": "Categories"
+  },
+  "persons": {
+    "name": "Persons"
+  },
+  "locations": {
+    "name": "Locations"
+  },
+  "countries": {
+    "name": "Countries"
   },
   "articles": {
     "name": "Articles",
@@ -59,7 +69,20 @@
       "countries": "Country"
     },
     "general": "General",
-    "fields": "Data",
+    "fields": {
+      "name": "Data",
+      "type": "Type",
+      "value": "Value",
+      "property": "Property",
+      "types": {
+        "date/date": "Date",
+        "text/plain": "Text"
+      },
+      "properties": {
+        "birthDate": "Birth date",
+        "deathDate": "Death date"
+      }
+    },
     "deleteOne": "Do you really want to delete article '{text}'?",
     "deleteMultiple": "Do you really want to delete {count} {count, select, 1{article} other{articles}}?",
     "edit": {

frontend/WebSem/app/views/articlesCategory.html

@@ -0,0 +1,114 @@
+<div layout="column" layout-fill layout-align="top" angular-busy="appUtils.cgBusy(itemType + '.table')">
+
+    <div flex>
+        <md-toolbar class="md-table-toolbar md-default" ng-show="isModal || (!isFilterShown && selected.length == 0)">
+            <div class="md-toolbar-tools">
+                <span>{{ itemType + '.name' | translate }}</span>
+                <span flex></span>
+                <md-button ng-show="isModal && items != null" class="md-icon-button" ng-click="addItemDialog()" title="{{ 'common.new' | translate }}">
+                    <md-icon class="material-icons">add</md-icon>
+                </md-button>
+                <md-button ng-show="!isModal" class="md-icon-button" ui-sref="{{itemType}}_add" title="{{ 'common.new' | translate }}">
+                    <md-icon class="material-icons">add</md-icon>
+                </md-button>
+                <md-button ng-show="!isModal" class="md-icon-button" ng-click="showFilter(true)" title="{{ 'common.filter' | translate }}">
+                    <md-icon class="material-icons">search</md-icon>
+                </md-button>
+                <md-button ng-show="!isModal" class="md-icon-button" ng-click="getItems()" title="{{ 'common.refresh' | translate }}">
+                    <md-icon class="material-icons">refresh</md-icon>
+                </md-button>
+            </div>
+        </md-toolbar>
+        <md-toolbar class="md-table-toolbar md-default" ng-show="isModal || (isFilterShown && selected.length == 0)">
+            <div class="md-toolbar-tools">
+                <md-icon class="material-icons">search</md-icon>
+                <form autocomplete="off">
+                    <md-input-container class="md-block" flex-gt-sm>
+                        <label>{{ 'common.filter' | translate }}</label>
+                        <input type="text" ng-model="query.filter" ng-model-options="{debounce: 500}" ng-change="getItems()">
+                    </md-input-container>
+
+                </form>
+                <md-button ng-show="!isModal" class="md-icon-button" ng-click="showFilter(false)" title="{{ 'common.close' | translate }}">
+                    <md-icon class="material-icons">close</md-icon>
+                </md-button>
+                <md-button class="md-icon-button" ng-click="getItems()" title="{{ 'common.refresh' | translate }}">
+                    <md-icon class="material-icons">refresh</md-icon>
+                </md-button>
+            </div>
+        </md-toolbar>
+        <md-toolbar class="md-table-toolbar alternate" ng-show="selected.length > 0">
+            <div class="md-toolbar-tools">
+                <span>{{ itemType + '.selectedItems' | translate:{count:selected.length} }}</span>
+                <span flex></span>
+                <md-button class="md-icon-button" ng-click="askRemoveSelected()" title="{{ 'common.delete' | translate }}">
+                    <md-icon class="material-icons">delete</md-icon>
+                </md-button>
+            </div>
+        </md-toolbar>
+    </div>
+
+    <div flex>
+        <md-table-container>
+            <table md-table md-row-select multiple ng-model="selected" >
+                <thead md-head md-order="query.order" md-on-reorder="getItems">
+                <tr md-row>
+                    <th md-column md-order-by="id"><span>{{ itemType + '.title' | translate }}</span></th>
+                    <th md-column md-order-by="type"><span>{{ itemType + '.type' | translate }}</span></th>
+                    <th md-column md-order-by="createdAt">{{ 'common.createdAt' | translate }}</th>
+                    <th md-column md-order-by="updatedAt">{{ 'common.updatedAt' | translate }}</th>
+                    <th class="col-icon-1" md-column>{{ 'common.actions' | translate }}</th>
+                </tr>
+                </thead>
+                <tbody md-body>
+                <tr md-row md-select="item" md-select-id="id" ng-repeat="item in items.data">
+                    <td md-cell>{{item.title}}</td>
+                    <td md-cell>{{ itemType + '.types.' + item.type | translate }}</td>
+                    <td md-cell>{{item.createdAt | formatDateTime}}</td>
+                    <td md-cell>{{item.updatedAt == null ? ('common.never' | translate ) : (item.updatedAt | formatDateTime)}}</td>
+                    <td class="col-icon-1" md-cell>
+                        <md-menu ng-show="!isModal">
+                            <md-button class="md-icon-button" ng-click="$mdOpenMenu($event)">
+                                <md-icon class="material-icons">more_vert</md-icon>
+                            </md-button>
+                            <md-menu-content>
+                                <md-menu-item>
+                                    <md-button ui-sref="{{itemType}}_edit({id: item.id, item: item})">
+                                        <md-icon class="material-icons">mode_edit</md-icon>
+                                        {{ 'common.edit' | translate }}
+                                    </md-button>
+                                </md-menu-item>
+                                <md-menu-item>
+                                    <md-button ng-click="editItem(item)">
+                                        <md-icon class="material-icons">border_color</md-icon>
+                                        {{ 'common.editDialog' | translate }}
+                                    </md-button>
+                                </md-menu-item>
+                                <md-menu-divider></md-menu-divider>
+                                <md-menu-item>
+                                    <md-button ng-click="askRemoveOne(item)">
+                                        <md-icon class="material-icons">delete</md-icon>
+                                        {{ 'common.delete' | translate }}
+                                    </md-button>
+                                </md-menu-item>
+                            </md-menu-content>
+                        </md-menu>
+
+                        <md-button ng-show="isModal" class="md-icon-button" ng-click="selectItem(item)" title="{{ 'common.select' | translate }}">
+                            <md-icon class="material-icons">done</md-icon>
+                        </md-button>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </md-table-container>
+    </div>
+
+    <md-table-pagination md-label="{{appUtils.mdTableLabels()}}" class="col-xs-11" md-limit="query.limit" md-limit-options="[5, 10, 20]"
+                         md-page="query.page" md-total="{{items.count}}" md-on-paginate="getItems" md-page-select></md-table-pagination>
+
+    <div ng-repeat="error in busy.errors(itemType + '.table')" class="isa_error">
+        <i class="fa fa-times-circle"></i>
+        {{ error.data.message }}
+    </div>
+</div>

frontend/WebSem/app/views/articlesedit.html

@@ -20,9 +20,13 @@
             <h4 class="md-title">{{ itemType + '.general' | translate }}</h4>
 
             <div layout-gt-sm="row">
-                <md-input-container class="md-block" flex flex-gt-sm="15">
+                <md-input-container class="md-block" flex flex-gt-sm="15" ng-if="item.id != null">
                     <label>{{ itemType + '.type' | translate }}</label>
-                    <md-select ng-model="item.type" required ng-readonly="item.id != null">
+                    <input value="{{ itemType + '.types.' + item.type | translate }}" readonly>
+                </md-input-container>
+                <md-input-container class="md-block" flex flex-gt-sm="15" ng-if="item.id == null">
+                    <label>{{ itemType + '.type' | translate }}</label>
+                    <md-select ng-model="item.type" required>
                         <md-option ng-repeat="type in appUtils.articleTypes" ng-value="type">{{ itemType + '.types.' + type | translate }}</md-option>
                     </md-select>
                 </md-input-container>
@@ -56,15 +60,54 @@
 
 
             <div layout="row" layout-align=" center">
-                <h4 class="md-title">{{ itemType + '.fields' | translate }}</h4>
+                <h4 class="md-title">{{ itemType + '.fields.name' | translate }}</h4>
                 <md-button class="md-icon-button no-margin" ng-click="addField()" title="{{ 'common.new' | translate }}">
                     <md-icon class="material-icons">playlist_add</md-icon>
                 </md-button>
             </div>
 
-            <div layout-gt-sm="row">
-                <div ng-repeat="field in item.fields">{{field}}</div>
-            </div>
+            <md-table-container ng-show="item.fields.length > 0">
+                <table md-table>
+                    <thead md-head>
+                    <tr md-row>
+                        <th md-column>{{ itemType + '.fields.type' | translate }}</th>
+                        <th md-column>{{ itemType + '.fields.property' | translate }}</th>
+                        <th md-column>{{ itemType + '.fields.value' | translate }}</th>
+                        <th class="col-icon-1" md-column>{{ 'common.actions' | translate }}</th>
+                    </tr>
+                    </thead>
+                    <tbody md-body>
+                    <tr md-row ng-repeat="field in item.fields track by $index">
+                        <td md-cell>
+                            <md-input-container class="md-block md-input-small" flex>
+                                <md-select ng-model="field.type">
+                                    <md-option ng-repeat="type in appUtils.articleFieldTypes" ng-value="type">{{ itemType + '.fields.types.' + type | translate }}</md-option>
+                                </md-select>
+                            </md-input-container>
+                        </td>
+                        <td md-cell>
+                            <md-input-container class="md-block md-input-small" flex>
+                                <md-input-container class="md-block md-input-small" flex>
+                                    <md-select ng-model="field.property">
+                                        <md-option ng-repeat="prop in appUtils.articleFieldProperties" ng-value="prop">{{ itemType + '.fields.properties.' + prop | translate }}</md-option>
+                                    </md-select>
+                                </md-input-container>
+                            </md-input-container>
+                        </td>
+                        <td md-cell>
+                            <md-input-container class="md-block md-input-small" flex>
+                                <input ng-model="field.value" >
+                            </md-input-container>
+                        </td>
+                        <td class="col-icon-1" md-cell>
+                            <md-button class="md-icon-button" ng-click="removeListItem('fields', $index)" title="{{ 'common.delete' | translate }}">
+                                <md-icon class="material-icons">close</md-icon>
+                            </md-button>
+                        </td>
+                    </tr>
+                    </tbody>
+                </table>
+            </md-table-container>
 
 
             <div flex>

frontend/WebSem/sdk/Business/apputils.business.js

@@ -91,6 +91,10 @@
 
             AppUtilsBusiness.articleTypes = ['persons', 'locations', 'countries'];
 
+            AppUtilsBusiness.articleFieldTypes = ['date/date', 'text/plain'];
+
+            AppUtilsBusiness.articleFieldProperties = ['birthDate', 'deathDate'];
+
             return AppUtilsBusiness;
         }]);
 })();