Merge pull request #101 from irontec/color-picker

Added color picker field type

demo/api/assets/docs.json

@@ -3566,6 +3566,11 @@
           "description": "",
           "type": "string"
         },
+        "color": {
+          "maxLength": 15,
+          "description": "",
+          "type": "string"
+        },
         "customTabUrl": {
           "default": "",
           "maxLength": 512,

demo/src/entities/Client/Client.tsx

@@ -17,6 +17,11 @@ const properties: ClientProperties = {
       'Used at login screen in username field after user_name@. Cannot contain whitespaces.'
     ),
   },
+  color: {
+    label: _('Color'),
+    format: 'color',
+    default: '#000000',
+  },
   domain: {
     label: _('Domain'),
     helpText: _(

demo/src/entities/Client/ClientProperties.ts

@@ -7,6 +7,7 @@ import {
 export type ClientPropertyList<T> = {
   id?: T;
   iden?: T;
+  color?: T;
   domain?: T;
   language?: T;
   desktopLicences?: T;

demo/src/entities/Client/Form.tsx

@@ -35,6 +35,7 @@ const Form = (props: EntityFormProps): JSX.Element => {
         create && 'platform',
         showRemoteId && 'remoteId',
         'iden',
+        'color',
         {
           name: 'description',
           size: {

demo/src/router/AppRoutes.tsx

@@ -38,7 +38,7 @@ export default function AppRoutes(props: AppRoutesProps) {
 
   routeSpecs.map((route: RouteSpec) => {
     routes.push({
-      path: baseUrl + "/" + route.path.substring(1),
+      path: `${baseUrl}/${route.path.substring(1)}`,
       element: (
         <AppRouteContentWrapper loggedIn={true} routeMap={entityMap}>
           <RouteContent route={route} routeMap={entityMap} {...props} />

library/package.json

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

library/src/components/List/Content/ListContent.styles.tsx

@@ -1,79 +1,78 @@
-import { Fab, Theme } from '@mui/material';
-import { styled } from '@mui/material';
+import { Fab, Theme, styled } from '@mui/material';
+import { forwardRef } from 'react';
 import HistoryTrackerLink, {
   HistoryTrackerLinkProps,
 } from '../../../components/shared/HistoryTrackerLink';
-import { forwardRef } from 'react';
 import ListContent from './ListContent';
 
-export const StyledListContent = styled(ListContent)(
-  ({ theme }: { theme: Theme }) => {
-    return {
+export const ListContentStyler = ({ theme }: { theme: Theme }) => {
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 'var(--spacing-md)',
+
+    '& .list-content-header': {
       display: 'flex',
-      flexDirection: 'column',
-      gap: 'var(--spacing-md)',
+      gap: 'var(--spacing-sm)',
+      justifyContent: 'space-between',
+    },
 
-      '& .list-content-header': {
-        display: 'flex',
-        gap: 'var(--spacing-sm)',
-        justifyContent: 'space-between',
+    '& .buttons': {
+      display: 'flex',
+      gap: 'var(--spacing-sm)',
+      alignItems: 'center',
+      '&.start': {
+        flexShrink: 1,
+        minWidth: 0,
       },
-
-      '& .buttons': {
-        display: 'flex',
-        gap: 'var(--spacing-sm)',
-        alignItems: 'center',
-        '&.start': {
-          flexShrink: 1,
-          minWidth: 0,
-        },
-        '&.end': {
-          flexShrink: 0,
-        },
+      '&.end': {
+        flexShrink: 0,
       },
+    },
 
-      '.text-field': {
-        width: 'unset',
-      },
+    '.text-field': {
+      width: 'unset',
+    },
 
-      '& .input-field': {
-        background: 'var(--color-background)',
-        color: 'var(--color-text)',
-        [theme.breakpoints.down('md')]: {
-          background: 'var(--color-background-elevated)',
-        },
+    '& .input-field': {
+      background: 'var(--color-background)',
+      color: 'var(--color-text)',
+      [theme.breakpoints.down('md')]: {
+        background: 'var(--color-background-elevated)',
       },
+    },
 
-      '.filter-chips': {
-        display: 'flex',
-        gap: 'var(--spacing-sm)',
-        flexShrink: '1',
-        overflow: 'auto',
-        paddingBottom: '2px',
+    '.filter-chips': {
+      display: 'flex',
+      gap: 'var(--spacing-sm)',
+      flexShrink: '1',
+      overflow: 'auto',
+      paddingBottom: '2px',
 
-        '&::-webkit-scrollbar': {
-          height: '6px',
-        },
+      '&::-webkit-scrollbar': {
+        height: '6px',
+      },
 
-        '&::-webkit-scrollbar-thumb': {
-          borderRadius: '6px',
-          background: 'var(--color-button)',
-        },
+      '&::-webkit-scrollbar-thumb': {
+        borderRadius: '6px',
+        background: 'var(--color-button)',
+      },
 
-        '&::-webkit-scrollbar-thumb:hover': {
-          background: 'var(--color-border)',
-        },
+      '&::-webkit-scrollbar-thumb:hover': {
+        background: 'var(--color-border)',
       },
+    },
 
-      '& .card': {
-        paddingBottom: 0,
-        [theme.breakpoints.down('md')]: {
-          paddingBlock: 0,
-        },
+    '& .card': {
+      paddingBottom: 0,
+      [theme.breakpoints.down('md')]: {
+        paddingBlock: 0,
       },
-    };
-  }
-);
+    },
+  };
+};
+
+export const StyledListContent = styled(ListContent)(ListContentStyler as any);
 
 export const StyledActionButtonContainer = styled('div')(() => {
   return {

library/src/components/Login/Login.styles.tsx

@@ -3,7 +3,6 @@ import Login from './Login';
 import { styled, Theme } from '@mui/material';
 
 export const StyledLogin = styled(Login)(({ theme }: { theme: Theme }) => {
-
   const baseUrl = process.env.BASE_URL || '/';
 
   return {

library/src/services/api/ParsedApiSpecInterface.ts

@@ -56,7 +56,13 @@ export interface visualToggle {
 }
 
 type PropertyType = 'array' | 'file' | 'boolean' | 'integer' | 'string';
-type PropertyFormat = 'date-time' | 'date' | 'time' | 'textarea' | 'password';
+type PropertyFormat =
+  | 'date-time'
+  | 'date'
+  | 'time'
+  | 'textarea'
+  | 'password'
+  | 'color';
 
 export interface ScalarProperty {
   type?: PropertyType;

library/src/services/form/Field/TextField/TextField.styles.tsx

@@ -91,6 +91,17 @@ export const StyledTextField = styled(TextField)(() => {
   };
 });
 
+export const StyledColorField = styled(StyledTextField)(() => {
+  return {
+    '& input[type=color]': {
+      padding: '0 2px',
+      minHeight: '40px',
+      borderRadius: '18px',
+      overflow: 'hidden',
+    },
+  };
+});
+
 export const StyledAutocompleteTextField = styled(StyledTextField)(() => {
   return {
     '& .input-field': {

library/src/services/form/FormFieldFactory/Factory/ColorFactory.tsx

@@ -0,0 +1,66 @@
+import {
+  InputAdornment,
+  InputBaseComponentProps,
+  OutlinedInputProps,
+} from '@mui/material';
+import { FormOnChangeEvent } from '../../../../entities/DefaultEntityBehavior/Form/Form';
+import { ScalarProperty } from '../../../api';
+import { ScalarEntityValue } from '../../../entity';
+import { StyledColorField } from '../../Field/TextField/TextField.styles';
+
+type ColorFactoryPropsType = {
+  fld: string;
+  property: ScalarProperty;
+  disabled: boolean;
+  value: ScalarEntityValue | Array<ScalarEntityValue>;
+  hasChanged: boolean;
+  error: React.ReactNode;
+  touched: boolean | undefined;
+  inputProps: InputBaseComponentProps;
+  InputProps: Partial<OutlinedInputProps>;
+  changeHandler: (event: FormOnChangeEvent) => void;
+  handleBlur: (event: React.FocusEvent) => void;
+};
+
+export const ColorFactory = (props: ColorFactoryPropsType): JSX.Element => {
+  const {
+    fld,
+    property,
+    disabled,
+    value,
+    hasChanged,
+    error,
+    touched,
+    inputProps,
+    InputProps,
+    changeHandler,
+    handleBlur,
+  } = props;
+
+  if (!InputProps.endAdornment) {
+    InputProps.endAdornment = (
+      <InputAdornment position='end'>
+        <span>{value}</span>
+      </InputAdornment>
+    );
+  }
+
+  return (
+    <StyledColorField
+      name={fld}
+      type={'color'}
+      value={value}
+      disabled={disabled}
+      label={property.label}
+      required={property.required}
+      onChange={changeHandler}
+      onBlur={handleBlur}
+      error={touched && Boolean(error)}
+      errorMsg={touched && error}
+      helperText={property.helpText}
+      InputProps={InputProps}
+      inputProps={inputProps}
+      hasChanged={hasChanged}
+    />
+  );
+};

library/src/services/form/FormFieldFactory/Factory/index.ts

@@ -10,6 +10,7 @@ import { PasswordFactory } from './PasswordFactory';
 import { SwitchFactory } from './SwitchFactory';
 import { TextareaFactory } from './TextareaFactory';
 import { TimeFactory } from './TimeFactory';
+import { ColorFactory } from './ColorFactory';
 
 export {
   AutocompleteFactory,
@@ -24,4 +25,5 @@ export {
   SwitchFactory,
   TextareaFactory,
   TimeFactory,
+  ColorFactory,
 };

library/src/services/form/FormFieldFactory/FormFieldFactory.tsx

@@ -33,6 +33,7 @@ import {
   SwitchFactory,
   TextareaFactory,
   TimeFactory,
+  ColorFactory,
 } from './Factory/index';
 
 export type NullableFormFieldFactoryChoices = null | DropdownChoices;
@@ -308,6 +309,24 @@ export default class FormFieldFactory {
         );
       }
 
+      if (property.format === 'color') {
+        return (
+          <ColorFactory
+            fld={fld}
+            property={property}
+            disabled={disabled}
+            value={value}
+            hasChanged={hasChanged}
+            error={error}
+            touched={touched}
+            inputProps={inputProps}
+            InputProps={InputProps}
+            changeHandler={this.changeHandler}
+            handleBlur={this.handleBlur}
+          />
+        );
+      }
+
       return (
         <InputTextFactory
           fld={fld}

library/src/store/theme.ts

@@ -12,9 +12,9 @@ export interface ThemeState {
 }
 
 interface ThemeActions {
-  setName: Action<ThemeState>;
-  setTheme: Action<ThemeState>;
-  setLogo: Action<ThemeState>;
+  setName: Action<ThemeState, string>;
+  setTheme: Action<ThemeState, string>;
+  setLogo: Action<ThemeState, string>;
 }
 
 export type ThemeStore = ThemeState & ThemeActions;