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

feat: easily increment quantity (#473)

Browse source 
* fix vue version issue

* new patch API endpoint

* doc-gen

* new API class method for patch operations

* add quantity patch UI support

* fix typegen errors

* fix ts errors
This commit is contained in:
Hayden 2023-06-02 14:56:40 -07:00 • committed by GitHub
parent 4dd036abb2
commit ef1531e561
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 353 additions and 163 deletions
Download patch file Download diff file Expand all files Collapse all files

41
frontend/pages/item/[id]/index.vue
View file

@ -39,6 +39,30 @@
lastRoute.value = route.fullPath;
});
async function adjustQuantity(amount: number) {
if (!item.value) {
return;
}
const newQuantity = item.value.quantity + amount;
if (newQuantity < 0) {
toast.error("Quantity cannot be negative");
return;
}
const resp = await api.items.patch(item.value.id, {
id: item.value.id,
quantity: newQuantity,
});
if (resp.error) {
toast.error("Failed to adjust quantity");
return;
}
item.value.quantity = newQuantity;
}
type FilteredAttachments = {
attachments: ItemAttachment[];
warranty: ItemAttachment[];
@ -130,6 +154,7 @@
{
name: "Quantity",
text: item.value?.quantity,
slot: "quantity",
},
{
name: "Serial Number",
@ -475,7 +500,21 @@
<PageQRCode />
</div>
</template>
<DetailsSection :details="itemDetails" />
<DetailsSection :details="itemDetails">
<template #quantity="{ detail }">
{{ detail.text }}
<span
class="opacity-0 group-hover:opacity-100 ml-4 my-0 duration-75 transition-opacity inline-flex gap-2"
>
<button class="btn btn-circle btn-xs" @click="adjustQuantity(-1)">
<Icon name="mdi-minus" class="h-3 w-3" />
</button>
<button class="btn btn-circle btn-xs" @click="adjustQuantity(1)">
<Icon name="mdi-plus" class="h-3 w-3" />
</button>
</span>
</template>
</DetailsSection>
</BaseCard>
<NuxtPage :item="item" :page-key="itemId" />

12
frontend/pages/item/[id]/index/edit.vue
View file

@ -75,6 +75,7 @@
toast.success("Item saved");
navigateTo("/item/" + itemId.value);
}
type NoUndefinedField<T> = { [P in keyof T]-?: NoUndefinedField<NonNullable<T[P]>> };
type StringKeys<T> = { [k in keyof T]: T[k] extends string ? k : never }[keyof T];
type OnlyString<T> = { [k in StringKeys<T>]: string };
@ -86,13 +87,13 @@
type: "text" | "textarea";
label: string;
// key of ItemOut where the value is a string
ref: keyof OnlyString<ItemOut>;
ref: keyof OnlyString<NoUndefinedField<ItemOut>>;
};
type NumberFormField = {
type: "number";
label: string;
ref: keyof OnlyNumber<ItemOut> | keyof OnlyString<ItemOut>;
ref: keyof OnlyNumber<NoUndefinedField<ItemOut>> | keyof OnlyString<NoUndefinedField<ItemOut>>;
};
// https://stackoverflow.com/questions/50851263/how-do-i-require-a-keyof-to-be-for-a-property-of-a-specific-type
@ -103,7 +104,7 @@
interface BoolFormField {
type: "checkbox";
label: string;
ref: keyof OnlyBoolean<ItemOut>;
ref: keyof OnlyBoolean<NoUndefinedField<ItemOut>>;
}
type DateKeys<T> = { [k in keyof T]: T[k] extends Date | string ? k : never }[keyof T];
@ -112,7 +113,7 @@
type DateFormField = {
type: "date";
label: string;
ref: keyof OnlyDate<ItemOut>;
ref: keyof OnlyDate<NoUndefinedField<ItemOut>>;
};
type FormField = TextFormField | BoolFormField | DateFormField | NumberFormField;
@ -184,6 +185,7 @@
{
type: "date",
label: "Purchase Date",
// @ts-expect-error - we know this is a date
ref: "purchaseTime",
},
];
@ -197,6 +199,7 @@
{
type: "date",
label: "Warranty Expires",
// @ts-expect-error - we know this is a date
ref: "warrantyExpires",
},
{
@ -220,6 +223,7 @@
{
type: "date",
label: "Sold At",
// @ts-expect-error - we know this is a date
ref: "soldTime",
},
];