front-cms

Components list

functions

• getCurrencySymbol
• compose
• dateStringToJSFormat
• getNavigator
• parsePayload
• coolAsyncRequestXHTTP
• makeAsyncCancelable
• cancellableRequest
• coolRequest
• coolNumber
• CoolI18n
• coolPath
• AuthFactory

Providers (context)

• LanguageProvider
• RubriquesProvider
• withRubriques
• withLang
• AuthProvider
• withAuth
• withSocket
• withNotifications
• SearchProvider
• withSearch

React Components

• ButtonDelete (update OK)
• ButtonAddForm
• ButtonEditForm
• StandardTable (update OK)
• SearchAdvanced
• Treeview
• CoolForm (update OK)
• Form
• SocketProvider
• Screens
• ScreenStandard
• ScreenTabview
• EditionStandard
• Edition
• Progress
• SubBar
• Tabview
• Header

ButtonDelete

When To Use :

ButtonDelete is a simple component with a popconfirm on a button. The component call a props function when cancel or confirm.

Properties :

| Property | Description | Type | Default | ------ | ------ | ------ | ------ | | onConfirm | The callback function that is triggered when validate | function | - | | onCancel | The callback function that is triggered when validate | function | - | | route | redirect route if need | Object | - | | title | redirect route if need | String| "stdDelete" | ||||

Exemple :

<ButtonDelete
  onConfirm={deleteRow}
  onCancel={() => message.warn("Deletion aborted")}
  route={link}
/>

ButtonAddForm

When To Use :

ButtonAddForm is a component for add an entity, it's link to "Form". A button opens a form in a modal.

Properties :

| Property | Description | Type | Default | ------ | ------ | ------ | ------ | | icon | Define if the button is a label button or a icon button, if icon, you can pass a simple true for "pen" icon or antd component for an other | bool, object, string | false | | size | size of the button | small, large | - | | disabled | Disable the button | Boolean | false | | request | send a link to the form, only POST method is available | { href, method, title } | - | | exchangeInfo | | | | | hiddenInput | /!\ DEPRECATED , add value to the payload, but hide it in the form | object{} | - | | onSubmitted | The callback function that is triggered when the form is validate | function(payload) | - | | beforeSubmit | call a function at the first validation | function(payload) | | ||||

props :

ButtonAddForm.propTypes = {
  icon: PropTypes.bool,
  size: PropTypes.oneOf(["small", "large"]),
  disabled: PropTypes.bool,
  style: PropTypes.object,
  className: PropTypes.string,
  request: PropTypes.shape({
    href: PropTypes.string.isRequired,
    method: PropTypes.oneOf(["POST"]).isRequired,
    payload: PropTypes.arrayOf(PropTypes.object).isRequired
  }),
  exchangeInfo: PropTypes.object,
  onSubmitted: PropTypes.func,
  beforeSubmit: PropTypes.shape({
    action: PropTypes.shape({
      href: PropTypes.string.isRequired,
      method: PropTypes.string.isRequired,
      title: PropTypes.string.isRequired
    }),
    callback: PropTypes.func.isRequired
  })
};

Exemple :

<ButtonAddForm request={post} onSubmitted={handleSubmitted} />

ButtonEditForm

When To Use :

buttonEditForm is a component for update or copy an entity, it's link to "EditionStandard". A button opens a form in a page or in a modal.

Properties :

| Property | Description | Type | Default | ------ | ------ | ------ | ------ | | uuidPosition | The position of UUID, "content" is in body of modal, inHeader is on the right of modal header | content, inHeader | content | | modal | open form in modal or in a new page | Boolean | true | | dividerPosition | Define the position of line under item of form | int[] | - | | icon | Define if the button is a label button or a icon button, if icon, you can pass a simple true for "pen" icon or antd component for an other | bool, object, string | false | | size | size of the button | small, large | - | | disabled | Disable the button | Boolean | false | | item | send a complete item to the form, used when a PUT is available | { uuid: string, _links: object } | - | | request | send a link to the form, used when a GET is available | { href, method, title } | - | | hiddenInput | /!\ DEPRECATED , add value to the payload, but hide it in the form | object{} | - | | onSubmitted | The callback function that is triggered when the form is validate | function(payload) | - | ||||

