{"version":3,"sources":["webpack:///./src/views/user/Users.vue","webpack:///./src/views/user/modals/UserDetail.vue","webpack:///./src/types/UserModel.ts","webpack:///./src/views/user/modals/UserDetail.vue?fa33","webpack:///./src/views/user/modals/UserDetail.vue?a1e0","webpack:///./src/views/user/Users.vue?1f8f","webpack:///./src/views/user/Users.vue?10b2","webpack:///./src/views/user/modals/UserDetail.vue?a448","webpack:///./src/views/user/modals/UserDetail.vue?9799","webpack:///./src/views/user/Users.vue?6db4"],"names":["class","style","align","id","search","searchValue","placeholder","href","data-bs-toggle","data-bs-target","userDetail","data","pagedTableDate","prop","label","width","title","handleEdit","scope","row","handleDelete","layout","page-size","pageSize","total","users","length","setPage","user","selectedUser","roles","updateUser","reloadUsers","getUsers","tabindex","aria-hidden","data-bs-dismiss","src","model","userData","ref","name","type","email","password","confirmPassword","role","index","key","value","submit","loading","User","components","props","Function","default","emits","emit","formRef","editUser","formData","ApiService","setHeader","update","then","catch","response","console","log","fire","text","icon","buttonsStyling","confirmButtonText","customClass","confirmButton","post","errorMessage","userDetailCancelBtn","document","getElementById","click","render","__scopeId","UserDetail","getRoles","get","errors","page","pageValue","filter","toLowerCase","includes","slice","userDetailBtn","find","x","confirm","delete","val"],"mappings":"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","file":"js/chunk-35b89a54.8cda8310.js","sourcesContent":["<template>\r\n  <div class=\"d-flex flex-stack\" style=\"padding-bottom:10px;\">\r\n    <div class=\"page-title d-flex align-items-center me-3 flex-wrap mb-5 mb-lg-0 lh-1\">\r\n    </div>\r\n    <div class=\"col-md-8\" align=\"right\">\r\n      <div class=\"me-4\">\r\n        <el-input\r\n            v-model=\"search.searchValue\"\r\n            placeholder=\"Type to search\"\r\n            class=\"col-md-8\"\r\n            style=\"padding-right:10px;\"/>\r\n        <a\r\n            href=\"#\"\r\n            data-bs-toggle=\"modal\"\r\n            data-bs-target=\"#modal_user_detail\"\r\n            id=\"user_detail_button\"\r\n            style=\"display:none\"\r\n        ></a>\r\n        <button class=\"btn btn-sm btn-primary\" v-on:click=\"userDetail({id:0})\" >\r\n            Create new user\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!--begin::details View-->\r\n  <div class=\"card mb-5 mb-xl-10\" id=\"student_list\">\r\n    <el-table :data=\"pagedTableDate\" style=\"width: 100%\">\r\n      <el-table-column prop=\"name\" label=\"name\"></el-table-column>\r\n      <el-table-column prop=\"email\" label=\"email\"></el-table-column>\r\n      <el-table-column prop=\"role\" label=\"role\"></el-table-column>\r\n      <el-table-column prop=\"operation\" label=\"\" width=\"180\">\r\n        <template v-slot=\"scope\">\r\n            <button class=\"btn btn-sm btn-success\" title=\"Delete\" \r\n            @click=\"handleEdit(scope.row)\" style=\"margin-right:5px;\">Edit</button>        \r\n            <button class=\"btn btn-sm btn-danger\" title=\"Delete\" \r\n            @click=\"handleDelete(scope.row)\">Delete</button>\r\n        </template>\r\n      </el-table-column>     \r\n    </el-table>\r\n    <div align=\"right\">\r\n      <el-pagination layout=\"prev, pager, next\" v-model:page-size=\"pageSize\" :total=\"users.length\" @current-change=\"setPage\"></el-pagination>\r\n    </div>\r\n  </div>\r\n  <div v-if=\"roles\">\r\n    <UserDetail \r\n        :user=\"selectedUser\"\r\n        :roles=\"roles\"\r\n        @updateUser=\"updateUser\"\r\n        :reloadUsers=\"getUsers\" />\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent, onMounted, computed, ref, reactive, onBeforeMount } from \"vue\";\r\nimport { setCurrentPageBreadcrumbs } from \"@/core/helpers/breadcrumb\";\r\nimport ApiService from \"@/core/services/ApiService\";\r\nimport UserDetail from \"@/views/user/modals/UserDetail.vue\"\r\nimport { User } from \"@/types/UserModel\";\r\nimport { ElMessageBox } from \"element-plus\";\r\nimport Swal from \"sweetalert2\";\r\n\r\nexport default defineComponent({\r\n  name: \"user-list\",\r\n  components: {\r\n      UserDetail\r\n  },\r\n  setup() {\r\n    const users = ref<any>([]);;\r\n    const selectedUser = ref({} as User);\r\n    const roles = ref<any>([]);\r\n\r\n    const getRoles = async() =>{\r\n        ApiService.setHeader(); \r\n        await ApiService.get(\"user/roles\").then(({data})=>{\r\n            roles.value = data.data;\r\n        })\r\n    }\r\n\r\n    const getUsers = async () =>  {\r\n        ApiService.setHeader();         \r\n        ApiService.get(\"user\")\r\n            .then(({ data }) => {\r\n                users.value = data.data;\r\n            })\r\n            .catch(({ response }) => {\r\n                console.log('getUsers error => '+response.data.errors);                    \r\n            });\r\n    }\r\n\r\n    const pageSize = 15;\r\n    let page = reactive({pageValue : 1});\r\n\r\n    const pagedTableDate = computed(()=>{\r\n      return users.value.filter(data => !search \r\n                                || data.name.toLowerCase().includes(search.searchValue.toLowerCase())\r\n                                || data.email.toLowerCase().includes(search.searchValue.toLowerCase())\r\n                                || data.role?.toLowerCase().includes(search.searchValue.toLowerCase()))\r\n                            .slice(pageSize * page.pageValue - pageSize, pageSize * page.pageValue);\r\n     })\r\n\r\n    const search = reactive({searchValue : ''});\r\n\r\n    const userDetail = (user) =>{\r\n        selectedUser.value = user;\r\n        let userDetailBtn = document.getElementById('user_detail_button');\r\n        userDetailBtn?.click();\r\n    }\r\n\r\n    const updateUser = (user) =>{\r\n        users.value.find(x=> x.id == user.id)[0] = user;\r\n    }\r\n\r\n    const handleEdit = (row) => {\r\n        userDetail(row)\r\n    };\r\n\r\n    const handleDelete = (row) => {\r\n      ElMessageBox.confirm('Are you sure to delete this user?')\r\n            .then(() => {\r\n                ApiService.setHeader();\r\n                ApiService.delete(\"user/\"+row.id)\r\n                    .then(() => {\r\n                        Swal.fire({\r\n                            text: \"user is deleted successfully\",\r\n                            icon: \"success\",\r\n                            buttonsStyling: false,  \r\n                            confirmButtonText: \"Ok, got it!\",\r\n                            customClass: {\r\n                                confirmButton: \"btn btn-primary\",\r\n                            },\r\n                            })\r\n                            .then(() => {\r\n                                users.value = users.value.filter(x=>x.id != row.id);\r\n                            });\r\n                    })\r\n                    .catch(({ response }) => {\r\n                        Swal.fire({\r\n                        text: \"Failed to delete the assessment. \"+response.data.errors,\r\n                        icon: \"error\",\r\n                        buttonsStyling: false,\r\n                        confirmButtonText: \"Ok, got it!\",\r\n                        customClass: {\r\n                            confirmButton: \"btn btn-primary\",\r\n                        },\r\n                        })\r\n                    });\r\n            });\r\n    };\r\n\r\n    const setPage = (val) => {\r\n      page.pageValue = val;\r\n    }\r\n\r\n    onBeforeMount(async() =>{\r\n        await getRoles();\r\n        await getUsers();\r\n    })\r\n\r\n    onMounted(() => {\r\n      setCurrentPageBreadcrumbs(\"User List\", [\"User\"]);\r\n    });\r\n\r\n    return {\r\n      handleEdit,\r\n      handleDelete,\r\n      setPage,\r\n      userDetail,\r\n      users,\r\n      pagedTableDate,\r\n      pageSize,\r\n      search,\r\n      roles,\r\n      selectedUser,\r\n      updateUser,\r\n      getUsers\r\n    };\r\n  },\r\n});\r\n</script>\r\n\r\n<style scoped>\r\n  .el-table__row{\r\n    cursor:pointer;\r\n  }\r\n</style>\r\n\r\n","<template>\r\n  <div\r\n    class=\"modal fade\"\r\n    id=\"modal_user_detail\"\r\n    tabindex=\"-1\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <div class=\"modal-dialog modal-dialog-centered mw-1000px\">\r\n      <div class=\"modal-content\">\r\n        <div class=\"modal-header\">\r\n            <h2>\r\n                <span v-if=\"user.id===0\" >Create</span>\r\n                <span v-else>Edit</span> user\r\n            </h2>\r\n\r\n          <div\r\n            class=\"btn btn-sm btn-icon btn-active-color-primary\"\r\n            data-bs-dismiss=\"modal\"\r\n          >\r\n            <span class=\"svg-icon svg-icon-1\">\r\n              <inline-svg src=\"/media/icons/duotune/arrows/arr061.svg\" />\r\n            </span>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"modal-body py-lg-10 px-lg-10\">\r\n          <el-form\r\n            id=\"edit_invoice_form\"\r\n            :model=\"userData\"\r\n            ref=\"formRef\"\r\n            class=\"form\"\r\n          >\r\n            <div class=\"row mb-6\">\r\n              <label\r\n                class=\"d-flex align-items-center fs-5 fw-bold mb-2 col-lg-3\"\r\n              >\r\n                <span>Name</span>\r\n              </label>\r\n              <div class=\"col-lg-9\">\r\n                <el-form-item prop=\"name\">\r\n                <input\r\n                    v-model=\"userData.name\"\r\n                    style=\"width:100%;\"\r\n                    class=\"form-control form-control-lg form-control-solid\"\r\n                />\r\n                </el-form-item>\r\n              </div>\r\n            </div>\r\n            <div class=\"row mb-6\">\r\n              <label\r\n                class=\"d-flex align-items-center fs-5 fw-bold mb-2 col-lg-3\"\r\n              >\r\n                <span>Email</span>\r\n              </label>\r\n              <div class=\"col-lg-9\">\r\n                <el-form-item prop=\"email\">\r\n                <input\r\n                    v-model=\"userData.email\"\r\n                    type=\"email\"\r\n                    style=\"width:100%;\"\r\n                    class=\"form-control form-control-lg form-control-solid\"\r\n                />\r\n                </el-form-item>\r\n              </div>\r\n            </div>\r\n            <div class=\"row mb-6\">\r\n              <label\r\n                class=\"d-flex align-items-center fs-5 fw-bold mb-2 col-lg-3\"\r\n              >\r\n                <span>Password</span>\r\n              </label>\r\n              <div class=\"col-lg-9\">\r\n                <el-form-item prop=\"password\">\r\n                <input\r\n                    v-model=\"userData.password\"\r\n                    type=\"password\"\r\n                    style=\"width:100%;\"\r\n                    class=\"form-control form-control-lg form-control-solid\"\r\n                />\r\n                </el-form-item>\r\n              </div>\r\n            </div>\r\n            <div class=\"row mb-6\">\r\n              <label\r\n                class=\"d-flex align-items-center fs-5 fw-bold mb-2 col-lg-3\"\r\n              >\r\n                <span>Confirm Password</span>\r\n              </label>\r\n              <div class=\"col-lg-9\">\r\n                <el-form-item prop=\"password\">\r\n                <input\r\n                    v-model=\"confirmPassword\"\r\n                    type=\"password\"\r\n                    style=\"width:100%;\"\r\n                    class=\"form-control form-control-lg form-control-solid\"\r\n                />\r\n                </el-form-item>\r\n              </div>\r\n            </div>\r\n            <div class=\"row mb-6\">\r\n              <label\r\n                class=\"d-flex align-items-center fs-5 fw-bold mb-2 col-lg-3\"\r\n              >\r\n                <span>Role</span>\r\n              </label>\r\n              <div class=\"col-lg-9\">\r\n                <el-form-item prop=\"name\">\r\n                <select\r\n                  name=\"role\"\r\n                  class=\"form-select form-select-solid form-select-lg fw-bold\"\r\n                  v-model=\"userData.role\"\r\n                >\r\n                  <option v-for=\"(role, index) in roles\" :key=\"index\" :value=\"role\">\r\n                    {{role}}\r\n                  </option>\r\n                </select>\r\n                </el-form-item>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"text-center\">\r\n              <button\r\n                id=\"kt_modal_new_target_cancel\"\r\n                class=\"btn btn-white me-3\"\r\n                data-bs-dismiss=\"modal\"\r\n              >\r\n                Cancel\r\n              </button>\r\n\r\n              <el-button type=\"primary\" @click=\"submit()\" :loading=\"loading\">\r\n                {{ loading ? \"Please wait...\" : \"Submit\" }}\r\n              </el-button>\r\n            </div>\r\n            </el-form>\r\n          </div>\r\n        </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<style lang=\"scss\" scoped>\r\n.el-input--suffix .el-input__inner {\r\n  background-color: #f5f8fa;\r\n}\r\n\r\n.el-input__inner {\r\n  background-color: #f5f8fa;\r\n}\r\n</style>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent, ref, watch } from \"vue\";\r\nimport Swal from \"sweetalert2/dist/sweetalert2.js\";\r\nimport ApiService from \"@/core/services/ApiService\";\r\nimport { User } from \"@/types/UserModel\";\r\n\r\nexport default defineComponent({\r\n  name: \"user-detail-modal\",\r\n  components: {\r\n  },\r\n  props:{\r\n    user : User,\r\n    roles : [],\r\n    reloadUsers: {\r\n      type:Function,\r\n      default: () => ({}),\r\n    }, \r\n  },\r\n  emits:['updateUser'],\r\n  setup(props, {emit}) {\r\n    const userData = ref({} as any);\r\n    const formRef = ref<null | HTMLFormElement>(null);\r\n    const loading = ref<boolean>(false);\r\n    const confirmPassword = ref('');\r\n\r\n    watch(() => props.user, async()=>{\r\n        userData.value = props.user;\r\n    });\r\n\r\n    const editUser = async (formData) => {\r\n        ApiService.setHeader();\r\n        if(userData.value && userData.value.id !==0)\r\n        {\r\n            ApiService.update(\"user\",userData.value.id, formData)\r\n                .then(()=>{\r\n                    userData.value.password= '';\r\n                    confirmPassword.value = '';\r\n                    emit('updateUser', userData);\r\n                })\r\n                .catch(({ response }) => {\r\n                    loading.value = false;\r\n                    console.log(response);\r\n                    Swal.fire({\r\n                    text: \"Failed to edit User\",\r\n                    icon: \"error\",\r\n                    buttonsStyling: false,\r\n                    confirmButtonText: \"Ok, got it!\",\r\n                    customClass: {\r\n                        confirmButton: \"btn btn-primary\",\r\n                    },\r\n                    });\r\n                });\r\n        }\r\n        else\r\n        {\r\n          ApiService.post(\"user\", formData)\r\n                .then(()=> { props.reloadUsers();})\r\n                .catch(({ response }) => {\r\n                    loading.value = false;\r\n                    console.log(response);\r\n                    Swal.fire({\r\n                    text: \"Failed to create the new user\",\r\n                    icon: \"error\",\r\n                    buttonsStyling: false,\r\n                    confirmButtonText: \"Ok, got it!\",\r\n                    customClass: {\r\n                        confirmButton: \"btn btn-primary\",\r\n                    },\r\n                    });\r\n                });\r\n        }\r\n    }\r\n\r\n    const submit = () => {\r\n        let errorMessage = '';\r\n        if(!userData.value.name || !userData.value.email ){\r\n            errorMessage = \"Please fill out all required fields\";\r\n        }\r\n        else if((userData.value.id > 0 && userData.value.password && userData.value.password != confirmPassword.value)\r\n                ||(userData.value.id === 0 && userData.value.password != confirmPassword.value)){\r\n            errorMessage = 'password and confirmed password are not matched';\r\n        }\r\n        else if(userData.value.id > 0 && !userData.value.password){\r\n            delete userData.value.password;\r\n        }\r\n\r\n        if(errorMessage !== ''){\r\n            Swal.fire({\r\n                text: errorMessage,\r\n                icon: \"error\",\r\n                buttonsStyling: false,\r\n                confirmButtonText: \"Ok, got it!\",\r\n                customClass: {\r\n                confirmButton: \"btn btn-primary\",\r\n                },\r\n            });\r\n\r\n            return false;\r\n        }\r\n        else{\r\n            loading.value = true;\r\n            editUser(userData.value).then(() => {\r\n                Swal.fire({\r\n                    text: \"User change successfully submitted!\",\r\n                    icon: \"success\",\r\n                    buttonsStyling: false,\r\n                    confirmButtonText: \"Ok, got it!\",\r\n                    customClass: {\r\n                    confirmButton: \"btn btn-primary\",\r\n                    },\r\n                }).then(() => {\r\n                    let userDetailCancelBtn = document.getElementById('kt_modal_new_target_cancel');\r\n                    userDetailCancelBtn?.click();\r\n                });\r\n            });\r\n        }\r\n    };\r\n\r\n    return {\r\n      userData,\r\n      submit,\r\n      loading,\r\n      formRef,\r\n      confirmPassword\r\n    };\r\n  },\r\n});\r\n</script>\r\n\r\n<style scoped>\r\n* >>> .el-form-item {\r\n  margin-bottom: 0px;\r\n}\r\n\r\n* >>> .el-table td {\r\n    padding: 5px;\r\n    font-size: 13px;\r\n}\r\n\r\n* >>> .el-table th {\r\n    padding: 5px;\r\n    font-size: 13px;\r\n    line-height: 20px;\r\n}\r\n</style>","export class User{\r\n    id : number;\r\n    email : string;\r\n    name : string;\r\n    password : string;\r\n    role : string;\r\n}","\r\nimport { defineComponent, ref, watch } from \"vue\";\r\nimport Swal from \"sweetalert2/dist/sweetalert2.js\";\r\nimport ApiService from \"@/core/services/ApiService\";\r\nimport { User } from \"@/types/UserModel\";\r\n\r\nexport default defineComponent({\r\n  name: \"user-detail-modal\",\r\n  components: {\r\n  },\r\n  props:{\r\n    user : User,\r\n    roles : [],\r\n    reloadUsers: {\r\n      type:Function,\r\n      default: () => ({}),\r\n    }, \r\n  },\r\n  emits:['updateUser'],\r\n  setup(props, {emit}) {\r\n    const userData = ref({} as any);\r\n    const formRef = ref<null | HTMLFormElement>(null);\r\n    const loading = ref<boolean>(false);\r\n    const confirmPassword = ref('');\r\n\r\n    watch(() => props.user, async()=>{\r\n        userData.value = props.user;\r\n    });\r\n\r\n    const editUser = async (formData) => {\r\n        ApiService.setHeader();\r\n        if(userData.value && userData.value.id !==0)\r\n        {\r\n            ApiService.update(\"user\",userData.value.id, formData)\r\n                .then(()=>{\r\n                    userData.value.password= '';\r\n                    confirmPassword.value = '';\r\n                    emit('updateUser', userData);\r\n                })\r\n                .catch(({ response }) => {\r\n                    loading.value = false;\r\n                    console.log(response);\r\n                    Swal.fire({\r\n                    text: \"Failed to edit User\",\r\n                    icon: \"error\",\r\n                    buttonsStyling: false,\r\n                    confirmButtonText: \"Ok, got it!\",\r\n                    customClass: {\r\n                        confirmButton: \"btn btn-primary\",\r\n                    },\r\n                    });\r\n                });\r\n        }\r\n        else\r\n        {\r\n          ApiService.post(\"user\", formData)\r\n                .then(()=> { props.reloadUsers();})\r\n                .catch(({ response }) => {\r\n                    loading.value = false;\r\n                    console.log(response);\r\n                    Swal.fire({\r\n                    text: \"Failed to create the new user\",\r\n                    icon: \"error\",\r\n                    buttonsStyling: false,\r\n                    confirmButtonText: \"Ok, got it!\",\r\n                    customClass: {\r\n                        confirmButton: \"btn btn-primary\",\r\n                    },\r\n                    });\r\n                });\r\n        }\r\n    }\r\n\r\n    const submit = () => {\r\n        let errorMessage = '';\r\n        if(!userData.value.name || !userData.value.email ){\r\n            errorMessage = \"Please fill out all required fields\";\r\n        }\r\n        else if((userData.value.id > 0 && userData.value.password && userData.value.password != confirmPassword.value)\r\n                ||(userData.value.id === 0 && userData.value.password != confirmPassword.value)){\r\n            errorMessage = 'password and confirmed password are not matched';\r\n        }\r\n        else if(userData.value.id > 0 && !userData.value.password){\r\n            delete userData.value.password;\r\n        }\r\n\r\n        if(errorMessage !== ''){\r\n            Swal.fire({\r\n                text: errorMessage,\r\n                icon: \"error\",\r\n                buttonsStyling: false,\r\n                confirmButtonText: \"Ok, got it!\",\r\n                customClass: {\r\n                confirmButton: \"btn btn-primary\",\r\n                },\r\n            });\r\n\r\n            return false;\r\n        }\r\n        else{\r\n            loading.value = true;\r\n            editUser(userData.value).then(() => {\r\n                Swal.fire({\r\n                    text: \"User change successfully submitted!\",\r\n                    icon: \"success\",\r\n                    buttonsStyling: false,\r\n                    confirmButtonText: \"Ok, got it!\",\r\n                    customClass: {\r\n                    confirmButton: \"btn btn-primary\",\r\n                    },\r\n                }).then(() => {\r\n                    let userDetailCancelBtn = document.getElementById('kt_modal_new_target_cancel');\r\n                    userDetailCancelBtn?.click();\r\n                });\r\n            });\r\n        }\r\n    };\r\n\r\n    return {\r\n      userData,\r\n      submit,\r\n      loading,\r\n      formRef,\r\n      confirmPassword\r\n    };\r\n  },\r\n});\r\n","import { render } from \"./UserDetail.vue?vue&type=template&id=54acc18a&scoped=true\"\nimport script from \"./UserDetail.vue?vue&type=script&lang=ts\"\nexport * from \"./UserDetail.vue?vue&type=script&lang=ts\"\n\nimport \"./UserDetail.vue?vue&type=style&index=0&id=54acc18a&lang=scss&scoped=true\"\nimport \"./UserDetail.vue?vue&type=style&index=1&id=54acc18a&scoped=true&lang=css\"\nscript.render = render\nscript.__scopeId = \"data-v-54acc18a\"\n\nexport default script","\r\nimport { defineComponent, onMounted, computed, ref, reactive, onBeforeMount } from \"vue\";\r\nimport { setCurrentPageBreadcrumbs } from \"@/core/helpers/breadcrumb\";\r\nimport ApiService from \"@/core/services/ApiService\";\r\nimport UserDetail from \"@/views/user/modals/UserDetail.vue\"\r\nimport { User } from \"@/types/UserModel\";\r\nimport { ElMessageBox } from \"element-plus\";\r\nimport Swal from \"sweetalert2\";\r\n\r\nexport default defineComponent({\r\n  name: \"user-list\",\r\n  components: {\r\n      UserDetail\r\n  },\r\n  setup() {\r\n    const users = ref<any>([]);;\r\n    const selectedUser = ref({} as User);\r\n    const roles = ref<any>([]);\r\n\r\n    const getRoles = async() =>{\r\n        ApiService.setHeader(); \r\n        await ApiService.get(\"user/roles\").then(({data})=>{\r\n            roles.value = data.data;\r\n        })\r\n    }\r\n\r\n    const getUsers = async () =>  {\r\n        ApiService.setHeader();         \r\n        ApiService.get(\"user\")\r\n            .then(({ data }) => {\r\n                users.value = data.data;\r\n            })\r\n            .catch(({ response }) => {\r\n                console.log('getUsers error => '+response.data.errors);                    \r\n            });\r\n    }\r\n\r\n    const pageSize = 15;\r\n    let page = reactive({pageValue : 1});\r\n\r\n    const pagedTableDate = computed(()=>{\r\n      return users.value.filter(data => !search \r\n                                || data.name.toLowerCase().includes(search.searchValue.toLowerCase())\r\n                                || data.email.toLowerCase().includes(search.searchValue.toLowerCase())\r\n                                || data.role?.toLowerCase().includes(search.searchValue.toLowerCase()))\r\n                            .slice(pageSize * page.pageValue - pageSize, pageSize * page.pageValue);\r\n     })\r\n\r\n    const search = reactive({searchValue : ''});\r\n\r\n    const userDetail = (user) =>{\r\n        selectedUser.value = user;\r\n        let userDetailBtn = document.getElementById('user_detail_button');\r\n        userDetailBtn?.click();\r\n    }\r\n\r\n    const updateUser = (user) =>{\r\n        users.value.find(x=> x.id == user.id)[0] = user;\r\n    }\r\n\r\n    const handleEdit = (row) => {\r\n        userDetail(row)\r\n    };\r\n\r\n    const handleDelete = (row) => {\r\n      ElMessageBox.confirm('Are you sure to delete this user?')\r\n            .then(() => {\r\n                ApiService.setHeader();\r\n                ApiService.delete(\"user/\"+row.id)\r\n                    .then(() => {\r\n                        Swal.fire({\r\n                            text: \"user is deleted successfully\",\r\n                            icon: \"success\",\r\n                            buttonsStyling: false,  \r\n                            confirmButtonText: \"Ok, got it!\",\r\n                            customClass: {\r\n                                confirmButton: \"btn btn-primary\",\r\n                            },\r\n                            })\r\n                            .then(() => {\r\n                                users.value = users.value.filter(x=>x.id != row.id);\r\n                            });\r\n                    })\r\n                    .catch(({ response }) => {\r\n                        Swal.fire({\r\n                        text: \"Failed to delete the assessment. \"+response.data.errors,\r\n                        icon: \"error\",\r\n                        buttonsStyling: false,\r\n                        confirmButtonText: \"Ok, got it!\",\r\n                        customClass: {\r\n                            confirmButton: \"btn btn-primary\",\r\n                        },\r\n                        })\r\n                    });\r\n            });\r\n    };\r\n\r\n    const setPage = (val) => {\r\n      page.pageValue = val;\r\n    }\r\n\r\n    onBeforeMount(async() =>{\r\n        await getRoles();\r\n        await getUsers();\r\n    })\r\n\r\n    onMounted(() => {\r\n      setCurrentPageBreadcrumbs(\"User List\", [\"User\"]);\r\n    });\r\n\r\n    return {\r\n      handleEdit,\r\n      handleDelete,\r\n      setPage,\r\n      userDetail,\r\n      users,\r\n      pagedTableDate,\r\n      pageSize,\r\n      search,\r\n      roles,\r\n      selectedUser,\r\n      updateUser,\r\n      getUsers\r\n    };\r\n  },\r\n});\r\n","import { render } from \"./Users.vue?vue&type=template&id=f773bb42&scoped=true\"\nimport script from \"./Users.vue?vue&type=script&lang=ts\"\nexport * from \"./Users.vue?vue&type=script&lang=ts\"\n\nimport \"./Users.vue?vue&type=style&index=0&id=f773bb42&scoped=true&lang=css\"\nscript.render = render\nscript.__scopeId = \"data-v-f773bb42\"\n\nexport default script","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader-v16/dist/index.js??ref--0-1!./UserDetail.vue?vue&type=style&index=1&id=54acc18a&scoped=true&lang=css\"","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader-v16/dist/index.js??ref--0-1!./UserDetail.vue?vue&type=style&index=0&id=54acc18a&lang=scss&scoped=true\"","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader-v16/dist/index.js??ref--0-1!./Users.vue?vue&type=style&index=0&id=f773bb42&scoped=true&lang=css\""],"sourceRoot":""}