added flags; artile category page

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

 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="8d054e21-e284-419c-acba-f672639639a4" name="Default" comment="">
-      <change type="DELETED" beforePath="$PROJECT_DIR$/../../frontend/WebSem/app/controllers/directives/.gitkeep" afterPath="" />
-      <change type="DELETED" beforePath="$PROJECT_DIR$/../../frontend/WebSem/app/views/directives/.gitkeep" afterPath="" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/WebApiWebSem/appsettings.Development.json" afterPath="$PROJECT_DIR$/WebApiWebSem/appsettings.Development.json" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/../../frontend/WebSem/app/controllers/home.controller.js" afterPath="$PROJECT_DIR$/../../frontend/WebSem/app/controllers/home.controller.js" />
+      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/../../frontend/WebSem/app/img/blank.gif" />
+      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/../../frontend/WebSem/app/img/flags.png" />
+      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/../../frontend/WebSem/app/less/flags.css" />
+      <change type="DELETED" beforePath="$PROJECT_DIR$/../../frontend/WebSem/app/img/.gitkeep" afterPath="" />
+      <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$/../../frontend/WebSem/app/controllers/articleCategory.controller.js" afterPath="$PROJECT_DIR$/../../frontend/WebSem/app/controllers/articleCategory.controller.js" />
       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/../../frontend/WebSem/app/index.html" afterPath="$PROJECT_DIR$/../../frontend/WebSem/app/index.html" />
+      <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/views/articlesCategory.html" afterPath="$PROJECT_DIR$/../../frontend/WebSem/app/views/articlesCategory.html" />
       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/../../frontend/WebSem/app/views/home.html" afterPath="$PROJECT_DIR$/../../frontend/WebSem/app/views/home.html" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/../../frontend/WebSem/app/views/toolbar.html" afterPath="$PROJECT_DIR$/../../frontend/WebSem/app/views/toolbar.html" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="TRACKING_ENABLED" value="true" />
       <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="210">
-              <caret line="17" column="91" lean-forward="true" selection-start-line="17" selection-start-column="91" selection-end-line="17" selection-end-column="91" />
+            <state relative-caret-position="534">
+              <caret line="35" column="0" lean-forward="true" selection-start-line="35" selection-start-column="0" selection-end-line="35" selection-end-column="0" />
               <folding>
                 <marker date="1487804389248" expanded="true" signature="6:307" ph="..." />
                 <marker date="1487804389248" expanded="true" signature="342:4029" ph="{...}" />
       <workItem from="1487345029610" duration="5634000" />
       <workItem from="1487441650798" duration="14018000" />
       <workItem from="1487528667649" duration="13931000" />
-      <workItem from="1487802391451" duration="4043000" />
+      <workItem from="1487802391451" duration="5525000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="44840000" />
+    <option name="totallyTimeSpent" value="46322000" />
   </component>
   <component name="TodoView">
     <todo-panel id="selected-file">
     </entry>
     <entry file="file://$PROJECT_DIR$/WebApiWebSem/DataAccess/ArticlesDataAccess.cs">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="210">
-          <caret line="17" column="91" lean-forward="true" selection-start-line="17" selection-start-column="91" selection-end-line="17" selection-end-column="91" />
+        <state relative-caret-position="534">
+          <caret line="35" column="0" lean-forward="true" selection-start-line="35" selection-start-column="0" selection-end-line="35" selection-end-column="0" />
           <folding>
             <marker date="1487804389248" expanded="true" signature="6:307" ph="..." />
             <marker date="1487804389248" expanded="true" signature="342:4029" ph="{...}" />

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

 angular.module('app')
