sfp_vue_franchisor_ginastica_cerebro/src/pages/tbr/components/ViewInhabitantClassificationDialog.vue

<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="q-dialog-plugin overflow-hidden" style="width: 100%; max-width: 500px">
      <DefaultDialogHeader
        :title="() => 'Visualizar Faixa de Habitante'"
        @close="onDialogCancel"
      />

      <q-card-section class="row q-col-gutter-sm q-pt-none">
        <DefaultInput
          :model-value="item.description"
          class="col-12"
          disable
          label="Descrição"
        />

        <DefaultInput
          :model-value="item.start"
          class="col-6"
          disable
          label="Início"
        />

        <DefaultInput
          :model-value="item.end"
          class="col-6"
          disable
          label="Fim"
        />

        <DefaultInput
          :model-value="formatPercentage(item.tbr_percentage)"
          class="col-12"
          disable
          label="%"
        />
      </q-card-section>

      <q-card-actions>
        <q-space />
        <q-btn
          color="primary-2"
          label="Fechar"
          @click="onDialogCancel"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { useDialogPluginComponent } from "quasar";
import { formatPercentage } from "src/helpers/utils";

import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
import DefaultInput from "src/components/defaults/DefaultInput.vue";

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

defineProps({
  item: {
    type: Object,
    required: true,
  },
});

const { dialogRef, onDialogHide, onDialogCancel } = useDialogPluginComponent();
</script>