salix-front/src/components/ui/CardDescriptor.vue

<script setup>
import { useSlots } from 'vue';
import { useI18n } from 'vue-i18n';

defineProps({
    module: {
        type: String,
        required: true,
    },
    data: {
        type: Object,
        required: true,
    },
    description: {
        type: String,
        required: true,
    },
});
const slots = useSlots();
const { t } = useI18n();
</script>

<template>
    <div class="descriptor">
        <div class="header bg-primary q-pa-sm">
            <router-link :to="{ name: `${module}List` }">
                <q-btn round flat dense size="md" icon="view_list" color="white">
                    <q-tooltip>{{ t('components.cardDescriptor.mainList') }}</q-tooltip>
                </q-btn>
            </router-link>
            <router-link :to="{ name: `${module}Summary`, params: { id: data.id } }">
                <q-btn round flat dense size="md" icon="launch" color="white">
                    <q-tooltip>{{ t('components.cardDescriptor.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.cardDescriptor.moreOptions') }}</q-tooltip>
                <q-menu>
                    <q-list>
                        <slot name="menu" />
                    </q-list>
                </q-menu>
            </q-btn>
        </div>

        <div v-if="$props.data" class="body q-py-sm">
            <q-list>
                <q-item-label header class="ellipsis text-h5" :lines="1">
                    {{ $props.description }}
                    <q-tooltip>{{ $props.description }}</q-tooltip>
                </q-item-label>
                <q-item dense>
                    <q-item-label class="text-subtitle2" caption>#{{ data.id }}</q-item-label>
                </q-item>
            </q-list>
            <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">
.body {
    .q-card__actions {
        justify-content: center;
    }
    .text-h5 {
        padding-top: 5px;
        padding-bottom: 5px;
    }
}
</style>

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

    .header {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
    }
}
</style>