{"version":3,"file":"ChatSettingsModal-80ea3f82.js","sources":["../../../app/javascript/components/chat/ChatSettingsModal.vue"],"sourcesContent":["<template>\n  <BaseDialog :model-value=\"true\" size-class=\"!max-w-6xl h-[34rem]\" @update:model-value=\"$emit('close')\">\n    <template #header>Settings </template>\n    <template #default>\n      <div class=\"flex h-full\">\n        <div class=\"w-72 border-r border-grid\">\n          <BaseNavRadio v-model=\"selectedItem\">\n            <BaseNavRadioOption v-for=\"item in filteredSidebarItems\" :key=\"item.id\" :option=\"item.id\">\n              {{ item.text }}\n            </BaseNavRadioOption>\n          </BaseNavRadio>\n        </div>\n        <div v-if=\"selectedItem == 'profile'\" class=\"w-full\">\n          <div class=\"flex flex-col p-10\">\n            <div class=\"flex space-x-16\">\n              <div class=\"space-y-4 pt-3\">\n                <div class=\"flex w-80 space-x-4\">\n                  <div class=\"space-y-2\">\n                    <div class=\"text-xs font-medium text-gray-400\">First Name</div>\n                    <input\n                      v-model=\"profile.first_name\"\n                      class=\"h-8 w-full rounded bg-gray-800/50 px-3 text-sm font-medium text-gray-100\"\n                    />\n                  </div>\n                  <div class=\"space-y-2\">\n                    <div class=\"text-xs font-medium text-gray-400\">Last Name</div>\n                    <input\n                      v-model=\"profile.last_name\"\n                      class=\"h-8 w-full rounded bg-gray-800/50 px-3 text-sm font-medium text-gray-100\"\n                    />\n                  </div>\n                </div>\n                <div class=\"w-80 space-y-2\">\n                  <div class=\"text-xs font-medium text-gray-400\">Title</div>\n                  <input\n                    v-model=\"profile.role_title\"\n                    placeholder=\"Role Title\"\n                    class=\"h-9 w-full rounded bg-gray-800/50 px-3 text-sm font-medium text-gray-100\"\n                  />\n                </div>\n                <div class=\"w-80 space-y-2\">\n                  <div class=\"text-xs font-medium text-gray-400\">About Me</div>\n                  <textarea\n                    v-model=\"profile.about\"\n                    rows=\"4\"\n                    class=\"w-full resize-none rounded bg-gray-800/50 px-3 text-sm font-medium text-gray-100\"\n                    placeholder=\"About\"\n                  />\n                </div>\n              </div>\n              <div class=\"flex w-2/5 flex-col items-center justify-center\">\n                <ImageSelector :settings-modal=\"true\" :user=\"streamUser\" @selected-image=\"setImage\" />\n              </div>\n            </div>\n          </div>\n          <div class=\"flex w-full items-center justify-end space-x-2 pb-3 pr-4\">\n            <BaseButton :disabled=\"buttonBusy\" type=\"secondary\" @press=\"$emit('close')\">Cancel</BaseButton>\n            <BaseButton :busy=\"buttonBusy\" @press=\"saveProfile\">Save</BaseButton>\n          </div>\n        </div>\n        <div v-if=\"selectedItem === 'notification'\" class=\"w-full\">\n          <div class=\"flex h-full flex-col justify-between px-8 pr-12 pt-4\">\n            <div class=\"space-y-2\">\n              <span class=\"px-2 text-xs font-medium leading-4 text-gray-400\">Sound Notifications</span>\n              <div class=\"flex items-center justify-between rounded bg-gray-800/25 p-2 pt-1\">\n                <span class=\"text-xs font-medium leading-4 text-gray-100\">New Message</span>\n                <BaseToggle v-model=\"messageNotificationSound\">\n                  <template #left>Off</template>\n                  <template #right>On</template>\n                </BaseToggle>\n              </div>\n            </div>\n            <div class=\"flex w-full justify-end space-x-2 pb-3\">\n              <div class=\"flex items-center space-x-2\">\n                <BaseButton :disabled=\"buttonBusy\" type=\"secondary\" @press=\"$emit('close')\"> Cancel </BaseButton>\n                <BaseButton :busy=\"buttonBusy\" @press=\"saveNotificationSetting\">Save</BaseButton>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div v-if=\"selectedItem === 'privacy'\" class=\"w-full\">\n          <div class=\"flex h-full flex-col justify-between px-8 pr-12 pt-4\">\n            <div class=\"space-y-2\">\n              <span class=\"px-2 text-xs font-medium leading-4 text-gray-400\">Privacy Settings</span>\n              <div class=\"flex items-center justify-between rounded bg-gray-800/25 p-2 pt-1\">\n                <span class=\"text-xs font-medium leading-4 text-gray-100\">\n                  Searchable by other users on the Terminal\n                </span>\n                <BaseToggle v-model=\"searchable\">\n                  <template #left>Off</template>\n                  <template #right>On</template>\n                </BaseToggle>\n              </div>\n            </div>\n            <div class=\"flex w-full justify-end space-x-2\">\n              <div class=\"flex items-center space-x-2\">\n                <BaseButton :disabled=\"buttonBusy\" type=\"secondary\" @press=\"$emit('close')\"> Cancel </BaseButton>\n                <BaseButton :busy=\"buttonBusy\" @press=\"saveSearchable\">Save</BaseButton>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </template>\n  </BaseDialog>\n</template>\n<script setup>\nimport { ref, reactive, computed, onMounted } from 'vue';\nimport { useStore } from 'vuex';\nimport ImageSelector from './ChatImageSelector.vue';\nimport useHttp from '@/composeables/http';\n\nconst $http = useHttp();\nconst $store = useStore();\nconst $emit = defineEmits(['close']);\n\n// PROFILE\nconst profile = reactive({\n  first_name: '',\n  last_name: '',\n  role_title: '',\n  about: '',\n  image: ''\n});\n\nfunction getProfile() {\n  $http.get('/profile').then(response => {\n    profile.first_name = response.data.first_name;\n    profile.last_name = response.data.last_name;\n    profile.about = response.data.about;\n    profile.role_title = response.data.role_title;\n    searchable.value = response.data.searchable_in_messenger;\n  });\n}\n\nconst buttonBusy = ref(false);\nasync function saveProfile() {\n  buttonBusy.value = true;\n  let formData = new FormData();\n\n  Object.entries(profile).forEach(([key, value]) => {\n    if (value != null) {\n      formData.append(`user[${key}]`, value);\n    }\n  });\n  formData.append('_method', 'PATCH');\n  await $http.patch('/profile', formData, {\n    headers: {\n      'Content-Type': 'multipart/form-data'\n    }\n  });\n  buttonBusy.value = false;\n  $emit('close');\n}\n\nonMounted(() => {\n  getProfile();\n});\n\nfunction setImage(data) {\n  profile.image = data.file;\n}\n\n// NOTIFICATION\nconst client = $store.getters.client;\nconst messageNotificationSound = ref(false);\nonMounted(() => {\n  messageNotificationSound.value = client.user.message_notification_sound;\n});\n\nasync function saveNotificationSetting() {\n  buttonBusy.value = true;\n  const update = {\n    id: client.user.id,\n    set: {\n      message_notification_sound: messageNotificationSound.value\n    }\n  };\n  let response = await client.partialUpdateUser(update);\n  buttonBusy.value = false;\n  $emit('close');\n}\n\n// SIDEBAR ITEMS\nconst sidebarItems = reactive([\n  { id: 'profile', text: 'Profile' },\n  { id: 'notification', text: 'Notifications' },\n  { id: 'privacy', text: 'Privacy' }\n  // {\n  //   id: 'export',\n  //   text: 'Export'\n  // }\n]);\n\n// SEARCHABLE\nconst searchable = ref(false);\nasync function saveSearchable() {\n  await $http.patch('/profile', { user: { searchable_in_messenger: searchable.value } });\n  $emit('close');\n}\n\n// OTHERS\nconst streamUser = computed(() => {\n  return $store.getters.streamUser;\n});\nconst selectedItem = ref('profile');\n</script>\n"],"names":["$http","useHttp","$store","useStore","profile","reactive","getProfile","response","searchable","buttonBusy","ref","saveProfile","formData","key","value","$emit","onMounted","setImage","data","client","messageNotificationSound","saveNotificationSetting","update","saveSearchable","streamUser","computed","selectedItem"],"mappings":"wpEAgHA,MAAMA,EAAQC,EAAO,EACfC,EAASC,EAAQ,EAIjBC,EAAUC,EAAS,CACvB,WAAY,GACZ,UAAW,GACX,WAAY,GACZ,MAAO,GACP,MAAO,EACT,CAAC,EAED,SAASC,GAAa,CACpBN,EAAM,IAAI,UAAU,EAAE,KAAKO,GAAY,CACrCH,EAAQ,WAAaG,EAAS,KAAK,WACnCH,EAAQ,UAAYG,EAAS,KAAK,UAClCH,EAAQ,MAAQG,EAAS,KAAK,MAC9BH,EAAQ,WAAaG,EAAS,KAAK,WACnCC,EAAW,MAAQD,EAAS,KAAK,uBACrC,CAAG,CACH,CAEA,MAAME,EAAaC,EAAI,EAAK,EAC5B,eAAeC,GAAc,CAC3BF,EAAW,MAAQ,GACnB,IAAIG,EAAW,IAAI,SAEnB,OAAO,QAAQR,CAAO,EAAE,QAAQ,CAAC,CAACS,EAAKC,CAAK,IAAM,CAC5CA,GAAS,MACXF,EAAS,OAAO,QAAQC,CAAG,IAAKC,CAAK,CAE3C,CAAG,EACDF,EAAS,OAAO,UAAW,OAAO,EAClC,MAAMZ,EAAM,MAAM,WAAYY,EAAU,CACtC,QAAS,CACP,eAAgB,qBACjB,CACL,CAAG,EACDH,EAAW,MAAQ,GACnBM,EAAM,OAAO,CACf,CAEAC,EAAU,IAAM,CACdV,GACF,CAAC,EAED,SAASW,EAASC,EAAM,CACtBd,EAAQ,MAAQc,EAAK,IACvB,CAGA,MAAMC,EAASjB,EAAO,QAAQ,OACxBkB,EAA2BV,EAAI,EAAK,EAC1CM,EAAU,IAAM,CACdI,EAAyB,MAAQD,EAAO,KAAK,0BAC/C,CAAC,EAED,eAAeE,GAA0B,CACvCZ,EAAW,MAAQ,GACnB,MAAMa,EAAS,CACb,GAAIH,EAAO,KAAK,GAChB,IAAK,CACH,2BAA4BC,EAAyB,KACtD,CACL,EACiB,MAAMD,EAAO,kBAAkBG,CAAM,EACpDb,EAAW,MAAQ,GACnBM,EAAM,OAAO,CACf,CAGqBV,EAAS,CAC5B,CAAE,GAAI,UAAW,KAAM,SAAW,EAClC,CAAE,GAAI,eAAgB,KAAM,eAAiB,EAC7C,CAAE,GAAI,UAAW,KAAM,SAAW,CAKpC,CAAC,EAGD,MAAMG,EAAaE,EAAI,EAAK,EAC5B,eAAea,GAAiB,CAC9B,MAAMvB,EAAM,MAAM,WAAY,CAAE,KAAM,CAAE,wBAAyBQ,EAAW,KAAO,CAAA,CAAE,EACrFO,EAAM,OAAO,CACf,CAGA,MAAMS,EAAaC,EAAS,IACnBvB,EAAO,QAAQ,UACvB,EACKwB,EAAehB,EAAI,SAAS"}