chamomind/jws-frontend
chamomind/jws-frontend
6
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"> <script setup lang="ts">
import { dateFormat } from 'src/utils/datetime'; import { dateFormat } from 'src/utils/datetime';
import { Status } from 'stores/types'; import { Status } from 'stores/types';
import ToggleButton from '../button/ToggleButton.vue';
withDefaults( withDefaults(
defineProps<{ defineProps<{
title?: string; title?: string;
@ -128,23 +128,17 @@ withDefaults(
</q-item> </q-item>
<q-item dense> <q-item dense>
<q-item-section class="q-py-sm"> <q-item-section class="q-py-sm">
<div class="q-pa-sm surface-2 rounded"> <div class="q-pa-sm surface-2 rounded flex items-center">
<q-toggle <ToggleButton
dense two-way
size="sm"
@click="$emit('toggleStatus', id)" @click="$emit('toggleStatus', id)"
:model-value="!isDisabled" :model-value="!isDisabled"
val="xs" />
padding="none" <span class="q-pl-md">
> {{
<div class="q-ml-xs"> !isDisabled ? $t('switchOnLabel') : $t('switchOffLabel')
{{ }}
!isDisabled </span>
? $t('switchOnLabel')
: $t('switchOffLabel')
}}
</div>
</q-toggle>
</div> </div>
</q-item-section> </q-item-section>
</q-item> </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 { dateFormat } from 'src/utils/datetime';
import { formatNumberDecimal } from 'stores/utils'; import { formatNumberDecimal } from 'stores/utils';
import ToggleButton from '../button/ToggleButton.vue';
const addedProduct = ref<boolean>(false); const addedProduct = ref<boolean>(false);
@ -106,23 +107,17 @@ withDefaults(
<q-item dense> <q-item dense>
<q-item-section class="q-py-sm"> <q-item-section class="q-py-sm">
<div class="q-pa-sm surface-2 rounded"> <div class="q-pa-sm surface-2 rounded flex items-center">
<q-toggle <ToggleButton
dense two-way
size="sm"
@click="$emit('toggleStatus', data?.id)" @click="$emit('toggleStatus', data?.id)"
:model-value="!isDisabled" :model-value="!isDisabled"
val="xs" />
padding="none" <span class="q-pl-md">
> {{
<div class="q-ml-xs"> !isDisabled ? $t('switchOnLabel') : $t('switchOffLabel')
{{ }}
!isDisabled </span>
? $t('switchOnLabel')
: $t('switchOffLabel')
}}
</div>
</q-toggle>
</div> </div>
</q-item-section> </q-item-section>
</q-item> </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"> <span v-if="toggleTitle" class="q-mr-md app-text-muted-2">
{{ toggleTitle }} {{ toggleTitle }}
</span> </span>
<q-toggle
<ToggleButton
v-if="useToggle" v-if="useToggle"
id="toggle-status" two-way
dense
size="md"
padding="none"
color="positive"
:model-value="toggleStatus !== 'INACTIVE'" :model-value="toggleStatus !== 'INACTIVE'"
@click="$emit('update:toggleStatus', toggleStatus)" @click="$emit('update:toggleStatus', toggleStatus)"
/> />

33
src/components/TreeComponent.vue
View file

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