File: resources/js/Components/Bucket/Form/BucketForm.vue

<script setup>
import {DialogTitle} from "@headlessui/vue";
import {XMarkIcon} from "@heroicons/vue/24/outline/index.js";
import FormInputText from "@components/Form/FormInputText.vue";
import {useForm} from "@inertiajs/vue3";
import { useBucketsStore } from "@stores";

const props = defineProps({
  url: {
    type: String,
    default: '',
  },
  title: {
    type: String,
    default: '',
  },
  description: {
    type: String,
    default: '',
  },
  bucket: {
    type: Object,
    default: () => ({
      name: '',
      key: '',
      secret: '',
      region: '',
      url: '',
      endpoint: '',
      bucket: ''
    })
  },
  edit: {
    type: Boolean,
    default: false,
  }
})

const emit = defineEmits(['cancel', 'saved'])

const bucketsStore = useBucketsStore()

const form = useForm({
  ...props.bucket
});

const close = () => {
  form.reset()
  form.clearErrors()
  emit('cancel')
}

const submit = () => {
  const options = {
    onSuccess: () => {
      bucketsStore.fetchBuckets()
      emit('saved')
    }
  }

  if (props.edit) {
    form.put(props.url, options);
    return;
  }
  form.post(props.url, options);
}
</script>

<template>
  <form
    class="flex h-full flex-col divide-y divide-gray-200 bg-white shadow-xl"
    @submit.prevent="submit"
  >
    <div class="h-0 flex-1 overflow-y-auto">
      <div class="bg-indigo-700 px-4 py-6 sm:px-6">
        <div class="flex items-center justify-between">
          <DialogTitle class="text-base font-semibold leading-6 text-white">
            {{ title }}
          </DialogTitle>
          <div class="ml-3 flex h-7 items-center">
            <button
              type="button"
              class="relative rounded-md bg-indigo-700 text-indigo-200 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
              @click="close"
            >
              <span class="absolute -inset-2.5" />
              <span class="sr-only">Close panel</span>
              <XMarkIcon
                class="h-6 w-6"
                aria-hidden="true"
              />
            </button>
          </div>
        </div>
        <div
          v-if="description"
          class="mt-1"
        >
          <p class="text-sm text-indigo-300">
            {{ description }}
          </p>
        </div>
      </div>

      <div class="space-y-3 px-4 pb-5 pt-6">
        <FormInputText
          id="name"
          v-model="form.name"
          :label="$t('buckets.form.name')"
          type="text"
          :error="form.errors.name"
        />

        <FormInputText
          id="key"
          v-model="form.key"
          :label="$t('buckets.form.key')"
          type="text"
          :error="form.errors.key"
        />

        <FormInputText
          id="secret"
          v-model="form.secret"
          :label="$t('buckets.form.secret')"
          type="text"
          :error="form.errors.secret"
        />

        <FormInputText
          id="region"
          v-model="form.region"
          :label="$t('buckets.form.region')"
          type="text"
          :error="form.errors.region"
        />

        <FormInputText
          id="region"
          v-model="form.bucket"
          :label="$t('buckets.form.bucket')"
          type="text"
          :error="form.errors.bucket"
        />

        <FormInputText
          id="url"
          v-model="form.url"
          :label="$t('buckets.form.url')"
          type="text"
          :error="form.errors.url"
        />

        <FormInputText
          id="endpoint"
          v-model="form.endpoint"
          :label="$t('buckets.form.endpoint')"
          type="text"
          :error="form.errors.endpoint"
        />
      </div>
    </div>

    <div class="flex flex-shrink-0 justify-end px-4 py-4">
      <button
        type="button"
        class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
        @click="close"
      >
        {{ $t('buttons.cancel') }}
      </button>
      <button
        type="submit"
        :disabled="form.processing"
        class="ml-4 inline-flex justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
      >
        {{ $t('buttons.save') }}
      </button>
    </div>
  </form>
</template>

<style scoped>

</style>