Fix referenced and add deletion of models

ysbrandB · Jun 11, 2024 · 3de2e36 · 3de2e36
1 parent f7b119d
commit 3de2e36
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 25 deletions.
diff --git a/app/Http/Controllers/AttributeController.php b/app/Http/Controllers/AttributeController.php
@@ -51,5 +51,9 @@ public function update(Request $request, $id)
 
     public function destroy($id)
     {
+        $attribute = Attribute::findOrFail($id);
+        $attribute->items()->detach();
+        $attribute->delete();
+        return to_route('attributes.index');
     }
 }
diff --git a/app/Http/Controllers/AttributeTypeController.php b/app/Http/Controllers/AttributeTypeController.php
@@ -47,5 +47,12 @@ public function update(Request $request, $id)
 
     public function destroy($id)
     {
+        $attributeType = AttributeType::findOrFail($id);
+        foreach ($attributeType->attributes as $attribute) {
+            $attribute->items()->detach();
+            $attribute->delete();
+        }
+        $attributeType->delete();
+        return to_route('attribute_types.index');
     }
 }
diff --git a/app/Http/Controllers/ItemController.php b/app/Http/Controllers/ItemController.php
@@ -157,5 +157,7 @@ public function destroy(Item $item)
         $item->attributes()->detach();
         $item->edges()->delete();
         $item->delete();
+
+        return to_route('items.index');
     }
 }
diff --git a/app/Models/Item.php b/app/Models/Item.php
@@ -63,7 +63,7 @@ public function attributes(): BelongsToMany
 
     public function edges(): HasMany
     {
-        return $this->hasMany(Edge::class);
+        return $this->hasMany(Edge::class, 'belongsto_item_id');
     }
 
     public function getPhotoUrlAttribute(): string

