{"version":3,"file":"ChatCreateChannelModal-2718bd1c.js","sources":["../../../app/javascript/components/chat/ChatCreateChannelModal.vue"],"sourcesContent":["<template>\n  <BaseDialog :model-value=\"true\" size-class=\"!max-w-3xl\" @update:model-value=\"$emit('close')\">\n    <template #header>\n      {{ modalTitle }}\n    </template>\n    <template #default>\n      <div v-show=\"page == 1\" class=\"flex-col items-center space-y-2 py-1\">\n        <div class=\"flex w-full items-center space-x-2 rounded bg-gray-800 px-3\" v-if=\"selectedUsers.length > 1\">\n          <input\n            v-model=\"channelName\"\n            class=\"h-8 w-full border-none bg-gray-800 text-xs font-normal leading-4 text-white outline-none focus:border-none\"\n            placeholder=\"Title chat\"\n            maxlength=\"64\"\n          />\n        </div>\n        <span v-if=\"channelNameError.length > 0 && selectedUsers.length > 1\" class=\"text-sm text-red-400\">\n          {{ channelNameError }}\n        </span>\n        <div class=\"text-base font-semibold\" :class=\"selectedUsers.length > 1 ? 'pt-4' : ''\">Members</div>\n        <ChatUserSelect\n          :users=\"users\"\n          :selected-team-tab=\"selectedTeamTab\"\n          :searched-term=\"searchedTerm\"\n          @user-selected=\"$event.selected = true\"\n          @option-removed=\"$event.selected = false\"\n          @team-tab-selected=\"selectedTeamTab = $event\"\n        />\n      </div>\n      <div v-show=\"page == 2\" class=\"flex-col items-center space-y-2 pt-4\">\n        <div>\n          <ChatImage size=\"xl\" :item=\"{ name: channelName, background_color: channelColor }\"></ChatImage>\n          <div class=\"my-2 mt-3 text-base font-semibold leading-6\">{{ channelName }}</div>\n          <span class=\"text-xs font-semibold uppercase leading-4 tracking-wider text-gray-400\">Members</span>\n          <div class=\"users_selection flex max-h-40 flex-wrap items-center overflow-y-scroll\">\n            <div\n              v-for=\"user in selectedUsers\"\n              :key=\"user.id\"\n              class=\"mr-2 mt-2 flex h-8 flex-wrap items-center space-x-1 rounded bg-gray-800 p-1 px-3 hover:bg-gray-700\"\n            >\n              <span class=\"text-xs font-medium leading-4\">{{ user.name }}</span>\n              <XMarkIcon\n                class=\"h-3 w-3 text-gray-400\"\n                @click=\"\n                  user.selected = false;\n                  page = selectedUsers.length == 0 ? 1 : page;\n                \"\n              />\n            </div>\n          </div>\n        </div>\n        <div>\n          <div class=\"pb-1 pt-4 text-xs font-semibold uppercase tracking-wider text-gray-400\">User Settings</div>\n        </div>\n        <ChannelPermissions\n          :user-settings=\"settings\"\n          :externalteam=\"selectedExternalUsers.length > 0\"\n          @settings-updated=\"updateSettings($event)\"\n        ></ChannelPermissions>\n      </div>\n    </template>\n    <template #footer>\n      <div class=\"mt-2 flex w-full justify-end space-x-2 px-2 pt-5\" :class=\"channelNameError ? 'mt-10' : ''\">\n        <div v-show=\"page == 2\" class=\"mr-auto flex cursor-pointer items-center\" @click=\"page = page - 1\">\n          <span class=\"text-sm font-medium leading-5 text-gray-100 hover:text-gray-300\">Back</span>\n        </div>\n        <div class=\"flex items-center space-x-2\">\n          <BaseButton type=\"secondary\" @press=\"$emit('close')\">Cancel</BaseButton>\n          <BaseButton\n            v-if=\"page == 1\"\n            style=\"min-width: 95px\"\n            :disabled=\"selectedUsers.length < 1\"\n            @press=\"goToNextPage\"\n          >\n            Next\n          </BaseButton>\n          <BaseButton :busy=\"buttonBusy\" v-else @press=\"createChannel()\">Confirm</BaseButton>\n        </div>\n      </div>\n    </template>\n  </BaseDialog>\n</template>\n\n<script setup>\nimport { onMounted, ref, computed, watch, reactive } from 'vue';\nimport ChatUserSelect from './ChatUserSelect.vue';\nimport ChannelPermissions from './ChatChannelPermissions.vue';\nimport ChatImage from './ChatImage.vue';\nimport { useMapGetter } from '@/store/map-state';\nimport { saveNotificationPreference, getColor } from '@/composeables/chat';\nimport useEmitter from '@/composeables/emitter';\nimport useHttp from '@/composeables/http';\nimport { XMarkIcon } from '@heroicons/vue/20/solid';\n\nconst { client, streamUser, streamUsers, session } = useMapGetter();\nconst $emitter = useEmitter();\nconst $http = useHttp();\nconst $emit = defineEmits(['close']);\n\nconst props = defineProps({\n  channels: { type: Array, default: () => [] },\n  searchedTerm: { type: String, default: null },\n  searchedUser: { type: Object, default: null }\n});\n\n// SETTINGS\nconst settings = reactive({\n  message_history_access: false,\n  add_member_access: false,\n  note: ''\n});\n\nfunction updateSettings(data) {\n  Object.assign(settings, data);\n}\n\n// USERS\nconst users = ref([]);\n\nconst selectedUsers = computed(() => {\n  return users.value.filter(x => x.selected);\n});\n\nconst selectedExternalUsers = computed(() => {\n  let users =\n    selectedUsers.value\n      .filter(user => (user.teams ? user.team_id != streamUser.value.team_id : false))\n      .map(user => user.id) || [];\n  return users;\n});\n\nfunction addMemberText(selectedTeamMembers) {\n  let firstThreeMembers = selectedTeamMembers.slice(0, 3);\n  let text = `{{user:${streamUser.value.id}}} added ${firstThreeMembers.map(u => `{{user:${u.id}}}`).join(', ')}`;\n  if (firstThreeMembers.length === 3 && !(selectedTeamMembers.length - 3) <= 0) {\n    text += ` and ${selectedTeamMembers.length - 3} other${selectedTeamMembers.length - 3 > 1 ? 's' : ''}`;\n  }\n  text += ' to the chat.';\n  return text;\n}\n\nfunction messageMembers(teamMembers) {\n  let data = [];\n  data.push({ id: streamUser.value.id, name: streamUser.value.name });\n  let firstThreeMembers = teamMembers.slice(0, 3);\n  firstThreeMembers.forEach(m => {\n    data.push({ id: m.id, name: m.name });\n  });\n  return data;\n}\n\nonMounted(() => {\n  users.value = streamUsers.value.map(x => {\n    return { ...x, selected: false };\n  });\n});\n\n// SELECTED TEAM TAB\nconst selectedTeamTab = ref('externalteam');\nonMounted(() => {\n  if (props.searchedTerm) {\n    selectedTeamTab.value = 'externalteam';\n  }\n  if (props.searchedUser) {\n    users.value.find(x => x.id == props.searchedUser.id).selected = true;\n    if (props.searchedUser.team_id == session.value.user.team_id.toString()) {\n      selectedTeamTab.value = 'team';\n    }\n  }\n});\n\n// CHANNEL\nconst channelName = ref('');\nconst channelNameError = ref('');\nconst buttonBusy = ref(false);\nconst channelColor = ref(null);\n\nwatch(\n  () => channelName.value,\n  (newVal, oldVal) => {\n    if (channelName.value) {\n      channelNameError.value = '';\n    }\n  }\n);\n\nasync function createChannel() {\n  let id = Math.random().toString(16).slice(2);\n  let channel_id = [channelName.value.replace(/[^\\w]/g, '').substring(0, 64 - id.length - 1), id].join('_');\n  buttonBusy.value = true;\n  let selectedTeamMembers = selectedUsers.value.filter(user =>\n    user.teams ? user.team_id == streamUser.value.team_id : false\n  );\n  let selectedExternalMembers = selectedExternalUsers.value;\n  selectedTeamMembers.push(client.value.user);\n  const channel = client.value.channel('messaging', channel_id, {\n    team: 'messaging',\n    background_color: channelColor.value,\n    name: channelName.value.trim(),\n    members: selectedTeamMembers.map(user => user.id),\n    channel_admins: [client.value.user.id],\n    message_history_access: settings.message_history_access,\n    add_member_access: settings.add_member_access,\n    note: settings.note,\n    invited_users: selectedExternalMembers.length\n      ? [\n          {\n            invited_users: selectedExternalMembers,\n            invited_by: { id: streamUser.value.id, name: streamUser.value.name }\n          }\n        ]\n      : []\n  });\n  await channel.watch();\n  if (selectedExternalMembers.length) {\n    await channel.inviteMembers(selectedExternalMembers);\n    $http.put('/mute_channel', {\n      channel_id: channel.id,\n      user_ids: selectedExternalMembers\n    });\n  }\n  await channel.sendMessage({\n    text: `{{user:${streamUser.value.id}}} has created {{channel_name}}.`,\n    activity_status: 'created',\n    activity_members: [{ id: streamUser.value.id, name: streamUser.value.name }]\n  });\n  if (selectedTeamMembers.filter(x => x.id !== client.value.user.id).length) {\n    channel.sendMessage({\n      text: addMemberText(selectedTeamMembers.filter(x => x.id !== client.value.user.id)),\n      activity_status: 'added',\n      activity_members: messageMembers(selectedTeamMembers.filter(x => x.id !== client.value.user.id))\n    });\n  }\n  saveNotificationPreference(\n    selectedTeamMembers.map(x => x.id),\n    channel,\n    'all'\n  );\n  $emitter.$emit('channel:added', channel);\n  resetModal();\n  buttonBusy.value = false;\n  $emit('close');\n}\n\n// PAGE\nconst page = ref(1);\nfunction goToNextPage() {\n  if (channelName.value.trim().length === 0 && selectedUsers.value.length > 1) {\n    channelNameError.value = 'Please provide channel name.';\n  } else if (\n    props.channels.some(x => x.data.name && x.data.name.toLowerCase() === channelName.value.trim().toLowerCase())\n  ) {\n    channelNameError.value = 'Channel with this name already exists.';\n  } else if (selectedUsers.value.length == 1) {\n    $emitter.$emit('send-dm', selectedUsers.value[0]);\n    $emit('close');\n  } else {\n    if (!channelColor.value) {\n      channelColor.value = getColor();\n    }\n    page.value = page.value + 1;\n  }\n}\n\n// OTHER\nconst searchText = ref('');\nconst modalTitle = computed(() => {\n  return page.value == 1 ? 'Create New Chat' : 'Confirm Chat Details';\n});\n\nfunction resetModal() {\n  channelName.value = searchText.value = '';\n  users.value = users.value.map(user => {\n    return { ...user, selected: false };\n  });\n  Object.assign(settings, {\n    message_history_access: false,\n    add_member_access: false,\n    note: ''\n  });\n}\n</script>\n"],"names":["client","streamUser","streamUsers","session","useMapGetter","$emitter","useEmitter","$http","useHttp","settings","reactive","updateSettings","data","users","ref","selectedUsers","computed","x","selectedExternalUsers","user","addMemberText","selectedTeamMembers","firstThreeMembers","text","u","messageMembers","teamMembers","m","onMounted","selectedTeamTab","props","channelName","channelNameError","buttonBusy","channelColor","watch","newVal","oldVal","createChannel","id","channel_id","selectedExternalMembers","channel","saveNotificationPreference","resetModal","$emit","page","goToNextPage","getColor","searchText","modalTitle"],"mappings":"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"}