{"version":3,"sources":["webpack:///./src/components/Admin/Customer-Modal/ProjectDetail/P-UserList.vue?99e3","webpack:///./src/components/Admin/Customer-Modal/ProjectDetail/P-UsersComp.vue?f9e1","webpack:///./src/components/Admin/Customer-Modal/ProjectDetail/P-UserList.vue","webpack:///./src/components/Admin/Customer-Modal/ProjectDetail/P-UserList.vue?cb46","webpack:///./src/components/Admin/Customer-Modal/ProjectDetail/P-UsersComp.vue","webpack:///./src/components/Admin/Customer-Modal/ProjectDetail/P-UsersComp.vue?657c"],"names":["t","te","translate","text","store","project","projectId","props","listActive","lastData","filterObject","page","pageSize","getUser","selectedItemValue","userList","value","filter","item","checked","length","loading","totalRecordCount","btnAddAll","checkAllItem","checkBox","notData","loadingButton","parseInt","fullName","Search","inputNull","closeList","emit","selectAll","e","forEach","ProjectModule","actions","GET_PROJECT_NOT_USERS","then","response","Success","Data","ListItems","TotalItemsCount","element","some","id","Id","userItem","Object","name","FullName","push","finally","scrollPage","target","offsetHeight","Math","ceil","scrollTop","scrollHeight","payload","userIds","addAll","addAllUser","dispatch","addSelectUser","i","addUser","splice","findIndex","x","__exports__","block","checkAll","getters","records","onPage","step","removeModel","deleteAll","removeUser","undefined","PROJECT_DELETE_USERS","event"],"mappings":"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","file":"js/chunk-0686ba22.a64d17b1.js","sourcesContent":["export * from \"-!../../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../../../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./P-UserList.vue?vue&type=style&index=0&id=f14e2850&scoped=true&lang=css\"","export * from \"-!../../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../../../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./P-UsersComp.vue?vue&type=style&index=0&id=37b1e9fc&scoped=true&lang=css\"","<template>\r\n  <transition name=\"component-fade\" mode=\"out-in\">\r\n    <div v-show=\"listActive\" class=\"list-container\" @click=\"closeList\"></div>\r\n  </transition>\r\n  <transition name=\"list-fade\" mode=\"in-out\">\r\n    <div v-show=\"listActive\" class=\"card bg-white shadow-sm pt-5 c-xf\">\r\n      <div\r\n        class=\"d-flex justify-content-between align-items-center border-bottom pb-3\"\r\n        style=\"padding-right: 1.5rem\"\r\n      >\r\n        <div>\r\n          <h5 class=\"d-flex align-items-start flex-column m-0 p-6\">\r\n            {{ project.name }}\r\n            <span class=\"text-muted mt-1 fw-bold fs-8\">{{\r\n              translate(\"project_detail_user_list_title\")\r\n            }}</span>\r\n          </h5>\r\n        </div>\r\n        <div\r\n          class=\"btn btn-icon btn-sm btn-active-light-primary ms-2 text-dark\"\r\n          @click=\"closeList\"\r\n          aria-label=\"Close\"\r\n        >\r\n          <i class=\"bi bi-x-lg\"></i>\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        class=\"d-flex align-items-center justify-content-between pt-4 pe-4 pb-4 border-bottom position-relative\"\r\n        style=\"padding-left: 2.4rem !important; background: #fbfbfb\"\r\n      >\r\n        <div class=\"form-check form-check-custom form-check-solid\">\r\n          <input\r\n            ref=\"checkBox\"\r\n            class=\"form-check-input\"\r\n            type=\"checkbox\"\r\n            v-model=\"checkAllItem\"\r\n            @change=\"selectAll()\"\r\n          />\r\n        </div>\r\n        <div class=\"d-flex align-items-center justify-content-end\">\r\n          <div class=\"d-flex align-items-center position-relative my-1\">\r\n            <span class=\"svg-icon svg-icon-1 position-absolute ms-6\">\r\n              <i class=\"bi bi-search fs-3 text-gray-600\"></i>\r\n            </span>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-white ps-15 form-control-sm border\"\r\n              style=\"width: 250px\"\r\n              :placeholder=\"\r\n                translate('project_detail_user_input_seacrh_placeholder')\r\n              \"\r\n              v-model=\"filterObject.fullName\"\r\n              @keydown.enter=\"Search\"\r\n              @keyup.delete=\"inputNull\"\r\n            />\r\n          </div>\r\n\r\n          <button\r\n            v-if=\"btnAddAll\"\r\n            type=\"button\"\r\n            class=\"btn btn-primary position-relative btn-sm ms-2\"\r\n            @click=\"addAllUser\"\r\n          >\r\n            {{ translate(\"Add_All\") }}\r\n            <span\r\n              class=\"position-absolute top-0 start-100 translate-middle badge badge-circle badge-danger\"\r\n              >{{ totalRecordCount }}</span\r\n            >\r\n          </button>\r\n          <button\r\n            v-else-if=\"selectedItemValue > 0\"\r\n            type=\"button\"\r\n            class=\"btn btn-primary position-relative btn-sm ms-2\"\r\n            @click=\"addSelectUser\"\r\n          >\r\n            <div\r\n              v-if=\"loadingButton\"\r\n              class=\"spinner-border spinner-border-sm mx-1\"\r\n            ></div>\r\n            <span class=\"indicator-label\">\r\n              {{ translate(\"Add\") }}\r\n            </span>\r\n            <span\r\n              class=\"position-absolute top-0 start-100 translate-middle badge badge-circle badge-danger\"\r\n              >{{ selectedItemValue }}</span\r\n            >\r\n          </button>\r\n        </div>\r\n        <a\r\n          v-show=\"!notData\"\r\n          class=\"text-muted mt-1 fs-8 position-absolute top-5\"\r\n          style=\"top: 71px; right: 15px\"\r\n          >{{ totalRecordCount }} {{ translate(\"Records_Found\") }}</a\r\n        >\r\n      </div>\r\n\r\n      <ul\r\n        id=\"all-location\"\r\n        class=\"locations-list mt-2 pt-7 ps-3\"\r\n        @scroll=\"scrollPage($event)\"\r\n      >\r\n        <div\r\n          v-if=\"notData\"\r\n          class=\"d-flex justify-content-center align-items-center mt-10 mb-1 me-2 border rounded p-6 bg-light-info text-info\"\r\n        >\r\n          {{ translate(\"No_Records\") }}\r\n        </div>\r\n        <div\r\n          v-for=\"(item, index) in userList\"\r\n          :key=\"index\"\r\n          class=\"d-flex align-items-center mb-1 me-2 border rounded\"\r\n        >\r\n          <!--begin::Bullet-->\r\n          <span class=\"bullet bullet-vertical h-40px bg-primary\"></span>\r\n          <!--end::Bullet-->\r\n\r\n          <!--begin::Checkbox-->\r\n          <div class=\"form-check form-check-custom form-check-solid mx-5\">\r\n            <input\r\n              :disabled=\"checkAllItem === true && btnAddAll === true\"\r\n              class=\"form-check-input\"\r\n              type=\"checkbox\"\r\n              v-model=\"item.checked\"\r\n              :id=\"`user-${index}`\"\r\n            />\r\n          </div>\r\n          <!--end::Checkbox-->\r\n\r\n          <!--begin::Description-->\r\n          <div class=\"flex-grow-1\">\r\n            <div class=\"d-flex flex-column position-relative w-100\">\r\n              <label\r\n                class=\"form-check-label col-form-label fw-bold p-0\"\r\n                :for=\"`user-${index}`\"\r\n              >\r\n                {{ item.name }}\r\n              </label>\r\n            </div>\r\n          </div>\r\n          <!--end::Description-->\r\n          <div\r\n            class=\"btn btn-icon btn-sm btn-active-light-primary me-2\"\r\n            @click=\"addUser(item.id)\"\r\n          >\r\n            <i class=\"bi bi-plus-lg\"></i>\r\n          </div>\r\n        </div>\r\n        <div\r\n          v-if=\"loading\"\r\n          class=\"d-flex justify-content-center align-items-center mb-1 me-2 pt-2\"\r\n        >\r\n          <span\r\n            class=\"spinner-border spinner-border-sm align-middle text-primary\"\r\n          ></span>\r\n        </div>\r\n      </ul>\r\n    </div>\r\n  </transition>\r\n</template>\r\n\r\n<script setup>\r\nimport { useStore } from \"vuex\";\r\nimport ProjectModule from \"@/store/modules/Customer/ProjectModule\";\r\nimport {\r\n  reactive,\r\n  ref,\r\n  defineProps,\r\n  defineEmits,\r\n  computed,\r\n  inject,\r\n  watch,\r\n} from \"vue\";\r\nimport { useI18n } from \"vue-i18n\";\r\n\r\n// Multi Language\r\nconst { t, te } = useI18n();\r\nconst translate = (text) => {\r\n  if (te(text)) {\r\n    return t(text);\r\n  } else {\r\n    return text;\r\n  }\r\n};\r\n\r\nconst store = useStore();\r\nconst project = inject(\"project\");\r\nconst projectId = inject(\"projectId\");\r\nconst props = defineProps({ listActive: Boolean }, { project: Object });\r\nconst emit = defineEmits([\"closeList\"]);\r\n\r\nwatch(props, () => {\r\n  if (props.listActive) {\r\n    lastData = false;\r\n    filterObject.page = 1;\r\n    filterObject.pageSize = 20;\r\n    getUser();\r\n  }\r\n});\r\n\r\nconst selectedItemValue = computed(\r\n  () => userList.value.filter((item) => item.checked === true).length\r\n);\r\nconst loading = ref(false);\r\nconst userList = ref([]);\r\nconst totalRecordCount = ref(0);\r\nconst btnAddAll = ref(false);\r\nconst checkAllItem = ref(false);\r\nconst checkBox = ref();\r\nconst notData = ref(false);\r\nlet lastData = false;\r\nconst loadingButton = ref(false);\r\n\r\n// Filter\r\nconst filterObject = reactive({\r\n  page: 1,\r\n  pageSize: 20,\r\n  projectId: parseInt(projectId),\r\n  fullName: null,\r\n});\r\nconst Search = () => {\r\n  userList.value = [];\r\n  getUser();\r\n};\r\nconst inputNull = () => {\r\n  if (filterObject.fullName === \"\" || filterObject.fullName === null) {\r\n    filterObject.fullName = null;\r\n    getUser();\r\n  }\r\n};\r\n\r\n// Filter End\r\n\r\nconst closeList = () => {\r\n  checkAllItem.value = false;\r\n  emit(\"closeList\");\r\n};\r\n\r\nconst selectAll = (e) => {\r\n  if (checkAllItem.value && userList.value.length > 0) {\r\n    userList.value.forEach((item) => (item.checked = true));\r\n    if (filterObject.fullName !== null) {\r\n      btnAddAll.value = false;\r\n    } else {\r\n      btnAddAll.value = true;\r\n    }\r\n  } else if (!checkAllItem.value && userList.value.length > 0) {\r\n    userList.value.forEach((item) => (item.checked = false));\r\n    btnAddAll.value = false;\r\n  }\r\n};\r\n\r\nfunction getUser() {\r\n  if (!lastData) {\r\n    loading.value = true;\r\n    notData.value = false;\r\n    ProjectModule.actions\r\n      .GET_PROJECT_NOT_USERS(null, filterObject)\r\n      .then((response) => {\r\n        if (response.Success && response.Data.ListItems.length > 0) {\r\n          totalRecordCount.value = response.Data.TotalItemsCount;\r\n          response.Data.ListItems.forEach((element) => {\r\n            if (!userList.value.some((item) => item.id === element.Id)) {\r\n              var userItem = new Object();\r\n              userItem.name = element.FullName;\r\n              userItem.checked = checkAllItem.value === true ? true : false;\r\n              userItem.id = element.Id;\r\n              userList.value.push(userItem);\r\n            }\r\n          });\r\n        } else {\r\n          lastData = true;\r\n          if (userList.value.length === 0) notData.value = true;\r\n        }\r\n      })\r\n      .finally(() => {\r\n        loading.value = false;\r\n      });\r\n  }\r\n}\r\n\r\nfunction scrollPage(e) {\r\n  let value = e.target.offsetHeight + Math.ceil(e.target.scrollTop);\r\n  if (value >= e.target.scrollHeight) {\r\n    filterObject.page = filterObject.page + 1;\r\n    getUser(filterObject);\r\n  }\r\n}\r\n\r\nconst payload = reactive({\r\n  projectId: projectId,\r\n  userIds: [],\r\n  addAll: false,\r\n});\r\n\r\nfunction addAllUser() {\r\n  payload.addAll = true;\r\n  store\r\n    .dispatch(\"ProjectModule/PROJECT_ADD_USERS\", payload)\r\n    .then((response) => {\r\n      if (response) {\r\n        userList.value = [];\r\n        payload.addAll = false;\r\n        getUser(filterObject);\r\n        checkBox.value.checked = false;\r\n        btnAddAll.value = false;\r\n      }\r\n    });\r\n}\r\nfunction addSelectUser() {\r\n  loadingButton.value = true;\r\n  userList.value\r\n    .filter((item) => item.checked === true)\r\n    .forEach((i) => payload.userIds.push(i.id));\r\n  store\r\n    .dispatch(\"ProjectModule/PROJECT_ADD_USERS\", payload)\r\n    .then((response) => {\r\n      if (response) {\r\n        loadingButton.value = false;\r\n        userList.value = userList.value.filter((i) => i.checked === false);\r\n        filterObject.pageSize = 25 + payload.userIds.length;\r\n        filterObject.fullName = null;\r\n        checkAllItem.value = false;\r\n        getUser(filterObject);\r\n        payload.userIds = [];\r\n      }\r\n    });\r\n}\r\nfunction addUser(Id) {\r\n  payload.userIds = [];\r\n  payload.userIds.push(Id);\r\n  store\r\n    .dispatch(\"ProjectModule/PROJECT_ADD_USERS\", payload)\r\n    .then((response) => {\r\n      if (response) {\r\n        userList.value = userList.value.filter((i) => i.checked === false);\r\n        lastData = false;\r\n        userList.value.splice(\r\n          userList.value.findIndex((x) => x.id === Id),\r\n          1\r\n        );\r\n        filterObject.pageSize = 21;\r\n        getUser(filterObject);\r\n        payload.userIds = [];\r\n      }\r\n    });\r\n}\r\n\r\ngetUser(filterObject);\r\n</script>\r\n\r\n<style scoped>\r\n.list-fade-enter-active,\r\n.list-fade-leave-active {\r\n  transition: all 0.5s ease;\r\n}\r\n.list-fade-enter-from,\r\n.list-fade-leave-to {\r\n  transform: translateX(500px);\r\n}\r\n\r\n.component-fade-enter-active,\r\n.component-fade-leave-active {\r\n  transition: opacity 0.5s ease;\r\n}\r\n\r\n.component-fade-enter-from,\r\n.component-fade-leave-to {\r\n  opacity: 0;\r\n}\r\n.list-container {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100vw;\r\n  height: 100vh;\r\n  background: rgba(0, 0, 0, 0.219);\r\n  z-index: 1200;\r\n  overflow-x: hidden;\r\n  overflow-y: auto;\r\n}\r\n.c-xf {\r\n  position: fixed;\r\n  width: 500px;\r\n  height: 100vh;\r\n  top: 0px;\r\n  right: 0;\r\n  z-index: 1201;\r\n  border-radius: 5px 0 0 5px;\r\n  overflow-x: hidden;\r\n  overflow-y: auto;\r\n}\r\n@media only screen and (max-width: 600px) {\r\n  .c-xf {\r\n    width: 100%;\r\n    border-radius: 0;\r\n  }\r\n}\r\n.user-list {\r\n  padding: 0%;\r\n  background: white;\r\n  width: 100%;\r\n  max-height: 100vh;\r\n  overflow: scroll;\r\n  overflow-x: hidden;\r\n}\r\n</style>\r\n","import script from \"./P-UserList.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./P-UserList.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./P-UserList.vue?vue&type=style&index=0&id=f14e2850&scoped=true&lang=css\"\n\nimport exportComponent from \"C:\\\\Projects\\\\git\\\\Fornax-Software\\\\audittick.frontend\\\\node_modules\\\\vue-loader-v16\\\\dist\\\\exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-f14e2850\"]])\n\nexport default __exports__","<template>\r\n  <div>\r\n    <div class=\"card mb-5 mb-xl-10\">\r\n      <BlockUI :loading=\"block\" />\r\n      <!--begin::Card header-->\r\n      <div class=\"border-bottom\">\r\n        <!--begin::Card title-->\r\n\r\n        <div class=\"row ps-8 pe-8 pt-5 pb-5 align-items-center\">\r\n          <!--begin::Label-->\r\n          <div class=\"col-lg-4\">\r\n            <h3 class=\"d-flex flex-column m-0\">\r\n              {{ translate(\"Users\") }}\r\n              <span class=\"text-muted mt-1 fw-bold fs-7\"\r\n                >{{ records }} {{ translate(\"Records_Found\") }}</span\r\n              >\r\n            </h3>\r\n            <!--end::Label-->\r\n          </div>\r\n          <!--begin::Col-->\r\n          <div class=\"col-lg-8\">\r\n            <!--begin::Row-->\r\n            <div class=\"row\">\r\n              <!--begin::Col-->\r\n              <div class=\"col-lg-3 fv-row\"></div>\r\n              <div class=\"col-lg-6 fv-row d-flex\">\r\n                <div class=\"d-flex align-items-center position-relative my-1 w-100\">\r\n                  <span class=\"svg-icon svg-icon-1 position-absolute ms-6\">\r\n                    <i class=\"bi bi-search fs-3 text-gray-600\"></i>\r\n                  </span>\r\n                  <input\r\n                    type=\"text\"\r\n                    class=\"form-control form-control-white ps-15 form-control-sm border\"\r\n                    :placeholder=\"\r\n                      translate('project_detail_user_input_seacrh_placeholder')\r\n                    \"\r\n                    v-model=\"filterObject.fullName\"\r\n                    @keydown.enter=\"Search\"\r\n                    @keyup.delete=\"inputNull\"\r\n                  />\r\n                </div>\r\n              </div>\r\n              <!--end::Col-->\r\n\r\n              <!--begin::Col-->\r\n              <div class=\"col-lg-3 fv-row d-flex\">\r\n                <div class=\"row align-items-center justify-content-end w-100 mx-0 m-2\">\r\n                  <button\r\n                    class=\"btn btn-sm btn-primary border ps-2 pe-2\"\r\n                    @click=\"listActive = !listActive\"\r\n                  >\r\n                    <span>{{ translate(\"project_detail_user_button_add\") }}</span>\r\n                  </button>\r\n                </div>\r\n              </div>\r\n              <!--end::Col-->\r\n            </div>\r\n            <!--end::Row-->\r\n          </div>\r\n          <!--end::Col-->\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"d-flex justify-content-between p-8 pt-6 pb-6 border-bottom\"\r\n        style=\"background: #fbfbfb\"\r\n      >\r\n        <div\r\n          v-show=\"userList.length > 0\"\r\n          class=\"form-check form-check-custom form-check-solid\"\r\n          style=\"margin-left: 2.3rem !important\"\r\n        >\r\n          <input\r\n            ref=\"checkAll\"\r\n            class=\"form-check-input\"\r\n            type=\"checkbox\"\r\n            @change=\"selectAll($event)\"\r\n            id=\"check-all\"\r\n          />\r\n          <label\r\n            class=\"form-check-label text-primary fw-bolder fs-7\"\r\n            style=\"margin-left: 1.3rem !important\"\r\n            for=\"check-all\"\r\n          >\r\n            {{ translate(\"Select_All\") }}\r\n          </label>\r\n        </div>\r\n\r\n        <button\r\n          v-show=\"userList.filter((i) => i.checked === true).length > 0\"\r\n          @click=\"removeUser()\"\r\n          type=\"button\"\r\n          class=\"btn bg-white bg-hover-secondary btn-sm border position-relative ms-2 text-gray-700\"\r\n        >\r\n          {{ translate(\"project_detail_user_button_remove_users\")\r\n          }}<span\r\n            class=\"position-absolute top-0 start-100 translate-middle badge badge-circle badge-danger\"\r\n            >{{ userList.filter((i) => i.checked === true).length }}</span\r\n          >\r\n        </button>\r\n      </div>\r\n      <div class=\"card-body pt-6 pb-0\">\r\n        <!--begin::Item-->\r\n        <div\r\n          v-for=\"(user, index) in userList\"\r\n          :key=\"index\"\r\n          class=\"d-flex align-items-center mb-1 border rounded p-2\"\r\n        >\r\n          <!--begin::Bullet-->\r\n          <span\r\n            class=\"bullet bullet-vertical h-40px\"\r\n            :class=\"`bg-primary`\"\r\n          ></span>\r\n          <!--end::Bullet-->\r\n\r\n          <!--begin::Checkbox-->\r\n          <div class=\"form-check form-check-custom form-check-solid mx-5\">\r\n            <input\r\n              :id=\"`check-${user.Id}`\"\r\n              class=\"form-check-input\"\r\n              type=\"checkbox\"\r\n              v-model=\"user.checked\"\r\n            />\r\n          </div>\r\n          <!--end::Checkbox-->\r\n\r\n          <!--begin::Description-->\r\n          <div class=\"flex-grow-1\">\r\n            <div class=\"d-flex flex-column position-relative w-100\">\r\n              <label\r\n                class=\"form-check-label col-form-label fw-bold p-0\"\r\n                :for=\"`check-${user.Id}`\"\r\n              >\r\n                <a>{{ user.Name }}</a>\r\n              </label>\r\n            </div>\r\n          </div>\r\n          <!--end::Description-->\r\n\r\n          <span\r\n            class=\"badge fs-7 fw-bolder badge-white border\"\r\n            style=\"cursor: pointer\"\r\n            @click=\"removeUser(user.Id)\"\r\n            >{{ translate(\"Remove\") }}</span\r\n          >\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"row ps-8 pe-8 pt-5 pb-5 align-items-center\">\r\n        <div class=\"col-lg-12\">\r\n          <Pagination\r\n            @onPage=\"onPage\"\r\n            :TotalData=\"records\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <CUserList\r\n      :listActive=\"listActive\"\r\n      @closeList=\"closeList\"\r\n    />\r\n    <!-- :project=\"project\" -->\r\n  </div>\r\n</template>\r\n\r\n<script setup>\r\nimport CUserList from \"@/components/Admin/Customer-Modal/ProjectDetail/P-UserList.vue\";\r\nimport { ref, reactive, computed, inject } from \"vue\";\r\nimport ProjectModule from \"@/store/modules/Customer/ProjectModule\";\r\nimport { useI18n } from \"vue-i18n\";\r\nimport { useStore } from \"vuex\";\r\n\r\n// Multi Language\r\nconst { t, te } = useI18n();\r\nconst translate = (text) => {\r\n  if (te(text)) {\r\n    return t(text);\r\n  } else {\r\n    return text;\r\n  }\r\n};\r\n\r\nconst store = useStore();\r\n\r\nconst block = ref(true);\r\nconst checkAll = ref();\r\nconst userList = computed(() => store.getters[\"ProjectModule/_getuserList\"]);\r\nconst records = computed(() => store.getters[\"ProjectModule/_getuserRecords\"]);\r\nconst listActive = ref(false);\r\nconst projectId = inject(\"projectId\");\r\n\r\nconst closeList = () => {\r\n  listActive.value = false;\r\n};\r\n\r\n// Filter\r\n// Filter\r\nconst filterObject = reactive({\r\n  page: 1,\r\n  pageSize: 20,\r\n  projectId: parseInt(projectId),\r\n  fullName: null,\r\n});\r\nconst Search = () => {\r\n  getUser();\r\n};\r\nconst inputNull = () => {\r\n  if (filterObject.fullName === \"\" || filterObject.fullName === null) {\r\n    filterObject.fullName = null;\r\n    getUser();\r\n  }\r\n};\r\n\r\n// Filter End\r\n\r\nconst onPage = (e) => {\r\n  filterObject.page = e.step.value;\r\n  filterObject.pageSize = e.pageSize.value;\r\n\r\n  getUser();\r\n};\r\n// Filter End\r\n\r\nconst getUser = () => {\r\n  filterObject.projectId = parseInt(projectId);\r\n  store\r\n    .dispatch(\"ProjectModule/GET_PROJECT_USERS\", filterObject)\r\n    .finally(() => (block.value = false));\r\n};\r\n\r\nconst removeModel = reactive({\r\n  projectId: projectId,\r\n  userIds: [],\r\n  deleteAll: false,\r\n});\r\nconst removeUser = (Id) => {\r\n  if (Id !== undefined) {\r\n    removeModel.userIds.push(Id);\r\n  } else {\r\n    let value = userList.value.filter((i) => i.checked === true);\r\n    value.forEach((x) => removeModel.userIds.push(x.Id));\r\n  }\r\n  ProjectModule.actions.PROJECT_DELETE_USERS(null, removeModel).then((response) => {\r\n    if (response) {\r\n      getUser();\r\n      removeModel.userIds = [];\r\n      checkAll.value.checked = false;\r\n    }\r\n  });\r\n};\r\n\r\nconst selectAll = (event) => {\r\n  userList.value.forEach((item) => (item.checked = event.target.checked));\r\n};\r\n\r\ngetUser();\r\n</script>\r\n\r\n<style scoped>\r\n.border-radius-left {\r\n  border-radius: 5px 0 0 5px !important;\r\n}\r\n.border-radius-right {\r\n  border-radius: 0 5px 5px 0 !important;\r\n}\r\n.select-menu-list {\r\n  right: 0;\r\n  top: 38px;\r\n  width: 200px;\r\n  background-color: #fff;\r\n  padding: 4px 2px 2px 2px;\r\n  z-index: 5;\r\n}\r\n.select-menu-list li {\r\n  list-style-type: none;\r\n  margin-bottom: 2px;\r\n  padding: 4px 2px 4px 5px;\r\n  color: #3f4254;\r\n}\r\n.select-menu-list li:hover {\r\n  background-color: #04c8c8;\r\n  font-weight: 500;\r\n  color: #fff;\r\n}\r\n.select-item {\r\n  background-color: #04c8c8a9;\r\n  color: #fff !important;\r\n  font-weight: 500;\r\n}\r\n.made-enter-active,\r\n.made-leave-active {\r\n  transition: opacity 0.2s ease;\r\n}\r\n\r\n.made-enter-from,\r\n.made-leave-to {\r\n  opacity: 0;\r\n}\r\n</style>\r\n","import script from \"./P-UsersComp.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./P-UsersComp.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./P-UsersComp.vue?vue&type=style&index=0&id=37b1e9fc&scoped=true&lang=css\"\n\nimport exportComponent from \"C:\\\\Projects\\\\git\\\\Fornax-Software\\\\audittick.frontend\\\\node_modules\\\\vue-loader-v16\\\\dist\\\\exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-37b1e9fc\"]])\n\nexport default __exports__"],"sourceRoot":""}