sfp_front_vue_diarista_backoffice/src/pages/dashboard/components/ProviderApprovalDialog.vue

<template>
  <q-dialog
    ref="dialogRef"
    @hide="onDialogHide"
  >
    <q-card class="q-dialog-plugin column approval-dialog">
      <DefaultDialogHeader
        :title="() => $t('provider.approval.dialog_title')"
        @close="onDialogCancel"
      />

      <div class="col scroll q-pa-md">

        <div class="row items-center q-mb-md">
          <q-badge
            :color="statusColor"
            :label="$t(`provider.approval_status.${provider.approval_status}`)"
            class="text-body2 q-pa-sm"
          />
        </div>

        <div class="row q-col-gutter-md">

          <!-- Dados pessoais -->
          <div class="col-12 col-lg-4">
            <div class="text-subtitle1 text-weight-bold q-mb-sm">
              {{ $t("provider.approval.section_personal") }}
            </div>

            <q-list
              bordered
              separator
              class="rounded-borders"
            >
              <q-item>
                <q-item-section>
                  <q-item-label caption>
                    {{ $t("common.terms.name") }}
                  </q-item-label>

                  <q-item-label>
                    {{ provider.user?.name || "—" }}
                  </q-item-label>
                </q-item-section>
              </q-item>

              <q-item>
                <q-item-section>
                  <q-item-label caption>
                    {{ $t("common.terms.email") }}
                  </q-item-label>

                  <q-item-label>
                    {{ provider.user?.email || "—" }}
                  </q-item-label>
                </q-item-section>
              </q-item>

              <q-item>
                <q-item-section>
                  <q-item-label caption>
                    {{ $t("provider.fields.document") }}
                  </q-item-label>

                  <q-item-label>
                    {{ provider.document || "—" }}
                  </q-item-label>
                </q-item-section>
              </q-item>

              <q-item>
                <q-item-section>
                  <q-item-label caption>
                    {{ $t("provider.fields.rg") }}
                  </q-item-label>

                  <q-item-label>
                    {{ provider.rg || "—" }}
                  </q-item-label>
                </q-item-section>
              </q-item>

              <q-item>
                <q-item-section>
                  <q-item-label caption>
                    {{ $t("provider.fields.birth_date") }}
                  </q-item-label>

                  <q-item-label>
                    {{ provider.birth_date || "—" }}
                  </q-item-label>
                </q-item-section>
              </q-item>
            </q-list>
          </div>

          <!-- Preços -->
          <div class="col-12 col-lg-4">
            <div class="text-subtitle1 text-weight-bold q-mb-sm">
              {{ $t("provider.approval.section_pricing") }}
            </div>

            <q-list
              bordered
              separator
              class="rounded-borders"
            >
              <q-item>
                <q-item-section>
                  <q-item-label caption>
                    {{ $t("provider.fields.daily_price_8h") }}
                  </q-item-label>

                  <q-item-label>
                    {{ formatCurrency(provider.daily_price_8h) }}
                  </q-item-label>
                </q-item-section>
              </q-item>

              <q-item>
                <q-item-section>
                  <q-item-label caption>
                    {{ $t("provider.fields.daily_price_6h") }}
                  </q-item-label>

                  <q-item-label>
                    {{ formatCurrency(provider.daily_price_6h) }}
                  </q-item-label>
                </q-item-section>
              </q-item>

              <q-item>
                <q-item-section>
                  <q-item-label caption>
                    {{ $t("provider.fields.daily_price_4h") }}
                  </q-item-label>

                  <q-item-label>
                    {{ formatCurrency(provider.daily_price_4h) }}
                  </q-item-label>
                </q-item-section>
              </q-item>

              <q-item>
                <q-item-section>
                  <q-item-label caption>
                    {{ $t("provider.fields.daily_price_2h") }}
                  </q-item-label>

                  <q-item-label>
                    {{ formatCurrency(provider.daily_price_2h) }}
                  </q-item-label>
                </q-item-section>
              </q-item>
            </q-list>
          </div>

        <!-- Documentos -->
          <div class="col-12 col-lg-4">
            <div class="text-subtitle1 text-weight-bold q-mb-sm">
              {{ $t("provider.approval.section_documents") }}
            </div>

            <!-- Selfie -->
            <div class="q-mb-md">
              <div class="text-caption text-grey-6 q-mb-xs">
                {{ $t("provider.approval.selfie") }}
              </div>

              <div
                class="doc-frame"
                :class="{ 'doc-frame--clickable': avatarPreview }"
                @click="avatarPreview && (docLightbox = avatarPreview)"
              >
                <q-img
                  v-if="avatarPreview"
                  :src="avatarPreview"
                  fit="cover"
                  style="width: 100%; height: 100%;"
                />

                <div
                  v-else
                  class="column flex-center text-grey-5"
                >
                  <q-icon
                    name="mdi-account"
                    size="40px"
                  />
                </div>
              </div>
            </div>

            <!-- Documento Frente -->
            <div class="q-mb-md">
              <div class="text-caption text-grey-6 q-mb-xs">
                {{ $t("provider.fields.document_front") }}
              </div>

              <div
                class="doc-frame"
                :class="{ 'doc-frame--clickable': documentFrontUrl }"
                @click="documentFrontUrl && (docLightbox = documentFrontUrl)"
              >
                <q-img
                  v-if="documentFrontUrl"
                  :src="documentFrontUrl"
                  fit="contain"
                  style="width:100%;height:100%;"
                />

                <div
                  v-else
                  class="column flex-center text-grey-5"
                >
                  <q-icon
                    name="mdi-image-off-outline"
                    size="36px"
                  />
                </div>
              </div>
            </div>

            <!-- Documento Verso -->
            <div>
              <div class="text-caption text-grey-6 q-mb-xs">
                {{ $t("provider.fields.document_back") }}
              </div>

              <div
                class="doc-frame"
                :class="{ 'doc-frame--clickable': documentBackUrl }"
                @click="documentBackUrl && (docLightbox = documentBackUrl)"
              >
                <q-img
                  v-if="documentBackUrl"
                  :src="documentBackUrl"
                  fit="contain"
                  style="width:100%;height:100%;"
                />

                <div
                  v-else
                  class="column flex-center text-grey-5"
                >
                  <q-icon
                    name="mdi-image-off-outline"
                    size="36px"
                  />
                </div>
              </div>
            </div>
          </div>

        </div>

        <div class="text-caption text-grey-6 q-mt-md">
          {{ provider.created_at || "—" }}
        </div>

      </div>

      <q-card-actions class="q-pa-md row q-col-gutter-sm">

        <div class="col-12 col-sm-auto">
          <q-btn
            class="full-width"
            flat
            :label="$t('common.actions.cancel')"
            color="grey-7"
            @click="onDialogCancel"
          />
        </div>

        <div
          v-if="provider.approval_status !== 'rejected'"
          class="col-12 col-sm-auto"
        >
          <q-btn
            class="full-width"
            unelevated
            color="negative"
            :label="$t('provider.approval.btn_reject')"
            :loading="loadingReject"
            @click="onReject"
          />
        </div>

        <div
          v-if="provider.approval_status !== 'accepted'"
          class="col-12 col-sm-auto"
        >
          <q-btn
            class="full-width"
            unelevated
            color="positive"
            :label="$t('provider.approval.btn_approve')"
            :loading="loadingApprove"
            @click="onApprove"
          />
        </div>

      </q-card-actions>
    </q-card>
  </q-dialog>

  <q-dialog
    v-model="docLightboxOpen"
    maximized
  >
    <div
      class="flex flex-center bg-black"
      style="height:100%;"
      @click="docLightbox = null"
    >
      <q-img
        :src="docLightbox"
        fit="contain"
        style="max-width:100vw;max-height:100vh;"
      />

      <q-btn
        flat
        round
        color="white"
        icon="mdi-close"
        class="absolute-top-right q-ma-sm"
        @click.stop="docLightbox = null"
      />
    </div>
  </q-dialog>
