ngx-sp-infra 0.0.0

package/projects/ngx-sp-infra/src/lib/widgets/field-control-error/field-control-error.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input, OnInit, ElementRef, Renderer2 } from '@angular/core';
+
+@Component({
+  selector: 'app-field-control-error',
+  templateUrl: './field-control-error.component.html',
+  styleUrls: ['./field-control-error.component.css']
+})
+export class FieldControlErrorComponent implements OnInit {
+  @Input() showError: boolean;
+  @Input() errorMessage: string;
+
+  constructor(private renderer: Renderer2, private elementRef: ElementRef) { }
+
+  ngOnInit(): void {
+    this.renderer.setStyle(this.elementRef.nativeElement, 'width', '100%');
+  }
+
+}

package/projects/ngx-sp-infra/src/lib/widgets/field-error-message/field-error-message.component.html

@@ -0,0 +1,4 @@
+<div class="invalid-feedback d-block" role="alert"
+    *ngIf="errorMessage !== null">
+    {{ errorMessage }}
+</div>

package/projects/ngx-sp-infra/src/lib/widgets/field-error-message/field-error-message.component.ts

@@ -0,0 +1,35 @@
+import { AbstractControl, FormControl } from '@angular/forms';
+import { Component, Input, OnInit, ElementRef, Renderer2 } from '@angular/core';
+
+import { FormUtils } from '../../utils/form-utils';
+
+@Component({
+  selector: 'app-field-error-message',
+  templateUrl: './field-error-message.component.html',
+  styleUrls: ['./field-error-message.component.css']
+})
+export class FieldErrorMessageComponent implements OnInit {
+  @Input() control: AbstractControl | null;
+  @Input() label: string;
+
+  get errorMessage() {
+    
+    for (let propertyName in this.control?.errors) {
+
+      if (this.control?.errors.hasOwnProperty(propertyName) &&
+        (this.control?.dirty || this.control?.touched)) {
+          return FormUtils.getErrorMessage(this.label, propertyName, this.control?.errors[propertyName]);
+      }
+      
+    }
+
+    return null;
+  }
+  
+  constructor(private renderer: Renderer2, private elementRef: ElementRef) { }
+
+  ngOnInit(): void {
+    this.renderer.setStyle(this.elementRef.nativeElement, 'width', '100%');
+  }
+
+}

package/projects/ngx-sp-infra/src/lib/widgets/loading/loading.component.css

@@ -0,0 +1,7 @@
+/*- Spinner -*/
+.container-spinner{
+  margin-left: 50%;
+}
+.view-spinner{
+  width: 30px;
+}

package/projects/ngx-sp-infra/src/lib/widgets/loading/loading.component.html

@@ -0,0 +1,4 @@
+<!-- Loading -->
+<div class="container-spinner">
+    <img class="view-spinner" src="assets/imgs/spinner.gif" alt="Carregando" title="Carregando informações..">
+</div>

package/projects/ngx-sp-infra/src/lib/widgets/loading/loading.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-loading',
+  templateUrl: './loading.component.html',
+  styleUrls: ['./loading.component.css']
+})
+export class LoadingComponent {
+
+  constructor() { }
+
+}

package/projects/ngx-sp-infra/src/lib/widgets/loading-button/loading-button.component.css

@@ -0,0 +1,3 @@
+.button-spinner{
+    width: 24px;
+  }

package/projects/ngx-sp-infra/src/lib/widgets/loading-button/loading-button.component.html

@@ -0,0 +1,2 @@
+<img class="button-spinner" src="assets/imgs/spinner.gif"
+    *ngIf="isLoading">

package/projects/ngx-sp-infra/src/lib/widgets/loading-button/loading-button.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-loading-button',
+  templateUrl: './loading-button.component.html',
+  styleUrls: ['./loading-button.component.css']
+})
+export class LoadingButtonComponent {
+  @Input() isLoading: boolean;
+
+  constructor() { }
+
+}

package/projects/ngx-sp-infra/src/lib/widgets/ordering/ordering.component.html

@@ -0,0 +1,23 @@
+<ng-template [ngIf]="sortDirection !== 'desc'">
+  <app-svg-storage
+    (click)="sort()"
+    [svgName]="'arrow-up'"
+    [class.rotate]="sortDirection !== ''"
+    [svgColor]="getSvgColor()"
+    tooltip="'Ascendente'"
+    style="cursor: pointer;"
+  ></app-svg-storage>
+  <!-- Ordenar Ascendente -->
+</ng-template>
+
+<ng-template [ngIf]="sortDirection === 'desc'">
+  <app-svg-storage
+    (click)="sort()"
+    [svgName]="'arrow-down'"
+    [class.rotate]="true"
+    [svgColor]="'blue'"
+    tooltip="'Descendente'"
+    style="cursor: pointer;"
+  ></app-svg-storage>
+  <!-- Ordenar Descendente -->
+</ng-template>

package/projects/ngx-sp-infra/src/lib/widgets/ordering/ordering.component.ts

@@ -0,0 +1,50 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-ordering',
+  templateUrl: './ordering.component.html',
+  styleUrls: ['./ordering.component.scss']
+})
+export class OrderingComponent implements OnInit {
+
+  @Input() isColumnClicked: boolean = false;
+  // Direção atual da ordenação ('asc', 'desc' ou vazio)
+  @Input() sortDirection: string = '';
+
+  // Atributos de ordenação
+  @Input() sortAttributes: string | string[] = [];
+
+  // Evento emitido quando a direção de ordenação é alterada
+  @Output() sortDirectionChange = new EventEmitter<string>();
+
+  // Evento emitido quando ocorre uma mudança na ordenação
+  @Output() sortChange = new EventEmitter<{ direction: string, column: string | string[] }>();
+
+  // Função chamada quando o botão de ordenação é clicado
+  sort() {
+    // Inverte a direção de ordenação atual
+    if (this.sortDirection === 'asc') {
+      this.sortDirection = 'desc';
+    } else {
+      this.sortDirection = 'asc';
+    }
+
+    // Emite o evento com a nova direção de ordenação
+    this.sortDirectionChange.emit(this.sortDirection);
+
+    // Emite o evento de mudança na ordenação com a direção e os atributos de ordenação
+    this.sortChange.emit({ direction: this.sortDirection, column: this.sortAttributes });
+  }
+
+  // Obtém a cor do ícone com base na direção de ordenação atual
+  getSvgColor(): string {
+    return this.sortDirection === 'asc' ? 'blue' : 'lightgray';
+  }
+
+  constructor() {}
+
+  ngOnInit(): void {
+    // Define a direção de ordenação inicial como vazio
+    this.sortDirection = '';
+  }
+}