Cleanup, UI changes and fix the peristance of the selecteditems and r…

…eactivity of the graph
ysbrandB · Jun 19, 2024 · 7de304e · 7de304e
1 parent 6ad9d90
commit 7de304e
Show file tree

Hide file tree

Showing 17 changed files with 228 additions and 182 deletions.
diff --git a/app/Http/Controllers/GraphController.php b/app/Http/Controllers/GraphController.php
@@ -4,7 +4,6 @@
 
 use App\Models\Item;
 use Illuminate\Http\Request;
-use Illuminate\Support\Facades\Session;
 use Inertia\Inertia;
 
 class GraphController extends Controller
@@ -18,26 +17,26 @@ public function index(Request $request)
             ->where('id', env('PYTHON_ID'))
             ->firstOrFail();
         $items = $query->clone();
-        $selected = Session::get('selected');
-        if ($selected) {
+        if ($selected = $request->session()->get('selected')) {
             $items = $items
                 ->whereIn('id', $selected)
-                ->whereNot('id', env('PYTHON_ID'))
-                ->get();
+                ->whereNot('id', env('PYTHON_ID'));
         } else {
-            $items = $items->whereNot('id', env('PYTHON_ID'))
-                ->get();
+            $items = $items->whereNot('id', env('PYTHON_ID'));
         }
 
         $nodes = $query->clone()
-            ->whereIn('id', $items->pluck('json_items')->flatten()->unique())
-            ->whereNotIn('id', $items->pluck('id')->toArray())
-            ->get();
+            ->whereIn('id',collect($items->pluck('json_items')->flatten())
+                ->merge($items->pluck('id'))
+                ->merge($pythonItem->id)
+                ->unique()
+                ->values()->toArray());
 
         return Inertia::render('Items/Graph', [
-            'items' => $items,
-            'python' => $pythonItem,
-            'nodes' => $nodes,
+            'items' => $items->get(),
+            'nodes' => $nodes->get(),
+            'python' => fn () => $pythonItem,
+            'initialSelectedItems' => fn () => Item::whereIn('id', $request->session()->get('selected') ?? [])->get(),
         ]);
     }
 

diff --git a/app/Http/Controllers/ItemController.php b/app/Http/Controllers/ItemController.php
@@ -5,7 +5,10 @@
 use App\Models\AttributeType;
 use App\Models\Item;
 use App\Models\Question;
+use Carbon\Carbon;
 use Illuminate\Http\Request;
+
+use Illuminate\Support\Facades\Session;
 use Illuminate\Support\Facades\Storage;
 use Inertia\Inertia;
 use Vinkla\Hashids\Facades\Hashids;
@@ -25,12 +28,15 @@ public function index(Request $request)
             });
         }
 
+        Session::put('explainer', Carbon::now()->addMinutes(30)->timestamp);
+
         return Inertia::render('Items/Index', [
-            'initialSelectedItems' => Item::whereIn('id', $request->session()->get('selected') ?? [])->get(),
             'items' => $builder->get(),
             'attributeTypes' => AttributeType::with('attributes')->orderBy('created_at', 'desc')->get(),
             'initialFilters' => $filters,
             'questions' => Question::with('answers.attributes:id')->get(),
+            'initialSelectedItems' => Item::whereIn('id', $request->session()->get('selected') ?? [])->get(),
+            'explainer' => Carbon::now()->timestamp>=Session::get('explainer') ?? 0,
         ]);
     }
 
@@ -80,6 +86,7 @@ public function show(string $publicId)
 
         return Inertia::render('Items/Show', [
             'item' => $item,
+            'initialSelectedItems' => Item::whereIn('id', Session::get('selected') ?? [])->get(),
         ]);
     }
 

diff --git a/app/Http/Controllers/ProcessorController.php b/app/Http/Controllers/ProcessorController.php
diff --git a/app/Http/Middleware/HandleInertiaRequests.php b/app/Http/Middleware/HandleInertiaRequests.php
@@ -2,6 +2,7 @@
 
 namespace App\Http\Middleware;
 
+use App\Models\Item;
 use Illuminate\Http\Request;
 use Inertia\Middleware;
 

diff --git a/app/Models/Item.php b/app/Models/Item.php
@@ -14,7 +14,6 @@
  * @property string description
  * @property string card_description
  * @property string public_id
- * @property bool is_actuator
  * @property string photo
  * @property string pros
  * @property string cons

diff --git a/app/Models/Processor.php b/app/Models/Processor.php
diff --git a/database/factories/ItemFactory.php b/database/factories/ItemFactory.php
@@ -22,7 +22,6 @@ public function definition(): array
             'description' => $this->faker->paragraph,
             'card_description' => $this->faker->text,
             'photo' => 'markus-spiske-QozzJpFZ2lg-unsplash.jpg',
-            'is_actuator' => $this->faker->boolean,
             'pros' => $this->faker->paragraph,
             'cons' => $this->faker->paragraph,
             'hardware_considerations' => $this->faker->paragraph,

