@etsoo/react 1.4.81 → 1.4.85

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.
Files changed (5) hide show
  1. package/lib/mu/AuditDisplay.js +16 -8
  2. package/lib/mu/pages/ViewPage.js +5 -2
  3. package/package.json +3 -3
  4. package/src/mu/AuditDisplay.tsx +27 -11
  5. package/src/mu/pages/ViewPage.tsx +6 -2
package/lib/mu/AuditDisplay.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Utils } from '@etsoo/shared';
2
- import { Button, Table, TableBody, TableCell, TableHead, TableRow, useTheme } from '@mui/material';
2
+ import { Button, Divider, Table, TableBody, TableCell, TableHead, TableRow, Typography, useTheme } from '@mui/material';
3
3
  import React from 'react';
4
4
  import { globalApp, NotificationMessageType } from '..';
5
5
  import { ListMoreDisplay } from './ListMoreDisplay';
@@ -32,6 +32,8 @@ const formatValue = (value) => {
32
32
  export function AuditDisplay(props) {
33
33
  // Theme
34
34
  const theme = useTheme();
35
+ // Label
36
+ const dataComparisonLabel = getLabel('dataComparison');
35
37
  // Show data comparison
36
38
  const showDataComparison = (data) => {
37
39
  if (typeof globalApp === 'undefined')
@@ -55,23 +57,29 @@ export function AuditDisplay(props) {
55
57
  React.createElement(TableCell, null, getLabel(row.field)),
56
58
  React.createElement(TableCell, { align: "right" }, formatValue(row.oldValue)),
57
59
  React.createElement(TableCell, { align: "right" }, formatValue(row.newValue))))))));
58
- globalApp.notifier.alert(undefined, undefined, NotificationMessageType.Info, { fullScreen: globalApp.smDown, inputs });
60
+ globalApp.notifier.alert([undefined, dataComparisonLabel], undefined, NotificationMessageType.Info, { fullScreen: globalApp.smDown, inputs });
59
61
  };
60
62
  // Destruct
61
63
  const { getItemStyle = (index, theme) => ({
62
- padding: theme.spacing(1),
64
+ padding: [theme.spacing(1.5), theme.spacing(1)].join(' '),
63
65
  background: index % 2 === 0
64
66
  ? theme.palette.grey[100]
65
67
  : theme.palette.grey[50]
66
68
  }), itemRenderer = (data) => {
67
69
  return (React.createElement(React.Fragment, null,
68
- formatDate(data.creation) +
70
+ data.changes != null && (React.createElement(Button, { variant: "outlined", size: "small", onClick: () => showDataComparison(data.changes), sx: {
71
+ marginLeft: theme.spacing(1),
72
+ marginTop: theme.spacing(-0.5),
73
+ float: 'right'
74
+ } }, dataComparisonLabel)),
75
+ React.createElement(Typography, null, formatDate(data.creation) +
69
76
  ', [' +
70
77
  getLabel(data.action) +
71
78
  '], ' +
72
- data.user,
73
- data.changes != null && (React.createElement(Button, { variant: "outlined", size: "small", onClick: () => showDataComparison(data.changes), sx: { marginLeft: theme.spacing(1) } }, getLabel('dataComparison')))));
74
- }, ...rest } = props;
79
+ data.user)));
80
+ }, headerTitle = (React.createElement(React.Fragment, null,
81
+ React.createElement(Typography, null, getLabel('audits')),
82
+ React.createElement(Divider, null))), ...rest } = props;
75
83
  // Layout
76
- return (React.createElement(ListMoreDisplay, { ...rest }, (data, index) => (React.createElement("div", { key: data.id, style: getItemStyle(index, theme) }, itemRenderer(data, index)))));
84
+ return (React.createElement(ListMoreDisplay, { headerTitle: headerTitle, ...rest }, (data, index) => (React.createElement("div", { key: data.id, style: getItemStyle(index, theme) }, itemRenderer(data, index)))));
77
85
  }
