Browse Source

article edit UI; sidebar; begin display controller

tags/v1.0
Robin Thoni 7 years ago
parent
commit
655ccd4795

+ 8
- 11
backend/WebSem/.idea/.idea.WebSem/.idea/workspace.xml View File

@@ -2,9 +2,6 @@
2 2
 <project version="4">
3 3
   <component name="ChangeListManager">
4 4
     <list default="true" id="8d054e21-e284-419c-acba-f672639639a4" name="Default" comment="">
5
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/.idea.WebSem/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/.idea.WebSem/.idea/workspace.xml" />
6
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/WebApiWebSem/DataAccess/ArticlesDataAccess.cs" afterPath="$PROJECT_DIR$/WebApiWebSem/DataAccess/ArticlesDataAccess.cs" />
7
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/WebApiWebSem/DataAccess/ModelsDbo.cs" afterPath="$PROJECT_DIR$/WebApiWebSem/DataAccess/ModelsDbo.cs" />
8 5
       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/../../frontend/WebSem/app/less/app.less" afterPath="$PROJECT_DIR$/../../frontend/WebSem/app/less/app.less" />
9 6
       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/../../frontend/WebSem/app/translations/en.json" afterPath="$PROJECT_DIR$/../../frontend/WebSem/app/translations/en.json" />
10 7
       <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 @@
44 41
       <file leaf-file-name="ArticlesDataAccess.cs" pinned="false" current-in-tab="true">
45 42
         <entry file="file://$PROJECT_DIR$/WebApiWebSem/DataAccess/ArticlesDataAccess.cs">
46 43
           <provider selected="true" editor-type-id="text-editor">
47
-            <state relative-caret-position="445">
48
-              <caret line="105" column="43" lean-forward="true" selection-start-line="105" selection-start-column="43" selection-end-line="105" selection-end-column="43" />
44
+            <state relative-caret-position="318">
45
+              <caret line="86" column="57" lean-forward="true" selection-start-line="86" selection-start-column="57" selection-end-line="86" selection-end-column="57" />
49 46
               <folding>
50 47
                 <marker date="1487546558945" expanded="true" signature="6:307" ph="..." />
51 48
                 <marker date="1487546558945" expanded="true" signature="342:4021" ph="{...}" />
@@ -286,12 +283,12 @@
286 283
       <workItem from="1487108080916" duration="3508000" />
287 284
       <workItem from="1487345029610" duration="5634000" />
288 285
       <workItem from="1487441650798" duration="14018000" />
289
-      <workItem from="1487528667649" duration="11486000" />
286
+      <workItem from="1487528667649" duration="12998000" />
290 287
     </task>
291 288
     <servers />
292 289
   </component>
293 290
   <component name="TimeTrackingManager">
294
-    <option name="totallyTimeSpent" value="38352000" />
291
+    <option name="totallyTimeSpent" value="39864000" />
295 292
   </component>
296 293
   <component name="TodoView">
297 294
     <todo-panel id="selected-file">
@@ -312,8 +309,8 @@
312 309
       <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" />
313 310
       <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" />
314 311
       <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" />
315
-      <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" />
316
-      <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" />
312
+      <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" />
313
+      <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" />
317 314
       <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" />
318 315
       <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" />
319 316
       <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 @@
851 848
     </entry>
852 849
     <entry file="file://$PROJECT_DIR$/WebApiWebSem/DataAccess/ArticlesDataAccess.cs">
853 850
       <provider selected="true" editor-type-id="text-editor">
854
-        <state relative-caret-position="445">
855
-          <caret line="105" column="43" lean-forward="true" selection-start-line="105" selection-start-column="43" selection-end-line="105" selection-end-column="43" />
851
+        <state relative-caret-position="318">
852
+          <caret line="86" column="57" lean-forward="true" selection-start-line="86" selection-start-column="57" selection-end-line="86" selection-end-column="57" />
856 853
           <folding>
857 854
             <marker date="1487546558945" expanded="true" signature="6:307" ph="..." />
858 855
             <marker date="1487546558945" expanded="true" signature="342:4021" ph="{...}" />

+ 48
- 7
frontend/WebSem/app/app.js View File

