{"version":3,"file":"ChatSearchFilter-89aaf7cc.js","sources":["../../../app/javascript/components/chat/ChatSearchFilter.vue"],"sourcesContent":["<template>\n  <div>\n    <DropdownBase\n      x-anchor=\"false\"\n      custom-classes=\"mt-2\"\n      :id=\"dropdownId\"\n      :style=\"dropdownWidth ? `width: ${dropdownWidth} !important` : ''\"\n      :custom-styles=\"dropdownMargin\"\n      :class=\"`overflow-x-hidden overflow-y-hidden ${dropdownClass}`\"\n    >\n      <div class=\"p-1\" v-if=\"search\">\n        <input\n          v-model=\"searchTerm\"\n          class=\"w-full border border-gray-700 bg-gray-900 p-0.5 px-1 py-1 focus:border-gray-700 focus:outline-none\"\n          placeholder=\"Search\"\n        />\n      </div>\n      <div\n        class=\"ml-1 mt-1 flex flex-col overflow-y-auto overflow-x-hidden px-1\"\n        :class=\"!multiple && selectedItem == 'custom_range' ? '' : 'max-h-40'\"\n      >\n        <div class=\"flex flex-col\" v-if=\"multiple\">\n          <div v-for=\"(item, i) in filteredItems\" :key=\"item.id\" class=\"mb-2 mt-1 flex items-center\">\n            <BaseCheckbox\n              :id=\"`item_${i}`\"\n              v-model=\"item.selected\"\n              @update:model-value=\"selected.includes(item.id) ? $emit('removed', item.id) : $emit('selected', item.id)\"\n            >\n              <div\n                v-if=\"item.html\"\n                v-html=\"item.html\"\n                class=\"text-md block w-full cursor-pointer select-none bg-gray-800 px-2 hover:bg-blue-900/50 hover:text-white\"\n              ></div>\n              <span v-else class=\"w-[90%] break-words text-xs font-normal leading-4 hover:text-white\">\n                {{ item.name }}\n              </span>\n            </BaseCheckbox>\n          </div>\n          <div\n            v-if=\"!searchTerm && filteredItems.length && !filteredItems[0]?.html\"\n            class=\"sticky bottom-0 w-full cursor-pointer space-y-1 bg-gray-800 py-1 text-xs font-normal leading-4 text-gray-400 hover:text-white\"\n            @click=\"$emit('clear')\"\n          >\n            Clear All\n          </div>\n        </div>\n        <div v-else>\n          <div v-for=\"(item, i) in filteredItems\" :key=\"item.id\" class=\"mb-2 mt-1 flex items-center\">\n            <label :for=\"`item_${i}`\" class=\"flex cursor-pointer items-center text-sm text-gray-300 hover:text-white\">\n              <input\n                v-model=\"selectedItem\"\n                class=\"mr-1 font-medium\"\n                type=\"radio\"\n                :id=\"`item_${i}`\"\n                :checked=\"selected && selected.includes(item.id)\"\n                :value=\"item.id\"\n              />\n              <span class=\"break-words text-xs font-normal leading-4\"> {{ item.name }} </span>\n            </label>\n          </div>\n          <div class=\"relative\" v-if=\"selectedItem == 'custom_range'\">\n            <div class=\"w-full text-xs\">\n              <ButtonDatepicker\n                format=\"MMM, DD\"\n                placeholder=\"Start Date ~ End Date\"\n                font-size=\"text-xs\"\n                custom-style=\"width: 13rem; max-width: 13rem\"\n                :range=\"true\"\n                :key=\"selectedRange\"\n                :default-date=\"selectedRange\"\n                @change=\"\n                  (date, type) => {\n                    selectedRange = date;\n                  }\n                \"\n              />\n            </div>\n          </div>\n          <div\n            v-if=\"!searchTerm\"\n            class=\"mb-2 mt-1 cursor-pointer text-xs font-normal leading-4 text-gray-400 hover:text-white\"\n            @click=\"clearDate()\"\n          >\n            Clear All\n          </div>\n        </div>\n      </div>\n      <div v-if=\"filteredItems.length === 0\" class=\"px-5 py-5 text-center text-gray-400\">No Result Found</div>\n    </DropdownBase>\n  </div>\n</template>\n<script setup>\nimport { ref, onMounted, onUnmounted, watch, computed } from 'vue';\nimport DropdownBase from '@/components/dropdown/DropdownBase.vue';\nimport ButtonDatepicker from '@/components/ButtonDatepicker.vue';\n\nconst props = defineProps({\n  items: Array,\n  dropdownWidth: String,\n  dropdownClass: String,\n  dropdownMargin: String,\n  selected: Array,\n  selectedDateRange: Array,\n  multiple: Boolean,\n  search: {\n    type: Boolean,\n    default: false\n  },\n  searchText: String\n});\nconst $emit = defineEmits(['selected-date-range', 'selected', 'close', 'clear', 'removed']);\n\n// SEARCH\nconst searchTerm = ref('');\nconst filteredItems = computed(() => {\n  return searchTerm.value.trim().length > 0\n    ? editableItems.value.filter(i => (i.name ? i.name.toLowerCase().includes(searchTerm.value.toLowerCase()) : false))\n    : editableItems.value;\n});\nwatch(\n  () => props.searchText,\n  (newVal, oldVal) => {\n    searchTerm.value = props.searchText;\n  }\n);\n\n// SELECTED DATA\nconst selectedItem = ref('');\nconst editableItems = ref([]);\nfunction setEditableItems() {\n  editableItems.value = props.items.map(i => {\n    return {\n      ...i,\n      selected: props.selected?.includes(i.id) || false\n    };\n  });\n}\nonMounted(() => {\n  if (props.selected && props.selected.length > 0 && !props.multiple) {\n    selectedItem.value = props.selected[0];\n  }\n  setEditableItems();\n});\nwatch(\n  () => props.items,\n  () => {\n    setEditableItems();\n  }\n);\nwatch(\n  () => selectedItem.value,\n  (newVal, oldVal) => {\n    if (selectedItem.value !== '') {\n      $emit('selected', selectedItem.value);\n    }\n  }\n);\n\nconst selectedRange = ref([]);\nonMounted(() => {\n  if (props.selectedDateRange && props.selectedDateRange.length > 0) {\n    selectedRange.value = props.selectedDateRange;\n  }\n});\nwatch(\n  () => selectedRange.value,\n  (newVal, oldVal) => {\n    if (selectedRange.value.length > 0) {\n      $emit('selected-date-range', selectedRange.value);\n    }\n  }\n);\n\n// DROPDOWN\nconst dropdownId = ref(`dropdown_${Math.random()}`);\nconst droppedDown = ref(false);\n\nfunction close(e) {\n  const drop = document.getElementById(dropdownId.value);\n  const datepickerBody = document.getElementsByClassName('mx-datepicker-content');\n  const datepicker = document.getElementsByClassName('datepicker');\n  let datePickerClicked = datepicker.length > 0 ? datepicker[0].contains(e.target) : false;\n  let datepickerBodyClicked = datepickerBody.length > 0 ? datepickerBody[0].contains(e.target) : false;\n  if (\n    !drop.contains(e.target) &&\n    droppedDown.value &&\n    e.target.id !== dropdownId.value &&\n    !datePickerClicked &&\n    !datepickerBodyClicked\n  ) {\n    droppedDown.value = false;\n    $emit('close');\n  } else {\n    droppedDown.value = true;\n  }\n}\n\n// OTHERS\nfunction clearDate() {\n  selectedItem.value = '';\n  selectedRange.value = [];\n  $emit('clear');\n}\n\nonMounted(() => {\n  document.addEventListener('click', close);\n});\n\nonUnmounted(() => {\n  document.removeEventListener('click', close);\n});\n</script>\n"],"names":["searchTerm","ref","filteredItems","computed","editableItems","i","watch","props","newVal","oldVal","selectedItem","setEditableItems","_a","onMounted","$emit","selectedRange","dropdownId","droppedDown","close","e","drop","datepickerBody","datepicker","datePickerClicked","datepickerBodyClicked","clearDate","onUnmounted"],"mappings":"6nCAiHMA,EAAaC,EAAI,EAAE,EACnBC,EAAgBC,EAAS,IACtBH,EAAW,MAAM,KAAM,EAAC,OAAS,EACpCI,EAAc,MAAM,OAAOC,GAAMA,EAAE,KAAOA,EAAE,KAAK,YAAa,EAAC,SAASL,EAAW,MAAM,YAAa,CAAA,EAAI,EAAM,EAChHI,EAAc,KACnB,EACDE,EACE,IAAMC,EAAM,WACZ,CAACC,EAAQC,IAAW,CAClBT,EAAW,MAAQO,EAAM,UAC1B,CACH,EAGA,MAAMG,EAAeT,EAAI,EAAE,EACrBG,EAAgBH,EAAI,CAAA,CAAE,EAC5B,SAASU,GAAmB,CAC1BP,EAAc,MAAQG,EAAM,MAAM,IAAIF,GAAK,OACzC,MAAO,CACL,GAAGA,EACH,WAAUO,EAAAL,EAAM,WAAN,YAAAK,EAAgB,SAASP,EAAE,MAAO,EAClD,CACA,CAAG,CACH,CACAQ,EAAU,IAAM,CACVN,EAAM,UAAYA,EAAM,SAAS,OAAS,GAAK,CAACA,EAAM,WACxDG,EAAa,MAAQH,EAAM,SAAS,CAAC,GAEvCI,GACF,CAAC,EACDL,EACE,IAAMC,EAAM,MACZ,IAAM,CACJI,GACD,CACH,EACAL,EACE,IAAMI,EAAa,MACnB,CAACF,EAAQC,IAAW,CACdC,EAAa,QAAU,IACzBI,EAAM,WAAYJ,EAAa,KAAK,CAEvC,CACH,EAEA,MAAMK,EAAgBd,EAAI,CAAA,CAAE,EAC5BY,EAAU,IAAM,CACVN,EAAM,mBAAqBA,EAAM,kBAAkB,OAAS,IAC9DQ,EAAc,MAAQR,EAAM,kBAEhC,CAAC,EACDD,EACE,IAAMS,EAAc,MACpB,CAACP,EAAQC,IAAW,CACdM,EAAc,MAAM,OAAS,GAC/BD,EAAM,sBAAuBC,EAAc,KAAK,CAEnD,CACH,EAGA,MAAMC,EAAaf,EAAI,YAAY,KAAK,OAAM,CAAE,EAAE,EAC5CgB,EAAchB,EAAI,EAAK,EAE7B,SAASiB,EAAMC,EAAG,CAChB,MAAMC,EAAO,SAAS,eAAeJ,EAAW,KAAK,EAC/CK,EAAiB,SAAS,uBAAuB,uBAAuB,EACxEC,EAAa,SAAS,uBAAuB,YAAY,EAC/D,IAAIC,EAAoBD,EAAW,OAAS,EAAIA,EAAW,CAAC,EAAE,SAASH,EAAE,MAAM,EAAI,GAC/EK,EAAwBH,EAAe,OAAS,EAAIA,EAAe,CAAC,EAAE,SAASF,EAAE,MAAM,EAAI,GAE7F,CAACC,EAAK,SAASD,EAAE,MAAM,GACvBF,EAAY,OACZE,EAAE,OAAO,KAAOH,EAAW,OAC3B,CAACO,GACD,CAACC,GAEDP,EAAY,MAAQ,GACpBH,EAAM,OAAO,GAEbG,EAAY,MAAQ,EAExB,CAGA,SAASQ,GAAY,CACnBf,EAAa,MAAQ,GACrBK,EAAc,MAAQ,GACtBD,EAAM,OAAO,CACf,CAEA,OAAAD,EAAU,IAAM,CACd,SAAS,iBAAiB,QAASK,CAAK,CAC1C,CAAC,EAEDQ,EAAY,IAAM,CAChB,SAAS,oBAAoB,QAASR,CAAK,CAC7C,CAAC"}