Ngiler SH3LL 360
Home
Information
Create File
Create Folder
:
/
home
/
tbf
/
tbfguest.tbf.ro
/
src
/
components
/
public
/
guests
/
Information Server
MySQL :
OFF
Perl :
OFF
CURL :
ON
WGET :
OFF
PKEXEC :
OFF
Directive
Local Value
IP Address
89.40.16.97
System
Linux server.atelieruldeit.ro 3.10.0-1160.el7.x86_64 #1 SMP Mon Oct 19 16:18:59 UTC 2020 x86_64
User
tbf
PHP Version
7.3.33
Software
Apache
Doc root
Writable
close
Edit File :
ModalCrudGuest.vue
| Size :
9.50
KB
Copy
<template> <div class="fixed inset-0 z-50 w-screen overflow-y-auto"> <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"> <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200" leave-from="opacity-100 translate-y-0 sm:scale-100" leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" v-show="loaded"> <DialogPanel class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-xl sm:p-10 sm:pt-12"> <div> <div> <DialogTitle as="h3" class="text-xl font-bold tracking-tight leading-6 text-gray-900">{{ type_crud == "update" ? `Modifică invitatie` : "Adauga invitatie" }}</DialogTitle> <div class="mt-2 relative mb-4"> <label for="email" class="block text-sm font-medium leading-6 text-gray-600">Email</label> <div class="mt-2"> <input type="text" name="email" id="email" class="block w-full rounded-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-200 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-500 sm:text-sm sm:leading-6" v-model="guest.email" :class="[ v$.guest.email.$errors.length ? 'text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500' : 'text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500', ]" /> </div> </div> <div v-for="(item, index) in guest.guests"> <div class="flex items-center justify-between"> <h4 class="text-sm font-medium text-gray-900 leading-6">Invitat #{{ index + 1 }}</h4> <button class="flex items-center text-gray-500 text-sm hover:text-red-500" @click="deleteItem(index)"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 mr-1"> <path stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /> </svg> Șterge </button> </div> <div class="mt-2 bg-gray-50 border border-gray-200 rounded-lg px-6 py-3 relative"> <label :for="`name-partner-${index}`" class="block text-sm font-medium leading-6 text-gray-600">Nume</label> <div class=""> <input type="text" :name="`name-partner-${index}`" :id="`name-partner-${index}`" class="block w-full rounded-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-200 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-500 sm:text-sm sm:leading-6" v-model="guest.guests[index].name" :class="[ v$.guest.guests.$each.$response.$errors[index].name.length ? 'text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500' : 'text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500', ]" /> </div> </div> </div> <button type="button" class="mt-2 relative w-full h-20 rounded-lg border-2 border-dashed border-gray-300 p-2 hover:border-gray-400 focus:outline-none flex items-center justify-center group" @click="addOneMoreItem"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-200 mr-2 group-hover:text-gray-300" viewBox="0 0 512 512"> <path fill="#FFFFFF" d="M232 280v64c0 13.3 10.7 24 24 24s24-10.7 24-24V280h64c13.3 0 24-10.7 24-24s-10.7-24-24-24H280V168c0-13.3-10.7-24-24-24s-24 10.7-24 24v64H168c-13.3 0-24 10.7-24 24s10.7 24 24 24h64z" /> <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344V280H168c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V168c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H280v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z" /> </svg> <span class="text-sm font-medium text-gray-700 group-hover:text-gray-900">Adaugă invitat</span> </button> </div> </div> <!-- Buttons --> <div class="mt-8 items-center gap-2 grid grid-cols-3"> <button @click="closeModal" type="button" class="w-full rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"> Anulează </button> <button v-if="type_crud == 'view'" @click="changeToUpdate" type="button" class="col-span-2 inline-flex w-full justify-center rounded-md bg-blue-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:cursor-not-allowed disabled:bg-blue-400"> Modifică </button> <button v-else @click="submitForm" type="button" :disabled="loadingSubmit" class="col-span-2 inline-flex w-full justify-center rounded-md bg-blue-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:cursor-not-allowed disabled:bg-blue-400"> <LoaderTbf color="text-white mr-2" v-if="loadingSubmit" /> Salvează </button> </div> </DialogPanel> </TransitionChild> </div> </div> </template> <script> // Import the required components import { DialogPanel, DialogTitle, TransitionChild } from "@headlessui/vue"; import { useModalsStore } from "@/stores/modals.js"; import { useVuelidate } from "@vuelidate/core"; import { required, helpers } from "@vuelidate/validators"; import LoaderTbf from "@/components/public/LoadingTbf.vue"; import { userNotificationsStore } from "@/stores/notifications.js"; export default { setup: () => ({ v$: useVuelidate() }), components: { DialogPanel, DialogTitle, TransitionChild, LoaderTbf, }, data() { return { loaded: false, realTimeModals: useModalsStore(), realTimeNotifications: userNotificationsStore(), loadingSubmit: false, guest: { email: "", guests: [], }, deletedItems: [], type_crud: "create", }; }, validations() { return { guest: { email: { required }, guests: { $each: helpers.forEach({ name: { required }, }), }, }, }; }, async mounted() { this.type_crud = this.realTimeModals.dataModal.crud; if (this.type_crud == "update") { this.guest.email = this.realTimeModals.dataModal.guest.email; this.guest.guests = this.realTimeModals.dataModal.guest.guests; } setTimeout(() => { this.loaded = true; }, 200); }, methods: { async submitForm() { this.loadingSubmit = true; const isFormCorrect = await this.v$.$validate(); if (!isFormCorrect) { this.loadingSubmit = false; return; } var formData = { email: this.guest.email, guests: this.guest.guests, }; if (this.type_crud == "create") { axios .post("guests", formData) .then(() => { this.realTimeNotifications.addNotification({ type: "success", title: "Creat cu succes.", description: "Invitatia a fost creata cu succes.", }); this.realTimeModals.dataModal.callback(); this.closeModal(); }) .catch((error) => { var responseError = error.response.data; this.realTimeNotifications.addNotification({ type: "error", title: "TBF ERROR", description: `"${responseError.message}"<br>Vă rugăm să ne contactați și să ne transmiteți eroare. În interesul remedierii acestei probleme cât mai curând posibil.`, }); }) .finally(() => { this.loadingSubmitUpdate = false; }); } else { axios .patch(`guests/${this.realTimeModals.dataModal.guest.invitation_id}`, formData) .then(() => { this.realTimeNotifications.addNotification({ type: "success", title: "Actualizat cu success.", description: "Invitatia a fost actualizata cu success.", }); this.realTimeModals.dataModal.callback(this.deletedItems.filter((item) => item.id).map((item) => item.id)); this.closeModal(); }) .catch((error) => { var responseError = error.response.data; this.realTimeNotifications.addNotification({ type: "error", title: "TBF ERROR", description: `"${responseError.message}"<br>Vă rugăm să ne contactați și să ne transmiteți eroare. În interesul remedierii acestei probleme cât mai curând posibil.`, }); }) .finally(() => { this.loadingSubmitUpdate = false; }); } }, addOneMoreItem() { this.guest.guests.push({ name: "" }); }, deleteItem(index) { this.deletedItems.push(...this.guest.guests.splice(index, 1)); }, closeModal() { this.realTimeModals.closeModal(); }, }, }; </script>
Back