ps-toolkit-ui 0.0.210 → 0.0.211

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

@@ -0,0 +1,228 @@
+import {ModalClass} from './modal.class';
+import {FormClass, InputClass} from './form.class';
+import {
+  InputType,
+  Method,
+  PermissionAccessTypeEnum,
+  PermissionInputActionEnum,
+  PermissionInputTypeEnum,
+  PermissionTypeEnum,
+  TableCollType,
+  TableOptionType
+} from './enum.class';
+import {RequestClass} from './request.class';
+import {PermissionClass} from './permission.class';
+import {HelperClass} from './helper.class';
+import * as $ from 'jquery';
+
+export class TableClass {
+  constructor(environment: any, l: (k, v?) => string, permissions: PermissionClass, name: string = '', cls: string = '',
+              perPage: number = 10, height: number = 50) {
+    this.environment = environment;
+    this.l = l;
+    this.name = name;
+    this.id = this.name;
+    this.permissions = permissions;
+    this.class = cls;
+    this.perPage = perPage;
+    this.height = height;
+  }
+  environment: any = null;
+  l: (k, v?) => string;
+  permissions: PermissionClass;
+  permission = true;
+  name: string;
+  id: string;
+  class: string;
+  style = {};
+  url = null;
+  method: Method = Method.Post;
+  height = 40;
+  perPage = 10;
+  cols: TableCollClass[] = [];
+  buttons: InputClass[] = [];
+  optionsActions: any[] = [];
+  rows = [];
+  count = 0;
+  page = 1;
+  sort = null;
+  queryParams = {};
+  title = null;
+  description = null;
+  sortType = null;
+  displayLabel = true;
+  sortable = false;
+  optionType = TableOptionType.Hidden;
+  loading = true;
+  hasStatus = false;
+  hasChildren = false;
+  childrenAutoLoad = false;
+  withSelect = false;
+  showExtraButtons = true;
+  extraButtons: InputClass[] = [];
+  form: FormClass = null;
+  searchForm: FormClass = null;
+  modal: ModalClass = null;
+  level = null;
+  onLoad: () => void = null;
+  onSort: () => void = null;
+  showConfirm: (l: string, url: string, data, accept: (btn: InputClass) => void) => void = null;
+  load(btn = null): void{
+    if (this.url){
+      new RequestClass(this.environment, this.l).table(this, btn);
+    }else{
+      this.loading = false;
+    }
+  }
+
+  searchData(report = false): {} {
+    const d: any = {};
+    if (!report){
+      d.Page = this.page;
+      d.PerPage = this.perPage;
+    }
+    if (this.sortable){
+      d.Sort = 'Priority';
+      d.SortType = 'ASC';
+    }else if (this.sort){
+      d.Sort = this.sort;
+      d.SortType = this.sortType;
+    }
+    for (const c of this.cols.filter(x => x.withSearch && x.search != null && x.search.data() != null && x.search.data() !== '')){
+      d[c.name] = c.search.data();
+    }
+    return this.searchForm ? this.searchForm.json(d) : d;
+  }
+  getUrl(): string {
+    return this.url + 'List';
+  }
+  showInsertModal(cId = null): void {
+    const insertAccess = this.permissions.getAccess(PermissionAccessTypeEnum.Insert);
+    this.form.url = this.form.baseUrl = this.url + 'Insert' + (cId ? '/' + cId : '');
+    this.form.name = insertAccess.Name;
+    this.form.method = Method.Post;
+    this.form.inputs.filter(x => x.inEditDisabled).forEach(x => x.disabled = false);
+    this.form.inputs.filter(x => !x.inEditVisible).forEach(x => x.visible = true);
+    this.modal.show();
+  }
+  set(changeRows = null): void{
+    this.permission = true;
+    if (this.permissions)
+    {
+      const listAccess = this.permissions.getAccess(PermissionAccessTypeEnum.List);
+      if (listAccess !== null){
+        this.title = listAccess.Name;
+        this.url = this.permissions.getUrl();
+        if (this.permissions.Type !== PermissionTypeEnum.Form){
+          this.load();
+        }else{
+          this.loading = false;
+        }
+      }
+    }else{
+      this.permission = false;
+      return;
+    }
+    for (const access of this.permissions.getAccesses().filter(x => x.InputAction !== PermissionInputActionEnum.None)){
+      if (this.buttons.filter(x => x.name === access.Name).length > 0){
+        continue;
+      }
+      const accessInp = new InputClass(this.environment, this.l, access.Name, access.Icon,
+        access.InputType === PermissionInputTypeEnum.Button ? InputType.Button : InputType.Icon, 'blue w-u h-30');
+      if (access.AccessType === PermissionAccessTypeEnum.Insert){
+        accessInp.class = accessInp.class.replace('blue', 'green');
+        if (this.form){
+          this.form.url = this.form.baseUrl = this.url + 'Insert';
+          if (!this.form.onTop){
+            accessInp.onClick = () => {
+              this.form.onSuccessBase = () => {
+                this.modal.hide();
+                this.load();
+              };
+              this.showInsertModal();
+            };
+          }else{
+            this.form.displayLabel = false;
+            continue;
+          }
+        }else{
+          if (this.modal){
+            accessInp.onClick = () => {
+              this.modal.show();
+            };
+          }else{
+            accessInp.url = this.url + 'Insert';
+          }
+        }
+      } else if (access.AccessType === PermissionAccessTypeEnum.Print){
+        accessInp.onClick = () => {
+          const p = new PermissionClass();
+          p.RelatedId = 'Index';
+          p.Area = this.permissions.Area;
+          p.Controller = 'Print';
+          p.Action = this.permissions.Controller + (this.permissions.Action ? this.permissions.Action : '');
+          const params = $.param(this.searchData(true));
+          window.open('/Report' + p.getUrl() + (this.permissions.RelatedId ? '/' + this.permissions.RelatedId : '') +
+            (params ? '?' + params : ''), '_blank');
+        };
+      } else if (access.InputAction === PermissionInputActionEnum.OnClick){
+        accessInp.onClick = (btn) => {
+          this.optionsActions.find(x => x.name === access.Action).onClick(btn);
+        };
+      }
+      this.buttons.push(accessInp);
+    }
+    if (this.form){
+      this.form.addButtons('Save', 'green', true, this.permissions.Type === PermissionTypeEnum.Form ? (data) => {
+        if (data.Id){
+          const i = this.rows.findIndex(x => x.Id === data.Id);
+          this.rows[i] = data;
+        }else{
+          data.Id = parseInt(HelperClass.random(5, false, false), 10);
+          this.rows.unshift(data);
+        }
+        if (changeRows){
+          changeRows.emit(data);
+        }
+        this.form.clear();
+      } : null);
+      if (this.form.onTop){
+        this.form.onSuccessBase = () => {
+          this.form.clear();
+          this.load();
+        };
+      } else {
+        if (!this.modal){
+          this.modal = new ModalClass(this.environment, this.l, this.form.name);
+        }
+        this.modal.form = this.form;
+      }
+    }
+  }
+}
+
+export class TableCollClass {
+  constructor(name: string, percent: number, cls = '', type: TableCollType = TableCollType.Text,
+              withSearch: boolean = true, sort: boolean = true) {
+    this.name = name;
+    this.percent = percent;
+    this.class = cls;
+    this.type = type;
+    this.withSearch = withSearch;
+    this.sort = sort;
+  }
+  enum = null;
+  name: string;
+  percent: number;
+  class: string;
+  sort = true;
+  withSearch: boolean;
+  search: InputClass = null;
+  type: TableCollType;
+  fun: (row) => void = null;
+}
+
+export class TableRowClass {
+  constructor(public data, public children) {
+  }
+}

