spawntree
/
matsen-tool-fe
2
0
Bifurcation 0
Code Tickets 0 Demandes d'ajout 0 Versions 0 Wiki Activité
Parcourir la source

paging - search - loader

master
Florian Eisenmenger il y a 1 an
Parent
e3d2619955
révision
ba289e01ef
9 fichiers modifiés avec 207 ajouts et 68 suppressions
Vue unifiée
Option de Diff
Voir les Statistiques Télécharger le Fichier Patch Télécharger le Fichier des Différences
  1. +28
    -21
      matsen-tool/src/app/_components/paging/paging.component.html
  2. +5
    -2
      matsen-tool/src/app/_components/paging/paging.component.ts
  3. +10
    -10
      matsen-tool/src/app/_views/partners/partner-list/partner-list.component.html
  4. +10
    -10
      matsen-tool/src/app/_views/products/product-list/product-list.component.html
  5. +10
    -10
      matsen-tool/src/app/_views/sales/sale-list/sale-list.component.html
  6. +10
    -10
      matsen-tool/src/app/_views/user/user-list/user-list.component.html
  7. +2
    -1
      matsen-tool/src/assets/i18n/de.json
  8. +86
    -2
      matsen-tool/src/assets/scss/_basics.scss
  9. +46
    -2
      matsen-tool/src/assets/scss/_table.scss

+ 28
- 21
matsen-tool/src/app/_components/paging/paging.component.html Voir le fichier

@@ -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> </div>

<ng-content></ng-content> <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>


+ 5
- 2
matsen-tool/src/app/_components/paging/paging.component.ts Voir le fichier

@@ -15,7 +15,6 @@ export class PagingComponent implements OnInit {
@Input() public pageSize!: number; @Input() public pageSize!: number;
@Input() public pageSizeOptions!: number[]; @Input() public pageSizeOptions!: number[];
@Input() public searchable: boolean; @Input() public searchable: boolean;

@ViewChild(MatPaginator) public paginator!: MatPaginator; @ViewChild(MatPaginator) public paginator!: MatPaginator;


@@ -25,7 +24,7 @@ export class PagingComponent implements OnInit {
public dataLength: number; public dataLength: number;
public pageEvent: PageEvent; public pageEvent: PageEvent;
protected pageIndex: number; protected pageIndex: number;
protected searchForm!: FormGroup;
public searchForm!: FormGroup;


constructor( constructor(
private fb: FormBuilder private fb: FormBuilder
@@ -81,4 +80,8 @@ export class PagingComponent implements OnInit {
getPageSize(): number { getPageSize(): number {
return this.pageSize; return this.pageSize;
} }

clearForm() {
this.searchForm.get('inputText')!.setValue('');
}
} }

+ 10
- 10
matsen-tool/src/app/_views/partners/partner-list/partner-list.component.html Voir le fichier

@@ -10,6 +10,16 @@
<div class="table-responsive"> <div class="table-responsive">
<table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)" class="mat-elevation-z8"> <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"> <ng-container matColumnDef="pos">
<th mat-header-cell *matHeaderCellDef> <th mat-header-cell *matHeaderCellDef>
{{ 'overview.number' | translate }} {{ 'overview.number' | translate }}
@@ -60,16 +70,6 @@
</td> </td>
</ng-container> </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-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>


+ 10
- 10
matsen-tool/src/app/_views/products/product-list/product-list.component.html Voir le fichier

@@ -12,6 +12,16 @@
<table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)" <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
class="mat-elevation-z8"> 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"> <ng-container matColumnDef="pos">
<th mat-header-cell *matHeaderCellDef> <th mat-header-cell *matHeaderCellDef>
{{ 'overview.number' | translate }} {{ 'overview.number' | translate }}
@@ -58,16 +68,6 @@
</td> </td>
</ng-container> </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-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>


+ 10
- 10
matsen-tool/src/app/_views/sales/sale-list/sale-list.component.html Voir le fichier

@@ -10,6 +10,16 @@
<table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)" <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
class="mat-elevation-z8"> 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"> <ng-container matColumnDef="pos">
<th mat-header-cell *matHeaderCellDef> <th mat-header-cell *matHeaderCellDef>
{{ 'overview.number' | translate }} {{ 'overview.number' | translate }}
@@ -79,16 +89,6 @@
</td> </td>
</ng-container> </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-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>


