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;