From 9052a7660ea832b55817e81663bf6781f865d37f Mon Sep 17 00:00:00 2001 From: "Burgstede, W.Y. (Ysbrand, Student B-CREA)" Date: Mon, 17 Jun 2024 11:48:26 +0200 Subject: [PATCH] Move the item overview to the new cards --- app/Http/Controllers/ItemController.php | 5 +- package-lock.json | 48 +++++++++++++++++ package.json | 1 + resources/js/Pages/Items/Index.vue | 31 ++++------- resources/js/Pages/Items/ItemCard.vue | 70 ++++++++++++++++--------- resources/js/Pages/Items/Show.vue | 3 +- 6 files changed, 109 insertions(+), 49 deletions(-) diff --git a/app/Http/Controllers/ItemController.php b/app/Http/Controllers/ItemController.php index 4bdd134..8200cea 100644 --- a/app/Http/Controllers/ItemController.php +++ b/app/Http/Controllers/ItemController.php @@ -5,6 +5,7 @@ use App\Models\AttributeType; use App\Models\Item; use Illuminate\Http\Request; +use Illuminate\Support\Facades\File; use Illuminate\Support\Facades\Storage; use Inertia\Inertia; use Vinkla\Hashids\Facades\Hashids; @@ -16,7 +17,9 @@ class ItemController extends Controller */ public function index(Request $request) { - $builder = Item::query(); +// return File::json(base_path('questions.json'))['name']; + + $builder = Item::query()->with( 'attributes.attributeType'); $filters = $request->input('filters'); foreach ($filters ?? [] as $attributeCategoryId => $attributeIds) { $builder->whereHas('attributes', static function ($query) use ($attributeCategoryId, $attributeIds): void { diff --git a/package-lock.json b/package-lock.json index 98df3d6..7575081 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,7 @@ "dependencies": { "@highlightjs/vue-plugin": "^2.1.0", "d3-force": "^3.0.0", + "floating-vue": "^5.2.2", "highlight.js": "^11.9.0", "marked": "^12.0.2", "qrcode.vue": "^3.4.1", @@ -524,6 +525,27 @@ "node": ">=12" } }, + "node_modules/@floating-ui/core": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.2.tgz", + "integrity": "sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==", + "dependencies": { + "@floating-ui/utils": "^0.2.0" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.1.1.tgz", + "integrity": "sha512-TpIO93+DIujg3g7SykEAGZMDtbJRrmnYRCNYSjJlvIbGhBjRSNTLVbNeDQBrzy9qDgUbiWdc7KA0uZHZ2tJmiw==", + "dependencies": { + "@floating-ui/core": "^1.1.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz", + "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==" + }, "node_modules/@highlightjs/vue-plugin": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/@highlightjs/vue-plugin/-/vue-plugin-2.1.0.tgz", @@ -1686,6 +1708,24 @@ "node": ">=8" } }, + "node_modules/floating-vue": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-5.2.2.tgz", + "integrity": "sha512-afW+h2CFafo+7Y9Lvw/xsqjaQlKLdJV7h1fCHfcYQ1C4SVMlu7OAekqWgu5d4SgvkBVU0pVpLlVsrSTBURFRkg==", + "dependencies": { + "@floating-ui/dom": "~1.1.1", + "vue-resize": "^2.0.0-alpha.1" + }, + "peerDependencies": { + "@nuxt/kit": "^3.2.0", + "vue": "^3.2.0" + }, + "peerDependenciesMeta": { + "@nuxt/kit": { + "optional": true + } + } + }, "node_modules/follow-redirects": { "version": "1.15.6", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", @@ -3347,6 +3387,14 @@ } } }, + "node_modules/vue-resize": { + "version": "2.0.0-alpha.1", + "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz", + "integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==", + "peerDependencies": { + "vue": "^3.0.0" + } + }, "node_modules/vue-resize-text": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/vue-resize-text/-/vue-resize-text-0.1.1.tgz", diff --git a/package.json b/package.json index 71bd090..3fdde1f 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "dependencies": { "@highlightjs/vue-plugin": "^2.1.0", "d3-force": "^3.0.0", + "floating-vue": "^5.2.2", "highlight.js": "^11.9.0", "marked": "^12.0.2", "qrcode.vue": "^3.4.1", diff --git a/resources/js/Pages/Items/Index.vue b/resources/js/Pages/Items/Index.vue index 79922fb..675f839 100644 --- a/resources/js/Pages/Items/Index.vue +++ b/resources/js/Pages/Items/Index.vue @@ -11,6 +11,7 @@ import {ref, watch} from "vue"; import DangerButton from "@/Components/DangerButton.vue"; import Pill from "@/CustomComponents/Pill.vue"; import axios from "axios"; +import ItemCard from "@/Pages/Items/ItemCard.vue"; const props = defineProps<{ items: Item[], @@ -72,26 +73,16 @@ watch(selectedItems.value, (selected) => {
-
- - item photo - -
- -
{{ item.title }}
- - - - - + - -
-
+ + +
diff --git a/resources/js/Pages/Items/ItemCard.vue b/resources/js/Pages/Items/ItemCard.vue index fb8a1b8..4868520 100644 --- a/resources/js/Pages/Items/ItemCard.vue +++ b/resources/js/Pages/Items/ItemCard.vue @@ -2,41 +2,59 @@ import QrcodeVue from "qrcode.vue"; import Pill from "@/CustomComponents/Pill.vue"; import {Item} from "@/types"; +import NavLink from "@/Components/NavLink.vue"; +import {Link} from "@inertiajs/vue3"; + const props = defineProps<{ item: Item }>();