Skip to content

Commit

Permalink
Move the item overview to the new cards
Browse files Browse the repository at this point in the history
  • Loading branch information
@ysbrandB
ysbrandB committed Jun 17, 2024
1 parent bf4600a commit 9052a76
Show file tree
Hide file tree
Showing 6 changed files with 109 additions and 49 deletions.
5 changes: 4 additions & 1 deletion app/Http/Controllers/ItemController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand Down
48 changes: 48 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
31 changes: 11 additions & 20 deletions resources/js/Pages/Items/Index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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[],
Expand Down Expand Up @@ -72,26 +73,16 @@ watch(selectedItems.value, (selected) => {
</div>
<div class="lg:col-span-9 col-span-3">
<div class="grid lg:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-4 mt-4">
<div v-for="item in items"
class="w-full bg-white dark:bg-gray-800 overflow-hidden shadow-sm rounded-lg flex !flex-row">
<NavLink class="w-[50%]" style="margin: 0; padding: 0"
:href="route('items.show', item.public_id)">
<img :src="item.photo_url" class="w-full h-full object-cover object-center"
alt="item photo">
</NavLink>
<div
class="w-[50%] h-full text-center flex flex-col justify-between">
<NavLink class="px-0 pt-0 w-full mt-2" :href="route('items.show', item.public_id)">
<div class="w-full h-full">{{ item.title }}</div>
</NavLink>
<danger-button v-if="selectedItems.has(item)" @click="selectedItems.delete(item)"
class="w-min text-sm px-0 py-0 mb-2 mr-2 self-end"> -
</danger-button>
<secondary-button v-else @click="selectedItems.add(item)"
class="w-min text-sm px-0 py-0 mb-2 mr-2 self-end"> +
</secondary-button>
</div>
</div>
<item-card :item="item" v-for="item in items">
<template #qr>
<danger-button v-if="selectedItems.has(item)" @click="selectedItems.delete(item)"
class="w-min text-sm px-0 py-0 mb-2 mr-2 self-end"> -
</danger-button>
<secondary-button v-else @click="selectedItems.add(item)"
class="w-min text-sm px-0 py-0 mb-2 mr-2 self-end"> +
</secondary-button>
</template>
</item-card>
</div>
</div>
</div>
Expand Down
70 changes: 44 additions & 26 deletions resources/js/Pages/Items/ItemCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}>();
</script>

<template>
<div class="sticky top-8 sm:px-6 lg:px-4 relative flex-col flex items-center justify-items-center"
id="wrapper" style="font-size: 80%">
<div id="resizeCard"
style="position:relative ; padding: 2em; width:23em; background-color: white; color: #1a202c; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); border-radius: 0.5em; aspect-ratio: 63/88; overflow: hidden;">
<div style="font-weight: bold; font-size: 2em; margin-bottom: 0.3em;">
{{ item.title }}
</div>
<img :src="item.photo_url"
style="border-radius: 0.5em; max-width: 15em; max-height: 15em; display: block; margin: 0 auto;"
alt="item photo">
<div style="color: #718096; font-size: 0.875em; margin: 1em 0;">
{{ item.card_description }}
</div>
<div class="parent-container">
<div class="child-container">
<span class="bottom-corner">
<qrcode-vue
style="float: right; max-width: 5em; max-height: 5em; background-color: #1a202c; color: #f7fafc; margin: 0.5em;"
:value="route('items.show', props.item.public_id)"
:margin="2"
:size="500"
level="Q"
render-as="canvas"/>
</span>
<pill v-for="attribute in item.attributes" :key="attribute.id"
<div style="container-type: inline-size;">
<div
style="font-size: 4cqw; position:relative; margin-inline: auto; margin-top:1em; padding: 2em; width:23em; background-color: white; color: #1a202c; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); border-radius: 0.5em; aspect-ratio: 63/88; overflow: hidden;">
<Link :href="route('items.show',{public_id: item.public_id})">
<div
style="overflow: hidden; text-wrap: nowrap; text-overflow: ellipsis; font-weight: bold; max-height:1.5em; max-width: 100%; font-size: 2em; margin-bottom: 0.3em;">
{{ item.title }}
</div>
<img :src="item.photo_url"
style="border-radius: 0.5em; height:11em; max-height: 11em; max-width: 15em; display: block; margin: 0 auto; object-fit: contain;object-position: center; "
alt="item photo">
</Link>
<div style="display: flex; flex-direction: column; height:13.2em; margin-top: .3em; gap:.3em">
<div style="color: #718096; font-size: 0.875em; overflow: hidden; flex-grow: 1">
{{ item.card_description }}
</div>
<div style="display: flex; flex-wrap:wrap;">
<pill v-for="attribute in item.attributes?.slice(6)" :key="attribute.id"
:color="attribute.attribute_type?.color??''" :disable-classes="true"
style="font-size: 0.75em; font-weight: 500; padding: 0.125em 0.625em; margin: 0.25em; border-radius: 9999em; min-height: 0; text-wrap: nowrap">
style="display: inline-block;font-size: 0.65em; font-weight: 500; padding: 0.125em 0.625em; margin: 0.1em; border-radius: 9999em; min-height: 0; height: fit-content">
{{ attribute.title }}
</pill>

<div style="display: flex; flex-direction: row; gap: 0.1em; width: 100%">
<div style="display: inline-block; max-width:13em">
<pill v-for="attribute in item.attributes?.slice(0,6)" :key="attribute.id"
:color="attribute.attribute_type?.color??''" :disable-classes="true"
style="text-wrap: nowrap;display: inline-block;font-size: 0.65em; font-weight: 500; padding: 0.125em 0.625em; margin: 0.1em; border-radius: 9999em; min-height: 0; height: fit-content">
{{ attribute.title }}
</pill>
</div>
<div style="margin-top:auto; margin-left: auto; max-width: 4.5em; max-height: 4.5em;">
<slot name="qr">
<qrcode-vue
style=" background-color: #1a202c; color: #f7fafc; width: 100%; height: 100%;"
:value="route('items.show', props.item.public_id)"
:margin="2"
:size="500"
level="Q"
render-as="canvas"/>
</slot>
</div>
</div>

</div>
</div>
</div>
Expand Down
3 changes: 1 addition & 2 deletions resources/js/Pages/Items/Show.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ const renderMarkdown = (markdown: string | undefined) => marked(markdown ?? '');
<AuthenticatedLayout>
<template #header>
<div class="flex !flex-row justify-between items-center">

<div>
<h2 class="font-semibold text-2xl font-bold text-gray-800 dark:text-gray-200 leading-tight">
{{ item.title }}</h2>
Expand Down Expand Up @@ -93,7 +92,7 @@ const renderMarkdown = (markdown: string | undefined) => marked(markdown ?? '');
</template>
</OpeningCard>
</div>
<div class="col-span-3 md:pt-0 mt-4">
<div class="col-span-3 md:pt-0">
<item-card :item="item"/>
</div>
</div>
Expand Down

0 comments on commit 9052a76

Please sign in to comment.