|
|
@@ -0,0 +1,203 @@
|
|
|
+<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>
|