cadence/bc-explorer
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add search field

Browse source
This commit is contained in:
Cadence Ember 2025-04-02 17:40:14 +13:00
parent 26ea869285
commit 4744a22ef6
6 changed files with 39 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

6
pug/album_grid.pug
View file

@ -9,16 +9,16 @@ block view
img(loading="lazy" src=item.item_art_url width=210 height=210) img(loading="lazy" src=item.item_art_url width=210 height=210)
p.fs-body3.mb8= item.item_title p.fs-body3.mb8= item.item_title
.d-flex.fw-wrap.g4 .d-flex.fw-wrap.g4
a.s-tag.s-tag__xs(href=and({arrange: "track", filter_field: "item_id", filter: item.item_id})) a.s-tag.s-tag__xs(href=and({arrange: "track", filter_field: "item_id", filter: item.item_id, filter_fuzzy: null}))
span.s-tag--sponsor!= icons.get("music-note", 16) span.s-tag--sponsor!= icons.get("music-note", 16)
= item.track_count = item.track_count
span.s-tag.s-tag__xs span.s-tag.s-tag__xs
span.s-tag--sponsor!= icons.get("compact-disc", 16) span.s-tag--sponsor!= icons.get("compact-disc", 16)
= item.total_duration = item.total_duration
a.s-tag.s-tag__xs(href=and({filter_field: "band_name", filter: item.band_name})) a.s-tag.s-tag__xs(href=and({filter_field: "band_name", filter: item.band_name, filter_fuzzy: null}))
span.s-tag--sponsor!= icons.get("people-tag", 16) span.s-tag--sponsor!= icons.get("people-tag", 16)
= item.band_name = item.band_name
- let label = item.band_url.replace(/https?:\/\/(.*?)\.bandcamp\.com.*/, "$1") - let label = item.band_url.replace(/https?:\/\/(.*?)\.bandcamp\.com.*/, "$1")
a.s-tag.s-tag__xs(href=and({filter_field: "band_url", filter: label})) a.s-tag.s-tag__xs(href=and({filter_field: "band_url", filter: label, filter_fuzzy: null}))
span.s-tag--sponsor!= icons.get("flower", 16) span.s-tag--sponsor!= icons.get("flower", 16)
= label = label

6
pug/artist_grid.pug
View file

@ -8,10 +8,10 @@ block view
.fl-grow1.pb12 .fl-grow1.pb12
.fs-headline1= item.band_name .fs-headline1= item.band_name
.d-flex.fw-wrap.g4 .d-flex.fw-wrap.g4
a.s-tag.s-tag__xs(href=and({arrange: "album", filter_field: "band_name", filter: item.band_name})) a.s-tag.s-tag__xs(href=and({arrange: "album", filter_field: "band_name", filter: item.band_name, filter_fuzzy: null}))
span.s-tag--sponsor!= icons.get("album", 16) span.s-tag--sponsor!= icons.get("album", 16)
= item.album_count = item.album_count
a.s-tag.s-tag__xs(href=and({arrange: "track", filter_field: "band_name", filter: item.band_name})) a.s-tag.s-tag__xs(href=and({arrange: "track", filter_field: "band_name", filter: item.band_name, filter_fuzzy: null}))
span.s-tag--sponsor!= icons.get("music-note", 16) span.s-tag--sponsor!= icons.get("music-note", 16)
= item.track_count = item.track_count
span.s-tag.s-tag__xs span.s-tag.s-tag__xs
@ -19,7 +19,7 @@ block view
= item.total_duration = item.total_duration
- let labels = item.labels.split("|").map(x => x.replace(/https?:\/\/(.*?)\.bandcamp\.com.*/, "$1")) - let labels = item.labels.split("|").map(x => x.replace(/https?:\/\/(.*?)\.bandcamp\.com.*/, "$1"))
each label in labels each label in labels
a.s-tag.s-tag__xs(href=and({filter_field: "band_url", filter: label})) a.s-tag.s-tag__xs(href=and({filter_field: "band_url", filter: label, filter_fuzzy: null}))
span.s-tag--sponsor!= icons.get("flower", 16) span.s-tag--sponsor!= icons.get("flower", 16)
= label = label
each preview in item.previews each preview in item.previews

25
pug/includes/layout.pug
View file

