dazscript-framework 0.1.15 → 0.1.16

package/src/dialog/builders/list-view-builder.ts

@@ -1,328 +1,396 @@
-import { warn } from '@dsf/common/log';
-import { clearColumns, filter, getDataItem, setDataItem } from '@dsf/helpers/list-view-helper';
-import { Delayed } from '@dsf/lib/delayed';
-import { Observable } from '@dsf/lib/observable';
-import { TreeNode } from '@dsf/lib/tree-node';
-import { IWidgetBuilder, createWidget } from './widget-builder';
-import { WidgetBuilderContext } from './widgets-builder';
-
-type ListViewFilterOptions = {
-    keywords: Observable<string>,
-    field: (listItem: DzListViewItem) => string,
-    selectOnFilter?: boolean,
-    filters?: (viewItem: DzListViewItem) => boolean,
-    delay?: { min: number, max: number }
-}
-
-export enum ListViewRefreshOptions {
-    All,
-    Filters
-}
-
-export class ListViewBuilder<TItem, TData> implements IWidgetBuilder<DzListView> {
-
-    private readonly context: ListViewBuilderContext<TItem, TData>
-
-    constructor(dialogContext: WidgetBuilderContext) {
-        this.context = new ListViewBuilderContext(dialogContext)
-    }
-
-    visible(value: boolean | Observable<boolean>): this {
-        this.context.visible = typeof value === 'boolean'
-            ? new Observable(value)
-            : value
-        return this
-    }
-
-    /**
-     * Binds the list rows to a collection of items
-     * @param items
-     * @returns
-     */
-    items(items: Observable<TreeNode<TItem>[]>): ListViewBindBuilder<TItem, TData> {
-        this.context.items = items
-        return new ListViewBindBuilder(this.context)
-    }
-
-    /**
-     * Build an item row with the provided function
-     * @param build the function to use for building a row
-     * @returns returns a ListViewItem or DzCheckListItem
-     */
-    row(build: (item: TreeNode<TItem>, parent: DzListView | DzListViewItem, id?: number) => DzListViewItem): this {
-        this.context.rowBuilder = build
-        return this
-    }
-
-    sorting(sort: boolean | number): this {
-        if (typeof sort === 'boolean')
-            this.context.sorting = sort ? 0 : -1
-        else
-            this.context.sorting = sort
-        return this
-    }
-
-    expanded(onOff: boolean | Observable<boolean>): this {
-        if (typeof onOff === 'boolean')
-            this.context.expanded = new Observable(onOff)
-        else
-            this.context.expanded = onOff
-        return this
-    }
-
-    flat(onOff: boolean | Observable<boolean>): this {
-        this.context.flat = typeof onOff === 'boolean'
-            ? new Observable(onOff)
-            : onOff
-        return this
-    }
-
-    doubleClicked(bind: Observable<TData>): this {
-        this.context.doubleClicked = bind
-        return this
-    }
-
-    refresh(when: Observable<any>, what: ListViewRefreshOptions = ListViewRefreshOptions.All): this {
-        this.context.refreshWhen = when
-        this.context.refreshWhat = what
-        return this
-    }
-
-    contextMenu(fn: (listView: DzListView, item: DzListViewItem, pos: Point) => DzPopupMenu): this {
-        this.context.contextMenu = fn
-        return this
-    }
-
-    build(then?: (listView: DzListView) => void): DzListView {
-        let listView = build(this.context)
-        then?.(listView)
-        return listView
-    }
-}
-
-class ListViewBuilderContext<TItem, TData> {
-    columns: Observable<string[]> = new Observable([])
-    columnsWidth: (index: number, width: number) => number
-    items: Observable<TreeNode<TItem>[]> = new Observable([])
-    text: (item: TreeNode<TItem>) => string[]
-    data: (item: TreeNode<TItem>) => TData
-    sorting: number = 0
-    selected: Observable<TData>
-    filter: ListViewFilterOptions
-    doubleClicked: Observable<TData>
-    rowBuilder: (item: TreeNode<TItem>, parent: DzListView | DzListViewItem, id?: number) => DzListViewItem
-    contextMenu: (listView: DzListView, item: DzListViewItem, pos: Point) => DzPopupMenu
-    refreshWhen: Observable<void>
-    expanded: Observable<boolean>
-    visible: Observable<boolean> = new Observable(true)
-    decorated: boolean
-    flat: Observable<boolean>
-    refreshWhat: ListViewRefreshOptions = ListViewRefreshOptions.All
-    constructor(public readonly dialogContext: WidgetBuilderContext) { }
-}
-
-class ListViewBindBuilder<TItem, TData> {
-    constructor(private context: ListViewBuilderContext<TItem, TData>) { }
-
-    /**
-    * Sepecify the text to display on each column
-    * @param columns
-    * @returns
-    */
-    columns(columns: string[] | Observable<string[]>, width?: (index: number, width: number) => number): this {
-        this.context.columns = columns instanceof Observable
-            ? columns
-            : new Observable(columns)
-        this.context.columnsWidth = width
-        return this
-    }
-
-    /**
-     * Callback for extracting the text to display on each column from every item in the list
-     * @param from the callback function to extract the text for each item
-     * @returns a string array for every column text to be display for a given item
-     */
-    text(from: (item: TreeNode<TItem>) => string[]): this {
-        this.context.text = from
-        return this
-    }
-
-    /**
-     * Callback to specify which part of the item will be stored in each row as data. It can be
-     * the whole item or a property of the item
-     * @param from the callback function to specify what to store as data
-     * @returns the data to be stored in each row for a given item
-     */
-    data(from: (item: TreeNode<TItem>) => TData): this {
-        this.context.data = from
-        return this
-    }
-
-    /**
-     * Bind the data of a selected row in the list to an object
-     * @param bind
-     * @returns
-     */
-    selected(bind: Observable<TData>): this {
-        this.context.selected = bind
-        return this
-    }
-
-    filter(options: ListViewFilterOptions): this {
-        this.context.filter = options
-        return this
-    }
-
-    build(then?: (listView: DzListView) => void): DzListView {
-        let listView = build(this.context)
-        then?.(listView)
-        return listView
-    }
-}
-
-const build = <TItem, TData>(context: ListViewBuilderContext<TItem, TData>): DzListView => {
-    const listView = createWidget(context.dialogContext).build(DzListView)
-    let rowId = -1
-
-    if (context.visible) {
-        if (context.visible.value === false)
-            listView.hide()
-        context.visible.connect((visible) => {
-            if (visible)
-                listView.show()
-            else
-                listView.hide()
-        })
-    }
-
-    const buildColumns = (columns: string[]) => {
-        clearColumns(listView)
-        columns.forEach(column => {
-            listView.addColumn(column)
-        })
-    }
-
-    const buildItem = (item: TreeNode<TItem>, parent: DzListView | DzListViewItem) => {
-        rowId++
-        parent = context.flat?.value === true ? listView : parent
-
-        let listItem = context.rowBuilder ? context.rowBuilder(item, parent, rowId) : new DzListViewItem(parent, rowId)
-        if (!listItem) return
-
-        listItem.open = context.expanded?.value === true
-
-        context.text(item).forEach((text, idx) => {
-            let data = context.data?.(item)
-            if (data) {
-                setDataItem(listItem, data)
-            }
-            if (!text || idx >= context.columns.value.length)
-                return;
-            listItem.setText(idx, text)
-        })
-
-        item.children.forEach((child) => {
-            context.decorated = true
-            buildItem(child, listItem)
-        })
-    }
-
-    const filterList = (keywords?: string) => {
-        filter(listView, context.filter.field, keywords ?? context.filter?.keywords?.value, { selectOnFilter: context.filter.selectOnFilter ?? true, filters: context.filter.filters })
-    }
-
-    const buildList = (items: TreeNode<TItem>[], selectedId?: number) => {
-        rowId = -1
-        if (!context.text)
-            return warn('No text function provided for list builder')
-
-        listView.clear()
-        context.columns?.value.forEach((_, index) => {
-            listView.setColumnWidth(index, 0)
-        })
-        listView.allColumnsShowFocus = true
-
-        if (context.visible.value === false)
-            return
-
-        if (!items) return
-
-        items.forEach((item) => {
-            buildItem(item, listView)
-        })
-
-        if (context.columnsWidth) {
-            context.columns?.value.forEach((_, index) => {
-                listView.setColumnWidth(index, context.columnsWidth(index, listView.columnWidth(index)))
-            })
-        }
-
-        listView.rootIsDecorated = context.decorated
-        listView.setSorting(context.sorting)
-        if (context.sorting >= 0) listView.sort()
-
-        if (context.filter?.keywords.value || context.filter?.filters)
-            filterList()
-
-        if (selectedId) {
-            listView.getItems(DzListView.All).forEach(item => {
-                if (item.id === selectedId) {
-                    listView.setSelected(item, true)
-                    listView.setCurrentItem(item)
-                    listView.ensureItemVisible(item)
-                }
-            })
-        }
-    }
-
-    const onSelectionChanged = (callback: (item: DzListViewItem, data: TData) => void) => {
-        (listView as any)["selectionChanged()"].scriptConnect(() => {
-            callback(listView.selectedItem(), getDataItem(listView.selectedItem()))
-        })
-    }
-
-    buildColumns(context.columns.value)
-    context.columns.connect((columns) => {
-        buildColumns(columns)
-    })
-
-    buildList(context.items?.value)
-    context.items.connect((items) => {
-        buildList(items, listView.selectedItem()?.id)
-    })
-
-    context.refreshWhen?.connect(() => {
-        if (context.refreshWhat === ListViewRefreshOptions.All)
-            buildList(context.items?.value, listView.selectedItem()?.id)
-        else {
-            filterList()
-        }
-
-    })
-
-    if (context.selected) {
-        onSelectionChanged((_, data) => {
-            context.selected.value = data
-        })
-    }
-
-    if (context.filter) {
-        context.filter.keywords.connect((keywords) => {
-            new Delayed(() => {
-                filterList(keywords)
-            }, context.filter.delay?.min ?? 100, context.filter.delay?.max ?? 400).trigger()
-        })
-    }
-
-    if (context.doubleClicked) {
-        listView.doubleClicked.scriptConnect((listItem) => {
-            context.doubleClicked.value = listItem?.getDataItem('data')
-        })
-    }
-
-    listView.contextMenuRequested.scriptConnect((item: DzListViewItem, pos: Point) => {
-        context.contextMenu?.(listView, item, pos).exec(pos.cursorPos(), 0)
-    })
-
-    return listView
-}
+import { warn } from '@dsf/common/log';
+import { clearColumns, filter, getDataItem, setDataItem } from '@dsf/helpers/list-view-helper';
+import { Delayed } from '@dsf/lib/delayed';
+import { Observable } from '@dsf/lib/observable';
+import { TreeNode } from '@dsf/lib/tree-node';
+import { IWidgetBuilder, createWidget } from './widget-builder';
+import { WidgetBuilderContext } from './widgets-builder';
+
+type ListViewFilterOptions = {
+    keywords: Observable<string>,
+    field: (listItem: DzListViewItem) => string,
+    selectOnFilter?: boolean,
+    filters?: (viewItem: DzListViewItem) => boolean,
+    delay?: { min: number, max: number }
+}
+
+export enum ListViewRefreshOptions {
+    All,
+    Filters
+}
+
+export class ListViewBuilder<TItem, TData> implements IWidgetBuilder<DzListView> {
+
+    private readonly context: ListViewBuilderContext<TItem, TData>
+
+    constructor(dialogContext: WidgetBuilderContext) {
+        this.context = new ListViewBuilderContext(dialogContext)
+    }
+
+    visible(value: boolean | Observable<boolean>): this {
+        this.context.visible = typeof value === 'boolean'
+            ? new Observable(value)
+            : value
+        return this
+    }
+
+    height(value: number): this {
+        this.context.height = value
+        return this
+    }
+
+    minHeight(value: number): this {
+        this.context.minHeight = value
+        return this
+    }
+
+    /**
+     * Binds the list rows to a collection of items
+     * @param items
+     * @returns
+     */
+    items(items: Observable<TreeNode<TItem>[]>): ListViewBindBuilder<TItem, TData> {
+        this.context.items = items
+        return new ListViewBindBuilder(this.context)
+    }
+
+    /**
+     * Build an item row with the provided function
+     * @param build the function to use for building a row
+     * @returns returns a ListViewItem or DzCheckListItem
+     */
+    row(build: (item: TreeNode<TItem>, parent: DzListView | DzListViewItem, id?: number) => DzListViewItem): this {
+        this.context.rowBuilder = build
+        return this
+    }
+
+    sorting(sort: boolean | number, order: 'asc' | 'desc' = 'asc'): this {
+        if (typeof sort === 'boolean')
+            this.context.sorting = sort ? 0 : -1
+        else
+            this.context.sorting = sort
+        this.context.sortAscending = order === 'asc'
+        return this
+    }
+
+    sortOnBuild(onOff: boolean = true): this {
+        this.context.sortOnBuild = onOff
+        return this
+    }
+
+    expanded(onOff: boolean | Observable<boolean>): this {
+        if (typeof onOff === 'boolean')
+            this.context.expanded = new Observable(onOff)
+        else
+            this.context.expanded = onOff
+        return this
+    }
+
+    flat(onOff: boolean | Observable<boolean>): this {
+        this.context.flat = typeof onOff === 'boolean'
+            ? new Observable(onOff)
+            : onOff
+        return this
+    }
+
+    doubleClicked(bind: Observable<TData>): this {
+        this.context.doubleClicked = bind
+        return this
+    }
+
+    refresh(when: Observable<any>, what: ListViewRefreshOptions = ListViewRefreshOptions.All): this {
+        this.context.refreshWhen = when
+        this.context.refreshWhat = what
+        return this
+    }
+
+    contextMenu(fn: (listView: DzListView, item: DzListViewItem, pos: Point) => DzPopupMenu): this {
+        this.context.contextMenu = fn
+        return this
+    }
+
+    build(then?: (listView: DzListView) => void): DzListView {
+        let listView = build(this.context)
+        then?.(listView)
+        return listView
+    }
+}
+
+class ListViewBuilderContext<TItem, TData> {
+    columns: Observable<string[]> = new Observable([])
+    columnsWidth?: (index: number, width: number, listView: any) => number
+    items: Observable<TreeNode<TItem>[]> = new Observable([])
+    text: (item: TreeNode<TItem>) => string[]
+    data: (item: TreeNode<TItem>) => TData
+    sorting: number = 0
+    sortAscending: boolean = true
+    sortOnBuild: boolean = true
+    selected: Observable<TData>
+    filter: ListViewFilterOptions
+    doubleClicked: Observable<TData>
+    rowBuilder: (item: TreeNode<TItem>, parent: DzListView | DzListViewItem, id?: number) => DzListViewItem
+    contextMenu: (listView: DzListView, item: DzListViewItem, pos: Point) => DzPopupMenu
+    refreshWhen: Observable<void>
+    expanded: Observable<boolean>
+    visible: Observable<boolean> = new Observable(true)
+    height: number | null = null
+    minHeight: number | null = null
+    decorated: boolean
+    flat: Observable<boolean>
+    refreshWhat: ListViewRefreshOptions = ListViewRefreshOptions.All
+    constructor(public readonly dialogContext: WidgetBuilderContext) { }
+}
+
+class ListViewBindBuilder<TItem, TData> {
+    constructor(private context: ListViewBuilderContext<TItem, TData>) { }
+
+    /**
+    * Sepecify the text to display on each column
+    * @param columns
+    * @returns
+    */
+    columns(columns: string[] | Observable<string[]>, width?: (index: number, width: number, listView: any) => number): this {
+        this.context.columns = columns instanceof Observable
+            ? columns
+            : new Observable(columns)
+        this.context.columnsWidth = width
+        return this
+    }
+
+    /**
+     * Callback for extracting the text to display on each column from every item in the list
+     * @param from the callback function to extract the text for each item
+     * @returns a string array for every column text to be display for a given item
+     */
+    text(from: (item: TreeNode<TItem>) => string[]): this {
+        this.context.text = from
+        return this
+    }
+
+    /**
+     * Callback to specify which part of the item will be stored in each row as data. It can be
+     * the whole item or a property of the item
+     * @param from the callback function to specify what to store as data
+     * @returns the data to be stored in each row for a given item
+     */
+    data(from: (item: TreeNode<TItem>) => TData): this {
+        this.context.data = from
+        return this
+    }
+
+    /**
+     * Bind the data of a selected row in the list to an object
+     * @param bind
+     * @returns
+     */
+    selected(bind: Observable<TData>): this {
+        this.context.selected = bind
+        return this
+    }
+
+    filter(options: ListViewFilterOptions): this {
+        this.context.filter = options
+        return this
+    }
+
+    build(then?: (listView: DzListView) => void): DzListView {
+        let listView = build(this.context)
+        then?.(listView)
+        return listView
+    }
+}
+
+const build = <TItem, TData>(context: ListViewBuilderContext<TItem, TData>): DzListView => {
+    const listView = createWidget(context.dialogContext).build(DzListView)
+    let rowId = -1
+
+    if (context.visible) {
+        if (context.visible.value === false)
+            listView.hide()
+        context.visible.connect((visible) => {
+            if (visible)
+                listView.show()
+            else
+                listView.hide()
+        })
+    }
+
+    if (context.height !== null) {
+        listView.height = context.height
+    }
+
+    if (context.minHeight !== null) {
+        listView.minHeight = context.minHeight
+    }
+
+    const buildColumns = (columns: string[]) => {
+        clearColumns(listView)
+        columns.forEach(column => {
+            listView.addColumn(column)
+        })
+    }
+
+    const buildItem = (item: TreeNode<TItem>, parent: DzListView | DzListViewItem) => {
+        rowId++
+        parent = context.flat?.value === true ? listView : parent
+
+        let listItem = context.rowBuilder ? context.rowBuilder(item, parent, rowId) : new DzListViewItem(parent, rowId)
+        if (!listItem) return
+
+        listItem.open = context.expanded?.value === true
+        let data = context.data ? context.data(item) : item.value
+        if (data != null) {
+            setDataItem(listItem, data)
+        }
+
+        context.text(item).forEach((text, idx) => {
+            if (!text || idx >= context.columns.value.length)
+                return;
+            listItem.setText(idx, text)
+        })
+
+        item.children.forEach((child) => {
+            context.decorated = true
+            buildItem(child, listItem)
+        })
+    }
+
+    const filterList = (keywords?: string) => {
+        filter(listView, context.filter.field, keywords ?? context.filter?.keywords?.value, { selectOnFilter: context.filter.selectOnFilter ?? true, filters: context.filter.filters })
+    }
+    let delayedFilter: Delayed | null = null
+
+    const buildList = (items: TreeNode<TItem>[], selectedId?: number) => {
+        rowId = -1
+        context.decorated = false
+        if (!context.text)
+            return warn('No text function provided for list builder')
+
+        listView.clear()
+        context.columns?.value.forEach((_, index) => {
+            listView.setColumnWidth(index, 0)
+        })
+        listView.allColumnsShowFocus = true
+
+        if (context.visible.value === false)
+            return
+
+        if (!items) return
+
+        items.forEach((item) => {
+            buildItem(item, listView)
+        })
+
+        if (context.columnsWidth) {
+            context.columns?.value.forEach((_, index) => {
+                listView.setColumnWidth(index, context.columnsWidth!(index, listView.columnWidth(index), listView))
+            })
+        }
+
+        listView.rootIsDecorated = context.decorated
+        if (context.sorting >= 0 && context.sortOnBuild) listView.sort()
+
+        if (context.filter?.keywords.value || context.filter?.filters)
+            filterList()
+
+        if (selectedId) {
+            listView.getItems(DzListView.All).forEach(item => {
+                if (item.id === selectedId) {
+                    listView.setSelected(item, true)
+                    listView.setCurrentItem(item)
+                    listView.ensureItemVisible(item)
+                }
+            })
+        }
+    }
+
+    const updateList = (items: TreeNode<TItem>[]) => {
+        if (!context.text) return
+        if (!items) return
+
+        const existingByPath: Record<string, DzListViewItem> = {}
+        listView.getItems(DzListView.All).forEach((li) => {
+            const data = getDataItem<any>(li)
+            const path = data?.id ?? String(li.id)
+            existingByPath[path] = li
+        })
+
+        const incomingPaths: Record<string, boolean> = {}
+        items.forEach((item) => {
+            incomingPaths[item.path] = true
+            const existing = existingByPath[item.path]
+            if (existing) {
+                context.text(item).forEach((text, idx) => {
+                    existing.setText(idx, text ?? '')
+                })
+                const data = context.data?.(item)
+                if (data) setDataItem(existing, data)
+            } else {
+                buildItem(item, listView)
+            }
+        })
+
+        listView.getItems(DzListView.All).forEach((li) => {
+            const data = getDataItem<any>(li)
+            const path = data?.id ?? String(li.id)
+            if (!incomingPaths[path]) listView.deleteItem(li)
+        })
+
+        listView.sort()
+    }
+
+    const onSelectionChanged = (callback: (item: DzListViewItem, data: TData) => void) => {
+        (listView as any)["selectionChanged()"].scriptConnect(() => {
+            callback(listView.selectedItem(), getDataItem(listView.selectedItem()))
+        })
+    }
+
+    buildColumns(context.columns.value)
+    context.columns.connect((columns) => {
+        buildColumns(columns)
+    })
+
+    listView.setSorting(context.sorting, context.sortAscending)
+    buildList(context.items?.value)
+    context.items.connect((items) => {
+        updateList(items)
+    })
+
+    context.refreshWhen?.connect(() => {
+        if (context.refreshWhat === ListViewRefreshOptions.All)
+            buildList(context.items?.value, listView.selectedItem()?.id)
+        else {
+            filterList()
+        }
+
+    })
+
+    if (context.selected) {
+        onSelectionChanged((_, data) => {
+            context.selected.value = data
+        })
+    }
+
+    if (context.filter) {
+        context.filter.keywords.connect((keywords) => {
+            if (!delayedFilter) {
+                delayedFilter = new Delayed(() => {
+                    filterList(context.filter?.keywords?.value)
+                }, context.filter.delay?.min ?? 100, context.filter.delay?.max ?? 400)
+            }
+            delayedFilter.trigger()
+        })
+    }
+
+    if (context.doubleClicked) {
+        listView.doubleClicked.scriptConnect((listItem) => {
+            context.doubleClicked.value = listItem?.getDataItem('data')
+        })
+    }
+
+    listView.contextMenuRequested.scriptConnect((item: DzListViewItem, pos: Point) => {
+        context.contextMenu?.(listView, item, pos).exec(pos.cursorPos(), 0)
+    })
+
+    return listView
+}