From 327cd2b886d282f766dc22e88601391c329bb511 Mon Sep 17 00:00:00 2001
From: saeid_01 <saeidkhakbazan@gmail.com>
Date: Sat, 27 Jul 2019 20:01:15 +0430
Subject: [PATCH] Role

---
 resources/js/User/components/Role/Add.vue  |  90 +++++++++++
 resources/js/User/components/Role/List.vue | 170 +++++++++++++++++++++
 2 files changed, 260 insertions(+)
 create mode 100644 resources/js/User/components/Role/Add.vue
 create mode 100644 resources/js/User/components/Role/List.vue

diff --git a/resources/js/User/components/Role/Add.vue b/resources/js/User/components/Role/Add.vue
new file mode 100644
index 0000000..433543c
--- /dev/null
+++ b/resources/js/User/components/Role/Add.vue
@@ -0,0 +1,90 @@
+<template>
+    <v-dialog v-model="$store.state.AddRole" width="70%" transition="slide-x-transition">
+        <v-card class="RTL">
+            <v-card-title class=" grey lighten-3" primary-title>
+                <WM-PartTitle class="WM-Margin-T-20" TitleFa=" ایجاد نقش جدید " TitleEn=" Define a new Role " color="cyan"></WM-PartTitle>
+            </v-card-title>
+
+            <v-card-text>
+                <v-layout row wrap class="WM-Section" style="border-right-color: #32c5d2;">
+                    <v-flex class="lg3 RTL text-lg-right">
+                        <div class="Step En" style="color:#32c5d2;"> 01 </div>
+                        <div class="Title">
+                            <div class="FA"> کاربران  </div>
+                            <div class="EN"> Users  </div>
+                        </div>
+                        <!-- <v-tooltip top color="black">
+                            <v-btn small slot="activator" fab color="cyan" dark style="float:left; margin-left:10px;"><v-icon dark>fas fa-plus</v-icon></v-btn>
+                            <span> افزودن نقش جدید </span>
+                        </v-tooltip> -->
+                        <!-- <v-switch style="float:left; margin-left:10px;" color="cyan" v-model="UserSwitch"></v-switch> -->
+                    </v-flex>
+                    <v-flex class="lg9">
+                        <v-layout row wrap class="WM-Margin-0">
+                            <v-flex class="lg6 WM-Flex RoleFlex">
+                                <v-card-text>
+                                    <v-text-field label=" نام نقش به فارسی " color="cyan" prepend-icon="fas fa-tag" ></v-text-field>
+                                </v-card-text>
+                            </v-flex>
+                            <v-flex class="lg6 WM-Flex RoleFlex">
+                                <v-card-text>
+                                    <v-text-field label=" Role Name - English " class="LTR" color="cyan" prepend-icon="fas fa-tag" ></v-text-field>
+                                </v-card-text>
+                            </v-flex>
+                        </v-layout>
+                        <v-layout row wrap class="WM-Margin-0">
+                            <v-flex class="lg4 WM-Flex RoleFlex">
+                                <v-switch color="cyan" v-model="UserAdd" label=" افزودن کاربر "></v-switch>
+                            </v-flex>
+                            <v-flex class="lg4 WM-Flex RoleFlex">
+                                <v-switch color="cyan" v-model="UserEdit" label=" ویرایش کاربر "></v-switch>
+                            </v-flex>
+                            <v-flex class="lg4 WM-Flex RoleFlex">
+                                <v-switch color="cyan" v-model="UserRemove" label=" حذف کاربر "></v-switch>
+                            </v-flex>
+                            <v-flex class="lg4 WM-Flex RoleFlex">
+                                <v-switch color="cyan" v-model="EditRoles" label=" ویرایش دسترسی ها "></v-switch>
+                            </v-flex>
+                            <v-flex class="lg4 WM-Flex RoleFlex">
+                                <v-switch color="cyan" v-model="Contact" label=" ارسال پیام کوتاه یا ایمیل "></v-switch>
+                            </v-flex>
+                            <v-flex class="lg4 WM-Flex RoleFlex">
+                                <v-switch color="cyan" v-model="DoTask" label=" قابلیت انجام وظیفه "></v-switch>
+                            </v-flex>
+                            <v-flex class="lg4 WM-Flex RoleFlex">
+                                <v-switch color="cyan" v-model="DefineTask" label=" قابلیت انجام وظیفه "></v-switch>
+                            </v-flex>
+                        </v-layout>
+                    </v-flex>
+                </v-layout>
+            </v-card-text>
+            <v-divider></v-divider>
+
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="cyan" depressed dark @click="$store.state.AddRole = false">
+                    <v-icon dark right>fas fa-plus</v-icon> افزودن نقش
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+
+</template>
+
+<script>
+
+export default {
+    props: {
+    },
+    data () {
+        return {
+            status: [
+                { name: ' بسته شده ', id: 1 },
+                { name: ' ویزیت اولیه ', id: 2 },
+                { name: ' انصراف داده ', id: 3 },
+            ],
+            UserSwitch: true,
+        }
+    }
+};
+</script>
diff --git a/resources/js/User/components/Role/List.vue b/resources/js/User/components/Role/List.vue
new file mode 100644
index 0000000..29df24d
--- /dev/null
+++ b/resources/js/User/components/Role/List.vue
@@ -0,0 +1,170 @@
+<template>
+    <v-dialog v-model="$store.state.UserRoles" width="70%" transition="slide-x-transition">
+        <v-card class="RTL">
+            <v-card-title class=" grey lighten-3" primary-title>
+                <WM-PartTitle class="WM-Margin-T-20" TitleFa=" دسترسی های کاربر " TitleEn=" User's Access " color="black"></WM-PartTitle>
+            </v-card-title>
+
+            <v-card-text>
+                <v-layout row wrap class="WM-Section" style="border-right-color: #32c5d2;">
+                    <v-flex class="lg3 RTL text-lg-right">
+                        <div class="Step En" style="color:#32c5d2;"> 01 </div>
+                        <div class="Title">
+                            <div class="FA"> کاربران  </div>
+                            <div class="EN"> Users  </div>
+                        </div>
+                        <v-tooltip top color="black">
+                            <v-btn small slot="activator" @click.native="$store.state.AddRole = true" fab color="cyan" dark style="float:left; margin-left:10px;"><v-icon dark>fas fa-plus</v-icon></v-btn>
+                            <span> افزودن نقش جدید در بخش مدیریت کاربران سیستم</span>
+                        </v-tooltip>
+                        <!-- <v-switch style="float:left; margin-left:10px;" color="cyan" v-model="UserSwitch"></v-switch> -->
+                    </v-flex>
+                    <v-flex class="lg9">
+                        <v-layout row wrap class="WM-Margin-0">
+                            <v-flex class="lg4 WM-Flex RoleFlex">
+                                <WM-Checkbox ItemText=" مدیر سطح 1 " ItemID="UserAdminL1"></WM-Checkbox>
+                                <v-tooltip bottom color="black">
+                                    <v-btn class="XS" style="margin:-7px 10px 0px 0px;" @click.native="$store.state.AddRole = true" slot="activator" outline fab color="black" dark><v-icon dark>fas fa-pencil-alt</v-icon></v-btn>
+                                    <span> ویرایش نقش </span>
+                                </v-tooltip>
+                            </v-flex>
+                            <v-flex class="lg4 WM-Flex RoleFlex">
+                                <WM-Checkbox ItemText=" مدیر سطح 2 " ItemID="UserAdminL2"></WM-Checkbox>
+                                <v-tooltip bottom color="black">
+                                    <v-btn class="XS" style="margin:-7px 10px 0px 0px;" @click.native="$store.state.AddRole = true" slot="activator" outline fab color="black" dark><v-icon dark>fas fa-pencil-alt</v-icon></v-btn>
+                                    <span> ویرایش نقش </span>
+                                </v-tooltip>
+                            </v-flex>
+                        </v-layout>
+                    </v-flex>
+                </v-layout>
+                <v-layout row wrap class="WM-Section" style="border-right-color: #ee3552;">
+                    <v-flex class="lg3 RTL text-lg-right">
+                        <div class="Step En" style="color:#ee3552;"> 02 </div>
+                        <div class="Title">
+                            <div class="FA"> مدیریت ارتباط با مشتری  </div>
+                            <div class="EN"> CRM  </div>
+                        </div>
+                        <v-tooltip top color="black">
+                            <v-btn small @click.native="$store.state.AddRole = true" slot="activator" fab color="red" dark style="float:left; margin-left:10px;"><v-icon dark>fas fa-plus</v-icon></v-btn>
+                            <span> افزودن نقش جدید در بخش مدیریت ارتباط با مشتری</span>
+                        </v-tooltip>
+                        <!-- <v-switch style="float:left; margin-left:10px;" color="red" v-model="UserSwitch"></v-switch> -->
+                    </v-flex>
+                    <v-flex class="lg9">
+                        <v-layout row wrap class="WM-Margin-0">
+                            <v-flex class="lg4 WM-Flex RoleFlex">
+                                <WM-Checkbox ItemText=" مدیر وظایف " ItemID="CRMTasksAdmin"></WM-Checkbox>
+                                <v-tooltip bottom color="black">
+                                    <v-btn class="XS" style="margin:-7px 10px 0px 0px;" @click.native="$store.state.AddRole = true" slot="activator" outline fab color="black" dark><v-icon dark>fas fa-pencil-alt</v-icon></v-btn>
+                                    <span> ویرایش نقش </span>
+                                </v-tooltip>
+                            </v-flex>
+                            <v-flex class="lg4 WM-Flex RoleFlex">
+                                <WM-Checkbox ItemText=" مدیر مشتریان " ItemID="CRMClientsAdmin"></WM-Checkbox>
+                                <v-tooltip bottom color="black">
+                                    <v-btn class="XS" style="margin:-7px 10px 0px 0px;" @click.native="$store.state.AddRole = true" slot="activator" outline fab color="black" dark><v-icon dark>fas fa-pencil-alt</v-icon></v-btn>
+                                    <span> ویرایش نقش </span>
+                                </v-tooltip>
+                            </v-flex>
+                            <v-flex class="lg4 WM-Flex RoleFlex">
+                                <WM-Checkbox ItemText=" مدیر رویدادها " ItemID="CRMClientsAdmin"></WM-Checkbox>
+                                <v-tooltip bottom color="black">
+                                    <v-btn class="XS" style="margin:-7px 10px 0px 0px;" @click.native="$store.state.AddRole = true" slot="activator" outline fab color="black" dark><v-icon dark>fas fa-pencil-alt</v-icon></v-btn>
+                                    <span> ویرایش نقش </span>
+                                </v-tooltip>
+                            </v-flex>
+                            <v-flex class="lg4 WM-Flex RoleFlex">
+                                <WM-Checkbox ItemText=" مدیر تراکنش ها " ItemID="CRMClientsAdmin"></WM-Checkbox>
+                                <v-tooltip bottom color="black">
+                                    <v-btn class="XS" style="margin:-7px 10px 0px 0px;" @click.native="$store.state.AddRole = true" slot="activator" outline fab color="black" dark><v-icon dark>fas fa-pencil-alt</v-icon></v-btn>
+                                    <span> ویرایش نقش </span>
+                                </v-tooltip>
+                            </v-flex>
+                        </v-layout>
+                    </v-flex>
+                </v-layout>
+                <v-layout row wrap class="WM-Section" style="border-right-color: #FF6B57;">
+                    <v-flex class="lg3 RTL text-lg-right">
+                        <div class="Step En" style="color:#FF6B57;"> 03 </div>
+                        <div class="Title">
+                            <div class="FA"> فروشگاه  </div>
+                            <div class="EN"> Store  </div>
+                        </div>
+                        <v-tooltip top color="black">
+                            <v-btn small slot="activator" fab color="orange" dark style="float:left; margin-left:10px;"><v-icon dark>fas fa-plus</v-icon></v-btn>
+                            <span> افزودن نقش جدید در بخش فروشگاه </span>
+                        </v-tooltip>
+                        <!-- <v-switch style="float:left; margin-left:10px;" color="orange" v-model="UserSwitch"></v-switch> -->
+                    </v-flex>
+                    <v-flex class="lg9">
+                        <v-layout row wrap class="WM-Margin-0">
+                            <v-flex class="lg4 WM-Flex RoleFlex">
+                                <WM-Checkbox ItemText=" مدیر محصولات " ItemID="StoreProducts"></WM-Checkbox>
+                                <v-tooltip bottom color="black">
+                                    <v-btn class="XS" style="margin:-7px 10px 0px 0px;" @click.native="$store.state.AddRole = true" slot="activator" outline fab color="black" dark><v-icon dark>fas fa-pencil-alt</v-icon></v-btn>
+                                    <span> ویرایش نقش </span>
+                                </v-tooltip>
+                            </v-flex>
+                            <v-flex class="lg4 WM-Flex RoleFlex">
+                                <WM-Checkbox ItemText=" مدیر تخفیف ها " ItemID="StoreProducts"></WM-Checkbox>
+                                <v-tooltip bottom color="black">
+                                    <v-btn class="XS" style="margin:-7px 10px 0px 0px;" @click.native="$store.state.AddRole = true" slot="activator" outline fab color="black" dark><v-icon dark>fas fa-pencil-alt</v-icon></v-btn>
+                                    <span> ویرایش نقش </span>
+                                </v-tooltip>
+                            </v-flex>
+                            <v-flex class="lg4 WM-Flex RoleFlex">
+                                <WM-Checkbox ItemText=" مدیر سفارشات " ItemID="StoreProducts"></WM-Checkbox>
+                                <v-tooltip bottom color="black">
+                                    <v-btn class="XS" style="margin:-7px 10px 0px 0px;" @click.native="$store.state.AddRole = true" slot="activator" outline fab color="black" dark><v-icon dark>fas fa-pencil-alt</v-icon></v-btn>
+                                    <span> ویرایش نقش </span>
+                                </v-tooltip>
+                            </v-flex>
+                            <v-flex class="lg4 WM-Flex RoleFlex">
+                                <WM-Checkbox ItemText=" مدیر فروش های ویژه " ItemID="StoreProducts"></WM-Checkbox>
+                                <v-tooltip bottom color="black">
+                                    <v-btn class="XS" style="margin:-7px 10px 0px 0px;" @click.native="$store.state.AddRole = true" slot="activator" outline fab color="black" dark><v-icon dark>fas fa-pencil-alt</v-icon></v-btn>
+                                    <span> ویرایش نقش </span>
+                                </v-tooltip>
+                            </v-flex>
+                        </v-layout>
+                    </v-flex>
+                </v-layout>
+            </v-card-text>
+            <v-divider></v-divider>
+
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="black" depressed dark @click="$store.state.UserRoles = false">
+                    <v-icon dark right>fas fa-check</v-icon> تایید دسترسی ها
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+
+</template>
+
+<script>
+
+export default {
+    props: {
+    },
+    data () {
+        return {
+            status: [
+                { name: ' بسته شده ', id: 1 },
+                { name: ' ویزیت اولیه ', id: 2 },
+                { name: ' انصراف داده ', id: 3 },
+            ],
+            UserSwitch: true,
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+    .RoleFlex {
+        height: 45px;
+        align-items: center;
+    }
+</style>
+