89 lines
3.0 KiB
Vue
89 lines
3.0 KiB
Vue
<script>
|
|
import {useOrganizationsStore} from "stores/Organizations";
|
|
|
|
export default {
|
|
preFetch({currentRoute}) {
|
|
return useOrganizationsStore().fetchDetail(currentRoute.params.id);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script setup>
|
|
import {useRoute} from "vue-router";
|
|
import {computed, onMounted} from "vue";
|
|
import {useAppStore} from "stores/App";
|
|
import FAB from "components/FAB.vue";
|
|
import {storeToRefs} from "pinia";
|
|
import {useLoggedUserStore} from "stores/LoggedUser";
|
|
import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
|
|
import AircraftsList from "components/aircrafts/AircraftsList.vue";
|
|
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
|
|
import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
|
|
|
|
const organizationId = parseInt(useRoute().params.id);
|
|
const {isQueryRunning, organization} = storeToRefs(useOrganizationsStore());
|
|
const loggedUser = storeToRefs(useLoggedUserStore()).user;
|
|
|
|
useAppStore().setPageTitle(organization.value.name);
|
|
useAppStore().setBreadcrumbs([
|
|
{to: {name: "organizations"}, label: "Organizace"},
|
|
{label: organization.value.name}
|
|
]);
|
|
|
|
const myOrganizationIds = computed(() => (loggedUser.value && loggedUser.value.organizations?.map(o => o.id)) || []);
|
|
</script>
|
|
|
|
<template>
|
|
<h3>Členové</h3>
|
|
|
|
<div class="q-my-md">
|
|
<q-btn color="positive" @click="useOrganizationsStore().addUserToOrganization(organizationId)" v-if="!myOrganizationIds.includes(organizationId)">
|
|
<q-icon name="add"/>
|
|
Přidat se
|
|
</q-btn>
|
|
<q-btn color="warning" @click="useOrganizationsStore().removeUserFromOrganization(organizationId)" v-else>
|
|
<q-icon name="remove"/>
|
|
Opustit organizaci
|
|
</q-btn>
|
|
</div>
|
|
|
|
<BasicListSkeleton :items-count-min="1" :items-count-max="5" v-if="isQueryRunning || !organization"/>
|
|
<template v-else>
|
|
<q-list bordered separator v-if="organization.users.length > 0">
|
|
<q-item v-for="user in organization.users" :key="user">
|
|
<q-item-section avatar>
|
|
<AvatarFromPhoto :src="user.avatarImageUrl" v-if="user.avatarImageUrl" :size="50"/>
|
|
<q-avatar icon="person" v-else class="bg-primary text-white"/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
{{ user.name || user.email }}
|
|
<template v-if="loggedUser.id === user.id">(já)</template>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
<BasicInfoBanner v-else>
|
|
Zatím nikdo...
|
|
</BasicInfoBanner>
|
|
</template>
|
|
|
|
<h3>Letadla</h3>
|
|
|
|
<BasicListSkeleton :items-count-min="1" :items-count-max="5" v-if="isQueryRunning || !organization"/>
|
|
<template v-else>
|
|
<AircraftsList
|
|
v-if="organization.aircrafts.length > 0"
|
|
:items="organization.aircrafts"
|
|
:total-items-count="organization.aircrafts.length"
|
|
/>
|
|
<BasicInfoBanner v-else>
|
|
Žádné letadlo
|
|
</BasicInfoBanner>
|
|
|
|
<FAB
|
|
mode="edit"
|
|
v-if="organization.createdById === loggedUser.id"
|
|
:router-link="{name: 'organizationEdit', params: {id: organizationId}}"
|
|
/>
|
|
</template>
|
|
</template>
|