From 9de6eaa228f6332c9b939b126990461e072a58a3 Mon Sep 17 00:00:00 2001
From: sajjad <sajjad.t.dev@gmail.com>
Date: Tue, 29 Mar 2022 16:29:39 +0430
Subject: [PATCH] fix

---
 src/assets/anonymous.png                       | Bin 0 -> 3167 bytes
 src/components/Users/Item.vue                  |  17 +++++++++++++----
 src/components/Users/Items.vue                 |  12 +++++-------
 .../Users/Modals/ChangeRoleModal.vue           |   9 ++++-----
 src/components/Users/Modals/Detail.vue         |   2 +-
 src/components/Users/Modals/FiltersModal.vue   |   8 +++++---
 6 files changed, 28 insertions(+), 20 deletions(-)
 create mode 100644 src/assets/anonymous.png

diff --git a/src/assets/anonymous.png b/src/assets/anonymous.png
new file mode 100644
index 0000000000000000000000000000000000000000..eef8ac0a69c7ff0836e7d5b8acdcaff6f9105600
GIT binary patch
literal 3167
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
FV1jfl^+W&w

literal 0
HcmV?d00001

diff --git a/src/components/Users/Item.vue b/src/components/Users/Item.vue
index b947f13..0a4115d 100644
--- a/src/components/Users/Item.vue
+++ b/src/components/Users/Item.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="user__card">
     <v-row>
-      <v-col cols="3">
+      <v-col cols="3" @click="openUserDetailModal">
         <div class="d-flex align-center h-100" style="overflow: hidden">
           <div style="line-height: 14px">
             <div class="user__name wa__f__m__eb">
@@ -43,7 +43,7 @@
           <RectangleButton
             height="35"
             width="48"
-            class="ml-1 custom-btn"   
+            class="ml-1 custom-btn"
             icon="WMi-gold-medal"
             @click="chageRole"
             v-if="role === 'admin'"
@@ -73,7 +73,7 @@
   </div>
 </template>
 <script>