@ -25,7 +25,7 @@ html
--theme-dark-primary-color-s: 45%; --theme-dark-primary-color-s: 45%;
--theme-dark-primary-color-l: 60%; --theme-dark-primary-color-l: 60%;
} }
.s-navigation--item.is-loading svg, .s-tag.is-loading svg { .s-navigation--item.is-loading svg, .s-tag.is-loading svg, .s-sidebarwidget.is-loading svg {
visibility: hidden; visibility: hidden;
} }
.s-navigation__toggle.s-navigation { .s-navigation__toggle.s-navigation {
@ -52,6 +52,9 @@ html
color: blue; color: blue;
outline: 1px solid black; outline: 1px solid black;
} }
svg {
flex-shrink: 0;
}
body.themed.theme-system.overflow-y-scroll(hx-boost="true") body.themed.theme-system.overflow-y-scroll(hx-boost="true")
header.s-topbar.ps-sticky.t0 header.s-topbar.ps-sticky.t0
.s-topbar--container.wmx9 .s-topbar--container.wmx9
@ -84,15 +87,29 @@ html
.ps-sticky.d-flex.fd-column.g12.wmx4(style="top: 80px") .ps-sticky.d-flex.fd-column.g12.wmx4(style="top: 80px")
if arrange === "tag" if arrange === "tag"
include tag-status.pug include tag-status.pug
if filter
if filter && filter_field
.s-sidebarwidget.s-sidebarwidget__blue.d-flex.ai-center.gx16.jc-space-between.p8.pl16 .s-sidebarwidget.s-sidebarwidget__blue.d-flex.ai-center.gx16.jc-space-between.p8.pl16
.fl-shrink0!= icons.get("search") != icons.get("search")
.fl-grow1= `Searching for ` .fl-grow1= `Searching for `
if filter_field === "item_id" if filter_field === "item_id"
strong= items[0].item_title strong= items[0].item_title
else else
strong= filter strong= filter
a.s-btn.s-notice--btn(href=and({filter: null, filter_field: null})) Clear a.s-btn.s-notice--btn(href=and({filter: null, filter_field: null, filter_fuzzy: null})) Clear
else
form.d-flex.ai-stretch.gx8.jc-space-between.baw0
input.s-input(name="filter" placeholder="Search" autocomplete="off").fl-grow1
input(type="hidden" name="filter_field" value=
( arrange === "artist" ? "band_name"
: arrange === "label" ? "band_url"
: arrange === "tag" ? "tag"
: "item_title"))
input(type="hidden" name="filter_fuzzy" value="true")
input(type="hidden" name="arrange" value=arrange)
input(type="hidden" name="shape" value=shape)
button.s-btn.s-btn__xs.s-btn__outlined.s-btn__muted!= icons.get("search")
.s-sidebarwidget.wmn3 .s-sidebarwidget.wmn3
.s-sidebarwidget--header Collection .s-sidebarwidget--header Collection
a.s-sidebarwidget--action Refresh a.s-sidebarwidget--action Refresh

6
pug/label_grid.pug
View file

@ -10,13 +10,13 @@ block view
- let label = item.display_name.replace(/https?:\/\/(.*?)\.bandcamp\.com.*/, "$1") - let label = item.display_name.replace(/https?:\/\/(.*?)\.bandcamp\.com.*/, "$1")
.fs-headline1= label .fs-headline1= label
.d-flex.fw-wrap.g4 .d-flex.fw-wrap.g4
a.s-tag.s-tag__xs(href=and({arrange: "album", filter_field: "band_url", filter: minBandURL})) a.s-tag.s-tag__xs(href=and({arrange: "album", filter_field: "band_url", filter: minBandURL, filter_fuzzy: null}))
span.s-tag--sponsor!= icons.get("album", 16) span.s-tag--sponsor!= icons.get("album", 16)
= item.album_count = item.album_count
a.s-tag.s-tag__xs(href=and({arrange: "artist", filter_field: "band_url", filter: minBandURL})) a.s-tag.s-tag__xs(href=and({arrange: "artist", filter_field: "band_url", filter: minBandURL, filter_fuzzy: null}))
span.s-tag--sponsor!= icons.get("people-tag", 16) span.s-tag--sponsor!= icons.get("people-tag", 16)
= item.artist_count = item.artist_count
a.s-tag.s-tag__xs(href=and({arrange: "track", filter_field: "band_url", filter: minBandURL})) a.s-tag.s-tag__xs(href=and({arrange: "track", filter_field: "band_url", filter: minBandURL, filter_fuzzy: null}))
span.s-tag--sponsor!= icons.get("music-note", 16) span.s-tag--sponsor!= icons.get("music-note", 16)
= item.track_count = item.track_count
span.s-tag.s-tag__xs span.s-tag.s-tag__xs

1
pug/tag_grid.pug
View file

@ -27,6 +27,7 @@ block view
const newURL = new URL(location) const newURL = new URL(location)
newURL.searchParams.set("filter", highlightedItem) newURL.searchParams.set("filter", highlightedItem)
newURL.searchParams.set("filter_field", "tag") newURL.searchParams.set("filter_field", "tag")
newURL.searchParams.delete("filter_fuzzy")
newURL.searchParams.set("arrange", filter_field ? "album" : "label") newURL.searchParams.set("arrange", filter_field ? "album" : "label")
location = newURL location = newURL
} }

