@irontec/ivoz-ui 1.3.20 → 1.4.1

package/hygen/templates/entity/new/Entity.ejs.t

@@ -6,7 +6,6 @@ import EntityInterface from '@irontec-voip/ivoz-ui/entities/EntityInterface';
 import _ from '@irontec-voip/ivoz-ui/services/translations/translate';
 import defaultEntityBehavior from '@irontec-voip/ivoz-ui/entities/DefaultEntityBehavior';
 import { EntityValue } from '@irontec-voip/ivoz-ui';
-import selectOptions from './SelectOptions';
 import { <%= Name %>Properties, <%= Name %>PropertyList } from './<%= Name %>Properties';
 
 const properties: <%= Name %>Properties = {
@@ -19,9 +18,13 @@ const <%= Name %>: EntityInterface = {
   iden: '<%= Name %>',
   title: _('<%= Name %>', { count: 2 }),
   path: '/<%= h.inflection.pluralize(name) %>',
-  toStr: (row: <%= Name %>PropertyList<EntityValue>) => row.id.toStr(),
+  toStr: (row: <%= Name %>PropertyList<EntityValue>) => String(row.id),
   properties,
-  selectOptions,
+  selectOptions: async () => {
+    const module = await import('./SelectOptions');
+
+    return module.default;
+  },
   foreignKeyResolver: async () => {
     const module = await import('./ForeignKeyResolver');
 
@@ -30,7 +33,7 @@ const <%= Name %>: EntityInterface = {
   foreignKeyGetter: async () => {
     const module = await import('./ForeignKeyGetter');
 
-    return module.default;
+    return module.foreignKeyGetter;
   },
   Form: async () => {
     const module = await import('./Form');

package/hygen/templates/entity/new/Form.ejs.t

@@ -1,22 +1,12 @@
 ---
 to: src/entities/<%= Name %>/Form.tsx
 ---
-import useFkChoices from '@irontec-voip/ivoz-ui/entities/data/useFkChoices';
-import defaultEntityBehavior, { EntityFormProps, FieldsetGroups } from '@irontec-voip/ivoz-ui/entities/DefaultEntityBehavior';
+import { EntityFormProps, FieldsetGroups } from '@irontec-voip/ivoz-ui/entities/DefaultEntityBehavior';
 import _ from '@irontec-voip/ivoz-ui/services/translations/translate';
 import { Form as DefaultEntityForm } from '@irontec-voip/ivoz-ui/entities/DefaultEntityBehavior/Form';
-import { foreignKeyGetter } from './ForeignKeyGetter';
 
 const Form = (props: EntityFormProps): JSX.Element => {
 
-  const { entityService, row, match } = props;
-  const fkChoices = useFkChoices({
-    foreignKeyGetter,
-    entityService,
-    row,
-    match,
-  });
-
   const groups: Array<FieldsetGroups | false> = [
     {
       legend: _('Main'),
@@ -27,7 +17,7 @@ const Form = (props: EntityFormProps): JSX.Element => {
   ];
 
   return (
-        <DefaultEntityForm {...props} fkChoices={fkChoices} groups={groups} />
+        <DefaultEntityForm {...props} groups={groups} />
   );
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@irontec/ivoz-ui",
-  "version": "1.3.20",
+  "version": "1.4.1",
   "description": "UI library used in ivozprovider",
   "license": "GPL-3.0",
   "main": "index.js",

package/services/form/Field/FileUploader/FileUploader.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import { PropertyCustomFunctionComponentProps } from '../CustomComponentWrapper';
 export interface FileProps {
-    file?: File;
-    baseName?: string;
-    fileSize?: number;
-    mimeType?: string;
+    file?: File | null;
+    baseName?: string | null;
+    fileSize?: number | null;
+    mimeType?: string | null;
 }
 export interface ChangeEventValues {
     name: string;

package/services/form/Field/FileUploader/FileUploader.styles.js

@@ -6,6 +6,7 @@ export const StyledFileUploaderContainer = styled((props) => {
 })(() => {
     return {
         display: 'flex',
+        flexDirection: 'column',
         alignItems: 'center',
         gap: 'var(--spacing-md)',
         padding: 'var(--spacing-sm)',

package/services/form/Field/FileUploader/Variant/ImageFileUploader.js

@@ -13,9 +13,12 @@ import { useEffect, useState } from 'react';
 import _ from '../../../../translations/translate';
 import { StyledFileUploaderContainer, StyledImageContainer, StyledImagePreview, StyledTextContainer, StyledUploadButtonLabel, } from '../FileUploader.styles';
 import { useStoreActions } from '../../../../../store';
+import { StyledImageFileUpladerTextDield } from '../../TextField/TextField.styles';
+import { IconButton, InputAdornment } from '@mui/material';
+import CancelIcon from '@mui/icons-material/Cancel';
 export const ImageFileUploader = (props) => {
     var _a, _b;
-    const { _columnName, accept, values, disabled, handleDownload, changeHandler, onBlur, downloadPath, } = props;
+    const { _columnName, accept, values, disabled, handleDownload, changeHandler, onBlur, downloadPath, property, } = props;
     const fileValue = values[_columnName];
     const id = `${_columnName}-file-upload`;
     const fileName = (fileValue === null || fileValue === void 0 ? void 0 : fileValue.file) ? (_a = fileValue.file) === null || _a === void 0 ? void 0 : _a.name : fileValue === null || fileValue === void 0 ? void 0 : fileValue.baseName;
@@ -57,5 +60,21 @@ export const ImageFileUploader = (props) => {
                             };
                             changeHandler(changeEvent);
                             onBlur(changeEvent);
-                        } }), fileName && (_jsx(StyledImageContainer, Object.assign({ className: disabled ? 'disabled' : '' }, { children: imageSrc ? (_jsx(StyledImagePreview, { src: imageSrc, onClick: handleDownload })) : (values.id && _jsx(AccountCircleIcon, { onClick: handleDownload })) }))), _jsxs(StyledTextContainer, { children: [_jsx("span", { children: "JPG, JPEG, PNG format" }), _jsx("span", { children: "Maximum 500KB" }), !disabled && (_jsx(StyledUploadButtonLabel, Object.assign({ htmlFor: id }, { children: _('Upload image') }))), fileName && (_jsxs("span", { children: [fileName, " (", fileSizeMb, "MB)"] }))] })] }), _jsx("div", Object.assign({ className: 'uploader-backdrop' }, { children: "Image" }))] }));
+                        } }), fileName && (_jsx(StyledImageContainer, Object.assign({ className: disabled ? 'disabled' : '' }, { children: imageSrc ? (_jsx(StyledImagePreview, { src: imageSrc, onClick: handleDownload })) : (values.id && _jsx(AccountCircleIcon, { onClick: handleDownload })) }))), _jsxs(StyledTextContainer, { children: [_jsx("span", { children: "JPG, JPEG, PNG format" }), _jsx("span", { children: "Maximum 500KB" }), !disabled && (_jsx(StyledUploadButtonLabel, Object.assign({ htmlFor: id }, { children: _('Upload image') }))), fileName && (_jsxs("span", { children: [fileName, " (", fileSizeMb, "MB)"] })), fileName && !property.required && (_jsx(StyledImageFileUpladerTextDield, { type: 'text', multiline: false, value: fileName, hasChanged: false, disabled: true, InputProps: {
+                                    endAdornment: (_jsx(InputAdornment, Object.assign({ position: 'end' }, { children: _jsx(IconButton, Object.assign({ "aria-label": 'delete image', onClick: () => {
+                                                setImageSrc(null);
+                                                const changeEvent = {
+                                                    target: {
+                                                        name: _columnName,
+                                                        value: {
+                                                            baseName: null,
+                                                            file: null,
+                                                            fileSize: null,
+                                                            mimeType: null,
+                                                        },
+                                                    },
+                                                };
+                                                changeHandler(changeEvent);
+                                            } }, { children: _jsx(CancelIcon, {}) })) }))),
+                                } }))] })] }), _jsx("div", Object.assign({ className: 'uploader-backdrop' }, { children: "Image" }))] }));
 };