-import { mapActions } from "vuex";
+import { mapActions, mapGetters } from "vuex";
 import { UserStorage } from "@/utils/storage";
 import toast from "@/utils/toast";
 export default {
@@ -85,8 +85,11 @@ export default {
   data: () => ({
     role: UserStorage.getRole() ? UserStorage.getRole() : null,
   }),
+  computed: {
+    ...mapGetters("users", ["getUser", "getRoles"]),
+  },
   methods: {
-    ...mapActions("users", ["deleteUser"]),
+    ...mapActions("users", ["deleteUser", "loadUser"]),
     removeUser(id) {
       toast.question("Are sure delete User?", "Delete User", () => {
         this.deleteUser(id);
@@ -95,10 +98,16 @@ export default {
     chageRole() {
       this.$emit("userId", this.user.id);
       // let role = this.user.userRoles.map((role) => role.id);
+      // console.log(this.user.role_id ? this.user.role_id : null);
       this.$_openModal("changeRole", {
         role: this.user.role_id ? this.user.role_id : null,
+        roles: this.getRoles,
       });
     },
+    async openUserDetailModal() {
+      await this.loadUser(this.user.id);
+      this.$_openModal("user_detail", { data: this.getUser });
+    },
   },
 };
 </script>
diff --git a/src/components/Users/Items.vue b/src/components/Users/Items.vue
index 6e05765..b9e79cc 100644
--- a/src/components/Users/Items.vue
+++ b/src/components/Users/Items.vue
@@ -24,7 +24,7 @@
               height="54"
               :text-mode="true"
               :text="getFilterCount ? getFilterCount : '0'"
-              @click="$_openModal('filters')"
+              @click="$_openModal('filters', { roles: getRoles })"
             />
           </div>
         </div>
@@ -54,15 +54,11 @@
       </div> -->
     </main-back>
     <div class="text-center">
-      <ChangeRoleModal
-        :allRoles="getRoles"
-        :userId="id"
-        v-if="isModal('modal_changeRole')"
-      /><FiltersModal
+      <ChangeRoleModal :userId="id" v-if="isModal('modal_changeRole')" /><FiltersModal
         @filter="load"
-        :allRoles="getRoles"
         v-if="isModal('modal_filters')"
       />
+      <UserDetailModal v-if="isModal('modal_user_detail')" />
     </div>
   </div>
 </template>
@@ -70,6 +66,7 @@
 import SectionTitle from "../Global/Section/SectionTitle.vue";
 import ChangeRoleModal from "./Modals/ChangeRoleModal.vue";
 import FiltersModal from "./Modals/FiltersModal.vue";
+import UserDetailModal from "./Modals/Detail.vue";
 import UserItem from "./Item.vue";
 import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
 import { UserStorage } from "@/utils/storage";
@@ -80,6 +77,7 @@ export default {
     UserItem,
     ChangeRoleModal,
     FiltersModal,
+    UserDetailModal,
   },
   data: () => ({
     role: UserStorage.getRole() ? UserStorage.getRole() : null,
diff --git a/src/components/Users/Modals/ChangeRoleModal.vue b/src/components/Users/Modals/ChangeRoleModal.vue
index 9d7d9b3..9ad9870 100644
--- a/src/components/Users/Modals/ChangeRoleModal.vue
+++ b/src/components/Users/Modals/ChangeRoleModal.vue
@@ -11,7 +11,7 @@
       </div>
       <v-item-group class="mt-10 mb-16" mandatory v-model="role_id" @change="change">
         <v-row>
-          <v-col cols="12" v-for="(role, i) in allRoles" :key="i" class="py-1">
+          <v-col cols="12" v-for="(role, i) in roles" :key="i" class="py-1">
             <v-item v-slot="{ active, toggle }" :value="role.id">
               <main-back :social="true">
                 <v-card
@@ -60,15 +60,13 @@ export default {
   name: "modal_changeRole",
   components: { SectionTitle },
   props: {
-    allRoles: {
-      type: Array,
-    },
     userId: {},
   },
   data: () => ({
     role_id: null,
     currectRoleId: null,
     changeRoleRequestLoading: false,
+    roles: null,
   }),
   computed: {
     form() {
@@ -77,7 +75,8 @@ export default {
   },
   methods: {
     ...mapActions("users", ["updateRole"]),
-    openModal({ role }) {
+    openModal({ role, roles }) {
+      this.roles = { ...roles };
       this.currectRoleId = role ? role : 0;
       this.role_id = role ? role : 0;
     },
diff --git a/src/components/Users/Modals/Detail.vue b/src/components/Users/Modals/Detail.vue
index 6b495ae..57642e1 100644
--- a/src/components/Users/Modals/Detail.vue
+++ b/src/components/Users/Modals/Detail.vue
@@ -18,7 +18,7 @@
           <v-col cols="4">
             <img
               class="user__img w-100"
-              :src="user.profile ? user.profile : 'https://via.placeholder.com/1'"
+              :src="user.profile ? user.profile : require('@Assets/anonymous.png')"
               alt="user image"
             />
           </v-col>
diff --git a/src/components/Users/Modals/FiltersModal.vue b/src/components/Users/Modals/FiltersModal.vue
index 130f14f..38f0f98 100644
--- a/src/components/Users/Modals/FiltersModal.vue
+++ b/src/components/Users/Modals/FiltersModal.vue
@@ -4,6 +4,7 @@
     transition="slide-x-transition"
     tag="vee-form"
     @submit="filterUser"
+    @open="openModal"
   >
     <template #header>
       <div class="close__modal">
@@ -110,16 +111,17 @@ export default {
   data: () => ({
     filter: cloneDeep(defaultFilter),
     role: UserStorage.getRole() ? UserStorage.getRole() : null,
+    allRoles: null,
   }),
-  props: {
-    allRoles: {},
-  },
   computed: {
     ...mapGetters("users", ["getFilters"]),
   },
   methods: {
     ...mapMutations("users", ["SET_FILTER_USER", "SET_IS_FILTERED_USER"]),
     // ...mapActions("users", ["laodRoles"]),
+    openModal({ roles }) {
+      this.allRoles = roles;
+    },
     filterUser() {
       this.SET_IS_FILTERED_USER(true);
       this.SET_FILTER_USER(this.filter);