package/src/lib/components/accordion/accordion.component.css

@@ -0,0 +1,116 @@
+.accordion {
+  float: right;
+  width: 100%;
+  padding: 20px;
+  background-color: white;
+  border-radius: 5px;
+  position: relative;
+  min-height: 300px !important;
+}
+
+.accordion > .loading{
+  position: absolute;
+  background-color: white;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  border-radius: 5px;
+  z-index: 4;
+}
+
+.accordion > .loading .text {
+  position: absolute;
+  height: 35px;
+  line-height: 35px;
+  width: 100%;
+  text-align: center;
+  font-family: VazirBold;
+  top: calc(50% - 20px);
+}
+::ng-deep .accordion > .loading .icon {
+  font-size: 20px !important;
+  line-height: 30px;
+  position: relative;
+  top: 5px;
+  margin-left: 5px;
+}
+.accordion > .title{
+  float: right;
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  font-family: VazirBold;
+  font-size: 16px;
+  text-align: center;
+  margin-bottom: 10px;
+  position: relative;
+}
+.accordion .accordion-item{
+  float: right;
+  width: 100%;
+  margin-bottom: 10px;
+  position: relative;
+}
+.accordion .accordion-item .header{
+  float: right;
+  width: 100%;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -ms-user-select: none;
+  position: relative;
+}
+.accordion .accordion-item .title{
+  float: right;
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  background-color: var(--base);
+  border-radius: 5px;
+  text-align: center;
+  font-size: 12px;
+  cursor: pointer;
+  color: white;
+}
+.accordion .accordion-item .title:hover{
+  background-color: var(--base-dark);
+}
+.accordion .accordion-item .header .icon{
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 30px;
+  height: 30px;
+  line-height: 29px;
+  text-align: center;
+  color: white;
+  cursor: pointer;
+  font-size: 18px;
+}
+.accordion .accordion-item .header .delete-icon{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 30px;
+  height: 30px;
+  line-height: 29px;
+  text-align: center;
+  color: white;
+  cursor: pointer;
+  font-size: 18px;
+}
+.accordion .accordion-item .content{
+  display: none;
+  float: right;
+  width: 100%;
+  padding: 10px;
+}
+.accordion .accordion-item-con:first-of-type .content{
+  display: block;
+}
+
+::ng-deep .accordion .accordion-item .content .table-con{
+  box-shadow: unset !important;
+}

