flimder/client/src/components/AddMovieModal.vue

38 lines
1.3 KiB
Vue

<script setup lang="ts">
import { ref } from "vue";
let modal = ref<HTMLDialogElement | null>(null);
const formdata = {officiel_des_spectacles: {enabled: true, url: ""}}
const openModal = () => modal.value?.showModal();
const closeModal = () => modal.value?.close();
const addMovie = () => {
console.log(formdata.officiel_des_spectacles.url)
closeModal()
}
</script>
<template>
<button class="btn btn-ghost normal-case" @click="openModal">Add movie</button>
<dialog ref="modal" id="add_movie_modal" class="modal">
<form method="dialog" class="modal-box w-11/12 max-w-5xl">
<h3 class="font-bold text-lg mb-10">Add Movie</h3>
<div class="flex flex-1 flex-row space-x-10 items-end">
<input type="checkbox" class="checkbox" v-model="formdata.officiel_des_spectacles.enabled"/>
<p>L'Officiel des Spectacles</p>
<input type="text" placeholder="Movie URL" class="input input-bordered input-sm w-full max-w-xs" v-model="formdata.officiel_des_spectacles.url"/>
</div>
<div class="modal-action">
<button class="btn" @click="addMovie">OK</button>
<button class="btn" @click="closeModal">Cancel</button>
</div>
</form>
</dialog>
</template>