Untitled

<template>
  <q-card
    :style="{
      width: $q.platform.is.mobile ? '100%' : '500px',
      maxWidth: '100%',
    }"
  >
    <q-bar dark class="bg-primary text-white">
      <span class="text-body2">Delete Limit</span>
      <q-space />
      <q-btn
        dense
        flat
        icon="fas fa-times"
        @click="emit('onClose')"
        :disable="deleting"
      >
        <q-tooltip>Close</q-tooltip>
      </q-btn>
    </q-bar>

    <template v-if="loading">
      <q-card-section class="text-center q-mt-lg">
        <q-spinner-grid size="30" color="primary" />
      </q-card-section>
    </template>

    <template v-else-if="limits.length !== 0">
      <q-card-section>
        <div class="text-bold text-uppercase q-pb-sm">
          {{ props.limit.name.toUpperCase() }}'s Limit Code
        </div>
      </q-card-section>
    </template>

    <template v-else>
      <q-card-section>
        <q-badge
          class="text-subtitle1 bg-warning full-width q-pa-sm text-white q-mt-md"
          >Are you sure you want to delete this Limit?</q-badge
        >
      </q-card-section>
    </template>

    <q-card-section class="text-right q-mt-md">
      <q-btn
        flat
        color="negative"
        class="q-px-md"
        @click="emit('onClose')"
        :disable="deleting"
        >Cancel</q-btn
      >
      <q-btn
        color="accent"
        class="q-px-md q-ml-md"
        @click="onSubmit"
        :disable="deleting"
        >Delete Limit</q-btn
      >
    </q-card-section>
  </q-card>
</template>

<script setup>
import { ref } from "vue";
import { useQuasar } from "quasar";
import useLimits from "src/composables/useLimits";
const props = defineProps({ data: Object });
const limits = ref({ ...props.data });

const emit = defineEmits(["onClose", "onDelete"]);

const $q = useQuasar();
const { loading, deleting, trash } = useLimits();

loading.value = true;

async function onSubmit() {
  try {
    await trash(props.data.id);
    emit("onDelete");
    $q.notify({
      position: "top-right",
      type: "positive",
      icon: "fas fa-check",
      message: `Limit deleted successfully`,
    });
  } catch (err) {
    $q.notify({
      position: "top-right",
      type: "negative",
      icon: "fas fa-exclamation-triangle",
      message: err.toString(),
    });
  }
}
</script>

<style></style>