nira-falcon 0.1.25 → 0.1.27

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

@@ -1,94 +0,0 @@
-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

@@ -1,12 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-.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

@@ -1,12 +0,0 @@
-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

@@ -1,168 +0,0 @@
-<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

@@ -1,65 +0,0 @@
-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

@@ -1,179 +0,0 @@
-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

@@ -1,10 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-.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

@@ -1,24 +0,0 @@
-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

@@ -1,6 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-.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

@@ -1,19 +0,0 @@
-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],
-    });
-  }
-}