fix: change product card UI
This commit is contained in:
oat_dev
parent
d073361a93
commit
18c1f42ef6
2 changed files with 137 additions and 48 deletions
|
|
@ -10,6 +10,7 @@ withDefaults(
|
||||||
color?: string;
|
color?: string;
|
||||||
status?: Status;
|
status?: Status;
|
||||||
date?: Date;
|
date?: Date;
|
||||||
|
isType?: boolean;
|
||||||
}>(),
|
}>(),
|
||||||
{
|
{
|
||||||
color: 'var(--brand-1)',
|
color: 'var(--brand-1)',
|
||||||
|
|
@ -19,55 +20,142 @@ withDefaults(
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="full-width rounded hover-card"
|
class="full-width rounded hover-card bordered q-pa-sm"
|
||||||
:style="`border:1px solid ${color}`"
|
|
||||||
@click="$emit('onClick')"
|
@click="$emit('onClick')"
|
||||||
>
|
>
|
||||||
<div class="q-pa-md row justify-between items-center">
|
<div
|
||||||
<q-btn
|
class="relative-position rounded q-pb-lg"
|
||||||
round
|
:style="`background-color:hsla(${color}/0.1)`"
|
||||||
icon="mdi-folder"
|
>
|
||||||
size="12px"
|
<div class="row justify-between items-center">
|
||||||
flat
|
<q-btn
|
||||||
:style="`color:${color};background-color:var(--surface-0)`"
|
round
|
||||||
/>
|
icon="mdi-folder"
|
||||||
<AllAroundBtn
|
size="12px"
|
||||||
:label="'viewDetail'"
|
class="q-my-md q-ml-md"
|
||||||
:color="color"
|
flat
|
||||||
@view-detail="$emit('viewDetail')"
|
:style="`color:hsl(${color});background-color:var(--surface-0)`"
|
||||||
/>
|
/>
|
||||||
</div>
|
<q-btn
|
||||||
<div class="q-px-md">
|
flat
|
||||||
<div class="text-subtitle1 text-bold">{{ title }}</div>
|
round
|
||||||
<div class="text-subtitle3">{{ subtitle }}</div>
|
padding="sm"
|
||||||
</div>
|
class="absolute-top-right dots-btn"
|
||||||
<div class="q-pa-md q-mt-lg sub-card">
|
icon="mdi-dots-vertical"
|
||||||
<div>
|
style="z-index: 99"
|
||||||
<div class="row justify-between q-mb-sm">
|
size="sm"
|
||||||
<div class="app-text-muted">{{ $t('status') }}</div>
|
@click.stop=""
|
||||||
|
>
|
||||||
<q-badge
|
<q-menu class="bordered">
|
||||||
v-if="status !== 'INACTIVE'"
|
<q-list v-close-popup>
|
||||||
class="q-px-md q-py-xs rounded"
|
<q-item
|
||||||
style="background-color: var(--teal-0); color: var(--teal-6)"
|
clickable
|
||||||
>
|
dense
|
||||||
{{ $t('statusACTIVE') }}
|
class="row q-py-sm"
|
||||||
</q-badge>
|
style="white-space: nowrap"
|
||||||
<q-badge
|
@click="$emit('viewCard')"
|
||||||
v-else
|
>
|
||||||
text-color="orange"
|
<q-icon
|
||||||
class="q-px-md q-py-xs rounded"
|
name="mdi-eye-outline"
|
||||||
style="background-color: var(--red-1); color: var(--orange-4)"
|
class="col-3"
|
||||||
>
|
size="xs"
|
||||||
{{ $t('statusINACTIVE') }}
|
style="color: hsl(var(--green-6-hsl))"
|
||||||
</q-badge>
|
/>
|
||||||
</div>
|
<span class="col-9 q-px-md flex items-center">
|
||||||
<div class="row justify-between">
|
{{ $t('viewDetail') }}
|
||||||
<div class="app-text-muted">{{ 'วันที่ล่าสุด' }}</div>
|
</span>
|
||||||
<div>{{ dateFormat(date) }}</div>
|
</q-item>
|
||||||
</div>
|
<q-item
|
||||||
<div></div>
|
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
|
||||||
|
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-list>
|
||||||
|
</q-menu>
|
||||||
|
</q-btn>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="q-px-md">
|
||||||
|
<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">
|
||||||
|
<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('viewDetail')"
|
||||||
|
unelevated
|
||||||
|
class="q-px-sm"
|
||||||
|
:label="$t('detail')"
|
||||||
|
style="background-color: var(--indigo-0); color: var(--blue-5)"
|
||||||
|
>
|
||||||
|
<q-icon
|
||||||
|
size="xs"
|
||||||
|
name="mdi-chevron-right"
|
||||||
|
class="rounded"
|
||||||
|
style="color: var(--blue-5)"
|
||||||
|
/>
|
||||||
|
</q-btn>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -510,10 +510,11 @@ watch(currentStatus, async () => {
|
||||||
<ProductCardComponent
|
<ProductCardComponent
|
||||||
v-if="productMode === 'type'"
|
v-if="productMode === 'type'"
|
||||||
:title="v.name"
|
:title="v.name"
|
||||||
|
isType
|
||||||
:subtitle="v.code"
|
:subtitle="v.code"
|
||||||
:date="new Date(v.updatedAt)"
|
:date="new Date(v.updatedAt)"
|
||||||
:status="v.status"
|
:status="v.status"
|
||||||
color="var(--purple-11)"
|
color="var(--purple-11-hsl)"
|
||||||
@view-detail="
|
@view-detail="
|
||||||
() => {
|
() => {
|
||||||
clearForm();
|
clearForm();
|
||||||
|
|
@ -536,7 +537,7 @@ watch(currentStatus, async () => {
|
||||||
:subtitle="v.code"
|
:subtitle="v.code"
|
||||||
:date="new Date(v.updatedAt)"
|
:date="new Date(v.updatedAt)"
|
||||||
:status="v.status"
|
:status="v.status"
|
||||||
color="var(--pink-6)"
|
color="var(--pink-6-hsl)"
|
||||||
@view-detail="
|
@view-detail="
|
||||||
() => {
|
() => {
|
||||||
clearForm();
|
clearForm();
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue