152 lines
3.8 KiB
Vue
152 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import { dateFormat } from 'src/utils/datetime';
|
|
import { Status } from 'stores/types';
|
|
import KebabAction from '../shared/KebabAction.vue';
|
|
withDefaults(
|
|
defineProps<{
|
|
title?: string;
|
|
subtitle?: string;
|
|
color?: string;
|
|
status?: Status;
|
|
date?: Date;
|
|
isType?: boolean;
|
|
id?: string;
|
|
isDisabled?: boolean;
|
|
noAction?: boolean;
|
|
countType?: number;
|
|
countProduct?: number;
|
|
countService?: number;
|
|
action?: boolean;
|
|
}>(),
|
|
{
|
|
color: 'var(--brand-1)',
|
|
},
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:id="`enter-${title}`"
|
|
class="full-width rounded q-pa-sm"
|
|
@click="
|
|
() => {
|
|
$emit('onClick');
|
|
}
|
|
"
|
|
:class="{
|
|
'hover-card': !isDisabled,
|
|
}"
|
|
:style="`border: 1px solid hsla(var(--gray-7-hsl) / ${isDisabled ? 0.1 : 0.3})`"
|
|
>
|
|
<div
|
|
class="relative-position rounded q-pb-lg"
|
|
:style="`background-color:hsla(${color}/.2)`"
|
|
>
|
|
<div class="row justify-between items-center">
|
|
<q-avatar
|
|
round
|
|
icon="mdi-folder"
|
|
size="48px"
|
|
class="q-my-md q-ml-md"
|
|
:class="{ 'disabled-card': isDisabled }"
|
|
:style="`color:hsl(${color});background-color:var(--surface-1) `"
|
|
/>
|
|
|
|
<KebabAction
|
|
:id-name="id"
|
|
:status="status"
|
|
class="absolute-top-right"
|
|
v-if="action"
|
|
@view="$emit('viewCard')"
|
|
@edit="$emit('updateCard')"
|
|
@delete="$emit('deleteCard')"
|
|
@change-status="$emit('toggleStatus', id)"
|
|
/>
|
|
</div>
|
|
|
|
<div class="q-px-md" :class="{ 'disabled-card': isDisabled }">
|
|
<div class="text-subtitle1 text-bold">{{ title }}</div>
|
|
<div class="text-subtitle3 app-text-muted">{{ subtitle }}</div>
|
|
<div class="row q-gutter-md q-mt-sm">
|
|
<div
|
|
v-if="!isType"
|
|
class="col-3 bordered row justify-between q-px-sm rounded no-wrap"
|
|
style="border-radius: 5px"
|
|
>
|
|
<div><q-icon name="mdi-folder-table" /></div>
|
|
<div>{{ countType }}</div>
|
|
</div>
|
|
<div
|
|
class="col-3 bordered row justify-between q-px-sm rounded no-wrap"
|
|
style="border-radius: 5px"
|
|
>
|
|
<div><q-icon name="mdi-server-network" /></div>
|
|
<div>{{ countService }}</div>
|
|
</div>
|
|
<div
|
|
class="col-3 bordered row justify-between q-px-sm rounded no-wrap"
|
|
style="border-radius: 5px"
|
|
>
|
|
<div><q-icon name="mdi-shopping" /></div>
|
|
<div>{{ countProduct }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="q-pt-lg q-pb-sm row justify-between"
|
|
:class="{ 'disabled-card': isDisabled }"
|
|
>
|
|
<div class="flex items-center">
|
|
<q-icon
|
|
size="xs"
|
|
name="mdi-calendar-month"
|
|
class="q-mr-sm rounded q-pa-xs"
|
|
style="color: var(--stone-6); background-color: var(--surface-3)"
|
|
/>
|
|
{{ dateFormat(date) }}
|
|
</div>
|
|
<q-btn
|
|
@click.stop="
|
|
() => {
|
|
$emit('viewCard');
|
|
}
|
|
"
|
|
unelevated
|
|
class="q-px-sm text-capitalize"
|
|
:label="$t('general.detail')"
|
|
style="
|
|
background-color: hsla(var(--blue-5-hsl) / 0.1);
|
|
color: var(--blue-5);
|
|
"
|
|
>
|
|
<q-icon
|
|
size="xs"
|
|
name="mdi-chevron-right"
|
|
class="rounded"
|
|
style="color: var(--blue-5)"
|
|
/>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.sub-card {
|
|
background-color: var(--surface-0);
|
|
border-radius: 0 0 var(--radius-2) var(--radius-2);
|
|
font-size: 16px;
|
|
}
|
|
|
|
.hover-card:hover {
|
|
cursor: pointer;
|
|
opacity: 0.8;
|
|
box-shadow: var(--shadow-3);
|
|
}
|
|
|
|
.disabled-card {
|
|
opacity: 0.4;
|
|
|
|
cursor: pointer;
|
|
}
|
|
</style>
|