package/src/lib/components/accordion/accordion.component.html

@@ -0,0 +1,19 @@
+<div [id]="'Accordion' + accordion.name" [className]="'accordion ' + accordion.class">
+  <div *ngIf="accordion.loading" class="loading">
+    <div class="text" [innerHTML]="accordion.l('LoadingTable', 'Processing')"></div>
+  </div>
+  <div *ngIf="accordion.displayLabel" class="title underline">{{this.accordion.l(this.accordion.name)}}</div>
+  <div class="accordion-item-con w-100" *ngFor="let acc of this.accordion.rows; let i = index">
+    <div class="accordion-item" [id]="'AccordionRow' + acc.id" *ngIf="acc.show">
+      <div class="header" (click)="toggle($event)">
+        <div class="title">{{accordion.l(acc.name)}}</div>
+        <i [className]="(i == 0 ? 'fa-caret-down ' : 'fa-caret-left ') + 'fa-duotone icon'"></i>
+        <i *ngIf="accordion.hasDelete" (click)="deleteRow(acc)" class="fas fa-times delete-icon"></i>
+      </div>
+      <div [className]="(i == 0 ? 'open ' : '') + 'content'">
+        <lib-table *ngIf="acc.table != null" [table]="acc.table"></lib-table>
+        <lib-form *ngIf="acc.form != null" [form]="acc.form"></lib-form>
+      </div>
+    </div>
+  </div>
+</div>

package/src/lib/components/accordion/accordion.component.ts

@@ -0,0 +1,41 @@
+import {Component, ElementRef, EventEmitter, Input, Output, ViewChild} from '@angular/core';
+import * as $ from 'jquery';
+import {AccordionClass, AccordionRowClass} from '../../classes/form.class';
+
+@Component({
+  selector: 'lib-accordion',
+  templateUrl: './accordion.component.html',
+  styleUrls: ['./accordion.component.css']
+})
+export class AccordionComponent{
+  @Input()
+  accordion: AccordionClass;
+  constructor(){
+  }
+  toggle(e): void{
+    const chOpen = $(e.target).closest('.accordion').find('.content.open');
+    const ocOpen = chOpen.closest('.accordion-item').find('.header > .icon');
+    const ch = $(e.target).closest('.accordion-item').find(' > .content');
+    const oc = ch.closest('.accordion-item').find(' > .header > .icon');
+    if (ch.hasClass('open')) {
+      ch.removeClass('open');
+      ch.stop().slideUp();
+      oc.removeClass('fa-caret-down').addClass('fa-caret-left');
+    } else {
+      if (chOpen){
+        chOpen.removeClass('open');
+        chOpen.stop().slideUp();
+        ocOpen.removeClass('fa-caret-down').addClass('fa-caret-left');
+      }
+      ch.addClass('open');
+      ch.stop().slideDown();
+      oc.addClass('fa-caret-down').removeClass('fa-caret-left');
+    }
+  }
+  deleteRow(acc: AccordionRowClass): void{
+    this.accordion.rows = this.accordion.rows.filter(x => x.name !== acc.name);
+    if (this.accordion.onDelete){
+      this.accordion.onDelete(acc);
+    }
+  }
+}

package/src/lib/components/alert/alert.component.css

