fix: Input models not binding to form (#28)

* slip delete modal

* fixed delete route

* fixed upload inputs

* fixed upload inputs

app/Http/Controllers/SlipController.php

@@ -87,4 +87,9 @@ public function tempUpload(Request $request)
             'tmpPath' => $request->file->store('tmp')
         ]);
     }
+
+    public function destroy(Slip $slip)
+    {
+        dd($slip);
+    }
 }

package.json

@@ -20,6 +20,7 @@
         "pusher-js": "^8.2.0",
         "tailwindcss": "^3.2.1",
         "vite": "^4.0.0",
+        "vitest": "^0.33.0",
         "vue": "^3.2.41"
     },
     "dependencies": {

resources/js/Components/Dashboard/DeleteSlipModal.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { router } from '@inertiajs/vue3'
+import WarningButton from '@/Components/Reusable/WarningButton.vue'
+import PrimaryButton from '@/Components/Reusable/PrimaryButton.vue'
+
+const props = defineProps({
+  slip: Object,
+})
+
+const emit = defineEmits(['close'])
+
+const deleteSlip = () => {
+  router.delete(`/slips/${props.slip.token}`, {
+    onFinish: () => closeModal(),
+  })
+}
+
+const closeModal = () => {
+  // form.reset()
+  emit('close')
+}
+
+</script>
+
+<template>
+  <div class="backdrop-blur-sm w-full h-full absolute top-0 left-0">
+    <div class="flex flex-col absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 bg-[rgba(0,0,0,0.8)] rounded-2xl w-3/4">
+      <div class="m-2">
+        <p class="text-gray-200">Are you sure?</p>
+        <p class="text-gray-200">{{ slip.title }} will be <span class="text-red-600">permanently deleted</span>.</p>
+        <div class="flex text-gray-200 mt-6 justify-around">
+          <div class="w-1/4">
+            <WarningButton @click="deleteSlip">Delete</WarningButton>
+          </div>
+          <div class="w-1/4">
+            <PrimaryButton @click="closeModal">Cancel</PrimaryButton>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

resources/js/Components/Dashboard/VideoCard.vue

@@ -2,6 +2,7 @@
 import { Link } from '@inertiajs/vue3'
 import {computed, ref} from 'vue'
 import moment from 'moment'
+import DeleteSlipModal from '@/Components/Dashboard/DeleteSlipModal.vue'
 
 import ProgressBar from '@/Components/Reusable/ProgressBar.vue'
 
@@ -15,6 +16,7 @@ import StreamableType from '~icons/solar/play-stream-bold'
 
 const hoverEffect = ref(false)
 const hover = ref(false)
+let showDeleteModal = ref(false)
 
 const props = defineProps({
   slip: Object,
@@ -112,7 +114,7 @@ const TypeIcon = computed(() => {
               <Download color="white" width="25" height="25" />
             </li>
             <li class="px-1 bg-brand-primary-600 rounded-full w-10 h-10 flex items-center justify-center self-center cursor-pointer transition-all hover:bg-brand-primary-700">
-              <Trash color="white" width="25" height="25" />
+              <Trash color="white" width="25" height="25" @click="showDeleteModal = true" />
             </li>
           </ul>
         </div>
@@ -130,6 +132,7 @@ const TypeIcon = computed(() => {
       <!-- Thumbnail -->
       <img v-if="!hoverEffect" class="rounded-lg object-cover h-full w-full transition-all duration-500 ease-in-out -z-[1]" :src="slip.thumb" alt="racing thumbnail" />
       <video v-if="hoverEffect" ref="video" class="`transition-all duration-200 rounded-lg object-cover h-full w-full transition-all duration-500 ease-in-out -z-[1]" :src="slip.mediable.path" controls autoplay />
+      <DeleteSlipModal v-if="showDeleteModal" :slip="slip" @close="showDeleteModal = false" />
     </span>
   </div>
 </template>

resources/js/Components/Reusable/PrimarySelect.vue

@@ -1,5 +1,15 @@
+<script setup>
+const props = defineProps({
+  modelValue: String,
+})
+</script>
+
 <template>
-  <select class="w-full bg-brand-secondary-700 focus:ring-0 focus:border-brand-primary-500">
+  <select
+    class="w-full bg-brand-secondary-700 focus:ring-0 focus:border-brand-primary-500"
+    :value="modelValue"
+    @change="$emit('update:modelValue', $event.target.value)"
+  >
     <slot />
   </select>
 </template>

resources/js/Components/Reusable/PrimaryTextInput.vue

@@ -1,3 +1,13 @@
+<script setup>
+const props = defineProps({
+  modelValue: String,
+})
+</script>
+
 <template>
-  <input class="w-full bg-brand-secondary-700 border border-black focus:border-brand-primary-500 focus:ring-0" type="text" />
+  <input
+    class="w-full bg-brand-secondary-700 border border-black focus:border-brand-primary-500 focus:ring-0" type="text"
+    :value="modelValue"
+    @input="$emit('update:modelValue', $event.target.value)"
+  />
 </template>

resources/js/Components/Reusable/PrimaryTextarea.vue

@@ -1,3 +1,13 @@
+<script setup>
+const props = defineProps({
+  modelValue: String,
+})
+</script>
+
 <template>
-  <textarea class="w-full bg-brand-secondary-700 border-black focus:ring-0 focus:border-brand-primary-500" />
+  <textarea
+    class="w-full bg-brand-secondary-700 border-black focus:ring-0 focus:border-brand-primary-500"
+    :value="modelValue"
+    @input="$emit('update:modelValue', $event.target.value)"
+  />
 </template>

resources/js/Components/Upload/UploadModal.vue

@@ -121,17 +121,17 @@ const closeModal = () => {
 
 
                 <label class="mb-2" for="description">Description</label>
-                <PrimaryTextarea id="description" :v-model="form.description" rows="1" placeholder="Description..." />
+                <PrimaryTextarea id="description" v-model="form.description" rows="1" placeholder="Description..." />
                 <p v-if="form.errors.description" class="text-red-500 font-extrabold">{{ form.errors.description }}</p>
 
 
                 <div class="mb-2">
                   <label for="type">Type</label>
-                  <select id="type" v-model="form.type" name="type" autocomplete="off">
+                  <PrimarySelect id="type" v-model="form.type" name="type" autocomplete="off">
                     <option value="1">None (Original file)</option>
                     <option value="2">Optimized for web (264)</option>
                     <option value="3">Optimized for streaming (x264/HLS)</option>
-                  </select>
+                  </PrimarySelect>
                   <div v-if="form.errors.type" class="text-red-500 font-extrabold">{{ form.errors.type }}</div>
                 </div>
               </div>