{"version":3,"sources":["webpack:///./src/components/admin-panel/pages/EventNotification/Index.vue","webpack:///./src/components/admin-panel/pages/EventNotification/EventNotification.vue","webpack:///./src/components/admin-panel/pages/EventNotification/EventNotification.vue?bbec","webpack:///./src/components/admin-panel/pages/EventNotification/Index.vue?77e4"],"names":["_createElementBlock","_createVNode","_component_event_notification","store","useStore","searchByOrg","ref","isLoading","showModal","isCreating","totalRecords","eventNotifications","formState","event_type","Organization","recipients","formRef","recordToEdit","paginationState","reactive","pageSize","current","isFetchingOrgs","computed","getters","isLoadingOrganizations","organizations","map","el","label","Org_name","value","watch","fetchEventNotifications","pagination","total","showSizeChanger","position","onModalClose","async","error","data","EventNotificationService","page","console","log","count","results","handleTableChange","Number","createEventNotification","values","resetFields","handleEdit","id","updateEventNotification","deleteEventNotification","handleSubmit","validateFields","then","catch","info","onMounted","dispatch","__exports__","components","EventNotification","render"],"mappings":"2PACEA,gCAEM,YADJC,yBAAyCC,K,6GC8H7C,MAAMC,EAAQC,iBAERC,EAAcC,iBAAI,MAClBC,EAAYD,kBAAI,GAChBE,EAAYF,kBAAI,GAChBG,EAAaH,kBAAI,GACjBI,EAAeJ,iBAAI,GACnBK,EAAqBL,iBAAI,IACzBM,EAAYN,iBAAI,CACpBO,WAAY,GACZC,aAAc,GACdC,WAAY,KAERC,EAAUV,mBACVW,EAAeX,iBAAI,MACnBY,EAAkBC,sBAAS,CAC/BC,SAAU,GACVC,QAAS,IAGLC,EAAiBC,sBAAS,IAAMpB,EAAMqB,QAAQC,wBAC9CC,EAAgBH,sBAAS,IAC7BpB,EAAMqB,QAAQE,cAAcC,IAAKC,IAAE,CACjCC,MAAOD,EAAGE,SACVC,MAAOH,EAAGE,aAIdE,mBAAM3B,EAAa,IAAM4B,KAEzB,MAAMC,EAAaX,sBAAS,KAAM,CAChCY,MAAOzB,EAAaqB,MACpBV,QAASH,EAAgBG,QACzBD,SAAUF,EAAgBE,SAC1BgB,iBAAiB,EACjBC,SAAU,CAAC,mBAGPC,EAAeA,KACnB1B,EAAUmB,MAAQ,GAClBd,EAAac,MAAQ,MAGjBE,EAA0BM,UAC9BhC,EAAUwB,OAAQ,EAClB,MAAOS,EAAOC,SAAcC,OAAyBT,wBAAwB,CAC3EU,KAAMzB,EAAgBG,QACtBP,aAAcT,EAAY0B,QAG5BxB,EAAUwB,OAAQ,EACdS,EACFI,QAAQC,IAAI,4BAA6BL,IAG3C9B,EAAaqB,MAAQU,EAAKK,MAC1BnC,EAAmBoB,MAAQU,EAAKM,UAGlC,SAASC,EAAkBL,GACzBC,QAAQC,IAAIF,GACRA,EAAKtB,UAAY4B,OAAO/B,EAAgBG,WAC1CH,EAAgBG,QAAUsB,EAAKtB,QAC/BuB,QAAQC,IAAI,QAEdZ,IAGF,MAAMiB,EAA0BX,UAC9B9B,EAAWsB,OAAQ,EACnB,MAAOS,SAAeE,OAAyBQ,wBAC7CC,GAGF1C,EAAWsB,OAAQ,EACnBvB,EAAUuB,OAAQ,EACdS,EACFI,QAAQC,IAAI,mCAAoCL,IAGlDxB,EAAQe,MAAMqB,cACdnB,MAGIoB,EAAaA,EAAGC,KAAIzC,aAAYC,eAAcC,iBAClDE,EAAac,MAAQuB,EACrB1C,EAAUmB,MAAQ,CAChBlB,aACAC,eACAC,cAEFP,EAAUuB,OAAQ,GAGdwB,EAA0BhB,UAC9B9B,EAAWsB,OAAQ,EAEnB,MAAOS,SAAeE,OAAyBa,wBAC7CtC,EAAac,MACboB,GAEF1C,EAAWsB,OAAQ,EACnBvB,EAAUuB,OAAQ,EACdS,EACFI,QAAQC,IAAI,mCAAoCL,IAGlDxB,EAAQe,MAAMqB,cACdnB,IACAK,MAGIkB,EAA0BjB,UAC9BhC,EAAUwB,OAAQ,EAClB,MAAOS,SAAeE,OAAyBc,wBAAwBF,GACvE/C,EAAUwB,OAAQ,EAEdS,EACFI,QAAQC,IAAI,mCAAoCL,GAIlDP,KAGIwB,EAAeA,KACnBzC,EAAQe,MACL2B,iBACAC,KAAMR,IACDlC,EAAac,MAAOwB,EAAwBJ,GAC3CD,EAAwBC,KAE9BS,MAAOC,IACNjB,QAAQC,IAAI,mBAAoBgB,M,OAItCC,uBAAU,KACR7B,IACA9B,EAAM4D,SAAS,sB,oqJCxQjB,MAAMC,EAAc,EAEL,QFGA,GACbC,WAAY,CACVC,sB,qBGLJ,MAAM,EAA2B,IAAgB,EAAQ,CAAC,CAAC,SAASC,KAErD","file":"js/chunk-2d230c34.94311862.js","sourcesContent":["<template>\r\n  <div>\r\n    <event-notification></event-notification>\r\n  </div>\r\n</template>\r\n<script>\r\nimport EventNotification from './EventNotification.vue';\r\n\r\nexport default {\r\n  components: {\r\n    EventNotification,\r\n  },\r\n};\r\n</script>\r\n","<template>\r\n  <a-modal\r\n    v-model:visible=\"showModal\"\r\n    centered\r\n    :title=\"`${recordToEdit ? 'Update' : 'Add'} Subscription`\"\r\n    :ok-text=\"`${recordToEdit ? 'Update' : 'Create'}`\"\r\n    cancel-text=\"Cancel\"\r\n    :confirm-loading=\"isCreating\"\r\n    @ok=\"handleSubmit\"\r\n    @cancel=\"onModalClose\"\r\n  >\r\n    <a-form\r\n      ref=\"formRef\"\r\n      :model=\"formState\"\r\n      layout=\"vertical\"\r\n      name=\"form_in_modal\"\r\n    >\r\n      <a-form-item\r\n        label=\"Event Type\"\r\n        name=\"event_type\"\r\n        :rules=\"[{ required: true, message: 'Please select event type!' }]\"\r\n      >\r\n        <a-select\r\n          v-model:value=\"formState.event_type\"\r\n          :options=\"eventTypeOptions\"\r\n          show-search\r\n          placeholder=\"Select event type\"\r\n        />\r\n      </a-form-item>\r\n      <a-form-item\r\n        label=\"Organization\"\r\n        name=\"Organization\"\r\n        :rules=\"[{ required: true, message: 'Please select organization!' }]\"\r\n      >\r\n        <a-select\r\n          v-model:value=\"formState.Organization\"\r\n          :loading=\"isFetchingOrgs\"\r\n          :options=\"organizations\"\r\n          show-search\r\n          placeholder=\"Select organization\"\r\n        />\r\n      </a-form-item>\r\n      <a-form-item\r\n        label=\"Recipient(s)\"\r\n        name=\"recipients\"\r\n        :rules=\"[{ required: true, message: 'Please enter recipients!' }]\"\r\n      >\r\n        <a-select\r\n          v-model:value=\"formState.recipients\"\r\n          mode=\"tags\"\r\n          style=\"width: 100%\"\r\n          placeholder=\"Add recipients\"\r\n        />\r\n      </a-form-item>\r\n    </a-form>\r\n  </a-modal>\r\n\r\n  <a-row class=\"p-4\" :gutter=\"[16, 16]\">\r\n    <a-col span=\"24\" class=\"d-flex\">\r\n      <a-select\r\n        v-model:value=\"searchByOrg\"\r\n        class=\"w-50\"\r\n        placeholder=\"Search by organization\"\r\n        show-search\r\n        allow-clear\r\n        :options=\"organizations\"\r\n      >\r\n      </a-select>\r\n\r\n      <a-button class=\"ml-auto\" type=\"primary\" @click=\"showModal = true\">\r\n        Add New Subscription\r\n      </a-button>\r\n    </a-col>\r\n    <a-col span=\"24\">\r\n      <a-table\r\n        :columns=\"columns\"\r\n        :data-source=\"eventNotifications\"\r\n        bordered\r\n        :loading=\"isLoading\"\r\n        :pagination=\"pagination\"\r\n        @change=\"handleTableChange\"\r\n      >\r\n        <template #title>\r\n          <a-typography-title :level=\"5\">\r\n            Events Subscription:\r\n            <a-tag color=\"blue\" class=\"ml-2\">\r\n              {{ eventNotifications.length }}\r\n            </a-tag>\r\n          </a-typography-title>\r\n        </template>\r\n        <template #bodyCell=\"{ record, column }\">\r\n          <span v-if=\"column.dataIndex === 'recipients'\">\r\n            <a-tag\r\n              v-for=\"recipient in record.recipients\"\r\n              :key=\"recipient\"\r\n              color=\"processing\"\r\n            >\r\n              {{ recipient }}\r\n            </a-tag>\r\n          </span>\r\n          <span v-if=\"column.dataIndex === 'actions'\">\r\n            <a-space class=\"actions\">\r\n              <a-button class=\"bg-warning\" @click=\"handleEdit(record)\">\r\n                Edit\r\n              </a-button>\r\n              <a-popconfirm\r\n                title=\"Are you sure? you want to delete the subscription?\"\r\n                ok-text=\"Yes\"\r\n                cancel-text=\"No\"\r\n                @confirm=\"deleteEventNotification(record.id)\"\r\n              >\r\n                <a-button type=\"primary\" danger>Delete</a-button>\r\n              </a-popconfirm>\r\n            </a-space>\r\n          </span>\r\n        </template>\r\n      </a-table>\r\n    </a-col>\r\n  </a-row>\r\n</template>\r\n<script setup>\r\nimport { onMounted, ref, watch } from 'vue';\r\nimport EventNotificationService from 'src/services/eventNotification';\r\nimport { columns, eventTypeOptions } from './config';\r\nimport { useStore } from 'vuex';\r\nimport { computed } from 'vue';\r\nimport { reactive } from 'vue';\r\n\r\nconst store = useStore();\r\n\r\nconst searchByOrg = ref(null);\r\nconst isLoading = ref(false);\r\nconst showModal = ref(false);\r\nconst isCreating = ref(false);\r\nconst totalRecords = ref(0);\r\nconst eventNotifications = ref([]);\r\nconst formState = ref({\r\n  event_type: '',\r\n  Organization: '',\r\n  recipients: [],\r\n});\r\nconst formRef = ref();\r\nconst recordToEdit = ref(null);\r\nconst paginationState = reactive({\r\n  pageSize: 10,\r\n  current: 1,\r\n});\r\n\r\nconst isFetchingOrgs = computed(() => store.getters.isLoadingOrganizations);\r\nconst organizations = computed(() =>\r\n  store.getters.organizations.map((el) => ({\r\n    label: el.Org_name,\r\n    value: el.Org_name,\r\n  }))\r\n);\r\n\r\nwatch(searchByOrg, () => fetchEventNotifications());\r\n\r\nconst pagination = computed(() => ({\r\n  total: totalRecords.value,\r\n  current: paginationState.current,\r\n  pageSize: paginationState.pageSize,\r\n  showSizeChanger: false,\r\n  position: ['bottomCenter'],\r\n}));\r\n\r\nconst onModalClose = () => {\r\n  formState.value = {};\r\n  recordToEdit.value = null;\r\n};\r\n\r\nconst fetchEventNotifications = async () => {\r\n  isLoading.value = true;\r\n  const [error, data] = await EventNotificationService.fetchEventNotifications({\r\n    page: paginationState.current,\r\n    Organization: searchByOrg.value,\r\n  });\r\n\r\n  isLoading.value = false;\r\n  if (error) {\r\n    console.log('Error while fetch records', error);\r\n    return;\r\n  }\r\n  totalRecords.value = data.count;\r\n  eventNotifications.value = data.results;\r\n};\r\n\r\nfunction handleTableChange(page) {\r\n  console.log(page);\r\n  if (page.current !== Number(paginationState.current)) {\r\n    paginationState.current = page.current;\r\n    console.log('set');\r\n  }\r\n  fetchEventNotifications();\r\n}\r\n\r\nconst createEventNotification = async (values) => {\r\n  isCreating.value = true;\r\n  const [error] = await EventNotificationService.createEventNotification(\r\n    values\r\n  );\r\n\r\n  isCreating.value = false;\r\n  showModal.value = false;\r\n  if (error) {\r\n    console.log('Error while creating the record:', error);\r\n    return;\r\n  }\r\n  formRef.value.resetFields();\r\n  fetchEventNotifications();\r\n};\r\n\r\nconst handleEdit = ({ id, event_type, Organization, recipients }) => {\r\n  recordToEdit.value = id;\r\n  formState.value = {\r\n    event_type,\r\n    Organization,\r\n    recipients,\r\n  };\r\n  showModal.value = true;\r\n};\r\n\r\nconst updateEventNotification = async (values) => {\r\n  isCreating.value = true;\r\n\r\n  const [error] = await EventNotificationService.updateEventNotification(\r\n    recordToEdit.value,\r\n    values\r\n  );\r\n  isCreating.value = false;\r\n  showModal.value = false;\r\n  if (error) {\r\n    console.log('Error while updating the record:', error);\r\n    return;\r\n  }\r\n  formRef.value.resetFields();\r\n  fetchEventNotifications();\r\n  onModalClose();\r\n};\r\n\r\nconst deleteEventNotification = async (id) => {\r\n  isLoading.value = true;\r\n  const [error] = await EventNotificationService.deleteEventNotification(id);\r\n  isLoading.value = false;\r\n\r\n  if (error) {\r\n    console.log('Error while deleting the record:', error);\r\n    return;\r\n  }\r\n\r\n  fetchEventNotifications();\r\n};\r\n\r\nconst handleSubmit = () => {\r\n  formRef.value\r\n    .validateFields()\r\n    .then((values) => {\r\n      if (recordToEdit.value) updateEventNotification(values);\r\n      else createEventNotification(values);\r\n    })\r\n    .catch((info) => {\r\n      console.log('Validate Failed:', info);\r\n    });\r\n};\r\n\r\nonMounted(() => {\r\n  fetchEventNotifications();\r\n  store.dispatch('getOrganizations');\r\n});\r\n</script>\r\n<style lang=\"\"></style>\r\n","import script from \"./EventNotification.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./EventNotification.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","import { render } from \"./Index.vue?vue&type=template&id=09cee2c0\"\nimport script from \"./Index.vue?vue&type=script&lang=js\"\nexport * from \"./Index.vue?vue&type=script&lang=js\"\n\nimport exportComponent from \"C:\\\\Users\\\\mahal\\\\OneDrive\\\\Documents\\\\Retrocausal\\\\portal_frontend\\\\node_modules\\\\vue-loader-v16\\\\dist\\\\exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render]])\n\nexport default __exports__"],"sourceRoot":""}