@@ -0,0 +1,112 @@
+.accordion {
+  float: right;
+  width: 100%;
+  padding: 20px;
+  background-color: white;
+  border-radius: 5px;
+  position: relative;
+  min-height: 300px !important;
+}
+
+.accordion > .loading{
+  position: absolute;
+  background-color: white;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  border-radius: 5px;
+  z-index: 4;
+}
+
+.accordion > .loading .text {
+  position: absolute;
+  height: 35px;
+  line-height: 35px;
+  width: 100%;
+  text-align: center;
+  font-family: VazirBold;
+  top: calc(50% - 20px);
+}
+::ng-deep .accordion > .loading .icon {
+  font-size: 20px !important;
+  line-height: 30px;
+  position: relative;
+  top: 5px;
+  margin-left: 5px;
+}
+.accordion > .title{
+  float: right;
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  font-family: VazirBold;
+  font-size: 16px;
+  text-align: center;
+  margin-bottom: 10px;
+  position: relative;
+}
+.accordion .accordion-item{
+  float: right;
+  width: 100%;
+  margin-bottom: 10px;
+  position: relative;
+}
+.accordion .accordion-item .header{
+  float: right;
+  width: 100%;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -ms-user-select: none;
+  position: relative;
+}
+.accordion .accordion-item .title{
+  float: right;
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  background-color: var(--base);
+  border-radius: 5px;
+  text-align: center;
+  font-size: 12px;
+  cursor: pointer;
+  color: white;
+}
+.accordion .accordion-item .title:hover{
+  background-color: var(--base-dark);
+}
+.accordion .accordion-item .header .icon{
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 30px;
+  height: 30px;
+  line-height: 29px;
+  text-align: center;
+  color: white;
+  cursor: pointer;
+  font-size: 18px;
+}
+.accordion .accordion-item .header .delete-icon{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 30px;
+  height: 30px;
+  line-height: 29px;
+  text-align: center;
+  color: white;
+  cursor: pointer;
+  font-size: 18px;
+}
+.accordion .accordion-item .content{
+  display: none;
+  float: right;
+  width: 100%;
+  padding: 10px;
+}
+.accordion .accordion-item-con:first-of-type .content{
+  display: block;
+}

package/src/lib/components/alert/alert.component.html

@@ -0,0 +1 @@
+<lib-modal *ngIf="alert" [modal]="alert"></lib-modal>

package/src/lib/components/alert/alert.component.ts

@@ -0,0 +1,35 @@
+import {Component} from '@angular/core';
+import {FormClass, InputClass} from '../../classes/form.class';
+import {ModalClass} from '../../classes/modal.class';
+import {InputType} from '../../classes/enum.class';
+import {LangClass} from '../../classes/lang.class';
+import {PsToolkitUiConfigService} from '../../services/config.service';
+
+@Component({
+  selector: 'lib-alert',
+  templateUrl: './alert.component.html',
+  styleUrls: ['./alert.component.css']
+})
+export class AlertComponent {
+  alert: ModalClass;
+  alertLabel: InputClass;
+  constructor(public config: PsToolkitUiConfigService){
+    const lang = new LangClass(config.currentLang, config.strings);
+    const l = (key: string, v = null): string => {
+      return lang.get('Public', 'Alert', key, v);
+    };
+    this.alert = new ModalClass(config.environment, l, 'Alert');
+    this.alert.form = new FormClass(config.environment, l, 'Alert');
+    this.alertLabel = new InputClass(config.environment, l, 'Alert', null, InputType.Label, 'f-s-16 p-h-20 p-t-10 l-h-30');
+    this.alert.form.inputs = [
+      this.alertLabel
+    ];
+  }
+  show(l: string, accept: () => void): void{
+    this.alertLabel.value = l;
+    this.alert.onHide = () => {
+      accept();
+    };
+    this.alert.show();
+  }
+}

package/src/lib/components/base.component.ts

@@ -0,0 +1,38 @@
+import {Injectable} from '@angular/core';
+import {PermissionClass} from '../classes/permission.class';
+import {PermissionTypeEnum} from '../classes/enum.class';
+
+@Injectable()
+export abstract class BaseComponent {
+  l: (k, v?) => string;
+  permissions: PermissionClass;
+  protected constructor(public app: any, public c, public a = null){
+    this.l = (key: string, v = null): string => {
+      return app.getL(`${c}${(a ? `.${a}` : '')}`, key, v);
+    };
+    if (app.currentUser !== null){
+      this.permissions = this.getPermission(this.c, this.a);
+      if (this.permissions){
+        this.permissions.Area = app.area;
+      }
+    }
+  }
+  getPermission(c, a = null): any{
+    const p = this.app.currentUser.Permissions.filter(per => per.Controller === c && (a == null || per.Action === a) &&
+      per.Type === PermissionTypeEnum.Item);
+    return p.length > 0 ? this.getPermissionClass(p[0]) : null;
+  }
+  getPermissionClass(p: any): PermissionClass{
+    return new PermissionClass(p.Name, p.Icon, p.Type, p.InputType, p.AccessType, p.InputAction, this.app.area, p.Controller, p.Action,
+      p.Condition, this.getPermissionAccessesClass(p.Id));
+  }
+  getPermissionAccessesClass(parentId: string): PermissionClass[]{
+    return this.app.currentUser.Permissions.filter(x => x.ParentId === parentId).map(x => this.getPermissionClass(x));
+  }
+  hasAccess(a: string): boolean{
+    return this.permissions ? this.permissions.hasAccessByName(a) : false;
+  }
+  hasOption(a: string): boolean{
+    return this.permissions ? this.permissions.hasAccessByName(a) : false;
+  }
+}