sfp_front_vue_diarista_prestador/src/components/dashboard/ScheduleCancelDialog.vue

<template>
  <q-dialog
    ref="dialogRef"
    @hide="onDialogHide"
  >
    <q-card
      class="cancel-dialog-card bg-surface shadow-card"
      :flat="false"
    >
      <div class="row justify-end q-pt-sm q-pr-sm">
        <q-btn
          color="grey-6"
          dense
          flat
          icon="close"
          round
          size="sm"
          @click="onDialogCancel"
        />
      </div>

      <q-card-section class="q-pt-none q-pb-sm q-px-lg text-center">
        <div class="cancel-title text-primary font16 fontbold">
          {{ $t('provider.dashboard.cancel_schedule.title') }}
        </div>
      </q-card-section>

      <q-card-section
        v-if="packageWarning"
        class="q-pt-none q-pb-sm q-px-lg"
      >
        <div class="package-warning-box row no-wrap q-gutter-x-sm q-pa-sm">
          <q-icon
            class="q-mt-xs flex-shrink-0"
            color="negative"
            name="mdi-package-variant"
            size="22px"
          />

          <span class="font13 fontbold text-negative">
            {{ packageWarning }}
          </span>
        </div>
      </q-card-section>

      <q-card-section class="q-pt-none q-pb-sm q-px-lg">
        <div class="text-grey-8 font14 fontbold q-mb-xs">
          {{ $t('provider.dashboard.cancel_schedule.reason_label') }}
        </div>

        <q-input
          v-model="cancelText"
          color="secondary"
          dense
          hide-bottom-space
          input-class="text-dark"
          outlined
          rows="4"
          type="textarea"
          :placeholder="$t('provider.dashboard.cancel_schedule.reason_placeholder')"
          :rules="[val => (val && val.trim().length >= 5) || ' ']"
        />
      </q-card-section>

      <q-card-section class="q-pt-xs q-pb-md q-px-lg">
        <div class="warning-box row no-wrap q-gutter-x-sm q-pa-sm">
          <q-icon
            class="q-mt-xs flex-shrink-0"
            color="secondary"
            name="mdi-alert-outline"
            size="22px"
          />

          <div class="font12 text-grey-8">
            <span>
              {{ $t('provider.dashboard.cancel_schedule.warning_before') }}
            </span>

            <span class="fontbold">
              {{ $t('provider.dashboard.cancel_schedule.warning_bold') }}
            </span>

            <span>
              {{ $t('provider.dashboard.cancel_schedule.warning_after') }}
            </span>
          </div>
        </div>
      </q-card-section>

      <q-card-section class="q-pt-none q-pb-lg q-px-lg">
        <div class="row justify-center q-gutter-x-md">
          <q-btn
            class="btn-action bg-grey-3 text-grey-8"
            no-caps
            rounded
            size="sm"
            unelevated
            :label="$t('provider.dashboard.cancel_schedule.btn_cancel')"
            @click="onDialogCancel"
          />

          <q-btn
            class="btn-action"
            color="secondary"
            no-caps
            rounded
            unelevated
            size="sm"
            :disable="!cancelText || cancelText.trim().length < 5"
            :label="$t('provider.dashboard.cancel_schedule.btn_keep')"
            :loading="loading"
            @click="confirmCancel"
          />
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { cancelSchedule } from 'src/api/schedule'
import { useDialogPluginComponent, useQuasar } from 'quasar'
import { useI18n } from 'vue-i18n'
import { computed, ref } from 'vue'

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

const { dialogRef, onDialogHide, onDialogCancel, onDialogOK } = useDialogPluginComponent()
const { t } = useI18n()
const $q = useQuasar()

const cancelText = ref('')
const loading = ref(false)

const packageWarning = computed(() => {
  if (!props.schedule?.service_package_id) return null

  const count = props.schedule?.package_items?.length

  if (count > 1) {
    return t('provider.dashboard.cancel_schedule.package_warning', { count })
  }

  if (count === 1) return null

  return t('provider.dashboard.cancel_schedule.package_warning_generic')
})

const confirmCancel = async () => {
  if (!cancelText.value || cancelText.value.trim().length < 5) return

  loading.value = true

  try {
    await cancelSchedule(props.schedule.id, cancelText.value.trim())

    onDialogOK()
  } catch {
    $q.notify({ message: t('http.errors.failed'), color: 'negative' })
  } finally {
    loading.value = false
  }
}
</script>

<style scoped lang="scss">
.cancel-dialog-card {
  width: 340px;
  max-width: 94vw;
  border-radius: 20px !important;
  overflow: hidden;
}

.cancel-title {
  line-height: 1.35;
}

.warning-box {
  background: #e8f4fd;
  border-radius: 10px;
}

.package-warning-box {
  background: #fdecec;
  border-radius: 10px;
}

.btn-action {
  min-width: 110px;
}

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

</style>