PHP Classes

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

Recommend this page to a friend!
  Classes of Nyi Nyi Lwin   S3 B2B PHP Amazon S3 File Manager   resources/js/Components/Bucket/Form/BucketForm.vue   Download  
File: resources/js/Components/Bucket/Form/BucketForm.vue
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: S3 B2B PHP Amazon S3 File Manager
Manage files stored in multiple Amazon S3 buckets
Author: By
Last change:
Date: 9 months ago
Size: 4,471 bytes
 

Contents

Class file image Download
<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>