opnform/client/components/global/WorkspaceDropdown.vue

105 lines
3.1 KiB
Vue
Raw Normal View History

2023-12-09 14:47:03 +00:00
<template>
<dropdown v-if="user && workspaces && workspaces.length > 1" ref="dropdown"
dropdown-class="origin-top-left absolute left-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-50"
dusk="workspace-dropdown"
>
<template v-if="workspace" #trigger="{toggle}">
<div class="flex items-center cursor group" role="button" @click.stop="toggle()">
<div class="rounded-full h-8 8">
2024-01-10 15:17:47 +00:00
<img v-if="isUrl(workspace.icon)"
2023-12-09 14:47:03 +00:00
:src="workspace.icon"
:alt="workspace.name + ' icon'" class="flex-shrink-0 h-8 w-8 rounded-full shadow"
/>
2023-12-09 14:47:03 +00:00
<div v-else class="rounded-full pt-2 text-xs truncate bg-nt-blue-lighter h-8 w-8 text-center shadow"
v-text="workspace.icon"
/>
</div>
<p class="hidden group-hover:underline lg:block max-w-10 truncate ml-2 text-gray-800 dark:text-gray-200">
{{ workspace.name }}
</p>
</div>
</template>
<template v-for="worksp in workspaces" :key="worksp.id">
<a href="#"
class="px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
2024-02-10 11:46:17 +00:00
:class="{'bg-blue-100 dark:bg-blue-900':workspace?.id === worksp?.id}" @click.prevent="switchWorkspace(worksp)"
2023-12-09 14:47:03 +00:00
>
<div class="rounded-full h-8 w-8 flex-shrink-0" role="button">
2024-01-10 15:17:47 +00:00
<img v-if="isUrl(worksp.icon)"
2023-12-09 14:47:03 +00:00
:src="worksp.icon"
:alt="worksp.name + ' icon'" class="flex-shrink-0 h-8 w-8 rounded-full shadow"
/>
2023-12-09 14:47:03 +00:00
<div v-else class="rounded-full flex-shrink-0 pt-1 text-xs truncate bg-nt-blue-lighter h-8 w-8 text-center shadow"
v-text="worksp.icon"
/>
</div>
<p class="ml-4 truncate">{{ worksp.name }}</p>
</a>
</template>
</dropdown>
</template>
<script>
import { computed } from 'vue'
import Dropdown from '~/components/global/Dropdown.vue'
export default {
name: 'WorkspaceDropdown',
components: {
Dropdown
},
setup () {
const authStore = useAuthStore()
const formsStore = useFormsStore()
const workspacesStore = useWorkspacesStore()
return {
formsStore,
workspacesStore,
user: computed(() => authStore.user),
2023-12-19 17:57:31 +00:00
workspaces: computed(() => workspacesStore.getAll),
2023-12-09 14:47:03 +00:00
loading: computed(() => workspacesStore.loading)
}
},
computed: {
workspace () {
2023-12-16 18:21:03 +00:00
return this.workspacesStore.getCurrent
2023-12-09 14:47:03 +00:00
}
},
watch: {
},
mounted () {
},
methods: {
switchWorkspace (workspace) {
this.workspacesStore.setCurrentId(workspace.id)
2023-12-20 15:10:32 +00:00
this.formsStore.resetState()
2023-12-20 17:38:43 +00:00
this.formsStore.loadAll(workspace.id)
2023-12-19 17:57:31 +00:00
const router = useRouter()
const route = useRoute()
if (route.name !== 'home') {
router.push({ name: 'home' })
2023-12-09 14:47:03 +00:00
}
2023-12-20 17:38:43 +00:00
this.formsStore.loadAll(workspace.id)
2023-12-09 14:47:03 +00:00
},
isUrl (str) {
try {
new URL(str)
} catch (_) {
return false
}
return true
}
}
}
</script>
<style>
</style>