nira-falcon 0.1.21 → 0.1.23

package/src/lib/core-table/core-column-selector/core-column-selector.component.ts

@@ -0,0 +1,94 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { MenuItem } from '../../falconTypes';
+import { ACTIVE_OPTIONS } from '../../../utils/constants';
+
+@Component({
+  selector: 'core-column-selector',
+  templateUrl: './core-column-selector.component.html',
+  styleUrls: ['./core-column-selector.component.scss'],
+})
+export class CoreColumnSelectorComponent<T> {
+  selectedItem: MenuItem<T> = {} as MenuItem<T>;
+  newItems: MenuItem<T>[] = [];
+  isOpenMenu = false;
+  _items: any[] = [];
+  // _items: any[] = ACTIVE_OPTIONS;
+  @Input() set items(data: any) {
+    this._items = data;
+    this.hasItems = true;
+    this.init();
+  }
+  _defaultValue = undefined;
+  _titleKey!: T;
+  _valueKey!: T;
+  initCounter = 0;
+  hasTitleKey = false;
+  hasValueKey = false;
+  hasItems = false;
+  hasDefaultValue = false;
+  @Input() set titleKey(data: T) {
+    this._titleKey = data;
+    this.hasTitleKey = true;
+    this.init();
+  }
+  @Input() set valueKey(data: T) {
+    this._valueKey = data;
+    this.hasValueKey = true;
+    this.init();
+  }
+  @Input() label: string = '';
+  @Output() onItemSelected = new EventEmitter<any>();
+  @Input() inputFormControl: FormControl = new FormControl('', []);
+  constructor(private cdr: ChangeDetectorRef) {}
+  init() {
+    if (this.hasTitleKey && this.hasValueKey && this.hasItems) {
+      this.newItems = this.changeItemsType(this._items);
+      const item = this.newItems.find(
+        (item) => item.value == this._defaultValue
+      );
+      if (!this._defaultValue || this._defaultValue === null) return;
+      this.inputFormControl.setValue(this._defaultValue);
+      this.onItemSelect(
+        this.newItems.find((item) => item.value == this._defaultValue)!,
+        false
+      );
+    }
+  }
+  ngAfterViewInit(): void {
+    this.cdr.detectChanges();
+  }
+  changeItemsType(items: any[]): MenuItem<T>[] {
+    return items.map((item) => {
+      return {
+        title: item[this._titleKey],
+        value: item[this._valueKey],
+      };
+    });
+  }
+  openMenuClick() {
+    this.isOpenMenu = !this.isOpenMenu;
+  }
+  onItemSelect(selectedItem: MenuItem<T>, isFromUi: boolean): void {
+    if (isFromUi) this.inputFormControl.markAsTouched();
+    this.isOpenMenu = false;
+    this.selectedItem = selectedItem;
+    this.inputFormControl.setValue(selectedItem.value);
+    this.onItemSelected.emit(selectedItem.value);
+  }
+  focusOut() {
+    this.isOpenMenu = false;
+    this.inputFormControl.markAsTouched();
+  }
+  removedText() {
+    this.selectedItem = {} as MenuItem<T>;
+    this.inputFormControl.setValue('');
+    this.onItemSelected.emit('');
+  }
+}

package/src/lib/core-table/core-row-pelak/core-row-pelak.component.html

@@ -0,0 +1,12 @@
+<div class="flex gap-1" *ngIf="data.register">
+  <div class="row w-12">
+    <img class="img-iran p-1" src="../../../assets/images/iran.png" />
+    <span class="row1">{{ data[column.key].columnFour | persianDigits }}</span>
+  </div>
+  <span class="row w-9">{{
+    data[column.key].columnThree | persianDigits
+  }}</span>
+  <span class="row w-5">{{ data[column.key].columnTwo | persianDigits }}</span>
+  <span class="row w-6">{{ data[column.key].columnOne | persianDigits }}</span>
+  <pelak-icon class="h-8 w-6"></pelak-icon>
+</div>

package/src/lib/core-table/core-row-pelak/core-row-pelak.component.scss

@@ -0,0 +1,21 @@
+.row {
+  display: flex;
+  height: 32px;
+  justify-content: center;
+  align-items: center;
+  background: #80808026;
+  padding-inline: 4px;
+  border-radius: 6px;
+}
+.row1 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-inline: 4px;
+  border-radius: 6px;
+}
+
+.img-iran {
+  height: 28px;
+  border-left: 2px solid #33333375;
+}

