jws-frontend/src/components/ProfileUpload.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;
  }>(),
  {
    hideToggle: true,
  },
);

defineEmits<{
  (e: 'inputFile'): void;
}>();
</script>

<template>
  <div class="text-center">
    <div
      class="upload-img-preview"
      :style="$q.screen.lt.md ? 'height: 200px' : 'height: 12vh'"
    >
      <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 = ''"
        />
      </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 && !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="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="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>