</template>

<script setup>
import { computed, ref, onMounted } from "vue";
import { useDialogPluginComponent, useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import {
  approveProvider,
  rejectProvider,
  getProvider,
} from "src/api/provider";
import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";

const props = defineProps({
  provider: {
    type: Object,
    required: true,
  },
});

defineEmits([...useDialogPluginComponent.emits]);

const {
  dialogRef,
  onDialogHide,
  onDialogOK,
  onDialogCancel,
} = useDialogPluginComponent();

const $q = useQuasar();
const { t } = useI18n();

const loadingApprove = ref(false);
const loadingReject = ref(false);

// Imagens
const avatarPreview = ref(null);
const documentFrontUrl = ref(null);
const documentBackUrl = ref(null);

// Lightbox
const docLightbox = ref(null);

const docLightboxOpen = computed({
  get: () => !!docLightbox.value,
  set: (value) => {
    if (!value) {
      docLightbox.value = null;
    }
  },
});

const statusColor = computed(() => {
  const map = {
    pending: "warning",
    accepted: "positive",
    rejected: "negative",
  };

  return map[props.provider.approval_status] ?? "grey";
});

const formatCurrency = (value) => {
  if (!value) return "—";

  return new Intl.NumberFormat("pt-BR", {
    style: "currency",
    currency: "BRL",
  }).format(value);
};

onMounted(async () => {
  try {
    const full = await getProvider(props.provider.id);

    console.log("FULL", full);
    console.log("PROFILE", full.profile_media);
    console.log("URL", full.profile_media?.url);

    avatarPreview.value = full.profile_media?.url ?? null;

    console.log("AVATAR", avatarPreview.value);

    documentFrontUrl.value = full.document_front_media?.url ?? null;
    documentBackUrl.value = full.document_back_media?.url ?? null;
  } catch (error) {
    console.error(error);
  }
});

const onApprove = async () => {
  loadingApprove.value = true;

  try {
    await approveProvider(props.provider.id);
    onDialogOK({ action: "approved" });
  } catch {
    $q.notify({
      type: "negative",
      message: t("http.errors.failed"),
      position: "top",
    });
  } finally {
    loadingApprove.value = false;
  }
};

const onReject = async () => {
  loadingReject.value = true;

  try {
    await rejectProvider(props.provider.id);
    onDialogOK({ action: "rejected" });
  } catch {
    $q.notify({
      type: "negative",
      message: t("http.errors.failed"),
      position: "top",
    });
  } finally {
    loadingReject.value = false;
  }
};
</script>

<style scoped>
.approval-dialog {
  width: 700px;
  max-width: 95vw;
  max-height: 90vh;
}

@media (max-width: 768px) {
  .approval-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
}
</style>