Clone component b-collapse with prop auto-permission

uit.hotel.client/components/bootstrap/b-collapse.vue

@@ -0,0 +1,55 @@
+<template>
+    <b-collapse
+        v-if="isShow"
+        :id="id"
+        :visible="visible"
+        @input="$emit('input', $event)"
+    >
+        <slot />
+    </b-collapse>
+</template>
+<script lang="ts">
+import { Component, Prop, mixins, Vue } from 'nuxt-property-decorator';
+import { PermissionMixin, PermissionUnion } from '~/components/mixins';
+
+function isPermissionMixin(instance: Vue): instance is PermissionMixin {
+    return 'permission' in instance;
+}
+
+@Component({
+    name: 'b-collapse-',
+})
+export default class extends mixins<PermissionMixin>(PermissionMixin) {
+    @Prop({ default: false, type: Boolean })
+    visible!: boolean;
+
+    @Prop({ required: true, type: String, default: '' })
+    id!: string;
+
+    @Prop({ default: false, type: Boolean })
+    autoPermission!: boolean;
+
+    mounted() {
+        if (this.autoPermission === false) return;
+
+        const defaultSlot = this.$slots.default;
+        if (defaultSlot === undefined) return;
+
+        this.autoPermissionValue = defaultSlot.reduce<PermissionUnion[]>(
+            (output, current) => {
+                (() => {
+                    const child = current.componentInstance;
+                    if (child === undefined) return;
+                    if (!isPermissionMixin(child)) return;
+                    const permission = child.permission;
+                    if (typeof permission === 'boolean') return;
+
+                    output = output.concat(permission);
+                })();
+                return output;
+            },
+            [],
+        );
+    }
+}
+</script>

uit.hotel.client/components/layout/sidebar.vue

@@ -12,7 +12,11 @@
                 'ManageHiringRoom',
             ]"
         />
-        <b-collapse id="collapse_receptionist" v-model="showReceptionist">
+        <b-collapse-
+            id="collapse_receptionist"
+            v-model="showReceptionist"
+            auto-permission
+        >
             <b-nav-item-icon-
                 to="/receptionist/map"
                 icon="grid"
@@ -34,7 +38,7 @@
                 exact
                 :permission="['ManageHiringRoom']"
             />
-        </b-collapse>
+        </b-collapse->
         <b-nav-item-icon-
             v-b-toggle.collapse_business
             icon="chevron-down"
@@ -46,7 +50,11 @@
                 'ManageRate',
             ]"
         />
-        <b-collapse id="collapse_business" v-model="showBusiness">
+        <b-collapse-
+            id="collapse_business"
+            v-model="showBusiness"
+            auto-permission
+        >
             <b-nav-item-icon-
                 to="/business/bill"
                 icon="dollar-sign"
@@ -75,15 +83,19 @@
                 exact
                 :permission="['ManageRate']"
             />
-        </b-collapse>
+        </b-collapse->
         <b-nav-item-icon-
             v-b-toggle.collapse_personnel
             icon="chevron-down"
             text="Quản lý nhân sự"
             class="header-item"
             :permission="['ManagePosition', 'ManageEmployee']"
         />
-        <b-collapse id="collapse_personnel" v-model="showPersonnel">
+        <b-collapse-
+            id="collapse_personnel"
+            v-model="showPersonnel"
+            auto-permission
+        >
             <b-nav-item-icon-
                 to="/personnel/position"
                 icon="lock"
@@ -98,15 +110,15 @@
                 exact
                 :permission="['ManageEmployee']"
             />
-        </b-collapse>
+        </b-collapse->
         <b-nav-item-icon-
             v-b-toggle.collapse_manage
             icon="chevron-down"
             text="Cài đặt khách sạn"
             class="header-item"
             :permission="['ManageMap', 'ManagePatronKind']"
         />
-        <b-collapse id="collapse_manage" v-model="showManage">
+        <b-collapse- id="collapse_manage" v-model="showManage" auto-permission>
             <b-nav-item-icon-
                 to="/manage/floor-room"
                 icon="archive"
@@ -128,7 +140,7 @@
                 exact
                 :permission="['ManagePatronKind']"
             />
-        </b-collapse>
+        </b-collapse->
     </b-navbar-nav>
 </template>
 <script lang="ts">

uit.hotel.client/components/mixins/permission.ts

@@ -33,46 +33,46 @@ const PermissionInstance: PermissionType = {
     permissionManageMap: true,
 };
 
-type PermissionUnion = keyof PermissionType;
+export type PermissionUnion = keyof PermissionType;
 
 @Component
 export class PermissionMixin extends Vue {
     @(namespace('user').State)
-    employee!: UserLogin.Employee;
+    private employee!: UserLogin.Employee;
 
     @Prop({
         default: true,
         validator(value: boolean | string[]) {
             if (typeof value === 'boolean') return true;
-            else if (typeof value === 'object' && Array.isArray(value)) {
-                return value.every((key: string) => {
-                    const condition =
-                        key in PermissionInstance ||
-                        'permission' + key in PermissionInstance;
-                    if (!condition) {
-                        console.error(
-                            `[Permission warn]: String "${key}" is not a is not a valid prop for permission.\n`,
-                            `Expect key to be one of these types:`,
-                            Object.keys(PermissionInstance).map(k =>
-                                k.replace(/^permission/, ''),
-                            ),
-                        );
-                    }
-                    return condition;
-                });
-            }
-            return false;
+            else if (!Array.isArray(value)) return false;
+
+            return value.every((key: string) => {
+                const condition = 'permission' + key in PermissionInstance;
+                if (!condition) {
+                    console.error(
+                        `[Permission warn]: String "${key}" is not a is not a valid prop for permission.\n`,
+                        `Expect key to be one of these types:`,
+                        Object.keys(PermissionInstance).map(k =>
+                            k.replace(/^permission/, ''),
+                        ),
+                    );
+                }
+                return condition;
+            });
         },
     })
-    permission!: boolean | PermissionUnion[] | string[];
+    public permission!: boolean | PermissionUnion[];
+    protected autoPermissionValue: PermissionUnion[] | null = null;
 
-    get isShow() {
-        const { permission, employee } = this;
+    protected get isShow(): boolean {
+        const { permission, autoPermissionValue, employee } = this;
+        const keys =
+            autoPermissionValue !== null ? autoPermissionValue : permission;
 
         if (!employee) return true;
-        else if (typeof permission === 'boolean') return permission;
-        else if (permission === undefined) return false;
-        return permission.every((each: string | PermissionUnion) => {
+        else if (typeof keys === 'boolean') return keys;
+        else if (keys === undefined) return false;
+        return keys.every((each: string | PermissionUnion) => {
             const key = each; // if p is string
             return employee.position['permission' + key];
         });