PropTypes :

ButtonEditForm.propTypes = {
  uuidPosition : PropTypes.oneOf(["content", "inHeader"]),
  modal : PropTypes.bool,
  dividerPosition : PropTypes.array,
  icon: PropTypes.oneOfType([bool, object, string]),
  size: PropTypes.oneOf(["small", "large"]),
  disabled: PropTypes.bool,
  style: PropTypes.object,
  className: PropTypes.string,
  item: PropTypes.shape({
    uuid: PropTypes.string.isRequired,
    _links: PropTypes.shape({
      _methods: PropTypes.arrayOf([
        PropTypes.shape({
          method: PropTypes.oneOf(["PUT"]).isRequired,
          //href: PropTypes.string.isRequired,
          payload: PropTypes.object.isRequired,
        }),
      ]),
    }),
  }),
  // request: PropTypes.shape({
  //   href: PropTypes.string.isRequired,
  //   method: PropTypes.oneOf(["GET", "PUT"]).isRequired,
  //   title: PropTypes.string,
  // }),
  exchangeInfo: PropTypes.object,
  onSubmitted: PropTypes.func,
  beforeSubmit: PropTypes.shape({
    action: PropTypes.shape({
      // href: PropTypes.string.isRequired,
      method: PropTypes.string.isRequired,
      title: PropTypes.string.isRequired,
    }),
    callback: PropTypes.func.isRequired,
  }),
};

Exemple :

<ButtonEditForm
  item={!getObject ? node : undefined}
  request={getObject ? getObject : putObject}
  onSubmitted={() => requestTree(apiURL)}
  icon
/>

StandardTable

Datatable page with :

• Datatable (Ant design Table) linked to hypermedia.
• Rows are _embeded content with delete action (_embede[n]._links.method[n].method:"DELETE" ) and edition action (_embede[n]._links.method[n].method:"PUT" or "GET" )
• Columns are indicate in metadata
• Button on Top Right for add row (Ant design Table) linked to hypermedia. (_links>add)
• SimpleSearch or AdvancedSearch comonent on Top Left (_links>search)

DEMO

Props in action

When can it be use

use StandardTable to create tables and their functions for editing, searching, adding, deleting, directly with the information provided by the back

Exemples

Standard usage with hypermedia

 <StandardTable
    route={
      {
        name: "production-tasks",
        method: "GET",
        href: "https://ms-xxx.local/v1/workorder"
      }
    }     
/>

Properties :

|Property|Description|Type|Default |-|-|-|-| noRowClick|Rows of datatable are not clickable, generaly it's swap by ButtonEditForm|Boolean|false| editable|Rows are editable (need replace by readOnly)|Boolean|true| editInModal|The edition of row is open in modal when true |Boolean|false| pagination|PAS TRES CLAIRE|Boolean|true| detailPath|edition route when not editInModal|Object|-| renderActions|Add action button in the last col of all row (need improve with methodActions)|function|-| methodActions|/!\ DEPRECATED , last param of render actionfunction (need improve with renderActions)|all|-| showSearch|indicate if search component is show or hidden|Boolean|true| showAdd|indicate if ButtonAddForm component is show or hidden|Boolean|true| opteamusHeader|USELESS but need clean|-|-| opteamusRow|???|???|???| lineClick|specific action on row click (USE only with noRowClick===true|function|-| iconRow|add column with icon (CHELOU)|-|-| hiddenInput|/!\ DEPRECATED , Add hidden fields to ButtonAddForm and ButtonEditForm (need simplification because formParam)|Object|-| afterChange|Array of parent function call after ADD/PUT/DELETE |fuction[]|-| route|-|-|-| size|Number of Row of datatable|Integer|10| addHrefParam|Parameter to add to getdata href api|String|-| rowSelection|indicate if rows are selectable and if a button are present for action (need dev investigation)|Object|false| messageDeleteLine|Specifique message in popconfirm of ButtonDelete when delete Row (need to add in translation with 'delete.' key)|String|'stdDelete'| specificNumberFormat|allow to format value of culumn (exemple for currency|Obect|-| router|USELESS|-|-| source|USELESS|-|-| strictEdition|??? JF|-|-| columnsWidth|Array of integer indicate the with of columns |array|-| formParam|Add props to coolform (only nbCol curently) /!\ addPropsToField exist in coolform|Object|-| parent|USELESS|-|-|