package/src/lib/core-table/core-row-pelak/core-row-pelak.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-core-row-pelak',
+  templateUrl: './core-row-pelak.component.html',
+  styleUrls: ['./core-row-pelak.component.scss'],
+})
+export class CoreRowPelakComponent {
+  @Input({ required: true }) data!: any;
+  @Input({ required: true }) column!: any;
+  ngOnInit(): void {}
+}

package/src/lib/core-table/core-table/core-table.component.html

@@ -0,0 +1,168 @@
+<div class="p-2 overflow-x-auto">
+  <table *ngIf="!isRunningOnSmallScreen || !responsive; else smallDeviceCard">
+    <tr>
+      <th
+        class="cursor-pointer text-center"
+        *ngFor="let column of activeColumnsSchema()"
+      >
+        <div
+          class="grid"
+          [ngClass]="[canFilter ? 'grid-rows-2' : 'grid-rows-1']"
+        >
+          <span
+            class="p-2 relative"
+            (click)="sortByHeader(column)"
+            [ngStyle]="{
+              minWidth:
+                column.type === columnsTypes.ACTION_BUTTONS
+                  ? column.data.length * 30 + 'px'
+                  : '',
+              display:
+                column.type === columnsTypes.ACTION_BUTTONS
+                  ? 'inline-block'
+                  : ''
+            }"
+            >{{ column.label }}
+            <app-sort-down-icon
+              class="sort-icon w-2 h-2 inline-block absolute top-3 right-[-3px]"
+              *ngIf="
+                sortDetail?.key == column.key && sortDetail?.sort === 'asc'
+              "
+            ></app-sort-down-icon>
+            <app-sort-up-icon
+              class="sort-icon w-2 h-2 inline-block absolute top-3 right-[-3px]"
+              *ngIf="
+                sortDetail?.key == column.key && sortDetail?.sort === 'desc'
+              "
+            ></app-sort-up-icon>
+            <app-sort-solid-icon
+              class="sort-icon w-2 h-2 inline-block absolute top-3 right-[-3px]"
+              *ngIf="sortDetail?.key !== column.key"
+            ></app-sort-solid-icon>
+          </span>
+          <core-column-date-picker
+            *ngIf="canFilter && column.type == columnsTypes.SHAMSI_DATE"
+            [canSelectToday]="true"
+            (onChange)="tableDataFiltered($event, column)"
+          >
+          </core-column-date-picker>
+          <core-column-input
+            *ngIf="
+              canFilter &&
+              column.type !== columnsTypes.ACTION &&
+              column.type !== columnsTypes.STATUS &&
+              column.type !== columnsTypes.SHAMSI_DATE &&
+              column.type !== columnsTypes.ROW_SELECTOR &&
+              column.type !== columnsTypes.STATUS_ACTIVE &&
+              column.type !== columnsTypes.ACTION_BUTTONS
+            "
+            (onChange)="tableDataFiltered($event, column)"
+          ></core-column-input>
+          <core-column-selector
+            *ngIf="
+              (canFilter && column.type == columnsTypes.STATUS) ||
+              (canFilter && column.type == columnsTypes.STATUS_ACTIVE)
+            "
+            [titleKey]="'title'"
+            [valueKey]="'value'"
+            [items]="
+              column.type == columnsTypes.STATUS
+                ? ACTIVE_OPTIONS
+                : YES_NO_OPTIONS
+            "
+            (onItemSelected)="tableDataFiltered($event, column)"
+          ></core-column-selector>
+        </div>
+      </th>
+    </tr>
+    <tr *ngFor="let data of sortedTableData">
+      <td
+        *ngFor="let column of activeColumnsSchema()"
+        [class]="styleFilter ? styleFilter(data) : ''"
+      >
+        <app-core-table-column-manager
+          *ngIf="column.type != columnsTypes.MULTI_COLUMN; else elseBlock"
+          [rowSelector]="rowSelector"
+          (onColumnClicked)="columnClicked($event)"
+          [allTableData]="sortedTableData"
+          [data]="data"
+          [column]="column"
+        ></app-core-table-column-manager>
+        <ng-template #elseBlock>
+          <app-core-table-column-manager
+            *ngFor="let childColumn of column.columns; let i = index"
+            [rowSelector]="rowSelector"
+            (onColumnClicked)="columnClicked($event)"
+            [data]="data"
+            [allTableData]="sortedTableData"
+            [column]="childColumn"
+          >
+            <span *ngIf="i > 0">-</span>
+          </app-core-table-column-manager>
+        </ng-template>
+      </td>
+    </tr>
+  </table>
+  <ng-template #smallDeviceCard>
+    <div>
+      <core-card
+        *ngFor="let data of sortedTableData"
+        [cardClass]="'background-card m-4 p-4 relative'"
+      >
+        <div
+          class="leading-8"
+          *ngFor="let column of activeColumnsSchema()"
+          [class]="
+            column.type === columnsTypes.ACTION_BUTTONS
+              ? 'actionButtons'
+              : column.type === columnsTypes.ROW_SELECTOR
+              ? 'selectRow'
+              : ''
+          "
+        >
+          <span
+            *ngIf="
+              column.type !== columnsTypes.ACTION_BUTTONS &&
+              column.type !== columnsTypes.ROW_SELECTOR
+            "
+            class="secondary-text-color"
+          >
+            {{ column.label }} :
+          </span>
+          <span class="primary-text-color font-semibold">
+            <app-core-table-card-manager
+              *ngIf="
+                column.type != columnsTypes.MULTI_COLUMN;
+                else cardManagerElseBlock
+              "
+              [rowSelector]="rowSelector"
+              (onColumnClicked)="columnClicked($event)"
+              [data]="data"
+              [allTableData]="sortedTableData"
+              [column]="column"
+            >
+            </app-core-table-card-manager>
+
+            <ng-template #cardManagerElseBlock>
+              <app-core-table-card-manager
+                *ngFor="let childColumn of column.columns; let i = index"
+                [rowSelector]="rowSelector"
+                (onColumnClicked)="columnClicked($event)"
+                [data]="data"
+                [allTableData]="sortedTableData"
+                [column]="childColumn"
+              >
+                <span *ngIf="i > 0">-</span>
+              </app-core-table-card-manager>
+            </ng-template>
+          </span>
+        </div>
+      </core-card>
+    </div>
+  </ng-template>
+  <core-table-no-content
+    *ngIf="!loading"
+    [tableData]="sortedTableData"
+    [loading]="loading"
+  ></core-table-no-content>
+</div>

