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 axios from 'axios';
|
||||||
import { useState } from 'src/composables/useState';
|
import { useState } from 'src/composables/useState';
|
||||||
import { toDate } from 'src/filters';
|
import { toDate } from 'src/filters';
|
||||||
|
import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
@ -13,7 +14,7 @@ const state = useState();
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await fetch();
|
await fetch();
|
||||||
});
|
});
|
||||||
const claim = ref({});
|
const claim = ref();
|
||||||
|
|
||||||
async function fetch() {
|
async function fetch() {
|
||||||
const entityId = route.params.id;
|
const entityId = route.params.id;
|
||||||
|
|
@ -46,31 +47,13 @@ function stateColor(code) {
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
|
<q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
|
||||||
<q-scroll-area class="fit text-grey-8 descriptor">
|
<q-scroll-area class="fit">
|
||||||
<div class="header bg-primary q-pa-sm">
|
<card-descriptor module="" :data="claim">
|
||||||
<router-link :to="{ path: '/claim/list' }">
|
<template #menu>
|
||||||
<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: 'ClaimSummary', 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 round flat dense size="md" icon="more_vert" color="white">
|
|
||||||
<q-tooltip>{{ t('components.card.moreOptions') }}</q-tooltip>
|
|
||||||
<!-- <q-menu>
|
|
||||||
<q-list>
|
|
||||||
<q-item clickable v-ripple>Option 1</q-item>
|
<q-item clickable v-ripple>Option 1</q-item>
|
||||||
<q-item clickable v-ripple>Option 2</q-item>
|
<q-item clickable v-ripple>Option 2</q-item>
|
||||||
</q-list>
|
</template>
|
||||||
</q-menu> -->
|
<template #body>
|
||||||
</q-btn>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="claim.client" class="q-py-sm">
|
|
||||||
<q-list>
|
<q-list>
|
||||||
<q-item-label header class="ellipsis text-h5" :lines="1">
|
<q-item-label header class="ellipsis text-h5" :lines="1">
|
||||||
{{ claim.client.name }}
|
{{ claim.client.name }}
|
||||||
|
|
@ -107,6 +90,7 @@ function stateColor(code) {
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
</q-item>
|
</q-item>
|
||||||
</q-list>
|
</q-list>
|
||||||
|
|
||||||
<q-card-actions>
|
<q-card-actions>
|
||||||
<q-btn
|
<q-btn
|
||||||
size="md"
|
size="md"
|
||||||
|
|
@ -125,9 +109,89 @@ function stateColor(code) {
|
||||||
<q-tooltip>{{ t('claim.card.claimedTicket') }}</q-tooltip>
|
<q-tooltip>{{ t('claim.card.claimedTicket') }}</q-tooltip>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
</q-card-actions>
|
</q-card-actions>
|
||||||
</div>
|
</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>
|
||||||
|
</q-btn>
|
||||||
|
</router-link>
|
||||||
|
<router-link :to="{ name: 'ClaimSummary', 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 round flat dense size="md" icon="more_vert" color="white">
|
||||||
|
<q-tooltip>{{ t('components.card.moreOptions') }}</q-tooltip>
|
||||||
|
<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-btn>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<!-- <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>
|
||||||
|
</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> -->
|
||||||
|
<!-- </div> -->
|
||||||
<!-- Skeleton -->
|
<!-- 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">
|
<div class="col q-pl-sm q-pa-sm">
|
||||||
<q-skeleton type="text" square height="45px" />
|
<q-skeleton type="text" square height="45px" />
|
||||||
<q-skeleton type="text" square height="18px" />
|
<q-skeleton type="text" square height="18px" />
|
||||||
|
|
@ -142,7 +206,7 @@ function stateColor(code) {
|
||||||
<q-skeleton size="40px" />
|
<q-skeleton size="40px" />
|
||||||
<q-skeleton size="40px" />
|
<q-skeleton size="40px" />
|
||||||
</q-card-actions>
|
</q-card-actions>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
<q-separator />
|
<q-separator />
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue