|
|
@@ -0,0 +1,194 @@
|
|
|
+<template>
|
|
|
+ <q-dialog ref="dialogRef" @hide="onDialogHide">
|
|
|
+ <q-card class="q-dialog-plugin" style="width: 800px; max-width: 90vw">
|
|
|
+ <DefaultDialogHeader :title="title" @close="onDialogCancel" />
|
|
|
+
|
|
|
+ <q-card-section>
|
|
|
+ <div class="text-subtitle1 text-weight-bold q-mb-sm">{{ $t('reviews.singular') }}</div>
|
|
|
+ <q-separator class="q-mb-md" />
|
|
|
+
|
|
|
+ <div class="row q-col-gutter-sm q-mb-md">
|
|
|
+ <div class="col-12">
|
|
|
+ <div class="text-caption text-grey">{{ $t('client_reviews.stars') }}</div>
|
|
|
+ <q-rating
|
|
|
+ :model-value="review.stars"
|
|
|
+ :max="5"
|
|
|
+ size="1.5rem"
|
|
|
+ color="amber"
|
|
|
+ readonly
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div v-if="review.comment" class="col-12">
|
|
|
+ <div class="text-caption text-grey">{{ $t('client_reviews.comment') }}</div>
|
|
|
+ <div>{{ review.comment }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="review.improvements && review.improvements.length" class="col-12">
|
|
|
+ <div class="text-caption text-grey q-mb-xs">{{ $t('client_reviews.improvements') }}</div>
|
|
|
+ <div class="row q-gutter-xs">
|
|
|
+ <q-chip
|
|
|
+ v-for="imp in review.improvements"
|
|
|
+ :key="imp.id"
|
|
|
+ color="primary"
|
|
|
+ text-color="white"
|
|
|
+ dense
|
|
|
+ >
|
|
|
+ {{ imp.description }}
|
|
|
+ </q-chip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <template v-if="review.schedule">
|
|
|
+ <div class="text-subtitle1 text-weight-bold q-mb-sm">{{ $t('client_reviews.schedule_details') }}</div>
|
|
|
+ <q-separator class="q-mb-md" />
|
|
|
+
|
|
|
+ <div class="row q-col-gutter-sm q-mb-md">
|
|
|
+ <div class="col-6 col-sm-3">
|
|
|
+ <div class="text-caption text-grey">{{ $t('client_reviews.schedule_id') }}</div>
|
|
|
+ <div>{{ review.schedule.id + ' - ' + (review.schedule.schedule_type == 'custom' ? 'Oportunidade' : 'Agendamento') }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="col-6 col-sm-3">
|
|
|
+ <div class="text-caption text-grey">{{ $t('client_reviews.status') }}</div>
|
|
|
+ <div>{{ $t('schedules.statuses.' + review.schedule.status) }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="col-6 col-sm-3">
|
|
|
+ <div class="text-caption text-grey">{{ $t('client_reviews.date') }}</div>
|
|
|
+ <div>{{ review.schedule.date }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="col-6 col-sm-3">
|
|
|
+ <div class="text-caption text-grey">{{ $t('client_reviews.time') }}</div>
|
|
|
+ <div>{{ `${review.schedule.start_time} - ${review.schedule.end_time}` }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="col-6 col-sm-3">
|
|
|
+ <div class="text-caption text-grey">{{ $t('client_reviews.period') }}</div>
|
|
|
+ <div>{{ `${review.schedule.period_type}h` }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="col-6 col-sm-3">
|
|
|
+ <div class="text-caption text-grey">{{ $t('client_reviews.total_amount') }}</div>
|
|
|
+ <div>{{ formatToBRLCurrency(review.schedule.total_amount) }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="review.schedule.code" class="col-6 col-sm-3">
|
|
|
+ <div class="text-caption text-grey">{{ $t('client_reviews.code') }}</div>
|
|
|
+ <div>{{ review.schedule.code }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="review.schedule.client" class="col-6 col-sm-6">
|
|
|
+ <div class="text-caption text-grey">{{ $t('client_reviews.client') }}</div>
|
|
|
+ <div>{{ review.schedule.client.name }}</div>
|
|
|
+ <div class="text-caption text-grey-7">{{ review.schedule.client.email }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="review.schedule.provider" class="col-6 col-sm-6">
|
|
|
+ <div class="text-caption text-grey">{{ $t('client_reviews.provider') }}</div>
|
|
|
+ <div>{{ review.schedule.provider.name }}</div>
|
|
|
+ <div class="text-caption text-grey-7">{{ review.schedule.provider.email }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="review.schedule.address" class="col-12">
|
|
|
+ <div class="text-caption text-grey">{{ $t('client_reviews.address') }}</div>
|
|
|
+ <div>{{ addressLine }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <template v-if="review.schedule.custom_schedule">
|
|
|
+ <div class="text-subtitle1 text-weight-bold q-mb-sm">{{ $t('schedules.schedule_types.custom') }}</div>
|
|
|
+ <q-separator class="q-mb-md" />
|
|
|
+
|
|
|
+ <div class="row q-col-gutter-sm">
|
|
|
+ <div v-if="review.schedule.custom_schedule.address_type" class="col-6 col-sm-4">
|
|
|
+ <div class="text-caption text-grey">{{ $t('client_reviews.address_type') }}</div>
|
|
|
+ <div>{{ review.schedule.custom_schedule.address_type }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="review.schedule.custom_schedule.service_type" class="col-6 col-sm-4">
|
|
|
+ <div class="text-caption text-grey">{{ $t('client_reviews.service_type') }}</div>
|
|
|
+ <div>{{ review.schedule.custom_schedule.service_type }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="review.schedule.custom_schedule.min_price != null" class="col-6 col-sm-4">
|
|
|
+ <div class="text-caption text-grey">{{ $t('client_reviews.price_range') }}</div>
|
|
|
+ <div>{{ `${formatToBRLCurrency(review.schedule.custom_schedule.min_price)} - ${formatToBRLCurrency(review.schedule.custom_schedule.max_price)}` }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="col-6 col-sm-4">
|
|
|
+ <div class="text-caption text-grey">{{ $t('client_reviews.offers_meal') }}</div>
|
|
|
+ <div>{{ review.schedule.custom_schedule.offers_meal ? $t('common.status.yes') : $t('common.status.no') }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="review.schedule.custom_schedule.description" class="col-12">
|
|
|
+ <div class="text-caption text-grey">{{ $t('client_reviews.description') }}</div>
|
|
|
+ <div>{{ review.schedule.custom_schedule.description }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="review.schedule.custom_schedule.specialities && review.schedule.custom_schedule.specialities.length" class="col-12">
|
|
|
+ <div class="text-caption text-grey q-mb-xs">{{ $t('client_reviews.specialities') }}</div>
|
|
|
+ <div class="row q-gutter-xs">
|
|
|
+ <q-chip
|
|
|
+ v-for="spec in review.schedule.custom_schedule.specialities"
|
|
|
+ :key="spec.id"
|
|
|
+ color="secondary"
|
|
|
+ text-color="white"
|
|
|
+ dense
|
|
|
+ >
|
|
|
+ {{ spec.description }}
|
|
|
+ </q-chip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </q-card-section>
|
|
|
+
|
|
|
+ <q-card-actions align="center">
|
|
|
+ <q-btn color="primary" :label="$t('common.actions.close')" @click="onDialogCancel" />
|
|
|
+ </q-card-actions>
|
|
|
+ </q-card>
|
|
|
+ </q-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { computed } from 'vue'
|
|
|
+import { useDialogPluginComponent } from 'quasar'
|
|
|
+import { useI18n } from 'vue-i18n'
|
|
|
+import DefaultDialogHeader from 'src/components/defaults/DefaultDialogHeader.vue'
|
|
|
+import { formatToBRLCurrency } from 'src/helpers/utils'
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ review: {
|
|
|
+ type: Object,
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ type: Function,
|
|
|
+ required: true
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+defineEmits([
|
|
|
+ ...useDialogPluginComponent.emits,
|
|
|
+])
|
|
|
+
|
|
|
+useI18n()
|
|
|
+
|
|
|
+const { dialogRef, onDialogHide, onDialogCancel } = useDialogPluginComponent()
|
|
|
+
|
|
|
+const addressLine = computed(() => {
|
|
|
+ const addr = props.review?.schedule?.address
|
|
|
+ if (!addr) return ''
|
|
|
+ const parts = [
|
|
|
+ addr.street && addr.number ? `${addr.street}, ${addr.number}` : addr.street,
|
|
|
+ addr.complement || null,
|
|
|
+ addr.neighborhood || null,
|
|
|
+ addr.city || null,
|
|
|
+ addr.state || null,
|
|
|
+ ].filter(Boolean)
|
|
|
+ return parts.join(' - ')
|
|
|
+})
|
|
|
+</script>
|