Pages moder on angular: list, edit

autowp · May 24, 2017 · 1008ce9 · 1008ce9
1 parent e479339
commit 1008ce9
Show file tree

Hide file tree

Showing 8 changed files with 673 additions and 0 deletions.
diff --git a/assets/angular.app.js b/assets/angular.app.js
@@ -13,6 +13,7 @@ import './controllers/moder/items/too-big';
 import './controllers/moder/index/stat';
 import './controllers/moder/comments';
 import './controllers/moder/hotlinks';
+import './controllers/moder/pages';
 import './controllers/moder/pictures';
 import './controllers/moder/pictures/item';
 import './controllers/moder/perspectives';

diff --git a/assets/controllers/moder/pages/edit/index.js b/assets/controllers/moder/pages/edit/index.js
@@ -0,0 +1,99 @@
+import angular from 'angular';
+import Module from 'app.module';
+import template from './template.html';
+import ACL_SERVICE_NAME from 'services/acl';
+
+const CONTROLLER_NAME = 'ModerPagesEditController';
+const STATE_NAME = 'moder-pages-edit';
+
+angular.module(Module)
+    .config(['$stateProvider',
+        function config($stateProvider) {
+            $stateProvider.state( {
+                name: STATE_NAME,
+                url: '/moder/pages/edit/{id}',
+                controller: CONTROLLER_NAME,
+                controllerAs: 'ctrl',
+                template: template,
+                resolve: {
+                    access: [ACL_SERVICE_NAME, function (Acl) {
+                        return Acl.inheritsRole('moder', 'unauthorized');
+                    }]
+                }
+            });
+        }
+    ])
+    .controller(CONTROLLER_NAME, [
+        '$scope', '$http', '$state', ACL_SERVICE_NAME,
+        function($scope, $http, $state, Acl) {
+            $scope.pageEnv({
+                layout: {
+                    isAdminPage: true,
+                    blankPage: false,
+                    needRight: false
+                },
+                pageId: 70
+            });
+
+            var ctrl = this;
+            ctrl.item = null;
+
+            ctrl.loading = 0;
+
+            $http({
+                method: 'GET',
+                url: '/api/page/' + $state.params.id
+            }).then(function(response) {
+                ctrl.item = response.data;
+            }, function() {
+                $state.go('error-404');
+            });
+
+            function toPlainArray(pages, level) {
+                var result = [];
+                angular.forEach(pages, function(page, i) {
+                    page.level = level;
+                    page.moveUp = i > 0;
+                    page.moveDown = i < pages.length-1;
+                    result.push(page);
+                    angular.forEach(toPlainArray(page.childs, level+1), function(child) {
+                        result.push(child);
+                    });
+                });
+                return result;
+            }
+
+            $http({
+                method: 'GET',
+                url: '/api/page'
+            }).then(function(response) {
+                ctrl.pages = toPlainArray(response.data.items, 0);
+            });
+
+            ctrl.save = function() {
+                ctrl.loading++;
+                $http({
+                    method: 'PUT',
+                    url: '/api/page/' + $state.params.id,
+                    data: {
+                        parent_id: ctrl.item.parent_id,
+                        name: ctrl.item.name,
+                        title: ctrl.item.title,
+                        breadcrumbs: ctrl.item.breadcrumbs,
+                        url: ctrl.item.url,
+                        is_group_node: ctrl.item.is_group_node ? 1 : 0,
+                        registered_only: ctrl.item.registered_only ? 1 : 0,
+                        guest_only: ctrl.item.guest_only ? 1 : 0,
+                        'class': ctrl.item['class']
+                    }
+                }).then(function(response) {
+                    ctrl.loading--;
+                }, function() {
+                    ctrl.loading--;
+                });
+            };
+
+        }
+    ]);
+
+export default CONTROLLER_NAME;
diff --git a/assets/controllers/moder/pages/edit/template.html b/assets/controllers/moder/pages/edit/template.html
@@ -0,0 +1,50 @@
+<form layout="column" ng-submit="ctrl.save()">
+    <md-input-container>
+        <label translate>page/parent</label>
+        <md-select ng-model="ctrl.item.parent_id" name="parent_id">
+            <md-option ng-value="null"><em>None</em></md-option>
+            <md-option ng-repeat="page in ctrl.pages" ng-value="page.id" style="padding-left:{{16 + page.level*20}}px">
+                {{page.name}}
+            </md-option>
+        </md-select>
+    </md-input-container>
+    <md-input-container>
+        <label translate>page/name</label>
+        <input ng-model="ctrl.item.name" name="name" md-maxlength="255" />
+    </md-input-container>
+    <md-input-container>
+        <label>Title</label>
+        <input ng-model="ctrl.item.title" name="title" md-maxlength="255" />
+    </md-input-container>
+    <md-input-container>
+        <label>Breadcrumbs</label>
+        <input ng-model="ctrl.item.breadcrumbs" name="breadcrumbs" md-maxlength="255" />
+    </md-input-container>
+    <md-input-container>
+        <label>URL</label>
+        <input ng-model="ctrl.item.url" name="url" md-maxlength="255" />
+    </md-input-container>
+    <md-input-container class="md-block">
+        <md-checkbox name="is_group_node" ng-model="ctrl.item.is_group_node">
+            {{'page/is_group_node'|translate}}
+        </md-checkbox>
+    </md-input-container>
+    <md-input-container class="md-block">
+        <md-checkbox name="registered_only" ng-model="ctrl.item.registered_only">
+            {{'page/registered_only'|translate}}
+        </md-checkbox>
+    </md-input-container>
+    <md-input-container class="md-block">
+        <md-checkbox name="guest_only" ng-model="ctrl.item.guest_only">
+            {{'page/guests_only'|translate}}
+        </md-checkbox>
+    </md-input-container>
+    <md-input-container>
+        <label translate>page/class</label>
+        <input ng-model="ctrl.item.class" name="class" md-maxlength="255" />
+    </md-input-container>
+    <div layout="row">
+        <md-button type="submit" class="md-primary md-raised">{{'send'|translate}}</md-button>
+        <md-progress-circular ng-show="ctrl.loading > 0"></md-progress-circular>
+    </div>
+</form>
diff --git a/assets/controllers/moder/pages/index.js b/assets/controllers/moder/pages/index.js
@@ -0,0 +1,88 @@
+import angular from 'angular';
+import Module from 'app.module';
+import template from './template.html';
+import ACL_SERVICE_NAME from 'services/acl';
+import './edit';
+
+const CONTROLLER_NAME = 'ModerPagesController';
+const STATE_NAME = 'moder-pages';
+
+angular.module(Module)
+    .config(['$stateProvider',
+        function config($stateProvider) {
+            $stateProvider.state( {
+                name: STATE_NAME,
+                url: '/moder/pages',
+                controller: CONTROLLER_NAME,
+                controllerAs: 'ctrl',
+                template: template,
+                resolve: {
+                    access: [ACL_SERVICE_NAME, function (Acl) {
+                        return Acl.inheritsRole('moder', 'unauthorized');
+                    }]
+                }
+            });
+        }
+    ])
+    .controller(CONTROLLER_NAME, [
+        '$scope', '$http', ACL_SERVICE_NAME,
+        function($scope, $http, Acl) {
+            $scope.pageEnv({
+                layout: {
+                    isAdminPage: true,
+                    blankPage: false,
+                    needRight: false
+                },
+                pageId: 68
+            });
+
+            var ctrl = this;
+            ctrl.items = [];
+
+            ctrl.canManage = false;
+            Acl.isAllowed('hotlinks', 'manage').then(function() {
+                ctrl.canManage = true;
+            }, function() {
+                ctrl.canManage = false;
+            });
+
+            var load = function() {
+                $http({
+                    method: 'GET',
+                    url: '/api/page'
+                }).then(function(response) {
+                    ctrl.items = toPlainArray(response.data.items, 0);
+                });
+            };
+
+            load();
+
+            function toPlainArray(pages, level) {
+                var result = [];
+                angular.forEach(pages, function(page, i) {
+                    page.level = level;
+                    page.moveUp = i > 0;
+                    page.moveDown = i < pages.length-1;
+                    result.push(page);
+                    angular.forEach(toPlainArray(page.childs, level+1), function(child) {
+                        result.push(child);
+                    });
+                });
+                return result;
+            }
+
+            ctrl.move = function(page, direction) {
+                $http({
+                    method: 'PUT',
+                    url: '/api/page/' + page.id,
+                    data: {
+                        position: direction
+                    }
+                }).then(function(response) {
+                	load();
+                });
+            };
+        }
+    ]);
+
+export default CONTROLLER_NAME;
diff --git a/assets/controllers/moder/pages/template.html b/assets/controllers/moder/pages/template.html
@@ -0,0 +1,31 @@
+<md-button ui-sref="moder-pages-add" class="md-raised md-primary">{{'moder/pages/new'|translate}}</md-button>
+
+<table class="table table-striped table-condensed">
+    <thead>
+        <tr>
+            <th>move</th>
+            <th>N</th>
+            <th translate>page/name</th>
+            <th>Breadcrumbs</th>
+            <th>IsGroup?</th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr class="data-row" ng-repeat="page in ctrl.items">
+            <td style="white-space:nowrap">
+                <md-button class="md-icon-button md-raised" ng-disabled="!page.moveUp" aria-label="move up" ng-click="ctrl.move(page, 'up')"><i class="fa fa-arrow-up"></i></md-button>
+                <md-button class="md-icon-button md-raised" ng-disabled="!page.moveDown" aria-label="move down" ng-click="ctrl.move(page, 'down')"><i class="fa fa-arrow-down"></i></md-button>
+            </td>
+            <td ng-bind="page.id"></td>
+            <td style="padding-left:{{page.level * 20}}px" ng-bind="page.name"></td>
+            <td ng-bind="page.breadcrumbs"></td>
+            <td>{{page.isGroupNode ? 'yes' : 'no'}}</td>
+            <td style="white-space:nowrap">
+                <md-button class="md-primary md-icon-button md-raised" ng-click="addChild" aria-label="add"><i class="fa fa-plus"></i></md-button>
+                <md-button class="md-icon-button md-raised" ui-sref="moder-pages-edit({id: page.id})" aria-label="edit"><i class="fa fa-pencil"></i></md-button>
+                <md-button class="md-warn md-icon-button md-raised" ng-click="deletePage(page)" aria-label="delete"><i class="fa fa-times"></i></md-button>
+            </td>
+        </tr>
+    </tbody>
+</table>