diff --git a/resources/js/CustomComponents/OpeningComponent.vue b/resources/js/CustomComponents/OpeningComponent.vue
@@ -14,6 +14,7 @@ onMounted(() => {
 </script>
 <template>
     <details class="p-2 m-2 block [&_svg]:open:-rotate-180 border border-gray-200 rounded-lg flex-1" ref="details">
+    <details class="max-w-full overflow-hidden  p-2 m-2 block [&_svg]:open:-rotate-180 border border-gray-200 rounded-lg flex-1" ref="details">
         <summary class="flex cursor-pointer list-none items-center gap-4 dark:bg-gray-800 dark:text-gray-100">
             <svg class="rotate-0 transform text-blue-700 duration-300" fill="none"
                  height="20" width="20" stroke="currentColor" stroke-linecap="round"
@@ -24,7 +25,7 @@ onMounted(() => {
                 <div class="font-bold text-lg md:text-2xl">{{ title }}</div>
             </slot>
         </summary>
-        <div class="text-gray-600 dark:text-gray-400">
+        <div class="text-gray-600 dark:text-gray-400 mt-1">
             <slot name="content"/>
         </div>
     </details>

diff --git a/resources/js/Pages/AttributeTypes/Edit.vue b/resources/js/Pages/AttributeTypes/Edit.vue
@@ -4,7 +4,7 @@ import InputError from '@/Components/InputError.vue';
 import InputLabel from '@/Components/InputLabel.vue';
 import PrimaryButton from '@/Components/PrimaryButton.vue';
 import TextInput from '@/Components/TextInput.vue';
-import {Head, router, useForm} from '@inertiajs/vue3';
+import {Head, Link, router, useForm} from '@inertiajs/vue3';
 import {marked} from 'marked';
 import {computed, ref} from "vue";
 import axios from "axios";
@@ -87,11 +87,14 @@ const submit = () => {
             </div>
 
             <div class="flex items-center justify-between mt-4">
-                <DangerButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
-                    Delete item
-                </DangerButton>
-                <PrimaryButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
-                    Update item
+                <Link
+                    v-if="props.attributeType"
+                    :href="route('attribute_types.destroy', props.attributeType?.id)"
+                    method="delete"
+                    class="inline-flex h-full items-center w-min text-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 active:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150"
+                > Delete AttributeType </Link>
+                <PrimaryButton class="ms-4 w-min" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+                    Update AttributeType
                 </PrimaryButton>
             </div>
         </form>

diff --git a/resources/js/Pages/Attributes/Edit.vue b/resources/js/Pages/Attributes/Edit.vue
@@ -4,8 +4,9 @@ import InputError from '@/Components/InputError.vue';
 import InputLabel from '@/Components/InputLabel.vue';
 import PrimaryButton from '@/Components/PrimaryButton.vue';
 import TextInput from '@/Components/TextInput.vue';
-import {Head, router, useForm} from '@inertiajs/vue3';
+import {Head, Link, router, useForm} from '@inertiajs/vue3';
 import {Attribute, AttributeType} from "@/types";
+import DangerButton from "@/Components/DangerButton.vue";
 
 const props = defineProps<{
     attributeTypes: AttributeType[];
@@ -81,9 +82,15 @@ const submit = () => {
                 </select>
             </div>
 
-            <div class="flex items-center justify-end mt-4">
-                <PrimaryButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
-                    Update Attribute
+            <div class="flex items-center justify-between mt-4">
+                <Link
+                    v-if="props.attribute"
+                    :href="route('attributes.destroy', props.attribute.id)"
+                    method="delete"
+                    class="inline-flex h-full items-center w-min text-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 active:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150"
+                > Delete Attribute </Link>
+                <PrimaryButton class="ms-4 w-min" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+                    Update AttributeType
                 </PrimaryButton>
             </div>
         </form>

diff --git a/resources/js/Pages/Items/Edit.vue b/resources/js/Pages/Items/Edit.vue
@@ -99,7 +99,7 @@ const submit = () => {
     }).then((data) => {
             if (data.status === 200) {
                 if(props.item)
-                    return router.get(route('items.show', props.item?.public_id));
+                    return router.get(route('items.show', props.item.public_id));
                 return router.get(route('items.index'));
             }
             console.error(data?.data?.response.data);

diff --git a/resources/js/Pages/Items/Show.vue b/resources/js/Pages/Items/Show.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
-import NavLink from "@/Components/NavLink.vue";
-
 const props = defineProps<{
     item: {
         id: number;
@@ -29,14 +26,22 @@ const props = defineProps<{
     };
 }>();
 
-import QrcodeVue from 'qrcode.vue'
 import OpeningCard from "@/CustomComponents/OpeningCard.vue";
+import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
+import NavLink from "@/Components/NavLink.vue";
+
+import QrcodeVue from 'qrcode.vue'
+
 import Pill from "@/CustomComponents/Pill.vue";
 import HighlightJSVuePlugin from '@highlightjs/vue-plugin';
 import 'highlight.js/lib/common';
 
 const VHighlightjs = HighlightJSVuePlugin.component;
 import 'highlight.js/styles/atom-one-dark.css';
+
+import {marked} from 'marked';
+
+const renderMarkdown = (markdown: string) => marked(markdown);
 </script>
 
 <template>
@@ -53,7 +58,7 @@ import 'highlight.js/styles/atom-one-dark.css';
                     <NavLink class="px-6" :href="route('items.edit', item)">
                         Edit item {{ item.id }}
                     </NavLink>
-                    <NavLink class="px-6" :href="route('items.destroy', item)">
+                    <NavLink class="px-6" :href="route('items.destroy', item)" method="delete">
                         Delete item {{ item.id }}
                     </NavLink>
                 </div>
@@ -66,40 +71,40 @@ import 'highlight.js/styles/atom-one-dark.css';
                     <OpeningCard title="Wiring">
                         <template #content>
                             <div class="float-right mb-2 text-black italic dark:text-gray-100">
-                                <img :src="item.photo_url" width="400" class="rounded-lg" alt="wiring diagram">
+                                <img :src="item.wiring_photo_url" width="400" class="rounded-lg" alt="wiring diagram">
                                 Wiring diagram
                             </div>
-                            {{ item.wiring_instructions }}
+                            <div v-html="renderMarkdown(item.wiring_instructions)"></div>
                         </template>
                     </OpeningCard>
 
                     <OpeningCard title="Pros">
                         <template #content>
-                            {{ item.pros }}
+                            <div v-html="renderMarkdown(item.pros)"></div>
                         </template>
                     </OpeningCard>
 
                     <OpeningCard title="Cons">
                         <template #content>
-                            {{ item.cons }}
+                            <div v-html="renderMarkdown(item.cons)"></div>
                         </template>
                     </OpeningCard>
 
                     <OpeningCard title="Hardware considerations">
                         <template #content>
-                            {{ item.cons }}
+                            <div v-html="renderMarkdown(item.hardware_considerations)"></div>
                         </template>
                     </OpeningCard>
 
                     <OpeningCard title="Software considerations">
                         <template #content>
-                            {{ item.cons }}
+                            <div v-html="renderMarkdown(item.software_considerations)"></div>
                         </template>
                     </OpeningCard>
 
                     <OpeningCard title="Example code">
                         <template #content>
-                            <v-highlightjs autodetect :code="item.example_code"/>
+                            <v-highlightjs autodetect :code="item.example_code" class="w-full"/>
                         </template>
                     </OpeningCard>
                 </div>