Untitled

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

    <q-card-section class="q-pt-lg">
      <q-input
        :autofocus="true"
        v-model="limits.name"
        label="Title"
        dense
        outlined
        lazy-rules
        :rules="[(val) => val.length || 'Please enter limit title']"
      />
    </q-card-section>

    <q-card-section class="q-pt-lg">
      <q-select
        v-model="limits.description"
        :options="currency.options"
        label="Currency"
      />
    </q-card-section>

    <q-card-section class="q-pt-lg">
      <q-input v-model="limits.description" filled type="textarea" />
    </q-card-section>

    <q-card-section class="text-right q-mt-md">
      <q-btn
        flat
        color="negative"
        class="q-px-md"
        @click="emit('onClose')"
        :disable="saving"
        >Cancel</q-btn
      >
      <q-btn
        color="accent"
        class="q-px-md q-ml-md"
        @click="onSubmit"
        :disable="saving"
        >Save</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 emit = defineEmits(["onClose", "onUpdated"]);

const $q = useQuasar();
const { saving, update } = useLimits();

const limits = ref({ ...props.data });

const currency = ref({
  options: [1],
});

async function onSubmit() {
  try {
    await update(limits.value.id, { ...limits.value });
    emit("onUpdated");
    $q.notify({
      position: "top-right",
      type: "positive",
      icon: "fas fa-check",
      message: `Limit Code updated successfully`,
    });
  } catch (err) {
    $q.notify({
      position: "top-right",
      type: "negative",
      icon: "fas fa-exclamation-triangle",
      message: err.toString(),
    });
  }
}
</script>

<style></style>