package/services/form/Field/TextField/TextField.styles.d.ts

@@ -1,5 +1,6 @@
 export declare const StyledTextField: import("@emotion/styled").StyledComponent<import("./TextField").TextFieldProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const StyledColorField: import("@emotion/styled").StyledComponent<((import("./TextField").TextFieldProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>) & {}) & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledImageFileUpladerTextDield: import("@emotion/styled").StyledComponent<((import("./TextField").TextFieldProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>) & {}) & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const StyledAutocompleteTextField: import("@emotion/styled").StyledComponent<((import("./TextField").TextFieldProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>) & {}) & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const StyledMultilangTextField: import("@emotion/styled").StyledComponent<((import("./TextField").TextFieldProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>) & {}) & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const StyledSearchTextField: import("@emotion/styled").StyledComponent<((import("./TextField").TextFieldProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>) & {}) & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/services/form/Field/TextField/TextField.styles.js

@@ -91,6 +91,14 @@ export const StyledColorField = styled(StyledTextField)(() => {
         },
     };
 });
+export const StyledImageFileUpladerTextDield = styled(StyledTextField)(() => {
+    return {
+        '& .MuiInputBase-input': {
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        },
+    };
+});
 export const StyledAutocompleteTextField = styled(StyledTextField)(() => {
     return {
         '& .input-field': {