package/lib/mu/pages/ViewPage.js CHANGED
@@ -18,6 +18,7 @@ function getItemField(field, data) {
18
18
  var _a, _b, _c;
19
19
  // Item data and label
20
20
  let itemData, itemLabel, gridProps = {};
21
+ let xs = 6;
21
22
  if (Array.isArray(field)) {
22
23
  const [fieldData, fieldType, renderProps] = field;
23
24
  itemData = GridDataFormat(data[fieldData], fieldType, renderProps);
@@ -25,11 +26,13 @@ function getItemField(field, data) {
25
26
  }
26
27
  else if (typeof field === 'object') {
27
28
  // Destruct
28
- const { data: fieldData, dataType, label: fieldLabel, renderProps, singleRow = false, ...rest } = field;
29
+ const { data: fieldData, dataType, label: fieldLabel, renderProps, singleRow, ...rest } = field;
29
30
  gridProps = {
30
31
  ...rest,
31
32
  ...(singleRow && { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 })
32
33
  };
34
+ if (singleRow === false)
35
+ xs = 12;
33
36
  // Field data
34
37
  if (typeof fieldData === 'function')
35
38
  itemData = fieldData(data);
@@ -50,7 +53,7 @@ function getItemField(field, data) {
50
53
  return [
51
54
  itemData,
52
55
  itemLabel,
53
- { xs: 12, sm: 6, md: 6, lg: 4, xl: 3, ...gridProps }
56
+ { xs, sm: 6, md: 6, lg: 4, xl: 3, ...gridProps }
54
57
  ];
55
58
  }
56
59
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/react",
3
- "version": "1.4.81",
3
+ "version": "1.4.85",
4
4
  "description": "TypeScript ReactJs framework",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -50,8 +50,8 @@
50
50
  "@emotion/react": "^11.7.1",
51
51
  "@emotion/style": "^0.8.0",
52
52
  "@emotion/styled": "^11.6.0",
53
- "@etsoo/appscript": "^1.2.31",
54
- "@etsoo/notificationbase": "^1.1.0",
53
+ "@etsoo/appscript": "^1.2.33",
54
+ "@etsoo/notificationbase": "^1.1.1",
55
55
  "@etsoo/shared": "^1.1.9",
56
56
  "@mui/icons-material": "^5.3.1",
57
57
  "@mui/material": "^5.4.0",
package/src/mu/AuditDisplay.tsx CHANGED
@@ -1,13 +1,14 @@
1
1
  import { Utils } from '@etsoo/shared';
2
- import { HelpOutline } from '@mui/icons-material';
3
2
  import {
4
3
  Button,
4
+ Divider,
5
5
  Table,
6
6
  TableBody,
7
7
  TableCell,
8
8
  TableHead,
9
9
  TableRow,
10
10
  Theme,
11
+ Typography,
11
12
  useTheme
12
13
  } from '@mui/material';
13
14
  import React, { CSSProperties } from 'react';
@@ -78,6 +79,9 @@ export function AuditDisplay(props: AuditDisplayProps) {
78
79
  // Theme
79
80
  const theme = useTheme();
80
81
 
82
+ // Label
83
+ const dataComparisonLabel = getLabel('dataComparison');
84
+
81
85
  // Show data comparison
82
86
  const showDataComparison = (data: AuditLineUpdateData) => {
83
87
  if (typeof globalApp === 'undefined') return;
@@ -123,7 +127,7 @@ export function AuditDisplay(props: AuditDisplayProps) {
123
127
  );
124
128
 
125
129
  globalApp.notifier.alert(
126
- undefined,
130
+ [undefined, dataComparisonLabel],
127
131
  undefined,
128
132
  NotificationMessageType.Info,
129
133
  { fullScreen: globalApp.smDown, inputs }
@@ -133,7 +137,7 @@ export function AuditDisplay(props: AuditDisplayProps) {
133
137
  // Destruct
134
138
  const {
135
139
  getItemStyle = (index, theme) => ({
136
- padding: theme.spacing(1),
140
+ padding: [theme.spacing(1.5), theme.spacing(1)].join(' '),
137
141
  background:
138
142
  index % 2 === 0
139
143
  ? theme.palette.grey[100]
@@ -142,30 +146,42 @@ export function AuditDisplay(props: AuditDisplayProps) {
142
146
  itemRenderer = (data) => {
143
147
  return (
144
148
  <React.Fragment>
145
- {formatDate(data.creation) +
146
- ', [' +
147
- getLabel(data.action) +
148
- '], ' +
149
- data.user}
150
149
  {data.changes != null && (
151
150
  <Button
152
151
  variant="outlined"
153
152
  size="small"
154
153
  onClick={() => showDataComparison(data.changes!)}
155
- sx={{ marginLeft: theme.spacing(1) }}
154
+ sx={{
155
+ marginLeft: theme.spacing(1),
156
+ marginTop: theme.spacing(-0.5),
157
+ float: 'right'
158
+ }}
156
159
  >
157
- {getLabel('dataComparison')}
160
+ {dataComparisonLabel}
158
161
  </Button>
159
162
  )}
163
+ <Typography>
164
+ {formatDate(data.creation) +
165
+ ', [' +
166
+ getLabel(data.action) +
167
+ '], ' +
168
+ data.user}
169
+ </Typography>
160
170
  </React.Fragment>
161
171
  );
162
172
  },
173
+ headerTitle = (
174
+ <React.Fragment>
175
+ <Typography>{getLabel('audits')}</Typography>
176
+ <Divider />
177
+ </React.Fragment>
178
+ ),
163
179
  ...rest
164
180
  } = props;
165
181
 
166
182
  // Layout
167
183
  return (
168
- <ListMoreDisplay {...rest}>
184
+ <ListMoreDisplay headerTitle={headerTitle} {...rest}>
169
185
  {(data, index) => (
170
186
  <div key={data.id} style={getItemStyle(index, theme)}>
171
187
  {itemRenderer(data, index)}
package/src/mu/pages/ViewPage.tsx CHANGED
@@ -103,6 +103,8 @@ function getItemField<T>(
103
103
  itemLabel: React.ReactNode,
104
104
  gridProps: GridProps = {};
105
105
 
106
+ let xs = 6;
107
+
106
108
  if (Array.isArray(field)) {
107
109
  const [fieldData, fieldType, renderProps] = field;
108
110
  itemData = GridDataFormat(data[fieldData], fieldType, renderProps);
@@ -114,7 +116,7 @@ function getItemField<T>(
114
116
  dataType,
115
117
  label: fieldLabel,
116
118
  renderProps,
117
- singleRow = false,
119
+ singleRow,
118
120
  ...rest
119
121
  } = field;
120
122
 
@@ -123,6 +125,8 @@ function getItemField<T>(
123
125
  ...(singleRow && { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 })
124
126
  };
125
127
 
128
+ if (singleRow === false) xs = 12;
129
+
126
130
  // Field data
127
131
  if (typeof fieldData === 'function') itemData = fieldData(data);
128
132
  else if (dataType == null) itemData = formatItemData(data[fieldData]);
@@ -144,7 +148,7 @@ function getItemField<T>(
144
148
  return [
145
149
  itemData,
146
150
  itemLabel,
147
- { xs: 12, sm: 6, md: 6, lg: 4, xl: 3, ...gridProps }
151
+ { xs, sm: 6, md: 6, lg: 4, xl: 3, ...gridProps }
148
152
  ];
149
153
  }
150
154