From 149f16a60046c53225985acf1aae20edd1a00158 Mon Sep 17 00:00:00 2001 From: Hayden <64056131+hay-kot@users.noreply.github.com> Date: Fri, 30 Dec 2022 20:32:19 -0900 Subject: [PATCH 001/341] card option 1 --- frontend/components/Item/Card.vue | 52 +++++++++++++++++++++++-------- 1 file changed, 39 insertions(+), 13 deletions(-) diff --git a/frontend/components/Item/Card.vue b/frontend/components/Item/Card.vue index 7dfb62a..6df6449 100644 --- a/frontend/components/Item/Card.vue +++ b/frontend/components/Item/Card.vue @@ -3,20 +3,42 @@ class="group card bg-neutral text-neutral-content hover:bg-primary transition-colors duration-300" :to="`/item/${item.id}`" > -
+

- {{ item.name }} +

-

{{ description }}

+
+ + + {{ item.location.name }} + +
+
+ + + +
+
+ +
+
+ + {{ item.quantity }} + +
+
+
+
- +
@@ -24,7 +46,14 @@ From d26118a5156483e9585b9ee643aca2a605066b6a Mon Sep 17 00:00:00 2001 From: Hayden <64056131+hay-kot@users.noreply.github.com> Date: Fri, 30 Dec 2022 22:06:45 -0900 Subject: [PATCH 002/341] UI updates for item card --- backend/go.sum | 4 + frontend/components/Item/Card.vue | 99 +++++++++++++++---------- frontend/components/global/DateTime.vue | 62 +--------------- frontend/composables/use-formatters.ts | 56 ++++++++++++++ frontend/pages/items.vue | 2 +- frontend/pages/label/[id].vue | 2 +- frontend/pages/location/[id].vue | 2 +- 7 files changed, 126 insertions(+), 101 deletions(-) diff --git a/backend/go.sum b/backend/go.sum index a5ad319..72aaa74 100644 --- a/backend/go.sum +++ b/backend/go.sum @@ -72,11 +72,13 @@ github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovk github.com/mattn/go-isatty v0.0.14/go.mod h1:7GGIvUiUoEMVVmxf/4nioHXj79iQHKdU27kJ6hsGG94= github.com/mattn/go-isatty v0.0.16 h1:bq3VjFmv/sOjHtdEhmkEV4x1AJtvUvOJ2PFAZ5+peKQ= github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM= +github.com/mattn/go-runewidth v0.0.9 h1:Lm995f3rfxdpd6TSmuVCHVb/QhupuXlYr8sCI/QdE+0= github.com/mattn/go-sqlite3 v1.14.16 h1:yOQRA0RpS5PFz/oikGwBEqvAWhWg5ufRz4ETLjwpU1Y= github.com/mattn/go-sqlite3 v1.14.16/go.mod h1:2eHXhiwb8IkHr+BDWZGa96P6+rkvnG63S2DGjv9HUNg= github.com/mitchellh/go-wordwrap v1.0.1 h1:TLuKupo69TCn6TQSyGxwI1EblZZEsQ0vMlAFQflz0v0= github.com/mitchellh/go-wordwrap v1.0.1/go.mod h1:R62XHJLzvMFRBbcrT7m7WgmE1eOyTSsCt+hzestvNj0= github.com/niemeyer/pretty v0.0.0-20200227124842-a10e7caefd8e/go.mod h1:zD1mROLANZcx1PVRCS0qkT7pwLkGfwJo4zjcN/Tysno= +github.com/olekukonko/tablewriter v0.0.5 h1:P2Ga83D34wi1o9J6Wh1mRuqd4mF/x/lgBS7N7AbDhec= github.com/pkg/diff v0.0.0-20210226163009-20ebb0f2a09e/go.mod h1:pJLUxLENpZxwdsKMEsNbx1VGcRFpLqf3715MtcvvzbA= github.com/pkg/errors v0.9.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0= github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM= @@ -88,6 +90,8 @@ github.com/rs/xid v1.4.0/go.mod h1:trrq9SKmegXys3aeAKXMUTdJsYXVwGY3RLcfgqegfbg= github.com/rs/zerolog v1.28.0 h1:MirSo27VyNi7RJYP3078AA1+Cyzd2GB66qy3aUHvsWY= github.com/rs/zerolog v1.28.0/go.mod h1:NILgTygv/Uej1ra5XxGf82ZFSLk58MFGAUS2o6usyD0= github.com/sergi/go-diff v1.0.0 h1:Kpca3qRNrduNnOQeazBd0ysaKrUJiIuISHxogkT9RPQ= +github.com/spf13/cobra v1.6.1 h1:o94oiPyS4KD1mPy2fmcYYHHfCxLqYjJOhGsCHFZtEzA= +github.com/spf13/pflag v1.0.5 h1:iy+VFUOCP1a+8yFto/drg2CJ5u0yRoB7fZw3DKv/JXA= github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME= github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw= github.com/stretchr/objx v0.5.0/go.mod h1:Yh+to48EsGEfYuaHDzXPcE3xhTkx73EhmCGUpEOglKo= diff --git a/frontend/components/Item/Card.vue b/frontend/components/Item/Card.vue index 6df6449..a060bc8 100644 --- a/frontend/components/Item/Card.vue +++ b/frontend/components/Item/Card.vue @@ -1,43 +1,42 @@ From b5b65af6b4255d67d2babd3e3bf89c106172aaaa Mon Sep 17 00:00:00 2001 From: Hayden <64056131+hay-kot@users.noreply.github.com> Date: Sat, 31 Dec 2022 12:46:58 -0900 Subject: [PATCH 008/341] resolve search state problems --- frontend/composables/use-route-params.ts | 41 ++++++++------- frontend/package.json | 4 +- frontend/pages/items.vue | 67 ++++++++++++++++-------- frontend/pnpm-lock.yaml | 26 +++++++++ 4 files changed, 97 insertions(+), 41 deletions(-) diff --git a/frontend/composables/use-route-params.ts b/frontend/composables/use-route-params.ts index c06d2db..6708c38 100644 --- a/frontend/composables/use-route-params.ts +++ b/frontend/composables/use-route-params.ts @@ -1,3 +1,5 @@ +import { useRouteQuery as useRouteQueryBase } from "@vueuse/router"; + /* eslint no-redeclare: 0 */ import { WritableComputedRef } from "vue"; @@ -10,12 +12,24 @@ export function useRouteQuery(q: string, def: any): WritableComputedRef { const route = useRoute(); const router = useRouter(); + const v = useRouteQueryBase(q, def); + + const first = computed(() => { + const qv = route.query[q]; + if (Array.isArray(qv)) { + return qv[0]?.toString() || def; + } + return qv?.toString() || def; + }); + + onMounted(() => { + if (route.query[q] === undefined) { + v.value = def; + } + }); + switch (typeof def) { case "string": - if (route.query[q] === undefined) { - router.push({ query: { ...route.query, [q]: def } }); - } - return computed({ get: () => { const qv = route.query[q]; @@ -46,11 +60,7 @@ export function useRouteQuery(q: string, def: any): WritableComputedRef { case "boolean": return computed({ get: () => { - const qv = route.query[q]; - if (Array.isArray(qv)) { - return qv[0] === "true"; - } - return qv === "true"; + return first.value === "true"; }, set: v => { const query = { ...route.query, [q]: `${v}` }; @@ -59,16 +69,9 @@ export function useRouteQuery(q: string, def: any): WritableComputedRef { }); case "number": return computed({ - get: () => { - const qv = route.query[q]; - if (Array.isArray(qv) && qv.length > 0) { - return parseInt(qv[0] as string, 10); - } - return parseInt(qv as string, 10) || def; - }, - set: v => { - const query = { ...route.query, [q]: `${v}` }; - router.push({ query }); + get: () => parseInt(first.value, 10), + set: nv => { + v.value = nv.toString(); }, }); } diff --git a/frontend/package.json b/frontend/package.json index 93ca2a2..03a3535 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -35,6 +35,7 @@ "@tailwindcss/forms": "^0.5.2", "@tailwindcss/typography": "^0.5.4", "@vueuse/nuxt": "^9.1.1", + "@vueuse/router": "^9.9.0", "autoprefixer": "^10.4.8", "chart.js": "^4.0.1", "daisyui": "^2.24.0", @@ -44,6 +45,7 @@ "postcss": "^8.4.16", "tailwindcss": "^3.1.8", "vue": "^3.2.38", - "vue-chartjs": "^4.1.2" + "vue-chartjs": "^4.1.2", + "vue-router": "4" } } \ No newline at end of file diff --git a/frontend/pages/items.vue b/frontend/pages/items.vue index ce58ff9..0c16cf4 100644 --- a/frontend/pages/items.vue +++ b/frontend/pages/items.vue @@ -13,6 +13,8 @@ }); const searchLocked = ref(false); + const queryParamsInitialized = ref(false); + const initialSearch = ref(true); const api = useUserApi(); const loading = useMinLoader(2000); @@ -20,21 +22,21 @@ const total = ref(0); const page = useRouteQuery("page", 1); - const perPage = useRouteQuery("perPage", 24); + const pageSize = useRouteQuery("pageSize", 21); const query = useRouteQuery("q", ""); const advanced = useRouteQuery("advanced", false); const includeArchived = useRouteQuery("archived", false); const hasNext = computed(() => { - return page.value * perPage.value < total.value; + return page.value * pageSize.value < total.value; }); const totalPages = computed(() => { - return Math.ceil(total.value / perPage.value); + return Math.ceil(total.value / pageSize.value); }); function next() { - page.value = Math.min(Math.ceil(total.value / perPage.value), page.value + 1); + page.value = Math.min(Math.ceil(total.value / pageSize.value), page.value + 1); } const hasPrev = computed(() => { @@ -46,7 +48,14 @@ } async function resetPageSearch() { - page.value = 1; + if (searchLocked.value) { + return; + } + + if (!initialSearch.value) { + page.value = 1; + } + items.value = []; await search(); } @@ -67,29 +76,30 @@ labels, includeArchived: includeArchived.value, page: page.value, - pageSize: perPage.value, + pageSize: pageSize.value, }); if (error) { - page.value--; + page.value = Math.max(1, page.value - 1); loading.value = false; return; } if (!data.items || data.items.length === 0) { - page.value--; + page.value = Math.max(1, page.value - 1); + loading.value = false; + return; } total.value = data.total; items.value = data.items; loading.value = false; + initialSearch.value = false; } const route = useRoute(); const router = useRouter(); - const queryParamsInitialized = ref(false); - onMounted(async () => { loading.value = true; // Wait until locations and labels are loaded @@ -166,8 +176,10 @@ } }); - watchDebounced([selectedLocations, selectedLabels, query, page, perPage], search, { debounce: 250, maxWait: 1000 }); - watch(includeArchived, search); + watchDebounced([selectedLocations, selectedLabels, query], resetPageSearch, { debounce: 250, maxWait: 1000 }); + watch(includeArchived, resetPageSearch); + + watchDebounced([page, pageSize], search, { debounce: 250, maxWait: 1000 });