237 lines
6.3 KiB
Vue
237 lines
6.3 KiB
Vue
<script setup lang="ts">
|
|
import { dateFormat } from 'src/utils/datetime';
|
|
import { Status } from 'src/stores/types';
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
title?: string;
|
|
subtitle?: string;
|
|
color?: string;
|
|
status?: Status;
|
|
date?: Date;
|
|
isType?: boolean;
|
|
id?: string;
|
|
isDisabled?: boolean;
|
|
}>(),
|
|
{
|
|
color: 'var(--brand-1)',
|
|
},
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
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}/0.1)`"
|
|
>
|
|
<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) `"
|
|
/>
|
|
|
|
<q-btn
|
|
flat
|
|
round
|
|
padding="sm"
|
|
class="absolute-top-right dots-btn"
|
|
icon="mdi-dots-vertical"
|
|
style="z-index: 99; position: absolute; opacity: 1"
|
|
size="sm"
|
|
@click.stop=""
|
|
>
|
|
<q-menu class="bordered">
|
|
<q-list v-close-popup>
|
|
<q-item
|
|
clickable
|
|
dense
|
|
class="row q-py-sm"
|
|
style="white-space: nowrap"
|
|
@click="
|
|
() => {
|
|
$emit('viewCard');
|
|
}
|
|
"
|
|
>
|
|
<q-icon
|
|
name="mdi-eye-outline"
|
|
class="col-3"
|
|
size="xs"
|
|
style="color: hsl(var(--green-6-hsl))"
|
|
/>
|
|
<span class="col-9 q-px-md flex items-center">
|
|
{{ $t('viewDetail') }}
|
|
</span>
|
|
</q-item>
|
|
<q-item
|
|
v-if="!isDisabled"
|
|
dense
|
|
clickable
|
|
class="row q-py-sm"
|
|
style="white-space: nowrap"
|
|
@click="
|
|
() => {
|
|
$emit('updateCard');
|
|
}
|
|
"
|
|
v-close-popup
|
|
>
|
|
<q-icon
|
|
name="mdi-pencil-outline"
|
|
class="col-3"
|
|
size="xs"
|
|
style="color: hsl(var(--cyan-6-hsl))"
|
|
/>
|
|
<span class="col-9 q-px-md flex items-center">
|
|
{{ $t('edit') }}
|
|
</span>
|
|
</q-item>
|
|
<q-item
|
|
v-if="!isDisabled"
|
|
dense
|
|
clickable
|
|
@click="
|
|
() => {
|
|
$emit('deleteCard');
|
|
}
|
|
"
|
|
v-close-popup
|
|
>
|
|
<q-icon
|
|
name="mdi-trash-can-outline"
|
|
size="xs"
|
|
class="col-3 app-text-negative"
|
|
/>
|
|
<span class="col-9 q-px-md flex items-center">
|
|
{{ $t('delete') }}
|
|
</span>
|
|
</q-item>
|
|
<q-item dense>
|
|
<q-item-section class="q-py-sm">
|
|
<div class="q-pa-sm surface-2 rounded">
|
|
<q-toggle
|
|
dense
|
|
size="sm"
|
|
@click="$emit('toggleStatus', id)"
|
|
:model-value="!isDisabled"
|
|
val="xs"
|
|
padding="none"
|
|
>
|
|
<div class="q-ml-xs">
|
|
{{
|
|
!isDisabled
|
|
? $t('switchOnLabel')
|
|
: $t('switchOffLabel')
|
|
}}
|
|
</div>
|
|
</q-toggle>
|
|
</div>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-btn>
|
|
</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>10</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>10</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>10</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"
|
|
:label="$t('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>
|