diff --git a/database/factories/ProcessorFactory.php b/database/factories/ProcessorFactory.php
diff --git a/database/migrations/2024_05_29_082156_create_attributes_table.php b/database/migrations/2024_05_29_082156_create_attributes_table.php
@@ -8,35 +8,34 @@
 {
     public function up(): void
     {
-        Schema::create('attributes', function (Blueprint $table) {
+        Schema::create('attribute_types', function (Blueprint $table) {
             $table->id();
             $table->string('title');
             $table->text('description');
-            $table->foreignId('attribute_type_id');
+            $table->string('color');
             $table->timestamps();
         });
 
-        //add new pivot table called attribute_items
-        Schema::create('attribute_item', function (Blueprint $table) {
+        Schema::create('attributes', function (Blueprint $table) {
             $table->id();
-            $table->foreignId('attribute_id');
-            $table->foreignId('item_id');
+            $table->string('title');
+            $table->text('description');
+            $table->foreignId('attribute_type_id')->constrained();
             $table->timestamps();
         });
 
-        //add a new pivot table called attribute_controllers
-        Schema::create('attribute_processor', function (Blueprint $table) {
+        //add new pivot table called attribute_items
+        Schema::create('attribute_item', function (Blueprint $table) {
             $table->id();
-            $table->foreignId('attribute_id');
-            $table->foreignId('controller_id');
+            $table->foreignId('attribute_id')->constrained();
+            $table->foreignId('item_id')->constrained();
             $table->timestamps();
         });
 
-        Schema::create('attribute_types', function (Blueprint $table) {
+        Schema::create('attribute_processor', function (Blueprint $table) {
             $table->id();
-            $table->string('title');
-            $table->text('description');
-            $table->string('color');
+            $table->foreignId('attribute_id')->constrained();
+            $table->foreignId('processor_id')->constrained();
             $table->timestamps();
         });
     }

diff --git a/database/migrations/2024_06_17_124332_create_answers_table.php b/database/migrations/2024_06_17_124332_create_answers_table.php
@@ -11,7 +11,7 @@ public function up(): void
         Schema::create('answers', function (Blueprint $table) {
             $table->id();
             $table->string('text');
-            $table->foreignId('question_id');
+            $table->foreignId('question_id')->constrained();
             $table->timestamps();
         });
     }

diff --git a/database/migrations/2024_06_18_135819_cleanup.php b/database/migrations/2024_06_18_135819_cleanup.php
@@ -0,0 +1,44 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::dropIfExists('attribute_processor');
+        Schema::dropIfExists('processors');
+        Schema::table('items', function (Blueprint $table) {
+            $table->dropColumn('is_actuator');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::create('attribute_processor', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('attribute_id')->constrained();
+            $table->foreignId('controller_id')->constrained();
+            $table->timestamps();
+        });
+
+        Schema::create('processors', function (Blueprint $table) {
+            $table->id();
+            $table->string('name');
+            $table->text('description');
+            $table->timestamps();
+        });
+
+        Schema::table('items', function (Blueprint $table) {
+            $table->boolean('is_actuator')->default(false);
+        });
+    }
+};
diff --git a/resources/js/CustomComponents/SelectedItemDropdown.vue b/resources/js/CustomComponents/SelectedItemDropdown.vue
@@ -1,6 +1,6 @@
 <template>
     <VMenu>
-        <button type="button" class="text-center h-full border-dashed border-b-2 border-gray-500">{{
+        <button type="button" class="text-center h-full border-dashed border-b-2 border-gray-400">{{
                 selectedItems.size
             }}
             items selected
@@ -15,7 +15,9 @@
                 </div>
                 <div v-else>
                     <div class="p-1 flex justify-between" v-for="item in selectedItems">
+                        <a class="w-full" :href="route('items.show', {public_id: item.public_id})">
                         <span> {{ item.title }} </span>
+                        </a>
                         <button type="button" @click="selectedItems.delete(item)" class="mx-2 text-red-600">
                             x
                         </button>
@@ -25,7 +27,7 @@
                     <primary-button
                         class="mt-2 w-fit self-end"
                         @click="router.get(route('graph.index'))">
-                        See item overview
+                        See item graph
                     </primary-button>
                 </slot>
             </div>
@@ -37,16 +39,10 @@ import {router} from "@inertiajs/vue3";
 import {Menu as VMenu} from 'floating-vue'
 import 'floating-vue/dist/style.css'
 import {Item} from "@/types";
-import {defineProps, watch} from "vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
-
 const props = defineProps<{
     selectedItems: Set<Item>
-}>()
-console.log(props.selectedItems)
-watch(props.selectedItems, (selected) => {
-    console.log('selected', selected)
-})
+}>();
 </script>
 
 
diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -10,8 +10,8 @@ import {Link, usePage} from '@inertiajs/vue3';
 const showingNavigationDropdown = ref(false);
 
 const links = [
-    {href: route('dashboard'), active: route().current('dashboard'), text: 'Dashboard'},
     {href: route('items.index'), active: route().current('items.index'), text: 'Items'},
+    {href: route('graph.index'), active: route().current('graph.index'), text: 'Item Graph'},
 ];
 if (usePage().props.auth.user !== null) {
     links.push(
@@ -22,6 +22,7 @@ if (usePage().props.auth.user !== null) {
         },
         {href: route('attributes.index'), active: route().current('attributes.index'), text: 'Attributes'},
         {href: route('questions.index'), active: route().current('questions.index'), text: 'Questions'},
+        {href: route('dashboard'), active: route().current('dashboard'), text: 'Dashboard'},
     )
 }
 </script>
@@ -169,7 +170,9 @@ if (usePage().props.auth.user !== null) {
             </nav>
 
             <!-- Page Heading -->
-            <header class="bg-white dark:bg-gray-800 shadow sticky top-0 z-50" v-if="$slots.header">
+            <header
+                :class="[route().current('items.show') ? '' : 'sticky']"
+                class="bg-white dark:bg-gray-800 shadow top-0 z-10" v-if="$slots.header">
                 <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                     <slot name="header"/>
                 </div>

diff --git a/resources/js/Pages/Items/Edit.vue b/resources/js/Pages/Items/Edit.vue
@@ -52,7 +52,6 @@ const form = useForm({
 
 function handlePhotoChange(e: any) {
     form.photo = e.target.files[0]
-    console.log(form.photo)
 }
 
 function handleWiringPhotoChange(e: any) {