15
routes/app.js
View file

@ -32,12 +32,12 @@ const sqls = {
track_list: "SELECT * FROM track INNER JOIN item USING (account, item_id) {JOIN TAG} WHERE account = ? {WHERE} ORDER BY band_url, item_title COLLATE NOCASE, track_number" track_list: "SELECT * FROM track INNER JOIN item USING (account, item_id) {JOIN TAG} WHERE account = ? {WHERE} ORDER BY band_url, item_title COLLATE NOCASE, track_number"
} }
function loadPreviews(locals, field, number, whereClause, account, filter_field, filter) { function loadPreviews(locals, field, number, whereClause, account, filter_field, filter, filter_fuzzy) {
const params = [account, number] const params = [account, number]
let sql = `SELECT ${field}, item_url, item_art_url FROM (SELECT ${field}, item_url, item_art_url, row_number() OVER (PARTITION BY ${field} ORDER BY purchased DESC) AS row_number FROM item {JOIN TAG} WHERE account = ? {WHERE}) WHERE row_number <= ?` let sql = `SELECT ${field}, item_url, item_art_url FROM (SELECT ${field}, item_url, item_art_url, row_number() OVER (PARTITION BY ${field} ORDER BY purchased DESC) AS row_number FROM item {JOIN TAG} WHERE account = ? {WHERE}) WHERE row_number <= ?`
sql = sql.replace("{WHERE}", whereClause) sql = sql.replace("{WHERE}", whereClause)
if (whereClause) { if (whereClause) {
if (filter_field === "band_url") { if (filter_field === "band_url" || filter_fuzzy) {
params.splice(1, 0, `%${filter}%`) params.splice(1, 0, `%${filter}%`)
} else { } else {
params.splice(1, 0, filter) params.splice(1, 0, filter)
@ -66,7 +66,8 @@ const schema = {
arrange: z.enum(["album", "artist", "label", "tag", "track"]), arrange: z.enum(["album", "artist", "label", "tag", "track"]),
shape: z.enum(["grid", "list"]), shape: z.enum(["grid", "list"]),
filter_field: z.enum(["band_name", "band_url", "item_id", "tag"]).optional(), filter_field: z.enum(["band_name", "band_url", "item_id", "tag"]).optional(),
filter: z.string().optional() filter: z.string().optional(),
filter_fuzzy: z.enum(["true"]).optional()
}), }),
params: z.object({ params: z.object({
account: z.string() account: z.string()
@ -78,7 +79,7 @@ router.get("/:account/", defineEventHandler({
handler: async event => { handler: async event => {
try { try {
var {account} = await getValidatedRouterParams(event, schema.params.parse) var {account} = await getValidatedRouterParams(event, schema.params.parse)
var {arrange, shape, filter, filter_field} = await getValidatedQuery(event, schema.query.parse) var {arrange, shape, filter, filter_field, filter_fuzzy} = await getValidatedQuery(event, schema.query.parse)
} catch (e) { } catch (e) {
return sendRedirect(event, "?arrange=album&shape=grid", 302) return sendRedirect(event, "?arrange=album&shape=grid", 302)
} }
@ -93,7 +94,7 @@ router.get("/:account/", defineEventHandler({
let whereClause = "" let whereClause = ""
if (filter_field && filter) { if (filter_field && filter) {
let operator = "=" let operator = "="
if (filter_field === "band_url") { if (filter_field === "band_url" || filter_fuzzy) {
operator = "LIKE" operator = "LIKE"
params.push(`%${filter}%`) params.push(`%${filter}%`)
} else { } else {
@ -148,9 +149,9 @@ router.get("/:account/", defineEventHandler({
} }
} }
if (mode === "artist_grid") { if (mode === "artist_grid") {
loadPreviews(locals, "band_name", 4, whereClause, account, filter_field, filter) loadPreviews(locals, "band_name", 4, whereClause, account, filter_field, filter, filter_fuzzy)
} else if (mode === "label_grid") { } else if (mode === "label_grid") {
loadPreviews(locals, "band_url", 6, whereClause, account, filter_field, filter) loadPreviews(locals, "band_url", 6, whereClause, account, filter_field, filter, filter_fuzzy)
} else if (arrange === "tag") { } else if (arrange === "tag") {
locals.downloadManager = loadTags.downloadManager locals.downloadManager = loadTags.downloadManager
locals.downloader = loadTags.downloadManager.check(account) locals.downloader = loadTags.downloadManager.check(account)