salix-front/src/pages/Claim/Card/ClaimCard.vue

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import axios from 'axios';
import { useState } from 'src/composables/useState';
import { toDate } from 'src/filters';

const route = useRoute();
const { t } = useI18n();
const state = useState();

onMounted(async () => {
    await fetch();
});
const claim = ref({});

async function fetch() {
    const entityId = route.params.id;
    const filter = {
        include: [
            { relation: 'client' },
            { relation: 'claimState' },
            {
                relation: 'claimState',
            },
            {
                relation: 'worker',
                scope: {
                    include: { relation: 'user' },
                },
            },
        ],
    };
    const options = { params: { filter } };
    const { data } = await axios.get(`Claims/${entityId}`, options);

    if (data) claim.value = data;
}

function stateColor(code) {
    if (code === 'pending') return 'green';
    if (code === 'managed') return 'orange';
    if (code === 'resolved') return 'red';
}
</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">
                <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 -->
            <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" />
                    <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>

            <q-separator />

            <q-list>
                <q-item :to="{ name: 'ClaimBasicData' }" clickable v-ripple>
                    <q-item-section avatar>
                        <q-icon name="vn:settings" />
                    </q-item-section>
                    <q-item-section>{{ t('claim.pageTitles.basicData') }}</q-item-section>
                </q-item>
                <q-item :to="{ name: 'ClaimRma' }" clickable v-ripple>
                    <q-item-section avatar>
                        <q-icon name="vn:barcode" />
                    </q-item-section>
                    <q-item-section>{{ t('claim.pageTitles.rma') }}</q-item-section>
                </q-item>
            </q-list>
        </q-scroll-area>
    </q-drawer>
    <q-page-container>
        <q-page class="q-pa-md">
            <router-view></router-view>
        </q-page>
    </q-page-container>
</template>

<style lang="scss">
.q-scrollarea__content {
    max-width: 100%;
}
</style>

<style lang="scss" scoped>
.descriptor {
    max-width: 256px;

    h5 {
        margin: 0 15px;
    }

    .header {
        display: flex;
        justify-content: space-between;
    }

    .q-card__actions {
        justify-content: center;
    }

    #descriptor-skeleton .q-card__actions {
        justify-content: space-between;
    }
}
</style>