feat: no data component + product and service ui (tab)
This commit is contained in:
oat_dev
parent
aa45d6e248
commit
728bcf94d8
2 changed files with 144 additions and 39 deletions
17
src/components/NoData.vue
Normal file
17
src/components/NoData.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
size?: number;
|
||||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<q-img
|
||||
src="no-data.png"
|
||||
:style="{
|
||||
height: size ? `${size}px` : '120px',
|
||||
width: size ? `${size + 2}px` : '123px',
|
||||
}"
|
||||
/>
|
||||
<div class="app-text-muted text-center">{{ $t('noData') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -12,6 +12,7 @@ import TooltipComponent from 'components/TooltipComponent.vue';
|
|||
import ButtonAddComponent from 'src/components/ButtonAddCompoent.vue';
|
||||
|
||||
import { Status } from 'src/stores/types';
|
||||
import NoData from 'components/NoData.vue';
|
||||
|
||||
import { dialog } from 'src/stores/utils';
|
||||
|
||||
|
|
@ -65,7 +66,7 @@ const dialogTotalProduct = ref<boolean>(false);
|
|||
const productMode = ref<'group' | 'type' | 'service' | 'product'>('group');
|
||||
const productGroup = ref<Product[]>();
|
||||
const productType = ref<Product[]>();
|
||||
|
||||
const productAndServiceTab = ref<string>('all');
|
||||
const previousValue = ref();
|
||||
|
||||
const formData = ref<ProductCreate>({
|
||||
|
|
@ -495,45 +496,132 @@ watch(currentStatus, async () => {});
|
|||
</div>
|
||||
</AppBox>
|
||||
<AppBox bordered v-else-if="productMode === 'service'" no-padding>
|
||||
<div
|
||||
class="row justify-center q-py-sm"
|
||||
style="background-color: var(--surface-2)"
|
||||
>
|
||||
<q-input
|
||||
style="width: 500px"
|
||||
outlined
|
||||
dense
|
||||
:label="$t('search')"
|
||||
class="q-mr-md"
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="inputSearch"
|
||||
debounce="500"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="mdi-magnify" />
|
||||
</template>
|
||||
</q-input>
|
||||
<q-btn
|
||||
icon="mdi-plus"
|
||||
:color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
:text-color="$q.dark.isActive ? 'white' : 'dark'"
|
||||
class="bordered rounded q-px-sm"
|
||||
unelevated
|
||||
@click="dialogProductServiceType = true"
|
||||
/>
|
||||
<div class="q-mx-lg">ปุ่มรวมสินค้าทั้งหมด >></div>
|
||||
<q-btn
|
||||
unelevated
|
||||
@click="dialogTotalProduct = true"
|
||||
class="bordered rounded q-px-sm"
|
||||
icon="mdi-plus"
|
||||
:color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
:text-color="$q.dark.isActive ? 'white' : 'dark'"
|
||||
round
|
||||
/>
|
||||
<div class="row justify-between q-px-md">
|
||||
<q-tabs v-model="productAndServiceTab" dense>
|
||||
<q-tab name="all">
|
||||
<div
|
||||
class="row"
|
||||
:class="
|
||||
productAndServiceTab === 'all'
|
||||
? 'text-bold'
|
||||
: 'app-text-muted'
|
||||
"
|
||||
>
|
||||
ทั้งหมด
|
||||
<q-badge
|
||||
class="rounded q-ml-sm"
|
||||
:class="
|
||||
productAndServiceTab === 'all' ? '' : 'app-text-muted'
|
||||
"
|
||||
:color="productAndServiceTab === 'all' ? 'primary' : ''"
|
||||
style="background-color: var(--surface-3)"
|
||||
label="2"
|
||||
/>
|
||||
</div>
|
||||
</q-tab>
|
||||
|
||||
<q-tab name="product">
|
||||
<div
|
||||
class="row"
|
||||
:class="
|
||||
productAndServiceTab === 'product'
|
||||
? 'text-bold'
|
||||
: 'app-text-muted'
|
||||
"
|
||||
>
|
||||
ทั้งหมด
|
||||
<q-badge
|
||||
class="rounded q-ml-sm"
|
||||
:class="
|
||||
productAndServiceTab === 'product' ? '' : 'app-text-muted'
|
||||
"
|
||||
:color="productAndServiceTab === 'product' ? 'primary' : ''"
|
||||
style="background-color: var(--surface-3)"
|
||||
label="2"
|
||||
/>
|
||||
</div>
|
||||
</q-tab>
|
||||
<q-tab name="service">
|
||||
<div
|
||||
class="row"
|
||||
:class="
|
||||
productAndServiceTab === 'service'
|
||||
? 'text-bold'
|
||||
: 'app-text-muted'
|
||||
"
|
||||
>
|
||||
ทั้งหมด
|
||||
<q-badge
|
||||
class="rounded q-ml-sm"
|
||||
:class="
|
||||
productAndServiceTab === 'service' ? '' : 'app-text-muted'
|
||||
"
|
||||
:color="productAndServiceTab === 'service' ? 'primary' : ''"
|
||||
style="background-color: var(--surface-3)"
|
||||
label="2"
|
||||
/>
|
||||
</div>
|
||||
</q-tab>
|
||||
</q-tabs>
|
||||
|
||||
<div class="row q-pt-sm q-mb-sm">
|
||||
<q-input
|
||||
style="width: 300px"
|
||||
outlined
|
||||
dense
|
||||
unelavated
|
||||
:label="$t('search')"
|
||||
class="q-mr-md"
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="inputSearch"
|
||||
debounce="500"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="mdi-magnify" />
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-btn
|
||||
icon="mdi-tune-vertical-variant"
|
||||
size="sm"
|
||||
:color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
:text-color="$q.dark.isActive ? 'white' : 'dark'"
|
||||
class="bordered rounded q-py-sm"
|
||||
unelevated
|
||||
>
|
||||
<q-menu class="bordered">
|
||||
<q-list v-close-popup dense>
|
||||
<q-item
|
||||
clickable
|
||||
class="flex items-center"
|
||||
@click="console.log('test')"
|
||||
>
|
||||
{{ $t('all') }}
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
class="flex items-center"
|
||||
@click="console.log('test')"
|
||||
>
|
||||
{{ $t('statusACTIVE') }}
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
class="flex items-center"
|
||||
@click="console.log('test')"
|
||||
>
|
||||
{{ $t('statusINACTIVE') }}
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center items-center" style="min-height: 70vh">
|
||||
asdasdasd
|
||||
<div
|
||||
class="flex justify-center items-center"
|
||||
style="min-height: 70vh; background-color: var(--surface-2)"
|
||||
>
|
||||
<NoData />
|
||||
</div>
|
||||
</AppBox>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue