added grant_permission_change socket event.

nginx/default.conf

@@ -7,7 +7,7 @@ server {
 
   index index.html;
 
-  root /var/www/html/graphene-starter/src/app/view/dist;
+  root /var/www/html/graphue/src/app/view/dist;
 
   gzip_static on;
   gzip_comp_level 5;

src/app/schema/mutations/group.py

@@ -94,6 +94,14 @@ def mutate(self, info, **kwargs):
 
         db.session.commit()
 
+        # emit event "grant_permission_change"
+        accessPermissions = []
+        [accessPermissions.append({"name": item.name})
+         for item in myGroup.permissions]
+        socketio = SocketIO(message_queue=current_app.config['REDIS_URI'])
+        socketio.emit('grant_permission_change', data=(
+            myGroup.id, accessPermissions))
+
         return GrantPermission(granted=True)
 
 

src/manage.py

@@ -1,9 +1,9 @@
-from flask_socketio import SocketIO
+from app.model import Group, Menu, Permission
+from flask_socketio import SocketIO, emit
 from app import create_app
 import logging
 import eventlet
 eventlet.monkey_patch()
-# from .model import User
 
 # init app
 app = create_app()
@@ -17,11 +17,45 @@
 
 # check menu, permission
 @socketio.on('check_menu_permission_change')
-def check(data):
-    # print('checking groupid %s' % data)
+def check(groupId):
+    myGroup = Group.query.get(groupId)
+    if not myGroup:
+        raise Exception(_('Group not found'))
+
+    # return all menu
+    menu_tree = []
+    myMenu = Menu.query.all()
+
+    if len(myMenu) > 0:
+        for item in myMenu:
+            menu_tree.append(item.drilldown_tree(
+                json=True, json_fields=cat_to_json))
+    emit('menu_change', menu_tree[0][0])
+
+    # return group menu
+    accessMenus = []
+    [accessMenus.append({"id": item.id}) for item in myGroup.menus]
+    emit('assign_menu_change', (myGroup.id, accessMenus))
+
+    # return group permission
+    accessPermissions = []
+    [accessPermissions.append({"name": item.name})
+     for item in myGroup.permissions]
+    emit('grant_permission_change', (myGroup.id, accessPermissions))
+
     pass
 
 
+def cat_to_json(item):
+    return {
+        'id': item.id,
+        'name': item.name,
+        'path': item.path,
+        'icon': item.icon,
+        'parentId': item.parent_id
+    }
+
+
 if __name__ == '__main__':
     # run app
     log = logging.getLogger(__name__)

src/template/src/App.vue

@@ -14,22 +14,27 @@ import { Socket } from "vue-socket.io-extended";
 })
 export default class App extends Vue {
   @Getter("users/loggedUser") loggedUser;
-  @Getter("users/accessMenu") accessMenu;
   @Getter("users/isAuth") isAuth;
-  @Action("users/logOut") logOut;
   @Mutation("users/UPDATE_ACCESS_MENU") updateAccessMenu;
   @Mutation("SET_ALL_MENU") setAllMenu;
+  @Mutation("SET_ABILITY") setAbility;
 
   @Socket()
   connect() {
     console.log("Socket connected...");
     if (this.isAuth) {
-      console.log("Check menu change... Check permission change...");
+      this.$socket.client.emit(
+        "check_menu_permission_change",
+        this.loggedUser.group.id
+      );
+    }
+  }
 
-      this.$socket.client.emit("check_menu_permission_change", {
-        groupId: this.loggedUser.group.id,
-        currentAccessMenu: this.accessMenu
-      });
+  @Socket()
+  grant_permission_change(groupId, accessPermissions) {
+    if (+this.loggedUser.group.id === groupId) {
+      Vue.ls.set("Access-Permission", accessPermissions);
+      this.setAbility(accessPermissions);
     }
   }
 
@@ -50,23 +55,6 @@ export default class App extends Vue {
 
     this.setAllMenu(menuTree);
   }
-
-  async __logout() {
-    this.$nprogress.start();
-
-    try {
-      await this.logOut();
-
-      return (window.location.href = `
-          ${window.location.protocol}//${window.location.hostname +
-        (window.location.port ? ":" + window.location.port : "")}/admin
-        `);
-
-      this.$nprogress.done();
-    } catch (error) {
-      this.$nprogress.done();
-    }
-  }
 }
 </script>
 

src/template/src/components/Admin/Group/Items/index.vue

@@ -4,13 +4,16 @@
       <div class="row mb-4">
         <div class="col-lg-6">
           <s-input :searchIn="searchInInfo" />
+          <a-button
+            class="ml-4"
+            type="dashed"
+            icon="reload"
+            @click.prevent="__init"
+            style="margin: 0 auto"
+          >Refresh</a-button>
         </div>
         <div class="col-lg-6 text-right">
-          <pagination
-            routePath="admin/group"
-            :options="pagination"
-            :total="total"
-          />
+          <pagination routePath="admin/group" :options="pagination" :total="total" />
         </div>
       </div>
       <a-table
@@ -23,26 +26,22 @@
         @change="onChange"
         :loading="loading"
       >
-        <a slot="_id" slot-scope="value" class="utils__link--underlined">
-          {{ value }}
-        </a>
+        <a slot="_id" slot-scope="value" class="utils__link--underlined">{{ value }}</a>
         <p slot="_name" slot-scope="value">{{ value }}</p>
         <a-tag
           slot="_screenName"
           slot-scope="record"
           :color="record.node.color"
-          >{{ record.node.screenName }}</a-tag
-        >
+        >{{ record.node.screenName }}</a-tag>
         <span slot="_actions" slot-scope="record">
           <Can I="grantPermissionGroup">
             <a-button
-              type="dashed"
+              type="primary"
               icon="safety-certificate"
               size="small"
               class="mr-2"
               @click="$bus.$emit('permissions.grant.show', record.node.id)"
-              >Grant permission</a-button
-            >
+            >Grant permission</a-button>
           </Can>
           <Can I="assignMenuGroup">
             <a-button
@@ -51,8 +50,7 @@
               size="small"
               class="mr-2"
               @click="$bus.$emit('menus.assign.show', record.node.id)"
-              >Assign menu</a-button
-            >
+            >Assign menu</a-button>
           </Can>
           <Can I="updateGroup">
             <a-button
@@ -61,8 +59,7 @@
               size="small"
               class="mr-2"
               @click="$bus.$emit('groups.edit.show', record.node.id)"
-              >Edit</a-button
-            >
+            >Edit</a-button>
           </Can>
           <Can I="deleteGroup">
             <d-button
@@ -77,11 +74,7 @@
       </a-table>
       <div class="row mt-4">
         <div class="col-lg-12 text-right">
-          <pagination
-            routePath="admin/group"
-            :options="pagination"
-            :total="total"
-          />
+          <pagination routePath="admin/group" :options="pagination" :total="total" />
         </div>
       </div>
     </Can>
@@ -101,6 +94,9 @@ import { State, Action } from "vuex-class";
   }
 })
 export default class GroupItems extends Vue {
+  @Watch("$store.state.rules") permissionChange() {
+    this.__init();
+  }
   @Watch("$route") _routeChange() {
     this.__init();
   }

src/template/src/components/Admin/Menu/Items/index.vue

@@ -7,14 +7,15 @@
             <template slot="description">
               - Click on
               <strong>Category name</strong> to modify selected category.
-              <br />- Right on <strong>Category name</strong> to
+              <br />- Right on
+              <strong>Category name</strong> to
               <strong class="text-primary">
                 <a-icon type="plus" />Add new Category
               </strong>
               inside selected category or
               <strong class="text-danger">
-                <a-icon type="delete" />Delete selected category </strong
-              >.
+                <a-icon type="delete" />Delete selected category
+              </strong>.
             </template>
           </a-alert>
           <a-tree
@@ -77,6 +78,12 @@ import MenuEditDrawer from "@/components/Admin/Menu/Edit/index.vue";
   }
 })
 export default class MenuItems extends Vue {
+  @Watch("$store.state.rules") permissionChange() {
+    this.__init();
+  }
+  @Watch("$route") _routeChange() {
+    this.__init();
+  }
   @Action("menus/fetchAll") fetchAll;
   @Action("menus/deleteOne") deleteOne;
   @State(state => state.menus.items) items;

src/template/src/components/Admin/Permission/Items/index.vue

@@ -4,13 +4,16 @@
       <div class="row mb-4">
         <div class="col-lg-6">
           <s-input :searchIn="searchInInfo" />
+          <a-button
+            class="ml-4"
+            type="dashed"
+            icon="reload"
+            @click.prevent="__init"
+            style="margin: 0 auto"
+          >Refresh</a-button>
         </div>
         <div class="col-lg-6 text-right">
-          <pagination
-            routePath="admin/permission"
-            :options="pagination"
-            :total="total"
-          />
+          <pagination routePath="admin/permission" :options="pagination" :total="total" />
         </div>
       </div>
       <a-table
@@ -23,9 +26,11 @@
         @change="onChange"
         :loading="loading"
       >
-        <a slot="_id" slot-scope="value" class="utils__link--underlined">{{
+        <a slot="_id" slot-scope="value" class="utils__link--underlined">
+          {{
           value
-        }}</a>
+          }}
+        </a>
         <span slot="_actions" slot-scope="record">
           <Can I="updatePermission">
             <a-button
@@ -34,26 +39,16 @@
               size="small"
               class="mr-2"
               @click="$bus.$emit('permissions.edit.show', record.node.id)"
-              >Edit</a-button
-            >
+            >Edit</a-button>
           </Can>
           <Can I="deletePermission">
-            <d-button
-              size="small"
-              type="link"
-              store="permissions"
-              :id="record.node.id"
-            ></d-button>
+            <d-button size="small" type="link" store="permissions" :id="record.node.id"></d-button>
           </Can>
         </span>
       </a-table>
       <div class="row mt-4">
         <div class="col-lg-12 text-right">
-          <pagination
-            routePath="admin/permission"
-            :options="pagination"
-            :total="total"
-          />
+          <pagination routePath="admin/permission" :options="pagination" :total="total" />
         </div>
       </div>
     </Can>
@@ -73,6 +68,9 @@ import { State, Action } from "vuex-class";
   }
 })
 export default class PermissionItems extends Vue {
+  @Watch("$store.state.rules") permissionChange() {
+    this.__init();
+  }
   @Watch("$route") _routeChange() {
     this.__init();
   }