Descriptor component
gitea/salix-front/pipeline/head There was a failure building this commit
Details
gitea/salix-front/pipeline/head There was a failure building this commit
Details
This commit is contained in:
Joan
parent
67332ebcf0
commit
d18f121507
|
|
@ -0,0 +1,91 @@
|
|||
<script setup>
|
||||
import { useSlots, computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
const slots = useSlots();
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
|
||||
const module = computed(() => {
|
||||
return route.matched[1];
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="descriptor">
|
||||
<div class="header bg-primary q-pa-sm">
|
||||
<router-link :to="{ name: `${module.name}List` }">
|
||||
<q-btn round flat dense size="md" icon="view_list" color="white">
|
||||
<q-tooltip>{{ t('components.card.mainList') }}</q-tooltip>
|
||||
</q-btn>
|
||||
</router-link>
|
||||
<router-link :to="{ name: `${module.name}Summary`, params: { id: route.params.id } }">
|
||||
<q-btn round flat dense size="md" icon="launch" color="white">
|
||||
<q-tooltip>{{ t('components.card.summary') }}</q-tooltip>
|
||||
</q-btn>
|
||||
</router-link>
|
||||
|
||||
<q-btn v-if="slots.menu" size="md" icon="more_vert" color="white" round flat dense>
|
||||
<q-tooltip>{{ t('components.card.moreOptions') }}</q-tooltip>
|
||||
<q-menu>
|
||||
<q-list>
|
||||
<slot name="menu" />
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div v-if="$props.data" class="q-py-sm">
|
||||
<slot name="body" />
|
||||
</div>
|
||||
|
||||
<!-- Skeleton -->
|
||||
<div id="descriptor-skeleton" v-if="!$props.data">
|
||||
<div class="col q-pl-sm q-pa-sm">
|
||||
<q-skeleton type="text" square height="45px" />
|
||||
<q-skeleton type="text" square height="18px" />
|
||||
<q-skeleton type="text" square height="18px" />
|
||||
<q-skeleton type="text" square height="18px" />
|
||||
</div>
|
||||
|
||||
<q-card-actions>
|
||||
<q-skeleton size="40px" />
|
||||
<q-skeleton size="40px" />
|
||||
<q-skeleton size="40px" />
|
||||
<q-skeleton size="40px" />
|
||||
<q-skeleton size="40px" />
|
||||
</q-card-actions>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.descriptor {
|
||||
max-width: 256px;
|
||||
|
||||
h5 {
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.q-card__actions {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#descriptor-skeleton .q-card__actions {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n';
|
|||
import axios from 'axios';
|
||||
import { useState } from 'src/composables/useState';
|
||||
import { toDate } from 'src/filters';
|
||||
import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
|
|
@ -13,7 +14,7 @@ const state = useState();
|
|||
onMounted(async () => {
|
||||
await fetch();
|
||||
});
|
||||
const claim = ref({});
|
||||
const claim = ref();
|
||||
|
||||
async function fetch() {
|
||||
const entityId = route.params.id;
|
||||
|
|
@ -46,8 +47,71 @@ function stateColor(code) {
|
|||
</script>
|
||||
<template>
|
||||
<q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
|
||||
<q-scroll-area class="fit text-grey-8 descriptor">
|
||||
<div class="header bg-primary q-pa-sm">
|
||||
<q-scroll-area class="fit">
|
||||
<card-descriptor module="" :data="claim">
|
||||
<template #menu>
|
||||
<q-item clickable v-ripple>Option 1</q-item>
|
||||
<q-item clickable v-ripple>Option 2</q-item>
|
||||
</template>
|
||||
<template #body>
|
||||
<q-list>
|
||||
<q-item-label header class="ellipsis text-h5" :lines="1">
|
||||
{{ claim.client.name }}
|
||||
<q-tooltip>{{ claim.client.name }}</q-tooltip>
|
||||
</q-item-label>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('claim.card.claimId') }}</q-item-label>
|
||||
<q-item-label>#{{ claim.id }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('claim.card.created') }}</q-item-label>
|
||||
<q-item-label>{{ toDate(claim.created) }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('claim.card.assignedTo') }}</q-item-label>
|
||||
<q-item-label>{{ claim.worker.user.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('claim.card.state') }}</q-item-label>
|
||||
<q-item-label>
|
||||
<q-chip :color="stateColor(claim.claimState.code)" dense>
|
||||
{{ claim.claimState.description }}
|
||||
</q-chip>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('claim.card.ticketId') }}</q-item-label>
|
||||
<q-item-label>{{ claim.ticketFk }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
|
||||
<q-card-actions>
|
||||
<q-btn
|
||||
size="md"
|
||||
icon="vn:client"
|
||||
color="primary"
|
||||
:to="{ name: 'CustomerCard', params: { id: claim.clientFk } }"
|
||||
>
|
||||
<q-tooltip>{{ t('claim.card.customerSummary') }}</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
size="md"
|
||||
icon="vn:ticket"
|
||||
color="primary"
|
||||
:to="{ name: 'TicketCard', params: { id: claim.ticketFk } }"
|
||||
>
|
||||
<q-tooltip>{{ t('claim.card.claimedTicket') }}</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</template>
|
||||
</card-descriptor>
|
||||
<!-- <div class="header bg-primary q-pa-sm">
|
||||
<router-link :to="{ path: '/claim/list' }">
|
||||
<q-btn round flat dense size="md" icon="view_list" color="white">
|
||||
<q-tooltip>{{ t('components.card.mainList') }}</q-tooltip>
|
||||
|
|
@ -61,17 +125,17 @@ function stateColor(code) {
|
|||
|
||||
<q-btn round flat dense size="md" icon="more_vert" color="white">
|
||||
<q-tooltip>{{ t('components.card.moreOptions') }}</q-tooltip>
|
||||
<!-- <q-menu>
|
||||
<q-menu>
|
||||
<q-list>
|
||||
<q-item clickable v-ripple>Option 1</q-item>
|
||||
<q-item clickable v-ripple>Option 2</q-item>
|
||||
</q-list>
|
||||
</q-menu> -->
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div v-if="claim.client" class="q-py-sm">
|
||||
<q-list>
|
||||
<!-- <div v-if="claim.client" class="q-py-sm"> -->
|
||||
<!-- <q-list>
|
||||
<q-item-label header class="ellipsis text-h5" :lines="1">
|
||||
{{ claim.client.name }}
|
||||
<q-tooltip>{{ claim.client.name }}</q-tooltip>
|
||||
|
|
@ -106,8 +170,8 @@ function stateColor(code) {
|
|||
<q-item-label>{{ claim.ticketFk }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<q-card-actions>
|
||||
</q-list> -->
|
||||
<!-- <q-card-actions>
|
||||
<q-btn
|
||||
size="md"
|
||||
icon="vn:client"
|
||||
|
|
@ -124,10 +188,10 @@ function stateColor(code) {
|
|||
>
|
||||
<q-tooltip>{{ t('claim.card.claimedTicket') }}</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</div>
|
||||
</q-card-actions> -->
|
||||
<!-- </div> -->
|
||||
<!-- Skeleton -->
|
||||
<div id="descriptor-skeleton" v-if="!claim.client">
|
||||
<!-- <div id="descriptor-skeleton" v-if="!claim.client">
|
||||
<div class="col q-pl-sm q-pa-sm">
|
||||
<q-skeleton type="text" square height="45px" />
|
||||
<q-skeleton type="text" square height="18px" />
|
||||
|
|
@ -142,7 +206,7 @@ function stateColor(code) {
|
|||
<q-skeleton size="40px" />
|
||||
<q-skeleton size="40px" />
|
||||
</q-card-actions>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<q-separator />
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue