{"version":3,"file":"ModalAddToWatchlist-6981a7fb.js","sources":["../../../app/javascript/components/modal/ModalAddToWatchlist.vue"],"sourcesContent":["<template>\n  <BaseDialog :model-value=\"modal.status\" size-class=\"!max-w-xl\" @update:model-value=\"close\">\n    <template #header v-if=\"!hasNoWatchlists\">\n      <template v-if=\"entity == 'coins'\">\n        <div class=\"flex items-center\">\n          <span class=\"font-medium\">Select watchlist(s) to {{ modal.payload.mode }}</span>\n          <div class=\"ml-2 flex items-center\">\n            <CoinIcon :coin=\"payload.uid\" class=\"h-5 w-5\" />\n            <span class=\"font-medium\">{{ payload.name }}</span>\n          </div>\n        </div>\n      </template>\n      <template v-if=\"entity == 'companies'\">\n        Select watchlist(s) to {{ modal.payload.mode }} {{ payload.name }}\n      </template>\n      <template v-if=\"entity == 'apefluencer_accounts'\">\n        Select watchlist(s) to {{ modal.payload.mode }} @{{ payload.screen_name }}\n      </template>\n    </template>\n    <template #default>\n      <template v-if=\"hasNoWatchlists && watchlistsReady\">\n        <div class=\"items-center text-center\">\n          <p>Looks like you don't have any watchlists yet.</p>\n          <BaseButton @press=\"createWatchlist\" class=\"mx-auto my-4\">Create a Watchlist</BaseButton>\n        </div>\n      </template>\n      <template v-else-if=\"watchlistOptions.length == 0 && watchlistsReady\">\n        <div class=\"my-4 flex items-center text-xs\">\n          <ExclamationCircleIcon class=\"mr-1 h-4 w-4\" />\n          {{ infoMessage }}\n        </div>\n      </template>\n      <template v-else>\n        <div class=\"py-4\">\n          <BaseSelect\n            v-model=\"selectedWatchlists\"\n            multiple\n            portal\n            searchable\n            button-width-class=\"w-full\"\n            dropdown-width-class=\"w-96\"\n            placeholder=\"Select Watchlists\"\n            :options=\"watchlistOptions\"\n          />\n        </div>\n      </template>\n    </template>\n    <template #footer v-if=\"!hasNoWatchlists\">\n      <div class=\"flex w-full justify-between\">\n        <BaseButton size=\"sm\" type=\"secondary\" @press=\"close\">Cancel</BaseButton>\n        <div class=\"flex space-x-2\">\n          <BaseButton size=\"sm\" type=\"primary\" @press=\"createWatchlist()\" v-if=\"addMode\"> Create Watchlist </BaseButton>\n          <BaseButton\n            size=\"sm\"\n            class=\"whitespace-nowrap\"\n            :busy=\"buttonBusy\"\n            :disabled=\"buttonDisabled\"\n            @press=\"addMode ? update() : remove()\"\n          >\n            <template v-if=\"selectedWatchlists.length\">\n              {{ addMode ? 'Add to ' : 'Remove from ' }}\n              {{ selectedWatchlists.length }} watchlists\n            </template>\n            <template v-else> No watchlist selected </template>\n          </BaseButton>\n        </div>\n      </div>\n    </template>\n  </BaseDialog>\n</template>\n<script setup>\nimport { ref, watch, computed } from 'vue';\nimport { useStore } from 'vuex';\nimport { useWatchlistStore } from '@/stores/watchlists';\nimport { ExclamationCircleIcon } from '@heroicons/vue/20/solid';\n\nconst $store = useStore();\nconst $watchlistStore = useWatchlistStore();\n\n//MODAL\nconst modal = computed(() => {\n  return $store.getters.addToWatchlistModal ? $store.state.modal : { status: false };\n});\n\nwatch(\n  () => modal.value.status,\n  () => {\n    if (!modal.value.status) selectedWatchlists.value = [];\n  }\n);\n\nconst payload = computed(() => {\n  return modal.value.payload?.payload || {};\n});\nconst addMode = computed(() => {\n  return modal.value.payload?.mode == 'add' || false;\n});\nconst entity = computed(() => {\n  return modal.value.payload ? modal.value.payload.entity : null;\n});\n\nconst hasNoWatchlists = computed(() => {\n  return allWatchlists.value.length == 0;\n});\nconst infoMessage = computed(() => {\n  let msg = 'Please create a watchlist first.';\n  if (watchlistOptions.value.length == 0) {\n    msg = addMode.value ? 'Already included in every watchlist.' : 'Not included in any watchlist yet.';\n  }\n  return msg;\n});\nfunction close() {\n  allWatchlists.value.forEach(w => {\n    w.enabled = false;\n  });\n  $store.commit('closeModal');\n}\n\n//BUTTON STATES\nconst buttonBusy = ref(false);\nconst buttonDisabled = computed(() => {\n  return selectedWatchlists.value.length == 0;\n});\n\n//REQUEST PAYLOAD\nfunction prepareRequestPayload() {\n  return {\n    watchlist_ids: selectedWatchlists.value,\n    entity: modal.value.payload.entity,\n    entity_id: modal.value.payload.entity == 'coins' ? payload.value.uid : payload.value.id,\n    entity_info: modal.value.payload.payload\n  };\n}\n\n//WATCHLISTS ACTIONS\nconst allWatchlists = ref([]);\nconst entityName = computed(() => $watchlistStore.getEntityName(entity.value));\nconst watchlists = computed(() => (entity.value ? $watchlistStore[entityName.value] : []));\nconst watchlistsReady = computed(() => (entity.value ? $watchlistStore.watchlistLoader[entityName.value] : false));\n\nconst selectedWatchlists = ref([]);\nconst watchlistOptions = computed(() => {\n  if (addMode.value) {\n    return allWatchlists.value\n      .filter(x => !x.is_subscribed)\n      .filter(x => !payload.value.watchlist_ids || !payload.value.watchlist_ids.includes(x.id));\n  } else {\n    return allWatchlists.value\n      .filter(x => !x.is_subscribed)\n      .filter(x => payload.value.watchlist_ids && payload.value.watchlist_ids.includes(x.id));\n  }\n});\n\nwatch(\n  watchlists,\n  () => {\n    allWatchlists.value = watchlists.value.map(x => {\n      return {\n        ...x,\n        label: x.name\n      };\n    });\n  },\n  { deep: true }\n);\n\nfunction createWatchlist() {\n  $watchlistStore.visitCreatePage(modal.value.payload.entity, [modal.value.payload.payload.id]);\n  close();\n}\n\nasync function update() {\n  const requestPayload = prepareRequestPayload();\n  if (addMode.value) {\n    buttonBusy.value = true;\n    await $watchlistStore.updateWatchlistEntity(requestPayload);\n    buttonBusy.value = false;\n    close();\n  }\n}\nasync function remove() {\n  const requestPayload = prepareRequestPayload();\n  await $watchlistStore.deleteWatchlistEntity(requestPayload);\n  close();\n}\n</script>\n"],"names":["$store","useStore","$watchlistStore","useWatchlistStore","modal","computed","watch","selectedWatchlists","payload","_a","addMode","entity","hasNoWatchlists","allWatchlists","infoMessage","msg","watchlistOptions","close","w","buttonBusy","ref","buttonDisabled","prepareRequestPayload","entityName","watchlists","watchlistsReady","x","createWatchlist","update","requestPayload","remove"],"mappings":"ioBA4EA,MAAMA,EAASC,EAAQ,EACjBC,EAAkBC,EAAiB,EAGnCC,EAAQC,EAAS,IACdL,EAAO,QAAQ,oBAAsBA,EAAO,MAAM,MAAQ,CAAE,OAAQ,GAC5E,EAEDM,EACE,IAAMF,EAAM,MAAM,OAClB,IAAM,CACCA,EAAM,MAAM,SAAQG,EAAmB,MAAQ,GACrD,CACH,EAEA,MAAMC,EAAUH,EAAS,IAAM,OAC7B,QAAOI,EAAAL,EAAM,MAAM,UAAZ,YAAAK,EAAqB,UAAW,CAAA,CACzC,CAAC,EACKC,EAAUL,EAAS,IAAM,OAC7B,QAAOI,EAAAL,EAAM,MAAM,UAAZ,YAAAK,EAAqB,OAAQ,OAAS,EAC/C,CAAC,EACKE,EAASN,EAAS,IACfD,EAAM,MAAM,QAAUA,EAAM,MAAM,QAAQ,OAAS,IAC3D,EAEKQ,EAAkBP,EAAS,IACxBQ,EAAc,MAAM,QAAU,CACtC,EACKC,EAAcT,EAAS,IAAM,CACjC,IAAIU,EAAM,mCACV,OAAIC,EAAiB,MAAM,QAAU,IACnCD,EAAML,EAAQ,MAAQ,uCAAyC,sCAE1DK,CACT,CAAC,EACD,SAASE,GAAQ,CACfJ,EAAc,MAAM,QAAQK,GAAK,CAC/BA,EAAE,QAAU,EAChB,CAAG,EACDlB,EAAO,OAAO,YAAY,CAC5B,CAGA,MAAMmB,EAAaC,EAAI,EAAK,EACtBC,EAAiBhB,EAAS,IACvBE,EAAmB,MAAM,QAAU,CAC3C,EAGD,SAASe,GAAwB,CAC/B,MAAO,CACL,cAAef,EAAmB,MAClC,OAAQH,EAAM,MAAM,QAAQ,OAC5B,UAAWA,EAAM,MAAM,QAAQ,QAAU,QAAUI,EAAQ,MAAM,IAAMA,EAAQ,MAAM,GACrF,YAAaJ,EAAM,MAAM,QAAQ,OACrC,CACA,CAGA,MAAMS,EAAgBO,EAAI,CAAA,CAAE,EACtBG,EAAalB,EAAS,IAAMH,EAAgB,cAAcS,EAAO,KAAK,CAAC,EACvEa,EAAanB,EAAS,IAAOM,EAAO,MAAQT,EAAgBqB,EAAW,KAAK,EAAI,CAAE,CAAC,EACnFE,EAAkBpB,EAAS,IAAOM,EAAO,MAAQT,EAAgB,gBAAgBqB,EAAW,KAAK,EAAI,EAAM,EAE3GhB,EAAqBa,EAAI,CAAA,CAAE,EAC3BJ,EAAmBX,EAAS,IAC5BK,EAAQ,MACHG,EAAc,MAClB,OAAOa,GAAK,CAACA,EAAE,aAAa,EAC5B,OAAOA,GAAK,CAAClB,EAAQ,MAAM,eAAiB,CAACA,EAAQ,MAAM,cAAc,SAASkB,EAAE,EAAE,CAAC,EAEnFb,EAAc,MAClB,OAAOa,GAAK,CAACA,EAAE,aAAa,EAC5B,OAAOA,GAAKlB,EAAQ,MAAM,eAAiBA,EAAQ,MAAM,cAAc,SAASkB,EAAE,EAAE,CAAC,CAE3F,EAEDpB,EACEkB,EACA,IAAM,CACJX,EAAc,MAAQW,EAAW,MAAM,IAAIE,IAClC,CACL,GAAGA,EACH,MAAOA,EAAE,IACjB,EACK,CACF,EACD,CAAE,KAAM,EAAM,CAChB,EAEA,SAASC,GAAkB,CACzBzB,EAAgB,gBAAgBE,EAAM,MAAM,QAAQ,OAAQ,CAACA,EAAM,MAAM,QAAQ,QAAQ,EAAE,CAAC,EAC5Fa,GACF,CAEA,eAAeW,GAAS,CACtB,MAAMC,EAAiBP,IACnBZ,EAAQ,QACVS,EAAW,MAAQ,GACnB,MAAMjB,EAAgB,sBAAsB2B,CAAc,EAC1DV,EAAW,MAAQ,GACnBF,IAEJ,CACA,eAAea,GAAS,CACtB,MAAMD,EAAiBP,IACvB,MAAMpB,EAAgB,sBAAsB2B,CAAc,EAC1DZ,GACF"}