81 lines
2.7 KiB
Vue
81 lines
2.7 KiB
Vue
<script setup>
|
|
import {useRoute} from "vue-router";
|
|
import {onMounted} from "vue";
|
|
import {organization, fetchOrganization, loading, myOrganizationIds, addToOrganization, removeFromOrganization} from "src/composables/objects/organization";
|
|
import {useAppStore} from "stores/App";
|
|
import FAB from "components/FAB.vue";
|
|
import {storeToRefs} from "pinia";
|
|
import {useUserStore} from "stores/User";
|
|
import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
|
|
import AircraftsList from "components/aircrafts/AircraftsList.vue";
|
|
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
|
|
import {useQuasar} from "quasar";
|
|
import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
|
|
|
|
const organizationId = parseInt(useRoute().params.id);
|
|
const loggedUser = storeToRefs(useUserStore()).user;
|
|
const $q = useQuasar();
|
|
|
|
onMounted(() => {
|
|
fetchOrganization(organizationId).then(() => {
|
|
useAppStore().setPageTitle(organization.value.name);
|
|
useAppStore().setBreadcrumbs([
|
|
{to: {name: "organizations"}, label: "Organizace"},
|
|
{label: organization.value.name}
|
|
])
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<h3>Členové</h3>
|
|
|
|
|
|
<div class="q-my-md">
|
|
<q-btn color="positive" @click="addToOrganization(organizationId)" v-if="!myOrganizationIds.includes(organizationId)">
|
|
<q-icon name="add"/>
|
|
Přidat se
|
|
</q-btn>
|
|
<q-btn color="warning" @click="removeFromOrganization(organizationId)" v-else>
|
|
<q-icon name="remove"/>
|
|
Opustit organizaci
|
|
</q-btn>
|
|
</div>
|
|
|
|
<BasicListSkeleton :items-count-min="1" :items-count-max="5" v-if="loading || !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="loading || !organization"/>
|
|
<template v-else>
|
|
<AircraftsList :items="organization.aircrafts" v-if="organization.aircrafts.length > 0"/>
|
|
<BasicInfoBanner v-else>
|
|
Žádné letadlo
|
|
</BasicInfoBanner>
|
|
|
|
<FAB
|
|
mode="edit"
|
|
v-if="organization.createdById === loggedUser.id"
|
|
:router-link="{name: 'organizationEdit', params: {id: organizationId}}"
|
|
/>
|
|
</template>
|
|
</template>
|