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;
}

|Propriété|Type données|Description| |---|:---:|---| |name|string|Nom utilisé pour identifier le composant| |value|any|Valeur saisie/affichée dans le champ| |showLabel|boolean|Détermine si oui ou non on affiche le titre du composant graphique| |label|string|Titre du composant graphique| |required|string | boolean|Indique si oui ou non le champ requiert une valeur| |requiredMsg|string|Message à renvoyer si aucune valeur n'est saisie dans le composant graphique| |disabled|boolean|Indique si oui ou non le composant graphique est désactivé| |classCssStyle|string|classe CSS utilisée pour personnaliser l'affichage du composant graphique| |typeFieldForm|TypeFieldFormEdit|Propriété permettant d'indiquer le type de composant graphique à utiliser pour effectuer la saisie des données| |hasSelectValues|boolean|Indique si oui ou non le composant permet de sélectionner la valeur dans une liste prédéfinie de valeurs| |selectMultivalue|boolean|Indique si oui ou non le composant va permettre une sélection multiple de valeurs| |listeSelectValues|Array (TOptionListeSelectValues)|Liste des valeurs utilisés pour la sélection de la valeur du composant| |isDisabled()|boolean|Fonction utilisée pour déterminer si oui ou non le composant graphique doit être désactivé. Si cette fonction est définie, alors le comportement du composant est définie par cette fonction et non par la propriété "disabled" | |isHide()|boolean|Fonction utilisée pour déterminer si oui ou non le composant doit être masqué dans le formulaire| |onChange()|void|Fonction utilisée pour déterminer l'action à mener lorsque la valeur du composant est modifié| |isDataValidate()|boolean|Fonction utilisée pour déterminer si oui ou non la valeur renseignée dans le composant graphique est valide| |rowNumberInForm|number|Numéro de la ligne utilisée pour l'affichage du composant graphique dans le formulaire| |widthInResponsiveGridWiew|number|Largeur du composant sur la ligne (1-12)| |grilleFields|TGrilleFieldsFormEdit|Propriété permettant de paramétrer la saisie dynamique d'une liste de données| |minLength|number|Nombre minimum de caractères à saisir dans le composant texte| |maxLength|number|Nombre maximum de caractères à saisir dans le composant texte| |showPrefixIcon|boolean|Active l'affichage d'une icône à gauche du composant de saisi| |prefixIcon|string|nom de l'icone (material) à afficher à gauche du composant de saisi| |showSuffixIcon|boolean|Active l'affichage d'une icône à droite du composant de saisi| |suffixIcon|string|nom de l'icône (material) à afficher à droite du composant de saisi| |showPrefixText|boolean|Permet de positionner un texte comme préfixe du composant de saisi| |prefixText|string|Texte à afficher comme préfixe| |showSuffixText|boolean|Permet de positionner un texte comme suffixe du composant de saisi| |suffixText|string|Texte à afficher comme suffixe| |rows|number|Nombre de lignes visible par défaut| |cols|number|Nombre de colonnes visible par défaut| |showSpinner|boolean|Indique si oui ou non le composant affiche les flêches permettant d'incrémenter ou de décrémenter la valeur saisie dans dans le composant| |hidePassword|boolean|Indique si oui ou non le composant masque le texte saisi| |hidePasswordSymbol|Enum TSgcHidePasswordSymbol|Indique le symbole à utiliser pour masquer le texte| |dateFormat|string|Format utilisé pour afficher la date : yyyymmddyyyyddmmddmmyyyymmddyyyy| |dateSepFormat|sring|Séparateur des éléments de la date: / (slash)- (hyphen). (dot)| |showTime|boolean|Détermine si oui ou non le composant affiche également l'heure|

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>;
}

|Propriété|Type données|Description| |---|:---:|---| |label|string|Titre correspondant à un élément affiché dans la liste | |value|any|Valeur de l'élément dans la liste| |data|any|Autres données pouvant être liées à un élément de la liste| |items|Array (TOptionListeSelectValues)|Liste des sous éléments correspondant à un élément de la liste|

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()
    );
  };
}

|Propriété|Type données|Description| |---|:---:|---| |data|T (Input property of generic type T)|Modèle de données utilisé par tout composant graphique| |dataChange|EventEmitter <T> (Output property)|Action à effectuer lorsque la valeur du composant est modifiée.| |isDisabled|boolean (function)|Fonction par défaut qui détermine l'état actif/inactif du composant.| |getLabel|string (function)|Retourne le label du composant graphique.| |isHide|boolean (function)|Fonction par défaut qui détermine l'état visible/masqué du composant graphique.|