{"version":3,"file":"AlertDeliveryMessengerOption-da099cac.js","sources":["../../../app/javascript/components/alerts/delivery/AlertDeliveryMessengerOption.vue"],"sourcesContent":["<template>\n  <div class=\"flex flex-col\">\n    <div class=\"flex\">\n      <AlertsDeliveryMessengerChannel\n        :open=\"rowChecked\"\n        :items=\"channelOptions\"\n        :alert-detail=\"{ name: alertName, entity: selectedAlertType }\"\n        :active-chat-option=\"selectedMessengerChat ? selectedMessengerChat : null\"\n        :in-place-search=\"true\"\n        @select=\"setMessengerData($event)\"\n        @close=\"openMessengerDropdown = false\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, watch, computed } from 'vue';\nimport { truncate } from '@/composeables/filters';\nimport AlertsDeliveryMessengerChannel from '@/components/alerts/delivery/AlertsDeliveryMessengerChannels.vue';\nimport { useMapGetter } from '@/store/map-state';\nimport { getChannelName } from '@/composeables/chat';\nimport orderBy from 'lodash/orderBy';\nimport { ChatBubbleLeftRightIcon, PlusIcon } from '@heroicons/vue/20/solid';\n\nconst { requestChannels, channels, rejectedChannels } = useMapGetter();\nconst plusIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-4 h-4\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 4.5v15m7.5-7.5h-15\" />\n             </svg>`;\n\nconst emit = defineEmits(['set-row', 'set-messenger-data']);\nconst props = defineProps({\n  selectedAlertType: { type: Object, default: () => {} },\n  alertName: { type: String, default: '' },\n  checked: { type: Boolean, default: false },\n  selectedMessengerChat: { type: Object, default: () => {} }\n});\n\nconst openMessengerDropdown = ref(false);\nconst rowChecked = ref(props.checked);\n\n// CHANNELS\nconst channelOptions = computed(() => {\n  let defaultOption = {\n    id: 'new',\n    html: `<div class=\"py-0.5 flex items-center text-xs\" style=\"margin-left: 2px\"> ${plusIcon} <span class=\"mt-0.5 ml-0.5\">Create New Chat</span></div>`\n  };\n  let options = [];\n  let channelData = channels.value.filter(\n    c => !rejectedChannels.value.includes(c.cid) && !requestChannels.value.includes(c.cid)\n  );\n  let allChannels = orderBy(\n    channelData.filter(c => !requestChannels.value.includes(c.cid)),\n    function (o) {\n      return getChannelName(o);\n    },\n    ['asc']\n  );\n  allChannels.forEach(c => {\n    let imageObj = '';\n    let checkbox = `<div class=\"w-4 h-4 border mr-1 rounded-full ${\n      props.selectedMessengerChat && props.selectedMessengerChat.id == c.id\n        ? 'bg-blue-600 border-blue-600'\n        : 'bg-gray-800 border-grid'\n    }\"></div>`;\n    if (c.data.image) {\n      imageObj = `<img class=\"w-5 h-5 rounded-full object-cover\" src=\"${c.data.image}\"/>`;\n    } else {\n      imageObj = `<div class=\"w-5 h-5 rounded-full text-gray-900 uupercase flex flex-col items-center justify-center ${\n        c.data.background_color ? '' : 'bg-gray-500'\n      }\" style=\"background-color:${c.data.background_color}\">${getChannelName(c) ? getChannelName(c)[0] : '<>'}</div>`;\n    }\n    options.push({\n      id: c.id,\n      text: getChannelName(c),\n      html: `<div class=\"flex space-x-2 items-center justify-between h-5 pl-1\">\n                <div class=\"flex items-center\">\n                   ${imageObj}\n                   <div class=\"break-words mx-2 text-gray-100 text-xs\" >${truncate(getChannelName(c), 40)}</div>\n                </div>\n                <div>${checkbox}</div>\n             </div>`\n    });\n  });\n  options.unshift(defaultOption);\n  return options;\n});\n\n// CHAT DATA\nfunction setMessengerData(data) {\n  let channelData = data.cid ? data : channels.value.find(x => x.id == data);\n  if (channelData) {\n    emit('set-messenger-data', {\n      id: channelData.id,\n      name: getChannelName(channelData)\n    });\n    rowChecked.value = true;\n  }\n}\n\nwatch(rowChecked, () => {\n  emit('set-row', rowChecked.value);\n});\n\nwatch(\n  () => props.checked,\n  first => {\n    rowChecked.value = first;\n  }\n);\n</script>\n"],"names":["plusIcon","requestChannels","channels","rejectedChannels","useMapGetter","openMessengerDropdown","ref","rowChecked","props","channelOptions","computed","defaultOption","options","channelData","c","orderBy","o","getChannelName","imageObj","checkbox","truncate","setMessengerData","data","x","emit","watch","first"],"mappings":"kcA0BMA,EAAW;AAAA;AAAA,gTADX,CAAE,gBAAAC,EAAiB,SAAAC,EAAU,iBAAAC,CAAkB,EAAGC,EAAY,EAa9DC,EAAwBC,EAAI,EAAK,EACjCC,EAAaD,EAAIE,EAAM,OAAO,EAG9BC,EAAiBC,EAAS,IAAM,CACpC,IAAIC,EAAgB,CAClB,GAAI,MACJ,KAAM,2EAA2EX,CAAQ,2DAC7F,EACMY,EAAU,CAAA,EACVC,EAAcX,EAAS,MAAM,OAC/BY,GAAK,CAACX,EAAiB,MAAM,SAASW,EAAE,GAAG,GAAK,CAACb,EAAgB,MAAM,SAASa,EAAE,GAAG,CACzF,EAQE,OAPkBC,EAChBF,EAAY,OAAOC,GAAK,CAACb,EAAgB,MAAM,SAASa,EAAE,GAAG,CAAC,EAC9D,SAAUE,EAAG,CACX,OAAOC,EAAeD,CAAC,CACxB,EACD,CAAC,KAAK,CACV,EACc,QAAQF,GAAK,CACvB,IAAII,EAAW,GACXC,EAAW,gDACbX,EAAM,uBAAyBA,EAAM,sBAAsB,IAAMM,EAAE,GAC/D,8BACA,yBACL,WACGA,EAAE,KAAK,MACTI,EAAW,uDAAuDJ,EAAE,KAAK,KAAK,MAE9EI,EAAW,sGACTJ,EAAE,KAAK,iBAAmB,GAAK,aAChC,6BAA4BA,EAAE,KAAK,gBAAgB,KAAKG,EAAeH,CAAC,EAAIG,EAAeH,CAAC,EAAE,CAAC,EAAI,IAAI,SAE1GF,EAAQ,KAAK,CACX,GAAIE,EAAE,GACN,KAAMG,EAAeH,CAAC,EACtB,KAAM;AAAA;AAAA,qBAESI,CAAQ;AAAA,0EAC6CE,EAASH,EAAeH,CAAC,EAAG,EAAE,CAAC;AAAA;AAAA,uBAElFK,CAAQ;AAAA,oBAE/B,CAAK,CACL,CAAG,EACDP,EAAQ,QAAQD,CAAa,EACtBC,CACT,CAAC,EAGD,SAASS,EAAiBC,EAAM,CAC9B,IAAIT,EAAcS,EAAK,IAAMA,EAAOpB,EAAS,MAAM,KAAKqB,GAAKA,EAAE,IAAMD,CAAI,EACrET,IACFW,EAAK,qBAAsB,CACzB,GAAIX,EAAY,GAChB,KAAMI,EAAeJ,CAAW,CACtC,CAAK,EACDN,EAAW,MAAQ,GAEvB,CAEA,OAAAkB,EAAMlB,EAAY,IAAM,CACtBiB,EAAK,UAAWjB,EAAW,KAAK,CAClC,CAAC,EAEDkB,EACE,IAAMjB,EAAM,QACZkB,GAAS,CACPnB,EAAW,MAAQmB,CACpB,CACH"}