@@ -140,17 +140,22 @@ angular.module('app', [
140 140
             ssSideNavSectionsProvider.initWithTheme($mdThemingProvider);
141 141
             ssSideNavSectionsProvider.initWithSections([{
142 142
                 id: 'toogle_1',
143
-                name: 'home.name',
143
+                name: 'home.categories',
144 144
                 type: 'heading',
145 145
                 children: [{
146
-                    id: 'link_1',
147
-                    name: 'home.name',
148
-                    state: 'home.2',
146
+                    id: 'persons.name',
147
+                    name: 'persons.name',
148
+                    state: 'persons',
149 149
                     type: 'link'
150 150
                 }, {
151
-                    id: 'link_1',
152
-                    name: 'home.name',
153
-                    state: 'home.2',
151
+                    id: 'locations.name',
152
+                    name: 'locations.name',
153
+                    state: 'locations',
154
+                    type: 'link'
155
+                }, {
156
+                    id: 'countries.name',
157
+                    name: 'countries.name',
158
+                    state: 'countries',
154 159
                     type: 'link'
155 160
                 }]
156 161
             },
@@ -189,6 +194,42 @@ angular.module('app', [
189 194
                 controller:'HomeController'
190 195
             });
191 196
 
197
+            $stateProvider.state('locations', {
198
+                url:'/locations',
199
+                parent: 'root',
200
+                title: "locations.name",
201
+                reloadOnSearch: false,
202
+                templateUrl:'views/articlesCategory.html',
203
+                controller:'articleCategoryController',
204
+                params: {
205
+                    type: 'locations'
206
+                }
207
+            });
208
+
209
+            $stateProvider.state('persons', {
210
+                url:'/persons',
211
+                parent: 'root',
212
+                title: "persons.name",
213
+                reloadOnSearch: false,
214
+                templateUrl:'views/articlesCategory.html',
215
+                controller:'articleCategoryController',
216
+                params: {
217
+                    type: 'persons'
218
+                }
219
+            });
220
+
221
+            $stateProvider.state('countries', {
222
+                url:'/countries',
223
+                parent: 'root',
224
+                title: "countries.name",
225
+                reloadOnSearch: false,
226
+                templateUrl:'views/articlesCategory.html',
227
+                controller:'articleCategoryController',
228
+                params: {
229
+                    type: 'countries'
230
+                }
231
+            });
232
+
192 233
             addCrudStates($stateProvider, 'articles');
193 234
 
194 235
             $urlRouterProvider.otherwise('/');

+ 36
- 0
frontend/WebSem/app/controllers/articleCategory.controller.js View File

@@ -0,0 +1,36 @@
1
+angular.module('app')
2
+    .controller('articleCategoryController', ['$scope', '$stateParams', 'articlesBusiness', 'listControllerBuilder',
3
+        function($scope, $stateParams, articlesBusiness, listControllerBuilder) {
4
+
5
+            $scope.business = articlesBusiness;
6
+            $scope.itemType = 'articles';
7
+            // $scope.defaultOrder = 'id';
8
+            // listControllerBuilder.create($scope, $stateParams);
9
+            //
10
+            // $scope.getAddItem = function()
11
+            // {
12
+            //     return {
13
+            //         title: $scope.query.filter
14
+            //     };
15
+            // };
16
+            //
17
+            // $scope.getFilter = function (filter) {
18
+            //     var label = $scope.appUtils.tr('articles.type').toLowerCase();
19
+            //     return filter.replace(new RegExp(label + ': *([a-zA-Z0-9]*)'), function(match, p1)
20
+            //     {
21
+            //         var type = null;
22
+            //         for (var t in $scope.appUtils.articleTypes)
23
+            //         {
24
+            //             var str = $scope.appUtils.articleTypes[t];
25
+            //             if ($scope.appUtils.tr('articles.types.' + str).toLowerCase() == p1.toLowerCase())
26
+            //             {
27
+            //                 type = str;
28
+            //                 break;
29
+            //             }
30
+            //         }
31
+            //         return type == null ? '' : 'type:' + type;
32
+            //     });
33
+            // };
34
+            //
35
+            // $scope.init();
36
+    }]);

+ 1
- 0
frontend/WebSem/app/index.html View File

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

+ 8
- 0
frontend/WebSem/app/less/app.less View File

@@ -132,6 +132,14 @@ md-table-container tbody tr {
132 132
   padding-left: 8px;
133 133
 }
134 134
 
135
+.md-input-small {
136
+  margin: 0;
137
+  .md-errors-spacer {
138
+    min-height: 0;
139
+    height: 0;
140
+  }
141
+}
142
+
135 143
 /**
136 144
 ========================================================
137 145
 **/

+ 25
- 2
frontend/WebSem/app/translations/en.json View File

@@ -42,7 +42,17 @@
42 42
   },
43 43
   "home": {
44 44
     "name": "Home",
45
-    "welcome": "Welcome Home!"
45
+    "welcome": "Welcome Home!",
46
+    "categories": "Categories"
47
+  },
48
+  "persons": {
49
+    "name": "Persons"
50
+  },
51
+  "locations": {
52
+    "name": "Locations"
53
+  },
54
+  "countries": {
55
+    "name": "Countries"
46 56
   },
47 57
   "articles": {
48 58
     "name": "Articles",
@@ -59,7 +69,20 @@
59 69
       "countries": "Country"
60 70
     },
61 71
     "general": "General",
62
-    "fields": "Data",
72
+    "fields": {
73
+      "name": "Data",
74
+      "type": "Type",
75
+      "value": "Value",
76
+      "property": "Property",
77
+      "types": {
78
+        "date/date": "Date",
79
+        "text/plain": "Text"
80
+      },
81
+      "properties": {
82
+        "birthDate": "Birth date",
83
+        "deathDate": "Death date"
84
+      }
85
+    },
63 86
     "deleteOne": "Do you really want to delete article '{text}'?",
64 87
     "deleteMultiple": "Do you really want to delete {count} {count, select, 1{article} other{articles}}?",
65 88
     "edit": {

+ 114
- 0
frontend/WebSem/app/views/articlesCategory.html View File

@@ -0,0 +1,114 @@
1
+<div layout="column" layout-fill layout-align="top" angular-busy="appUtils.cgBusy(itemType + '.table')">
2
+
3
+    <div flex>
4
+        <md-toolbar class="md-table-toolbar md-default" ng-show="isModal || (!isFilterShown && selected.length == 0)">
5
+            <div class="md-toolbar-tools">
6
+                <span>{{ itemType + '.name' | translate }}</span>
7
+                <span flex></span>
8
+                <md-button ng-show="isModal && items != null" class="md-icon-button" ng-click="addItemDialog()" title="{{ 'common.new' | translate }}">
9
+                    <md-icon class="material-icons">add</md-icon>
10
+                </md-button>
11
+                <md-button ng-show="!isModal" class="md-icon-button" ui-sref="{{itemType}}_add" title="{{ 'common.new' | translate }}">
12
+                    <md-icon class="material-icons">add</md-icon>
13
+                </md-button>
14
+                <md-button ng-show="!isModal" class="md-icon-button" ng-click="showFilter(true)" title="{{ 'common.filter' | translate }}">
15
+                    <md-icon class="material-icons">search</md-icon>
16
+                </md-button>
17
+                <md-button ng-show="!isModal" class="md-icon-button" ng-click="getItems()" title="{{ 'common.refresh' | translate }}">
18
+                    <md-icon class="material-icons">refresh</md-icon>
19
+                </md-button>
20
+            </div>
21
+        </md-toolbar>
22
+        <md-toolbar class="md-table-toolbar md-default" ng-show="isModal || (isFilterShown && selected.length == 0)">
23
+            <div class="md-toolbar-tools">
24
+                <md-icon class="material-icons">search</md-icon>
25
+                <form autocomplete="off">
26
+                    <md-input-container class="md-block" flex-gt-sm>
27
+                        <label>{{ 'common.filter' | translate }}</label>
28
+                        <input type="text" ng-model="query.filter" ng-model-options="{debounce: 500}" ng-change="getItems()">
29
+                    </md-input-container>
30
+
31
+                </form>
32
+                <md-button ng-show="!isModal" class="md-icon-button" ng-click="showFilter(false)" title="{{ 'common.close' | translate }}">
33
+                    <md-icon class="material-icons">close</md-icon>
34
+                </md-button>
35
+                <md-button class="md-icon-button" ng-click="getItems()" title="{{ 'common.refresh' | translate }}">
36
+                    <md-icon class="material-icons">refresh</md-icon>
37
+                </md-button>
38
+            </div>
39
+        </md-toolbar>
40
+        <md-toolbar class="md-table-toolbar alternate" ng-show="selected.length > 0">
41
+            <div class="md-toolbar-tools">
42
+                <span>{{ itemType + '.selectedItems' | translate:{count:selected.length} }}</span>
43
+                <span flex></span>
44
+                <md-button class="md-icon-button" ng-click="askRemoveSelected()" title="{{ 'common.delete' | translate }}">
45
+                    <md-icon class="material-icons">delete</md-icon>
46
+                </md-button>
47
+            </div>
48
+        </md-toolbar>
49
+    </div>
50
+
51
+    <div flex>
52
+        <md-table-container>
53
+            <table md-table md-row-select multiple ng-model="selected" >
54
+                <thead md-head md-order="query.order" md-on-reorder="getItems">
55
+                <tr md-row>
56
+                    <th md-column md-order-by="id"><span>{{ itemType + '.title' | translate }}</span></th>
57
+                    <th md-column md-order-by="type"><span>{{ itemType + '.type' | translate }}</span></th>
58
+                    <th md-column md-order-by="createdAt">{{ 'common.createdAt' | translate }}</th>
59
+                    <th md-column md-order-by="updatedAt">{{ 'common.updatedAt' | translate }}</th>
60
+                    <th class="col-icon-1" md-column>{{ 'common.actions' | translate }}</th>
61
+                </tr>
62
+                </thead>
63
+                <tbody md-body>
64
+                <tr md-row md-select="item" md-select-id="id" ng-repeat="item in items.data">
65
+                    <td md-cell>{{item.title}}</td>
66
+                    <td md-cell>{{ itemType + '.types.' + item.type | translate }}</td>
67
+                    <td md-cell>{{item.createdAt | formatDateTime}}</td>
68
+                    <td md-cell>{{item.updatedAt == null ? ('common.never' | translate ) : (item.updatedAt | formatDateTime)}}</td>
69
+                    <td class="col-icon-1" md-cell>
70
+                        <md-menu ng-show="!isModal">
71
+                            <md-button class="md-icon-button" ng-click="$mdOpenMenu($event)">
72
+                                <md-icon class="material-icons">more_vert</md-icon>
73
+                            </md-button>
74
+                            <md-menu-content>
75
+                                <md-menu-item>
76
+                                    <md-button ui-sref="{{itemType}}_edit({id: item.id, item: item})">
77
+                                        <md-icon class="material-icons">mode_edit</md-icon>
78
+                                        {{ 'common.edit' | translate }}
79
+                                    </md-button>
80
+                                </md-menu-item>
81
+                                <md-menu-item>
82
+                                    <md-button ng-click="editItem(item)">
83
+                                        <md-icon class="material-icons">border_color</md-icon>
84
+                                        {{ 'common.editDialog' | translate }}
85
+                                    </md-button>
86
+                                </md-menu-item>
87
+                                <md-menu-divider></md-menu-divider>
88
+                                <md-menu-item>
89
+                                    <md-button ng-click="askRemoveOne(item)">
90
+                                        <md-icon class="material-icons">delete</md-icon>
91
+                                        {{ 'common.delete' | translate }}
92
+                                    </md-button>
93
+                                </md-menu-item>
94
+                            </md-menu-content>
95
+                        </md-menu>
96
+
97
+                        <md-button ng-show="isModal" class="md-icon-button" ng-click="selectItem(item)" title="{{ 'common.select' | translate }}">
98
+                            <md-icon class="material-icons">done</md-icon>
99
+                        </md-button>
100
+                    </td>
101
+                </tr>
102
+                </tbody>
103
+            </table>
104
+        </md-table-container>
105
+    </div>
106
+
107
+    <md-table-pagination md-label="{{appUtils.mdTableLabels()}}" class="col-xs-11" md-limit="query.limit" md-limit-options="[5, 10, 20]"
108
+                         md-page="query.page" md-total="{{items.count}}" md-on-paginate="getItems" md-page-select></md-table-pagination>
109
+
110
+    <div ng-repeat="error in busy.errors(itemType + '.table')" class="isa_error">
111
+        <i class="fa fa-times-circle"></i>
112
+        {{ error.data.message }}
113
+    </div>
114
+</div>

+ 49
- 6
frontend/WebSem/app/views/articlesedit.html View File

@@ -20,9 +20,13 @@
20 20
             <h4 class="md-title">{{ itemType + '.general' | translate }}</h4>
21 21
 
22 22
             <div layout-gt-sm="row">
23
-                <md-input-container class="md-block" flex flex-gt-sm="15">
23
+                <md-input-container class="md-block" flex flex-gt-sm="15" ng-if="item.id != null">
24 24
                     <label>{{ itemType + '.type' | translate }}</label>
25
-                    <md-select ng-model="item.type" required ng-readonly="item.id != null">
25
+                    <input value="{{ itemType + '.types.' + item.type | translate }}" readonly>
26
+                </md-input-container>
27
+                <md-input-container class="md-block" flex flex-gt-sm="15" ng-if="item.id == null">
28
+                    <label>{{ itemType + '.type' | translate }}</label>
29
+                    <md-select ng-model="item.type" required>
26 30
                         <md-option ng-repeat="type in appUtils.articleTypes" ng-value="type">{{ itemType + '.types.' + type | translate }}</md-option>
27 31
                     </md-select>
28 32
                 </md-input-container>
@@ -56,15 +60,54 @@
56 60
 
57 61
 
58 62
             <div layout="row" layout-align=" center">
59
-                <h4 class="md-title">{{ itemType + '.fields' | translate }}</h4>
63
+                <h4 class="md-title">{{ itemType + '.fields.name' | translate }}</h4>
60 64
                 <md-button class="md-icon-button no-margin" ng-click="addField()" title="{{ 'common.new' | translate }}">
61 65
                     <md-icon class="material-icons">playlist_add</md-icon>
62 66
                 </md-button>
63 67
             </div>
64 68
 
65
-            <div layout-gt-sm="row">
66
-                <div ng-repeat="field in item.fields">{{field}}</div>
67
-            </div>
69
+            <md-table-container ng-show="item.fields.length > 0">
70
+                <table md-table>
71
+                    <thead md-head>
72
+                    <tr md-row>
73
+                        <th md-column>{{ itemType + '.fields.type' | translate }}</th>
74
+                        <th md-column>{{ itemType + '.fields.property' | translate }}</th>
75
+                        <th md-column>{{ itemType + '.fields.value' | translate }}</th>
76
+                        <th class="col-icon-1" md-column>{{ 'common.actions' | translate }}</th>
77
+                    </tr>
78
+                    </thead>
79
+                    <tbody md-body>
80
+                    <tr md-row ng-repeat="field in item.fields track by $index">
81
+                        <td md-cell>
82
+                            <md-input-container class="md-block md-input-small" flex>
83
+                                <md-select ng-model="field.type">
84
+                                    <md-option ng-repeat="type in appUtils.articleFieldTypes" ng-value="type">{{ itemType + '.fields.types.' + type | translate }}</md-option>
85
+                                </md-select>
86
+                            </md-input-container>
87
+                        </td>
88
+                        <td md-cell>
89
+                            <md-input-container class="md-block md-input-small" flex>
90
+                                <md-input-container class="md-block md-input-small" flex>
91
+                                    <md-select ng-model="field.property">
92
+                                        <md-option ng-repeat="prop in appUtils.articleFieldProperties" ng-value="prop">{{ itemType + '.fields.properties.' + prop | translate }}</md-option>
93
+                                    </md-select>
94
+                                </md-input-container>
95
+                            </md-input-container>
96
+                        </td>
97
+                        <td md-cell>
98
+                            <md-input-container class="md-block md-input-small" flex>
99
+                                <input ng-model="field.value" >
100
+                            </md-input-container>
101
+                        </td>
102
+                        <td class="col-icon-1" md-cell>
103
+                            <md-button class="md-icon-button" ng-click="removeListItem('fields', $index)" title="{{ 'common.delete' | translate }}">
104
+                                <md-icon class="material-icons">close</md-icon>
105
+                            </md-button>
106
+                        </td>
107
+                    </tr>
108
+                    </tbody>
109
+                </table>
110
+            </md-table-container>
68 111
 
69 112
 
70 113
             <div flex>

+ 4
- 0
frontend/WebSem/sdk/Business/apputils.business.js View File

@@ -91,6 +91,10 @@
91 91
 
92 92
             AppUtilsBusiness.articleTypes = ['persons', 'locations', 'countries'];
93 93
 
94
+            AppUtilsBusiness.articleFieldTypes = ['date/date', 'text/plain'];
95
+
96
+            AppUtilsBusiness.articleFieldProperties = ['birthDate', 'deathDate'];
97
+
94 98
             return AppUtilsBusiness;
95 99
         }]);
96 100
 })();

Loading…
Cancel
Save