{"version":3,"file":"ModalDashboardCreate-ea4093c1.js","sources":["../../../app/javascript/components/modal/ModalDashboardCreate.vue"],"sourcesContent":["<template>\n  <BaseDialog :model-value=\"show\" size-class=\"!max-w-xl min-h-[40rem]\" @update:model-value=\"$emits('close')\">\n    <template #header>\n      <span class=\"text-sm\" v-if=\"dashboard\">Edit Dashboard</span>\n      <span class=\"text-sm\" v-else>Create New Dashboard</span>\n    </template>\n    <template #default>\n      <div v-if=\"fetchingDashboard\" class=\"mt-40 flex items-center justify-center\">\n        <BaseLoader />\n      </div>\n      <div v-else class=\"space-y-4\">\n        <div class=\"flex flex-col gap-1\">\n          <label for=\"title\" class=\"text-xs text-gray-400\">Title <span class=\"text-red-500\">*</span></label>\n          <BaseTextbox placeholder=\"Title of Dashboard\" id=\"title\" v-model.trim=\"editableDashboard.title\" />\n          <span class=\"text-xs text-red-400\"> {{ titleError }}</span>\n        </div>\n        <div class=\"flex flex-col gap-1\">\n          <label for=\"description\" class=\"text-xs text-gray-400\"> Description(optional) </label>\n          <BaseTextarea\n            rows=\"4\"\n            placeholder=\"Description of Dashboard\"\n            name=\"description\"\n            v-model=\"editableDashboard.description\"\n          />\n        </div>\n        <div class=\"flex flex-col gap-1\">\n          <label for=\"description\" class=\"text-xs text-gray-400\"> Tag (optional) </label>\n          <BaseSelect\n            v-model=\"selectedTags\"\n            :options=\"tagOptions\"\n            button-width-class=\"w-full\"\n            dropdown-width-class=\"w-full\"\n            placeholder=\"Select tags\"\n            multiple\n            searchable\n            appendable\n            @action:search=\"searchedTag = $event\"\n            @append:option=\"addSearchedOption\"\n          >\n            <template #footer v-if=\"searchedTag\">\n              <div class=\"tiedy-p-2\">+ Add \"{{ searchedTag }}\" as a tag</div>\n            </template>\n          </BaseSelect>\n        </div>\n        <div class=\"relative space-y-2\">\n          <div class=\"flex items-center gap-1\">\n            <label for=\"description\" class=\"text-xs text-gray-400\">Share Dashboard with Your Team (optional)</label>\n          </div>\n\n          <BaseSelect\n            button-width-class=\"w-full\"\n            dropdown-width-class=\"w-[526px]\"\n            placeholder=\"Add a Teammate\"\n            searchable\n            portal\n            :options=\"teammates\"\n            :model-value=\"null\"\n            @update:model-value=\"addPermissionedTeammate\"\n          />\n          <div v-if=\"permissionedTeammates.length > 0\" class=\"flex flex-col gap-1\">\n            <BaseDivider />\n            <div class=\"flex h-32 flex-col gap-2 overflow-y-auto\">\n              <div\n                v-for=\"(teammate, index) in permissionedTeammates\"\n                :key=\"index\"\n                class=\"flex flex-row items-center justify-between\"\n              >\n                <div class=\"text-xs leading-none\">\n                  {{ teammate.label }}\n                </div>\n                <div class=\"flex flex-row items-center gap-2\">\n                  <BaseSelect\n                    v-model=\"teammate.permission\"\n                    size=\"sm\"\n                    :options=\"permissions\"\n                    portal\n                    dropdown-width-class=\"w-32\"\n                    button-width-class=\"w-32\"\n                  />\n                  <BaseButton size=\"xxs\" type=\"ghost\" @press=\"removePermissionedTeammate(teammate.id)\">\n                    <XMarkIcon class=\"float-right h-3.5 w-3.5 text-red-700\" />\n                  </BaseButton>\n                </div>\n              </div>\n            </div>\n            <BaseDivider />\n            <div class=\"mt-2 space-y-4\">\n              <div class=\"flex flex-1 flex-col gap-1\">\n                <span class=\"text-xs text-gray-100\">Subscribers</span>\n                <p class=\"text-xs text-gray-400\">\n                  Can only view the items in a dashboard. Cannot change the dashboard.\n                </p>\n              </div>\n              <div class=\"flex flex-1 flex-col gap-1\">\n                <span class=\"text-xs text-gray-100\">Editors</span>\n                <p class=\"text-xs text-gray-400\">\n                  Can view, add, and remove items in a dashboard. Can also share and edit the dashboard.\n                </p>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </template>\n    <template v-if=\"!fetchingDashboard\" #footer>\n      <div class=\"flex w-full justify-between space-x-2\">\n        <div>\n          <BaseButton v-if=\"canDelete\" type=\"danger\" @press=\"destroy\">Delete</BaseButton>\n        </div>\n        <div class=\"flex space-x-2\">\n          <BaseButton type=\"secondary\" @press=\"$emits('close')\" :disabled=\"buttonBusy\">Cancel</BaseButton>\n          <BaseButton\n            v-if=\"editableDashboard.id\"\n            @press=\"update\"\n            :busy=\"buttonBusy\"\n            :disabled=\"!readyToAdd || duplicateTitle || buttonBusy\"\n          >\n            Update\n          </BaseButton>\n          <BaseButton v-else :busy=\"buttonBusy\" @press=\"create\" :disabled=\"!readyToAdd || duplicateTitle || buttonBusy\">\n            Create\n          </BaseButton>\n        </div>\n      </div>\n    </template>\n  </BaseDialog>\n</template>\n<script setup>\nimport { useStore } from 'vuex';\nimport { computed, inject, nextTick, onBeforeMount, onMounted, onUpdated, ref } from 'vue';\nimport useHttp from '@/composeables/http';\nimport { useDashboardApi } from '@/composeables/dashboard-api';\nimport { XMarkIcon } from '@heroicons/vue/20/solid';\n\nconst $store = useStore();\nconst $http = useHttp();\nconst $emits = defineEmits(['close', 'update', 'add']);\nconst $dashboardApi = useDashboardApi();\n\nconst props = defineProps({\n  show: { type: Boolean, default: false },\n  dashboard: {\n    type: Object,\n    default: () => {}\n  },\n  fetchDashboard: { type: Boolean, default: false }\n});\n\n//EDITABLE DASHBOARD\nconst existingDashboards = inject('user-dashboards', []);\nconst editableDashboard = ref({});\nconst fetchingDashboard = ref(false);\nconst readyToAdd = computed(() => {\n  return editableDashboard.value.title.trim().length > 0;\n});\nconst duplicateTitle = computed(() => {\n  if (editableDashboard.value.id > 0) {\n    const otherDashboards = existingDashboards\n      .filter(x => x.id != editableDashboard.value.id)\n      .map(x => x.title.toLowerCase());\n    return otherDashboards.some(x => x == editableDashboard.value.title.toLowerCase());\n  }\n  return false;\n});\nconst titleError = computed(() => {\n  if (duplicateTitle.value) {\n    return 'Dashboard with this title exists already.';\n  }\n  return null;\n});\nconst canDelete = computed(() => {\n  const currentUserId = $store.getters.session.user.id;\n  return props.dashboard && props.dashboard.user_id === currentUserId;\n});\n\nasync function getDashboard() {\n  fetchingDashboard.value = true;\n  let data = await $dashboardApi.fetchActiveDashboard(props.dashboard.id);\n  editableDashboard.value = data.dashboard;\n  fetchingDashboard.value = false;\n}\n\nonBeforeMount(async () => {\n  if (props.dashboard && !props.fetchDashboard) {\n    editableDashboard.value = { ...props.dashboard };\n  } else if (props.fetchDashboard) {\n    await getDashboard();\n  }\n});\n\n//TEAM MATES\nconst teammates = ref([]);\nconst selectedTeamMates = ref([]);\nconst permissionedTeammates = ref([]);\nconst permissions = [\n  { id: 'subscriber', label: 'Subscriber' },\n  { id: 'editor', label: 'Editor' }\n];\n\nasync function getTeammates() {\n  const response = await $http.get('/teammates');\n  teammates.value = response.data.map(u => {\n    return {\n      id: u.id,\n      label: u.email\n    };\n  });\n}\n\nfunction addPermissionedTeammate(id) {\n  if (permissionedTeammates.value.find(t => t.id === id)) return;\n\n  permissionedTeammates.value.push({\n    ...teammates.value.find(t => t.id === id),\n    permission: 'subscriber'\n  });\n}\n\nfunction removePermissionedTeammate(id) {\n  permissionedTeammates.value = permissionedTeammates.value.filter(t => t.id != id);\n}\n\nfunction setPermissionedTeammates() {\n  editableDashboard.value.permissioned_users?.forEach(m => {\n    permissionedTeammates.value.push({\n      id: m.user_id,\n      label: m.email,\n      permission: m.can_read && m.can_write ? 'editor' : m.can_read && !m.can_write ? 'subscriber' : ''\n    });\n  });\n}\n\nonUpdated(() => {\n  setPermissionedTeammates();\n});\nonMounted(() => {\n  getTeammates();\n  if (editableDashboard.value) {\n    setPermissionedTeammates();\n  }\n});\n\n//DASHBOARD CRUDS\nconst buttonBusy = ref(false);\n\nasync function create() {\n  try {\n    buttonBusy.value = true;\n    editableDashboard.value.tags = tagOptions.value.filter(i => selectedTags.value.includes(i.id));\n    editableDashboard.value.subscribers = permissionedTeammates.value.filter(x => x.permission === 'subscriber');\n    editableDashboard.value.maintainers = permissionedTeammates.value.filter(x => x.permission === 'editor');\n    const response = await $http.post('/dashboard', {\n      dashboard: editableDashboard.value,\n      maintainers: editableDashboard.value.maintainers,\n      subscribers: editableDashboard.value.subscribers\n    });\n    buttonBusy.value = false;\n    $emits('add', response.data.data);\n  } catch {\n    // do nothing\n    buttonBusy.value = false;\n  }\n}\n\nasync function update() {\n  try {\n    buttonBusy.value = true;\n    editableDashboard.value.tags = tagOptions.value.filter(i => selectedTags.value.includes(i.id));\n    editableDashboard.value.subscribers = permissionedTeammates.value.filter(x => x.permission === 'subscriber');\n    editableDashboard.value.maintainers = permissionedTeammates.value.filter(x => x.permission === 'editor');\n    const response = await $http.patch(`/dashboard/${editableDashboard.value.id}`, {\n      dashboard: editableDashboard.value,\n      maintainers: editableDashboard.value.maintainers,\n      subscribers: editableDashboard.value.subscribers\n    });\n    buttonBusy.value = false;\n    $emits('update', response.data.data);\n  } catch {\n    buttonBusy.value = false;\n  }\n}\n\nfunction destroy() {\n  $store.dispatch('confirm', 'Please confirm you want to delete this dashboard?').then(() => {\n    $http.delete(`/dashboard/${editableDashboard.value.id}`).then(() => {\n      //do not replace with Inertia\n      location.reload();\n    });\n  });\n}\n\n//TAGS\nconst tagOptions = ref([]);\nconst selectedTags = ref([]);\nconst searchedTag = ref(null);\n\nasync function getDashboardTags() {\n  const response = await $dashboardApi.getAllTags();\n  tagOptions.value =\n    response?.map(x => {\n      return { id: x.id, label: x.name };\n    }) || [];\n  if (!fetchingDashboard.value) {\n    tagOptions.value.forEach(x => {\n      const hasTag = editableDashboard.value.tags.filter(z => z.event_value == x.id);\n      if (hasTag.length > 0) {\n        selectedTags.value.push(x.id);\n      }\n    });\n  }\n}\n\nfunction addSearchedOption() {\n  const exists = tagOptions.value.find(x => x.label === searchedTag.value);\n  if (!exists) {\n    const option = { id: Math.random(), label: searchedTag.value };\n    tagOptions.value.push(option);\n    nextTick(() => {\n      selectedTags.value.push(option.id);\n    });\n  }\n}\nonMounted(() => {\n  nextTick(() => {\n    getDashboardTags();\n  });\n});\n</script>\n"],"names":["$store","useStore","$http","useHttp","$dashboardApi","useDashboardApi","existingDashboards","inject","editableDashboard","ref","fetchingDashboard","readyToAdd","computed","duplicateTitle","x","titleError","canDelete","currentUserId","props","getDashboard","data","onBeforeMount","teammates","permissionedTeammates","permissions","getTeammates","response","u","addPermissionedTeammate","id","t","removePermissionedTeammate","setPermissionedTeammates","_a","m","onUpdated","onMounted","buttonBusy","create","tagOptions","i","selectedTags","$emits","update","destroy","searchedTag","getDashboardTags","z","addSearchedOption","option","nextTick"],"mappings":"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"}