@gpa-gemstone/common-pages 0.0.122 → 0.0.124

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,142 +0,0 @@
1
- "use strict";
2
- // ******************************************************************************************************
3
- // GroupItem.tsx - Gbtc
4
- //
5
- // Copyright © 2021, Grid Protection Alliance. All Rights Reserved.
6
- //
7
- // Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
8
- // the NOTICE file distributed with this work for additional information regarding copyright ownership.
9
- // The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
10
- // file except in compliance with the License. You may obtain a copy of the License at:
11
- //
12
- // http://opensource.org/licenses/MIT
13
- //
14
- // Unless agreed to in writing, the subject software distributed under the License is distributed on an
15
- // "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
16
- // License for the specific language governing permissions and limitations.
17
- //
18
- // Code Modification History:
19
- // ----------------------------------------------------------------------------------------------------
20
- // 07/04/2021 - C. Lackner
21
- // Generated original version of source code.
22
- // ******************************************************************************************************
23
- var __assign = (this && this.__assign) || function () {
24
- __assign = Object.assign || function(t) {
25
- for (var s, i = 1, n = arguments.length; i < n; i++) {
26
- s = arguments[i];
27
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
28
- t[p] = s[p];
29
- }
30
- return t;
31
- };
32
- return __assign.apply(this, arguments);
33
- };
34
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
35
- if (k2 === undefined) k2 = k;
36
- var desc = Object.getOwnPropertyDescriptor(m, k);
37
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
38
- desc = { enumerable: true, get: function() { return m[k]; } };
39
- }
40
- Object.defineProperty(o, k2, desc);
41
- }) : (function(o, m, k, k2) {
42
- if (k2 === undefined) k2 = k;
43
- o[k2] = m[k];
44
- }));
45
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
46
- Object.defineProperty(o, "default", { enumerable: true, value: v });
47
- }) : function(o, v) {
48
- o["default"] = v;
49
- });
50
- var __importStar = (this && this.__importStar) || function (mod) {
51
- if (mod && mod.__esModule) return mod;
52
- var result = {};
53
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
54
- __setModuleDefault(result, mod);
55
- return result;
56
- };
57
- var __importDefault = (this && this.__importDefault) || function (mod) {
58
- return (mod && mod.__esModule) ? mod : { "default": mod };
59
- };
60
- Object.defineProperty(exports, "__esModule", { value: true });
61
- exports.default = GroupItemsWindow;
62
- var React = __importStar(require("react"));
63
- var ItemForm_1 = __importDefault(require("./ItemForm"));
64
- var react_interactive_1 = require("@gpa-gemstone/react-interactive");
65
- var react_table_1 = require("@gpa-gemstone/react-table");
66
- var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
67
- var react_redux_1 = require("react-redux");
68
- function GroupItemsWindow(props) {
69
- var dispatch = (0, react_redux_1.useDispatch)();
70
- var recordStatus = (0, react_redux_1.useSelector)(props.ValueListItemSlice.Status);
71
- var data = (0, react_redux_1.useSelector)(props.ValueListItemSlice.Data);
72
- var parentID = (0, react_redux_1.useSelector)((props.ValueListItemSlice.ParentID === undefined ? function (state) { return -1; } : props.ValueListItemSlice.ParentID));
73
- var _a = React.useState('Value'), sortField = _a[0], setSortField = _a[1];
74
- var _b = React.useState(false), ascending = _b[0], setAscending = _b[1];
75
- var emptyRecord = { ID: 0, GroupID: props.Record.ID, Value: '', AltValue: '', SortOrder: 0 };
76
- var _c = React.useState(emptyRecord), record = _c[0], setRecord = _c[1];
77
- var _d = React.useState(false), showNew = _d[0], setShowNew = _d[1];
78
- var _e = React.useState([]), newErrors = _e[0], setNewErrors = _e[1];
79
- var _f = React.useState(true), validValue = _f[0], setValidValue = _f[1];
80
- React.useEffect(function () {
81
- if (recordStatus === 'unintiated' || recordStatus === 'changed' || parentID !== props.Record.ID)
82
- dispatch(props.ValueListItemSlice.Fetch(props.Record.ID));
83
- }, [recordStatus, dispatch]);
84
- React.useEffect(function () {
85
- dispatch(props.ValueListItemSlice.Sort({ Ascending: ascending, SortField: sortField }));
86
- }, [sortField, ascending]);
87
- React.useEffect(function () {
88
- if (record.Value === null)
89
- setValidValue(true);
90
- if (data.findIndex(function (d) { return d.Value.toLowerCase() === record.Value.toLowerCase(); }) > -1)
91
- setValidValue(false);
92
- else
93
- setValidValue(true);
94
- }, [record, data]);
95
- return (React.createElement("div", { className: "card", style: { marginBottom: 10 } },
96
- React.createElement("div", { className: "card-header" },
97
- React.createElement("div", { className: "row" },
98
- React.createElement("div", { className: "col" },
99
- React.createElement("h4", null, "List Items:")))),
100
- React.createElement("div", { className: "card-body" },
101
- React.createElement("div", { className: "row" },
102
- React.createElement("div", { style: { width: '100%', height: window.innerHeight - 421, maxHeight: window.innerHeight - 421, padding: 0, overflowY: 'auto' } },
103
- React.createElement(react_table_1.SearchableTable, { cols: [
104
- { key: 'Value', field: 'Value', label: 'Value', headerStyle: { width: 'auto' }, rowStyle: { width: 'auto' } },
105
- { key: 'AltValue', field: 'AltValue', label: 'Alternate Value', headerStyle: { width: 'auto' }, rowStyle: { width: 'auto' } },
106
- { key: 'SortOrder', field: 'SortOrder', label: 'Sort Order', headerStyle: { width: 'auto' }, rowStyle: { width: 'auto' } },
107
- { key: 'remove', label: '', headerStyle: { width: '10%' }, rowStyle: { width: '10%' }, content: function (item) { return React.createElement("button", { className: "btn btn-sm", onClick: function (e) {
108
- e.preventDefault();
109
- dispatch(props.ValueListItemSlice.DBAction({ verb: 'DELETE', record: item }));
110
- } },
111
- React.createElement("span", null,
112
- React.createElement("i", { className: "fa fa-times" }))); }
113
- },
114
- { key: 'scroll', label: '', headerStyle: { width: 17, padding: 0 }, rowStyle: { width: 0, padding: 0 } },
115
- ], tableClass: "table table-hover", data: data, sortKey: sortField, onSort: function (d) {
116
- if (d.colKey === 'remove' || d.colKey === 'scroll' || d.colField === undefined)
117
- return;
118
- setSortField(d.colField);
119
- if (d.colField === sortField)
120
- setAscending(function (asc) { return !asc; });
121
- else
122
- setAscending(true);
123
- }, ascending: true, onClick: function () { }, theadStyle: { fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }, tbodyStyle: { display: 'block', overflowY: 'scroll', maxHeight: window.innerHeight - 300, width: '100%' }, rowStyle: { fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }, selected: function (item) { return false; }, matchSearch: function (item, search) { return item.Value.toLowerCase().indexOf(search.toLowerCase()) > -1; } })))),
124
- React.createElement("div", { className: "card-footer" },
125
- React.createElement("div", { className: "btn-group mr-2" },
126
- React.createElement("button", { className: "btn btn-primary pull-right", "data-toggle": "modal", "data-target": "#exampleModal", onClick: function () { setRecord(__assign(__assign({}, emptyRecord), { GroupID: props.Record.ID })); setShowNew(true); } }, "Add Item"))),
127
- React.createElement(react_interactive_1.Modal, { Title: 'Add new List Item', Show: showNew, Size: 'lg', ShowX: true, ShowCancel: false, DisableConfirm: newErrors.length > 0 || !validValue, ConfirmShowToolTip: newErrors.length > 0 || !validValue, ConfirmToolTipContent: React.createElement(React.Fragment, null,
128
- newErrors.map(function (t, i) { return React.createElement("p", { key: i },
129
- " ",
130
- gpa_symbols_1.CrossMark,
131
- " ",
132
- t); }),
133
- !validValue ? React.createElement("p", null,
134
- " ",
135
- gpa_symbols_1.CrossMark,
136
- " A Value has to be unique in a given Item List.") : null), CallBack: function (c) {
137
- setShowNew(false);
138
- if (c)
139
- dispatch(props.ValueListItemSlice.DBAction({ verb: 'POST', record: record }));
140
- } },
141
- React.createElement(ItemForm_1.default, { Record: record, Setter: setRecord, ErrorSetter: setNewErrors }))));
142
- }
@@ -1,9 +0,0 @@
1
- import * as React from 'react';
2
- import { SystemCenter } from '@gpa-gemstone/application-typings';
3
- interface IProps {
4
- Record: SystemCenter.Types.ValueListItem;
5
- Setter: (record: SystemCenter.Types.ValueListItem) => void;
6
- ErrorSetter?: (errors: string[]) => void;
7
- }
8
- export default function ItemForm(props: IProps): React.JSX.Element;
9
- export {};
@@ -1,82 +0,0 @@
1
- "use strict";
2
- // ******************************************************************************************************
3
- // ItemForm.tsx - Gbtc
4
- //
5
- // Copyright © 2020, Grid Protection Alliance. All Rights Reserved.
6
- //
7
- // Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
8
- // the NOTICE file distributed with this work for additional information regarding copyright ownership.
9
- // The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
10
- // file except in compliance with the License. You may obtain a copy of the License at:
11
- //
12
- // http://opensource.org/licenses/MIT
13
- //
14
- // Unless agreed to in writing, the subject software distributed under the License is distributed on an
15
- // "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
16
- // License for the specific language governing permissions and limitations.
17
- //
18
- // Code Modification History:
19
- // ----------------------------------------------------------------------------------------------------
20
- // 07/04/2021 - C. Lackner
21
- // Generated original version of source code.
22
- // ******************************************************************************************************
23
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
24
- if (k2 === undefined) k2 = k;
25
- var desc = Object.getOwnPropertyDescriptor(m, k);
26
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
27
- desc = { enumerable: true, get: function() { return m[k]; } };
28
- }
29
- Object.defineProperty(o, k2, desc);
30
- }) : (function(o, m, k, k2) {
31
- if (k2 === undefined) k2 = k;
32
- o[k2] = m[k];
33
- }));
34
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
35
- Object.defineProperty(o, "default", { enumerable: true, value: v });
36
- }) : function(o, v) {
37
- o["default"] = v;
38
- });
39
- var __importStar = (this && this.__importStar) || function (mod) {
40
- if (mod && mod.__esModule) return mod;
41
- var result = {};
42
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
43
- __setModuleDefault(result, mod);
44
- return result;
45
- };
46
- Object.defineProperty(exports, "__esModule", { value: true });
47
- exports.default = ItemForm;
48
- var React = __importStar(require("react"));
49
- var react_forms_1 = require("@gpa-gemstone/react-forms");
50
- var helper_functions_1 = require("@gpa-gemstone/helper-functions");
51
- function ItemForm(props) {
52
- var _a = React.useState([]), errors = _a[0], setErrors = _a[1];
53
- React.useEffect(function () {
54
- var e = [];
55
- if (props.Record.Value == null || props.Record.Value.length === 0)
56
- e.push('A Value is required.');
57
- if (props.Record.Value != null && props.Record.Value.length > 200)
58
- e.push('Value has to be less than 200 characters.');
59
- if (props.Record.AltValue != null && props.Record.AltValue.length > 200)
60
- e.push('Alt Value has to be less than 200 characters.');
61
- if (props.Record.SortOrder != null && !(0, helper_functions_1.IsInteger)(props.Record.SortOrder))
62
- e.push('Sort Order has to be an integer or be left blank.');
63
- setErrors(e);
64
- }, [props.Record]);
65
- React.useEffect(function () {
66
- if (props.ErrorSetter !== undefined)
67
- props.ErrorSetter(errors);
68
- }, [errors, props.ErrorSetter]);
69
- function Valid(field) {
70
- if (field === 'Value')
71
- return props.Record.Value != null && props.Record.Value.length > 0 && props.Record.Value.length <= 200;
72
- else if (field === 'AltValue')
73
- return props.Record.AltValue == null || props.Record.AltValue.length <= 200;
74
- else if (field === 'SortOrder')
75
- return props.Record.SortOrder == null || (0, helper_functions_1.IsInteger)(props.Record.SortOrder);
76
- return true;
77
- }
78
- return (React.createElement("form", null,
79
- React.createElement(react_forms_1.Input, { Record: props.Record, Field: 'Value', Feedback: 'Value must be set and be less than 200 characters.', Valid: Valid, Setter: props.Setter }),
80
- React.createElement(react_forms_1.Input, { Record: props.Record, Field: 'AltValue', Label: 'Alt. Value', Feedback: 'Alt. Value must be less than 200 characters.', Valid: Valid, Setter: props.Setter }),
81
- React.createElement(react_forms_1.Input, { Record: props.Record, Field: 'SortOrder', Label: 'Sort Order', Type: 'number', Valid: Valid, Setter: props.Setter })));
82
- }
@@ -1,26 +0,0 @@
1
- import * as React from 'react';
2
- import { SystemCenter } from '@gpa-gemstone/application-typings';
3
- import { IAdditionalFieldSlice, IGenericSlice } from '../SliceInterfaces';
4
- interface IField {
5
- FieldName: string;
6
- Type: string;
7
- }
8
- interface IValue {
9
- Value: string | number;
10
- ID: number;
11
- }
12
- interface IProps<Field extends IField, Value extends IValue> {
13
- Id: string | number;
14
- AdditionalFieldSlice: IAdditionalFieldSlice<Field, Value>;
15
- ValueListItemSlice: IGenericSlice<SystemCenter.Types.ValueListItem>;
16
- ValueListGroupSlice: IGenericSlice<SystemCenter.Types.ValueListGroup>;
17
- EmptyField: Field;
18
- GetFieldValueIndex: (field: Field, values: Value[]) => number;
19
- GetFieldIndex: (value: Value, fields: Field[]) => number;
20
- FieldKeySelector: (field: Field) => string;
21
- ValidateField: (field: Field) => string[];
22
- CreateValue: (field: Field) => Value;
23
- FieldUI: (field: Field, setField: (field: Field) => void) => JSX.Element;
24
- }
25
- declare function AdditionalField<Field extends IField, Value extends IValue>(props: IProps<Field, Value>): React.JSX.Element;
26
- export default AdditionalField;
@@ -1,290 +0,0 @@
1
- "use strict";
2
- // ******************************************************************************************************
3
- // AdditionalField.tsx - Gbtc
4
- //
5
- // Copyright © 2020, Grid Protection Alliance. All Rights Reserved.
6
- //
7
- // Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
8
- // the NOTICE file distributed with this work for additional information regarding copyright ownership.
9
- // The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
10
- // file except in compliance with the License. You may obtain a copy of the License at:
11
- //
12
- // http://opensource.org/licenses/MIT
13
- //
14
- // Unless agreed to in writing, the subject software distributed under the License is distributed on an
15
- // "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
16
- // License for the specific language governing permissions and limitations.
17
- //
18
- // Code Modification History:
19
- // ----------------------------------------------------------------------------------------------------
20
- // 07/14/2021 - C. Lackner
21
- // Generated original version of source code.
22
- // ******************************************************************************************************
23
- var __assign = (this && this.__assign) || function () {
24
- __assign = Object.assign || function(t) {
25
- for (var s, i = 1, n = arguments.length; i < n; i++) {
26
- s = arguments[i];
27
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
28
- t[p] = s[p];
29
- }
30
- return t;
31
- };
32
- return __assign.apply(this, arguments);
33
- };
34
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
35
- if (k2 === undefined) k2 = k;
36
- var desc = Object.getOwnPropertyDescriptor(m, k);
37
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
38
- desc = { enumerable: true, get: function() { return m[k]; } };
39
- }
40
- Object.defineProperty(o, k2, desc);
41
- }) : (function(o, m, k, k2) {
42
- if (k2 === undefined) k2 = k;
43
- o[k2] = m[k];
44
- }));
45
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
46
- Object.defineProperty(o, "default", { enumerable: true, value: v });
47
- }) : function(o, v) {
48
- o["default"] = v;
49
- });
50
- var __importStar = (this && this.__importStar) || function (mod) {
51
- if (mod && mod.__esModule) return mod;
52
- var result = {};
53
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
54
- __setModuleDefault(result, mod);
55
- return result;
56
- };
57
- var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
58
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
59
- if (ar || !(i in from)) {
60
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
61
- ar[i] = from[i];
62
- }
63
- }
64
- return to.concat(ar || Array.prototype.slice.call(from));
65
- };
66
- var __importDefault = (this && this.__importDefault) || function (mod) {
67
- return (mod && mod.__esModule) ? mod : { "default": mod };
68
- };
69
- Object.defineProperty(exports, "__esModule", { value: true });
70
- var React = __importStar(require("react"));
71
- var react_table_1 = __importDefault(require("@gpa-gemstone/react-table"));
72
- var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
73
- var react_interactive_1 = require("@gpa-gemstone/react-interactive");
74
- var react_forms_1 = require("@gpa-gemstone/react-forms");
75
- var react_redux_1 = require("react-redux");
76
- var helper_functions_1 = require("@gpa-gemstone/helper-functions");
77
- function AdditionalField(props) {
78
- var dispatch = (0, react_redux_1.useDispatch)();
79
- var valueListItems = (0, react_redux_1.useSelector)(props.ValueListItemSlice.Data);
80
- var valueListItemStatus = (0, react_redux_1.useSelector)(props.ValueListItemSlice.Status);
81
- var valueListGroups = (0, react_redux_1.useSelector)(props.ValueListGroupSlice.Data);
82
- var valueListGroupStatus = (0, react_redux_1.useSelector)(props.ValueListGroupSlice.Status);
83
- var fields = (0, react_redux_1.useSelector)(props.AdditionalFieldSlice.Fields);
84
- var values = (0, react_redux_1.useSelector)(props.AdditionalFieldSlice.Values);
85
- var fieldStatus = (0, react_redux_1.useSelector)(props.AdditionalFieldSlice.FieldStatus);
86
- var valueStatus = (0, react_redux_1.useSelector)(props.AdditionalFieldSlice.ValueStatus);
87
- var valueParentID = (0, react_redux_1.useSelector)(props.AdditionalFieldSlice.ValueParentId);
88
- var _a = React.useState('unintiated'), pageStatus = _a[0], setPageStatus = _a[1];
89
- var _b = React.useState([]), editValues = _b[0], setEditValues = _b[1];
90
- var sortField = (0, react_redux_1.useSelector)(props.AdditionalFieldSlice.SortField);
91
- var ascending = (0, react_redux_1.useSelector)(props.AdditionalFieldSlice.Ascending);
92
- var _c = React.useState(props.EmptyField), newField = _c[0], setNewField = _c[1];
93
- var _d = React.useState(false), showWarning = _d[0], setShowWarning = _d[1];
94
- var _e = React.useState(false), showEdit = _e[0], setShowEdit = _e[1];
95
- var _f = React.useState('None'), hover = _f[0], setHover = _f[1];
96
- var _g = React.useState('View'), mode = _g[0], setMode = _g[1];
97
- var _h = React.useState([]), changedFields = _h[0], setChangedFields = _h[1];
98
- var _j = React.useState([]), errorFields = _j[0], setErrorFields = _j[1];
99
- var _k = React.useState([]), fieldErrors = _k[0], setFieldErrors = _k[1];
100
- React.useEffect(function () {
101
- if (fieldStatus === 'error' || valueStatus === 'error' || valueListGroupStatus === 'error' || valueListItemStatus === 'error')
102
- setPageStatus('error');
103
- else if (fieldStatus === 'loading' || valueStatus === 'loading' || valueListGroupStatus === 'loading' || valueListItemStatus === 'loading')
104
- setPageStatus('loading');
105
- else
106
- setPageStatus('idle');
107
- }, [fieldStatus, valueStatus, valueListGroupStatus, valueListItemStatus]);
108
- React.useEffect(function () {
109
- if (fieldStatus === 'unintiated' || fieldStatus === 'changed')
110
- dispatch(props.AdditionalFieldSlice.FetchField());
111
- }, [dispatch, fieldStatus]);
112
- React.useEffect(function () {
113
- if (valueStatus === 'unintiated' || valueStatus === 'changed' || props.Id !== valueParentID)
114
- dispatch(props.AdditionalFieldSlice.FetchValues(props.Id));
115
- }, [dispatch, valueStatus, props.Id, valueParentID]);
116
- React.useEffect(function () {
117
- if (valueListItemStatus === 'unintiated' || valueListItemStatus === 'changed')
118
- dispatch(props.ValueListItemSlice.Fetch());
119
- }, [dispatch, valueListItemStatus]);
120
- React.useEffect(function () {
121
- if (valueListGroupStatus === 'unintiated' || valueListGroupStatus === 'changed')
122
- dispatch(props.ValueListGroupSlice.Fetch());
123
- }, [dispatch, valueListGroupStatus]);
124
- React.useEffect(function () { setEditValues(values); }, [values]);
125
- var typeOptions = [{ Value: 'string', Label: 'string' }, { Value: 'integer', Label: 'integer' }, { Value: 'number', Label: 'number' }].concat(valueListGroups.map(function (x) { return { Value: x.Name, Label: x.Name }; }));
126
- React.useEffect(function () {
127
- var e = props.ValidateField(newField);
128
- if (newField.FieldName == null || newField.FieldName.length === 0)
129
- e.push('A FieldName is required');
130
- else if (fields.findIndex(function (f) { return f.FieldName.toLowerCase() === newField.FieldName.toLowerCase() && props.FieldKeySelector(f) !== props.FieldKeySelector(newField); }) > -1)
131
- e.push('A Field with this FieldName already exists');
132
- setFieldErrors(e);
133
- }, [newField]);
134
- React.useEffect(function () {
135
- var c = [];
136
- var e = [];
137
- editValues.forEach(function (v) {
138
- var eIndex = values.findIndex(function (val) { return val.ID === v.ID; });
139
- var fldIndex = props.GetFieldIndex(v, fields);
140
- if (eIndex === -1 && fldIndex > -1)
141
- c.push(fields[fldIndex].FieldName);
142
- else if (fldIndex > -1 && v.Value !== values[eIndex].Value)
143
- c.push(fields[fldIndex].FieldName);
144
- if (fldIndex > -1 && fields[fldIndex].Type === 'integer' && !(0, helper_functions_1.IsInteger)(v.Value))
145
- e.push("'" + fields[fldIndex].FieldName + "' has to be a valid integer");
146
- if (fldIndex > -1 && fields[fldIndex].Type === 'number' && !(0, helper_functions_1.IsNumber)(v.Value))
147
- e.push("'" + fields[fldIndex].FieldName + "' has to be a valid number");
148
- });
149
- setErrorFields(e);
150
- setChangedFields(c);
151
- }, [values, editValues]);
152
- if (pageStatus === 'error')
153
- return React.createElement("div", { className: "card", style: { marginBottom: 10, maxHeight: window.innerHeight - 215 } },
154
- React.createElement("div", { className: "card-header" },
155
- React.createElement("div", { className: "row" },
156
- React.createElement("div", { className: "col" },
157
- React.createElement("h4", null, "Additional Fields:")))),
158
- React.createElement("div", { className: "card-body", style: { maxHeight: window.innerHeight - 315, overflowY: 'auto' } },
159
- React.createElement("div", { style: { width: '100%', height: '200px' } },
160
- React.createElement("div", { style: { height: '40px', marginLeft: 'auto', marginRight: 'auto', marginTop: 'calc(50% - 20 px)' } },
161
- React.createElement(react_interactive_1.ServerErrorIcon, { Show: true, Size: 40, Label: 'A Server Error Occurred. Please Reload the Application' })))));
162
- return (React.createElement("div", { className: "card", style: { marginBottom: 10, maxHeight: window.innerHeight - 215 } },
163
- React.createElement("div", { className: "card-header" },
164
- React.createElement("div", { className: "row" },
165
- React.createElement("div", { className: "col" },
166
- React.createElement("h4", null, "Additional Fields:")),
167
- React.createElement("div", { className: "col" },
168
- (mode === 'Edit') ?
169
- React.createElement("button", { className: "btn btn-default pull-right", "data-tooltip": 'View', onClick: function () { setMode('View'); setEditValues(values); }, onMouseEnter: function () { return setHover('View'); }, onMouseLeave: function () { return setHover('None'); } }, "View") :
170
- React.createElement("button", { className: "btn btn-primary pull-right", onClick: function () { return setMode('Edit'); } }, "Edit"),
171
- React.createElement(react_interactive_1.ToolTip, { Show: hover === 'View' && changedFields.length > 0, Position: 'left', Target: "View" }, changedFields.map(function (fld, i) { return React.createElement("p", { key: i },
172
- gpa_symbols_1.Warning,
173
- " Changes to '",
174
- fld,
175
- "' will be lost. "); }))))),
176
- React.createElement("div", { className: "card-body", style: { maxHeight: window.innerHeight - 315, overflowY: 'auto' } },
177
- React.createElement(react_table_1.default, { cols: [
178
- { key: 'FieldName', field: 'FieldName', label: 'Field', headerStyle: { width: 'auto' }, rowStyle: { width: 'auto' } },
179
- { key: 'Type', field: 'Type', label: 'Type', headerStyle: { width: 'auto' }, rowStyle: { width: 'auto' } },
180
- {
181
- key: 'Value', label: 'Value', headerStyle: { width: 'auto' }, rowStyle: { width: 'auto' }, content: function (item) {
182
- var valueListgrpId = valueListGroups.findIndex(function (g) { return g.Name === item.Type; });
183
- valueListgrpId = (valueListgrpId > -1 ? valueListGroups[valueListgrpId].ID : -1);
184
- var vList = valueListItems.filter(function (i) { return i.GroupID === valueListgrpId; });
185
- var valIdx = props.GetFieldValueIndex(item, editValues);
186
- if (valIdx > -1)
187
- return React.createElement(ValueDisplay, { Mode: mode, Type: item.Type, ValueListItems: vList, Value: editValues[valIdx], Setter: function (val) { return setEditValues(function (d) { var u = __spreadArray([], d, true); u[valIdx] = val; return u; }); } });
188
- return React.createElement(ValueDisplay, { Mode: mode, Type: item.Type, ValueListItems: vList, Value: props.CreateValue(item), Setter: function (val) { return setEditValues(function (d) { var u = __spreadArray([], d, true); u.push(val); return u; }); } });
189
- }
190
- },
191
- { key: 'EditButton', label: '', headerStyle: { width: 40, paddingRight: 0, paddingLeft: 10 }, rowStyle: { width: 40, paddingRight: 0, paddingLeft: 10, paddingTop: 36 }, content: function (item) { return (mode === 'Edit' ? React.createElement("button", { className: "btn btn-sm", onClick: function () { setNewField(item); setShowEdit(true); } },
192
- React.createElement("span", null,
193
- React.createElement("i", { className: "fa fa-pencil" }))) : ''); } },
194
- { key: 'DeleteButton', label: '', headerStyle: { width: 40, paddingLeft: 0, paddingRight: 10 }, rowStyle: { width: 40, paddingLeft: 0, paddingTop: 36, paddingRight: 10 }, content: function (item) { return (mode === 'Edit' ? React.createElement("button", { className: "btn btn-sm", onClick: function () { setNewField(item); setShowWarning(true); } },
195
- React.createElement("span", null,
196
- React.createElement("i", { className: "fa fa-times" }))) : ''); } },
197
- ], tableClass: "table table-hover", data: fields, sortKey: sortField, ascending: ascending, onSort: function (d) {
198
- if (d.colField === undefined)
199
- return;
200
- if (d.colKey === sortField)
201
- dispatch(props.AdditionalFieldSlice.Sort({ SortField: d.colField, Ascending: !ascending }));
202
- else
203
- dispatch(props.AdditionalFieldSlice.Sort({ SortField: d.colField, Ascending: true }));
204
- }, onClick: function () { }, theadStyle: { fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }, tbodyStyle: { display: 'block', overflowY: 'scroll', maxHeight: window.innerHeight - 455, }, rowStyle: { display: 'table', tableLayout: 'fixed', width: '100%' }, selected: function () { return false; }, keySelector: props.FieldKeySelector })),
205
- React.createElement("div", { className: "card-footer" },
206
- React.createElement("div", { className: "btn-group mr-2" },
207
- React.createElement("button", { className: "btn btn-primary" + (mode === 'View' ? ' disabled' : ''), onMouseEnter: function () { return setHover('New'); }, onMouseLeave: function () { return setHover('None'); }, onClick: function () { if (mode === 'Edit') {
208
- setShowEdit(true);
209
- setNewField(props.EmptyField);
210
- } }, "data-tooltip": 'New' }, "Add Field")),
211
- React.createElement(react_interactive_1.ToolTip, { Show: hover === 'New' && mode === 'View', Position: 'top', Target: "New" },
212
- React.createElement("p", null, " To add a new Field switch to Edit mode by clicking on the Edit Button on the upper right corner.")),
213
- React.createElement("div", { className: "btn-group mr-2" },
214
- React.createElement("button", { className: "btn btn-primary" + (changedFields.length === 0 || mode === 'View' || errorFields.length > 0 ? ' disabled' : ''), onClick: function () { if (errorFields.length === 0 && changedFields.length > 0 && mode === 'Edit')
215
- dispatch(props.AdditionalFieldSlice.UpdateValues({ ParentID: props.Id, Values: editValues })); }, onMouseEnter: function () { return setHover('Save'); }, onMouseLeave: function () { return setHover('None'); }, "data-tooltip": 'SaveValues' }, "Save Changes")),
216
- React.createElement(react_interactive_1.ToolTip, { Show: hover === 'Save' && (mode === 'View' || changedFields.length > 0), Position: 'top', Target: "SaveValues" },
217
- mode === 'View' ? React.createElement("p", null, " To change any Fields switch to Edit mode by clicking on the Edit Button on the upper right corner.") : null,
218
- changedFields.length > 0 && errorFields.length === 0 ? changedFields.map(function (fld, i) { return React.createElement("p", { key: i },
219
- " ",
220
- gpa_symbols_1.HeavyCheckMark,
221
- " Changes to '",
222
- fld,
223
- "' are valid."); }) : null,
224
- changedFields.length > 0 && errorFields.length > 0 ? errorFields.map(function (t, i) { return React.createElement("p", { key: i },
225
- " ",
226
- gpa_symbols_1.CrossMark,
227
- " ",
228
- t,
229
- "."); }) : null),
230
- React.createElement("div", { className: "btn-group mr-2" },
231
- React.createElement("button", { className: "btn btn-default" + (changedFields.length === 0 || mode === 'View' ? ' disabled' : ''), onClick: function () {
232
- if (changedFields.length > 0 && mode === 'Edit')
233
- setEditValues(values);
234
- }, onMouseEnter: function () { return setHover('Clear'); }, onMouseLeave: function () { return setHover('None'); }, "data-tooltip": 'Reset' }, "Reset")),
235
- React.createElement(react_interactive_1.ToolTip, { Show: hover === 'Clear' && (mode === 'View' || changedFields.length > 0), Position: 'top', Target: 'Reset' },
236
- mode === 'View' ? React.createElement("p", null, " To change any Fields switch to Edit mode by clicking on the Edit Button on the upper right corner.") : null,
237
- changedFields.length > 0 ? changedFields.map(function (fld, i) { return React.createElement("p", { key: i },
238
- gpa_symbols_1.Warning,
239
- " Changes to '",
240
- fld,
241
- "' will be lost. "); }) : null)),
242
- React.createElement(react_interactive_1.Warning, { Show: showWarning, Title: 'Delete ' + newField.FieldName, Message: "This will delete all instances of '" + newField.FieldName + "' and will also delete all information assigned to these fields.", CallBack: function (confirm) { if (confirm)
243
- dispatch(props.AdditionalFieldSlice.FieldAction({ Verb: 'DELETE', Record: newField })); setShowWarning(false); } }),
244
- React.createElement(react_interactive_1.Modal, { Title: 'Additional Field', ConfirmText: 'Save', ShowX: true, ShowCancel: false, ConfirmBtnClass: 'btn-primary' + (fieldErrors.length > 0 ? ' disabled' : ''), Show: showEdit, Size: 'lg', CallBack: function (confirmation) {
245
- if (confirmation) {
246
- if (props.FieldKeySelector(newField) === "new")
247
- dispatch(props.AdditionalFieldSlice.FieldAction({ Verb: "POST", Record: newField }));
248
- else
249
- dispatch(props.AdditionalFieldSlice.FieldAction({ Verb: "PATCH", Record: newField }));
250
- }
251
- setShowEdit(false);
252
- }, ConfirmShowToolTip: fieldErrors.length > 0, ConfirmToolTipContent: fieldErrors.map(function (t, i) { return React.createElement("p", { key: i },
253
- gpa_symbols_1.CrossMark,
254
- " ",
255
- t,
256
- " "); }) },
257
- React.createElement(react_forms_1.Input, { Record: newField, Field: 'FieldName', Valid: function (field) {
258
- return newField.FieldName != null && newField.FieldName.length > 0
259
- && fields.findIndex(function (f) { return f.FieldName.toLowerCase() === newField.FieldName.toLowerCase() && props.FieldKeySelector(f) !== props.FieldKeySelector(newField); }) < 0;
260
- }, Label: "Field Name", Setter: setNewField, Feedback: 'The additional field needs to have a unique Field Name' }),
261
- React.createElement(react_forms_1.Select, { Record: newField, Field: 'Type', Options: typeOptions, Label: "Field Type", Setter: setNewField }),
262
- props.FieldUI !== undefined ? props.FieldUI(newField, setNewField) : null)));
263
- }
264
- exports.default = AdditionalField;
265
- function ValueDisplay(props) {
266
- React.useEffect(function () {
267
- if (props.Type === 'integer' || props.Type === 'number' || props.Type === 'string')
268
- return;
269
- else if (props.Type !== 'boolean' &&
270
- props.ValueListItems.findIndex(function (i) { return i.Value.toLowerCase() === props.Value.Value.toString().toLowerCase(); }) < 0
271
- && props.ValueListItems.length > 0)
272
- props.Setter(__assign(__assign({}, props.Value), { Value: props.ValueListItems[0].Value }));
273
- }, [props.Type, props.Value, props.ValueListItems]);
274
- if (props.Mode === 'View') {
275
- if (props.Type === 'boolean')
276
- return React.createElement("span", null, props.Value.Value.toString().toLowerCase() === "true" ? "true" : "false");
277
- else
278
- return React.createElement("span", null, props.Value.Value);
279
- }
280
- if (props.Type === 'number')
281
- return React.createElement(react_forms_1.Input, { Record: props.Value, Field: 'Value', Valid: function () { return (0, helper_functions_1.IsInteger)(props.Value.Value); }, Label: '', Type: 'number', Setter: props.Setter, Feedback: 'Thi Field is a numeric field.' });
282
- if (props.Type === 'integer')
283
- return React.createElement(react_forms_1.Input, { Record: props.Value, Field: 'Value', Valid: function () { return (0, helper_functions_1.IsNumber)(props.Value.Value); }, Label: '', Type: 'number', Setter: props.Setter, Feedback: 'Thi Field is an integer field.' });
284
- else if (props.Type === 'string')
285
- return React.createElement(react_forms_1.Input, { Record: props.Value, Field: 'Value', Valid: function () { return true; }, Label: '', Type: 'text', Setter: props.Setter });
286
- else if (props.Type === 'boolean')
287
- return React.createElement(react_forms_1.CheckBox, { Record: props.Value, Field: 'Value', Label: '', Setter: props.Setter });
288
- else
289
- return React.createElement(react_forms_1.Select, { EmptyOption: true, Record: props.Value, Field: 'Value', Label: '', Setter: props.Setter, Options: props.ValueListItems.map(function (x) { return ({ Value: x.ID.toString(), Label: x.Value }); }) });
290
- }
@@ -1,12 +0,0 @@
1
- import * as React from 'react';
2
- import { SystemCenter, Application } from '@gpa-gemstone/application-typings';
3
- import { IAdditionalFieldSlice, IGenericSlice, IUserAccountSlice } from '../SliceInterfaces';
4
- interface IProps {
5
- UserSlice: IUserAccountSlice;
6
- AdditionalFieldSlice: IAdditionalFieldSlice<Application.Types.iAdditionalUserField, Application.Types.iAdditionalUserFieldValue>;
7
- ValueListItemSlice: IGenericSlice<SystemCenter.Types.ValueListItem>;
8
- ValueListGroupSlice: IGenericSlice<SystemCenter.Types.ValueListGroup>;
9
- OnUserSelect: (userID: string) => void;
10
- }
11
- declare function ByUser(props: IProps): React.JSX.Element;
12
- export default ByUser;