vbatts/homebox
1
0
Fork 0
forked from mirrors/homebox
Code Pull requests Activity

refactor: refactor item page UI (#235)

Browse source 
* fix generated types

* fix tailwind auto-complete

* force lowercase buttons

* add title and change style for items page

* add copy button support for item details

* empty state for log

* fix duplicate padding

* add option for create without closing the current dialog.

* hide purchase price is not set

* invert toggle for edit mode

* update styles on item cards

* add edit support for maintenance logs
This commit is contained in:
Hayden 2023-01-21 21:15:23 -09:00 • committed by GitHub
parent c19fe94c08
commit 91d0c588d9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 197 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

18
frontend/components/Item/Card.vue
View file

@ -1,22 +1,18 @@
<template>
<NuxtLink class="group card rounded-md" :to="`/item/${item.id}`">
<div class="rounded-t flex flex-col justify-center bg-neutral text-neutral-content p-5">
<h2 class="text-base mb-2 last:mb-0 font-bold two-line">{{ item.name }}</h2>
<NuxtLink
v-if="item.location"
class="inline-flex text-sm items-center hover:link"
:to="`/location/${item.location.id}`"
>
<Icon name="heroicons-map-pin" class="mr-1 h-4 w-4"></Icon>
<span>
<h2 class="text-lg mb-1 last:mb-0 font-bold two-line">{{ item.name }}</h2>
<div>
<NuxtLink v-if="item.location" class="text-sm hover:link" :to="`/location/${item.location.id}`">
{{ item.location.name }}
</span>
</NuxtLink>
</NuxtLink>
<span class="flex-1"></span>
</div>
</div>
<div class="rounded-b p-4 pt-2 flex-grow col-span-4 flex flex-col gap-y-2 bg-base-100">
<div class="flex justify-between gap-2">
<div class="mr-auto tooltip tooltip-tip" data-tip="Purchase Price">
<span class="badge badge-sm badge-ghost h-5">
<span v-if="item.purchasePrice != '0'" class="badge badge-sm badge-ghost h-5">
<Currency :amount="item.purchasePrice" />
</span>
</div>

51
frontend/components/Item/CreateModal.vue
View file

@ -1,7 +1,7 @@
<template>
<BaseModal v-model="modal">
<template #title> Create Item </template>
<form @submit.prevent="create">
<form @submit.prevent="create(true)">
<FormSelect v-model="form.location" label="Location" :items="locations ?? []" />
<FormTextField
ref="locationNameRef"
@ -13,13 +13,23 @@
<FormTextArea v-model="form.description" label="Item Description" />
<FormMultiselect v-model="form.labels" label="Labels" :items="labels ?? []" />
<div class="modal-action">
<BaseButton ref="submitBtn" type="submit" :loading="loading">
<template #icon>
<Icon name="mdi-package-variant" class="swap-off" />
<Icon name="mdi-package-variant-closed" class="swap-on" />
</template>
Create
</BaseButton>
<div class="flex justify-center">
<BaseButton ref="submitBtn" type="submit" class="rounded-r-none" :loading="loading">
<template #icon>
<Icon name="mdi-package-variant" class="swap-off h-5 w-5" />
<Icon name="mdi-package-variant-closed" class="swap-on h-5 w-5" />
</template>
Create
</BaseButton>
<div class="dropdown dropdown-top">
<label tabindex="0" class="btn rounded-l-none rounded-r-xl">
<Icon class="h-5 w-5" name="mdi-chevron-down" />
</label>
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-64">
<li><button @click.prevent="create(false)">Create and Add Another</button></li>
</ul>
</div>
</div>
</div>
</form>
</BaseModal>
@ -75,15 +85,6 @@
labels: [],
});
function reset() {
form.name = "";
form.description = "";
form.color = "";
focused.value = false;
modal.value = false;
loading.value = false;
}
whenever(
() => modal.value,
() => {
@ -99,7 +100,7 @@
}
);
async function create() {
async function create(close = false) {
if (!form.location) {
return;
}
@ -119,7 +120,17 @@
}
toast.success("Item created");
reset();
navigateTo(`/item/${data.id}`);
// Reset
form.name = "";
form.description = "";
form.color = "";
focused.value = false;
loading.value = false;
if (close) {
modal.value = false;
navigateTo(`/item/${data.id}`);
}
}
</script>