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

feat: Personnel drawer info edit, delete, undo

Browse source
This commit is contained in:
puriphatt 2024-04-19 09:06:38 +07:00
parent d1d58d55c1
commit b6e8078c3c
8 changed files with 220 additions and 625 deletions
Download patch file Download diff file Expand all files Collapse all files

193
src/components/DrawerInfo.vue
View file

@ -1,102 +1,153 @@
<script setup lang="ts">
import { ref } from 'vue';
defineProps<{
title: string;
isEdit?: boolean;
editData?: (...args: unknown[]) => void;
deleteData?: (...args: unknown[]) => void;
submit?: (...args: unknown[]) => void;
close?: (...args: unknown[]) => void;
undo?: (...args: unknown[]) => void;
}>();
const drawerOpen = defineModel<boolean>('drawerOpen', {
default: false,
});
const myForm = ref();
function reset() {
if (myForm.value) {
myForm.value.resetValidation();
}
}
</script>
<template>
<q-drawer
@before-hide="reset"
@hide="close"
:width="1100"
:width="1300"
:breakpoint="500"
v-model="drawerOpen"
behavior="mobile"
side="right"
show-if-above
>
<AppBox
class="column justify-between full-height"
style="padding: 0; border-radius: var(--radius-2)"
<q-form
ref="myForm"
class="full-height"
greedy
@submit.prevent
@validation-success="submit"
>
<div class="form-header col q-px-lg row items-center">
<q-btn
round
flat
id="closeDialog"
icon="mdi-pencil-outline"
padding="xs"
class="q-mr-md"
:class="{ dark: $q.dark.isActive }"
style="color: var(--brand-1)"
@click="editData"
/>
<q-btn
round
flat
id="closeDialog"
icon="mdi-trash-can-outline"
padding="xs"
:class="{ dark: $q.dark.isActive }"
style="color: hsl(var(--negative-bg))"
@click="deleteData"
/>
<AppBox
class="column justify-between full-height"
style="padding: 0; border-radius: var(--radius-2)"
>
<div class="form-header col q-px-lg row items-center">
<div v-if="isEdit" class="row">
<q-btn
round
flat
id="closeDialog"
icon="mdi-undo"
padding="xs"
class="q-mr-md"
:class="{ dark: $q.dark.isActive }"
style="color: var(--brand-1)"
@click="undo"
/>
<div style="width: 31.98px"></div>
</div>
<div v-else>
<q-btn
round
flat
id="editDialog"
icon="mdi-pencil-outline"
padding="xs"
class="q-mr-md"
:class="{ dark: $q.dark.isActive }"
style="color: var(--brand-1)"
@click="editData"
/>
<q-btn
round
flat
id="deleteDialog"
icon="mdi-trash-can-outline"
padding="xs"
:class="{ dark: $q.dark.isActive }"
style="color: hsl(var(--negative-bg))"
@click="deleteData"
/>
</div>
<div class="col text-subtitle1 text-weight-bold text-center">
{{ title }}
<div class="col text-subtitle1 text-weight-bold text-center">
{{ title }}
</div>
<div style="width: 31.98px"></div>
<q-btn
round
flat
id="closeDialog"
icon="mdi-close"
padding="xs"
class="close-btn"
:class="{ dark: $q.dark.isActive }"
type="reset"
@click="close"
resetValidation
/>
</div>
<div style="width: 31.98px"></div>
<q-btn
round
flat
id="closeDialog"
icon="mdi-close"
padding="xs"
class="close-btn"
<div
class="col-10 form-body"
style="position: relative"
:class="{ dark: $q.dark.isActive }"
@click="close"
/>
</div>
:style="`background-image: url(/personnel-info-bg-${$q.dark.isActive ? 'dark' : 'light'}.png)`"
>
<slot name="info"></slot>
</div>
<div
class="col-10 form-body"
style="position: relative"
:class="{ dark: $q.dark.isActive }"
:style="`background-image: url(/personnel-info-bg-${$q.dark.isActive ? 'dark' : 'light'}.png)`"
>
<slot name="info"></slot>
</div>
<div
class="form-footer col q-pr-lg row items-center justify-end q-gutter-x-lg"
>
<q-btn
dense
outline
unelevated
id="cancelBtn"
class="q-px-md app-text-negative"
:label="$t('cancel')"
@click="close"
/>
<q-btn
dense
unelevated
id="submitBtn"
type="submit"
color="primary"
class="q-px-md"
:label="$t('save')"
/>
</div>
</AppBox>
<div
class="form-footer col q-pr-lg row items-center justify-end q-gutter-x-lg"
>
<q-btn
dense
outline
unelevated
id="cancelBtn"
class="q-px-md app-text-negative"
:label="$t('cancel')"
type="reset"
@click="close"
/>
<q-btn
v-if="isEdit"
dense
unelevated
id="submitBtn"
type="submit"
color="primary"
class="q-px-md"
:label="$t('save')"
/>
<q-btn
v-else
dense
unelevated
id="okBtn"
color="primary"
class="q-px-md"
label="ตกลง"
@click="close"
/>
</div>
</AppBox>
</q-form>
</q-drawer>
</template>