sfp_front_vue_diarista_cliente/src/components/profile/ProfileInfoDialog.vue

<template>
  <q-dialog
    ref="dialogRef"
    @hide="onDialogHide"
  >
    <q-card class="provider-dialog">

      <q-btn
        flat
        round
        dense
        icon="close"
        class="close-btn"
        @click="closeDialog"
      />

      <q-card-section class="provider-header">

        <q-avatar
          size="72px"
          color="primary"
          text-color="white"
          class="provider-avatar"
        >
          <img
            v-if="props.provider.provider_photo"
            :src="props.provider.provider_photo"
          >

          <span
            v-else
            class="text-subtitle1 text-weight-bold"
          >
            {{ initials }}
          </span>
        </q-avatar>

        <div class="provider-info">

          <div class="text-h6 text-weight-bold">
            {{ props.provider.provider_name }}
          </div>

          <div v-if="props.provider.age" class="text-grey-6 text-body2">
            {{ `${props.provider.age}` }}
            </div>

          <div class="text-grey-6">
            {{ props.provider.district }}
          </div>

          <div class="provider-stats">

            <div class="row items-center">
              <q-icon
                color="amber"
                name="mdi-star"
                size="18px"
              />

              <span class="q-ml-xs">
                {{ props.provider.average_rating }}
              </span>

              <span class="text-grey q-ml-xs">
                {{ `(${props.provider.total_reviews})` }}
              </span>
            </div>

            <div class="row items-center">
              <q-icon
                color="deep-purple"
                name="mdi-broom"
                size="18px"
              />

              <span class="q-ml-xs">
                {{ `(${props.provider.total_services})` }}
              </span>
            </div>

          </div>

        </div>

      </q-card-section>

      <q-separator />

      <!-- Especialidades -->
      <q-list
        v-if="props.provider.specialities?.length"
        dense
        class="q-pa-sm"
      >
        <q-item
          v-for="speciality in props.provider.specialities"
          :key="speciality.id"
        >
          <q-item-section avatar>
            <q-icon
              name="mdi-check-circle"
              color="positive"
            />
          </q-item-section>

          <q-item-section>
            {{ speciality.description }}
          </q-item-section>
        </q-item>
      </q-list>

    </q-card>
  </q-dialog>
</template>

<script setup>
import { computed } from "vue";
import { useDialogPluginComponent } from "quasar";

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

defineEmits(useDialogPluginComponent.emits);

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

const closeDialog = () => {
  dialogRef.value.hide();
};

const initials = computed(() => {
  if (!props.provider.provider_name) {
    return "?";
  }

  return props.provider.provider_name
    .trim()
    .split(" ")
    .slice(0, 2)
    .map(name => name[0].toUpperCase())
    .join("");
});
</script>

<style scoped>
.provider-dialog {
  width: 380px;
  max-width: 95vw;
  border-radius: 14px;
  overflow: hidden;
}

.provider-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px;
}

.provider-avatar {
  flex-shrink: 0;
}

.provider-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.provider-info {
  flex: 1;
}

.provider-info .text-h6 {
  line-height: 1.2;
}

.provider-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

.q-list .q-item {
  min-height: 38px;
}
</style>