package/src/lib/core-table/core-table/core-table.component.scss

@@ -0,0 +1,65 @@
+table {
+  border-collapse: collapse;
+  width: 100%;
+  text-align: start;
+}
+
+table td,
+table th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  padding-inline-start: 8px;
+}
+table td {
+  font-size: small;
+  color: var(--default-table-td-text-color);
+}
+table tr:nth-child(even) {
+  background-color: var(--default-table-tr-child-background-color);
+}
+
+table tr:hover {
+  background-color: var(--default-table-tr-hover-background-color);
+}
+
+table th {
+  background-color: var(--default-table-th-background-color);
+  text-align: start;
+  color: #1d1d1d;
+}
+
+.actionButtons {
+  position: absolute;
+  bottom: 0;
+  background: var(--default-table-action-buttons-background-color);
+  left: 0;
+  right: 0;
+  text-align: left;
+  border-radius: 0.5rem;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+  padding-top: 4px;
+  padding-left: 16px;
+}
+
+.selectRow {
+  position: absolute;
+  left: 0;
+  top: 18px;
+}
+.desc-sort-icon {
+  transform: rotate(180deg);
+}
+
+.sort-icon {
+  fill: var(--default-table-sort-icon-color);
+}
+.background-card {
+  background-color: var(--default-table-background-card-color);
+}
+.secondary-text-color {
+  color: var(--default-table-secondary-text-color);
+}
+.primary-text-color {
+  color: var(--default-table-primary-text-color);
+}

package/src/lib/core-table/core-table/core-table.component.ts

