more ts updates

This commit is contained in:
Peter Clement 2025-02-25 15:03:22 +00:00
parent 609f967c17
commit 60f5dbe8b4
3 changed files with 72 additions and 51 deletions

View File

@ -3,7 +3,7 @@
import ActionButton from "../ActionButton/ActionButton.svelte" import ActionButton from "../ActionButton/ActionButton.svelte"
export let selected: boolean | undefined export let selected: boolean | undefined
export let onEdit: () => void export let onEdit: (_e: Event) => void
export let allowSelectRows: boolean = false export let allowSelectRows: boolean = false
export let allowEditRows: boolean = false export let allowEditRows: boolean = false
export let data: Record<string, any> export let data: Record<string, any>

View File

@ -1,4 +1,4 @@
<script> <script lang="ts">
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
import "@spectrum-css/table/dist/index-vars.css" import "@spectrum-css/table/dist/index-vars.css"
import CellRenderer from "./CellRenderer.svelte" import CellRenderer from "./CellRenderer.svelte"
@ -7,6 +7,7 @@
import ProgressCircle from "../ProgressCircle/ProgressCircle.svelte" import ProgressCircle from "../ProgressCircle/ProgressCircle.svelte"
import Checkbox from "../Form/Checkbox.svelte" import Checkbox from "../Form/Checkbox.svelte"
/**
/** /**
* The expected schema is our normal couch schemas for our tables. * The expected schema is our normal couch schemas for our tables.
* Each field schema can be enriched with a few extra properties to customise * Each field schema can be enriched with a few extra properties to customise
@ -24,42 +25,42 @@
* borderLeft: show a left border * borderLeft: show a left border
* borderRight: show a right border * borderRight: show a right border
*/ */
export let data = [] export let data: any[] = []
export let schema = {} export let schema: Record<string, any> = {}
export let showAutoColumns = false export let showAutoColumns: boolean = false
export let rowCount = 0 export let rowCount: number = 0
export let quiet = false export let quiet: boolean = false
export let loading = false export let loading: boolean = false
export let allowSelectRows export let allowSelectRows: boolean = false
export let allowEditRows = true export let allowEditRows: boolean = true
export let allowEditColumns = true export let allowEditColumns: boolean = true
export let allowClickRows = true export let allowClickRows: boolean = true
export let selectedRows = [] export let selectedRows: any[] = []
export let customRenderers = [] export let customRenderers: any[] = []
export let disableSorting = false export let disableSorting: boolean = false
export let autoSortColumns = true export let autoSortColumns: boolean = true
export let compact = false export let compact: boolean = false
export let customPlaceholder = false export let customPlaceholder: boolean = false
export let showHeaderBorder = true export let showHeaderBorder: boolean = true
export let placeholderText = "No rows found" export let placeholderText: string = "No rows found"
export let snippets = [] export let snippets: any[] = []
export let defaultSortColumn = undefined export let defaultSortColumn: string | undefined = undefined
export let defaultSortOrder = "Ascending" export let defaultSortOrder: "Ascending" | "Descending" = "Ascending"
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
// Config // Config
const headerHeight = 36 const headerHeight: number = 36
$: rowHeight = compact ? 46 : 55 $: rowHeight = compact ? 46 : 55
// Sorting state // Sorting state
let sortColumn let sortColumn: string | undefined
let sortOrder let sortOrder: "Ascending" | "Descending" | undefined
// Table state // Table state
let height = 0 let height: number = 0
let loaded = false let loaded: boolean = false
let checkboxStatus = false let checkboxStatus: boolean = false
$: schema = fixSchema(schema) $: schema = fixSchema(schema)
$: if (!loading) loaded = true $: if (!loading) loaded = true
@ -95,8 +96,8 @@
} }
} }
const fixSchema = schema => { const fixSchema = (schema: Record<string, any>): Record<string, any> => {
let fixedSchema = {} let fixedSchema: Record<string, any> = {}
Object.entries(schema || {}).forEach(([fieldName, fieldSchema]) => { Object.entries(schema || {}).forEach(([fieldName, fieldSchema]) => {
if (typeof fieldSchema === "string") { if (typeof fieldSchema === "string") {
fixedSchema[fieldName] = { fixedSchema[fieldName] = {
@ -120,7 +121,13 @@
return fixedSchema return fixedSchema
} }
const getVisibleRowCount = (loaded, height, allRows, rowCount, rowHeight) => { const getVisibleRowCount = (
loaded: boolean,
height: number,
allRows: number,
rowCount: number,
rowHeight: number
): number => {
if (!loaded) { if (!loaded) {
return rowCount || 0 return rowCount || 0
} }
@ -131,12 +138,12 @@
} }
const getHeightStyle = ( const getHeightStyle = (
visibleRowCount, visibleRowCount: number,
rowCount, rowCount: number,
totalRowCount, totalRowCount: number,
rowHeight, rowHeight: number,
loading loading: boolean
) => { ): string => {
if (loading) { if (loading) {
return `height: ${headerHeight + visibleRowCount * rowHeight}px;` return `height: ${headerHeight + visibleRowCount * rowHeight}px;`
} }
@ -146,7 +153,11 @@
return `height: ${headerHeight + visibleRowCount * rowHeight}px;` return `height: ${headerHeight + visibleRowCount * rowHeight}px;`
} }
const getGridStyle = (fields, schema, showEditColumn) => { const getGridStyle = (
fields: string[],
schema: Record<string, any>,
showEditColumn: boolean
): string => {
let style = "grid-template-columns:" let style = "grid-template-columns:"
if (showEditColumn) { if (showEditColumn) {
style += " auto" style += " auto"
@ -163,7 +174,11 @@
return style return style
} }
const sortRows = (rows, sortColumn, sortOrder) => { const sortRows = (
rows: any[],
sortColumn: string | undefined,
sortOrder: string | undefined
): any[] => {
sortColumn = sortColumn ?? defaultSortColumn sortColumn = sortColumn ?? defaultSortColumn
sortOrder = sortOrder ?? defaultSortOrder sortOrder = sortOrder ?? defaultSortOrder
if (!sortColumn || !sortOrder || disableSorting) { if (!sortColumn || !sortOrder || disableSorting) {
@ -180,7 +195,7 @@
}) })
} }
const sortBy = fieldSchema => { const sortBy = (fieldSchema: Record<string, any>): void => {
if (fieldSchema.sortable === false) { if (fieldSchema.sortable === false) {
return return
} }
@ -193,7 +208,7 @@
dispatch("sort", { column: sortColumn, order: sortOrder }) dispatch("sort", { column: sortColumn, order: sortOrder })
} }
const getDisplayName = schema => { const getDisplayName = (schema: Record<string, any>): string => {
let name = schema?.displayName let name = schema?.displayName
if (schema && name === undefined) { if (schema && name === undefined) {
name = schema.name name = schema.name
@ -201,9 +216,13 @@
return name || "" return name || ""
} }
const getFields = (schema, showAutoColumns, autoSortColumns) => { const getFields = (
let columns = [] schema: Record<string, any>,
let autoColumns = [] showAutoColumns: boolean,
autoSortColumns: boolean
): string[] => {
let columns: any[] = []
let autoColumns: any[] = []
Object.entries(schema || {}).forEach(([field, fieldSchema]) => { Object.entries(schema || {}).forEach(([field, fieldSchema]) => {
if (!field || !fieldSchema) { if (!field || !fieldSchema) {
return return
@ -235,17 +254,17 @@
.map(column => column.name) .map(column => column.name)
} }
const editColumn = (e, field) => { const editColumn = (e: Event, field: any): void => {
e.stopPropagation() e.stopPropagation()
dispatch("editcolumn", field) dispatch("editcolumn", field)
} }
const editRow = (e, row) => { const editRow = (e: Event, row: any): void => {
e.stopPropagation() e.stopPropagation()
dispatch("editrow", cloneDeep(row)) dispatch("editrow", cloneDeep(row))
} }
const toggleSelectRow = row => { const toggleSelectRow = (row: any): void => {
if (!allowSelectRows) { if (!allowSelectRows) {
return return
} }
@ -258,7 +277,7 @@
} }
} }
const toggleSelectAll = e => { const toggleSelectAll = (e: CustomEvent): void => {
const select = !!e.detail const select = !!e.detail
if (select) { if (select) {
// Add any rows which are not already in selected rows // Add any rows which are not already in selected rows
@ -278,8 +297,10 @@
} }
} }
const computeCellStyles = schema => { const computeCellStyles = (
let styles = {} schema: Record<string, any>
): Record<string, string> => {
let styles: Record<string, string> = {}
Object.keys(schema || {}).forEach(field => { Object.keys(schema || {}).forEach(field => {
styles[field] = "" styles[field] = ""
if (schema[field].color) { if (schema[field].color) {