{"version":3,"file":"ChatEmptyState-e84366ea.js","sources":["../../../app/javascript/components/chat/ChatEmptyState.vue"],"sourcesContent":["<template>\n  <div class=\"flex h-full w-full items-center justify-center\">\n    <div class=\"space-y-8\">\n      <div class=\"px-2\">\n        <div class=\"text-xl font-medium leading-7 text-gray-400\">Welcome to</div>\n        <div class=\"text-2xl font-semibold leading-8\">SigDev Messenger</div>\n      </div>\n      <div class=\"flex space-x-4 px-2\">\n        <div class=\"flex w-1/2 flex-col space-y-8 rounded border border-gray-700 p-6 text-gray-100\">\n          <div class=\"flex w-full items-center justify-between\">\n            <div class=\"text-lg font-semibold\">New Chat</div>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class=\"h-7 w-7 text-gray-600\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n            >\n              <path d=\"M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z\" />\n              <path\n                d=\"M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z\"\n              />\n            </svg>\n          </div>\n          <div class=\"space-y-1 text-sm font-medium leading-5 text-gray-400\">\n            <div v-for=\"item in chatList\" :key=\"item\" class=\"flex items-center space-x-2\">\n              <div class=\"h-2 w-2 rounded-full bg-gray-700\"></div>\n              <div>{{ item }}</div>\n            </div>\n          </div>\n          <BaseButton @press=\"$emitter.$emit('show:create-channel-modal')\" size=\"md\">+ Create</BaseButton>\n        </div>\n        <div class=\"flex w-1/2 flex-col space-y-8 rounded border border-gray-700 p-6 text-gray-100\">\n          <div class=\"flex w-full items-center justify-between\">\n            <div class=\"text-lg font-semibold\">Profile</div>\n            <UserCircleIcon class=\"h-7 w-7 text-gray-600\"></UserCircleIcon>\n          </div>\n          <div class=\"space-y-1 text-sm font-medium leading-5 text-gray-400\">\n            <div v-for=\"item in profileList\" :key=\"item\" class=\"flex items-center space-x-2\">\n              <div class=\"h-2 w-2 rounded-full bg-gray-700\"></div>\n              <div>{{ item }}</div>\n            </div>\n          </div>\n          <BaseButton @press=\"$emitter.$emit('show:settings-modal')\" type=\"secondary\" size=\"md\">Edit</BaseButton>\n        </div>\n      </div>\n      <div class=\"space-y-3\">\n        <div class=\"flex items-center space-x-5 p-2\">\n          <div v-for=\"t in tabs\" :key=\"t.id\">\n            <div\n              class=\"cursor-pointer py-1 text-sm font-semibold leading-5\"\n              :class=\"t.id === tab ? 'border-b-2 border-blue-600' : 'text-gray-400'\"\n              @click=\"\n                tab = t.id;\n                startingIndex = 0;\n              \"\n            >\n              {{ t.title }}\n            </div>\n          </div>\n        </div>\n        <div class=\"relative flex items-center px-2\" style=\"width: 832px; height: 215px\">\n          <div class=\"flex items-center space-x-4 overflow-x-auto rounded-md\">\n            <UserCard v-for=\"obj in selectedChunk\" :key=\"obj.id\" :object=\"obj\" :is-user=\"tab == 'team'\"></UserCard>\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"flex items-center justify-center space-x-2 text-xs font-medium leading-4 text-gray-400\"\n        v-if=\"pages > 0\"\n      >\n        <div\n          class=\"flex h-6 w-6 cursor-pointer items-center justify-center rounded-full border border-gray-700 hover:border-white\"\n          :class=\"startingIndex != 0 ? '' : 'cursor-not-allowed text-gray-400'\"\n          @click=\"startingIndex != 0 ? (startingIndex = startingIndex - 4) : null\"\n        >\n          <ChevronLeftIcon class=\"h-3 w-3\" :class=\"startingIndex != 0 ? 'text-white' : 'text-gray-400'\" />\n        </div>\n        <span class=\"text-xs font-medium leading-4\">{{ startingIndex / 4 + 1 }} of {{ pages }}</span>\n        <div\n          class=\"flex h-6 w-6 cursor-pointer items-center justify-center rounded-full border border-gray-700 hover:border-white\"\n          :class=\"startingIndex + 4 < selected.length ? '' : 'cursor-not-allowed text-gray-400'\"\n          @click=\"startingIndex + 4 < selected.length ? (startingIndex = startingIndex + 4) : null\"\n        >\n          <ChevronRightIcon\n            class=\"h-3 w-3\"\n            :class=\"startingIndex + 4 < selected.length ? 'text-white' : 'text-gray-400'\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n<script setup>\nimport { onMounted, reactive, ref, computed, watch } from 'vue';\nimport UserCard from './ChatUserCard.vue';\nimport { ChevronLeftIcon, ChevronRightIcon, UserCircleIcon } from '@heroicons/vue/20/solid';\nimport { useMapGetter } from '@/store/map-state';\nimport { getCompaniesByCategory } from '@/composeables/chat';\nimport { useStore } from 'vuex';\nimport useEmitter from '@/composeables/emitter';\nconst { streamUser, streamUsers } = useMapGetter();\n\nconst $store = useStore();\nconst $emitter = useEmitter();\n\n// TABS AND SELECTED\nconst companies = ref([]);\nconst tab = ref('team');\nconst startingIndex = ref(0);\nconst selected = computed(() => {\n  return tab.value == 'team' ? teamUsers.value : companies.value;\n});\n\nconst selectedChunk = computed(() => {\n  return selected.value.filter((user, idx) => idx >= startingIndex.value && idx < startingIndex.value + 4);\n});\n\nonMounted(() => {\n  companies.value = getCompaniesByCategory('All Companies', externalUsers.value, []);\n});\n\n// USERS\nconst teamUsers = computed(() => {\n  return streamUsers.value\n    .filter(x => x.id != $store.state.session.user.id && (x.teams ? x.team_id === streamUser.value.team_id : false))\n    .sort((a, b) => a.name.localeCompare(b.name));\n});\nconst externalUsers = computed(() => {\n  return streamUsers.value.filter(\n    x => x.id != $store.state.session.user.id && x.teams && x.team_id !== streamUser.value.team_id\n  );\n});\nwatch(\n  () => streamUsers.value,\n  (newVal, oldVal) => {\n    companies.value = getCompaniesByCategory('All Companies', externalUsers.value, []);\n  }\n);\n\n// OTHERS\nconst pages = ref(0);\nconst chatList = reactive([\n  'Send and receive messages',\n  'Connect with team and external users',\n  'Sort and oversee chat rooms'\n]);\n\nconst profileList = reactive(['Update login credentials', 'Manage name, role and bio', 'Upload avatar image']);\n\nconst tabs = reactive([\n  { id: 'team', title: 'Team', selected: true },\n  { id: 'company', title: 'Companies' }\n]);\n\nwatch(\n  () => selected.value,\n  (newVal, oldVal) => {\n    pages.value = selected.value.length > 0 ? Math.ceil(selected.value.length / 4) : 0;\n  }\n);\n\nonMounted(() => {\n  pages.value = selected.value.length > 0 ? Math.ceil(selected.value.length / 4) : 0;\n});\n</script>\n"],"names":["streamUser","streamUsers","useMapGetter","$store","useStore","$emitter","useEmitter","companies","ref","tab","startingIndex","selected","computed","teamUsers","selectedChunk","user","idx","onMounted","getCompaniesByCategory","externalUsers","x","a","b","watch","newVal","oldVal","pages","chatList","reactive","profileList","tabs"],"mappings":"qzEAoGA,KAAM,CAAE,WAAAA,EAAY,YAAAC,GAAgBC,IAE9BC,EAASC,EAAQ,EACjBC,EAAWC,EAAU,EAGrBC,EAAYC,EAAI,CAAA,CAAE,EAClBC,EAAMD,EAAI,MAAM,EAChBE,EAAgBF,EAAI,CAAC,EACrBG,EAAWC,EAAS,IACjBH,EAAI,OAAS,OAASI,EAAU,MAAQN,EAAU,KAC1D,EAEKO,EAAgBF,EAAS,IACtBD,EAAS,MAAM,OAAO,CAACI,EAAMC,IAAQA,GAAON,EAAc,OAASM,EAAMN,EAAc,MAAQ,CAAC,CACxG,EAEDO,EAAU,IAAM,CACdV,EAAU,MAAQW,EAAuB,gBAAiBC,EAAc,MAAO,CAAA,CAAE,CACnF,CAAC,EAGD,MAAMN,EAAYD,EAAS,IAClBX,EAAY,MAChB,OAAOmB,GAAKA,EAAE,IAAMjB,EAAO,MAAM,QAAQ,KAAK,KAAOiB,EAAE,MAAQA,EAAE,UAAYpB,EAAW,MAAM,QAAU,GAAM,EAC9G,KAAK,CAACqB,EAAGC,IAAMD,EAAE,KAAK,cAAcC,EAAE,IAAI,CAAC,CAC/C,EACKH,EAAgBP,EAAS,IACtBX,EAAY,MAAM,OACvBmB,GAAKA,EAAE,IAAMjB,EAAO,MAAM,QAAQ,KAAK,IAAMiB,EAAE,OAASA,EAAE,UAAYpB,EAAW,MAAM,OAC3F,CACC,EACDuB,EACE,IAAMtB,EAAY,MAClB,CAACuB,EAAQC,IAAW,CAClBlB,EAAU,MAAQW,EAAuB,gBAAiBC,EAAc,MAAO,CAAA,CAAE,CAClF,CACH,EAGA,MAAMO,EAAQlB,EAAI,CAAC,EACbmB,EAAWC,EAAS,CACxB,4BACA,uCACA,6BACF,CAAC,EAEKC,EAAcD,EAAS,CAAC,2BAA4B,4BAA6B,qBAAqB,CAAC,EAEvGE,EAAOF,EAAS,CACpB,CAAE,GAAI,OAAQ,MAAO,OAAQ,SAAU,EAAM,EAC7C,CAAE,GAAI,UAAW,MAAO,WAAa,CACvC,CAAC,EAED,OAAAL,EACE,IAAMZ,EAAS,MACf,CAACa,EAAQC,IAAW,CAClBC,EAAM,MAAQf,EAAS,MAAM,OAAS,EAAI,KAAK,KAAKA,EAAS,MAAM,OAAS,CAAC,EAAI,CAClF,CACH,EAEAM,EAAU,IAAM,CACdS,EAAM,MAAQf,EAAS,MAAM,OAAS,EAAI,KAAK,KAAKA,EAAS,MAAM,OAAS,CAAC,EAAI,CACnF,CAAC"}