From ea1f31c9b9fd51bdea1091ad6619283f7116e29f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20Engstr=C3=B6m?= Date: Fri, 13 Sep 2024 15:17:14 +0200 Subject: [PATCH] Set cookie to save sort selection --- lxl-web/package-lock.json | 17 ++++ lxl-web/package.json | 2 + lxl-web/src/app.d.ts | 2 + .../src/lib/components/find/FacetGroup.svelte | 92 +++++++++++++++++-- lxl-web/src/lib/constants/facets.ts | 2 + lxl-web/src/lib/i18n/locales/en.js | 6 +- lxl-web/src/lib/i18n/locales/sv.js | 6 +- lxl-web/src/lib/types/userSettings.ts | 7 ++ lxl-web/src/lib/utils/userSettings.ts | 30 ++++++ lxl-web/src/routes/+layout.server.ts | 16 ++++ lxl-web/src/routes/+layout.ts | 5 +- 11 files changed, 171 insertions(+), 14 deletions(-) create mode 100644 lxl-web/src/lib/constants/facets.ts create mode 100644 lxl-web/src/lib/types/userSettings.ts create mode 100644 lxl-web/src/lib/utils/userSettings.ts create mode 100644 lxl-web/src/routes/+layout.server.ts diff --git a/lxl-web/package-lock.json b/lxl-web/package-lock.json index 2cd200f70..89715cb6f 100644 --- a/lxl-web/package-lock.json +++ b/lxl-web/package-lock.json @@ -20,6 +20,7 @@ "@sveltejs/vite-plugin-svelte": "^3.1.1", "@types/eslint": "^9.6.0", "@types/jmespath": "^0.15.2", + "@types/js-cookie": "^3.0.6", "autoprefixer": "^10.4.20", "cssnano": "^7.0.5", "eslint": "^9.9.0", @@ -28,6 +29,7 @@ "globals": "^15.9.0", "husky": "^9.1.4", "jmespath": "^0.16.0", + "js-cookie": "^3.0.5", "lint-staged": "^15.2.9", "lxljs": "file:../lxljs", "magic-string": "^0.30.11", @@ -1516,6 +1518,12 @@ "integrity": "sha512-pegh49FtNsC389Flyo9y8AfkVIZn9MMPE9yJrO9svhq6Fks2MwymULWjZqySuxmctd3ZH4/n7Mr98D+1Qo5vGA==", "dev": true }, + "node_modules/@types/js-cookie": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz", + "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==", + "dev": true + }, "node_modules/@types/json-schema": { "version": "7.0.15", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", @@ -3676,6 +3684,15 @@ "node": ">= 0.6.0" } }, + "node_modules/js-cookie": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz", + "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==", + "dev": true, + "engines": { + "node": ">=14" + } + }, "node_modules/js-yaml": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", diff --git a/lxl-web/package.json b/lxl-web/package.json index 61958673f..5c6fde26f 100644 --- a/lxl-web/package.json +++ b/lxl-web/package.json @@ -34,6 +34,7 @@ "@sveltejs/vite-plugin-svelte": "^3.1.1", "@types/eslint": "^9.6.0", "@types/jmespath": "^0.15.2", + "@types/js-cookie": "^3.0.6", "autoprefixer": "^10.4.20", "cssnano": "^7.0.5", "eslint": "^9.9.0", @@ -42,6 +43,7 @@ "globals": "^15.9.0", "husky": "^9.1.4", "jmespath": "^0.16.0", + "js-cookie": "^3.0.5", "lint-staged": "^15.2.9", "lxljs": "file:../lxljs", "magic-string": "^0.30.11", diff --git a/lxl-web/src/app.d.ts b/lxl-web/src/app.d.ts index 8d688b63e..ac259c0f4 100644 --- a/lxl-web/src/app.d.ts +++ b/lxl-web/src/app.d.ts @@ -1,5 +1,6 @@ // See https://kit.svelte.dev/docs/types#app // for information about these interfaces +import type { UserSettings } from '$lib/types/userSettings'; import 'unplugin-icons/types/svelte'; declare global { @@ -11,6 +12,7 @@ declare global { interface PageData { locale: import('$lib/i18n/locales').LocaleCode; t: Awaited>; + userSettings: UserSettings; } interface PageState { expandedInstances?: string[]; diff --git a/lxl-web/src/lib/components/find/FacetGroup.svelte b/lxl-web/src/lib/components/find/FacetGroup.svelte index 4ef57abea..7cfc3297f 100644 --- a/lxl-web/src/lib/components/find/FacetGroup.svelte +++ b/lxl-web/src/lib/components/find/FacetGroup.svelte @@ -1,25 +1,63 @@ -
  • +
  • - {group.label} + {group.label} + +
    {#if group.search && !(searchPhrase && hasHits)} @@ -92,7 +148,7 @@ @@ -105,8 +161,18 @@
    • diff --git a/lxl-web/src/lib/constants/facets.ts b/lxl-web/src/lib/constants/facets.ts new file mode 100644 index 000000000..dcbb9b21f --- /dev/null +++ b/lxl-web/src/lib/constants/facets.ts @@ -0,0 +1,2 @@ +export const DEFAULT_FACETS_SHOWN = 5; +export const DEFAULT_FACET_SORT = 'hits.desc'; diff --git a/lxl-web/src/lib/i18n/locales/en.js b/lxl-web/src/lib/i18n/locales/en.js index c19241eb6..c7fffbd8a 100644 --- a/lxl-web/src/lib/i18n/locales/en.js +++ b/lxl-web/src/lib/i18n/locales/en.js @@ -102,7 +102,11 @@ export default { alphaDesc: 'Z-A', publicationAsc: 'Publication year (oldest first)', publicationDesc: 'Publication year (newest first)', - linksDesc: 'Most linked' + linksDesc: 'Most linked', + hitsAsc: 'Hits asc.', + hitsDesc: 'Hits desc.', + yearAsc: 'Oldest first', + yearDesc: 'Newest first' }, errors: { somethingWentWrong: 'Something went wrong', diff --git a/lxl-web/src/lib/i18n/locales/sv.js b/lxl-web/src/lib/i18n/locales/sv.js index 828198fd9..fc4e99330 100644 --- a/lxl-web/src/lib/i18n/locales/sv.js +++ b/lxl-web/src/lib/i18n/locales/sv.js @@ -101,7 +101,11 @@ export default { alphaDesc: 'Ö-A', publicationAsc: 'Utgivningsår (äldst först)', publicationDesc: 'Utgivningsår (nyast först)', - linksDesc: 'Mest länkad' + linksDesc: 'Mest länkad', + hitsAsc: 'Minst träffar', + hitsDesc: 'Flest träffar', + yearAsc: 'Äldst först', + yearDesc: 'Nyast först' }, errors: { somethingWentWrong: 'Något gick fel', diff --git a/lxl-web/src/lib/types/userSettings.ts b/lxl-web/src/lib/types/userSettings.ts new file mode 100644 index 000000000..39c5047ca --- /dev/null +++ b/lxl-web/src/lib/types/userSettings.ts @@ -0,0 +1,7 @@ +export type UserSettings = SettingsObj | undefined; + +interface SettingsObj { + facetSort: { + [dimension: string]: string; + }; +} diff --git a/lxl-web/src/lib/utils/userSettings.ts b/lxl-web/src/lib/utils/userSettings.ts new file mode 100644 index 000000000..8447e4662 --- /dev/null +++ b/lxl-web/src/lib/utils/userSettings.ts @@ -0,0 +1,30 @@ +import Cookies from 'js-cookie'; +import { browser } from '$app/environment'; +import type { UserSettings } from '$lib/types/userSettings'; + +export function saveUserSetting(namespace: 'facetSort', value: { [dimension: string]: string }) { + if (browser) { + const userSettings = Cookies.get('userSettings'); + let newSettings; + + if (userSettings) { + try { + const parsedSettings = JSON.parse(userSettings) as UserSettings; + if (parsedSettings) { + newSettings = { + ...parsedSettings, + [namespace]: { + ...(namespace in parsedSettings && parsedSettings[namespace]), + ...value + } + }; + } + } catch (e) { + console.warn(e); + } + } else { + newSettings = { [namespace]: value }; + } + Cookies.set('userSettings', JSON.stringify(newSettings)); + } +} diff --git a/lxl-web/src/routes/+layout.server.ts b/lxl-web/src/routes/+layout.server.ts new file mode 100644 index 000000000..bdcf6801d --- /dev/null +++ b/lxl-web/src/routes/+layout.server.ts @@ -0,0 +1,16 @@ +import type { UserSettings } from '$lib/types/userSettings.js'; + +export async function load({ cookies }) { + let userSettings: UserSettings; + const settingsCookie = cookies.get('userSettings'); + if (settingsCookie) { + try { + userSettings = JSON.parse(settingsCookie); + } catch (e) { + console.warn('Failed to parse user settings', e); + } + } + return { + userSettings + }; +} diff --git a/lxl-web/src/routes/+layout.ts b/lxl-web/src/routes/+layout.ts index 50d97e242..096c80bc4 100644 --- a/lxl-web/src/routes/+layout.ts +++ b/lxl-web/src/routes/+layout.ts @@ -1,9 +1,10 @@ import { getTranslator } from '$lib/i18n/index.js'; import { getSupportedLocale, defaultLocale } from '$lib/i18n/locales'; -export async function load({ params }) { +export async function load({ params, data }) { const locale = getSupportedLocale(params?.lang); // will use default locale if no lang param const t = await getTranslator(locale); const base = locale === defaultLocale ? '/' : `/${locale}/`; - return { locale, t, base }; + const userSettings = data.userSettings; + return { locale, t, base, userSettings }; }