diff --git a/src/sorter.ts b/src/sorter.ts index 59404f56..dc85a285 100644 --- a/src/sorter.ts +++ b/src/sorter.ts @@ -1,53 +1,45 @@ import { LitElement, html, css } from "lit"; +import { property } from "lit/decorators.js"; + import { wrapCss } from "./misc"; import fasSortDown from "@fortawesome/fontawesome-free/svgs/solid/sort-down.svg"; import fasSortUp from "@fortawesome/fontawesome-free/svgs/solid/sort-up.svg"; // =========================================================================== -class Sorter extends LitElement { - constructor() { - super(); - // @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'? - this.sortedData = []; - // @ts-expect-error - TS2339 - Property 'data' does not exist on type 'Sorter'. - this.data = []; - - // @ts-expect-error - TS2339 - Property 'pageResults' does not exist on type 'Sorter'. - this.pageResults = 0; - // @ts-expect-error - TS2339 - Property 'numResults' does not exist on type 'Sorter'. - this.numResults = 0; - - // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'. - this.sortKey = null; - // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'. - this.sortDesc = null; - } +class Sorter extends LitElement { + @property({ attribute: false }) + sortedData: T[] = []; - static get properties() { - return { - id: { type: String }, + @property({ attribute: false }) + data: T[] = []; - pageResults: { type: Number }, + @property({ type: String }) + id!: string; - data: { type: Array }, - sortedData: { type: Array }, + @property({ type: Number }) + pageResults = 0; - sortKey: { type: String }, - sortDesc: { type: Boolean }, - }; - } + @property({ attribute: false }) + numResults = 0; + + @property({ type: String }) + sortKey: string | null = null; + + @property({ type: Boolean }) + sortDesc: boolean | null = null; + + @property({ attribute: false }) + sortKeys?: { key: string; name: string }[]; firstUpdated() { if (this.id) { const sortKey = localStorage.getItem(`${this.id}:sortKey`); if (sortKey !== null) { - // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'. this.sortKey = sortKey; } const sortDesc = localStorage.getItem(`${this.id}:sortDesc`); if (sortDesc !== null) { - // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'. this.sortDesc = sortDesc === "1"; } } @@ -58,15 +50,11 @@ class Sorter extends LitElement { const descChanged = changedProperties.has("sortDesc"); const dataChanged = changedProperties.has("data"); - // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'. if (keyChanged && this.sortKey !== null) { - // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'. localStorage.setItem(`${this.id}:sortKey`, this.sortKey); } - // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'. if (descChanged && this.sortDesc !== null) { - // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'. localStorage.setItem(`${this.id}:sortDesc`, this.sortDesc ? "1" : "0"); } @@ -76,28 +64,20 @@ class Sorter extends LitElement { } sortData() { - // @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'? | TS2339 - Property 'data' does not exist on type 'Sorter'. this.sortedData = [...this.data]; - // @ts-expect-error - TS2339 - Property 'numResults' does not exist on type 'Sorter'. | TS2339 - Property 'pageResults' does not exist on type 'Sorter'. this.numResults = this.pageResults; - // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'. if (this.sortKey === "") { - // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'. if (this.sortDesc) { - // @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'? this.sortedData.reverse(); } } else { - // @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'? this.sortedData.sort((first, second) => { - // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'. | TS2339 - Property 'sortKey' does not exist on type 'Sorter'. - if (first[this.sortKey] === second[this.sortKey]) { + if (first[this.sortKey!] === second[this.sortKey!]) { return 0; } - // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'. | TS2339 - Property 'sortKey' does not exist on type 'Sorter'. | TS2339 - Property 'sortKey' does not exist on type 'Sorter'. - return this.sortDesc == first[this.sortKey] < second[this.sortKey] + return this.sortDesc == first[this.sortKey!] < second[this.sortKey!] ? 1 : -1; }); @@ -108,27 +88,20 @@ class Sorter extends LitElement { sendSortChanged() { const detail = { - // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'. sortKey: this.sortKey, - // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'. sortDesc: this.sortDesc, - // @ts-expect-error - TS2339 - Property 'numResults' does not exist on type 'Sorter'. sortedData: this.numResults - ? // @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'? | TS2339 - Property 'numResults' does not exist on type 'Sorter'. - this.sortedData.slice(0, this.numResults) - : // @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'? - this.sortedData, + ? this.sortedData.slice(0, this.numResults) + : this.sortedData, }; this.dispatchEvent(new CustomEvent("sort-changed", { detail })); } getMore(more = 100) { - // @ts-expect-error - TS2339 - Property 'pageResults' does not exist on type 'Sorter'. | TS2339 - Property 'numResults' does not exist on type 'Sorter'. | TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'? if (this.pageResults && this.numResults >= this.sortedData.length) { return; } - // @ts-expect-error - TS2339 - Property 'numResults' does not exist on type 'Sorter'. this.numResults += more; this.sendSortChanged(); } @@ -149,37 +122,24 @@ class Sorter extends LitElement { return html`
`;