chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

fix: change product card UI

Browse source
This commit is contained in:
oat_dev 2024-06-14 16:36:28 +07:00
parent d073361a93
commit 18c1f42ef6
2 changed files with 137 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

180
src/components/04_product-service/ProductCardComponent.vue
View file

@ -10,6 +10,7 @@ withDefaults(
color?: string;
status?: Status;
date?: Date;
isType?: boolean;
}>(),
{
color: 'var(--brand-1)',
@ -19,55 +20,142 @@ withDefaults(
<template>
<div
class="full-width rounded hover-card"
:style="`border:1px solid ${color}`"
class="full-width rounded hover-card bordered q-pa-sm"
@click="$emit('onClick')"
>
<div class="q-pa-md row justify-between items-center">
<q-btn
round
icon="mdi-folder"
size="12px"
flat
:style="`color:${color};background-color:var(--surface-0)`"
/>
<AllAroundBtn
:label="'viewDetail'"
:color="color"
@view-detail="$emit('viewDetail')"
/>
</div>
<div class="q-px-md">
<div class="text-subtitle1 text-bold">{{ title }}</div>
<div class="text-subtitle3">{{ subtitle }}</div>
</div>
<div class="q-pa-md q-mt-lg sub-card">
<div>
<div class="row justify-between q-mb-sm">
<div class="app-text-muted">{{ $t('status') }}</div>
<q-badge
v-if="status !== 'INACTIVE'"
class="q-px-md q-py-xs rounded"
style="background-color: var(--teal-0); color: var(--teal-6)"
>
{{ $t('statusACTIVE') }}
</q-badge>
<q-badge
v-else
text-color="orange"
class="q-px-md q-py-xs rounded"
style="background-color: var(--red-1); color: var(--orange-4)"
>
{{ $t('statusINACTIVE') }}
</q-badge>
</div>
<div class="row justify-between">
<div class="app-text-muted">{{ 'วันที่ล่าสุด' }}</div>
<div>{{ dateFormat(date) }}</div>
</div>
<div></div>
<div
class="relative-position rounded q-pb-lg"
:style="`background-color:hsla(${color}/0.1)`"
>
<div class="row justify-between items-center">
<q-btn
round
icon="mdi-folder"
size="12px"
class="q-my-md q-ml-md"
flat
:style="`color:hsl(${color});background-color:var(--surface-0)`"
/>
<q-btn
flat
round
padding="sm"
class="absolute-top-right dots-btn"
icon="mdi-dots-vertical"
style="z-index: 99"
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
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 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>
</template>

5
src/pages/04_product-service/MainPage.vue
View file

@ -510,10 +510,11 @@ watch(currentStatus, async () => {
<ProductCardComponent
v-if="productMode === 'type'"
:title="v.name"
isType
:subtitle="v.code"
:date="new Date(v.updatedAt)"
:status="v.status"
color="var(--purple-11)"
color="var(--purple-11-hsl)"
@view-detail="
() => {
clearForm();
@ -536,7 +537,7 @@ watch(currentStatus, async () => {
:subtitle="v.code"
:date="new Date(v.updatedAt)"
:status="v.status"
color="var(--pink-6)"
color="var(--pink-6-hsl)"
@view-detail="
() => {
clearForm();