angular-dumb-lib 0.0.2 → 0.0.4

package/src/lib/components/molecules/form/form.component.ts

@@ -0,0 +1,64 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { InputGroupType, InputType } from '../../../shared/enums/enum';
+import { selectionInputTypes, textualInputTypes } from '../../../shared/constants/constant';
+import { CommonModule } from '@angular/common';
+import { ButtonComponent, InputComponent } from 'angular-dumb-lib';
+import { SelectionComponent } from '../../atoms/selection/selection.component';
+import { FileSelectionComponent } from '../../atoms/file-selection/file-selection.component';
+import { IInputConfig } from '../../../shared/interfaces/interface';
+import { IButtonConfig } from 'dist/angular-dumb-lib/lib/shared/interfaces/interface';
+
+
+@Component({
+  selector: 'app-form',
+  standalone: true,
+  templateUrl: './form.component.html',
+  styleUrls: ['./form.component.scss'],
+  imports: [CommonModule, InputComponent, SelectionComponent,
+    FileSelectionComponent, ButtonComponent, FormsModule, ReactiveFormsModule]
+})
+export class FormComponent {
+  @Input() formGroup!: FormGroup;
+  @Input() inputConfigs!: Array<IInputConfig>;
+  @Input() buttonConfig: IButtonConfig = {
+    label: "Submit"
+  }
+  @Input() validationMessages!: { [key: string]: string };
+
+  @Output() formSubmit = new EventEmitter<any>();
+  @Output() formChange = new EventEmitter<{ controlName: string; value: any }>();
+
+  // Define the editor configuration
+
+  onSubmit() {
+    if (this.formGroup.valid) {
+      this.formSubmit.emit(this.formGroup.value);
+    }
+    else {
+      console.log('Form not valid');
+    }
+  }
+
+  onValueChange(controlName: string, value: any) {
+    this.formChange.emit({ controlName, value });
+  }
+
+  checkFormConfigType(inputType: InputType | undefined): InputGroupType {
+    if(inputType) {
+      if(textualInputTypes.includes(inputType)) {
+        return InputGroupType.textual;
+      }
+      if(selectionInputTypes.includes(inputType)) {
+        return InputGroupType.selection;
+      }
+      if(inputType === InputType.file) {
+        return InputGroupType.file;
+      }
+      if(inputType === InputType.datetime) {
+        return InputGroupType.datetime;
+      }
+    }
+    return InputGroupType.textual;
+  }
+}

package/src/lib/components/molecules/modal/modal.component.html

@@ -0,0 +1,16 @@
+<div class="modal-overlay" (click)="handleOverlayClick($event)" *ngIf="modalEvent?.isModalVisible">
+  <div class="modal-content" (click)="handleContentClick($event)">
+    <div class="modal-header">
+      <h2>{{modalEvent.title }}</h2>
+      <button class="close-btn" (click)="closeModal()">
+        <i class="material-icons">close</i>
+      </button>
+    </div>
+    <div *ngIf="modalEvent.params && modalEvent.params['content']">{{modalEvent.params['content'] | translate}}</div>
+    <ng-container *ngTemplateOutlet="modalEvent.template; context: modalEvent.params"></ng-container>
+    <div *ngIf="!modalEvent?.isDialog" class="buttons">
+      <app-button [config]="okConfig" (clickEvent)="ok()"></app-button>
+      <app-button [config]="cancelConfig" (clickEvent)="cancel()"></app-button>
+    </div>
+  </div>
+</div>

package/src/lib/components/molecules/modal/modal.component.scss

