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

refactor(04): use new toggle button & component

Browse source
This commit is contained in:
puriphatt 2024-08-13 08:55:49 +00:00
parent a07d11db0a
commit da6a7b00f1
4 changed files with 46 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,7 @@
<script setup lang="ts">
import { dateFormat } from 'src/utils/datetime';
import { Status } from 'stores/types';
import ToggleButton from '../button/ToggleButton.vue';
withDefaults(
defineProps<{
title?: string;
@ -128,23 +128,17 @@ withDefaults(
</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"
<div class="q-pa-sm surface-2 rounded flex items-center">
<ToggleButton
two-way
@click="$emit('toggleStatus', id)"
:model-value="!isDisabled"
val="xs"
padding="none"
>
<div class="q-ml-xs">
{{
!isDisabled
? $t('switchOnLabel')
: $t('switchOffLabel')
}}
</div>
</q-toggle>
/>
<span class="q-pl-md">
{{
!isDisabled ? $t('switchOnLabel') : $t('switchOffLabel')
}}
</span>
</div>
</q-item-section>
</q-item>

25
src/components/04_product-service/TotalProductCardComponent.vue
View file

@ -4,6 +4,7 @@ import AppBox from 'components/app/AppBox.vue';
import { dateFormat } from 'src/utils/datetime';
import { formatNumberDecimal } from 'stores/utils';
import ToggleButton from '../button/ToggleButton.vue';
const addedProduct = ref<boolean>(false);
@ -106,23 +107,17 @@ withDefaults(
<q-item dense>
<q-item-section class="q-py-sm">
<div class="q-pa-sm surface-2 rounded">
<q-toggle
dense
size="sm"
<div class="q-pa-sm surface-2 rounded flex items-center">
<ToggleButton
two-way
@click="$emit('toggleStatus', data?.id)"
:model-value="!isDisabled"
val="xs"
padding="none"
>
<div class="q-ml-xs">
{{
!isDisabled
? $t('switchOnLabel')
: $t('switchOffLabel')
}}
</div>
</q-toggle>
/>
<span class="q-pl-md">
{{
!isDisabled ? $t('switchOnLabel') : $t('switchOffLabel')
}}
</span>
</div>
</q-item-section>
</q-item>

9
src/components/ProfileBanner.vue
View file

@ -157,13 +157,10 @@ const showOverlay = ref(false);
<span v-if="toggleTitle" class="q-mr-md app-text-muted-2">
{{ toggleTitle }}
</span>
<q-toggle
<ToggleButton
v-if="useToggle"
id="toggle-status"
dense
size="md"
padding="none"
color="positive"
two-way
:model-value="toggleStatus !== 'INACTIVE'"
@click="$emit('update:toggleStatus', toggleStatus)"
/>

33
src/components/TreeComponent.vue
View file

@ -1,5 +1,7 @@
<script setup lang="ts">
import { BranchWithChildren } from 'stores/branch/types';
import ToggleButton from './button/ToggleButton.vue';
const nodes = defineModel<(any | BranchWithChildren)[]>('nodes', {
default: [],
});
@ -20,6 +22,17 @@ withDefaults(
labelKey: 'name',
},
);
defineEmits<{
(e: 'handleHold', node: string): void;
(e: 'select', node: string): void;
(e: 'create', node: string): void;
(e: 'view', node: string): void;
(e: 'edit', node: string): void;
(e: 'delete', node: string): void;
(e: 'changeStatus', node: string): void;
}>();
</script>
<template>
@ -188,20 +201,20 @@ withDefaults(
<q-item dense>
<q-item-section class="q-py-sm">
<div class="q-pa-sm surface-2 rounded">
<q-toggle
<div class="q-pa-sm surface-2 rounded flex items-center">
<ToggleButton
:id="`view-detail-btn-${node.name}-status`"
color="positive"
dense
size="sm"
:label="
two-way
:model-value="node.status !== 'INACTIVE'"
@click="() => $emit('changeStatus', node)"
/>
<span class="q-pl-md">
{{
node.status !== 'INACTIVE'
? $t('switchOnLabel')
: $t('switchOffLabel')
"
@click.stop="() => $emit('changeStatus', node)"
:model-value="node.status !== 'INACTIVE'"
/>
}}
</span>
</div>
</q-item-section>
</q-item>