Added Basic Role-Based Permissions, 40% done!

sethsandaru · Mar 11, 2021 · c252a10 · c252a10
1 parent 60775a1
commit c252a10
Show file tree

Hide file tree

Showing 11 changed files with 118 additions and 25 deletions.
diff --git a/src/components/FormBuilder.vue b/src/components/FormBuilder.vue
@@ -1,7 +1,10 @@
 <template>
     <div :class="[styles.CONTAINER.FLUID, 'form-padding', 'vue-form-builder']">
         <!-- top configuration -->
-        <FormConfiguration v-model="formData.formConfig" />
+        <FormConfiguration
+            :permissions="permissions"
+            v-model="formData.formConfig"
+        />
 
         <!-- form headline -->
         <div class="form-headline-container" v-show="formData.formConfig.isShowHeadline">
@@ -10,15 +13,20 @@
         </div>
 
         <!-- sections of the form -->
-        <SectionContainer v-for="(sectionData) in sortedSections"
-                          :section="sectionData"
-                          :rows="formData.rows"
-                          :controls="formData.controls"
-                          :key="sectionData.uniqueId"
+        <SectionContainer
+            v-for="(sectionData) in sortedSections"
+            :section="sectionData"
+            :rows="formData.rows"
+            :controls="formData.controls"
+            :key="sectionData.uniqueId"
+            :permissions="permissions"
         />
 
         <!-- below all -->
-        <AddSectionControl @addSectionNotify="addSection" />
+        <AddSectionControl
+            v-if="permissions.canAddSection"
+            @addSectionNotify="addSection"
+        />
 
         <!-- global stuff -->
         <GlobalSidebar
@@ -42,6 +50,7 @@
     import FormConfiguration from "@/views/builder/FormConfiguration";
     import GlobalSidebar from "@/views/builder/GlobalSidebar";
     import GlobalModal from "@/views/builder/GlobalModal";
+    import DefaultPermission from "@/configs/roles";
 
     export default {
         name: "FormBuilder",
@@ -53,6 +62,16 @@
             AddSectionControl
         },
         mixins: FormBuilderBusiness,
+
+        props: {
+            permissions: {
+                type: Object,
+                default: () => {
+                    return DefaultPermission
+                }
+            }
+        },
+
         data: () => ({
             formData: {
                 formConfig: {},

diff --git a/src/configs/roles.js b/src/configs/roles.js
@@ -0,0 +1,34 @@
+/**
+ * Roles of Form Builder
+ * @author Phat Tran
+ */
+
+export default {
+	// global
+	canEditFormConfigurations: true,
+
+	// sections
+	canAddSection: true,
+	canEditSection: true,
+	canDeleteSection: true,
+	canReOrderingSection: true,
+
+	// rows/tab
+	canAddRow: true,
+	canEditRow: true,
+	canDeleteRow: true,
+	canReOrderingRow: true,
+
+	// controls
+	canAddControl: true,
+	canEditControl: true,
+	canDeleteControl: true,
+	canReOrderingControl: true,
+
+	// control-inner
+	canUpdateControlBasicDetail: true,
+	canUpdateControlStyling: true,
+	canUpdateControlValidation: true,
+	canUpdateControlSpecialConfiguration: true,
+
+}
diff --git a/src/mixins/row-view-mixin.js b/src/mixins/row-view-mixin.js
@@ -37,7 +37,9 @@ const ROW_VIEW_MIXIN = {
         controls: {
             type: Object,
             required: true,
-        }
+        },
+
+        permissions: Object
     },
 
     computed: {

diff --git a/src/mixins/section-view-mixins.js b/src/mixins/section-view-mixins.js
@@ -21,6 +21,7 @@ const SECTION_VIEW_MIXINS = {
         section: Object,
         rows: Object,
         controls: Object,
+        permissions: Object
     },
 
     data: () => ({

diff --git a/src/views/builder/FormConfiguration.vue b/src/views/builder/FormConfiguration.vue
@@ -1,10 +1,13 @@
 <template>
     <div class="form-configuration-block pbottom-10">
-        <button :class="styles.BUTTON.PRIMARY" @click="open">
+        <button
+            :class="styles.BUTTON.PRIMARY"
+            @click="open"
+            :disabled="!permissions.canEditFormConfigurations"
+        >
             <span v-html="$form.getIcon('cog')"></span>
             <span>Form Configurations</span>
         </button>
-
     </div>
 </template>
 
@@ -21,7 +24,8 @@
         components: {SidebarFormConfiguration},
         mixins: [STYLE_INJECTION_MIXIN],
         props: {
-            value: Object
+            value: Object,
+            permissions: Object
         },
         model: {
             event: 'change',

diff --git a/src/views/builder/SectionContainer.vue b/src/views/builder/SectionContainer.vue
@@ -1,14 +1,20 @@
 <template>
     <div class="section-container" :class="{'active': isDoingConfiguration}">
-        <SectionNavigationBar :section="section"
-                              @active="setActive" />
+        <SectionNavigationBar
+            :section="section"
+            :permissions="permissions"
 
-        <component :is="sectionViewComponent"
-                   :section="section"
-                   :rows="rows"
-                   :controls="controls"
-                   :key="section.uniqueId" />
+            @active="setActive"
+        />
 
+        <component
+            :is="sectionViewComponent"
+            :section="section"
+            :rows="rows"
+            :controls="controls"
+            :key="section.uniqueId"
+            :permissions="permissions"
+        />
     </div>
 </template>
 
@@ -23,6 +29,7 @@
             section: Object,
             rows: Object,
             controls: Object,
+            permissions: Object
         },
         data: () => ({
             isDoingConfiguration: false

diff --git a/src/views/builder/SectionNavigationBar.vue b/src/views/builder/SectionNavigationBar.vue
@@ -5,24 +5,39 @@
                 v-if="preCustomButtonView"
                 :is="preCustomButtonView"
                 :section="section"
+                :permissions="permissions"
             ></component>
 
             <button :class="styles.BUTTON.PRIMARY"
                     title="Push Up"
                     @click="pushUp"
-                    v-html="$form.getIcon('arrowUp')"></button>
+                    v-html="$form.getIcon('arrowUp')"
+
+                    :disabled="!permissions.canReOrderingSection"
+            ></button>
 
             <button :class="styles.BUTTON.SECONDARY"
                     title="Push Down"
                     @click="pushDown"
-                    v-html="$form.getIcon('arrowDown')"></button>
+                    v-html="$form.getIcon('arrowDown')"
+
+                    :disabled="!permissions.canReOrderingSection"
+            ></button>
 
-            <button :class="styles.BUTTON.INFO" @click="openConfiguration">
+            <button
+                :class="styles.BUTTON.INFO"
+                @click="openConfiguration"
+                :disabled="!permissions.canEditSection"
+            >
                 <span v-html="$form.getIcon('cog')"></span>
                 <span>Configuration</span>
             </button>
 
-            <button :class="styles.BUTTON.DANGER" @click="deleteSection">
+            <button
+                :class="styles.BUTTON.DANGER"
+                @click="deleteSection"
+                :disabled="!permissions.canDeleteSection"
+            >
                 <span v-html="$form.getIcon('trash')"></span>
                 <span>Delete</span>
             </button>
@@ -31,6 +46,7 @@
                 v-if="postCustomButtonView"
                 :is="postCustomButtonView"
                 :section="section"
+                :permissions="permissions"
             ></component>
         </div>
     </div>
@@ -51,7 +67,8 @@
             section: {
                 type: Object,
                 required: true,
-            }
+            },
+            permissions: Object
         },
 
         computed: {

diff --git a/src/views/builder/row-views/TabContentRowView.vue b/src/views/builder/row-views/TabContentRowView.vue
@@ -30,6 +30,7 @@
 
         <!-- Add Control -->
         <AddControlToRowControl
+            v-if="permissions.canAddControl"
             :row="row"
         />
     </section>

diff --git a/src/views/builder/section-views/NormalSectionView.vue b/src/views/builder/section-views/NormalSectionView.vue
@@ -24,7 +24,10 @@
         </draggable>
 
         <!-- Add Control -->
-        <AddControlControl :section="section" />
+        <AddControlControl
+            v-if="permissions.canAddControl"
+            :section="section"
+        />
     </div>
 </template>
 

diff --git a/src/views/builder/section-views/TabSectionView.vue b/src/views/builder/section-views/TabSectionView.vue
@@ -49,6 +49,8 @@
                     :row="rows[rowId]"
                     :section="section"
                     :controls="controls"
+                    :permissions="permissions"
+
                     @delete-row="deleteRow"
                 />
             </div>

diff --git a/src/views/builder/section-views/ToggleableSectionView.vue b/src/views/builder/section-views/ToggleableSectionView.vue
@@ -47,7 +47,10 @@
                 </draggable>
 
                 <!-- Add More Control? -->
-                <AddControlControl :section="section" />
+                <AddControlControl
+                    v-if="permissions.canAddControl"
+                    :section="section"
+                />
             </div>
         </transition>