+ 10
- 10
matsen-tool/src/app/_views/user/user-list/user-list.component.html Voir le fichier

@@ -6,6 +6,16 @@
<div class="table-responsive"> <div class="table-responsive">
<table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)" class="mat-elevation-z8"> <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"> <ng-container matColumnDef="pos">
<th mat-header-cell *matHeaderCellDef> <th mat-header-cell *matHeaderCellDef>
{{ 'overview.number' | translate }} {{ 'overview.number' | translate }}
@@ -52,16 +62,6 @@
</td> </td>
</ng-container> </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-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>


+ 2
- 1
matsen-tool/src/assets/i18n/de.json Voir le fichier

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


+ 86
- 2
matsen-tool/src/assets/scss/_basics.scss Voir le fichier

@@ -92,6 +92,7 @@ img {
.card { .card {
border-radius: 0; border-radius: 0;
border: none; border: none;

.card-header:first-child { .card-header:first-child {
border-radius: 0; border-radius: 0;
} }
@@ -106,7 +107,7 @@ img {


.spt-main { .spt-main {
background: #fff; background: #fff;
color: rgba(33,37,41);
color: rgba(33, 37, 41);
@media only screen and (max-width: 1199px) { @media only screen and (max-width: 1199px) {
//width: calc(100% - calc(var(--bs-gutter-x) * 0.5) - calc(var(--bs-gutter-x) * 0.5)); //width: calc(100% - calc(var(--bs-gutter-x) * 0.5) - calc(var(--bs-gutter-x) * 0.5));
} }
@@ -116,29 +117,36 @@ img {
position: relative; position: relative;
min-height: 1px; min-height: 1px;
margin-bottom: 3rem; margin-bottom: 3rem;

.top-btn { .top-btn {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }

.card:not(.contacts .card, .tasks .card, .post .card) { .card:not(.contacts .card, .tasks .card, .post .card) {
border: none; border: none;
border-radius: 0; border-radius: 0;
border-top: 1px solid #2B3A44; border-top: 1px solid #2B3A44;
border-bottom: 1px solid #2B3A44; border-bottom: 1px solid #2B3A44;

.card-body { .card-body {
padding: 5px 0; padding: 5px 0;

.spt-col { .spt-col {
padding-top: 20px; padding-top: 20px;
} }

.has-image { .has-image {
border-left: 1px solid #c1c1c1; border-left: 1px solid #c1c1c1;
align-content: center; align-content: center;
} }

img { img {
margin: 0 auto; margin: 0 auto;
max-width: 80%; max-width: 80%;
} }
} }

.mat-h1, .mat-h1,
.mat-headline-5, .mat-headline-5,
.mat-h2, .mat-h2,
@@ -162,6 +170,7 @@ img {
background: #fafafa; background: #fafafa;
margin-bottom: 20px; margin-bottom: 20px;
} }

.top-btn { .top-btn {
position: absolute; position: absolute;
//right: 0; //right: 0;
@@ -169,14 +178,17 @@ img {
right: 10px; right: 10px;
top: -53px; top: -53px;
margin: 0; margin: 0;

.btn { .btn {
//padding-top: 17px; //padding-top: 17px;
//padding-bottom: 17px; //padding-bottom: 17px;
} }
} }

app-paging > .mat-mdc-paginator:first-child { app-paging > .mat-mdc-paginator:first-child {
border: none; border: none;
} }

.mat-mdc-cell { .mat-mdc-cell {
background: #fafafa; background: #fafafa;
} }
@@ -241,4 +253,76 @@ img {
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
display: block; 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);
}
}

+ 46
- 2
matsen-tool/src/assets/scss/_table.scss Voir le fichier

@@ -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 { .mat-mdc-paginator {
background: transparent !important; background: transparent !important;
border-top: 1px solid #2b3a44;


.mat-mdc-paginator-container { .mat-mdc-paginator-container {
display: flex; display: flex;
justify-content: space-between;
justify-content: flex-start;
} }


.mat-mdc-paginator-page-size-label, .mat-mdc-paginator-page-size-label,


Écrire Aperçu
Chargement…
Annuler
Enregistrer