From 2bcfad4aa50fd8f0cc6bb40065e7990c0648f5b1 Mon Sep 17 00:00:00 2001 From: pkong-ds Date: Thu, 30 May 2024 19:19:06 +0800 Subject: [PATCH] Render search bars in device list page --- public/scripts/device.js | 125 +++++++++++++++++++++-------------- public/scripts/home.js | 6 +- src/layouts/BaseLayout.astro | 20 +----- src/pages/type/[type].astro | 24 +++---- src/styles/device.css | 83 ++--------------------- src/styles/search.css | 3 + 6 files changed, 98 insertions(+), 163 deletions(-) diff --git a/public/scripts/device.js b/public/scripts/device.js index 9dfc6fc..37b2111 100644 --- a/public/scripts/device.js +++ b/public/scripts/device.js @@ -1,4 +1,6 @@ -const isDebug = true; +const isDebug = false; +const NUM_DEFAULT_MODEL_ITEMS_TO_DISPLAY = 0; +const NUM_DEFAULT_BRAND_ITEMS_TO_DISPLAY = 0; function ready(fn) { if (document.readyState != "loading") { @@ -14,8 +16,10 @@ class RootViewModel { selectedBrand = "all"; _deviceList; _brandDeviceList; + _modelItems; + _brandItems; - constructor(deviceList, brandDeviceList) { + constructor(deviceList, brandDeviceList, modelItems, brandItems) { mobx.makeObservable(this, { searchText: mobx.observable, selectedBrand: mobx.observable, @@ -23,6 +27,8 @@ class RootViewModel { }); this._deviceList = deviceList; this._brandDeviceList = brandDeviceList; + this._modelItems = modelItems; + this._brandItems = brandItems; } get shouldShowSearchClear() { @@ -95,67 +101,81 @@ function handleSelectBrandOption(selectParent, viewModel) { function handleSearchInput(viewModel) { // both inputs: header for lg-screen & top-of-page for sm-screen - const searchInputList = document.querySelectorAll( - ".device-list__search-input", - ); + const searchInputList = document.querySelectorAll(".aa-Input"); searchInputList.forEach((searchInput) => { searchInput.addEventListener("input", (e) => { viewModel.searchText = e.target.value; }); }); - - // both inputs: header for lg-screen & top-of-page for sm-screen - const searchContainerList = document.querySelectorAll( - ".device-list__search-container", - ); - searchContainerList.forEach((searchContainer, i) => { - searchContainer.addEventListener("click", () => { - searchInputList[i].focus(); - }); - }); } -function handleSearchClearBtn(viewModel) { - const searchInputList = document.querySelectorAll( - ".device-list__search-input", - ); - const searchClearBtnList = document.querySelectorAll( - ".device-list__search-input__clear-btn", - ); - - searchClearBtnList.forEach((searchClearBtn) => { - searchClearBtn.addEventListener("click", () => { - viewModel.searchText = ""; - }); +function initializeSearch(viewModel, containerId) { + console.log(containerId); + const { autocomplete } = window["@algolia/autocomplete-js"]; + autocomplete({ + container: containerId, + placeholder: "Search Device", + getSources() { + return [ + { + sourceId: "models", + getItems({ query }) { + const defaultDisplayItems = modelItems.slice( + 0, + NUM_DEFAULT_MODEL_ITEMS_TO_DISPLAY, + ); + const filtered = modelItems.filter((model) => { + return model.name.toLowerCase().includes(query.toLowerCase()); + }); + return filtered.length > 0 ? filtered : defaultDisplayItems; + }, + templates: { + item({ item, html }) { + return html`${item.name}`; + }, + }, + getItemUrl({ item }) { + return `${window.location.origin}${item.pathname}`; + }, + }, + { + sourceId: "brands", + getItems({ query }) { + const defaultDisplayItems = brandItems.slice( + 0, + NUM_DEFAULT_BRAND_ITEMS_TO_DISPLAY, + ); + const filtered = brandItems.filter((brand) => { + return brand.name.toLowerCase().includes(query.toLowerCase()); + }); + return filtered.length > 0 ? filtered : defaultDisplayItems; + }, + templates: { + item({ item, components, html }) { + return html`${item.name}`; + }, + }, + getItemUrl({ item }) { + return `${window.location.origin}${item.pathname}`; + }, + }, + ]; + }, }); - mobx.reaction( - () => viewModel.searchText, - () => { - searchInputList.forEach((searchInput) => { - searchInput.value = viewModel.searchText; - }); - searchClearBtnList.forEach((searchClearBtn) => { - if (viewModel.shouldShowSearchClear) { - searchClearBtn.classList.remove("d-none"); - } else { - searchClearBtn.classList.add("d-none"); - } - }); - }, - ); + handleSearchInput(viewModel); - tippy("[data-tippy-content]", { + tippy(".aa-ClearButton", { + content: "Clear", placement: "bottom", theme: "light-border", }); } -function handleSearch(viewModel) { - handleSearchInput(viewModel); - handleSearchClearBtn(viewModel); -} - function main() { const deviceGrids = document.querySelectorAll(".device-grid"); const brands = document.querySelectorAll(".device-brand-list__item-button"); @@ -164,12 +184,19 @@ function main() { const viewModel = new RootViewModel( window.deviceList, window.brandDeviceList, + window.modelItems, + window.brandItems, ); if (isDebug) { window.viewModel = viewModel; } - handleSearch(viewModel); + [ + "#device-list__header__autocomplete", + "#device-list__page__autocomplete", + ].forEach((containerId) => { + initializeSearch(viewModel, containerId); + }); mobx.reaction( () => viewModel.selectedBrand, diff --git a/public/scripts/home.js b/public/scripts/home.js index cd898fd..5952b53 100644 --- a/public/scripts/home.js +++ b/public/scripts/home.js @@ -106,10 +106,6 @@ function initializeAutocomplete(viewModel) { }); } function main() { - const viewModel = new RootViewModel( - window.modelItems, - window.brandItems, - window.brandThumbnailList, - ); + const viewModel = new RootViewModel(window.modelItems, window.brandItems); initializeAutocomplete(viewModel); } diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index ec122ca..5a05abd 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -138,25 +138,9 @@ const { shouldRenderSearchBar } = Astro.props; { !!shouldRenderSearchBar ? (
-
- - - -
- {/* Add suggestion list here */} +
- ) : ( -
- ) + ) : undefined }