@skyux/data-manager 7.2.0 → 7.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/documentation.json +4 -4
- package/package.json +9 -9
package/documentation.json
CHANGED
|
@@ -4853,7 +4853,7 @@
|
|
|
4853
4853
|
{
|
|
4854
4854
|
"fileName": "data-manager-demo-data.ts",
|
|
4855
4855
|
"filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-manager-demo-data.ts",
|
|
4856
|
-
"rawContents": "export interface
|
|
4856
|
+
"rawContents": "export interface SkyDataManagerDemoRow {\n selected?: boolean;\n id: string;\n name: string;\n description: string;\n type: string;\n color: string;\n}\n\nexport const SKY_DATA_MANAGER_DEMO_DATA: SkyDataManagerDemoRow[] = [\n {\n id: '1',\n name: 'Orange',\n description: 'A round, orange fruit. A great source of vitamin C.',\n type: 'citrus',\n color: 'orange',\n },\n {\n id: '2',\n name: 'Mango',\n description:\n \"Very difficult to peel. Delicious in smoothies, but don't eat the skin.\",\n type: 'other',\n color: 'orange',\n },\n {\n id: '3',\n name: 'Lime',\n description: 'A sour, green fruit used in many drinks. It grows on trees.',\n type: 'citrus',\n color: 'green',\n },\n {\n id: '4',\n name: 'Strawberry',\n description:\n 'A red fruit that goes well with shortcake. It is the name of both the fruit and the plant!',\n type: 'berry',\n color: 'red',\n },\n {\n id: '5',\n name: 'Blueberry',\n description:\n 'A small, blue fruit often found in muffins. When not ripe, they can be sour.',\n type: 'berry',\n color: 'blue',\n },\n {\n id: '6',\n name: 'Banana',\n description:\n 'A yellow fruit with a thick skin. Monkeys love them, and in some countries it is customary to eat the peel.',\n type: 'other',\n color: 'yellow',\n },\n];\n"
|
|
4857
4857
|
},
|
|
4858
4858
|
{
|
|
4859
4859
|
"fileName": "data-manager-demo.component.html",
|
|
@@ -4863,7 +4863,7 @@
|
|
|
4863
4863
|
{
|
|
4864
4864
|
"fileName": "data-manager-demo.component.ts",
|
|
4865
4865
|
"filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-manager-demo.component.ts",
|
|
4866
|
-
"rawContents": "import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';\nimport { SkyUIConfigService } from '@skyux/core';\nimport {\n SkyDataManagerService,\n SkyDataManagerState,\n} from '@skyux/data-manager';\n\nimport { DataManagerFiltersModalDemoComponent } from './data-filter-modal.component';\nimport {\n SKY_DATA_MANAGER_DEMO_DATA,\n
|
|
4866
|
+
"rawContents": "import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';\nimport { SkyUIConfigService } from '@skyux/core';\nimport {\n SkyDataManagerService,\n SkyDataManagerState,\n} from '@skyux/data-manager';\n\nimport { DataManagerFiltersModalDemoComponent } from './data-filter-modal.component';\nimport {\n SKY_DATA_MANAGER_DEMO_DATA,\n SkyDataManagerDemoRow,\n} from './data-manager-demo-data';\n\n@Component({\n selector: 'app-data-manager-demo',\n templateUrl: './data-manager-demo.component.html',\n providers: [SkyDataManagerService, SkyUIConfigService],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDemoComponent implements OnInit {\n public dataManagerConfig = {\n filterModalComponent: DataManagerFiltersModalDemoComponent,\n sortOptions: [\n {\n id: 'az',\n label: 'Name (A - Z)',\n descending: false,\n propertyName: 'name',\n },\n {\n id: 'za',\n label: 'Name (Z - A)',\n descending: true,\n propertyName: 'name',\n },\n ],\n };\n\n public defaultDataState = new SkyDataManagerState({\n filterData: {\n filtersApplied: true,\n filters: {\n hideOrange: true,\n },\n },\n views: [\n {\n viewId: 'gridView',\n displayedColumnIds: ['selected', 'name', 'description'],\n },\n ],\n });\n\n public dataState: SkyDataManagerState | undefined;\n\n public items: SkyDataManagerDemoRow[] = SKY_DATA_MANAGER_DEMO_DATA;\n\n public activeViewId = 'repeaterView';\n\n constructor(private dataManagerService: SkyDataManagerService) {\n this.dataManagerService\n .getDataStateUpdates('dataManager')\n .subscribe((state) => (this.dataState = state));\n this.dataManagerService\n .getActiveViewIdUpdates()\n .subscribe((activeViewId) => (this.activeViewId = activeViewId));\n }\n\n public ngOnInit(): void {\n this.dataManagerService.initDataManager({\n activeViewId: this.activeViewId,\n dataManagerConfig: this.dataManagerConfig,\n defaultDataState: this.defaultDataState,\n });\n }\n\n public searchSo(): void {\n const state = this.dataState || new SkyDataManagerState({});\n state.searchText = 'so';\n this.dataManagerService.updateDataState(state, 'dataManager');\n }\n}\n"
|
|
4867
4867
|
},
|
|
4868
4868
|
{
|
|
4869
4869
|
"fileName": "data-manager-demo.module.ts",
|
|
@@ -4878,7 +4878,7 @@
|
|
|
4878
4878
|
{
|
|
4879
4879
|
"fileName": "data-view-grid.component.ts",
|
|
4880
4880
|
"filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-view-grid.component.ts",
|
|
4881
|
-
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n Input,\n OnInit,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\nimport {\n SkyDataManagerService,\n SkyDataManagerState,\n SkyDataViewConfig,\n} from '@skyux/data-manager';\n\nimport {\n ColDef,\n ColumnApi,\n ColumnState,\n GridApi,\n GridOptions,\n GridReadyEvent,\n RowSelectedEvent,\n} from 'ag-grid-community';\n\nimport {
|
|
4881
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n Input,\n OnInit,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\nimport {\n SkyDataManagerService,\n SkyDataManagerState,\n SkyDataViewConfig,\n} from '@skyux/data-manager';\n\nimport {\n ColDef,\n ColumnApi,\n ColumnState,\n GridApi,\n GridOptions,\n GridReadyEvent,\n RowSelectedEvent,\n} from 'ag-grid-community';\n\nimport { SkyDataManagerDemoRow } from './data-manager-demo-data';\n\n@Component({\n selector: 'app-data-view-grid-demo',\n templateUrl: './data-view-grid.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataViewGridDemoComponent implements OnInit {\n @Input()\n public items: SkyDataManagerDemoRow[] = [];\n\n public viewId = 'gridView';\n\n public columnDefs: ColDef[] = [\n {\n colId: 'selected',\n field: 'selected',\n headerName: '',\n maxWidth: 50,\n type: SkyCellType.RowSelector,\n suppressMovable: true,\n lockPosition: true,\n lockVisible: true,\n },\n {\n colId: 'name',\n field: 'name',\n headerName: 'Fruit name',\n width: 150,\n },\n {\n colId: 'description',\n field: 'description',\n headerName: 'Description',\n },\n ];\n\n public dataState = new SkyDataManagerState({});\n\n public viewConfig: SkyDataViewConfig = {\n id: this.viewId,\n name: 'Grid View',\n icon: 'table',\n searchEnabled: true,\n sortEnabled: true,\n multiselectToolbarEnabled: true,\n columnPickerEnabled: true,\n filterButtonEnabled: true,\n columnOptions: [\n {\n id: 'selected',\n alwaysDisplayed: true,\n label: 'selected',\n },\n {\n id: 'name',\n label: 'Fruit name',\n description: 'The name of the fruit.',\n },\n {\n id: 'description',\n label: 'Description',\n description: 'Some information about the fruit.',\n },\n ],\n };\n\n public columnApi?: ColumnApi;\n public displayedItems: SkyDataManagerDemoRow[] = [];\n public gridApi?: GridApi;\n public gridInitialized = false;\n public gridOptions!: GridOptions;\n public noRowsTemplate = `<div class=\"sky-font-deemphasized\">No results found.</div>`;\n public isActive = false;\n\n constructor(\n private agGridService: SkyAgGridService,\n private changeDetector: ChangeDetectorRef,\n private dataManagerService: SkyDataManagerService\n ) {}\n\n public ngOnInit(): void {\n this.displayedItems = this.items;\n\n this.dataManagerService.initDataView(this.viewConfig);\n\n this.gridOptions = this.agGridService.getGridOptions({\n gridOptions: {\n columnDefs: this.columnDefs,\n onGridReady: this.onGridReady.bind(this),\n },\n });\n\n this.dataManagerService\n .getDataStateUpdates(this.viewId)\n .subscribe((state) => {\n this.dataState = state;\n this.setInitialColumnOrder();\n this.updateData();\n this.changeDetector.detectChanges();\n });\n\n this.dataManagerService.getActiveViewIdUpdates().subscribe((id) => {\n this.isActive = id === this.viewId;\n this.changeDetector.detectChanges();\n });\n }\n\n public updateData(): void {\n this.sortItems();\n this.displayedItems = this.filterItems(this.searchItems(this.items));\n\n if (this.dataState.onlyShowSelected) {\n this.displayedItems = this.displayedItems.filter((item) => item.selected);\n }\n\n if (this.displayedItems.length > 0) {\n this.gridApi?.hideOverlay();\n } else {\n this.gridApi?.showNoRowsOverlay();\n }\n }\n\n public setInitialColumnOrder(): void {\n const viewState = this.dataState.getViewStateById(this.viewId);\n const visibleColumns = viewState?.displayedColumnIds || [];\n\n this.columnDefs.sort((col1, col2) => {\n const col1Index = visibleColumns.findIndex(\n (colId: string) => colId === col1.colId\n );\n const col2Index = visibleColumns.findIndex(\n (colId: string) => colId === col2.colId\n );\n\n if (col1Index === -1) {\n col1.hide = true;\n return 0;\n } else if (col2Index === -1) {\n col2.hide = true;\n return 0;\n } else {\n return col1Index - col2Index;\n }\n });\n\n this.gridInitialized = true;\n }\n\n public onGridReady(event: GridReadyEvent): void {\n this.columnApi = event.columnApi;\n this.gridApi = event.api;\n this.gridApi.sizeColumnsToFit();\n this.updateData();\n }\n\n public onRowSelected(rowSelectedEvent: RowSelectedEvent): void {\n if (!rowSelectedEvent.data.selected) {\n this.updateData();\n }\n }\n\n public sortItems(): void {\n const sortOption = this.dataState.activeSortOption;\n if (this.columnApi && sortOption) {\n const sort: ColumnState[] = [\n {\n colId: sortOption.propertyName,\n sort: sortOption.descending ? 'desc' : 'asc',\n },\n ];\n\n this.columnApi.applyColumnState({\n state: sort,\n });\n }\n }\n\n public searchItems(items: SkyDataManagerDemoRow[]): SkyDataManagerDemoRow[] {\n let searchedItems = items;\n const searchText = this.dataState && this.dataState.searchText;\n\n if (searchText) {\n searchedItems = items.filter(function (item: SkyDataManagerDemoRow) {\n let property: keyof typeof item;\n\n for (property in item) {\n if (\n Object.prototype.hasOwnProperty.call(item, property) &&\n (property === 'name' || property === 'description')\n ) {\n const propertyText = item[property].toLowerCase();\n if (propertyText.indexOf(searchText) > -1) {\n return true;\n }\n }\n }\n\n return false;\n });\n }\n return searchedItems;\n }\n\n public filterItems(items: SkyDataManagerDemoRow[]): SkyDataManagerDemoRow[] {\n let filteredItems = items;\n const filterData = this.dataState && this.dataState.filterData;\n\n if (filterData && filterData.filters) {\n const filters = filterData.filters;\n filteredItems = items.filter((item: SkyDataManagerDemoRow) => {\n return (\n ((filters.hideOrange && item.color !== 'orange') ||\n !filters.hideOrange) &&\n ((filters.type !== 'any' && item.type === filters.type) ||\n !filters.type ||\n filters.type === 'any')\n );\n });\n }\n\n return filteredItems;\n }\n}\n"
|
|
4882
4882
|
},
|
|
4883
4883
|
{
|
|
4884
4884
|
"fileName": "data-view-repeater.component.html",
|
|
@@ -4888,7 +4888,7 @@
|
|
|
4888
4888
|
{
|
|
4889
4889
|
"fileName": "data-view-repeater.component.ts",
|
|
4890
4890
|
"filePath": "/projects/data-manager/documentation/code-examples/data-manager/basic/data-view-repeater.component.ts",
|
|
4891
|
-
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n Input,\n OnInit,\n} from '@angular/core';\nimport {\n SkyDataManagerService,\n SkyDataManagerState,\n SkyDataViewConfig,\n} from '@skyux/data-manager';\n\nimport {
|
|
4891
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n Input,\n OnInit,\n} from '@angular/core';\nimport {\n SkyDataManagerService,\n SkyDataManagerState,\n SkyDataViewConfig,\n} from '@skyux/data-manager';\n\nimport { SkyDataManagerDemoRow } from './data-manager-demo-data';\n\n@Component({\n selector: 'app-data-view-repeater-demo',\n templateUrl: './data-view-repeater.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataViewRepeaterDemoComponent implements OnInit {\n @Input()\n public items: SkyDataManagerDemoRow[] = [];\n\n public dataState = new SkyDataManagerState({});\n\n public displayedItems: SkyDataManagerDemoRow[] = [];\n\n public isActive = false;\n\n public viewId = 'repeaterView';\n\n public viewConfig: SkyDataViewConfig = {\n id: this.viewId,\n name: 'Repeater View',\n icon: 'list',\n searchEnabled: true,\n filterButtonEnabled: true,\n multiselectToolbarEnabled: true,\n onClearAllClick: this.clearAll.bind(this),\n onSelectAllClick: this.selectAll.bind(this),\n };\n\n constructor(\n private changeDetector: ChangeDetectorRef,\n private dataManagerService: SkyDataManagerService\n ) {}\n\n public ngOnInit(): void {\n this.displayedItems = this.items;\n\n this.dataManagerService.initDataView(this.viewConfig);\n\n this.dataManagerService\n .getDataStateUpdates(this.viewId)\n .subscribe((state) => {\n this.dataState = state;\n this.updateData();\n });\n\n this.dataManagerService.getActiveViewIdUpdates().subscribe((id) => {\n this.isActive = id === this.viewId;\n this.changeDetector.detectChanges();\n });\n }\n\n public updateData(): void {\n const selectedIds = this.dataState.selectedIds || [];\n this.items.forEach((item) => {\n item.selected = selectedIds.indexOf(item.id) !== -1;\n });\n this.displayedItems = this.filterItems(this.searchItems(this.items));\n\n if (this.dataState.onlyShowSelected) {\n this.displayedItems = this.displayedItems.filter((item) => item.selected);\n }\n\n this.changeDetector.detectChanges();\n }\n\n public searchItems(items: SkyDataManagerDemoRow[]): SkyDataManagerDemoRow[] {\n let searchedItems = items;\n const searchText =\n this.dataState && this.dataState.searchText?.toUpperCase();\n\n if (searchText) {\n searchedItems = items.filter(function (item: SkyDataManagerDemoRow) {\n let property: keyof typeof item;\n\n for (property in item) {\n if (\n Object.prototype.hasOwnProperty.call(item, property) &&\n (property === 'name' || property === 'description')\n ) {\n const propertyText = item[property].toUpperCase();\n if (propertyText.indexOf(searchText) > -1) {\n return true;\n }\n }\n }\n\n return false;\n });\n }\n return searchedItems;\n }\n\n public filterItems(items: SkyDataManagerDemoRow[]): SkyDataManagerDemoRow[] {\n let filteredItems = items;\n const filterData = this.dataState && this.dataState.filterData;\n\n if (filterData && filterData.filters) {\n const filters = filterData.filters;\n filteredItems = items.filter((item: SkyDataManagerDemoRow) => {\n if (\n ((filters.hideOrange && item.color !== 'orange') ||\n !filters.hideOrange) &&\n ((filters.type !== 'any' && item.type === filters.type) ||\n !filters.type ||\n filters.type === 'any')\n ) {\n return true;\n }\n return false;\n });\n }\n\n return filteredItems;\n }\n\n public selectAll(): void {\n const selectedIds = this.dataState.selectedIds || [];\n\n this.displayedItems.forEach((item) => {\n if (!item.selected) {\n item.selected = true;\n selectedIds.push(item.id);\n }\n });\n\n this.dataState.selectedIds = selectedIds;\n this.dataManagerService.updateDataState(this.dataState, this.viewId);\n this.changeDetector.markForCheck();\n }\n\n public clearAll(): void {\n const selectedIds = this.dataState.selectedIds || [];\n\n this.displayedItems.forEach((item) => {\n if (item.selected) {\n const itemIndex = selectedIds.indexOf(item.id);\n item.selected = false;\n selectedIds.splice(itemIndex, 1);\n }\n });\n\n if (this.dataState.onlyShowSelected) {\n this.displayedItems = [];\n }\n\n this.dataState.selectedIds = selectedIds;\n this.dataManagerService.updateDataState(this.dataState, this.viewId);\n this.changeDetector.markForCheck();\n }\n\n public onItemSelect(isSelected: boolean, item: SkyDataManagerDemoRow): void {\n const selectedItems = this.dataState.selectedIds || [];\n const itemIndex = selectedItems.indexOf(item.id);\n\n if (isSelected && itemIndex === -1) {\n selectedItems.push(item.id);\n } else if (!isSelected && itemIndex !== -1) {\n selectedItems.splice(itemIndex, 1);\n }\n\n this.dataState.selectedIds = selectedItems;\n this.dataManagerService.updateDataState(this.dataState, this.viewId);\n if (this.dataState.onlyShowSelected && this.displayedItems) {\n this.displayedItems = this.displayedItems.filter((itm) => itm.selected);\n this.changeDetector.markForCheck();\n }\n }\n}\n"
|
|
4892
4892
|
}
|
|
4893
4893
|
]
|
|
4894
4894
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/data-manager",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.4.0",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -35,14 +35,14 @@
|
|
|
35
35
|
"@angular/common": "^14.2.11",
|
|
36
36
|
"@angular/core": "^14.2.11",
|
|
37
37
|
"@angular/forms": "^14.2.11",
|
|
38
|
-
"@skyux/core": "7.
|
|
39
|
-
"@skyux/forms": "7.
|
|
40
|
-
"@skyux/i18n": "7.
|
|
41
|
-
"@skyux/indicators": "7.
|
|
42
|
-
"@skyux/layout": "7.
|
|
43
|
-
"@skyux/lists": "7.
|
|
44
|
-
"@skyux/lookup": "7.
|
|
45
|
-
"@skyux/modals": "7.
|
|
38
|
+
"@skyux/core": "7.4.0",
|
|
39
|
+
"@skyux/forms": "7.4.0",
|
|
40
|
+
"@skyux/i18n": "7.4.0",
|
|
41
|
+
"@skyux/indicators": "7.4.0",
|
|
42
|
+
"@skyux/layout": "7.4.0",
|
|
43
|
+
"@skyux/lists": "7.4.0",
|
|
44
|
+
"@skyux/lookup": "7.4.0",
|
|
45
|
+
"@skyux/modals": "7.4.0"
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
48
|
"tslib": "^2.3.1"
|