paging - search - loader

matsen-tool/src/app/_components/paging/paging.component.html

@@ -1,23 +1,30 @@
-<mat-paginator *ngIf="dataLength > 0" class=""
-               [pageSizeOptions]="pageSizeOptions"
-               [length]="dataLength"
-               (page)="handlePageEvent($event)"
-               [pageSize]="pageSize"
-               [pageIndex]="pageIndex"
-               showFirstLastButtons>
-</mat-paginator>
-<div *ngIf="searchable">
-    <form [formGroup]="searchForm">
-        <input type="text" formControlName="inputText" placeholder="{{'form.search-placeholder' | translate}}">
-    </form>
+<div class="spt-tools">
+    <div *ngIf="searchable">
+        <form [formGroup]="searchForm" class="position-relative">
+            <input type="text" class="form-control" formControlName="inputText"
+                   placeholder="{{'form.search-placeholder' | translate}}">
+            <span class="spt-clear" *ngIf="searchForm.get('inputText')?.value" (click)="clearForm()"></span>
+        </form>
+    </div>
+    <mat-paginator *ngIf="dataLength > 0" class=""
+                   [pageSizeOptions]="pageSizeOptions"
+                   [length]="dataLength"
+                   (page)="handlePageEvent($event)"
+                   [pageSize]="pageSize"
+                   [pageIndex]="pageIndex"
+                   showFirstLastButtons>
+    </mat-paginator>
 </div>
-
 <ng-content></ng-content>
-<mat-paginator *ngIf="dataLength > 0" class=""
-               [pageSizeOptions]="pageSizeOptions"
-               [length]="dataLength"
-               (page)="handlePageEvent($event)"
-               [pageSize]="pageSize"
-               [pageIndex]="pageIndex"
-               showFirstLastButtons>
-</mat-paginator>
+<div *ngIf="dataLength <= 0" class="spt-no-entries">{{'form.no-data' | translate}}</div>
+<div class="spt-tools single">
+    <mat-paginator *ngIf="dataLength > 0" class=""
+                   [pageSizeOptions]="pageSizeOptions"
+                   [length]="dataLength"
+                   (page)="handlePageEvent($event)"
+                   [pageSize]="pageSize"
+                   [pageIndex]="pageIndex"
+                   showFirstLastButtons>
+    </mat-paginator>
+</div>
+

matsen-tool/src/app/_components/paging/paging.component.ts

