From 9639bec677bb6bd0de9d528bf5b48f669cf3c36e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= Date: Tue, 15 Feb 2022 22:05:51 +0100 Subject: [PATCH] [ui] sorting logic into util --- webui/src/components/widgets/Gallery.svelte | 62 +-------------- webui/src/components/widgets/Table.svelte | 60 +-------------- webui/src/util/sort.ts | 84 +++++++++++++++++++++ 3 files changed, 89 insertions(+), 117 deletions(-) create mode 100644 webui/src/util/sort.ts diff --git a/webui/src/components/widgets/Gallery.svelte b/webui/src/components/widgets/Gallery.svelte index 5308710..da866e7 100644 --- a/webui/src/components/widgets/Gallery.svelte +++ b/webui/src/components/widgets/Gallery.svelte @@ -2,7 +2,8 @@ import { readable, Readable } from "svelte/store"; import type { UpEntry, UpListing } from "upend"; -import { query } from "../../lib/entity"; + import { query } from "../../lib/entity"; + import { defaultEntitySort } from "../../util/sort"; import Thumbnail from "./gallery/Thumbnail.svelte"; export let entries: UpEntry[]; @@ -47,64 +48,7 @@ import { query } from "../../lib/entity"; } function sortAttributes() { - sortedAttributes = entries - .concat() - .sort((aEntry, bEntry) => { - if ( - !sortKeys[aEntry.value.c]?.length || - !sortKeys[bEntry.value.c]?.length - ) { - if ( - Boolean(sortKeys[aEntry.value.c]?.length) && - !sortKeys[bEntry.value.c]?.length - ) { - return -1; - } else if ( - !sortKeys[aEntry.value.c]?.length && - Boolean(sortKeys[bEntry.value.c]?.length) - ) { - return 1; - } else { - return String(aEntry.value.c).localeCompare(String(bEntry.value.c)); - } - } else { - return sortKeys[aEntry.value.c][0].localeCompare( - sortKeys[bEntry.value.c][0], - undefined, - { numeric: true, sensitivity: "base" } - ); - } - }) - .sort((aEntry, bEntry) => { - return String(aEntry.value.c).length - String(bEntry.value.c).length; - }) - .sort((aEntry, bEntry) => { - return aEntry.attribute.localeCompare(bEntry.attribute); - }) - .sort((aEntry, bEntry) => { - if ( - !sortKeys[aEntry.entity]?.length || - !sortKeys[bEntry.entity]?.length - ) { - if ( - Boolean(sortKeys[aEntry.entity]?.length) && - !sortKeys[bEntry.entity]?.length - ) { - return -1; - } else if ( - !sortKeys[aEntry.entity]?.length && - Boolean(sortKeys[bEntry.entity]?.length) - ) { - return 1; - } else { - return aEntry.entity.localeCompare(bEntry.entity); - } - } else { - return sortKeys[aEntry.entity][0].localeCompare( - sortKeys[bEntry.entity][0] - ); - } - }); + sortedAttributes = defaultEntitySort(entries, sortKeys); } $: { diff --git a/webui/src/components/widgets/Table.svelte b/webui/src/components/widgets/Table.svelte index 4bd0aed..8f8f5d6 100644 --- a/webui/src/components/widgets/Table.svelte +++ b/webui/src/components/widgets/Table.svelte @@ -12,6 +12,7 @@ import Editable from "../utils/Editable.svelte"; import { query } from "../../lib/entity"; import { Readable, readable } from "svelte/store"; + import { defaultEntitySort } from "../../util/sort"; const dispatch = createEventDispatcher(); export let columns: string; @@ -99,64 +100,7 @@ } function sortAttributes() { - sortedAttributes = entries - .concat() - .sort((aEntry, bEntry) => { - if ( - !sortKeys[aEntry.value.c]?.length || - !sortKeys[bEntry.value.c]?.length - ) { - if ( - Boolean(sortKeys[aEntry.value.c]?.length) && - !sortKeys[bEntry.value.c]?.length - ) { - return -1; - } else if ( - !sortKeys[aEntry.value.c]?.length && - Boolean(sortKeys[bEntry.value.c]?.length) - ) { - return 1; - } else { - return String(aEntry.value.c).localeCompare(String(bEntry.value.c)); - } - } else { - return sortKeys[aEntry.value.c][0].localeCompare( - sortKeys[bEntry.value.c][0], - undefined, - { numeric: true, sensitivity: "base" } - ); - } - }) - .sort((aEntry, bEntry) => { - return String(aEntry.value.c).length - String(bEntry.value.c).length; - }) - .sort((aEntry, bEntry) => { - return aEntry.attribute.localeCompare(bEntry.attribute); - }) - .sort((aEntry, bEntry) => { - if ( - !sortKeys[aEntry.entity]?.length || - !sortKeys[bEntry.entity]?.length - ) { - if ( - Boolean(sortKeys[aEntry.entity]?.length) && - !sortKeys[bEntry.entity]?.length - ) { - return -1; - } else if ( - !sortKeys[aEntry.entity]?.length && - Boolean(sortKeys[bEntry.entity]?.length) - ) { - return 1; - } else { - return aEntry.entity.localeCompare(bEntry.entity); - } - } else { - return sortKeys[aEntry.entity][0].localeCompare( - sortKeys[bEntry.entity][0] - ); - } - }); + sortedAttributes = defaultEntitySort(entries, sortKeys); } $: { diff --git a/webui/src/util/sort.ts b/webui/src/util/sort.ts new file mode 100644 index 0000000..120aac4 --- /dev/null +++ b/webui/src/util/sort.ts @@ -0,0 +1,84 @@ +import type { UpEntry } from "upend"; + +export type SortKeys = { [key: string]: string[] }; + +export function sortByValue(entries: UpEntry[], sortKeys: SortKeys): void { + entries + .sort((aEntry, bEntry) => { + if ( + !sortKeys[aEntry.value.c]?.length || + !sortKeys[bEntry.value.c]?.length + ) { + if ( + Boolean(sortKeys[aEntry.value.c]?.length) && + !sortKeys[bEntry.value.c]?.length + ) { + return -1; + } else if ( + !sortKeys[aEntry.value.c]?.length && + Boolean(sortKeys[bEntry.value.c]?.length) + ) { + return 1; + } else { + return String(aEntry.value.c).localeCompare(String(bEntry.value.c)); + } + } else { + return sortKeys[aEntry.value.c][0].localeCompare( + sortKeys[bEntry.value.c][0], + undefined, + { numeric: true, sensitivity: "base" } + ); + } + }) + .sort((aEntry, bEntry) => { + return String(aEntry.value.c).length - String(bEntry.value.c).length; + }); +} + +export function sortByAttribute(entries: UpEntry[]): void { + entries.sort((aEntry, bEntry) => { + return aEntry.attribute.localeCompare(bEntry.attribute); + }); +} + +export function sortByEntity(entries: UpEntry[], sortKeys: SortKeys): void { + entries + .sort((aEntry, bEntry) => { + return aEntry.attribute.localeCompare(bEntry.attribute); + }) + .sort((aEntry, bEntry) => { + if ( + !sortKeys[aEntry.entity]?.length || + !sortKeys[bEntry.entity]?.length + ) { + if ( + Boolean(sortKeys[aEntry.entity]?.length) && + !sortKeys[bEntry.entity]?.length + ) { + return -1; + } else if ( + !sortKeys[aEntry.entity]?.length && + Boolean(sortKeys[bEntry.entity]?.length) + ) { + return 1; + } else { + return aEntry.entity.localeCompare(bEntry.entity); + } + } else { + return sortKeys[aEntry.entity][0].localeCompare( + sortKeys[bEntry.entity][0] + ); + } + }); +} + +export function defaultEntitySort( + entries: UpEntry[], + sortKeys: SortKeys +): UpEntry[] { + const result = entries.concat(); + sortByValue(entries, sortKeys); + sortByAttribute(entries); + sortByEntity(entries, sortKeys); + return result; +}