ReasonModal.vue

<script setup lang="ts">
import BootstrapModal from "@/components/modals/BootstrapModal.vue";
import { reactive, ref } from "vue";

type reasonfor = "request" | "rejection";

const props = defineProps<{
  modalId: string;
  modalLabel: string;
  loading: boolean;
  purpose: reasonfor;
}>();

const formState = reactive<{
  reason: string;
  validated: boolean;
}>({
  reason: "",
  validated: false,
});

const reasonForm = ref<HTMLFormElement | undefined>(undefined);
const randomIDSuffix = Math.random().toString(16).substring(2, 8);

const emit = defineEmits<{
  (e: "save", reason: string): void;
}>();

function sendSaveEvent() {
  formState.validated = true;
  formState.reason = formState.reason.trim();
  if (reasonForm.value?.checkValidity()) {
    emit("save", formState.reason);
  }
}
</script>

<template>
  <bootstrap-modal
    :modal-id="props.modalId"
    :modal-label="props.modalLabel"
    size-modifier="lg"
  >
    <template #header>
      <slot name="header" />
    </template>
    <template #body>
      <form
        :id="'reason-modal-form-' + randomIDSuffix"
        ref="reasonForm"
        :class="{ 'was-validated': formState.validated }"
      >
        <label :for="'reason-modal-input-' + randomIDSuffix" class="form-label"
          >Reason for {{ props.purpose }}</label
        >
        <textarea
          class="form-control"
          :id="'reason-modal-input-' + randomIDSuffix"
          rows="3"
          minlength="16"
          maxlength="512"
          :placeholder="'State your reason for the ' + props.purpose"
          v-model="formState.reason"
        ></textarea>
      </form>
    </template>
    <template #footer>
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
        Close
      </button>
      <button
        type="submit"
        :form="'reason-modal-form-' + randomIDSuffix"
        class="btn btn-primary"
        :disabled="formState.reason.length < 1 || props.loading"
        @click.prevent="sendSaveEvent"
      >
        Save
      </button>
    </template>
  </bootstrap-modal>
</template>

<style scoped></style>