229 lines
5.3 KiB
Vue
229 lines
5.3 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
userData: {
|
|
type: Object,
|
|
required: false,
|
|
default: () => ({
|
|
avatar: '',
|
|
company: '',
|
|
contact: '',
|
|
country: null,
|
|
currentPlan: '',
|
|
email: '',
|
|
fullName: '',
|
|
id: 0,
|
|
role: '',
|
|
status: null,
|
|
username: '',
|
|
language: [],
|
|
projectDone: 0,
|
|
taskDone: 0,
|
|
taxId: '',
|
|
}),
|
|
},
|
|
isDialogVisible: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits([
|
|
'submit',
|
|
'update:isDialogVisible',
|
|
])
|
|
|
|
const userData = ref(structuredClone(toRaw(props.userData)))
|
|
|
|
watch(props, () => {
|
|
userData.value = structuredClone(toRaw(props.userData))
|
|
})
|
|
|
|
const onFormSubmit = () => {
|
|
emit('update:isDialogVisible', false)
|
|
emit('submit', userData.value)
|
|
}
|
|
|
|
const onFormReset = () => {
|
|
userData.value = structuredClone(toRaw(props.userData))
|
|
emit('update:isDialogVisible', false)
|
|
}
|
|
|
|
const dialogVisibleUpdate = val => {
|
|
emit('update:isDialogVisible', val)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<VDialog
|
|
:width="$vuetify.display.smAndDown ? 'auto' : 900 "
|
|
:model-value="props.isDialogVisible"
|
|
@update:model-value="dialogVisibleUpdate"
|
|
>
|
|
<VCard class="pa-sm-11 pa-3">
|
|
<!-- 👉 dialog close btn -->
|
|
<DialogCloseBtn
|
|
variant="text"
|
|
size="default"
|
|
@click="onFormReset"
|
|
/>
|
|
|
|
<VCardText class="pt-5">
|
|
<div class="text-center pb-6">
|
|
<h4 class="text-h4 mb-2">
|
|
Edit User Information
|
|
</h4>
|
|
<div class="text-body-1">
|
|
Updating user details will receive a privacy audit.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 👉 Form -->
|
|
<VForm
|
|
class="mt-4"
|
|
@submit.prevent="onFormSubmit"
|
|
>
|
|
<VRow>
|
|
<!-- 👉 First Name -->
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<VTextField
|
|
v-model="userData.fullName.split(' ')[0]"
|
|
label="First Name"
|
|
placeholder="John"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Last Name -->
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<VTextField
|
|
v-model="userData.fullName.split(' ')[1]"
|
|
label="Last Name"
|
|
placeholder="doe"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 User Name -->
|
|
|
|
<VCol cols="12">
|
|
<VTextField
|
|
v-model="userData.username"
|
|
label="Username"
|
|
placeholder="John Doe"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Billing Email -->
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<VTextField
|
|
v-model="userData.email"
|
|
label="Billing Email"
|
|
placeholder="johndoe@email.com"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Status -->
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<VSelect
|
|
v-model="userData.status"
|
|
:items="['Active', 'Inactive', 'Pending']"
|
|
label="Status"
|
|
placeholder="Status"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Tax Id -->
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<VTextField
|
|
v-model="userData.taxId"
|
|
label="Tax Id"
|
|
placeholder="Tax-3456789"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Contact -->
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<VTextField
|
|
v-model="userData.contact"
|
|
label="Contact"
|
|
placeholder="+1 9876543210"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Language -->
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<VSelect
|
|
v-model="userData.language"
|
|
:items="['English', 'Spanish', 'French']"
|
|
label="Language"
|
|
placeholder="English"
|
|
chips
|
|
closable-chips
|
|
multiple
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Country -->
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<VSelect
|
|
v-model="userData.country"
|
|
:items="['United States', 'United Kingdom', 'France']"
|
|
label="Country"
|
|
placeholder="United States"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Switch -->
|
|
<VCol cols="12">
|
|
<VSwitch
|
|
density="compact"
|
|
label="Use as a billing address?"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Submit and Cancel -->
|
|
<VCol
|
|
cols="12"
|
|
class="d-flex flex-wrap justify-center gap-4"
|
|
>
|
|
<VBtn type="submit">
|
|
Submit
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="secondary"
|
|
variant="outlined"
|
|
@click="onFormReset"
|
|
>
|
|
Cancel
|
|
</VBtn>
|
|
</VCol>
|
|
</VRow>
|
|
</VForm>
|
|
</VCardText>
|
|
</VCard>
|
|
</VDialog>
|
|
</template>
|