Merge pull request #5318 from vvlladd28/feature/table/hidden-cell-action-display-mode
[3.3.2] UI: Added new table settings - Hidden cell button actions display mode
This commit is contained in:
Igor Kulikov
GitHub
commit
be24f5f16b
@ -19,7 +19,7 @@
|
||||
"templateHtml": "<tb-alarms-table-widget \n [ctx]=\"ctx\">\n</tb-alarms-table-widget>",
|
||||
"templateCss": "",
|
||||
"controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n self.ctx.$scope.alarmsTableWidget.onDataUpdated();\n}\n\nself.actionSources = function() {\n return {\n 'actionCellButton': {\n name: 'widget-action.action-cell-button',\n multiple: true,\n hasShowCondition: true\n },\n 'rowClick': {\n name: 'widget-action.row-click',\n multiple: false\n }\n };\n}\n\nself.onDestroy = function() {\n}\n",
|
||||
"settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"AlarmTableSettings\",\n \"properties\": {\n \"alarmsTitle\": {\n \"title\": \"Alarms table title\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"enableSelection\": {\n \"title\": \"Enable alarms selection\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableSearch\": {\n \"title\": \"Enable alarms search\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableSelectColumnDisplay\": {\n \"title\": \"Enable select columns to display\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableFilter\": {\n \"title\": \"Enable alarm filter\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableStickyHeader\": {\n \"title\": \"Always display header\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableStickyAction\": {\n \"title\": \"Always display actions column\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"displayDetails\": {\n \"title\": \"Display alarm details\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"allowAcknowledgment\": {\n \"title\": \"Allow alarms acknowledgment\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"allowClear\": {\n \"title\": \"Allow alarms clear\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"displayPagination\": {\n \"title\": \"Display pagination\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"defaultPageSize\": {\n \"title\": \"Default page size\",\n \"type\": \"number\",\n \"default\": 10\n },\n \"defaultSortOrder\": {\n \"title\": \"Default sort order\",\n \"type\": \"string\",\n \"default\": \"-createdTime\"\n },\n \"useRowStyleFunction\": {\n \"title\": \"Use row style function\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"rowStyleFunction\": {\n \"title\": \"Row style function: f(alarm, ctx)\",\n \"type\": \"string\",\n \"default\": \"\"\n }\n },\n \"required\": []\n },\n \"form\": [\n \"alarmsTitle\",\n \"enableSelection\",\n \"enableSearch\",\n \"enableSelectColumnDisplay\",\n \"enableFilter\",\n \"enableStickyHeader\",\n \"enableStickyAction\",\n \"displayDetails\",\n \"allowAcknowledgment\",\n \"allowClear\",\n \"displayPagination\",\n \"defaultPageSize\",\n \"defaultSortOrder\",\n \"useRowStyleFunction\",\n {\n \"key\": \"rowStyleFunction\",\n \"type\": \"javascript\",\n \"condition\": \"model.useRowStyleFunction === true\"\n }\n ]\n}",
|
||||
"settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"AlarmTableSettings\",\n \"properties\": {\n \"alarmsTitle\": {\n \"title\": \"Alarms table title\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"enableSelection\": {\n \"title\": \"Enable alarms selection\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableSearch\": {\n \"title\": \"Enable alarms search\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableSelectColumnDisplay\": {\n \"title\": \"Enable select columns to display\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableFilter\": {\n \"title\": \"Enable alarm filter\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableStickyHeader\": {\n \"title\": \"Always display header\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableStickyAction\": {\n \"title\": \"Always display actions column\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"reserveSpaceForHiddenAction\": {\n \"title\": \"Hidden cell button actions display mode\",\n \"type\": \"string\",\n \"default\": \"true\"\n },\n \"displayDetails\": {\n \"title\": \"Display alarm details\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"allowAcknowledgment\": {\n \"title\": \"Allow alarms acknowledgment\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"allowClear\": {\n \"title\": \"Allow alarms clear\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"displayPagination\": {\n \"title\": \"Display pagination\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"defaultPageSize\": {\n \"title\": \"Default page size\",\n \"type\": \"number\",\n \"default\": 10\n },\n \"defaultSortOrder\": {\n \"title\": \"Default sort order\",\n \"type\": \"string\",\n \"default\": \"-createdTime\"\n },\n \"useRowStyleFunction\": {\n \"title\": \"Use row style function\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"rowStyleFunction\": {\n \"title\": \"Row style function: f(alarm, ctx)\",\n \"type\": \"string\",\n \"default\": \"\"\n }\n },\n \"required\": []\n },\n \"form\": [\n \"alarmsTitle\",\n \"enableSelection\",\n \"enableSearch\",\n \"enableSelectColumnDisplay\",\n \"enableFilter\",\n \"enableStickyHeader\",\n \"enableStickyAction\",\n {\n \"key\": \"reserveSpaceForHiddenAction\",\n \"type\": \"rc-select\",\n \"multiple\": false,\n \"items\": [\n {\n \"value\": \"true\",\n \"label\": \"Show empty space instead of hidden cell button action\"\n },\n {\n \"value\": \"false\",\n \"label\": \"Don't reserve space for hidden action buttons\"\n }\n ]\n },\n \"displayDetails\",\n \"allowAcknowledgment\",\n \"allowClear\",\n \"displayPagination\",\n \"defaultPageSize\",\n \"defaultSortOrder\",\n \"useRowStyleFunction\",\n {\n \"key\": \"rowStyleFunction\",\n \"type\": \"javascript\",\n \"condition\": \"model.useRowStyleFunction === true\"\n }\n ]\n}",
|
||||
"dataKeySettingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"DataKeySettings\",\n \"properties\": {\n \"columnWidth\": {\n \"title\": \"Column width (px or %)\",\n \"type\": \"string\",\n \"default\": \"0px\"\n },\n \"useCellStyleFunction\": {\n \"title\": \"Use cell style function\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"cellStyleFunction\": {\n \"title\": \"Cell style function: f(value, alarm, ctx)\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"useCellContentFunction\": {\n \"title\": \"Use cell content function\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"cellContentFunction\": {\n \"title\": \"Cell content function: f(value, alarm, ctx)\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"defaultColumnVisibility\": {\n \"title\": \"Default column visibility\",\n \"type\": \"string\",\n \"default\": \"visible\"\n },\n \"columnSelectionToDisplay\": {\n \"title\": \"Column selection in 'Columns to Display'\",\n \"type\": \"string\",\n \"default\": \"enabled\"\n }\n },\n \"required\": []\n },\n \"form\": [\n \"columnWidth\",\n \"useCellStyleFunction\",\n {\n \"key\": \"cellStyleFunction\",\n \"type\": \"javascript\",\n \"condition\": \"model.useCellStyleFunction === true\"\n },\n \"useCellContentFunction\",\n {\n \"key\": \"cellContentFunction\",\n \"type\": \"javascript\",\n \"condition\": \"model.useCellContentFunction === true\"\n },\n {\n \"key\": \"defaultColumnVisibility\",\n \"type\": \"rc-select\",\n \"multiple\": false,\n \"items\": [\n {\n \"value\": \"visible\",\n \"label\": \"Visible\"\n },\n {\n \"value\": \"hidden\",\n \"label\": \"Hidden\"\n } \n ]\n },\n {\n \"key\": \"columnSelectionToDisplay\",\n \"type\": \"rc-select\",\n \"multiple\": false,\n \"items\": [\n {\n \"value\": \"enabled\",\n \"label\": \"Enabled\"\n },\n {\n \"value\": \"disabled\",\n \"label\": \"Disabled\"\n } \n ]\n }\n ]\n}",
|
||||
"defaultConfig": "{\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":86400000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{\"enableSelection\":true,\"enableSearch\":true,\"displayDetails\":true,\"allowAcknowledgment\":true,\"allowClear\":true,\"displayPagination\":true,\"defaultPageSize\":10,\"defaultSortOrder\":\"-createdTime\",\"enableSelectColumnDisplay\":true,\"enableStickyAction\":false,\"enableFilter\":true},\"title\":\"Alarms table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"alarmSource\":{\"type\":\"function\",\"dataKeys\":[{\"name\":\"createdTime\",\"type\":\"alarm\",\"label\":\"Created time\",\"color\":\"#2196f3\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.021092237451093787},{\"name\":\"originator\",\"type\":\"alarm\",\"label\":\"Originator\",\"color\":\"#4caf50\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.2780007688856758},{\"name\":\"type\",\"type\":\"alarm\",\"label\":\"Type\",\"color\":\"#f44336\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.7323586880398418},{\"name\":\"severity\",\"type\":\"alarm\",\"label\":\"Severity\",\"color\":\"#ffc107\",\"settings\":{\"useCellStyleFunction\":false,\"useCellContentFunction\":false},\"_hash\":0.09927019860088193},{\"name\":\"status\",\"type\":\"alarm\",\"label\":\"Status\",\"color\":\"#607d8b\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.6588418951443418}],\"entityAliasId\":null,\"name\":\"alarms\"},\"alarmSearchStatus\":\"ANY\",\"alarmsPollingInterval\":5,\"showTitleIcon\":false,\"titleIcon\":\"more_horiz\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"titleTooltip\":\"\",\"widgetStyle\":{},\"displayTimewindow\":true,\"actions\":{},\"alarmStatusList\":[],\"alarmSeverityList\":[],\"alarmTypeList\":[],\"searchPropagatedAlarms\":false}"
|
||||
}
|
||||
|
||||
@ -55,7 +55,7 @@
|
||||
"templateHtml": "<tb-timeseries-table-widget \n [ctx]=\"ctx\">\n</tb-timeseries-table-widget>",
|
||||
"templateCss": "",
|
||||
"controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n self.ctx.$scope.timeseriesTableWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n return {\n ignoreDataUpdateOnIntervalTick: true\n };\n}\n\nself.actionSources = function() {\n return {\n 'actionCellButton': {\n name: 'widget-action.action-cell-button',\n multiple: true,\n hasShowCondition: true\n },\n 'rowClick': {\n name: 'widget-action.row-click',\n multiple: false\n }\n };\n}\n\nself.onDestroy = function() {\n}",
|
||||
"settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"TimeseriesTableSettings\",\n \"properties\": {\n \"enableSearch\": {\n \"title\": \"Enable search\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableStickyHeader\": {\n \"title\": \"Always display header\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableStickyAction\": {\n \"title\": \"Always display actions column\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"showTimestamp\": {\n \"title\": \"Display timestamp column\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"showMilliseconds\": {\n \"title\": \"Display timestamp milliseconds\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"displayPagination\": {\n \"title\": \"Display pagination\",\n \"type\": \"boolean\",\n \"default\": true\n }, \n \"useEntityLabel\": {\n \"title\": \"Use entity label in tab name\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"defaultPageSize\": {\n \"title\": \"Default page size\",\n \"type\": \"number\",\n \"default\": 10\n },\n \"hideEmptyLines\": {\n \"title\": \"Hide empty lines\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"disableStickyHeader\": {\n \"title\": \"Disable sticky header\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"useRowStyleFunction\": {\n \"title\": \"Use row style function\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"rowStyleFunction\": {\n \"title\": \"Row style function: f(rowData, ctx)\",\n \"type\": \"string\",\n \"default\": \"\"\n }\n },\n \"required\": []\n },\n \"form\": [\n \"enableSearch\",\n \"enableStickyHeader\",\n \"enableStickyAction\",\n \"showTimestamp\",\n \"showMilliseconds\",\n \"displayPagination\",\n \"useEntityLabel\",\n \"defaultPageSize\",\n \"identifyDeviceSelector\",\n \"hideEmptyLines\",\n \"useRowStyleFunction\",\n {\n \"key\": \"rowStyleFunction\",\n \"type\": \"javascript\",\n \"condition\": \"model.useRowStyleFunction === true\"\n }\n ]\n}",
|
||||
"settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"TimeseriesTableSettings\",\n \"properties\": {\n \"enableSearch\": {\n \"title\": \"Enable search\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableStickyHeader\": {\n \"title\": \"Always display header\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableStickyAction\": {\n \"title\": \"Always display actions column\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"reserveSpaceForHiddenAction\": {\n \"title\": \"Hidden cell button actions display mode\",\n \"type\": \"string\",\n \"default\": \"true\"\n },\n \"showTimestamp\": {\n \"title\": \"Display timestamp column\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"showMilliseconds\": {\n \"title\": \"Display timestamp milliseconds\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"displayPagination\": {\n \"title\": \"Display pagination\",\n \"type\": \"boolean\",\n \"default\": true\n }, \n \"useEntityLabel\": {\n \"title\": \"Use entity label in tab name\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"defaultPageSize\": {\n \"title\": \"Default page size\",\n \"type\": \"number\",\n \"default\": 10\n },\n \"hideEmptyLines\": {\n \"title\": \"Hide empty lines\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"disableStickyHeader\": {\n \"title\": \"Disable sticky header\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"useRowStyleFunction\": {\n \"title\": \"Use row style function\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"rowStyleFunction\": {\n \"title\": \"Row style function: f(rowData, ctx)\",\n \"type\": \"string\",\n \"default\": \"\"\n }\n },\n \"required\": []\n },\n \"form\": [\n \"enableSearch\",\n \"enableStickyHeader\",\n \"enableStickyAction\",\n {\n \"key\": \"reserveSpaceForHiddenAction\",\n \"type\": \"rc-select\",\n \"multiple\": false,\n \"items\": [\n {\n \"value\": \"true\",\n \"label\": \"Show empty space instead of hidden cell button action\"\n },\n {\n \"value\": \"false\",\n \"label\": \"Don't reserve space for hidden action buttons\"\n }\n ]\n },\n \"showTimestamp\",\n \"showMilliseconds\",\n \"displayPagination\",\n \"useEntityLabel\",\n \"defaultPageSize\",\n \"identifyDeviceSelector\",\n \"hideEmptyLines\",\n \"useRowStyleFunction\",\n {\n \"key\": \"rowStyleFunction\",\n \"type\": \"javascript\",\n \"condition\": \"model.useRowStyleFunction === true\"\n }\n ]\n}",
|
||||
"dataKeySettingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"DataKeySettings\",\n \"properties\": {\n \"useCellStyleFunction\": {\n \"title\": \"Use cell style function\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"cellStyleFunction\": {\n \"title\": \"Cell style function: f(value, rowData, ctx)\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"useCellContentFunction\": {\n \"title\": \"Use cell content function\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"cellContentFunction\": {\n \"title\": \"Cell content function: f(value, rowData, ctx)\",\n \"type\": \"string\",\n \"default\": \"\"\n }\n },\n \"required\": []\n },\n \"form\": [\n \"useCellStyleFunction\",\n {\n \"key\": \"cellStyleFunction\",\n \"type\": \"javascript\",\n \"condition\": \"model.useCellStyleFunction === true\"\n },\n \"useCellContentFunction\",\n {\n \"key\": \"cellContentFunction\",\n \"type\": \"javascript\",\n \"condition\": \"model.useCellContentFunction === true\"\n }\n ]\n}",
|
||||
"defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Temperature °C\",\"color\":\"#2196f3\",\"settings\":{\"useCellStyleFunction\":true,\"cellStyleFunction\":\"if (value) {\\n var percent = (value + 60)/120 * 100;\\n var color = tinycolor.mix('blue', 'red', amount = percent);\\n color.setAlpha(.5);\\n return {\\n paddingLeft: '20px',\\n color: '#ffffff',\\n background: color.toRgbString(),\\n fontSize: '18px'\\n };\\n} else {\\n return {};\\n}\"},\"_hash\":0.8587686344902596,\"funcBody\":\"var value = prevValue + Math.random() * 40 - 20;\\nvar multiplier = Math.pow(10, 1 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -60) {\\n\\tvalue = -60;\\n} else if (value > 60) {\\n\\tvalue = 60;\\n}\\nreturn value;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Humidity, %\",\"color\":\"#ffc107\",\"settings\":{\"useCellStyleFunction\":true,\"cellStyleFunction\":\"if (value) {\\n var percent = value;\\n var backgroundColor = tinycolor('blue');\\n backgroundColor.setAlpha(value/100);\\n var color = 'blue';\\n if (value > 50) {\\n color = 'white';\\n }\\n \\n return {\\n paddingLeft: '20px',\\n color: color,\\n background: backgroundColor.toRgbString(),\\n fontSize: '18px'\\n };\\n} else {\\n return {};\\n}\",\"useCellContentFunction\":false},\"_hash\":0.12775350966079668,\"funcBody\":\"var value = prevValue + Math.random() * 20 - 10;\\nvar multiplier = Math.pow(10, 1 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < 5) {\\n\\tvalue = 5;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":60000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"showTimestamp\":true,\"displayPagination\":true,\"defaultPageSize\":10},\"title\":\"Timeseries table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"widgetStyle\":{},\"actions\":{},\"showTitleIcon\":false,\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\"}"
|
||||
}
|
||||
@ -127,7 +127,7 @@
|
||||
"templateHtml": "<tb-entities-table-widget \n [ctx]=\"ctx\">\n</tb-entities-table-widget>",
|
||||
"templateCss": "",
|
||||
"controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n self.ctx.$scope.entitiesTableWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n hasDataPageLink: true,\n warnOnPageDataOverflow: false,\n dataKeysOptional: true\n };\n}\n\nself.actionSources = function() {\n return {\n 'actionCellButton': {\n name: 'widget-action.action-cell-button',\n multiple: true,\n hasShowCondition: true\n },\n 'rowClick': {\n name: 'widget-action.row-click',\n multiple: false\n },\n 'rowDoubleClick': {\n name: 'widget-action.row-double-click',\n multiple: false\n }\n };\n}\n\nself.onDestroy = function() {\n}\n",
|
||||
"settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"EntitiesTableSettings\",\n \"properties\": {\n \"entitiesTitle\": {\n \"title\": \"Entities table title\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"enableSearch\": {\n \"title\": \"Enable entities search\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableSelectColumnDisplay\": {\n \"title\": \"Enable select columns to display\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableStickyHeader\": {\n \"title\": \"Always display header\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableStickyAction\": {\n \"title\": \"Always display actions column\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"displayEntityName\": {\n \"title\": \"Display entity name column\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"entityNameColumnTitle\": {\n \"title\": \"Entity name column title\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"displayEntityLabel\": {\n \"title\": \"Display entity label column\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"entityLabelColumnTitle\": {\n \"title\": \"Entity label column title\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"displayEntityType\": {\n \"title\": \"Display entity type column\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"displayPagination\": {\n \"title\": \"Display pagination\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"defaultPageSize\": {\n \"title\": \"Default page size\",\n \"type\": \"number\",\n \"default\": 10\n },\n \"defaultSortOrder\": {\n \"title\": \"Default sort order\",\n \"type\": \"string\",\n \"default\": \"entityName\"\n },\n \"useRowStyleFunction\": {\n \"title\": \"Use row style function\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"rowStyleFunction\": {\n \"title\": \"Row style function: f(entity, ctx)\",\n \"type\": \"string\",\n \"default\": \"\"\n }\n },\n \"required\": []\n },\n \"form\": [\n \"entitiesTitle\",\n \"enableSearch\",\n \"enableSelectColumnDisplay\",\n \"enableStickyHeader\",\n \"enableStickyAction\",\n \"displayEntityName\",\n \"entityNameColumnTitle\",\n \"displayEntityLabel\",\n \"entityLabelColumnTitle\",\n \"displayEntityType\",\n \"displayPagination\",\n \"defaultPageSize\",\n \"defaultSortOrder\",\n \"useRowStyleFunction\",\n {\n \"key\": \"rowStyleFunction\",\n \"type\": \"javascript\",\n \"condition\": \"model.useRowStyleFunction === true\"\n }\n ]\n}",
|
||||
"settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"EntitiesTableSettings\",\n \"properties\": {\n \"entitiesTitle\": {\n \"title\": \"Entities table title\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"enableSearch\": {\n \"title\": \"Enable entities search\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableSelectColumnDisplay\": {\n \"title\": \"Enable select columns to display\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableStickyHeader\": {\n \"title\": \"Always display header\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableStickyAction\": {\n \"title\": \"Always display actions column\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"reserveSpaceForHiddenAction\": {\n \"title\": \"Hidden cell button actions display mode\",\n \"type\": \"string\",\n \"default\": \"true\"\n },\n \"displayEntityName\": {\n \"title\": \"Display entity name column\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"entityNameColumnTitle\": {\n \"title\": \"Entity name column title\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"displayEntityLabel\": {\n \"title\": \"Display entity label column\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"entityLabelColumnTitle\": {\n \"title\": \"Entity label column title\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"displayEntityType\": {\n \"title\": \"Display entity type column\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"displayPagination\": {\n \"title\": \"Display pagination\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"defaultPageSize\": {\n \"title\": \"Default page size\",\n \"type\": \"number\",\n \"default\": 10\n },\n \"defaultSortOrder\": {\n \"title\": \"Default sort order\",\n \"type\": \"string\",\n \"default\": \"entityName\"\n },\n \"useRowStyleFunction\": {\n \"title\": \"Use row style function\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"rowStyleFunction\": {\n \"title\": \"Row style function: f(entity, ctx)\",\n \"type\": \"string\",\n \"default\": \"\"\n }\n },\n \"required\": []\n },\n \"form\": [\n \"entitiesTitle\",\n \"enableSearch\",\n \"enableSelectColumnDisplay\",\n \"enableStickyHeader\",\n \"enableStickyAction\",\n {\n \"key\": \"reserveSpaceForHiddenAction\",\n \"type\": \"rc-select\",\n \"multiple\": false,\n \"items\": [\n {\n \"value\": \"true\",\n \"label\": \"Show empty space instead of hidden cell button action\"\n },\n {\n \"value\": \"false\",\n \"label\": \"Don't reserve space for hidden action buttons\"\n }\n ]\n },\n \"displayEntityName\",\n \"entityNameColumnTitle\",\n \"displayEntityLabel\",\n \"entityLabelColumnTitle\",\n \"displayEntityType\",\n \"displayPagination\",\n \"defaultPageSize\",\n \"defaultSortOrder\",\n \"useRowStyleFunction\",\n {\n \"key\": \"rowStyleFunction\",\n \"type\": \"javascript\",\n \"condition\": \"model.useRowStyleFunction === true\"\n }\n ]\n}",
|
||||
"dataKeySettingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"DataKeySettings\",\n \"properties\": {\n \"columnWidth\": {\n \"title\": \"Column width (px or %)\",\n \"type\": \"string\",\n \"default\": \"0px\"\n },\n \"useCellStyleFunction\": {\n \"title\": \"Use cell style function\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"cellStyleFunction\": {\n \"title\": \"Cell style function: f(value, entity, ctx)\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"useCellContentFunction\": {\n \"title\": \"Use cell content function\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"cellContentFunction\": {\n \"title\": \"Cell content function: f(value, entity, ctx)\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"defaultColumnVisibility\": {\n \"title\": \"Default column visibility\",\n \"type\": \"string\",\n \"default\": \"visible\"\n },\n \"columnSelectionToDisplay\": {\n \"title\": \"Column selection in 'Columns to Display'\",\n \"type\": \"string\",\n \"default\": \"enabled\"\n }\n },\n \"required\": []\n },\n \"form\": [\n \"columnWidth\",\n \"useCellStyleFunction\",\n {\n \"key\": \"cellStyleFunction\",\n \"type\": \"javascript\",\n \"condition\": \"model.useCellStyleFunction === true\"\n },\n \"useCellContentFunction\",\n {\n \"key\": \"cellContentFunction\",\n \"type\": \"javascript\",\n \"condition\": \"model.useCellContentFunction === true\"\n },\n {\n \"key\": \"defaultColumnVisibility\",\n \"type\": \"rc-select\",\n \"multiple\": false,\n \"items\": [\n {\n \"value\": \"visible\",\n \"label\": \"Visible\"\n },\n {\n \"value\": \"hidden\",\n \"label\": \"Hidden\"\n } \n ]\n },\n {\n \"key\": \"columnSelectionToDisplay\",\n \"type\": \"rc-select\",\n \"multiple\": false,\n \"items\": [\n {\n \"value\": \"enabled\",\n \"label\": \"Enabled\"\n },\n {\n \"value\": \"disabled\",\n \"label\": \"Disabled\"\n } \n ]\n }\n ]\n}",
|
||||
"defaultConfig": "{\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":86400000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{\"enableSelection\":true,\"enableSearch\":true,\"displayDetails\":true,\"displayPagination\":true,\"defaultPageSize\":10,\"defaultSortOrder\":\"entityName\",\"displayEntityName\":true,\"displayEntityType\":true},\"title\":\"Entities table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"datasources\":[{\"type\":\"function\",\"name\":\"Simulated\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Sin\",\"color\":\"#2196f3\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.472295003170325,\"funcBody\":\"return Math.round(1000*Math.sin(time/5000));\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Cos\",\"color\":\"#4caf50\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.8926244886945558,\"funcBody\":\"return Math.round(1000*Math.cos(time/5000));\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#f44336\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.6401141393938932,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}]}"
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -55,7 +55,7 @@
|
||||
formControlName="icon">
|
||||
</tb-material-icon-select>
|
||||
<mat-checkbox *ngIf="displayShowWidgetActionForm()" formControlName="useShowWidgetActionFunction" style="padding-bottom: 16px;">
|
||||
{{ 'widget-config.use-show-widget-action-function' | translate }}
|
||||
{{ 'widget-config.show-hide-action-using-function' | translate }}
|
||||
</mat-checkbox>
|
||||
<tb-js-func *ngIf="displayShowWidgetActionForm() && widgetActionFormGroup.get('useShowWidgetActionFunction').value"
|
||||
formControlName="showWidgetActionFunction"
|
||||
|
||||
@ -87,13 +87,13 @@
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions" [stickyEnd]="enableStickyAction">
|
||||
<mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (countCellButtonAction * 40) + 'px',
|
||||
maxWidth: (countCellButtonAction * 40) + 'px',
|
||||
width: (countCellButtonAction * 40) + 'px' }">
|
||||
<mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (alarmsDatasource.countCellButtonAction * 40) + 'px',
|
||||
maxWidth: (alarmsDatasource.countCellButtonAction * 40) + 'px',
|
||||
width: (alarmsDatasource.countCellButtonAction * 40) + 'px' }">
|
||||
</mat-header-cell>
|
||||
<mat-cell *matCellDef="let alarm" [ngStyle.gt-md]="{ minWidth: (countCellButtonAction * 40) + 'px',
|
||||
maxWidth: (countCellButtonAction * 40) + 'px',
|
||||
width: (countCellButtonAction * 40) + 'px' }">
|
||||
<mat-cell *matCellDef="let alarm" [ngStyle.gt-md]="{ minWidth: (alarmsDatasource.countCellButtonAction * 40) + 'px',
|
||||
maxWidth: (alarmsDatasource.countCellButtonAction * 40) + 'px',
|
||||
width: (alarmsDatasource.countCellButtonAction * 40) + 'px' }">
|
||||
<div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
|
||||
<ng-container *ngFor="let actionDescriptor of alarm.actionCellButtons; trackBy: trackByActionCellDescriptionId">
|
||||
<span *ngIf="!actionDescriptor.icon" style="width: 40px;"></span>
|
||||
|
||||
@ -121,6 +121,7 @@ import {
|
||||
AlarmFilterPanelData
|
||||
} from '@home/components/widget/lib/alarm-filter-panel.component';
|
||||
import { entityFields } from '@shared/models/entity.models';
|
||||
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
||||
|
||||
interface AlarmsTableWidgetSettings extends TableWidgetSettings {
|
||||
alarmsTitle: string;
|
||||
@ -165,7 +166,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
|
||||
public columns: Array<EntityColumn> = [];
|
||||
public displayedColumns: string[] = [];
|
||||
public alarmsDatasource: AlarmsDatasource;
|
||||
public countCellButtonAction: number;
|
||||
private setCellButtonAction: boolean;
|
||||
|
||||
private cellContentCache: Array<any> = [];
|
||||
private cellStyleCache: Array<any> = [];
|
||||
@ -439,9 +440,9 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
|
||||
);
|
||||
}
|
||||
|
||||
this.countCellButtonAction = actionCellDescriptors.length + this.ctx.actionsApi.getActionDescriptors('actionCellButton').length;
|
||||
this.setCellButtonAction = !!(actionCellDescriptors.length + this.ctx.actionsApi.getActionDescriptors('actionCellButton').length);
|
||||
|
||||
if (this.countCellButtonAction) {
|
||||
if (this.setCellButtonAction) {
|
||||
this.displayedColumns.push('actions');
|
||||
}
|
||||
|
||||
@ -500,7 +501,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
|
||||
if (this.enableSelection) {
|
||||
this.displayedColumns.unshift('select');
|
||||
}
|
||||
if (this.countCellButtonAction) {
|
||||
if (this.setCellButtonAction) {
|
||||
this.displayedColumns.push('actions');
|
||||
}
|
||||
this.clearCache();
|
||||
@ -987,10 +988,12 @@ class AlarmsDatasource implements DataSource<AlarmDataInfo> {
|
||||
private currentAlarm: AlarmDataInfo = null;
|
||||
|
||||
public dataLoading = true;
|
||||
public countCellButtonAction = 0;
|
||||
|
||||
private appliedPageLink: AlarmDataPageLink;
|
||||
private appliedSortOrderLabel: string;
|
||||
|
||||
private reserveSpaceForHiddenAction = true;
|
||||
private cellButtonActions: TableCellButtonActionDescriptor[];
|
||||
private readonly usedShowCellActionFunction: boolean;
|
||||
|
||||
@ -1001,6 +1004,9 @@ class AlarmsDatasource implements DataSource<AlarmDataInfo> {
|
||||
actionCellDescriptors: AlarmWidgetActionDescriptor[]) {
|
||||
this.cellButtonActions = actionCellDescriptors.concat(getTableCellButtonActions(widgetContext));
|
||||
this.usedShowCellActionFunction = this.cellButtonActions.some(action => action.useShowActionCellButtonFunction);
|
||||
if (this.widgetContext.settings.reserveSpaceForHiddenAction) {
|
||||
this.reserveSpaceForHiddenAction = coerceBooleanProperty(this.widgetContext.settings.reserveSpaceForHiddenAction);
|
||||
}
|
||||
}
|
||||
|
||||
connect(collectionViewer: CollectionViewer): Observable<AlarmDataInfo[] | ReadonlyArray<AlarmDataInfo>> {
|
||||
@ -1032,10 +1038,19 @@ class AlarmsDatasource implements DataSource<AlarmDataInfo> {
|
||||
updateAlarms() {
|
||||
const subscriptionAlarms = this.subscription.alarms;
|
||||
let alarms = new Array<AlarmDataInfo>();
|
||||
let maxCellButtonAction = 0;
|
||||
let isEmptySelection = false;
|
||||
const dynamicWidthCellButtonActions = this.usedShowCellActionFunction && !this.reserveSpaceForHiddenAction;
|
||||
subscriptionAlarms.data.forEach((alarmData) => {
|
||||
alarms.push(this.alarmDataToInfo(alarmData));
|
||||
const alarm = this.alarmDataToInfo(alarmData);
|
||||
alarms.push(alarm);
|
||||
if (dynamicWidthCellButtonActions && alarm.actionCellButtons.length > maxCellButtonAction) {
|
||||
maxCellButtonAction = alarm.actionCellButtons.length;
|
||||
}
|
||||
});
|
||||
if (!dynamicWidthCellButtonActions && this.cellButtonActions.length && alarms.length) {
|
||||
maxCellButtonAction = alarms[0].actionCellButtons.length;
|
||||
}
|
||||
if (this.appliedSortOrderLabel && this.appliedSortOrderLabel.length) {
|
||||
const asc = this.appliedPageLink.sortOrder.direction === Direction.ASC;
|
||||
alarms = alarms.sort((a, b) => sortItems(a, b, this.appliedSortOrderLabel, asc));
|
||||
@ -1060,6 +1075,7 @@ class AlarmsDatasource implements DataSource<AlarmDataInfo> {
|
||||
}
|
||||
this.alarmsSubject.next(alarms);
|
||||
this.pageDataSubject.next(alarmsPageData);
|
||||
this.countCellButtonAction = maxCellButtonAction;
|
||||
this.dataLoading = false;
|
||||
});
|
||||
}
|
||||
@ -1083,7 +1099,8 @@ class AlarmsDatasource implements DataSource<AlarmDataInfo> {
|
||||
});
|
||||
if (this.cellButtonActions.length) {
|
||||
if (this.usedShowCellActionFunction) {
|
||||
alarm.actionCellButtons = prepareTableCellButtonActions(this.widgetContext, this.cellButtonActions, alarm);
|
||||
alarm.actionCellButtons = prepareTableCellButtonActions(this.widgetContext, this.cellButtonActions,
|
||||
alarm, this.reserveSpaceForHiddenAction);
|
||||
alarm.hasActions = checkHasActions(alarm.actionCellButtons);
|
||||
} else {
|
||||
alarm.actionCellButtons = this.cellButtonActions;
|
||||
|
||||
@ -48,13 +48,13 @@
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions" [stickyEnd]="enableStickyAction">
|
||||
<mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (countCellButtonAction * 40) + 'px',
|
||||
maxWidth: (countCellButtonAction * 40) + 'px',
|
||||
width: (countCellButtonAction * 40) + 'px' }">
|
||||
<mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (entityDatasource.countCellButtonAction * 40) + 'px',
|
||||
maxWidth: (entityDatasource.countCellButtonAction * 40) + 'px',
|
||||
width: (entityDatasource.countCellButtonAction * 40) + 'px' }">
|
||||
</mat-header-cell>
|
||||
<mat-cell *matCellDef="let entity" [ngStyle.gt-md]="{ minWidth: (countCellButtonAction * 40) + 'px',
|
||||
maxWidth: (countCellButtonAction * 40) + 'px',
|
||||
width: (countCellButtonAction * 40) + 'px' }">
|
||||
<mat-cell *matCellDef="let entity" [ngStyle.gt-md]="{ minWidth: (entityDatasource.countCellButtonAction * 40) + 'px',
|
||||
maxWidth: (entityDatasource.countCellButtonAction * 40) + 'px',
|
||||
width: (entityDatasource.countCellButtonAction * 40) + 'px' }">
|
||||
<div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
|
||||
<ng-container *ngFor="let actionDescriptor of entity.actionCellButtons; trackBy: trackByActionCellDescriptionId">
|
||||
<span *ngIf="!actionDescriptor.icon" style="width: 40px;"></span>
|
||||
|
||||
@ -105,6 +105,7 @@ import {
|
||||
import { sortItems } from '@shared/models/page/page-link';
|
||||
import { entityFields } from '@shared/models/entity.models';
|
||||
import { DatePipe } from '@angular/common';
|
||||
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
||||
|
||||
interface EntitiesTableWidgetSettings extends TableWidgetSettings {
|
||||
entitiesTitle: string;
|
||||
@ -141,7 +142,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
|
||||
public columns: Array<EntityColumn> = [];
|
||||
public displayedColumns: string[] = [];
|
||||
public entityDatasource: EntityDatasource;
|
||||
public countCellButtonAction: number;
|
||||
private setCellButtonAction: boolean;
|
||||
|
||||
private cellContentCache: Array<any> = [];
|
||||
private cellStyleCache: Array<any> = [];
|
||||
@ -249,7 +250,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
|
||||
private initializeConfig() {
|
||||
this.ctx.widgetActions = [this.searchAction, this.columnDisplayAction];
|
||||
|
||||
this.countCellButtonAction = this.ctx.actionsApi.getActionDescriptors('actionCellButton').length;
|
||||
this.setCellButtonAction = !!this.ctx.actionsApi.getActionDescriptors('actionCellButton').length;
|
||||
|
||||
if (this.settings.entitiesTitle && this.settings.entitiesTitle.length) {
|
||||
this.entitiesTitlePattern = this.utils.customTranslation(this.settings.entitiesTitle, this.settings.entitiesTitle);
|
||||
@ -430,7 +431,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
|
||||
}
|
||||
this.sortOrderProperty = sortColumn ? sortColumn.def : null;
|
||||
|
||||
if (this.countCellButtonAction) {
|
||||
if (this.setCellButtonAction) {
|
||||
this.displayedColumns.push('actions');
|
||||
}
|
||||
this.entityDatasource = new EntityDatasource(this.translate, dataKeys, this.subscription, this.ngZone, this.ctx);
|
||||
@ -474,7 +475,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
|
||||
columns,
|
||||
columnsUpdated: (newColumns) => {
|
||||
this.displayedColumns = newColumns.filter(column => column.display).map(column => column.def);
|
||||
if (this.countCellButtonAction) {
|
||||
if (this.setCellButtonAction) {
|
||||
this.displayedColumns.push('actions');
|
||||
}
|
||||
this.clearCache();
|
||||
@ -713,10 +714,12 @@ class EntityDatasource implements DataSource<EntityData> {
|
||||
private currentEntity: EntityData = null;
|
||||
|
||||
public dataLoading = true;
|
||||
public countCellButtonAction = 0;
|
||||
|
||||
private appliedPageLink: EntityDataPageLink;
|
||||
private appliedSortOrderLabel: string;
|
||||
|
||||
private reserveSpaceForHiddenAction = true;
|
||||
private cellButtonActions: TableCellButtonActionDescriptor[];
|
||||
private readonly usedShowCellActionFunction: boolean;
|
||||
|
||||
@ -729,6 +732,9 @@ class EntityDatasource implements DataSource<EntityData> {
|
||||
) {
|
||||
this.cellButtonActions = getTableCellButtonActions(widgetContext);
|
||||
this.usedShowCellActionFunction = this.cellButtonActions.some(action => action.useShowActionCellButtonFunction);
|
||||
if (this.widgetContext.settings.reserveSpaceForHiddenAction) {
|
||||
this.reserveSpaceForHiddenAction = coerceBooleanProperty(this.widgetContext.settings.reserveSpaceForHiddenAction);
|
||||
}
|
||||
}
|
||||
|
||||
connect(collectionViewer: CollectionViewer): Observable<EntityData[] | ReadonlyArray<EntityData>> {
|
||||
@ -757,13 +763,22 @@ class EntityDatasource implements DataSource<EntityData> {
|
||||
const datasourcesPageData = this.subscription.datasourcePages[0];
|
||||
const dataPageData = this.subscription.dataPages[0];
|
||||
let entities = new Array<EntityData>();
|
||||
let maxCellButtonAction = 0;
|
||||
const dynamicWidthCellButtonActions = this.usedShowCellActionFunction && !this.reserveSpaceForHiddenAction;
|
||||
datasourcesPageData.data.forEach((datasource, index) => {
|
||||
entities.push(this.datasourceToEntityData(datasource, dataPageData.data[index]));
|
||||
const entity = this.datasourceToEntityData(datasource, dataPageData.data[index]);
|
||||
entities.push(entity);
|
||||
if (dynamicWidthCellButtonActions && entity.actionCellButtons.length > maxCellButtonAction) {
|
||||
maxCellButtonAction = entity.actionCellButtons.length;
|
||||
}
|
||||
});
|
||||
if (this.appliedSortOrderLabel && this.appliedSortOrderLabel.length) {
|
||||
const asc = this.appliedPageLink.sortOrder.direction === Direction.ASC;
|
||||
entities = entities.sort((a, b) => sortItems(a, b, this.appliedSortOrderLabel, asc));
|
||||
}
|
||||
if (!dynamicWidthCellButtonActions && this.cellButtonActions.length && entities.length) {
|
||||
maxCellButtonAction = entities[0].actionCellButtons.length;
|
||||
}
|
||||
const entitiesPageData: PageData<EntityData> = {
|
||||
data: entities,
|
||||
totalPages: datasourcesPageData.totalPages,
|
||||
@ -773,6 +788,7 @@ class EntityDatasource implements DataSource<EntityData> {
|
||||
this.ngZone.run(() => {
|
||||
this.entitiesSubject.next(entities);
|
||||
this.pageDataSubject.next(entitiesPageData);
|
||||
this.countCellButtonAction = maxCellButtonAction;
|
||||
this.dataLoading = false;
|
||||
});
|
||||
}
|
||||
@ -804,7 +820,8 @@ class EntityDatasource implements DataSource<EntityData> {
|
||||
});
|
||||
if (this.cellButtonActions.length) {
|
||||
if (this.usedShowCellActionFunction) {
|
||||
entity.actionCellButtons = prepareTableCellButtonActions(this.widgetContext, this.cellButtonActions, entity);
|
||||
entity.actionCellButtons = prepareTableCellButtonActions(this.widgetContext, this.cellButtonActions,
|
||||
entity, this.reserveSpaceForHiddenAction);
|
||||
entity.hasActions = checkHasActions(entity.actionCellButtons);
|
||||
} else {
|
||||
entity.actionCellButtons = this.cellButtonActions;
|
||||
|
||||
@ -38,6 +38,7 @@ export interface TableWidgetSettings {
|
||||
defaultPageSize: number;
|
||||
useRowStyleFunction: boolean;
|
||||
rowStyleFunction?: string;
|
||||
reserveSpaceForHiddenAction?: boolean;
|
||||
}
|
||||
|
||||
export interface TableWidgetDataKeySettings {
|
||||
@ -328,9 +329,13 @@ export function checkHasActions(cellButtonActions: TableCellButtonActionDescript
|
||||
}
|
||||
|
||||
export function prepareTableCellButtonActions(widgetContext: WidgetContext, cellButtonActions: TableCellButtonActionDescriptor[],
|
||||
data: EntityData | AlarmDataInfo | FormattedData): TableCellButtonActionDescriptor[] {
|
||||
return cellButtonActions.map(action =>
|
||||
filterTableCellButtonAction(widgetContext, action, data) ? action : { id: action.id } as TableCellButtonActionDescriptor);
|
||||
data: EntityData | AlarmDataInfo | FormattedData,
|
||||
reserveSpaceForHiddenAction = true): TableCellButtonActionDescriptor[] {
|
||||
if (reserveSpaceForHiddenAction) {
|
||||
return cellButtonActions.map(action =>
|
||||
filterTableCellButtonAction(widgetContext, action, data) ? action : { id: action.id } as TableCellButtonActionDescriptor);
|
||||
}
|
||||
return cellButtonActions.filter(action => filterTableCellButtonAction(widgetContext, action, data));
|
||||
}
|
||||
|
||||
function filterTableCellButtonAction(widgetContext: WidgetContext,
|
||||
|
||||
@ -59,13 +59,13 @@
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions" [stickyEnd]="enableStickyAction">
|
||||
<mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (countCellButtonAction * 40) + 'px',
|
||||
maxWidth: (countCellButtonAction * 40) + 'px',
|
||||
width: (countCellButtonAction * 40) + 'px' }">
|
||||
<mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px',
|
||||
maxWidth: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px',
|
||||
width: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px' }">
|
||||
</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" [ngStyle.gt-md]="{ minWidth: (countCellButtonAction * 40) + 'px',
|
||||
maxWidth: (countCellButtonAction * 40) + 'px',
|
||||
width: (countCellButtonAction * 40) + 'px' }">
|
||||
<mat-cell *matCellDef="let row" [ngStyle.gt-md]="{ minWidth: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px',
|
||||
maxWidth: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px',
|
||||
width: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px' }">
|
||||
<div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
|
||||
<ng-container *ngFor="let actionDescriptor of row.actionCellButtons; trackBy: trackByActionCellDescriptionId">
|
||||
<span *ngIf="!actionDescriptor.icon" style="width: 40px;"></span>
|
||||
|
||||
@ -69,6 +69,7 @@ import { Overlay } from '@angular/cdk/overlay';
|
||||
import { SubscriptionEntityInfo } from '@core/api/widget-api.models';
|
||||
import { DatePipe } from '@angular/common';
|
||||
import { parseData } from '@home/components/widget/lib/maps/common-maps-utils';
|
||||
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
||||
|
||||
export interface TimeseriesTableWidgetSettings extends TableWidgetSettings {
|
||||
showTimestamp: boolean;
|
||||
@ -125,7 +126,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
|
||||
public textSearch: string = null;
|
||||
public sources: TimeseriesTableSource[];
|
||||
public sourceIndex: number;
|
||||
public countCellButtonAction: number;
|
||||
private setCellButtonAction: boolean;
|
||||
|
||||
private cellContentCache: Array<any> = [];
|
||||
private cellStyleCache: Array<any> = [];
|
||||
@ -211,7 +212,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
|
||||
private initialize() {
|
||||
this.ctx.widgetActions = [this.searchAction ];
|
||||
|
||||
this.countCellButtonAction = this.ctx.actionsApi.getActionDescriptors('actionCellButton').length;
|
||||
this.setCellButtonAction = !!this.ctx.actionsApi.getActionDescriptors('actionCellButton').length;
|
||||
|
||||
this.searchAction.show = isDefined(this.settings.enableSearch) ? this.settings.enableSearch : true;
|
||||
this.displayPagination = isDefined(this.settings.displayPagination) ? this.settings.displayPagination : true;
|
||||
@ -295,7 +296,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
|
||||
cellContentInfo.decimals = dataKey.decimals;
|
||||
source.contentsInfo.push(cellContentInfo);
|
||||
}
|
||||
if (this.countCellButtonAction) {
|
||||
if (this.setCellButtonAction) {
|
||||
source.displayedColumns.push('actions');
|
||||
}
|
||||
const tsDatasource = new TimeseriesDatasource(source, this.hideEmptyLines, this.dateFormatFilter, this.datePipe, this.ctx);
|
||||
@ -577,6 +578,9 @@ class TimeseriesDatasource implements DataSource<TimeseriesRow> {
|
||||
private allRowsSubject = new BehaviorSubject<TimeseriesRow[]>([]);
|
||||
private allRows$: Observable<Array<TimeseriesRow>> = this.allRowsSubject.asObservable();
|
||||
|
||||
public countCellButtonAction = 0;
|
||||
|
||||
private reserveSpaceForHiddenAction = true;
|
||||
private cellButtonActions: TableCellButtonActionDescriptor[];
|
||||
private readonly usedShowCellActionFunction: boolean;
|
||||
|
||||
@ -589,6 +593,9 @@ class TimeseriesDatasource implements DataSource<TimeseriesRow> {
|
||||
) {
|
||||
this.cellButtonActions = getTableCellButtonActions(widgetContext);
|
||||
this.usedShowCellActionFunction = this.cellButtonActions.some(action => action.useShowActionCellButtonFunction);
|
||||
if (this.widgetContext.settings.reserveSpaceForHiddenAction) {
|
||||
this.reserveSpaceForHiddenAction = coerceBooleanProperty(this.widgetContext.settings.reserveSpaceForHiddenAction);
|
||||
}
|
||||
this.source.timeseriesDatasource = this;
|
||||
}
|
||||
|
||||
@ -640,7 +647,8 @@ class TimeseriesDatasource implements DataSource<TimeseriesRow> {
|
||||
if (this.cellButtonActions.length) {
|
||||
if (this.usedShowCellActionFunction) {
|
||||
const parsedData = parseData(data, index);
|
||||
row.actionCellButtons = prepareTableCellButtonActions(this.widgetContext, this.cellButtonActions, parsedData[0]);
|
||||
row.actionCellButtons = prepareTableCellButtonActions(this.widgetContext, this.cellButtonActions,
|
||||
parsedData[0], this.reserveSpaceForHiddenAction);
|
||||
row.hasActions = checkHasActions(row.actionCellButtons);
|
||||
} else {
|
||||
row.hasActions = true;
|
||||
@ -690,7 +698,19 @@ class TimeseriesDatasource implements DataSource<TimeseriesRow> {
|
||||
|
||||
private fetchRows(pageLink: PageLink): Observable<PageData<TimeseriesRow>> {
|
||||
return this.allRows$.pipe(
|
||||
map((data) => pageLink.filterData(data))
|
||||
map((data) => {
|
||||
const fetchData = pageLink.filterData(data);
|
||||
if (this.cellButtonActions.length) {
|
||||
let maxCellButtonAction: number;
|
||||
if (this.usedShowCellActionFunction && !this.reserveSpaceForHiddenAction) {
|
||||
maxCellButtonAction = Math.max(...fetchData.data.map(tsRow => tsRow.actionCellButtons.length));
|
||||
} else {
|
||||
maxCellButtonAction = this.cellButtonActions.length;
|
||||
}
|
||||
this.countCellButtonAction = maxCellButtonAction;
|
||||
}
|
||||
return fetchData;
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -3064,7 +3064,7 @@
|
||||
"action-name-required": "Action name is required.",
|
||||
"action-name-not-unique": "Another action with the same name already exists.<br/>Action name should be unique within the same action source.",
|
||||
"action-icon": "Icon",
|
||||
"use-show-widget-action-function": "Use show widget action function",
|
||||
"show-hide-action-using-function": "Show/hide action using function",
|
||||
"action-type": "Type",
|
||||
"action-type-required": "Action type is required.",
|
||||
"edit-action": "Edit action",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user