165 lines
3.9 KiB
Vue
165 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
const urlProfile = defineModel('urlProfile', {
|
|
default: '',
|
|
});
|
|
const profileSubmit = defineModel('profileSubmit');
|
|
const statusToggle = defineModel('statusToggle');
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
isProduct?: boolean;
|
|
isService?: boolean;
|
|
labelStatusToggle?: string;
|
|
hideToggle?: boolean;
|
|
readonly?: boolean;
|
|
prefixId: string;
|
|
}>(),
|
|
{
|
|
hideToggle: true,
|
|
},
|
|
);
|
|
|
|
defineEmits<{
|
|
(e: 'inputFile'): void;
|
|
(e: 'cancelFile'): void;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="text-center">
|
|
<div
|
|
class="upload-img-preview"
|
|
:style="$q.screen.lt.md ? 'height: 200px' : 'height: 12vw'"
|
|
>
|
|
<q-img
|
|
v-if="urlProfile"
|
|
:src="urlProfile"
|
|
style="object-fit: cover; width: 100%; height: 100%"
|
|
/>
|
|
<q-img
|
|
v-else-if="isProduct"
|
|
src="shop-add-image.png"
|
|
style="object-fit: cover; width: 100%; height: 100%"
|
|
/>
|
|
<q-img
|
|
v-else-if="isService"
|
|
src="service-add-image.png"
|
|
style="object-fit: cover; width: 100%; height: 100%"
|
|
/>
|
|
<q-icon
|
|
v-else
|
|
name="mdi-account full-height"
|
|
size="4rem"
|
|
style="color: var(--border-color)"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-if="urlProfile && !profileSubmit && !readonly"
|
|
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 = ''), $emit('cancelFile')"
|
|
/>
|
|
</div>
|
|
<div class="col-6">
|
|
<q-btn
|
|
:id="`${prefixId}-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="`${prefixId}-btn-profile-edit`"
|
|
v-else-if="urlProfile && profileSubmit && !readonly"
|
|
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="`${prefixId}-btn-profile-upload`"
|
|
v-if="!urlProfile && !readonly"
|
|
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-lg" />
|
|
<div class="text-left q-pb-md" v-if="hideToggle">
|
|
<q-toggle
|
|
:id="`${prefixId}-toggle-status`"
|
|
dense
|
|
size="md"
|
|
v-model="statusToggle"
|
|
padding="none"
|
|
class="q-pr-md"
|
|
/>
|
|
<span>
|
|
{{ statusToggle ? $t('switchOnLabel') : $t('switchOffLabel') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.upload-img-preview {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-2);
|
|
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>
|