@@ -0,0 +1,179 @@
+import {
+  AfterContentChecked,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+import { NgxIndexedDBService } from 'ngx-indexed-db';
+import { orderBy } from 'lodash';
+import {
+  ACTIVE_OPTIONS,
+  COLUMNS_TYPES,
+  YES_NO_OPTIONS,
+} from '../../../utils/constants';
+import { Util } from '../../../utils/util';
+@Component({
+  selector: 'core-table',
+  templateUrl: './core-table.component.html',
+  styleUrls: ['./core-table.component.scss'],
+})
+export class CoreTableComponent {
+  @Input({ required: false }) key: string | undefined;
+  @Input({ required: true }) columnsSchema: any;
+  @Input({ required: true }) tableData: BehaviorSubject<any[]> =
+    new BehaviorSubject<any[]>([]);
+  @Input({ required: false }) responsive: boolean = true;
+  @Input({ required: true }) loading: any;
+  @Input() canFilter: boolean = false;
+  @Input({ required: false }) styleFilter: ((data: any) => string) | undefined;
+  @Input({ required: false }) rowSelector: BehaviorSubject<any> | undefined =
+    undefined;
+  @Output() onColumnClicked: EventEmitter<any> = new EventEmitter();
+  ACTIVE_OPTIONS = ACTIVE_OPTIONS;
+  YES_NO_OPTIONS = YES_NO_OPTIONS;
+  sortDetail: { key: string; sort: 'asc' | 'desc' } | undefined;
+  sortedTableData: any[] = [];
+  dbTableFilter: any;
+  get columnsTypes() {
+    return COLUMNS_TYPES;
+  }
+  get isRunningOnSmallScreen() {
+    return Util.isRunningOnSmallScreen();
+  }
+  constructor(private dbService: NgxIndexedDBService) {}
+
+  ngOnInit(): void {
+    this.tableData.subscribe((val: any) => {
+      this.sortedTableData = val;
+    });
+    if (this.key) {
+      this.dbService
+        .getByIndex('tableFilter', 'key', this.key)
+        .subscribe((data: any) => {
+          this.dbTableFilter = data;
+          if (this.dbTableFilter) {
+            this.setTableFilter();
+          }
+        });
+    }
+  }
+  setTableFilter() {
+    this.columnsSchema.map((column: any) => {
+      JSON.parse(this.dbTableFilter.columnsSchema).forEach(
+        (dbColumnsSchema: any) => {
+          if (dbColumnsSchema.key === column.key) {
+            column.active = dbColumnsSchema.active;
+          }
+        }
+      );
+      return column;
+    });
+  }
+
+  columnClicked(val: any) {
+    this.onColumnClicked.emit(val);
+  }
+  sortByHeader(column: any) {
+    if (this.sortDetail && this.sortDetail.key == column.key) {
+      if (this.sortDetail.sort == 'desc') {
+        this.sortDetail = { key: column.key, sort: 'asc' };
+      } else {
+        this.sortDetail = { key: column.key, sort: 'desc' };
+      }
+    } else {
+      this.sortDetail = { key: column.key, sort: 'asc' };
+    }
+    if (
+      column.type == COLUMNS_TYPES.TEXT ||
+      column.type == COLUMNS_TYPES.NUMBER
+    ) {
+      this.sortedTableData = orderBy(
+        this.sortedTableData,
+        [column.key],
+        [this.sortDetail.sort]
+      );
+    } else if (column.type == COLUMNS_TYPES.SELECTOR) {
+      this.sortedTableData = orderBy(
+        this.sortedTableData,
+        [(c) => c[column.key][column.data.key]],
+        [this.sortDetail.sort]
+      );
+    } else if (column.type == COLUMNS_TYPES.SHAMSI_DATE) {
+      this.sortedTableData = orderBy(
+        this.sortedTableData,
+        [(c) => new Date(c[column.key]).getTime()],
+        [this.sortDetail.sort]
+      );
+    }
+  }
+
+  activeColumnsSchema(): any[] {
+    return this.columnsSchema.filter(
+      (column: any) => column.active === undefined || column.active
+    );
+  }
+
+  tableDataFiltered(text: String | boolean, column: any) {
+    this.columnsSchema.map((columnSchema: any) => {
+      if (columnSchema.key === column.key) {
+        columnSchema.columnFilter = text;
+      }
+      return columnSchema;
+    });
+    this.tableData.subscribe((tableData) => {
+      this.sortedTableData = tableData.filter((data: any) => {
+        let result = true;
+        this.columnsSchema.forEach((columnSchema: any) => {
+          if (
+            columnSchema.type === this.columnsTypes.ROW_SELECTOR ||
+            columnSchema.type === this.columnsTypes.ACTION ||
+            columnSchema.type === this.columnsTypes.ACTION_BUTTONS ||
+            columnSchema.columnFilter === undefined ||
+            !result
+          ) {
+            return;
+          }
+          if (columnSchema.type === this.columnsTypes.SELECTOR) {
+            result = data[columnSchema.key][columnSchema.data.key]
+              .toLowerCase()
+              .includes(columnSchema.columnFilter.toString().toLowerCase());
+          } else if (columnSchema.type === this.columnsTypes.SHAMSI_DATE) {
+            if (columnSchema.columnFilter === '') {
+              result = true;
+            } else {
+              result = data[columnSchema.key]
+                .toLowerCase()
+                .includes(
+                  Util.shamsiToMiladi(
+                    columnSchema.columnFilter.toString(),
+                    'YYYY-MM-DD'
+                  )
+                );
+            }
+          } else if (columnSchema.type === this.columnsTypes.MULTI_COLUMN) {
+            result = columnSchema.columns.some((item: any) => {
+              return data[item.key][item.data.key]
+                .toLowerCase()
+                .includes(columnSchema.columnFilter?.toString()?.toLowerCase());
+            });
+          } else if (columnSchema.type === this.columnsTypes.STATUS) {
+            if (columnSchema.columnFilter === '') {
+              result = true;
+            } else {
+              result = data[columnSchema.key] === columnSchema.columnFilter;
+            }
+          } else {
+            result = data[columnSchema.key]
+              .toString()
+              .toLowerCase()
+              .includes(columnSchema.columnFilter?.toString()?.toLowerCase());
+          }
+        });
+        return result;
+      });
+    });
+  }
+}

package/src/lib/core-table/core-table-action-buttons-column/core-table-action-buttons-column.component.html

@@ -0,0 +1,10 @@
+<span *ngFor="let data of column.data">
+  <span
+    *ngIf="checkFilter(data)"
+    [title]="data.title"
+    class="icon-color cursor-pointer h-5 inline-block icon-color m-1"
+    (click)="clicked(data.key)"
+  >
+    <ng-container *ngComponentOutlet="data.component" />
+  </span>
+</span>

package/src/lib/core-table/core-table-action-buttons-column/core-table-action-buttons-column.component.scss

@@ -0,0 +1,3 @@
+.icon-color {
+  fill: var(--default-table-column-action-buttons-fill-icon-color);
+}

package/src/lib/core-table/core-table-action-buttons-column/core-table-action-buttons-column.component.ts

@@ -0,0 +1,24 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-core-table-action-buttons-column',
+  templateUrl: './core-table-action-buttons-column.component.html',
+  styleUrls: ['./core-table-action-buttons-column.component.scss'],
+})
+export class CoreTableActionButtonsColumnComponent {
+  @Input({ required: true }) data!: any;
+  @Input({ required: true }) column!: any;
+  @Output() onClick: EventEmitter<any> = new EventEmitter();
+
+  clicked(key: string) {
+    this.onClick.emit({ data: this.data, key: key });
+  }
+
+  checkFilter(column: any) {
+    if (column.filter) {
+      return column.filter(this.data);
+    } else {
+      return true;
+    }
+  }
+}

package/src/lib/core-table/core-table-action-column/core-table-action-column.component.html

@@ -0,0 +1,6 @@
+<span class="icon-color h-5 inline-block">
+  <edit-square-icon
+    class="cursor-pointer"
+    (click)="openDialog()"
+  ></edit-square-icon>
+</span>

package/src/lib/core-table/core-table-action-column/core-table-action-column.component.scss

@@ -0,0 +1,3 @@
+.icon-color {
+  fill: var(--default-table-action-column-fill-icon-color);
+}

package/src/lib/core-table/core-table-action-column/core-table-action-column.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+import { NiraModalService } from 'nira-modal';
+
+@Component({
+  selector: 'app-core-table-action-column',
+  templateUrl: './core-table-action-column.component.html',
+  styleUrls: ['./core-table-action-column.component.scss'],
+})
+export class CoreTableActionColumnComponent {
+  @Input({ required: true }) data!: any;
+  @Input({ required: true }) column!: any;
+  constructor(private niraModalService: NiraModalService) {}
+
+  openDialog() {
+    this.niraModalService.open(this.column.data.component, {
+      data: this.data[this.column.data.key],
+    });
+  }
+}