@etsoo/materialui 1.0.67 → 1.0.69

package/lib/AuditDisplay.d.ts

@@ -1,29 +1,27 @@
+import { AuditLineDto } from '@etsoo/appscript';
 import { Theme } from '@mui/material';
 import React, { CSSProperties } from 'react';
 import { ListMoreDisplayProps } from './ListMoreDisplay';
-import { AuditLineUpdateData } from './ShowDataComparison';
-/**
- * Audit line data model
- */
-export interface AuditLine {
-    id: number;
-    creation: Date;
-    user: string;
-    action: string;
-    changes?: AuditLineUpdateData;
-}
 /**
  * Audit display props
  */
-export interface AuditDisplayProps extends Omit<ListMoreDisplayProps<AuditLine>, 'children'> {
+export interface AuditDisplayProps extends Omit<ListMoreDisplayProps<AuditLineDto>, 'children'> {
     /**
      * Get list item style callback
      */
     getItemStyle?: (index: number, theme: Theme) => CSSProperties;
+    /**
+     * Get column label
+     */
+    getColumnLabel?: (field: string) => string;
+    /**
+     * Equal check
+     */
+    equalCheck?: boolean;
     /**
      * Item/line renderer
      */
-    itemRenderer?: (data: AuditLine, index: number) => React.ReactNode;
+    itemRenderer?: (data: AuditLineDto, index: number) => React.ReactNode;
 }
 /**
  * Audit display

package/lib/AuditDisplay.js

@@ -31,10 +31,10 @@ export function AuditDisplay(props) {
         background: index % 2 === 0
             ? theme.palette.grey[100]
             : theme.palette.grey[50]
-    }), itemRenderer = (data) => {
-        const changes = data.changes;
+    }), getColumnLabel, equalCheck, itemRenderer = (data) => {
+        const { newData, oldData, changes = { newData: newData !== null && newData !== void 0 ? newData : {}, oldData: oldData !== null && oldData !== void 0 ? oldData : {} } } = data;
         return (React.createElement(React.Fragment, null,
-            changes != null && (React.createElement(Button, { variant: "outlined", size: "small", onClick: () => ShowDataComparison(changes, title), sx: {
+            changes != null && (React.createElement(Button, { variant: "outlined", size: "small", onClick: () => ShowDataComparison(changes, title, getColumnLabel, equalCheck), sx: {
                     marginLeft: theme.spacing(1),
                     marginTop: theme.spacing(-0.5),
                     float: 'right'

package/lib/ShowDataComparison.d.ts

@@ -1,20 +1,15 @@
+import { AuditLineChangesDto } from '@etsoo/appscript';
 /**
- * Audit line update data model
- */
-export interface AuditLineUpdateData {
-    oldData: Record<string, unknown>;
-    newData: Record<string, unknown>;
-}
-/**
- * Check obj is instance of AuditLineUpdateData
+ * Check obj is instance of AuditLineChangesDto
  * @param obj Input
  * @returns Result
  */
-export declare function IsAuditLineUpdateData(obj: any): obj is AuditLineUpdateData;
+export declare function IsAuditLineUpdateData(obj: any): obj is AuditLineChangesDto;
 /**
  * Show data comparison
  * @param data Data
  * @param modelTitle Model window title
  * @param getLabel Get label callback
+ * @param equalCheck Equal check for properties
  */
-export declare const ShowDataComparison: (data: AuditLineUpdateData, modelTitle?: string, getLabel?: ((field: string) => string) | undefined) => void;
+export declare const ShowDataComparison: (data: AuditLineChangesDto, modelTitle?: string, getLabel?: ((field: string) => string) | undefined, equalCheck?: boolean) => void;

package/lib/ShowDataComparison.js

@@ -4,7 +4,7 @@ import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material'
 import React from 'react';
 import { globalApp } from './app/ReactApp';
 /**
- * Check obj is instance of AuditLineUpdateData
+ * Check obj is instance of AuditLineChangesDto
  * @param obj Input
  * @returns Result
  */
@@ -28,8 +28,9 @@ const formatValue = (value, app) => {
  * @param data Data
  * @param modelTitle Model window title
  * @param getLabel Get label callback
+ * @param equalCheck Equal check for properties
  */
-export const ShowDataComparison = (data, modelTitle, getLabel) => {
+export const ShowDataComparison = (data, modelTitle, getLabel, equalCheck = true) => {
     modelTitle !== null && modelTitle !== void 0 ? modelTitle : (modelTitle = globalApp.get('dataComparison'));
     getLabel !== null && getLabel !== void 0 ? getLabel : (getLabel = (key) => {
         var _a;
@@ -39,11 +40,13 @@ export const ShowDataComparison = (data, modelTitle, getLabel) => {
         ...Object.keys(data.oldData),
         ...Object.keys(data.newData)
     ]);
-    const rows = Array.from(keys).map((field) => ({
+    let rows = Array.from(keys).map((field) => ({
         field,
         oldValue: data.oldData[field],
         newValue: data.newData[field]
     }));
+    if (equalCheck)
+        rows = rows.filter((item) => !Utils.equals(item.oldValue, item.newValue));
     const inputs = (React.createElement(Table, null,
         React.createElement(TableHead, null,
             React.createElement(TableRow, null,

package/lib/TwoFieldInput.js

@@ -44,10 +44,8 @@ export function TwoFieldInput(props) {
             return '';
         if (typeof v === 'number')
             return v;
-        if (type === 'date')
-            return DateUtils.formatForInput(v);
-        if (type === 'datetime-local')
-            return DateUtils.formatForInput(v, true);
+        if (type === 'date' || type === 'datetime-local')
+            return DateUtils.formatForInput(v, type);
         return v;
     };
     React.useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/materialui",
-    "version": "1.0.67",
+    "version": "1.0.69",
     "description": "TypeScript Material-UI Implementation",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -51,10 +51,10 @@
         "@emotion/css": "^11.10.5",
         "@emotion/react": "^11.10.5",
         "@emotion/styled": "^11.10.5",
-        "@etsoo/appscript": "^1.3.29",
+        "@etsoo/appscript": "^1.3.30",
         "@etsoo/notificationbase": "^1.1.14",
         "@etsoo/react": "^1.6.24",
-        "@etsoo/shared": "^1.1.74",
+        "@etsoo/shared": "^1.1.75",
         "@mui/icons-material": "^5.10.9",
         "@mui/material": "^5.10.13",
         "@types/pica": "^9.0.1",

package/src/AuditDisplay.tsx

@@ -1,35 +1,35 @@
+import { AuditLineDto } from '@etsoo/appscript';
 import { Utils } from '@etsoo/shared';
 import { Button, Divider, Theme, Typography, useTheme } from '@mui/material';
 import React, { CSSProperties } from 'react';
 import { globalApp } from './app/ReactApp';
 import { ListMoreDisplay, ListMoreDisplayProps } from './ListMoreDisplay';
-import { AuditLineUpdateData, ShowDataComparison } from './ShowDataComparison';
-
-/**
- * Audit line data model
- */
-export interface AuditLine {
-    id: number;
-    creation: Date;
-    user: string;
-    action: string;
-    changes?: AuditLineUpdateData;
-}
+import { ShowDataComparison } from './ShowDataComparison';
 
 /**
  * Audit display props
  */
 export interface AuditDisplayProps
-    extends Omit<ListMoreDisplayProps<AuditLine>, 'children'> {
+    extends Omit<ListMoreDisplayProps<AuditLineDto>, 'children'> {
     /**
      * Get list item style callback
      */
     getItemStyle?: (index: number, theme: Theme) => CSSProperties;
 
+    /**
+     * Get column label
+     */
+    getColumnLabel?: (field: string) => string;
+
+    /**
+     * Equal check
+     */
+    equalCheck?: boolean;
+
     /**
      * Item/line renderer
      */
-    itemRenderer?: (data: AuditLine, index: number) => React.ReactNode;
+    itemRenderer?: (data: AuditLineDto, index: number) => React.ReactNode;
 }
 
 // Get label
@@ -64,15 +64,28 @@ export function AuditDisplay(props: AuditDisplayProps) {
                     ? theme.palette.grey[100]
                     : theme.palette.grey[50]
         }),
+        getColumnLabel,
+        equalCheck,
         itemRenderer = (data) => {
-            const changes = data.changes;
+            const {
+                newData,
+                oldData,
+                changes = { newData: newData ?? {}, oldData: oldData ?? {} }
+            } = data;
             return (
                 <React.Fragment>
                     {changes != null && (
                         <Button
                             variant="outlined"
                             size="small"
-                            onClick={() => ShowDataComparison(changes, title)}
+                            onClick={() =>
+                                ShowDataComparison(
+                                    changes,
+                                    title,
+                                    getColumnLabel,
+                                    equalCheck
+                                )
+                            }
                             sx={{
                                 marginLeft: theme.spacing(1),
                                 marginTop: theme.spacing(-0.5),
@@ -103,7 +116,7 @@ export function AuditDisplay(props: AuditDisplayProps) {
 
     // Layout
     return (
-        <ListMoreDisplay<AuditLine> headerTitle={headerTitle} {...rest}>
+        <ListMoreDisplay<AuditLineDto> headerTitle={headerTitle} {...rest}>
             {(data, index) => (
                 <div key={data.id} style={getItemStyle(index, theme)}>
                     {itemRenderer(data, index)}

package/src/ShowDataComparison.tsx

@@ -1,4 +1,4 @@
-import { IApp } from '@etsoo/appscript/lib/mjs/app/IApp';
+import { AuditLineChangesDto, IApp } from '@etsoo/appscript';
 import { NotificationMessageType } from '@etsoo/notificationbase';
 import { Utils } from '@etsoo/shared';
 import {
@@ -12,19 +12,11 @@ import React from 'react';
 import { globalApp } from './app/ReactApp';
 
 /**
- * Audit line update data model
- */
-export interface AuditLineUpdateData {
-    oldData: Record<string, unknown>;
-    newData: Record<string, unknown>;
-}
-
-/**
- * Check obj is instance of AuditLineUpdateData
+ * Check obj is instance of AuditLineChangesDto
  * @param obj Input
  * @returns Result
  */
-export function IsAuditLineUpdateData(obj: any): obj is AuditLineUpdateData {
+export function IsAuditLineUpdateData(obj: any): obj is AuditLineChangesDto {
     return (
         typeof obj === 'object' &&
         'oldData' in obj &&
@@ -46,11 +38,13 @@ const formatValue = (value: unknown, app: IApp) => {
  * @param data Data
  * @param modelTitle Model window title
  * @param getLabel Get label callback
+ * @param equalCheck Equal check for properties
  */
 export const ShowDataComparison = (
-    data: AuditLineUpdateData,
+    data: AuditLineChangesDto,
     modelTitle?: string,
-    getLabel?: (field: string) => string
+    getLabel?: (field: string) => string,
+    equalCheck: boolean = true
 ) => {
     modelTitle ??= globalApp.get<string>('dataComparison');
     getLabel ??= (key) => {
@@ -62,12 +56,17 @@ export const ShowDataComparison = (
         ...Object.keys(data.newData)
     ]);
 
-    const rows = Array.from(keys).map((field) => ({
+    let rows = Array.from(keys).map((field) => ({
         field,
         oldValue: data.oldData[field],
         newValue: data.newData[field]
     }));
 
+    if (equalCheck)
+        rows = rows.filter(
+            (item) => !Utils.equals(item.oldValue, item.newValue)
+        );
+
     const inputs = (
         <Table>
             <TableHead>

package/src/TwoFieldInput.tsx

@@ -83,8 +83,8 @@ export function TwoFieldInput(props: TwoFieldInputProps) {
     const formatValue = (v: ValueType, type?: string) => {
         if (v == null) return '';
         if (typeof v === 'number') return v;
-        if (type === 'date') return DateUtils.formatForInput(v);
-        if (type === 'datetime-local') return DateUtils.formatForInput(v, true);
+        if (type === 'date' || type === 'datetime-local')
+            return DateUtils.formatForInput(v, type);
         return v;
     };