108 lines
3.3 KiB
Vue
108 lines
3.3 KiB
Vue
<template>
|
|
<LayoutHeader>
|
|
<template #left-header>
|
|
<Breadcrumbs :items="breadcrumbs" />
|
|
</template>
|
|
<template #right-header>
|
|
<Button
|
|
variant="solid"
|
|
label="Create"
|
|
@click="showOrganizationModal = true"
|
|
>
|
|
<template #prefix><FeatherIcon name="plus" class="h-4" /></template>
|
|
Create organization
|
|
</Button>
|
|
</template>
|
|
</LayoutHeader>
|
|
<div class="flex h-full overflow-hidden">
|
|
<div class="flex shrink-0 flex-col overflow-y-auto border-r">
|
|
<router-link
|
|
:to="{
|
|
name: 'Organization',
|
|
params: { organizationId: organization.name },
|
|
}"
|
|
v-for="(organization, i) in organizations.data"
|
|
:key="i"
|
|
:class="[
|
|
currentOrganization?.name === organization.name
|
|
? 'bg-gray-50 hover:bg-gray-100'
|
|
: 'hover:bg-gray-50',
|
|
]"
|
|
>
|
|
<div class="flex w-[352px] items-center gap-3 border-b px-5 py-4">
|
|
<Avatar
|
|
:image="organization.organization_logo"
|
|
:label="organization.name"
|
|
size="xl"
|
|
/>
|
|
<div class="flex flex-col items-start gap-1">
|
|
<span class="text-base font-medium text-gray-900">
|
|
{{ organization.name }}
|
|
</span>
|
|
<span class="text-sm text-gray-700">{{
|
|
website(organization.website)
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</router-link>
|
|
</div>
|
|
<router-view
|
|
v-if="currentOrganization"
|
|
:organization="currentOrganization"
|
|
/>
|
|
<div
|
|
v-else
|
|
class="grid h-full flex-1 place-items-center text-xl font-medium text-gray-500"
|
|
>
|
|
<div class="flex flex-col items-center justify-center space-y-2">
|
|
<OrganizationsIcon class="h-10 w-10" />
|
|
<div>No organization selected</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<OrganizationModal
|
|
v-model="showOrganizationModal"
|
|
v-model:reloadOrganizations="organizations"
|
|
:organization="{}"
|
|
/>
|
|
</template>
|
|
<script setup>
|
|
import LayoutHeader from '@/components/LayoutHeader.vue'
|
|
import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
|
|
import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
|
|
import { FeatherIcon, Breadcrumbs, Avatar } from 'frappe-ui'
|
|
import { organizationsStore } from '@/stores/organizations.js'
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
const { organizations } = organizationsStore()
|
|
const route = useRoute()
|
|
const showOrganizationModal = ref(false)
|
|
const currentOrganization = computed(() => {
|
|
return organizations.data.find(
|
|
(organization) => organization.name === route.params.organizationId
|
|
)
|
|
})
|
|
const breadcrumbs = computed(() => {
|
|
let items = [{ label: 'Organizations', route: { name: 'Organizations' } }]
|
|
if (!currentOrganization.value) return items
|
|
items.push({
|
|
label: currentOrganization.value.name,
|
|
route: {
|
|
name: 'Organization',
|
|
params: { organizationId: currentOrganization.value.name },
|
|
},
|
|
})
|
|
return items
|
|
})
|
|
onMounted(() => {
|
|
const el = document.querySelector('.router-link-active')
|
|
if (el)
|
|
setTimeout(() => {
|
|
el.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
|
})
|
|
})
|
|
function website(url) {
|
|
return url && url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, '')
|
|
}
|
|
</script>
|