<script setup lang="ts"> import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue'; import SectionMain from '@/Components/SectionMain.vue'; import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue'; import { useForm, Head, usePage } from '@inertiajs/vue3'; import { computed, Ref } from 'vue'; import CardBox from '@/Components/CardBox.vue'; import BaseButton from '@/Components/BaseButton.vue'; import BaseButtons from '@/Components/BaseButtons.vue'; import { stardust } from '@eidellev/adonis-stardust/client'; import { mdiArrowLeftBoldOutline, mdiDeleteForever, mdiTrashCan } from '@mdi/js'; import FormValidationErrors from '@/Components/FormValidationErrors.vue'; const props = defineProps({ dataset: { type: Object, default: () => ({}), }, }); const flash: Ref<any> = computed(() => { return usePage().props.flash; }); const errors: Ref<any> = computed(() => { return usePage().props.errors; }); const form = useForm({ preferred_reviewer: '', preferred_reviewer_email: '', preferation: 'yes_preferation', // preferation: '', // isPreferationRequired: false, }); const handleSubmit = async (e) => { e.preventDefault(); await form.put(stardust.route('dataset.deleteUpdate', [props.dataset.id])); }; </script> <template> <LayoutAuthenticated> <Head title="Delete dataset" /> <SectionMain> <SectionTitleLineWithButton :icon="mdiDeleteForever" title="Delete Dataset" main> <BaseButton :route-name="stardust.route('dataset.list')" :icon="mdiArrowLeftBoldOutline" label="Back" color="white" rounded-full small /> </SectionTitleLineWithButton> <CardBox form @submit.prevent="handleSubmit"> <FormValidationErrors v-bind:errors="errors" /> <!-- Modal Content --> <div class="modal-content py-4 text-left px-6"> <!-- Modal Title --> <div class="text-xl font-bold mb-4">Confirm Deletion</div> <!-- Modal Body --> <p>Are you sure you want to delete the dataset from Tethys Data Research Repository? Also the following files will be deleted: </p> <ul class="mt-4 space-y-4 text-left text-gray-500 dark:text-gray-400"> <li class="flex items-center space-x-3" v-for="file in dataset.files" :key="file.id"> <svg class="flex-shrink-0 w-3.5 h-3.5 text-green-500 dark:text-green-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12"> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5" /> </svg> <span>{{ file.label }} with mime-type <span class="font-semibold text-gray-900 dark:text-white"> {{ file.mime_type }} </span> </span> </li> <!-- <li class="flex items-center space-x-3"> <svg class="flex-shrink-0 w-3.5 h-3.5 text-green-500 dark:text-green-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12"> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5" /> </svg> <span>No setup, or hidden fees</span> </li> <li class="flex items-center space-x-3"> <svg class="flex-shrink-0 w-3.5 h-3.5 text-green-500 dark:text-green-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12"> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5" /> </svg> <span>Team size: <span class="font-semibold text-gray-900 dark:text-white">1 developer</span></span> </li> <li class="flex items-center space-x-3"> <svg class="flex-shrink-0 w-3.5 h-3.5 text-green-500 dark:text-green-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12"> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5" /> </svg> <span>Premium support: <span class="font-semibold text-gray-900 dark:text-white">6 months</span></span> </li> <li class="flex items-center space-x-3"> <svg class="flex-shrink-0 w-3.5 h-3.5 text-green-500 dark:text-green-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12"> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5" /> </svg> <span>Free updates: <span class="font-semibold text-gray-900 dark:text-white">6 months</span></span> </li> --> </ul> </div> <div v-if="flash && flash.warning" class="flex flex-col mt-6 animate-fade-in"> <div class="bg-yellow-500 border-l-4 border-orange-400 text-white p-4" role="alert"> <p class="font-bold">Be Warned</p> <p>{{ flash.warning }}</p> </div> </div> <template #footer> <BaseButtons> <BaseButton type="submit" color="danger" :icon="mdiTrashCan" :small="true" :class="{ 'opacity-25': form.processing }" :disabled="form.processing" label="Confirm Delete" /> </BaseButtons> </template> </CardBox> </SectionMain> </LayoutAuthenticated> </template>