From ab22ea6a25b466bd8b09d54f3d4c69ba0d6eff46 Mon Sep 17 00:00:00 2001 From: Hayden <64056131+hay-kot@users.noreply.github.com> Date: Thu, 9 Feb 2023 17:47:41 -0900 Subject: [PATCH] feat: rebuild search UI w/ new filters (#269) --- backend/internal/data/repo/repo_items.go | 68 +++--- frontend/assets/css/main.css | 18 ++ frontend/components/Form/Autocomplete2.vue | 157 +++++++++++++ frontend/components/Location/Selector.vue | 38 +-- frontend/components/Search/Filter.vue | 104 +++++++++ frontend/composables/use-location-helpers.ts | 4 +- frontend/lib/api/types/data-contracts.ts | 28 +-- frontend/package.json | 1 + frontend/pages/items.vue | 229 +++++++++++++------ frontend/pnpm-lock.yaml | 11 + 10 files changed, 524 insertions(+), 134 deletions(-) create mode 100644 frontend/components/Form/Autocomplete2.vue create mode 100644 frontend/components/Search/Filter.vue diff --git a/backend/internal/data/repo/repo_items.go b/backend/internal/data/repo/repo_items.go index e5dd607..91dd2b3 100644 --- a/backend/internal/data/repo/repo_items.go +++ b/backend/internal/data/repo/repo_items.go @@ -308,22 +308,6 @@ func (e *ItemsRepository) QueryByGroup(ctx context.Context, gid uuid.UUID, q Ite qb = qb.Where(item.Archived(false)) } - if len(q.LabelIDs) > 0 { - labels := make([]predicate.Item, 0, len(q.LabelIDs)) - for _, l := range q.LabelIDs { - labels = append(labels, item.HasLabelWith(label.ID(l))) - } - qb = qb.Where(item.Or(labels...)) - } - - if len(q.LocationIDs) > 0 { - locations := make([]predicate.Item, 0, len(q.LocationIDs)) - for _, l := range q.LocationIDs { - locations = append(locations, item.HasLocationWith(location.ID(l))) - } - qb = qb.Where(item.Or(locations...)) - } - if q.Search != "" { qb.Where( item.Or( @@ -338,18 +322,50 @@ func (e *ItemsRepository) QueryByGroup(ctx context.Context, gid uuid.UUID, q Ite qb = qb.Where(item.AssetID(q.AssetID.Int())) } - if len(q.Fields) > 0 { - predicates := make([]predicate.Item, 0, len(q.Fields)) - for _, f := range q.Fields { - predicates = append(predicates, item.HasFieldsWith( - itemfield.And( - itemfield.Name(f.Name), - itemfield.TextValue(f.Value), - ), - )) + // Filters within this block define a AND relationship where each subset + // of filters is OR'd together. + // + // The goal is to allow matches like where the item has + // - one of the selected labels AND + // - one of the selected locations AND + // - one of the selected fields key/value matches + var andPredicates []predicate.Item + { + if len(q.LabelIDs) > 0 { + labelPredicates := make([]predicate.Item, 0, len(q.LabelIDs)) + for _, l := range q.LabelIDs { + labelPredicates = append(labelPredicates, item.HasLabelWith(label.ID(l))) + } + + andPredicates = append(andPredicates, item.Or(labelPredicates...)) } - qb = qb.Where(item.Or(predicates...)) + if len(q.LocationIDs) > 0 { + locationPredicates := make([]predicate.Item, 0, len(q.LocationIDs)) + for _, l := range q.LocationIDs { + locationPredicates = append(locationPredicates, item.HasLocationWith(location.ID(l))) + } + + andPredicates = append(andPredicates, item.Or(locationPredicates...)) + } + + if len(q.Fields) > 0 { + fieldPredicates := make([]predicate.Item, 0, len(q.Fields)) + for _, f := range q.Fields { + fieldPredicates = append(fieldPredicates, item.HasFieldsWith( + itemfield.And( + itemfield.Name(f.Name), + itemfield.TextValue(f.Value), + ), + )) + } + + andPredicates = append(andPredicates, item.Or(fieldPredicates...)) + } + } + + if len(andPredicates) > 0 { + qb = qb.Where(item.And(andPredicates...)) } count, err := qb.Count(ctx) diff --git a/frontend/assets/css/main.css b/frontend/assets/css/main.css index f76ff5f..89b2e1c 100644 --- a/frontend/assets/css/main.css +++ b/frontend/assets/css/main.css @@ -6,3 +6,21 @@ text-transform: none !important; } +/* transparent subtle scrollbar */ +::-webkit-scrollbar { + width: 0.2em; + background-color: #F5F5F5; +} + +::-webkit-scrollbar-thumb { + background-color: rgba(0,0,0,.2); +} + +::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); + background-color: #F5F5F5; +} + +::-webkit-scrollbar-thumb:hover { + background-color: #9B9B9B; +} \ No newline at end of file diff --git a/frontend/components/Form/Autocomplete2.vue b/frontend/components/Form/Autocomplete2.vue new file mode 100644 index 0000000..164386e --- /dev/null +++ b/frontend/components/Form/Autocomplete2.vue @@ -0,0 +1,157 @@ + + + diff --git a/frontend/components/Location/Selector.vue b/frontend/components/Location/Selector.vue index e519af3..82b7954 100644 --- a/frontend/components/Location/Selector.vue +++ b/frontend/components/Location/Selector.vue @@ -1,37 +1,43 @@