spawntree
/
matsen-tool-fe
2
0
Atdalīts 0
Kods Problēmas 0 Izmaiņu pieprasījumi 0 Laidieni 0 Vikivietne Aktivitāte
Pārlūkot izejas kodu

paging - search - loader

master
Florian Eisenmenger pirms 1 gada
vecāks
e3d2619955
revīzija
ba289e01ef
9 mainītis faili ar 207 papildinājumiem un 68 dzēšanām
Dalītais skats
Salīdzināšanas iespējas
Rādīt statistiku Lejupielādēt ielāpa failu Lejupielādēt izmaiņu failu
  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 Parādīt failu

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


+ 5
- 2
matsen-tool/src/app/_components/paging/paging.component.ts Parādīt failu

@@ -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('');
}
}

+ 10
- 10
matsen-tool/src/app/_views/partners/partner-list/partner-list.component.html Parādīt failu

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


+ 10
- 10
matsen-tool/src/app/_views/products/product-list/product-list.component.html Parādīt failu

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


+ 10
- 10
matsen-tool/src/app/_views/sales/sale-list/sale-list.component.html Parādīt failu

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


+ 10
- 10
matsen-tool/src/app/_views/user/user-list/user-list.component.html Parādīt failu

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


+ 2
- 1
matsen-tool/src/assets/i18n/de.json Parādīt failu

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


+ 86
- 2
matsen-tool/src/assets/scss/_basics.scss Parādīt failu

@@ -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);
}
}

+ 46
- 2
matsen-tool/src/assets/scss/_table.scss Parādīt failu

@@ -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,


Rakstīt Priekšskatītījums
Notiek ielāde…
Atcelt
Saglabāt