@@ -0,0 +1,83 @@
+.modal-overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 50;
+}
+
+.modal-content {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  background-color: #fff;
+  color: #000;
+  border-radius: 0.5rem;
+  padding: 2rem;
+  max-width: 600px;
+  width: 100%;
+  max-height: calc(100vh - 7rem); /* Full height */
+  overflow-y: auto; /* Scroll if content is longer than modal */
+
+  &.dark-mode {
+    background-color: #27272a; // dark:bg-zinc-800
+    color: #d1d5db; // dark:text-zinc-300
+  }
+
+  .modal-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+h2 {
+  font-size: 2rem;
+  font-weight: bold;
+  margin: unset;
+}
+
+p {
+  color: #4b5563; // text-zinc-600
+  margin-bottom: 1.5rem;
+
+  &.dark-mode {
+    color: #d1d5db; // dark:text-zinc-300
+  }
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.close-btn {
+  background-color: transparent;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+}
+
+.close-btn i.material-icons {
+  font-size: 24px;
+  color: #888;
+}
+
+.close-btn:hover i.material-icons {
+  color: #444;
+}
+
+.buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+  gap: 15px;
+}

package/src/lib/components/molecules/modal/modal.component.ts

@@ -0,0 +1,48 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { IButtonConfig, IModalEvent } from '../../../shared/interfaces/interface';
+import { CommonModule } from '@angular/common';
+import { ButtonComponent } from 'angular-dumb-lib';
+
+@Component({
+  selector: 'app-modal',
+  standalone: true,
+  templateUrl: './modal.component.html',
+  styleUrls: ['./modal.component.scss'],
+  imports: [CommonModule, ButtonComponent]
+})
+export class ModalComponent implements OnInit {
+  @Input() modalEvent!: IModalEvent;
+  okConfig: IButtonConfig = {
+    label: "Ok"
+  }
+  cancelConfig: IButtonConfig = {
+    label: "Cancel"
+  }
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  closeModal() {
+    this.modalEvent.isModalVisible = false;
+  }
+
+  handleOverlayClick(event: MouseEvent) {
+    this.closeModal();
+  }
+
+  handleContentClick(event: MouseEvent) {
+    event.stopPropagation();
+  }
+
+  ok() {
+    if (this.modalEvent && this.modalEvent.onOk) {
+      this.modalEvent.onOk();
+      this.closeModal();
+    }
+  }
+
+  cancel() {
+    this.closeModal();
+  }
+}

package/src/lib/components/molecules/paginator/paginator.component.html

@@ -0,0 +1,25 @@
+<div class="table-footer">
+  <div class="number-of-page">
+    <app-selection [options] = "itemsPerPageList"
+                  [selectedValue]="this.itemsPerPage"
+                  (selectedChange) = "onChangeNumberOfPage($event)">
+    </app-selection>
+    <app-input [config]="inputConfig"></app-input>
+  </div>
+  <div class="paginator">
+    <app-button (clickEvent)="selectPage(selectedPage - 1)"
+                [config]="previousButtonConfig"/>
+
+    <!-- Page Numbers -->
+    <ng-container *ngFor="let page of pageNumbers">
+      <app-button
+        (clickEvent)="selectPage(page)"
+        [config]="getPageButtonConfig(page)">
+      </app-button>
+    </ng-container>
+
+    <!-- Next Button -->
+    <app-button (clickEvent)="selectPage(selectedPage + 1)"
+                [config]="nextButtonConfig"/>
+  </div>
+</div>

package/src/lib/components/molecules/paginator/paginator.component.scss

@@ -0,0 +1,27 @@
+body {
+  color: #566787;
+  background: #f5f5f5;
+  font-family: 'Varela Round', sans-serif;
+  font-size: 13px;
+}
+
+.table-footer {
+  display: flex;
+
+  .number-of-page {
+    width: 70%;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+  }
+
+  .paginator {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+
+    app-button {
+      margin: 0 2px;
+    }
+  }
+}

package/src/lib/components/molecules/paginator/paginator.component.ts

@@ -0,0 +1,126 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { IButtonConfig, IDropdownOption, IInputConfig, IPaginator } from '../../../shared/interfaces/interface';
+import { ButtonType, InputDirection } from '../../../shared/enums/enum';
+import { ButtonComponent, InputComponent } from 'angular-dumb-lib';
+import { SelectionComponent } from '../../atoms/selection/selection.component';
+
+@Component({
+  selector: 'app-paginator',
+  standalone: true,
+  templateUrl: './paginator.component.html',
+  styleUrls: ['./paginator.component.scss'],
+  imports: [CommonModule, ButtonComponent, SelectionComponent, InputComponent]
+})
+export class PaginatorComponent implements OnInit {
+  itemsPerPageList: IDropdownOption[] = [];
+  inputConfig: IInputConfig = {
+    label: 'Go to page',
+    direction: InputDirection.horizontal,
+    name: 'inputConfig',
+    required: false
+  }
+  previousButtonConfig: IButtonConfig = {
+    iconValue: 'chevron_left',
+    type: ButtonType.button,
+    isDisabled: true
+  }
+  nextButtonConfig: IButtonConfig = {
+    iconValue: 'chevron_right',
+    type: ButtonType.button,
+    isDisabled: false
+  }
+  numberOfPage: number = 0;
+  itemsPerPage: number = 0;
+  selectedPage: number = 0;
+  buttonType!: ButtonType;
+  inputDirection!: InputDirection;
+
+  @Input() totalRecords: number = 0;
+
+  @Output() paginator = new EventEmitter<IPaginator>();
+
+  constructor() {}
+
+  get pageNumbers(): number[] {
+    return Array.from({ length: this.numberOfPage }, (_, i) => i + 1);
+  }
+
+  ngOnInit() {
+    this.itemsPerPageList = [
+      {
+        label: "3",
+        value: 1
+      },
+      {
+        label: "5",
+        value: 2
+      },
+      {
+        label: "20",
+        value: 3
+      }
+    ];
+    this.selectedPage = 1;
+    this.buttonType = ButtonType.button;
+    this.inputDirection = InputDirection.horizontal;
+    this.itemsPerPage = parseInt(this.itemsPerPageList[0].label);
+    this.calculateNumberOfPage(this.totalRecords, this.itemsPerPage);
+    this.updateButtonConfigs();
+    this.emitPaging();
+  }
+
+  ngOnChanges(): void {
+    this.calculateNumberOfPage(this.totalRecords, this.itemsPerPage);
+  }
+
+  selectPage(i: number) {
+    this.selectedPage = i;
+    this.updateButtonConfigs();
+    this.emitPaging();
+  }
+
+  onChangeNumberOfPage(itemsPerPageId: string) {
+    this.selectedPage = 1;
+    this.itemsPerPage = parseInt(this.itemsPerPageList.find(i=> i.value === parseInt(itemsPerPageId))?.label??
+                                this.itemsPerPage.toString());
+
+    this.calculateNumberOfPage(this.totalRecords, this.itemsPerPage);
+    this.updateButtonConfigs();
+    this.emitPaging();
+  }
+
+  private emitPaging() {
+    let paging: IPaginator = {
+      itemsPerPage: this.itemsPerPage,
+      selectedPage: this.selectedPage
+    }
+    this.paginator.emit(paging);
+  }
+
+  private calculateNumberOfPage (totalRecords: number, itemsPerPage: number): number {
+    return this.numberOfPage = Math.ceil(totalRecords/itemsPerPage);
+  }
+
+  private updateButtonConfigs() {
+    // Re-assign the button configuration to trigger change detection
+    this.previousButtonConfig = {
+      ...this.previousButtonConfig,
+      isDisabled: this.selectedPage <= 1
+    };
+    this.nextButtonConfig = {
+      ...this.nextButtonConfig,
+      isDisabled: this.selectedPage >= this.numberOfPage
+    };
+  }
+
+  // Method to return config for page number buttons
+  getPageButtonConfig(page: number): IButtonConfig {
+    return {
+      label: page.toString(),
+      type: ButtonType.button,
+      isActive: page === this.selectedPage, // Set active state based on selectedPage
+      isDisabled: false // Page buttons are never disabled
+    };
+  }
+}

package/src/lib/components/molecules/table/table.component.html

@@ -0,0 +1,45 @@
+<div class="container-xl table-wrapper">
+  <div class="table-title">
+      <h2><b>{{tableName }}</b></h2>
+  </div>
+  <div class="loading-wrapper">
+    <ng-container *ngIf="!(loadingState | async); else loading; then table">
+    </ng-container>
+  </div>
+  <app-paginator [totalRecords] = "totalRecords" (paginator)="changePaginator($event)"></app-paginator>
+</div>
+
+<ng-template #loading>
+  <div class="loading-wrapper">
+    <app-loading></app-loading>
+  </div>
+</ng-template>
+
+<ng-template #table>
+  <ng-container *ngIf="totalRecords == 0; then emptyContent; else tableContent">
+  </ng-container>
+</ng-template>
+
+<ng-template #tableContent>
+  <p-table [value]="items" class="table table-striped table-hover">
+    <ng-template pTemplate="header">
+      <tr>
+        <th>
+          <ng-content select="[selectAllCheckbox]"></ng-content>
+        </th>
+        <ng-container *ngFor=" let col of columns">
+          <th>{{col.name }}</th>
+        </ng-container>
+      </tr>
+    </ng-template>
+    <ng-template pTemplate="body" let-item>
+      <ng-container [ngTemplateOutlet]="bodyTemplate" [ngTemplateOutletContext]="{item:item}"></ng-container>
+    </ng-template>
+  </p-table>
+</ng-template>
+
+<ng-template #emptyContent>
+  <div class="no-record-message">
+    <div>No records</div>
+  </div>
+</ng-template>

package/src/lib/components/molecules/table/table.component.scss

@@ -0,0 +1,169 @@
+:host {
+  width: 100%;
+}
+
+body {
+	color: #566787;
+	background: #f5f5f5;
+	font-family: 'Varela Round', sans-serif;
+	font-size: 13px;
+}
+
+.table-responsive {
+    margin: 30px 0;
+}
+
+.table-wrapper {
+	background: #fff;
+	border-radius: 3px;
+	min-width: 1000px;
+	box-shadow: 0 1px 1px rgba(0,0,0,.05);
+}
+
+.table-title {
+	background: #435d7d;
+	color: #fff;
+	border-radius: 3px 3px 0 0;
+  padding: 0px 12px;
+  display: flex;
+  .table-name {
+    width: 70%;
+  };
+  .table-add {
+    width: 30%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    a {
+      cursor: pointer;
+    }
+  }
+  h2 {
+	font-size: 24px;
+  }
+  .btn-group {
+    float: right;
+  }
+  .btn {
+    color: #fff;
+    float: right;
+    font-size: 13px;
+    border: none;
+    min-width: 50px;
+    border-radius: 2px;
+    border: none;
+    outline: none !important;
+    margin-left: 10px;
+    i {
+      float: left;
+      font-size: 21px;
+      margin-right: 5px;
+    }
+    span {
+      float: left;
+      margin-top: 2px;
+    }
+  }
+}
+
+::ng-deep .table tr th, ::ng-deep .table tr td {
+	border-color: #e9e9e9;
+	padding: 12px 15px;
+	vertical-align: middle;
+}
+
+::ng-deep .table tr th:first-child {
+	width: 60px;
+  display: flex;
+}
+
+::ng-deep .table tr th:last-child {
+	width: 150px;
+}
+
+table.table-striped tbody tr:nth-of-type(odd) {
+	background-color: #fcfcfc;
+}
+
+table.table-striped.table-hover tbody tr:hover {
+	background: #f5f5f5;
+}
+
+::ng-deep .table th {
+  text-align: left;
+  i {
+    font-size: 13px;
+    margin: 0 5px;
+    cursor: pointer;
+  }
+}
+
+
+::ng-deep .table td:last-child i {
+	opacity: 0.9;
+	font-size: 22px;
+	margin: 0 5px;
+}
+
+::ng-deep .table td a {
+	font-weight: bold;
+	color: #566787;
+	display: inline-block;
+	text-decoration: none;
+	outline: none !important;
+}
+
+.hint-text {
+	float: left;
+	margin-top: 10px;
+	font-size: 13px;
+}
+
+.no-record-message {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+}
+
+.excel {
+  display: flex;
+  a {
+    display: inline-flex;
+    align-items: center;
+  }
+}
+
+.loading-wrapper {
+  height: calc(100vh - 220px);
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow-y: auto; /* Scroll vertically when content overflows */
+  overflow-x: hidden; /* Hide horizontal scrollbar */
+
+  /* Custom Scrollbar for WebKit-based Browsers */
+  &::-webkit-scrollbar {
+    width: 12px; /* Adjusted width for a more standard look */
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1; /* Light gray background for the track */
+    border-radius: 10px; /* Rounded corners for the track */
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for a polished look */
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #888; /* Neutral gray color for the thumb */
+    border-radius: 10px; /* Rounded corners for the thumb */
+    border: 3px solid #f1f1f1; /* Creates a gap between the thumb and track */
+    transition: background 0.3s; /* Smooth transition for hover effect */
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #555; /* Darker gray for the thumb on hover */
+  }
+}
+

package/src/lib/components/molecules/table/table.component.ts

@@ -0,0 +1,40 @@
+import { ChangeDetectorRef, Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core';
+import { Observable } from 'rxjs';
+import { IDataColumnConfig, IPaginator } from '../../../shared/interfaces/interface';
+import { CommonModule } from '@angular/common';
+import { TableModule} from 'primeng/table';
+import { LoadingComponent } from '../../atoms/loading/loading.component';
+import { PaginatorComponent } from '../paginator/paginator.component';
+
+@Component({
+  selector: 'app-table',
+  standalone: true,
+  templateUrl: './table.component.html',
+  styleUrls: ['./table.component.scss'],
+  imports: [CommonModule, TableModule, LoadingComponent, PaginatorComponent]
+})
+export class TableComponent<T> implements OnInit {
+  @Input() items: T[] = [];
+  @Input() columns: IDataColumnConfig[] = [];
+  @Input() totalRecords: number = 0;
+  @Input() tableName: string = '';
+  @Input() loadingState!: Observable<boolean>;
+
+  @Output() paginator = new EventEmitter<IPaginator>()
+
+  @ContentChild('bodyTemplate') bodyTemplate!: TemplateRef<any>;
+
+  allSelected = false;
+
+  constructor(private cdRef: ChangeDetectorRef) { }
+
+  ngOnInit() {
+    this.loadingState.subscribe(() => {
+      this.cdRef.detectChanges();  // Explicitly mark for change detection
+    });
+  }
+
+  changePaginator(paging: IPaginator) {
+    this.paginator.emit(paging);
+  }
+}

package/src/lib/components/pages/footer/footer.component.html

@@ -0,0 +1,32 @@
+<footer class="footer">
+  <div class="footer-container">
+    <div class="footer-section">
+      <h3>About Us</h3>
+      <p>We are a company dedicated to providing excellent services and products to our customers.</p>
+    </div>
+
+    <div class="footer-section">
+      <h3>Quick Links</h3>
+      <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Services</a></li>
+        <li><a href="#">Contact</a></li>
+        <li><a href="#">Privacy Policy</a></li>
+      </ul>
+    </div>
+
+    <div class="footer-section">
+      <h3>Follow Us</h3>
+      <div class="social-icons">
+        <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
+        <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
+        <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
+        <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
+      </div>
+    </div>
+  </div>
+
+  <div class="footer-bottom">
+    <p>&copy; 2024 Your Company. All Rights Reserved.</p>
+  </div>
+</footer>