-    .controller('articleCategoryController', ['$scope', '$stateParams', 'articlesBusiness', 'listControllerBuilder',
-        function($scope, $stateParams, articlesBusiness, listControllerBuilder) {
+    .controller('articleCategoryController', ['$scope', '$stateParams', 'articlesBusiness', 'AppUtilsBusiness', 'luBusyBusiness',
+        function($scope, $stateParams, articlesBusiness, AppUtilsBusiness, luBusyBusiness) {
 
-            $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();
+            luBusyBusiness.reset();
+            $scope.items = null;
+            $scope.appUtils = AppUtilsBusiness;
+            $scope.itemType = $stateParams.type;
+
+            $scope.query = {
+                order: 'id',
+                filter: '',
+                limit: 10,
+                page: 1
+            };
+
+            $scope.load = function()
+            {
+                articlesBusiness.getMultiple($scope.query.order, 'type: ' + $scope.itemType + ' ' + $scope.query.filter,
+                    $scope.query.page - 1, $scope.query.limit, 'articleCategory.articleCategory').then(function(data)
+                {
+                    $scope.items = data;
+                }, function (error) {});
+            };
+
+            $scope.load();
     }]);

frontend/WebSem/app/index.html

 
     <!-- build:less css/styles.css -->
     <link rel="stylesheet/less" href="less/app.less">
+    <link rel="stylesheet" href="less/flags.css">
     <!-- endbuild -->
 
     <!-- build:remove -->

frontend/WebSem/app/less/app.less

   .justify-text();
 }
 
-.home-grid {
+.image-grid {
   .red {
     background: #ff8a80;
   }

frontend/WebSem/app/less/flags.css

+/*!
+ * Generated with CSS Flag Sprite generator (https://www.flag-sprites.com/)
+ */
+
+.flag {
+    display: inline-block;
+    width: 16px;
+    height: 11px;
+    background: url('../img/flags.png') no-repeat;
+}
+
+
+.flag.flag-us {
+    background-position: -16px 0;
+}
+
+.flag.flag-fr {
+    background-position: 0 0;
+}

frontend/WebSem/app/views/articlesCategory.html

-<div layout="column" layout-fill layout-align="top" angular-busy="appUtils.cgBusy(itemType + '.table')">
+<div layout="column" layout-fill layout-align="top" angular-busy="appUtils.cgBusy('articleCategory.articleCategory')">
 
-    <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 layout="row">
+        <span flex="15"></span>
+        <md-grid-list class="image-grid" md-cols="4" md-row-height="200px" md-row-height-gt-sm="300px"
+                      md-row-height-gt-md="450px" md-gutter="4px" flex="60">
+            <md-grid-tile ng-repeat="item in items.data" class="red" md-colspan="{{$index < 2 ? 2 : 1}}" md-rowspan="1">
+                <a ui-sref="{{itemType}}">
+                    <img class="article-picture" ng-src="{{item.pictureUrl}}">
+                    <md-grid-tile-footer><h3>{{ item.title }}</h3></md-grid-tile-footer>
+                </a>
+            </md-grid-tile>
+        </md-grid-list>
     </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>
+                         md-page="query.page" md-total="{{items.count}}" md-on-paginate="load" md-page-select></md-table-pagination>
 
-    <div ng-repeat="error in busy.errors(itemType + '.table')" class="isa_error">
+    <div ng-repeat="error in busy.errors('articleCategory.articleCategory')" class="isa_error">
         <i class="fa fa-times-circle"></i>
         {{ error.data.message }}
     </div>

frontend/WebSem/app/views/home.html

     </div>
     <div layout="row">
         <span flex="25"></span>
-        <md-grid-list class="home-grid" md-cols="2" md-row-height="200px" md-row-height-gt-sm="300px" md-row-height-gt-md="450px" md-gutter="4px" flex="40">
+        <md-grid-list class="image-grid" md-cols="2" md-row-height="200px" md-row-height-gt-sm="300px" md-row-height-gt-md="450px" md-gutter="4px" flex="40">
             <md-grid-tile class="red" md-colspan="2" md-rowspan="1">
                 <a ui-sref="persons">
                     <img class="article-picture" src="http://commons.wikimedia.org/wiki/Special:FilePath/Sir_Winston_S_Churchill.jpg?width=300">
             </md-grid-tile>
         </md-grid-list>
     </div>
+
+    <div ng-repeat="error in busy.errors('home.home')" class="isa_error">
+        <i class="fa fa-times-circle"></i>
+        {{ error.data.message }}
+    </div>
 </div>

frontend/WebSem/app/views/toolbar.html

         </md-button>
         <h2>{{title}}</h2>
         <span flex></span>
+        <!--<img src="img/blank.gif" class="flag flag-us" alt="English" />-->
     </div>
 </md-toolbar>