ps-toolkit-ui 0.0.210 → 0.0.211

package/src/lib/classes/form.class.ts

@@ -0,0 +1,528 @@
+import {EnumUtils, InputError, InputType, Method} from './enum.class';
+import {HelperClass} from './helper.class';
+import {RequestClass} from './request.class';
+import {TableClass} from './table.class';
+import * as $ from 'jquery';
+import {ModalClass} from './modal.class';
+import * as _ from 'lodash';
+
+export class Progress {
+  constructor(secs: number) {
+    this.secs = this.remainSecs = secs;
+  }
+  secs: number;
+  remainSecs: number;
+  percent = 98;
+  interVal;
+  onEnd: () => void = null;
+  onStart: () => void = null;
+  start = () => {
+    this.remainSecs = this.secs;
+    this.percent = 98;
+    if (this.onStart){
+      this.onStart();
+    }
+    this.interVal = setInterval( () => {
+      this.percent = (this.remainSecs / this.secs) * 98;
+      if (this.remainSecs === 0){
+        clearInterval(this.interVal);
+        if (this.onEnd){
+          this.onEnd();
+        }
+      }
+      this.remainSecs -= 0.5;
+    }, 500);
+  }
+}
+export class FormClass {
+  constructor(environment: any, l: (k, v?) => string, name: string = null, permission: boolean = true,
+              url: string = null, cls: string = null) {
+    this.environment = environment;
+    this.l = l;
+    this.url = url;
+    this.baseUrl = url;
+    this.class = cls;
+    this.permission = permission;
+    this.name = name;
+    this.id = this.name;
+  }
+  l: (k, v?) => string;
+  permission: boolean;
+  environment: any = null;
+  name: string;
+  subName: string = null;
+  id: string;
+  class: string;
+  baseUrl: string;
+  url: string;
+  method: Method = Method.Post;
+  loading = false;
+  style: {};
+  onTop = false;
+  displayLabel = true;
+  inputs: InputClass[] = [];
+  onSuccessBase: (result) => void = null;
+  onSuccess: (result) => void = null;
+  onFailed: (result) => void = null;
+  onLoad: (result) => void = null;
+  onBeforeSubmit: () => boolean = null;
+  onHideModal: () => void = null;
+
+  loadData(url): void {
+    this.loading = true;
+    new RequestClass(this.environment, this.l).send(url, Method.Post, null, null, (result) => {
+      setTimeout(() => {
+        this.setData(result);
+        this.loading = false;
+        if (this.onLoad){
+          this.onLoad(result);
+        }
+      }, 500);
+    });
+  }
+  submit(onSubmit = null): void {
+    new RequestClass(this.environment, this.l).postForm(this, onSubmit);
+  }
+  check(): boolean {
+    let valid = true;
+    this.inputs.forEach(inp => {
+      if (!inp.isValid()) {
+        if (valid){
+          inp.focus();
+        }
+        valid = false;
+      }
+    });
+    return valid;
+  }
+  clear(): void {
+    this.method = Method.Post;
+    this.url = this.baseUrl;
+    this.setButtons(this.onTop, false);
+    this.clearInputs();
+  }
+  clearInputs(): void{
+    this.inputs.filter(x => x.type !== InputType.Constant).forEach(inp => {
+      inp.clear();
+    });
+  }
+  setButtons(formOnTop, edit: boolean, id = null): void {
+    const s = this.inputs.find(x => x.type === InputType.Submit);
+    if (!s){
+      return;
+    }
+    s.name = edit ? 'Accept' : 'Save';
+    s.class = edit ? s.class.replace('green', 'blue') : s.class.replace('blue', 'green');
+  }
+  addButtons(name = 'Save', cls = 'green', clear = true, onSubmit = null): void {
+    if (this.inputs.filter(x => x.type === InputType.Submit).length > 0){
+      return;
+    }
+    const br = new InputClass(this.environment, this.l, null, null, InputType.Label,
+      (this.onTop ? 'space' : 'underline') + (onSubmit === null ? '' : ' m-v-5'));
+    const save = new InputClass(this.environment, this.l, name, 'fa-duotone fa-check', InputType.Submit, 'w-30 f-l ' + cls + (onSubmit === null ? ' h-30' : ' h-25'));
+    save.onClick = () => {
+      this.submit(onSubmit);
+    };
+    this.inputs.push(br);
+    this.inputs.push(save);
+    if (clear){
+      const erase = new InputClass(this.environment, this.l, null, 'fa-duotone fa-eraser', InputType.Button,
+        'f-l w-u grey' + (onSubmit === null ? ' h-30' : ' h-25'));
+      erase.onClick = () => {
+        if (this.onTop){
+          this.clear();
+        }else{
+          this.clearInputs();
+        }
+      };
+      this.inputs.push(erase);
+    }
+  }
+  data(d = null): any {
+    if (this.inputs.findIndex(x => x.type === InputType.File) === -1){
+      if (d == null){
+        d = {};
+      }
+      this.inputs.forEach(inp => {
+        const vl = inp.data();
+        if (vl !== null){
+          _.set(d, inp.name, vl);
+        }
+      });
+    }else{
+      if (d == null){
+        d = new FormData();
+      }
+      this.inputs.forEach(inp => {
+        const vl = inp.data();
+        if (vl !== null){
+          if (vl instanceof Array){
+            for (const v of vl){
+              d.append(inp.name, v);
+            }
+          }else{
+            d.append(inp.name, vl);
+          }
+        }
+      });
+    }
+    return d;
+  }
+  json(d = null): {} {
+    if (d == null){
+      d = {};
+    }
+    this.inputs.forEach(inp => {
+      const vl = inp.data();
+      if (vl !== null && vl !== ''){
+        if (vl instanceof Array){
+          for (const v of vl){
+            d[inp.name] = v;
+          }
+        }else{
+          d[inp.name] = vl;
+        }
+      }
+    });
+    return d;
+  }
+  setData(d): void {
+    this.inputs.forEach(inp => {
+      const iv = _.get(d, inp.name);
+      if (inp.type === InputType.CarSearch){
+        const ivs = _.get(d, inp.name.replace('Id', ''));
+        inp.setValue({Search: ivs, Value: iv}, true);
+      }else if (inp.type !== InputType.Label || iv != null){
+        inp.setValue(iv, true);
+      }
+      if (inp.type === InputType.SelectAutoCompletePlaque || inp.type === InputType.SelectAutoComplete){
+        const ivs = _.get(d, inp.name.replace('Id', ''));
+        inp.setSearch(ivs);
+      }
+    });
+  }
+}
+
+export class InputClass {
+  constructor(environment: any, l: (k, v?) => string, name: string, icon: string = null,
+              type: InputType = InputType.Text, cls: string = '', value = null,
+              required: boolean = true, minLength = -1, maxLength = -1) {
+    this.environment = environment;
+    this.l = l;
+    this.name = name;
+    this.loadingName = name;
+    this.placeholder = name;
+    this.icon = icon;
+    this.class = cls + ([InputType.Mobile, InputType.Phone, InputType.Password, InputType.Email, InputType.Number, InputType.Price,
+      InputType.NationalCode, InputType.Sheba, InputType.PostalCode, InputType.Date, InputType.Time].includes(type) ? ' ltr' : '');
+    this.type = type;
+    this.value = value;
+    this.default = typeof value === 'number' ? _.cloneDeep(value) : HelperClass.clone(value);
+    this.required = required;
+    this.minLength = type === InputType.Mobile || type === InputType.Phone ? 11 :
+      type === InputType.NationalCode || type === InputType.PostalCode ? 10 :
+      type === InputType.Sheba ? 24 : minLength;
+    this.maxLength = type === InputType.Mobile || type === InputType.Phone ? 11 :
+      type === InputType.NationalCode || type === InputType.PostalCode ? 10 :
+      type === InputType.Sheba ? 24 : maxLength;
+  }
+  environment: any = null;
+  l: (k, v?) => string;
+  name: string;
+  url = null;
+  urlNewTab = false;
+  loadingName: string;
+  placeholder: string;
+  id: string;
+  icon: string;
+  addNew = false;
+  class: string;
+  description: string = null;
+  type: InputType;
+  value;
+  search;
+  default;
+  required: boolean;
+  disabled = false;
+  inEditDisabled = false;
+  inEditVisible = true;
+  displayLabel = true;
+  withClear = false;
+  minLength = -1;
+  maxLength = -1;
+  error: InputError = null;
+  loading = false;
+  button = null;
+  onClickButton: () => void = null;
+  progress: Progress = null;
+  onClick: (btn) => void = null;
+  onKeyUp: (inp) => void = null;
+  onKeyDown: (e) => void = null;
+  options: OptionClass[] = [];
+  match: InputClass = null;
+  rel: InputClass = null;
+  relUrl: string = null;
+  table: TableClass;
+  style = {};
+  position = 'bottom';
+  onChange: (v, e?) => void = null;
+  hover = -1;
+  visible = true;
+  exportPdf = false;
+  open = false;
+  multiple = false;
+  onlyChild = true;
+  allowed = null;
+  row = null;
+  rows = [];
+  index = 0;
+  level = null;
+  modal: ModalClass = null;
+  nameFun: (r) => void = null;
+  onFocusOut: (e) => void = () => {};
+  focus(changeIndex: boolean = false): void {}
+  changeType: (t: InputType) => void = () => {};
+  setValue: (v, isEdit) => void = (v, isEdit) => { this.value = v; };
+  setSearch: (v) => void = () => {};
+  clear: () => void = () => { this.value = null; };
+  focusOut: () => void = () => {};
+  data: () => any = () => {
+    return this.value;
+  }
+  isValid: () => boolean = () => {
+    return true;
+  }
+  load(u = null, done: () => void = null): void{
+    u = u ? u : this.url;
+    if (u){
+      this.options = [];
+      this.hover = -1;
+      this.index = 0;
+      this.rows = [];
+      if (typeof u === 'string') {
+        if (!u.includes('{}')){
+          new RequestClass(this.environment, this.l).send(u ? u : this.url, Method.Post, null, this, (result) => {
+            if (this.type === InputType.SelectSearch || this.type === InputType.Select || this.type === InputType.SelectAutoComplete ||
+              this.type === InputType.SelectAutoCompletePlaque || this.type === InputType.SelectAutoCompletePlaqueM) {
+              const r = this.getOptions(result, null);
+              const s = result.find(x => x.Selected);
+              if (s) {
+                this.value = s.Id.toString();
+              }
+              this.setOptions(r);
+            } else if (this.type === InputType.Tree) {
+              this.rows = this.getRows(result, null);
+            }
+            if (done) {
+              done();
+            }
+          });
+        }
+      }else{
+        const result = [];
+        EnumUtils.getKeysAndValues(u).forEach((k) => {
+          result.push({Name: this.l(k.key), Id: k.value.toString()});
+        });
+        const r = this.getOptions(result, null);
+        this.setOptions(r);
+      }
+    } else if (this.options instanceof Array){
+      this.options.forEach(x => x.index = this.index++);
+    }
+  }
+  setOptions(r): void{
+    this.options = r;
+    if (this.value != null){
+      setTimeout(() => {
+        this.setValue(this.value, true);
+      }, 500);
+    }
+  }
+  getOptions(r, p, tree = true): OptionClass[]{
+    return r.filter(x => (p == null && !x.ParentId) || x.ParentId === p || !tree)
+      .map((x) => {
+        const o = new OptionClass(x.Name, x.Id.toString());
+        if (this.type === InputType.SelectAutoCompletePlaque || this.type === InputType.SelectAutoCompletePlaqueM || this.name === 'CarId'){
+          const tn = o.name.split('_');
+          if (tn.length === 4){
+            tn[1] += '‎';
+            tn[2] += ' |';
+            o.name = tn.join(' ');
+          } else if (tn.length === 2){
+            o.name = tn.join(' ');
+          }
+        }
+        o.search = x.Search;
+        o.option = x;
+        o.index = this.index++;
+        o.options = tree ? this.getOptions(r, x.Id) : [];
+        return o;
+      });
+  }
+  getRows(r, p): TreeRowClass[]{
+    const l = [];
+    r.filter(x => (p == null && !x.ParentId) || x.ParentId === p).forEach((x) => {
+      let c = this.getRows(r, x.Id);
+      c = c.length > 0 ? c : x.Children ? x.Children.map(a => new TreeRowClass(a.Name, a.Id, a.Selected)) : [];
+      let s = x.Selected === true;
+      if (this.onlyChild){
+        s = c.length === 0 ? x.Selected : (c.find(y => y.selected === false || y.selected === null) == null ? true :
+          (c.find(y => y.selected === true || y.selected === null) != null ? null : false));
+      }
+      const n = this.nameFun ? this.nameFun(x) : x.Name;
+      l.push(new TreeRowClass(n, x.Id, s, c));
+    });
+    return l;
+  }
+  getLabel(): string {
+    return HelperClass.getLabel(this);
+  }
+}
+
+export class OptionClass {
+  constructor(name: string, value: string, options: OptionClass[] = [], cls: string = null) {
+    this.name = name;
+    this.value = value;
+    this.options = options;
+    this.class = cls;
+  }
+  option;
+  search: string;
+  class: string;
+  name: string;
+  value: string;
+  index: number;
+  show = true;
+  selected = false;
+  parent: OptionClass = null;
+  options: OptionClass[];
+  loading = false;
+}
+export class DayClass {
+  constructor(day: number, today: boolean, selected: boolean) {
+    this.day = day;
+    this.today = today;
+    this.selected = selected;
+  }
+  day: number;
+  today: boolean;
+  selected: boolean;
+}
+export class TreeRowClass {
+  constructor(name: string, value: string, selected: boolean = false, children: TreeRowClass[] = []) {
+    this.name = name;
+    this.value = value;
+    this.selected = selected;
+    this.children = children;
+  }
+  name: string;
+  value: string;
+  selected: boolean;
+  parent: TreeRowClass;
+  children: TreeRowClass[];
+  toggle(onlyChild: boolean = true): void {
+    if (this.selected){
+      this.unCheck(onlyChild);
+      if (onlyChild){
+        setTimeout(() => {this.unCheckParent(); });
+      }
+    }else{
+      this.check(onlyChild);
+      if (onlyChild){
+        setTimeout(() => {this.checkParent(); });
+      }
+    }
+  }
+  check(onlyChild: boolean, c: TreeRowClass = this): void {
+    c.selected = true;
+    if (onlyChild) {
+      c.checkChildren(onlyChild);
+    }
+  }
+  unCheck(onlyChild: boolean, c: TreeRowClass = this): void {
+    c.selected = false;
+    if (onlyChild) {
+      c.children.forEach((ch) => {
+        this.unCheck(onlyChild, ch);
+      });
+    }
+  }
+  checkChildren(onlyChild: boolean): void{
+    this.children.forEach((ch) => {
+      this.check(onlyChild, ch);
+    });
+  }
+  checkParent(p: TreeRowClass = this.parent): void{
+    if (p){
+      if (p.children.filter(x => !x.selected).length > 0){
+        p.selected = null;
+      }else{
+        p.selected = true;
+      }
+      this.checkParent(p.parent);
+    }
+  }
+  unCheckParent(p: TreeRowClass = this.parent): void{
+    if (p){
+      if (p.children.filter(x => x.selected || x.selected == null).length > 0){
+        p.selected = null;
+      }else{
+        p.selected = false;
+      }
+      this.unCheckParent(p.parent);
+    }
+  }
+}
+
+export class AccordionClass {
+  constructor(l: (k, v?) => string, name: string, cls: string = '', rows: AccordionRowClass[]) {
+    this.l = l;
+    this.name = name;
+    this.class = cls;
+    this.rows = rows;
+  }
+  l: (k, v?) => string;
+  name: string;
+  class: string;
+  rows: AccordionRowClass[];
+  hasDelete = false;
+  displayLabel = false;
+  loading = false;
+  onDelete: (row) => void = null;
+  check(): boolean{
+    for (const row of this.rows){
+      if (!row.form.check()){
+        row.open();
+        return false;
+      }
+    }
+    return true;
+  }
+}
+
+export class AccordionRowClass {
+  constructor(id: string, name: string, form: FormClass = null, table: TableClass = null) {
+    this.id = id;
+    this.name = name;
+    this.form = form;
+    this.table = table;
+  }
+  id: string;
+  name: string;
+  show = true;
+  form: FormClass;
+  table: TableClass;
+  toggle(): void {
+    setTimeout(() => {
+      $('#AccordionRow' + this.id + ' > .header').click();
+    }, 100);
+  }
+  open(): void {
+    setTimeout(() => {
+      if (!$('#AccordionRow' + this.id + ' > .content').hasClass('open')){
+        $('#AccordionRow' + this.id + ' > .header').click();
+      }
+    }, 100);
+  }
+}