sgc-share-lib v0.0.63

SgcShareLib

Share the basics Models for create custom SGC UI Components. This library implements the basic data structure used to describe SGC graphics components.

Data Structure

1. TFieldFormEditData

interface TFieldFormEditData {
  name?: string;
  value?: any;
  showLabel?: boolean;
  label?: string;
  required?: string | boolean;
  requiredMsg?: string;
  disabled?: boolean;
  classCssStyle?: string;
  hasSelectValues?: boolean;
  selectMultivalue?: boolean;
  listeSelectValues?: Array<TSgcOptionListeSelectValues>;
  typeFieldForm: TypeFieldFormEdit;
  isDisabled?: () => boolean; 
  isHide?: () => boolean;
  onChange?: (event?: any) => void;
  isDataValidate?: () => boolean;
  //---- For TEXT_FIELDEDITDATA ----------
  minLength?: number;
  maxLength?: number;
  showPrefixIcon?: boolean;
  prefixIcon?: string;
  showSuffixIcon?: boolean;
  suffixIcon?: string;
  showPrefixText?: boolean;
  prefixText?: string;
  showSuffixText?: boolean;
  suffixText?: string;
  //---- For TEXTAREA_FIELDEDITDATA (EXTEND TEXT_FIELDEDITDATA)
  rows?: number;
  cols?: number;
  //---- For NUMBER_FIELDEDITDATA (EXTEND TEXT_FIELDEDITDATA)
  showSpinner?: boolean;
  //---- For PASSWORD_FIELDEDITDATA (EXTEND TEXT_FIELDEDITDATA)
  hidePassword?: boolean;
  hidePasswordSymbol?: TypeHidePasswordSymbol;
  //---- For DATETIME_FIELDEDITDATA
  dateFormat?: string;
  dateSepFormat?: string;
  showTime?: boolean;
  //---- Use to align fields on the form
  rowNumberInForm?: number;
  widthInResponsiveGridWiew?: number;
  grilleFields?: TGrilleFieldsFormEdit;
}

2. TypeFieldFormEdit

enum TypeFieldFormEdit {
  TEXTE = 'TEXT',
  TEXTE_MULTILIGNE = 'TEXT_MULTILINE',
  TEXTE_SECRET = 'TEXT_SECRET',
  NOMBRE = 'NUMERIC',
  DATE_HEURE = 'DATE_HEURE',
  HEURE = 'HEURE',
  BOOLEEN = 'BOOLEAN',
  LISTE_OBJECT = 'LIST_OBJECT',
}

3. TOptionListeSelectValues

interface TOptionListeSelectValues {
  value: any;
  label: string;
  data?: any;
  items?: Array<TOptionListeSelectValues>;
}

4. TGrilleFieldsFormEdit

interface TRowGrilleFieldsFormEdit {
  indexRow: number;
  listeFieldsRow: TListeFieldFormEditData;
}

export interface TGrilleFieldsFormEdit {
  idGrilleFields: string;
  modeleRowFields: TRowGrilleFieldsFormEdit;
  listeRows: Array<TRowGrilleFieldsFormEdit>;
  showHeader: boolean;
  showColumnHeader: boolean;
  showFooter: boolean;
  showAddButton: boolean;
  showRemoveColumnOption: boolean;
  lastIndexRowFields: number;
  isHide?: () => boolean;
}

Default Constructor use to init TFieldFormEditData

const TFieldFormEditDataDefault: TFieldFormEditData = {
  showLabel: false,
  label: '',
  required: false,
  requiredMsg:'Required value',
  disabled: false,
  rowNumberInView: 1,
  widthInResponsiveGridWiew: 12,
  hasSelectValues: false,
  selectMultivalue: false,
  typeFieldForm: TypeFieldFormEdit.TEXTE,
}

Default parent class of each class definition of a graphic Component SGC UI

class BaseFieldFormEditUI {
  @Input() data!: TFieldFormEditData;
  @Output() dataChange: EventEmitter<T> = new EventEmitter<TFieldFormEditData>();
  
  isDisabled: ()=>boolean = ()=>{
    if (this.data?.isDisabled) {
      return this.data.isDisabled();
    } else if (this.data?.disabled) {
      return this.data.disabled;
    }
    return false; 
  }

  getLabel = (): string => {
    let myLabel = '';
    if (this.data.showLabel && this.data.label) {
      myLabel= this.data.label;
    }
    //myLabel+= (this.data.required ? ' *' : '');
    return myLabel;
  };

  isHide = (): boolean => {
    return (
      this.data != undefined &&
      this.data.isHide != undefined &&
      this.data.isHide()
    );
  };
}