135 lines
3.1 KiB
Vue
135 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
const urlProfile = defineModel('urlProfile', {
|
|
default: '',
|
|
});
|
|
const profileSubmit = defineModel('profileSubmit');
|
|
const statusToggle = defineModel('statusToggle');
|
|
|
|
defineEmits<{
|
|
(e: 'inputFile'): void;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="text-center">
|
|
<div class="upload-img-preview">
|
|
<q-img
|
|
v-if="urlProfile"
|
|
:src="urlProfile"
|
|
style="object-fit: cover; width: 100%; height: 100%"
|
|
/>
|
|
<q-icon
|
|
v-else
|
|
name="mdi-account full-height"
|
|
size="3vw"
|
|
style="color: var(--border-color)"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-if="urlProfile && !profileSubmit"
|
|
class="col-12 row q-mt-md q-col-gutter-x-md"
|
|
>
|
|
<div class="col-6">
|
|
<q-btn
|
|
id="btn-profile-cancel"
|
|
dense
|
|
unelevated
|
|
outlined
|
|
padding="8px"
|
|
class="cancel-img-btn full-width"
|
|
:label="$t('cancel')"
|
|
@click="urlProfile = ''"
|
|
/>
|
|
</div>
|
|
<div class="col-6">
|
|
<q-btn
|
|
id="btn-profile-save"
|
|
dense
|
|
unelevated
|
|
outlined
|
|
padding="8px"
|
|
class="submit-img-btn full-width"
|
|
:label="$t('save')"
|
|
@click="profileSubmit = true"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<q-btn
|
|
id="btn-profile-edit"
|
|
v-else-if="urlProfile && profileSubmit"
|
|
dense
|
|
unelevated
|
|
outlined
|
|
padding="8px"
|
|
icon="mdi-pencil-outline"
|
|
class="edit-img-btn q-mt-md full-width"
|
|
:label="$t('formDialogBtnEditProfile')"
|
|
@click.prevent="$emit('inputFile'), (profileSubmit = false)"
|
|
/>
|
|
|
|
<q-btn
|
|
id="btn-profile-upload"
|
|
v-else
|
|
dense
|
|
unelevated
|
|
outlined
|
|
padding="8px"
|
|
class="upload-img-btn q-mt-md full-width"
|
|
:label="$t('formDialogBtnUploadProfile')"
|
|
:class="{ dark: $q.dark.isActive }"
|
|
@click="$emit('inputFile')"
|
|
/>
|
|
<q-separator class="col-12 q-my-md" />
|
|
<div class="text-left q-pt-md">
|
|
<q-toggle
|
|
dense
|
|
size="md"
|
|
v-model="statusToggle"
|
|
padding="none"
|
|
class="q-pr-md"
|
|
/>
|
|
<span>{{ $t('formDialogTitleUserStatus') }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.upload-img-preview {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-2);
|
|
height: 12vw;
|
|
background-color: var(--surface-1);
|
|
}
|
|
|
|
.upload-img-btn {
|
|
color: hsl(var(--info-bg));
|
|
border: 1px solid hsl(var(--info-bg));
|
|
background-color: hsla(var(--info-bg) / 0.1);
|
|
border-radius: var(--radius-2);
|
|
|
|
&.dark {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.edit-img-btn {
|
|
color: hsl(var(--info-bg));
|
|
border: 1px solid hsl(var(--info-bg));
|
|
background-color: transparent;
|
|
border-radius: var(--radius-2);
|
|
}
|
|
|
|
.cancel-img-btn {
|
|
color: hsl(var(--negative-bg));
|
|
border: 1px solid hsl(var(--negative-bg));
|
|
background-color: transparent;
|
|
border-radius: var(--radius-2);
|
|
}
|
|
|
|
.submit-img-btn {
|
|
color: var(--surface-1);
|
|
border: 1px solid hsl(var(--positive-bg));
|
|
background-color: hsl(var(--positive-bg));
|
|
border-radius: var(--radius-2);
|
|
}
|
|
</style>
|