@unifylib/ui-lib 1.0.3 → 1.1.3

package/src/lib/components/search-bar/search-bar.component.html

@@ -1,62 +1,51 @@
-<div class="mainSearchBar">
-  <div
-    fxLayout="row"
-    fxLayoutAlign="start center"
-    fxLayoutGap="16px"
-    class="search"
-    style="width: 100%; padding: 0 16px; margin-bottom: 16px;"
-  >
-
-    <mat-form-field appearance="outline" class="search__field" fxFlex="50">
-      <input
-        matInput
-        class="search__input"
-        placeholder="Search..."
-        (keydown.enter)= onSearch()
-        [(ngModel)]="searchValue" />
-    </mat-form-field>
-
-    <mat-form-field appearance="outline" class="search__field" fxFlex="15">
-      <mat-select
-        class="search__toggle"
-        [(ngModel)]="searchType"
-        placeholder="Type">
-        <mat-option value="exact">Exact</mat-option>
-        <mat-option value="like">Like</mat-option>
-      </mat-select>
-    </mat-form-field>
-
-
-    <mat-form-field appearance="outline" class="search__field" fxFlex="15">
-      <mat-select
-        class="search__toggle"
-        [(ngModel)]="selectedSortKey"
-        placeholder="Sort By">
-        <mat-option *ngFor="let col of getColumns()" [value]="col.property">
-          {{ labelKey(col) | translate }}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
-
-    <mat-form-field appearance="outline" class="search__field" fxFlex="10">
-      <mat-select
-        class="search__toggle"
-        [(ngModel)]="selectedSortType"
-        placeholder="Type">
-        <mat-option value="ASC">ASC</mat-option>
-        <mat-option value="DESC">DESC</mat-option>
-      </mat-select>
-    </mat-form-field>
-    <div
-      class="search__button"
-      fxLayout="row"
-      fxLayoutAlign="center center"
-      style="margin-bottom: 6px "
-    >
-      <div class="icon-design" (click)="onSearch()">
-          <mat-icon style="height: 30px; width: 30px; font-size: 30px; margin-bottom: 15px;cursor: pointer" color="primary">search</mat-icon>
-      </div>
-    </div>
-
-  </div>
-</div>
+<div class="mainSearchBar">
+  <div class="search row align-start-center gap-16">
+
+    <mat-form-field appearance="outline" class="search__field flex-50">
+      <input
+        matInput
+        class="search__input"
+        placeholder="Search..."
+        (keydown.enter)="onSearch()"
+        [(ngModel)]="searchValue" />
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" class="search__field flex-15">
+      <mat-select
+        class="search__toggle"
+        [(ngModel)]="searchType"
+        placeholder="Type">
+        <mat-option value="exact">Exact</mat-option>
+        <mat-option value="like">Like</mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" class="search__field flex-15">
+      <mat-select
+        class="search__toggle"
+        [(ngModel)]="selectedSortKey"
+        placeholder="Sort By">
+        <mat-option *ngFor="let col of getColumns()" [value]="col.property">
+          {{ labelKey(col) | translate }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" class="search__field flex-10">
+      <mat-select
+        class="search__toggle"
+        [(ngModel)]="selectedSortType"
+        placeholder="Type">
+        <mat-option value="ASC">ASC</mat-option>
+        <mat-option value="DESC">DESC</mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <div class="search__button row align-center-center">
+      <div class="icon-design" (click)="onSearch()">
+        <mat-icon class="icon-search" color="primary">search</mat-icon>
+      </div>
+    </div>
+
+  </div>
+</div>

package/src/lib/components/search-bar/search-bar.component.scss

@@ -1,8 +1,63 @@
-::ng-deep .search__button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 56px;
-  margin-top: -6px;
-
-}
+::ng-deep .search__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 56px;
+  margin-top: -6px;
+
+}
+.row {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.align-start-center {
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.align-center-center {
+  align-items: center;
+  justify-content: center;
+}
+
+.gap-16 > * + * {
+  margin-left: 16px;
+}
+
+.flex-50 {
+  flex: 0 0 50%;
+}
+
+.flex-15 {
+  flex: 0 0 15%;
+}
+
+.flex-10 {
+  flex: 0 0 10%;
+}
+
+.search {
+  width: 100%;
+  padding: 0 16px;
+  margin-bottom: 16px;
+}
+
+.search__button {
+  margin-bottom: 6px;
+}
+
+.icon-search {
+  height: 30px;
+  width: 30px;
+  font-size: 30px;
+  margin-bottom: 15px;
+  cursor: pointer;
+}

package/src/lib/components/search-bar/search-bar.component.spec.ts

@@ -1,25 +1,25 @@
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-
-import {SearchBarComponent} from './search-bar.component';
-
-describe('SearchBarComponent', () => {
-  let component: SearchBarComponent;
-  let fixture: ComponentFixture<SearchBarComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SearchBarComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SearchBarComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {SearchBarComponent} from './search-bar.component';
+
+describe('SearchBarComponent', () => {
+  let component: SearchBarComponent;
+  let fixture: ComponentFixture<SearchBarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SearchBarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/search-bar/search-bar.component.ts

@@ -1,70 +1,68 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {MatFormField, MatLabel} from "@angular/material/form-field";
-import {MatOption, MatSelect} from "@angular/material/select";
-import {FormsModule} from "@angular/forms";
-import {MatIcon} from "@angular/material/icon";
-import {FlexModule} from "@angular/flex-layout";
-import {MatInput} from "@angular/material/input";
-import {MatIconButton} from "@angular/material/button";
-import {NgForOf} from "@angular/common";
-import {TableColumn} from "../../base-model";
-import {TranslateModule} from "@ngx-translate/core";
-type SearchType = 'exact' | 'like';
-type SortType = 'ASC' | 'DESC';
-@Component({
-  selector: 'ag-search-bar',
-  templateUrl: './search-bar.component.html',
-  standalone: true,
-  imports: [
-    MatFormField,
-    MatSelect,
-    MatOption,
-    FormsModule,
-    MatIcon,
-    FlexModule,
-    MatInput,
-    MatIconButton,
-    NgForOf,
-    TranslateModule
-  ],
-  styleUrls: ['./search-bar.component.scss']
-})
-export class SearchBarComponent implements OnInit {
-  @Input() columns: TableColumn<any>[];
-  @Input() defaultSortKey: string = '';
-
-  searchValue: string = '';
-  searchType: SearchType = 'like';
-  selectedSortKey: string = '';
-  selectedSortType: SortType = 'ASC';
-  @Output() searchTriggered = new EventEmitter<{
-    searchValue: string;
-    searchType: SearchType;
-    sortKey: string;
-    sortType: string;
-  }>();
-
-  onSearch() {
-    this.selectedSortKey ||= this.defaultSortKey || this.columns[0]?.property;
-
-    this.searchTriggered.emit({
-      searchValue: this.searchValue,
-      searchType: this.searchType,
-      sortKey: this.selectedSortKey,
-      sortType: this.selectedSortType
-    });
-  }
-
-  labelKey(column: { label?: string; property: string }): string {
-    return column.label || column.property;
-  }
-
-  ngOnInit(): void {
-  }
-
-  getColumns() {
-    return this.columns.filter(
-      (column) => ['text', 'date', 'localDateTime'].includes(column.type)
-    );
-  }
-}
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {MatFormField, MatLabel} from "@angular/material/form-field";
+import {MatOption, MatSelect} from "@angular/material/select";
+import {FormsModule} from "@angular/forms";
+import {MatIcon} from "@angular/material/icon";
+import {MatInput} from "@angular/material/input";
+import {MatIconButton} from "@angular/material/button";
+import {NgForOf} from "@angular/common";
+import {TableColumn} from "../../base-model";
+import {TranslateModule} from "@ngx-translate/core";
+type SearchType = 'exact' | 'like';
+type SortType = 'ASC' | 'DESC';
+@Component({
+  selector: 'ag-search-bar',
+  templateUrl: './search-bar.component.html',
+  standalone: true,
+  imports: [
+    MatFormField,
+    MatSelect,
+    MatOption,
+    FormsModule,
+    MatIcon,
+    MatInput,
+    MatIconButton,
+    NgForOf,
+    TranslateModule
+  ],
+  styleUrls: ['./search-bar.component.scss']
+})
+export class SearchBarComponent implements OnInit {
+  @Input() columns: TableColumn<any>[];
+  @Input() defaultSortKey: string = '';
+
+  searchValue: string = '';
+  searchType: SearchType = 'like';
+  selectedSortKey: string = '';
+  selectedSortType: SortType = 'ASC';
+  @Output() searchTriggered = new EventEmitter<{
+    searchValue: string;
+    searchType: SearchType;
+    sortKey: string;
+    sortType: string;
+  }>();
+
+  onSearch() {
+    this.selectedSortKey ||= this.defaultSortKey || this.columns[0]?.property;
+
+    this.searchTriggered.emit({
+      searchValue: this.searchValue,
+      searchType: this.searchType,
+      sortKey: this.selectedSortKey,
+      sortType: this.selectedSortType
+    });
+  }
+
+  labelKey(column: { label?: string; property: string }): string {
+    return column.label || column.property;
+  }
+
+  ngOnInit(): void {
+  }
+
+  getColumns() {
+    return this.columns.filter(
+      (column) => ['text', 'date', 'localDateTime'].includes(column.type)
+    );
+  }
+}

package/src/lib/components/section-form-canvas/section-form-canvas.component.html

@@ -0,0 +1,43 @@
+<mat-expansion-panel class="location-card"
+                     #panel="matExpansionPanel"
+                     [expanded]="isExpanded"
+                     [hideToggle]="hideToggle"
+                     (opened)="alwaysOpen ? panel.open() : null"
+                     (closed)="alwaysOpen ? panel.open() : null">
+  <mat-expansion-panel-header class="card-header" (click)="toggleExpand()">
+    <mat-panel-title>
+      <h3 class="card-title" *ngIf="isTranslateTitle">
+        {{ pageInfo.labelsSection + '.' + title | translate }}
+      </h3>
+      <h3 class="card-title" *ngIf="!isTranslateTitle">{{ title }}</h3>
+    </mat-panel-title>
+
+    <mat-panel-description class="panel-description">
+      <div class="row flex-auto buttons-wrapper">
+        <button
+          mat-flat-button
+          *ngFor="let btn of buttons"
+          [color]="btn.color || 'primary'"
+          (click)="onButtonClick(btn , key); $event.stopPropagation()"
+          class="btn-none-background-primary action"
+          [attr.id]="btn.id || ('section-btn-' + (btn.action || btn.label || btn.key))"
+        >
+          <div class="button-text">
+            <mat-icon *ngIf="btn.icon">{{ btn.icon }}</mat-icon>
+            <span>{{ btn.label | translate }}</span>
+          </div>
+        </button>
+      </div>
+    </mat-panel-description>
+  </mat-expansion-panel-header>
+  <div class="panel-body">
+    <hr class="divider"/>
+    <app-base-form-canvas
+      [pageInfo]="pageInfo"
+      [fields]="fields"
+      [editable]="editable"
+      [item]="item"
+      (formUpdated)="formUpdated($event)"
+    ></app-base-form-canvas>
+  </div>
+</mat-expansion-panel>

package/src/lib/components/section-form-canvas/section-form-canvas.component.scss

@@ -0,0 +1,81 @@
+.location-card {
+  border: 1px solid #dcdcdc;
+  border-radius: 8px;
+  background: #fff;
+  margin: 18px auto;
+  overflow: hidden;
+
+  .mat-expansion-panel-header {
+    padding: 0 15px;
+  }
+  .panel-body {
+    padding: 0 15px;
+  }
+.panel-description {
+  justify-content: end !important;
+  margin: 0 !important;
+}
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .card-title {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+      color: #222;
+    }
+
+    .btn-edit {
+      width: 120px;
+      min-height: 32px !important;
+      border-radius: 9999px !important;
+      font-size: 16px !important;
+    }
+
+    .expand-icon {
+      color: #339dff;
+      font-size: 16px;
+    }
+  }
+
+  .divider {
+    border: none;
+    border-top: 2px solid var(--primary-color-3nd);
+    margin: 0 ;
+  }
+}
+.flex-auto {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+}
+.row {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+.gap-20 {
+  gap: 20px;
+}
+.buttons-wrapper {
+  display: inline-block;
+  text-align-last: end;
+  margin: 0 !important;
+
+}
+.buttons-wrapper .action {
+  min-height: 44px !important;
+  min-width: 135px !important;
+  width: auto !important;
+}
+.button-text {
+  span{
+    font-size: 18px;
+  }
+  mat-icon {
+    font-size: 18px !important;
+  }
+}

package/src/lib/components/section-form-canvas/section-form-canvas.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SectionFormCanvasComponent } from './section-form-canvas.component';
+
+describe('SectionFormCanvasComponent', () => {
+  let component: SectionFormCanvasComponent;
+  let fixture: ComponentFixture<SectionFormCanvasComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SectionFormCanvasComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(SectionFormCanvasComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/section-form-canvas/section-form-canvas.component.ts

@@ -0,0 +1,67 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {MatIcon} from "@angular/material/icon";
+import {MatButton} from "@angular/material/button";
+import {ButtonActionSettings, FieldInfo, PageInfo} from "../../base-model";
+import {BaseFormComponent} from "../base-form/base-form.component";
+import {BaseFormCanvasComponent} from "../base-form-canvas/base-form-canvas.component";
+import {NgForOf, NgIf} from "@angular/common";
+import {TranslateModule} from "@ngx-translate/core";
+import {FormGroup} from "@angular/forms";
+import {
+  MatExpansionPanel,
+  MatExpansionPanelHeader,
+  MatExpansionPanelDescription,
+  MatExpansionPanelTitle
+} from "@angular/material/expansion";
+
+@Component({
+  selector: 'lib-section-form-canvas',
+  standalone: true,
+  imports: [
+    MatIcon,
+    MatButton,
+    BaseFormComponent,
+    BaseFormCanvasComponent,
+    NgIf,
+    TranslateModule,
+    MatExpansionPanel,
+    MatExpansionPanelTitle,
+    MatExpansionPanelDescription,
+    MatExpansionPanelHeader,
+    NgForOf
+  ],
+  templateUrl: './section-form-canvas.component.html',
+  styleUrl: './section-form-canvas.component.scss'
+})
+export class SectionFormCanvasComponent {
+
+  @Input() pageInfo: PageInfo;
+  @Input() fields: FieldInfo[];
+  @Input() itemId: number;
+  @Input() editable: boolean;
+  @Input() hideBackButton: boolean;
+  @Input() item: any;
+  @Input() title: string;
+  @Input() isTranslateTitle: boolean;
+  @Input() key: number;
+  @Input() hideToggle: boolean = true;
+  @Input() isExpanded: boolean = true;
+  @Input() alwaysOpen: boolean = true;
+  @Output() actionEdit: EventEmitter<any> = new EventEmitter();
+  @Output() formEdit: EventEmitter<FormGroup> = new EventEmitter();
+  @Input() buttons: ButtonActionSettings[] = [];
+  @Output() buttonClicked = new EventEmitter<any>();
+
+  formUpdated($event) {
+    this.formEdit.emit($event);
+
+  }
+
+  toggleExpand() {
+    this.isExpanded = !this.isExpanded;
+  }
+
+  onButtonClick(btn: ButtonActionSettings, sectionKey: number): void {
+    this.buttonClicked.emit({...btn , sectionKey: sectionKey});
+  }
+}

package/src/lib/components/shared/action-button/action-button.component.html

@@ -0,0 +1,12 @@
+<button
+  class="action-button"
+  (click)="onButtonClick()"
+  [style.background]="buttonGradient"
+  [attr.id]="id || (buttonTextKey ? ('action-button-' + buttonTextKey) : 'action-button')"
+  type="button">
+  <span class="button-texts">
+    <span *ngIf="buttonTextKey">{{ buttonTextKey | translate }}</span>
+    <span *ngIf="!buttonTextKey">{{ buttonText }}</span>
+  </span>
+  <mat-icon class="arrow-icon" [class.arrow-rtl]="isArabic">arrow_forward</mat-icon>
+</button>

package/src/lib/components/shared/action-button/action-button.component.scss

@@ -0,0 +1,45 @@
+.action-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  height: 62px;
+  border-radius: 16px;
+  border: none;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  width: 100%;
+  padding: 0;
+  background-size: cover;
+  background-position: center;
+  margin-top: 15px;
+
+  .button-texts {
+    font-family: 'lusail-medium', sans-serif !important;
+    font-weight: 500 !important;
+    font-size: 24px !important;
+    line-height: 1.2 !important;
+    color: #2e2e2e !important;
+    white-space: nowrap;
+    position: relative;
+    z-index: 1;
+  }
+
+  .arrow-icon {
+    font-size: 24px !important;
+    width: 24px;
+    height: 30px;
+    color: #2e2e2e;
+    position: relative;
+    z-index: 1;
+
+    &.arrow-rtl {
+      transform: rotate(180deg);
+    }
+  }
+
+  &:hover {
+    opacity: 0.9;
+  }
+}