SearchAdvanced

props

• routeKey : string
• request : payload
• onSubmitted : function

Exemple :

<SearchAdvanced
  routeKey={label}
  request={searchLink[0]}
  onSubmitted={advancedSearchValidation}
/>

Treeview

Exemples

<Treeview pop={props.pop} request={request} paper={false}/>

<Treeview dataApi={responseApi} uuid={id} paper={false} />

LanguageProvider, withLang

LanguageProvider

React context language (place it in index.js off target app)

withLang

Hight order component

CoolForm

CoolForm enables automation of form creation. CoolForm use WrappedComponent of front-cms. Extremely modular, CoolForm includes all the options of hypermedia APIs (filterBy, depend_on, validators, ...).

When can it be use

use coolform to create forms without code, directly with the information provided by the back.

Exemples

Standard usage with hypermedia

<CoolForm
  request={request}
  item={item}
  onSubmitted={(e) => console.log(e)}
/>

full front creation methode

<CoolForm
  onSubmitted={this.handleSubmitted}
  request={
    {
      href : https://...,
      method : 'post',
      title : 'add data,
      payload: [
        {
          name: "company_name",
          type: "string",
          mandatory: true,
        },
        {
          name: "activities",
          type: "collection",
          multiple: true,
          href: "https://...",
          mandatory: true,
        },
      ],
    }}
  item={{
    company_name: 'my company name',
    activities: { uuid: "123ABC" }
  }
  }
  onSubmitted={console.log(e)}
/>

Properties :

| Property | Description | Type | Default | ------ | ------ | ------ | ------ | | request | Object {name, payload, href, methode}. The payload define form fields. Method and href are the endpoint of validation form| Object | null | | hiddenInput | /!\ DEPRECATED , it's an Object that will be send to the validation endpoint at the same time that the payload | Object | null | | addFields | it's an array field who add to the request payload | Array | [] | | lang | lang is requested for translate item | string | 'us-en' | | formName | the name of form , it's important if you have more than one form in the same page | string | MyCoolForm | | item | every fields can have default value, if initialValues is empty, fields are full by defauklt of payload | Array | null | | onSubmitted | the send of values to the request endpoint is automatic, but you can call fuction after send | Function | null | | nbCol | number of column of the form | integer | 1 | | isSearch | the form can be a seach form, in this case CoolForm add button 'save', 'clean', 'search' and add tag of current values | Boolean | false | | addPropsToField | all fields of request payload can be surcharged by props | Array | null | validateOnChange | in case of search, this props send values on onchange of fields | Boolean | false

Form

proptypes

Form.propTypes = {
  request: PropTypes.shape({
    href: PropTypes.string.isRequired,
    method: PropTypes.oneOf(["POST", "PUT", "PATCH"]).isRequired,
    payload: PropTypes.arrayOf(PropTypes.object).isRequired
  }),
  item: PropTypes.object,
  exchangeInfo: PropTypes.object,
  close: PropTypes.func,
  beforeSubmit: PropTypes.shape({
    action: PropTypes.shape({
      title: PropTypes.string.isRequired
    }),
    callback: PropTypes.func.isRequired
  }),
  hiddenInput: PropTypes.object,
  onSubmitted: PropTypes.func
};

Exemple

<Form
    request={request}
    item={item}
    close={close}
    exchangeInfo={exchangeInfo}
    beforeSubmit={beforeSubmit}
    hiddenInput={hiddenInput}
    onSubmitted={onSubmitted}
/>

Auth

Keycloack & Azure authentification service :

• init()
• getToken()
• updateToken()
• logout()

AuthProvider, withAuth

AuthProvider

React context Authentication (place it in index.js off target app)

withAuth

Hight Order component