{"version":3,"file":"AlertsCustomCreatePair-9d0beefd.js","sources":["../../../app/javascript/components/alerts/custom/create/AlertsCustomCreatePair.vue"],"sourcesContent":["<template>\n  <div class=\"border-b border-gray-800 px-6 py-4\">\n    <div v-if=\"loading\" class=\"flex flex-col\">\n      <BaseLoader class=\"m-auto h-5 w-5\" />\n    </div>\n    <div v-else>\n      <div class=\"flex flex-col space-y-2\">\n        <div class=\"flex items-center space-x-2\">\n          <span class=\"block text-sm font-semibold text-gray-200\">Pair Selection</span>\n        </div>\n        <div class=\"space-y-1 rounded border border-gray-800 bg-gray-800/25 p-4\">\n          <p class=\"text-xs text-gray-400\">\n            Pair <span v-if=\"alertData.metric.required\" class=\"ml-1 text-xs text-red-400\">{{ validationError }}</span>\n          </p>\n          <BaseSelect\n            button-width-class=\"w-full\"\n            dropdown-width-class=\"w-full\"\n            :options=\"allExchanges\"\n            v-model=\"alertData.exchange\"\n            :searchable=\"true\"\n            :placeholder=\"'Select Exchange'\"\n          />\n          <DropdownAsyncSelect\n            v-model=\"alertData.pair\"\n            dropdown-width-class=\"w-full\"\n            button-width-class=\"w-full\"\n            :placeholder=\"'Select a Pair'\"\n            :pre-selected-options=\"alertData.pair || []\"\n            :async-options=\"fetchExchangePairs\"\n          />\n          <div class=\"flex flex-col\">\n            <div class=\"relative flex w-full items-center\">\n              <div class=\"grid w-full grid-flow-col grid-cols-9 items-center space-x-1\">\n                <div class=\"col-span-4\">\n                  <BaseSelect\n                    dropdown-width-class=\"w-full\"\n                    button-width-class=\"w-full\"\n                    v-model=\"alertData.metric.id\"\n                    :options=\"[{ id: 'price', label: 'Price' }]\"\n                    id=\"metric-dropdown\"\n                  />\n                </div>\n\n                <div class=\"col-span-1\">\n                  <BaseSelect\n                    v-model=\"alertData.metric.comparison\"\n                    dropdown-width-class=\"w-full\"\n                    button-width-class=\"w-full\"\n                    placeholder=\">\"\n                    :options=\"\n                      allComparisons.map(r => {\n                        return { id: r.id, label: r.text };\n                      })\n                    \"\n                    class=\"comparison-dropdown\"\n                  />\n                </div>\n\n                <div class=\"col-span-4\">\n                  <BaseNumberInput class=\"w-full whitespace-nowrap\" v-model=\"alertData.metric.value\" required>\n                    <template #left v-if=\"alertData.pair\">\n                      {{ truncate(alertData.pair.split('/')[1] == 'USD' ? '$' : alertData.pair.split('/')[1], 10) }}\n                    </template>\n                  </BaseNumberInput>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n<script setup>\nimport { onBeforeUnmount, onMounted, ref, watch, computed } from 'vue';\nimport useEmitter from '@/composeables/emitter';\nimport useHttp from '@/composeables/http';\nimport { CcxtApi } from '@/api/ccxtApi';\nimport DropdownAsyncSelect from '@/components/dropdown/DropdownAsyncSelect.vue';\nimport { truncate } from '@/composeables/filters';\n\nconst emitter = useEmitter();\nconst $http = useHttp();\nconst api = new CcxtApi();\nconst props = defineProps({\n  alert: { type: Object, default: () => null }\n});\n\nconst loading = ref(true);\n\n//ALERT\nconst defaultAlertData = {\n  metric: {\n    id: 'price',\n    name: 'Price',\n    comparison: 'greater_than',\n    value: null,\n    type: null,\n    required: false\n  },\n  exchange: null,\n  pair: null\n};\nconst alertData = ref(defaultAlertData);\n\nonMounted(() => {\n  emitter.$on('clear:alert', () => {\n    clearAlertData();\n  });\n});\nonBeforeUnmount(() => {\n  emitter.$off('clear:alert');\n});\n\nfunction clearAlertData() {\n  alertData.value = defaultAlertData;\n}\n\nwatch(\n  alertData,\n  () => {\n    emitter.$emit('config:alert', { config: alertData.value });\n  },\n  { deep: true, immediate: true }\n);\n\n//COMPARISONS\nconst allComparisons = ref([\n  { id: 'greater_than', text: '>' },\n  { id: 'less_than', text: '<' }\n]);\n\n//VALIDATION\nconst validationError = ref('');\nfunction showValidationError(data) {\n  if (!alertData.value.exchange) {\n    alertData.value.metric.required = true;\n    validationError.value = \"Exchange can't be blank\";\n  } else if (!alertData.value.pair) {\n    alertData.value.metric.required = true;\n    validationError.value = \"Pair can't be blank\";\n  } else if (!alertData.value.metric.id || !alertData.value.metric.value) {\n    alertData.value.metric.required = true;\n    validationError.value = \"Price can't be blank\";\n  }\n  setTimeout(function () {\n    alertData.value.metric.required = false;\n    validationError.value = null;\n  }, 3000);\n}\n\n//Exchange\nonMounted(() => {\n  if (props.alert) {\n    alertData.value = props.alert.config;\n  }\n  fetchExchanges();\n  emitter.$on('PairForm', data => {\n    showValidationError(data);\n  });\n});\nonBeforeUnmount(() => {\n  emitter.$off('PairForm');\n});\n\nconst allExchanges = ref([]);\nasync function fetchExchanges() {\n  const resp = await api.getAllExchanges();\n  allExchanges.value = resp.map(e => {\n    return { id: e.exchange, label: e.name };\n  });\n  loading.value = false;\n}\n\nasync function fetchExchangePairs(search) {\n  if (!alertData.value.exchange) {\n    return;\n  }\n  const resp = await api.getExchangePairs({\n    per_page: 100,\n    my_exchanges: [alertData.value.exchange],\n    search: search,\n    sort_column: 'day_volume',\n    sort_order: 'desc'\n  });\n  return resp.data.data.map(p => {\n    return { id: p.pair, label: p.pair };\n  });\n}\n\nwatch(\n  () => alertData.value.exchange,\n  (newVal, oldVal) => {\n    if (oldVal != newVal && oldVal != null) {\n      alertData.value.pair = null;\n      emitter.$emit('clear:search');\n    }\n    emitter.$emit('fetch:data');\n  },\n  { deep: true }\n);\n</script>\n"],"names":["emitter","useEmitter","useHttp","api","CcxtApi","loading","ref","defaultAlertData","alertData","onMounted","clearAlertData","onBeforeUnmount","watch","allComparisons","validationError","showValidationError","data","props","fetchExchanges","allExchanges","resp","e","fetchExchangePairs","search","p","newVal","oldVal"],"mappings":"6qCAiFMA,EAAUC,EAAU,EACZC,EAAU,EACxB,MAAMC,EAAM,IAAIC,EAKVC,EAAUC,EAAI,EAAI,EAGlBC,EAAmB,CACvB,OAAQ,CACN,GAAI,QACJ,KAAM,QACN,WAAY,eACZ,MAAO,KACP,KAAM,KACN,SAAU,EACX,EACD,SAAU,KACV,KAAM,IACR,EACMC,EAAYF,EAAIC,CAAgB,EAEtCE,EAAU,IAAM,CACdT,EAAQ,IAAI,cAAe,IAAM,CAC/BU,GACJ,CAAG,CACH,CAAC,EACDC,EAAgB,IAAM,CACpBX,EAAQ,KAAK,aAAa,CAC5B,CAAC,EAED,SAASU,GAAiB,CACxBF,EAAU,MAAQD,CACpB,CAEAK,EACEJ,EACA,IAAM,CACJR,EAAQ,MAAM,eAAgB,CAAE,OAAQQ,EAAU,KAAK,CAAE,CAC1D,EACD,CAAE,KAAM,GAAM,UAAW,EAAM,CACjC,EAGA,MAAMK,EAAiBP,EAAI,CACzB,CAAE,GAAI,eAAgB,KAAM,GAAK,EACjC,CAAE,GAAI,YAAa,KAAM,GAAK,CAChC,CAAC,EAGKQ,EAAkBR,EAAI,EAAE,EAC9B,SAASS,EAAoBC,EAAM,CAC5BR,EAAU,MAAM,SAGTA,EAAU,MAAM,MAGjB,CAACA,EAAU,MAAM,OAAO,IAAM,CAACA,EAAU,MAAM,OAAO,SAC/DA,EAAU,MAAM,OAAO,SAAW,GAClCM,EAAgB,MAAQ,yBAJxBN,EAAU,MAAM,OAAO,SAAW,GAClCM,EAAgB,MAAQ,wBAJxBN,EAAU,MAAM,OAAO,SAAW,GAClCM,EAAgB,MAAQ,2BAQ1B,WAAW,UAAY,CACrBN,EAAU,MAAM,OAAO,SAAW,GAClCM,EAAgB,MAAQ,IACzB,EAAE,GAAI,CACT,CAGAL,EAAU,IAAM,CACVQ,EAAM,QACRT,EAAU,MAAQS,EAAM,MAAM,QAEhCC,IACAlB,EAAQ,IAAI,WAAYgB,GAAQ,CAC9BD,EAAwB,CAC5B,CAAG,CACH,CAAC,EACDJ,EAAgB,IAAM,CACpBX,EAAQ,KAAK,UAAU,CACzB,CAAC,EAED,MAAMmB,EAAeb,EAAI,CAAA,CAAE,EAC3B,eAAeY,GAAiB,CAC9B,MAAME,EAAO,MAAMjB,EAAI,kBACvBgB,EAAa,MAAQC,EAAK,IAAIC,IACrB,CAAE,GAAIA,EAAE,SAAU,MAAOA,EAAE,MACnC,EACDhB,EAAQ,MAAQ,EAClB,CAEA,eAAeiB,EAAmBC,EAAQ,CACxC,OAAKf,EAAU,MAAM,UAGR,MAAML,EAAI,iBAAiB,CACtC,SAAU,IACV,aAAc,CAACK,EAAU,MAAM,QAAQ,EACvC,OAAQe,EACR,YAAa,aACb,WAAY,MAChB,CAAG,GACW,KAAK,KAAK,IAAIC,IACjB,CAAE,GAAIA,EAAE,KAAM,MAAOA,EAAE,MAC/B,EAXC,MAYJ,CAEA,OAAAZ,EACE,IAAMJ,EAAU,MAAM,SACtB,CAACiB,EAAQC,IAAW,CACdA,GAAUD,GAAUC,GAAU,OAChClB,EAAU,MAAM,KAAO,KACvBR,EAAQ,MAAM,cAAc,GAE9BA,EAAQ,MAAM,YAAY,CAC3B,EACD,CAAE,KAAM,EAAM,CAChB"}