feat: new-card-design (#196)

* card option 1

* UI updates for item card

* fix test error

* fix pagination issues on backend

* add integer support

* remove date from cards

* implement pagination for search page

* resolve search state problems

* other fixes

* fix broken datetime

* attempt to fix scroll behavior

backend/app/api/handlers/v1/v1_ctrl_items.go

@@ -1,6 +1,8 @@
 package v1
 
 import (
+	"database/sql"
+	"errors"
 	"net/http"
 
 	"github.com/hay-kot/homebox/backend/internal/core/services"
@@ -41,6 +43,11 @@ func (ctrl *V1Controller) HandleItemsGetAll() server.HandlerFunc {
 		ctx := services.NewContext(r.Context())
 		items, err := ctrl.repo.Items.QueryByGroup(ctx, ctx.GID, extractQuery(r))
 		if err != nil {
+			if errors.Is(err, sql.ErrNoRows) {
+				return server.Respond(w, http.StatusOK, repo.PaginationResult[repo.ItemSummary]{
+					Items: []repo.ItemSummary{},
+				})
+			}
 			log.Err(err).Msg("failed to get items")
 			return validate.NewRequestError(err, http.StatusInternalServerError)
 		}

backend/go.mod

@@ -35,15 +35,15 @@ require (
 	github.com/leodido/go-urn v1.2.1 // indirect
 	github.com/mailru/easyjson v0.7.7 // indirect
 	github.com/mattn/go-colorable v0.1.13 // indirect
-	github.com/mattn/go-isatty v0.0.16 // indirect
+	github.com/mattn/go-isatty v0.0.17 // indirect
 	github.com/mitchellh/go-wordwrap v1.0.1 // indirect
 	github.com/pmezard/go-difflib v1.0.0 // indirect
-	github.com/swaggo/files v0.0.0-20220728132757-551d4a08d97a // indirect
+	github.com/swaggo/files v1.0.0 // indirect
 	github.com/zclconf/go-cty v1.12.1 // indirect
 	golang.org/x/mod v0.7.0 // indirect
-	golang.org/x/net v0.3.0 // indirect
+	golang.org/x/net v0.4.0 // indirect
 	golang.org/x/sys v0.3.0 // indirect
 	golang.org/x/text v0.5.0 // indirect
-	golang.org/x/tools v0.3.0 // indirect
+	golang.org/x/tools v0.4.0 // indirect
 	gopkg.in/yaml.v3 v3.0.1 // indirect
 )

backend/go.sum

@@ -70,13 +70,16 @@ github.com/mattn/go-colorable v0.1.12/go.mod h1:u5H1YNBxpqRaxsYJYSkiCWKzEfiAb1Gb
 github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
 github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
 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-isatty v0.0.17 h1:BTarxUcIeDqL27Mc+vyvdWYSL28zpIhv3RoTdsLMPng=
+github.com/mattn/go-isatty v0.0.17/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 +91,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=
@@ -98,40 +103,61 @@ github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/
 github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
 github.com/stretchr/testify v1.8.1 h1:w7B6lhMri9wdJUVmEZPGGhZzrYTPvgJArz7wNPgYKsk=
 github.com/stretchr/testify v1.8.1/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
-github.com/swaggo/files v0.0.0-20220728132757-551d4a08d97a h1:kAe4YSu0O0UFn1DowNo2MY5p6xzqtJ/wQ7LZynSvGaY=
+github.com/swaggo/files v1.0.0 h1:1gGXVIeUFCS/dta17rnP0iOpr6CXFwKD7EO5ID233e4=
-github.com/swaggo/files v0.0.0-20220728132757-551d4a08d97a/go.mod h1:lKJPbtWzJ9JhsTN1k1gZgleJWY/cqq0psdoMmaThG3w=
+github.com/swaggo/files v1.0.0/go.mod h1:N59U6URJLyU1PQgFqPM7wXLMhJx7QAolnvfQkqO13kc=
 github.com/swaggo/http-swagger v1.3.3 h1:Hu5Z0L9ssyBLofaama21iYaF2VbWyA8jdohaaCGpHsc=
 github.com/swaggo/http-swagger v1.3.3/go.mod h1:sE+4PjD89IxMPm77FnkDz0sdO+p5lbXzrVWT6OTVVGo=
 github.com/swaggo/swag v1.8.9 h1:kHtaBe/Ob9AZzAANfcn5c6RyCke9gG9QpH0jky0I/sA=
 github.com/swaggo/swag v1.8.9/go.mod h1:ezQVUUhly8dludpVk+/PuwJWvLLanB13ygV5Pr9enSk=
+github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
 github.com/zclconf/go-cty v1.12.1 h1:PcupnljUm9EIvbgSHQnHhUr3fO6oFmkOrvs2BAFNXXY=
 github.com/zclconf/go-cty v1.12.1/go.mod h1:s9IfD1LK5ccNMSWCVFCE2rJfHiZgi7JijgeWIMfhLvA=
+golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
+golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
 golang.org/x/crypto v0.0.0-20211215153901-e495a2d5b3d3/go.mod h1:IxCIyHEi3zRg3s0A5j5BB6A9Jmi73HwBIUl50j+osU4=
 golang.org/x/crypto v0.4.0 h1:UVQgzMY87xqpKNgb+kDsll2Igd33HszWHFLmpaRMq/8=
 golang.org/x/crypto v0.4.0/go.mod h1:3quD/ATkf6oY+rnes5c3ExXTbLc8mueNue5/DoinL80=
+golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4=
 golang.org/x/mod v0.7.0 h1:LapD9S96VoQRhi/GrNTqeBJFrUjs5UHCAtTlgwA5oZA=
 golang.org/x/mod v0.7.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
-golang.org/x/net v0.0.0-20210805182204-aaa1db679c0d/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
+golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
+golang.org/x/net v0.0.0-20210226172049-e18ecbb05110/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
 golang.org/x/net v0.0.0-20211112202133-69e39bad7dc2/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
-golang.org/x/net v0.3.0 h1:VWL6FNY2bEEmsGVKabSlHu5Irp34xmMRoqb/9lF9lxk=
+golang.org/x/net v0.0.0-20220722155237-a158d28d115b/go.mod h1:XRhObCWvk6IyKnWLug+ECip1KBveYUHfp+8e9klMJ9c=
-golang.org/x/net v0.3.0/go.mod h1:MBQ8lrhLObU/6UmLb4fmbmk5OcyYmqtbGd/9yIeKjEE=
+golang.org/x/net v0.2.0/go.mod h1:KqCZLdyyvdV855qA2rE3GC2aiw5xGR5TEjj8smXukLY=
+golang.org/x/net v0.4.0 h1:Q5QPcMlvfxFTAPV0+07Xz/MpK9NTXu2VDUuy0FeMfaU=
+golang.org/x/net v0.4.0/go.mod h1:MBQ8lrhLObU/6UmLb4fmbmk5OcyYmqtbGd/9yIeKjEE=
+golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.0.0-20220722155255-886fb9371eb4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20210423082822-04245dca01da/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20210630005230-0f9fa26af87c/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20210806184541-e5e7981a1069/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20210927094055-39ccf1dd6fa6/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20220520151302-bc2c85ada10a/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.2.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.3.0 h1:w8ZOecv6NaNa/zC8944JTU3vz4u6Lagfk4RPQxv92NQ=
 golang.org/x/sys v0.3.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
+golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
+golang.org/x/term v0.2.0/go.mod h1:TVmDHMZPmdnySmBfhjOoOdhjzdE1h4u1VwSiw2l1Nuc=
+golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
+golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
 golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
 golang.org/x/text v0.3.7/go.mod h1:u+2+/6zg+i71rQMx5EYifcz6MCKuco9NR6JIITiCfzQ=
+golang.org/x/text v0.4.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
 golang.org/x/text v0.5.0 h1:OLmvp0KP+FVG99Ct/qFiL/Fhk4zp4QQnZ7b2U+5piUM=
 golang.org/x/text v0.5.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
-golang.org/x/tools v0.3.0 h1:SrNbZl6ECOS1qFzgTdQfWXZM9XBkiA6tkFrH9YSTPHM=
+golang.org/x/tools v0.0.0-20191119224855-298f0cb1881e/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
-golang.org/x/tools v0.3.0/go.mod h1:/rWhSS2+zyEVwoJf8YAX6L2f0ntZ7Kn/mGgAWcipA5k=
+golang.org/x/tools v0.1.12/go.mod h1:hNGJHUnrk76NpqgfD5Aqm5Crs+Hm0VOH/i9J2+nxYbc=
+golang.org/x/tools v0.4.0 h1:7mTAgkunk3fr4GAloyyCasadO6h9zSsQZbwvcaIciV4=
+golang.org/x/tools v0.4.0/go.mod h1:UE5sM2OK9E/d67R0ANs2xJizIymRP5gJU295PvKXxjQ=
+golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/check.v1 v1.0.0-20200227125254-8fa46927fb4f/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=

backend/internal/data/repo/repo_items.go

@@ -326,23 +326,23 @@ func (e *ItemsRepository) QueryByGroup(ctx context.Context, gid uuid.UUID, q Ite
 		)
 	}
 
+	count, err := qb.Count(ctx)
+	if err != nil {
+		return PaginationResult[ItemSummary]{}, err
+	}
+
+	qb = qb.Order(ent.Asc(item.FieldName)).
+		WithLabel().
+		WithLocation()
+
 	if q.Page != -1 || q.PageSize != -1 {
 		qb = qb.
 			Offset(calculateOffset(q.Page, q.PageSize)).
 			Limit(q.PageSize)
 	}
 
-	items, err := mapItemsSummaryErr(
+	items, err := mapItemsSummaryErr(qb.All(ctx))
-		qb.Order(ent.Asc(item.FieldName)).
-			WithLabel().
-			WithLocation().
-			All(ctx),
-	)
-	if err != nil {
-		return PaginationResult[ItemSummary]{}, err
-	}
 
-	count, err := qb.Count(ctx)
 	if err != nil {
 		return PaginationResult[ItemSummary]{}, err
 	}

backend/internal/data/repo/repo_maintenance_entry_test.go

@@ -8,14 +8,35 @@ import (
 	"github.com/stretchr/testify/assert"
 )
 
+// get the previous month from the current month, accounts for errors when run
+// near the beginning or end of the month/year
+func getPrevMonth(now time.Time) time.Time {
+	t := now.AddDate(0, -1, 0)
+
+	// avoid infinite loop
+	max := 15
+	for t.Month() == now.Month() {
+		println("month is the same")
+		t = t.AddDate(0, 0, -1)
+		println(t.String())
+
+		max--
+		if max == 0 {
+			panic("max exceeded")
+		}
+	}
+
+	return t
+}
+
 func TestMaintenanceEntryRepository_GetLog(t *testing.T) {
 	item := useItems(t, 1)[0]
 
 	// Create 10 maintenance entries for the item
 	created := make([]MaintenanceEntryCreate, 10)
 
-	lastMonth := time.Now().AddDate(0, -1, 0)
 	thisMonth := time.Now()
+	lastMonth := getPrevMonth(thisMonth)
 
 	for i := 0; i < 10; i++ {
 		dt := lastMonth

frontend/components/Chart/Line.vue

@@ -56,7 +56,6 @@
       const calcWidth = ref(0);
 
       function resize() {
-        console.log("resize", el.value?.offsetHeight, el.value?.offsetWidth);
         calcHeight.value = el.value?.offsetHeight || 0;
         calcWidth.value = el.value?.offsetWidth || 0;
       }

frontend/components/Item/Card.vue

@@ -1,22 +1,38 @@
 <template>
-  <NuxtLink
+  <NuxtLink class="group card rounded-md" :to="`/item/${item.id}`">
-    class="group card bg-neutral text-neutral-content hover:bg-primary transition-colors duration-300"
+    <div class="rounded-t flex flex-col bg-neutral text-neutral-content p-5">
-    :to="`/item/${item.id}`"
+      <h2 class="text-base mb-4 last:mb-0 font-bold two-line min-h-[48px]">{{ item.name }}</h2>
-  >
+      <NuxtLink
-    <div class="card-body py-4 px-6">
+        v-if="item.location"
-      <h2 class="card-title">
+        class="inline-flex text-sm items-center hover:link"
-        <Icon name="mdi-package-variant" />
+        :to="`/location/${item.location.id}`"
-        {{ item.name }}
+      >
-        <Icon v-if="item.archived" class="ml-auto" name="mdi-archive-outline" />
+        <Icon name="heroicons-map-pin" class="mr-1 h-4 w-4"></Icon>
-      </h2>
+        <span>
-      <p>{{ description }}</p>
+          {{ item.location.name }}
-      <div class="flex gap-2 flex-wrap justify-end">
+        </span>
-        <LabelChip
+      </NuxtLink>
-          v-for="label in item.labels"
+    </div>
-          :key="label.id"
+    <div class="rounded-b p-4 pt-2 flex-grow col-span-4 flex flex-col gap-y-2 bg-base-100">
-          :label="label"
+      <div class="flex justify-between gap-2">
-          class="badge-primary group-hover:badge-secondary"
+        <div class="mr-auto tooltip tooltip-tip" data-tip="Purchase Price">
-        />
+          <span class="badge badge-sm badge-ghost h-5">
+            <Currency :amount="item.purchasePrice" />
+          </span>
+        </div>
+        <div v-if="item.insured" class="tooltip z-10" data-tip="Insured">
+          <Icon class="h-5 w-5 text-primary" name="mdi-shield-check" />
+        </div>
+        <div v-if="item.quantity > 1" class="tooltip" data-tip="Quantity">
+          <span class="badge h-5 w-5 badge-primary badge-sm text-xs">
+            {{ item.quantity }}
+          </span>
+        </div>
+      </div>
+      <Markdown class="mb-2 text-clip three-line" :source="item.description" />
+
+      <div class="flex gap-2 flex-wrap -mr-1 mt-auto justify-end">
+        <LabelChip v-for="label in top3" :key="label.id" :label="label" size="sm" />
       </div>
     </div>
   </NuxtLink>
@@ -24,7 +40,10 @@
 
 <script setup lang="ts">
   import { ItemOut, ItemSummary } from "~~/lib/api/types/data-contracts";
-  import { truncate } from "~~/lib/strings";
+
+  const top3 = computed(() => {
+    return props.item.labels.slice(0, 3) || [];
+  });
 
   const props = defineProps({
     item: {
@@ -32,7 +51,24 @@
       required: true,
     },
   });
-  const description = computed(() => {
-    return truncate(props.item.description, 80);
-  });
 </script>
+
+<style lang="css">
+  .three-line {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+
+  .two-line {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+</style>

frontend/components/global/DateTime.vue

@@ -5,72 +5,21 @@
 <script setup lang="ts">
   type DateTimeFormat = "relative" | "long" | "short" | "human";
 
-  function ordinalIndicator(num: number) {
+  type Props = {
-    if (num > 3 && num < 21) return "th";
+    date?: Date | string;
-    switch (num % 10) {
+    format?: DateTimeFormat;
-      case 1:
+  };
-        return "st";
-      case 2:
-        return "nd";
-      case 3:
-        return "rd";
-      default:
-        return "th";
-    }
-  }
 
-  const months = [
+  const props = withDefaults(defineProps<Props>(), {
-    "January",
+    date: undefined,
-    "February",
+    format: "relative",
-    "March",
+  });
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ];
 
   const value = computed(() => {
-    if (!props.date) {
+    if (!props.date || !validDate(props.date)) {
       return "";
     }
 
-    const dt = typeof props.date === "string" ? new Date(props.date) : props.date;
+    return fmtDate(props.date, props.format);
-    if (!dt) {
-      return "";
-    }
-
-    if (!validDate(dt)) {
-      return "";
-    }
-
-    switch (props.format) {
-      case "relative":
-        return useTimeAgo(dt).value + useDateFormat(dt, " (MM-DD-YYYY)").value;
-      case "long":
-        return useDateFormat(dt, "MM-DD-YYYY (dddd)").value;
-      case "short":
-        return useDateFormat(dt, "MM-DD-YYYY").value;
-      case "human":
-        // January 1st, 2021
-        return `${months[dt.getMonth()]} ${dt.getDate()}${ordinalIndicator(dt.getDate())}, ${dt.getFullYear()}`;
-      default:
-        return "";
-    }
-  });
-
-  const props = defineProps({
-    date: {
-      type: [Date, String],
-      required: true,
-    },
-    format: {
-      type: String as () => DateTimeFormat,
-      default: "relative",
-    },
   });
 </script>

frontend/composables/use-formatters.ts

@@ -2,12 +2,12 @@ const cache = {
   currency: "",
 };
 
-export function ResetCurrency() {
+export function resetCurrency() {
   cache.currency = "";
 }
 
 export async function useFormatCurrency() {
-  if (!cache.currency) {
+  if (cache.currency === "") {
     const client = useUserApi();
 
     const { data: group } = await client.group.get();
@@ -19,3 +19,59 @@ export async function useFormatCurrency() {
 
   return (value: number | string) => fmtCurrency(value, cache.currency);
 }
+
+export type DateTimeFormat = "relative" | "long" | "short" | "human";
+
+function ordinalIndicator(num: number) {
+  if (num > 3 && num < 21) return "th";
+  switch (num % 10) {
+    case 1:
+      return "st";
+    case 2:
+      return "nd";
+    case 3:
+      return "rd";
+    default:
+      return "th";
+  }
+}
+
+export function fmtDate(value: string | Date, fmt: DateTimeFormat = "human"): string {
+  const months = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
+
+  const dt = typeof value === "string" ? new Date(value) : value;
+  if (!dt) {
+    return "";
+  }
+
+  if (!validDate(dt)) {
+    return "";
+  }
+
+  switch (fmt) {
+    case "relative":
+      return useTimeAgo(dt).value + useDateFormat(dt, " (MM-DD-YYYY)").value;
+    case "long":
+      return useDateFormat(dt, "MM-DD-YYYY (dddd)").value;
+    case "short":
+      return useDateFormat(dt, "MM-DD-YYYY").value;
+    case "human":
+      // January 1st, 2021
+      return `${months[dt.getMonth()]} ${dt.getDate()}${ordinalIndicator(dt.getDate())}, ${dt.getFullYear()}`;
+    default:
+      return "";
+  }
+}

frontend/composables/use-route-params.ts

@@ -1,20 +1,35 @@
+import { useRouteQuery as useRouteQueryBase } from "@vueuse/router";
+
 /* eslint no-redeclare: 0 */
 import { WritableComputedRef } from "vue";
 
 export function useRouteQuery(q: string, def: string[]): WritableComputedRef<string[]>;
 export function useRouteQuery(q: string, def: string): WritableComputedRef<string>;
 export function useRouteQuery(q: string, def: boolean): WritableComputedRef<boolean>;
+export function useRouteQuery(q: string, def: number): WritableComputedRef<number>;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function useRouteQuery(q: string, def: any): WritableComputedRef<any> {
   const route = useRoute();
   const router = useRouter();
 
+  const v = useRouteQueryBase(q, def);
+
+  const first = computed<string>(() => {
+    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];
@@ -45,16 +60,21 @@ export function useRouteQuery(q: string, def: any): WritableComputedRef<any> {
     case "boolean":
       return computed({
         get: () => {
-          const qv = route.query[q];
+          return first.value === "true";
-          if (Array.isArray(qv)) {
-            return qv[0] === "true";
-          }
-          return qv === "true";
         },
         set: v => {
           const query = { ...route.query, [q]: `${v}` };
           router.push({ query });
         },
       });
+    case "number":
+      return computed({
+        get: () => parseInt(first.value, 10),
+        set: nv => {
+          v.value = nv.toString();
+        },
+      });
   }
+
+  throw new Error("Invalid type");
 }

frontend/layouts/default.vue

@@ -102,6 +102,9 @@
 
   const username = computed(() => authStore.self?.name || "User");
 
+  // Preload currency format
+  useFormatCurrency();
+
   const modals = reactive({
     item: false,
     location: false,

frontend/lib/api/base/base-api.ts

@@ -1,5 +1,7 @@
 import { Requests } from "../../requests";
 
+const ZERO_DATE = "0001-01-01T00:00:00Z";
+
 type BaseApiType = {
   createdAt: string;
   updatedAt: string;
@@ -16,6 +18,14 @@ export function parseDate<T>(obj: T, keys: Array<keyof T> = []): T {
   [...keys, "createdAt", "updatedAt"].forEach(key => {
     // @ts-ignore - TS doesn't know that we're checking for the key above
     if (hasKey(result, key)) {
+      if (result[key] === ZERO_DATE) {
+        const dt = new Date();
+        dt.setFullYear(1);
+
+        result[key] = dt;
+        return;
+      }
+
       // Ensure date like format YYYY/MM/DD - otherwise results will be 1 day off
       const dateStr: string = result[key].split("T")[0].replace(/-/g, "/");
       result[key] = new Date(dateStr);

frontend/nuxt.config.ts

@@ -13,5 +13,4 @@ export default defineNuxtConfig({
     },
   },
   css: ["@/assets/css/main.css"],
-  plugins: [],
 });

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"
   }
 }

frontend/pages/items.vue

@@ -13,15 +13,53 @@
   });
 
   const searchLocked = ref(false);
+  const queryParamsInitialized = ref(false);
+  const initialSearch = ref(true);
 
   const api = useUserApi();
   const loading = useMinLoader(2000);
-  const results = ref<ItemSummary[]>([]);
+  const items = ref<ItemSummary[]>([]);
+  const total = ref(0);
 
+  const page1 = useRouteQuery("page", 1);
+
+  const page = computed({
+    get: () => page1.value,
+    set: value => {
+      page1.value = value;
+    },
+  });
+
+  const pageSize = useRouteQuery("pageSize", 21);
   const query = useRouteQuery("q", "");
   const advanced = useRouteQuery("advanced", false);
   const includeArchived = useRouteQuery("archived", false);
 
+  const totalPages = computed(() => Math.ceil(total.value / pageSize.value));
+  const hasNext = computed(() => page.value * pageSize.value < total.value);
+  const hasPrev = computed(() => page.value > 1);
+
+  function prev() {
+    page.value = Math.max(1, page.value - 1);
+  }
+
+  function next() {
+    page.value = Math.min(Math.ceil(total.value / pageSize.value), page.value + 1);
+  }
+
+  async function resetPageSearch() {
+    if (searchLocked.value) {
+      return;
+    }
+
+    if (!initialSearch.value) {
+      page.value = 1;
+    }
+
+    items.value = [];
+    await search();
+  }
+
   async function search() {
     if (searchLocked.value) {
       return;
@@ -29,30 +67,39 @@
 
     loading.value = true;
 
-    const locations = selectedLocations.value.map(l => l.id);
-    const labels = selectedLabels.value.map(l => l.id);
-
     const { data, error } = await api.items.getAll({
       q: query.value || "",
-      locations,
+      locations: locIDs.value,
-      labels,
+      labels: labIDs.value,
       includeArchived: includeArchived.value,
+      page: page.value,
+      pageSize: pageSize.value,
     });
+
     if (error) {
+      page.value = Math.max(1, page.value - 1);
       loading.value = false;
       return;
     }
 
-    results.value = data.items;
+    if (!data.items || data.items.length === 0) {
+      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
     let maxRetry = 10;
     while (!labels.value || !locations.value) {
@@ -79,6 +126,13 @@
     if (!qLab && !qLoc) {
       search();
     }
+
+    loading.value = false;
+    window.scroll({
+      top: 0,
+      left: 0,
+      behavior: "smooth",
+    });
   });
 
   const locationsStore = useLocationStore();
@@ -90,16 +144,18 @@
   const selectedLocations = ref<LocationOutCount[]>([]);
   const selectedLabels = ref<LabelSummary[]>([]);
 
+  const locIDs = computed(() => selectedLocations.value.map(l => l.id));
+  const labIDs = computed(() => selectedLabels.value.map(l => l.id));
+
   watchPostEffect(() => {
     if (!queryParamsInitialized.value) {
       return;
     }
 
-    const labelIds = selectedLabels.value.map(l => l.id);
     router.push({
       query: {
         ...router.currentRoute.value.query,
-        lab: labelIds,
+        lab: labIDs.value,
       },
     });
   });
@@ -109,11 +165,10 @@
       return;
     }
 
-    const locIds = selectedLocations.value.map(l => l.id);
     router.push({
       query: {
         ...router.currentRoute.value.query,
-        loc: locIds,
+        loc: locIDs.value,
       },
     });
   });
@@ -125,8 +180,22 @@
     }
   });
 
-  watchDebounced([selectedLocations, selectedLabels, query], search, { debounce: 250, maxWait: 1000 });
+  // resetPageHash computes a JSON string that is used to detect if the search
-  watch(includeArchived, search);
+  // parameters have changed. If they have changed, the page is reset to 1.
+  const resetPageHash = computed(() => {
+    const map = {
+      q: query.value,
+      includeArchived: includeArchived.value,
+      locations: locIDs.value,
+      labels: labIDs.value,
+    };
+
+    return JSON.stringify(map);
+  });
+
+  watchDebounced(resetPageHash, resetPageSearch, { debounce: 250, maxWait: 1000 });
+
+  watchDebounced([page, pageSize], search, { debounce: 250, maxWait: 1000 });
 </script>
 
 <template>
@@ -157,13 +226,34 @@
       </div>
     </BaseCard>
     <section class="mt-10">
-      <BaseSectionHeader class="mb-5"> Items </BaseSectionHeader>
+      <BaseSectionHeader ref="itemsTitle"> Items </BaseSectionHeader>
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+      <p class="text-base font-medium flex items-center">
-        <TransitionGroup name="list">
+        {{ total }} Results
-          <ItemCard v-for="item in results" :key="item.id" :item="item" />
+        <span class="text-base ml-auto"> Page {{ page }} of {{ totalPages }}</span>
-        </TransitionGroup>
+      </p>
+
+      <div ref="cardgrid" class="grid mt-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+        <ItemCard v-for="item in items" :key="item.id" :item="item" />
+
         <div class="hidden first:inline text-xl">No Items Found</div>
       </div>
+      <div v-if="items.length > 0 && (hasNext || hasPrev)" class="mt-10 flex gap-2 flex-col items-center">
+        <div class="flex">
+          <div class="btn-group">
+            <button :disabled="!hasPrev" class="btn text-no-transform" @click="prev">
+              <Icon class="mr-1 h-6 w-6" name="mdi-chevron-left" />
+              Prev
+            </button>
+            <button v-if="hasPrev" class="btn text-no-transform" @click="page = 1">First</button>
+            <button v-if="hasNext" class="btn text-no-transform" @click="page = totalPages">Last</button>
+            <button :disabled="!hasNext" class="btn text-no-transform" @click="next">
+              Next
+              <Icon class="ml-1 h-6 w-6" name="mdi-chevron-right" />
+            </button>
+          </div>
+        </div>
+        <p class="text-sm font-bold">Page {{ page }} of {{ totalPages }}</p>
+      </div>
     </section>
   </BaseContainer>
 </template>

frontend/pages/label/[id].vue

@@ -157,7 +157,7 @@
 
     <section v-if="label">
       <BaseSectionHeader class="mb-5"> Items </BaseSectionHeader>
-      <div class="grid gap-2 grid-cols-1 sm:grid-cols-2">
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
         <ItemCard v-for="item in label.items" :key="item.id" :item="item" />
       </div>
     </section>

frontend/pages/location/[id].vue

@@ -180,7 +180,7 @@
 
       <section v-if="location && location.items.length > 0">
         <BaseSectionHeader class="mb-5"> Items </BaseSectionHeader>
-        <div class="grid gap-2 grid-cols-1 sm:grid-cols-2">
+        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
           <ItemCard v-for="item in location.items" :key="item.id" :item="item" />
         </div>
       </section>

frontend/plugins/scroll.client.ts

@@ -0,0 +1,7 @@
+export default defineNuxtPlugin(nuxtApp => {
+  nuxtApp.hook("page:finish", () => {
+    console.log(document.body);
+    document.body.scrollTo({ top: 0 });
+    console.log("page:finish");
+  });
+});

frontend/pnpm-lock.yaml

@@ -12,6 +12,7 @@ specifiers:
   '@typescript-eslint/eslint-plugin': ^5.36.2
   '@typescript-eslint/parser': ^5.36.2
   '@vueuse/nuxt': ^9.1.1
+  '@vueuse/router': ^9.9.0
   autoprefixer: ^10.4.8
   chart.js: ^4.0.1
   daisyui: ^2.24.0
@@ -32,6 +33,7 @@ specifiers:
   vitest: ^0.22.1
   vue: ^3.2.38
   vue-chartjs: ^4.1.2
+  vue-router: '4'
 
 dependencies:
   '@iconify/vue': 3.2.1_vue@3.2.45
@@ -41,6 +43,7 @@ dependencies:
   '@tailwindcss/forms': 0.5.3_tailwindcss@3.2.4
   '@tailwindcss/typography': 0.5.8_tailwindcss@3.2.4
   '@vueuse/nuxt': 9.6.0_nuxt@3.0.0+vue@3.2.45
+  '@vueuse/router': 9.9.0_xsxatmlnmmg5bcuv3xdnj6fj7y
   autoprefixer: 10.4.13_postcss@8.4.19
   chart.js: 4.0.1
   daisyui: 2.43.0_2lwn2upnx27dqeg6hqdu7sq75m
@@ -51,6 +54,7 @@ dependencies:
   tailwindcss: 3.2.4_postcss@8.4.19
   vue: 3.2.45
   vue-chartjs: 4.1.2_chart.js@4.0.1+vue@3.2.45
+  vue-router: 4.1.6_vue@3.2.45
 
 devDependencies:
   '@faker-js/faker': 7.6.0
@@ -1339,6 +1343,19 @@ packages:
       - vue
     dev: false
 
+  /@vueuse/router/9.9.0_xsxatmlnmmg5bcuv3xdnj6fj7y:
+    resolution: {integrity: sha512-C6w3HZrU3aLde8t3cjcMfFVnw722Is9FtBNJH2wwUPUv7Fc0bKsqcOEq1yFM0f6K5QktHxlp2vcuV4/nA3xPQw==}
+    peerDependencies:
+      vue-router: '>=4.0.0-rc.1'
+    dependencies:
+      '@vueuse/shared': 9.9.0_vue@3.2.45
+      vue-demi: 0.13.11_vue@3.2.45
+      vue-router: 4.1.6_vue@3.2.45
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /@vueuse/shared/9.6.0_vue@3.2.45:
     resolution: {integrity: sha512-/eDchxYYhkHnFyrb00t90UfjCx94kRHxc7J1GtBCqCG4HyPMX+krV9XJgVtWIsAMaxKVU4fC8NSUviG1JkwhUQ==}
     dependencies:
@@ -1348,6 +1365,15 @@ packages:
       - vue
     dev: false
 
+  /@vueuse/shared/9.9.0_vue@3.2.45:
+    resolution: {integrity: sha512-+D0XFwHG0T+uaIbCSlROBwm1wzs71B7n3KyDOxnvfEMMHDOzl09rYKwaE2AENmYwYPXfHPbSBRDD2gBVHbvTcg==}
+    dependencies:
+      vue-demi: 0.13.11_vue@3.2.45
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /@zhead/schema/1.0.7:
     resolution: {integrity: sha512-jN2ipkz39YrHd8uulgw/Y7x8iOxvR/cTkin/E9zRQVP5JBIrrJMiGyFFj6JBW4Q029xJ5dKtpwy/3RZWpz+dkQ==}