@@ -15,7 +15,6 @@ export class PagingComponent implements OnInit {
     @Input() public pageSize!: number;
     @Input() public pageSizeOptions!: number[];
     @Input() public searchable: boolean;
-
     
     @ViewChild(MatPaginator) public paginator!: MatPaginator;
 
@@ -25,7 +24,7 @@ export class PagingComponent implements OnInit {
     public dataLength: number;
     public pageEvent: PageEvent;
     protected pageIndex: number;
-    protected searchForm!: FormGroup;
+    public searchForm!: FormGroup;
 
     constructor(
         private fb: FormBuilder
@@ -81,4 +80,8 @@ export class PagingComponent implements OnInit {
     getPageSize(): number {
         return this.pageSize;
     }
+
+    clearForm() {
+        this.searchForm.get('inputText')!.setValue('');
+    }
 }

matsen-tool/src/app/_views/partners/partner-list/partner-list.component.html

@@ -10,6 +10,16 @@
         <div class="table-responsive">
             <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)" class="mat-elevation-z8">
 
+                <ng-container matColumnDef="details">
+                    <th mat-header-cell *matHeaderCellDef>
+                        {{ 'overview.details' | translate }}
+                    </th>
+                    <td mat-cell class="spt-button-td" *matCellDef="let element">
+                            <span class="btn btn-primary spt-icon-details"
+                                  data-type="user-tool" data-action="edit" (click)="navigateToPartnerDetails(element)"></span>
+                    </td>
+                </ng-container>
+
                 <ng-container matColumnDef="pos">
                     <th mat-header-cell *matHeaderCellDef>
                         {{ 'overview.number' | translate }}
@@ -60,16 +70,6 @@
                     </td>
                 </ng-container>
 
-                <ng-container matColumnDef="details">
-                    <th mat-header-cell class="text-end" *matHeaderCellDef>
-                        {{ 'overview.details' | translate }}
-                    </th>
-                    <td mat-cell class="spt-button-td" *matCellDef="let element">
-                            <span class="btn btn-primary spt-icon-details"
-                                  data-type="user-tool" data-action="edit" (click)="navigateToPartnerDetails(element)"></span>
-                    </td>
-                </ng-container>
-
                 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                 <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
             </table>

matsen-tool/src/app/_views/products/product-list/product-list.component.html

@@ -12,6 +12,16 @@
             <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
                    class="mat-elevation-z8">
 
+                <ng-container matColumnDef="details">
+                    <th mat-header-cell *matHeaderCellDef>
+                        {{ 'overview.details' | translate }}
+                    </th>
+                    <td mat-cell class="spt-button-td" *matCellDef="let element">
+                            <span class="btn btn-primary spt-icon-details"
+                                  data-type="user-tool" data-action="edit" (click)="navigateToProductDetails(element)"></span>
+                    </td>
+                </ng-container>
+
                 <ng-container matColumnDef="pos">
                     <th mat-header-cell *matHeaderCellDef>
                         {{ 'overview.number' | translate }}
@@ -58,16 +68,6 @@
                     </td>
                 </ng-container>
 
-                <ng-container matColumnDef="details">
-                    <th mat-header-cell class="text-end" *matHeaderCellDef>
-                        {{ 'overview.details' | translate }}
-                    </th>
-                    <td mat-cell class="spt-button-td" *matCellDef="let element">
-                            <span class="btn btn-primary spt-icon-details"
-                                  data-type="user-tool" data-action="edit" (click)="navigateToProductDetails(element)"></span>
-                    </td>
-                </ng-container>
-
                 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                 <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
             </table>

matsen-tool/src/app/_views/sales/sale-list/sale-list.component.html

@@ -10,6 +10,16 @@
             <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
                    class="mat-elevation-z8">
 
+                <ng-container matColumnDef="details">
+                    <th mat-header-cell *matHeaderCellDef>
+                        {{ 'overview.details' | translate }}
+                    </th>
+                    <td mat-cell class="spt-button-td" *matCellDef="let element">
+                            <span class="btn btn-primary spt-icon-details"
+                                  data-type="user-tool" data-action="edit" (click)="navigateToSaleDetails(element)"></span>
+                    </td>
+                </ng-container>
+
                 <ng-container matColumnDef="pos">
                     <th mat-header-cell *matHeaderCellDef>
                         {{ 'overview.number' | translate }}
@@ -79,16 +89,6 @@
                     </td>
                 </ng-container>
 
-                <ng-container matColumnDef="details">
-                    <th mat-header-cell class="text-end" *matHeaderCellDef>
-                        {{ 'overview.details' | translate }}
-                    </th>
-                    <td mat-cell class="spt-button-td" *matCellDef="let element">
-                            <span class="btn btn-primary spt-icon-details"
-                                  data-type="user-tool" data-action="edit" (click)="navigateToSaleDetails(element)"></span>
-                    </td>
-                </ng-container>
-
                 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                 <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
             </table>

matsen-tool/src/app/_views/user/user-list/user-list.component.html

@@ -6,6 +6,16 @@
         <div class="table-responsive">
             <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)" class="mat-elevation-z8">
 
+                <ng-container matColumnDef="details">
+                    <th mat-header-cell *matHeaderCellDef>
+                        {{ 'overview.details' | translate }}
+                    </th>
+                    <td mat-cell class="spt-button-td" *matCellDef="let element">
+                            <span class="btn btn-primary spt-icon-details"
+                                  data-type="user-tool" data-action="edit" (click)="navigateToUserDetails(element)"></span>
+                    </td>
+                </ng-container>
+
                 <ng-container matColumnDef="pos">
                     <th mat-header-cell *matHeaderCellDef>
                         {{ 'overview.number' | translate }}
@@ -52,16 +62,6 @@
                     </td>
                 </ng-container>
 
-                <ng-container matColumnDef="details">
-                    <th mat-header-cell class="text-end" *matHeaderCellDef>
-                        {{ 'overview.details' | translate }}
-                    </th>
-                    <td mat-cell class="spt-button-td" *matCellDef="let element">
-                            <span class="btn btn-primary spt-icon-details"
-                                  data-type="user-tool" data-action="edit" (click)="navigateToUserDetails(element)"></span>
-                    </td>
-                </ng-container>
-
                 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                 <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
             </table>

matsen-tool/src/assets/i18n/de.json

@@ -122,7 +122,8 @@
     "profit": "Gewinn",
     "quantity": "Anzahl",
     "send": "Speichern",
-    "search-placeholder": "Suche"
+    "search-placeholder": "Suche",
+    "no-data": "Keine Datensätze gefunden."
   },
   "sales":
   {

matsen-tool/src/assets/scss/_basics.scss

@@ -92,6 +92,7 @@ img {
 .card {
   border-radius: 0;
   border: none;
+
   .card-header:first-child {
     border-radius: 0;
   }
@@ -106,7 +107,7 @@ img {
 
 .spt-main {
   background: #fff;
-  color: rgba(33,37,41);
+  color: rgba(33, 37, 41);
   @media only screen and (max-width: 1199px) {
     //width: calc(100% - calc(var(--bs-gutter-x) * 0.5) - calc(var(--bs-gutter-x) * 0.5));
   }
@@ -116,29 +117,36 @@ img {
   position: relative;
   min-height: 1px;
   margin-bottom: 3rem;
+
   .top-btn {
     display: flex;
     justify-content: flex-end;
   }
+
   .card:not(.contacts .card, .tasks .card, .post .card) {
     border: none;
     border-radius: 0;
     border-top: 1px solid #2B3A44;
     border-bottom: 1px solid #2B3A44;
+
     .card-body {
       padding: 5px 0;
+
       .spt-col {
         padding-top: 20px;
       }
+
       .has-image {
         border-left: 1px solid #c1c1c1;
         align-content: center;
       }
+
       img {
         margin: 0 auto;
         max-width: 80%;
       }
     }
+
     .mat-h1,
     .mat-headline-5,
     .mat-h2,
@@ -162,6 +170,7 @@ img {
     background: #fafafa;
     margin-bottom: 20px;
   }
+
   .top-btn {
     position: absolute;
     //right: 0;
@@ -169,14 +178,17 @@ img {
     right: 10px;
     top: -53px;
     margin: 0;
+
     .btn {
       //padding-top: 17px;
       //padding-bottom: 17px;
     }
   }
+
   app-paging > .mat-mdc-paginator:first-child {
     border: none;
   }
+
   .mat-mdc-cell {
     background: #fafafa;
   }
@@ -241,4 +253,76 @@ img {
   @media only screen and (max-width: 767px) {
     display: block;
   }
-}
+}
+
+.spt-loader {
+  width: 24px;
+  height: 80px;
+  display: block;
+  margin: 35px auto 0;
+  border: 1px solid #FFF;
+  border-radius: 0 0 50px 50px;
+  position: relative;
+  box-shadow: 0px 0px #FF3D00 inset;
+  background-image: linear-gradient(#FF3D00 100px, transparent 0);
+  background-position: 0px 0px;
+  background-size: 22px 80px;
+  background-repeat: no-repeat;
+  box-sizing: border-box;
+  animation: animloader 6s linear infinite;
+}
+
+.spt-loader::after {
+  content: '';
+  box-sizing: border-box;
+  top: -6px;
+  left: 50%;
+  transform: translateX(-50%);
+  position: absolute;
+  border: 1px solid #FFF;
+  border-radius: 50%;
+  width: 28px;
+  height: 6px;
+}
+
+.spt-loader::before {
+  content: '';
+  box-sizing: border-box;
+  left: 0;
+  bottom: -4px;
+  border-radius: 50%;
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  animation: animloader1 6s linear infinite;
+}
+
+@keyframes animloader {
+  0% {
+    background-position: 0px 80px;
+  }
+  100% {
+    background-position: 0px 0px;
+  }
+}
+
+@keyframes animloader1 {
+  0% {
+    box-shadow: 4px -10px rgba(255, 255, 255, 0), 6px 0px rgba(255, 255, 255, 0), 8px -15px rgba(255, 255, 255, 0), 12px 0px rgba(255, 255, 255, 0);
+  }
+  20% {
+    box-shadow: 4px -20px rgba(255, 255, 255, 0), 8px -10px rgba(255, 255, 255, 0), 10px -30px rgba(255, 255, 255, 0.5), 15px -5px rgba(255, 255, 255, 0);
+  }
+  40% {
+    box-shadow: 2px -40px rgba(255, 255, 255, 0.5), 8px -30px rgba(255, 255, 255, 0.4), 8px -60px rgba(255, 255, 255, 0.5), 12px -15px rgba(255, 255, 255, 0.5);
+  }
+  60% {
+    box-shadow: 4px -60px rgba(255, 255, 255, 0.5), 6px -50px rgba(255, 255, 255, 0.4), 10px -90px rgba(255, 255, 255, 0.5), 15px -25px rgba(255, 255, 255, 0.5);
+  }
+  80% {
+    box-shadow: 2px -80px rgba(255, 255, 255, 0.5), 4px -70px rgba(255, 255, 255, 0.4), 8px -120px rgba(255, 255, 255, 0), 12px -35px rgba(255, 255, 255, 0.5);
+  }
+  100% {
+    box-shadow: 4px -100px rgba(255, 255, 255, 0), 8px -90px rgba(255, 255, 255, 0), 10px -120px rgba(255, 255, 255, 0), 15px -45px rgba(255, 255, 255, 0);
+  }
+}

matsen-tool/src/assets/scss/_table.scss

@@ -45,13 +45,57 @@ th.mat-sort-header-sorted {
   }
 }
 
+.spt-tools {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-top: 1px solid #2b3a44;
+  min-height: 57px;
+
+  &.single {
+    justify-content: flex-end;
+  }
+}
+
+.spt-clear {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  background: #fff;
+  width: 20px;
+  height: 30px;
+  cursor: pointer;
+  transform: translate(0, -50%);
+
+  &:before, &:after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 10px;
+    height: 2px;
+    background: #000;
+  }
+
+  &:before {
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+
+  &:after {
+    transform: translate(-50%, -50%) rotate(-45deg);
+  }
+}
+
+.spt-no-entries {
+  padding: 20px 16px;
+}
+
 .mat-mdc-paginator {
   background: transparent !important;
-  border-top: 1px solid #2b3a44;
 
   .mat-mdc-paginator-container {
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-start;
   }
 
   .mat-mdc-paginator-page-size-label,