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

Styling Responsive

master
Florian Eisenmenger il y a 1 an
Parent
44baf66c03
révision
14e36f8456
21 fichiers modifiés avec 595 ajouts et 563 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. +1
    -1
      matsen-tool/src/app/_components/layout/two-column/two-column.component.html
  2. +3
    -3
      matsen-tool/src/app/_views/contacts/contact-list/contact-list.component.html
  3. +4
    -4
      matsen-tool/src/app/_views/contacts/contacts-detail/contacts-detail.component.html
  4. +75
    -73
      matsen-tool/src/app/_views/documents/document-list/document-list.component.html
  5. +9
    -19
      matsen-tool/src/app/_views/home/home.component.html
  6. +60
    -58
      matsen-tool/src/app/_views/partners/partner-list/partner-list.component.html
  7. +4
    -4
      matsen-tool/src/app/_views/partners/partners-detail/partners-detail.component.html
  8. +2
    -2
      matsen-tool/src/app/_views/posts/post-list/post-list.component.html
  9. +57
    -55
      matsen-tool/src/app/_views/products/product-list/product-list.component.html
  10. +2
    -2
      matsen-tool/src/app/_views/products/products-detail/products-detail.component.html
  11. +78
    -76
      matsen-tool/src/app/_views/sales/sale-list/sale-list.component.html
  12. +2
    -2
      matsen-tool/src/app/_views/sales/sales-detail/sales-detail.component.html
  13. +9
    -9
      matsen-tool/src/app/_views/tasks/task-list/task-list.component.html
  14. +2
    -2
      matsen-tool/src/app/_views/user/user-detail/user-detail.component.html
  15. +56
    -54
      matsen-tool/src/app/_views/user/user-list/user-list.component.html
  16. +12
    -199
      matsen-tool/src/assets/scss/_basics.scss
  17. +25
    -0
      matsen-tool/src/assets/scss/_contacts.scss
  18. +87
    -0
      matsen-tool/src/assets/scss/_sidebar.scss
  19. +6
    -0
      matsen-tool/src/assets/scss/_table.scss
  20. +98
    -0
      matsen-tool/src/assets/scss/_tasks-posts.scss
  21. +3
    -0
      matsen-tool/src/styles.scss

+ 1
- 1
matsen-tool/src/app/_components/layout/two-column/two-column.component.html Voir le fichier

@@ -66,7 +66,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="col-10 pb-5 spt-main">
<div class="col-12 col-xl-10 pb-5 spt-main">
<div class="pe-3 pt-3"> <div class="pe-3 pt-3">
<div class="spt-back-btn mb-4" (click)="goBack()">{{'basic.back' | translate}}</div> <div class="spt-back-btn mb-4" (click)="goBack()">{{'basic.back' | translate}}</div>
<router-outlet></router-outlet> <router-outlet></router-outlet>


+ 3
- 3
matsen-tool/src/app/_views/contacts/contact-list/contact-list.component.html Voir le fichier

@@ -11,7 +11,7 @@
> >
<div class="overflow-hidden"> <div class="overflow-hidden">
<div class="row"> <div class="row">
<div class="col-4 spt-contact-box" *ngFor="let contact of contacts">
<div class="col-12 col-md-6 col-xl-4 spt-contact-box" *ngFor="let contact of contacts">
<div class="card"> <div class="card">
<div class="card-body row"> <div class="card-body row">
<div class="col-4"> <div class="col-4">
@@ -27,9 +27,9 @@
{{ contact.position }}</p> {{ contact.position }}</p>
</div> </div>
</div> </div>
<span role="button" (click)="navigateToContactDetails(contact)"
class="badge bg-secondary p-2">{{ 'basic.details' | translate }}</span>
</div> </div>
<span role="button" (click)="navigateToContactDetails(contact)"
class="badge bg-secondary p-2">{{ 'basic.details' | translate }}</span>
</div> </div>
</div> </div>
</div> </div>


+ 4
- 4
matsen-tool/src/app/_views/contacts/contacts-detail/contacts-detail.component.html Voir le fichier

@@ -1,9 +1,9 @@
<div *ngIf="contact" class="spt-container"> <div *ngIf="contact" class="spt-container">
<div class="card contacts-detail"> <div class="card contacts-detail">
<div class="card-body row"> <div class="card-body row">
<div class="spt-col col-8">
<div class="spt-col col-12 col-sm-6 col-lg-8">
<div class="row"> <div class="row">
<div class="col-6">
<div class="col-12 col-lg-6">
<h1>{{ contact.firstName }} {{ contact.lastName }}</h1> <h1>{{ contact.firstName }} {{ contact.lastName }}</h1>
<dl> <dl>
<dt *ngIf="contact.position">{{'form.position' | translate}}:</dt> <dt *ngIf="contact.position">{{'form.position' | translate}}:</dt>
@@ -16,7 +16,7 @@
<dd *ngIf="contact.birthday">{{ contact.birthday | date:'dd.MM.YYYY' }}</dd> <dd *ngIf="contact.birthday">{{ contact.birthday | date:'dd.MM.YYYY' }}</dd>
</dl> </dl>
</div> </div>
<div class="col-6">
<div class="col-12 col-lg-6">
<ul *ngFor="let contactPartnerProduct of contactPartnerProducts"> <ul *ngFor="let contactPartnerProduct of contactPartnerProducts">
<!-- TODO: contactPartnerProduct.productName ist falsch, hier muss die ID rein --> <!-- TODO: contactPartnerProduct.productName ist falsch, hier muss die ID rein -->
<li><a href="/products/{{this.appHelperService.extractId(contactPartnerProduct.product?.id)}}">{{contactPartnerProduct.product?.name}}</a></li> <li><a href="/products/{{this.appHelperService.extractId(contactPartnerProduct.product?.id)}}">{{contactPartnerProduct.product?.name}}</a></li>
@@ -24,7 +24,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-4 has-image">
<div class="col-12 col-sm-6 col-lg-4 has-image">
<img *ngIf="contact.imageUrl !== null && contact.imageUrl !== undefined" src="{{contact.imageUrl}}" width="247" height="94" <img *ngIf="contact.imageUrl !== null && contact.imageUrl !== undefined" src="{{contact.imageUrl}}" width="247" height="94"
alt="{{contact.firstName}} {{contact.lastName}}" title="{{contact.firstName}} {{contact.lastName}}" /> alt="{{contact.firstName}} {{contact.lastName}}" title="{{contact.firstName}} {{contact.lastName}}" />
</div> </div>


+ 75
- 73
matsen-tool/src/app/_views/documents/document-list/document-list.component.html Voir le fichier

@@ -6,89 +6,91 @@
[getDataFunction]="getData" [getDataFunction]="getData"
[dataSource]="dataSource" [dataSource]="dataSource"
> >
<table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
class="mat-elevation-z8">
<div class="table-responsive">
<table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
class="mat-elevation-z8">


<ng-container matColumnDef="pos">
<th mat-header-cell *matHeaderCellDef>
{{ 'overview.number' | translate }}
</th>
<td mat-cell
*matCellDef="let element">{{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }}
</td>
</ng-container>
<ng-container matColumnDef="pos">
<th mat-header-cell *matHeaderCellDef>
{{ 'overview.number' | translate }}
</th>
<td mat-cell
*matCellDef="let element">{{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }}
</td>
</ng-container>


<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header
sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.document' | translate }}">
{{ 'overview.document' | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.name }}
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header
sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.document' | translate }}">
{{ 'overview.document' | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.name }}
</td>
</ng-container>


<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef>
{{ 'overview.description' | translate }}
</th>
<td mat-cell *matCellDef="let element"
title="{{element.description}}">{{ element.description?.length > 70 ? element.description?.slice(0, 70) + '...' : element.description }}
</td>
</ng-container>
<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef>
{{ 'overview.description' | translate }}
</th>
<td mat-cell *matCellDef="let element"
title="{{element.description}}">{{ element.description?.length > 70 ? element.description?.slice(0, 70) + '...' : element.description }}
</td>
</ng-container>


<ng-container matColumnDef="partnerName">
<th mat-header-cell *matHeaderCellDef>
{{ 'overview.partner' | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.partnerName }}
</td>
</ng-container>
<ng-container matColumnDef="partnerName">
<th mat-header-cell *matHeaderCellDef>
{{ 'overview.partner' | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.partnerName }}
</td>
</ng-container>


<ng-container matColumnDef="productName">
<th mat-header-cell *matHeaderCellDef>
{{ 'overview.product' | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.productName }}
</td>
</ng-container>
<ng-container matColumnDef="productName">
<th mat-header-cell *matHeaderCellDef>
{{ 'overview.product' | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.productName }}
</td>
</ng-container>


<ng-container matColumnDef="createdAt">
<th mat-header-cell *matHeaderCellDef mat-sort-header
sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.uploaded' | translate }}">
{{ 'overview.uploaded' | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.createdAt | date:'dd.MM.YYYY HH:mm' }}
</td>
</ng-container>
<ng-container matColumnDef="createdAt">
<th mat-header-cell *matHeaderCellDef mat-sort-header
sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.uploaded' | translate }}">
{{ 'overview.uploaded' | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.createdAt | date:'dd.MM.YYYY HH:mm' }}
</td>
</ng-container>


<ng-container matColumnDef="createdByName">
<th mat-header-cell *matHeaderCellDef mat-sort-header
sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.createdBy' | translate }}">
{{ 'overview.createdBy' | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.createdByName }}
</td>
</ng-container>
<ng-container matColumnDef="createdByName">
<th mat-header-cell *matHeaderCellDef mat-sort-header
sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.createdBy' | translate }}">
{{ 'overview.createdBy' | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.createdByName }}
</td>
</ng-container>


<ng-container matColumnDef="download">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">
<span class="btn btn-primary bi bi-download p-2-4"
data-type="user-tool" data-action="edit" (click)="navigateToDocumentFile(element)"></span>
</td>
</ng-container>
<ng-container matColumnDef="download">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">
<span class="btn btn-primary bi bi-download p-2-4"
data-type="user-tool" data-action="edit" (click)="navigateToDocumentFile(element)"></span>
</td>
</ng-container>


<ng-container matColumnDef="edit">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">
<span class="btn btn-primary bi bi-pencil p-2-4"
data-type="user-tool" data-action="edit" (click)="openModalEditDocument(element)"></span>
</td>
</ng-container>
<ng-container matColumnDef="edit">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">
<span class="btn btn-primary bi bi-pencil p-2-4"
data-type="user-tool" data-action="edit" (click)="openModalEditDocument(element)"></span>
</td>
</ng-container>


<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
</app-paging> </app-paging>
</div> </div>



+ 9
- 19
matsen-tool/src/app/_views/home/home.component.html Voir le fichier

@@ -9,73 +9,63 @@
<div class="spt-home-cards"> <div class="spt-home-cards">
<div class="container"> <div class="container">
<div class="row pt-4 pb-4 d-flex"> <div class="row pt-4 pb-4 d-flex">
<div class="col d-flex">
<div class="col-12 col-md-6 col-lg-4 mb-4 d-flex">
<a class="card" routerLink="/customer" routerLinkActive="active"> <a class="card" routerLink="/customer" routerLinkActive="active">
<div class="card-body position-relative" data-cat="customer"> <div class="card-body position-relative" data-cat="customer">
<h3 class="position-absolute m-0">{{ 'basic.customer' | translate }}</h3> <h3 class="position-absolute m-0">{{ 'basic.customer' | translate }}</h3>
</div> </div>
</a> </a>
</div> </div>
<div class="col d-flex">
<div class="col-12 col-md-6 col-lg-4 mb-4 d-flex">
<a class="card" routerLink="/supplier" routerLinkActive="active"> <a class="card" routerLink="/supplier" routerLinkActive="active">
<div class="card-body position-relative" data-cat="supplier"> <div class="card-body position-relative" data-cat="supplier">
<h3 class="position-absolute m-0">{{ 'basic.supplier' | translate }}</h3> <h3 class="position-absolute m-0">{{ 'basic.supplier' | translate }}</h3>
</div> </div>
</a> </a>
</div> </div>
<div class="col d-flex">
<div class="col-12 col-md-6 col-lg-4 mb-4 d-flex">
<a class="card" routerLink="/service" routerLinkActive="active"> <a class="card" routerLink="/service" routerLinkActive="active">
<div class="card-body position-relative" data-cat="service"> <div class="card-body position-relative" data-cat="service">
<h3 class="position-absolute m-0">{{ 'basic.service' | translate }}</h3> <h3 class="position-absolute m-0">{{ 'basic.service' | translate }}</h3>
</div> </div>
</a> </a>
</div> </div>
</div>
</div>

<div class="container">
<div class="row pt-4 pb-4 d-flex">
<div class="col d-flex">
<div class="col-12 col-md-6 col-lg-4 mb-4 d-flex">
<a class="card" routerLink="/product" routerLinkActive="active"> <a class="card" routerLink="/product" routerLinkActive="active">
<div class="card-body position-relative" data-cat="product"> <div class="card-body position-relative" data-cat="product">
<h3 class="position-absolute m-0">{{ 'basic.products' | translate }}</h3> <h3 class="position-absolute m-0">{{ 'basic.products' | translate }}</h3>
</div> </div>
</a> </a>
</div> </div>
<div class="col d-flex">
<div class="col-12 col-md-6 col-lg-4 mb-4 d-flex">
<a class="card" routerLink="/task" routerLinkActive="active"> <a class="card" routerLink="/task" routerLinkActive="active">
<div class="card-body position-relative" data-cat="task"> <div class="card-body position-relative" data-cat="task">
<h3 class="position-absolute m-0">{{ 'basic.tasks' | translate }}</h3> <h3 class="position-absolute m-0">{{ 'basic.tasks' | translate }}</h3>
</div> </div>
</a> </a>
</div> </div>
<div class="col d-flex">
<div class="col-12 col-md-6 col-lg-4 mb-4 d-flex">
<a class="card" routerLink="/document" routerLinkActive="active"> <a class="card" routerLink="/document" routerLinkActive="active">
<div class="card-body position-relative" data-cat="document"> <div class="card-body position-relative" data-cat="document">
<h3 class="position-absolute m-0">{{ 'basic.documents' | translate }}</h3> <h3 class="position-absolute m-0">{{ 'basic.documents' | translate }}</h3>
</div> </div>
</a> </a>
</div> </div>
</div>
</div>

<div class="container">
<div class="row pt-4 pb-4 d-flex">
<div class="col d-flex">
<div class="col-12 col-md-6 col-lg-4 mb-4 d-flex">
<a class="card" routerLink="/sale" routerLinkActive="active"> <a class="card" routerLink="/sale" routerLinkActive="active">
<div class="card-body position-relative" data-cat="sale"> <div class="card-body position-relative" data-cat="sale">
<h3 class="position-absolute m-0">{{ 'basic.sales' | translate }}</h3> <h3 class="position-absolute m-0">{{ 'basic.sales' | translate }}</h3>
</div> </div>
</a> </a>
</div> </div>
<div class="col d-flex">
<div class="col-12 col-md-6 col-lg-4 mb-4 d-flex">
<a class="card" routerLink="/profile" routerLinkActive="active"> <a class="card" routerLink="/profile" routerLinkActive="active">
<div class="card-body position-relative" data-cat="profile"> <div class="card-body position-relative" data-cat="profile">
<h3 class="position-absolute m-0">{{ 'basic.profile' | translate }}</h3> <h3 class="position-absolute m-0">{{ 'basic.profile' | translate }}</h3>
</div> </div>
</a> </a>
</div> </div>
<div class="col d-flex">
<div class="col-12 col-md-6 col-lg-4 mb-4 d-flex">
<a class="card" routerLink="/user" routerLinkActive="active"> <a class="card" routerLink="/user" routerLinkActive="active">
<div class="card-body position-relative" data-cat="user"> <div class="card-body position-relative" data-cat="user">
<h3 class="position-absolute m-0">{{ 'basic.users' | translate }}</h3> <h3 class="position-absolute m-0">{{ 'basic.users' | translate }}</h3>


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

@@ -6,70 +6,72 @@
[getDataFunction]="getData" [getDataFunction]="getData"
[dataSource]="dataSource" [dataSource]="dataSource"
> >
<table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)" class="mat-elevation-z8">
<div class="table-responsive">
<table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)" class="mat-elevation-z8">


<ng-container matColumnDef="pos">
<th mat-header-cell *matHeaderCellDef>
{{ 'overview.number' | translate }}
</th>
<td mat-cell
*matCellDef="let element">{{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }}
</td>
</ng-container>
<ng-container matColumnDef="pos">
<th mat-header-cell *matHeaderCellDef>
{{ 'overview.number' | translate }}
</th>
<td mat-cell
*matCellDef="let element">{{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }}
</td>
</ng-container>


<ng-container matColumnDef="image">
<th mat-header-cell *matHeaderCellDef>
{{ 'overview.logo' | translate }}
</th>
<td mat-cell *matCellDef="let element">
<img src="{{ element.logoUrl }}" width="40"
height="40" />
</td>
</ng-container>
<ng-container matColumnDef="image">
<th mat-header-cell *matHeaderCellDef>
{{ 'overview.logo' | translate }}
</th>
<td mat-cell *matCellDef="let element">
<img src="{{ element.logoUrl }}" width="40"
height="40" />
</td>
</ng-container>


<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header
sortActionDescription="{{ 'overview.sort' | translate }}: {{ partnerColumnHeadline }}">
{{ partnerColumnHeadline }}
</th>
<td mat-cell *matCellDef="let element">
{{ element.name }}
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header
sortActionDescription="{{ 'overview.sort' | translate }}: {{ partnerColumnHeadline }}">
{{ partnerColumnHeadline }}
</th>
<td mat-cell *matCellDef="let element">
{{ element.name }}
</td>
</ng-container>


<ng-container matColumnDef="address">
<th mat-header-cell *matHeaderCellDef mat-sort-header="address"
sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.address' | translate }}">
{{ 'overview.address' | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.street }} {{ element.streetNo }}
<br/>{{ element.zip }} {{ element.city }}
<br/>{{ element.country }}
</td>
</ng-container>
<ng-container matColumnDef="address">
<th mat-header-cell *matHeaderCellDef mat-sort-header="address"
sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.address' | translate }}">
{{ 'overview.address' | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.street }} {{ element.streetNo }}
<br/>{{ element.zip }} {{ element.city }}
<br/>{{ element.country }}
</td>
</ng-container>


<ng-container matColumnDef="website">
<th mat-header-cell *matHeaderCellDef mat-sort-header
sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.website' | translate }}">
{{ 'overview.website' | translate }}
</th>
<td mat-cell *matCellDef="let element">
<a href="{{ element.website }}" target="_blank">{{ element.website }}</a>
</td>
</ng-container>
<ng-container matColumnDef="website">
<th mat-header-cell *matHeaderCellDef mat-sort-header
sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.website' | translate }}">
{{ 'overview.website' | translate }}
</th>
<td mat-cell *matCellDef="let element">
<a href="{{ element.website }}" target="_blank">{{ element.website }}</a>
</td>
</ng-container>


<ng-container matColumnDef="details">
<th mat-header-cell class="text-end" *matHeaderCellDef>
{{ 'overview.details' | translate }}
</th>
<td mat-cell class="text-end" *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="details">
<th mat-header-cell class="text-end" *matHeaderCellDef>
{{ 'overview.details' | translate }}
</th>
<td mat-cell class="text-end" *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>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
</app-paging> </app-paging>
</div> </div>

+ 4
- 4
matsen-tool/src/app/_views/partners/partners-detail/partners-detail.component.html Voir le fichier

@@ -1,16 +1,16 @@
<div class="spt-container"> <div class="spt-container">
<div *ngIf="partner" class="card"> <div *ngIf="partner" class="card">
<div class="card-body row"> <div class="card-body row">
<div class="spt-col col-8">
<div class="spt-col col-12 col-sm-6 col-lg-8">
<div class="row"> <div class="row">
<div class="col-6">
<div class="col-12 col-lg-6">
<h1>{{ partner.name }}</h1> <h1>{{ partner.name }}</h1>
<p>{{ partner.street }} {{ partner.streetNo }}<br/> <p>{{ partner.street }} {{ partner.streetNo }}<br/>
{{ partner.zip }} {{ partner.city }}<br/> {{ partner.zip }} {{ partner.city }}<br/>
{{ partner.country }}</p> {{ partner.country }}</p>
<p>Sprache: Deutsch</p> <p>Sprache: Deutsch</p>
</div> </div>
<div class="col-6">
<div class="col-12 col-lg-6">
<h2>10002</h2> <h2>10002</h2>
<dl> <dl>
<dt>Telefon:</dt> <dt>Telefon:</dt>
@@ -34,7 +34,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-4 has-image">
<div class="col-12 col-sm-6 col-lg-4 has-image">
<img *ngIf="partner.logoUrl !== null && partner.logoUrl !== undefined" src="{{partner.logoUrl}}" <img *ngIf="partner.logoUrl !== null && partner.logoUrl !== undefined" src="{{partner.logoUrl}}"
width="247" width="247"
height="94" alt="{{partner.name}}" title="{{partner.name}}" /> height="94" alt="{{partner.name}}" title="{{partner.name}}" />


+ 2
- 2
matsen-tool/src/app/_views/posts/post-list/post-list.component.html Voir le fichier

@@ -10,7 +10,7 @@
<div class="post pb-1" *ngFor="let post of posts"> <div class="post pb-1" *ngFor="let post of posts">
<div class="card p-3"> <div class="card p-3">
<div class="row"> <div class="row">
<div class="col-4">
<div class="col-12 col-md-4">
<span class="due-date">{{ post.createdAt | date:'dd.MM.YYYY':'GMT+0000' }}</span> <span class="due-date">{{ post.createdAt | date:'dd.MM.YYYY':'GMT+0000' }}</span>
<h3 class="m-0" *ngIf="post.partner"> <h3 class="m-0" *ngIf="post.partner">
<app-linked-label [partner]="post.partner"></app-linked-label> <app-linked-label [partner]="post.partner"></app-linked-label>
@@ -23,7 +23,7 @@
</h3> </h3>
<p>{{ post.owner?.fullName }}</p> <p>{{ post.owner?.fullName }}</p>
</div> </div>
<div class="spt-border col-8">
<div class="spt-border col-12 col-md-8">
<h2 class="m-0">{{ post.headline }}</h2> <h2 class="m-0">{{ post.headline }}</h2>
<p class="m-0" [innerHTML]="appHelperService.getSafeLongtext(post.message)"></p> <p class="m-0" [innerHTML]="appHelperService.getSafeLongtext(post.message)"></p>
<span *ngIf="post.owner?.id === currentUser?.id" class="position-absolute bi bi-pencil p-2" <span *ngIf="post.owner?.id === currentUser?.id" class="position-absolute bi bi-pencil p-2"


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

@@ -7,67 +7,69 @@
[getDataFunction]="getData" [getDataFunction]="getData"
[dataSource]="dataSource" [dataSource]="dataSource"
> >
<table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
class="mat-elevation-z8">
<div class="table-responsive">
<table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
class="mat-elevation-z8">


<ng-container matColumnDef="pos">
<th mat-header-cell *matHeaderCellDef>
{{ 'overview.number' | translate }}
</th>
<td mat-cell
*matCellDef="let element">{{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }}
</td>
</ng-container>
<ng-container matColumnDef="pos">
<th mat-header-cell *matHeaderCellDef>
{{ 'overview.number' | translate }}
</th>
<td mat-cell
*matCellDef="let element">{{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }}
</td>
</ng-container>


<ng-container matColumnDef="image">
<th mat-header-cell *matHeaderCellDef>
{{ 'overview.image' | translate }}
</th>
<td mat-cell *matCellDef="let element">
<img src="{{element.imageUrl}}" width="40" height="40"/>
</td>
</ng-container>
<ng-container matColumnDef="image">
<th mat-header-cell *matHeaderCellDef>
{{ 'overview.image' | translate }}
</th>
<td mat-cell *matCellDef="let element">
<img src="{{element.imageUrl}}" width="40" height="40"/>
</td>
</ng-container>


<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header
sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.productname' | translate }}">
{{ 'overview.productname' | translate }}
</th>
<td mat-cell *matCellDef="let element">
{{ element.name }}
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header
sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.productname' | translate }}">
{{ 'overview.productname' | translate }}
</th>
<td mat-cell *matCellDef="let element">
{{ element.name }}
</td>
</ng-container>


<ng-container matColumnDef="storage">
<th mat-header-cell *matHeaderCellDef mat-sort-header
sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.storage' | translate }}">
{{ 'overview.storage' | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.storage }}
</td>
</ng-container>
<ng-container matColumnDef="storage">
<th mat-header-cell *matHeaderCellDef mat-sort-header
sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.storage' | translate }}">
{{ 'overview.storage' | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.storage }}
</td>
</ng-container>


<ng-container matColumnDef="number">
<th mat-header-cell *matHeaderCellDef mat-sort-header
sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.number-long' | translate }}">
{{ 'overview.number-long' | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.number }}
</td>
</ng-container>
<ng-container matColumnDef="number">
<th mat-header-cell *matHeaderCellDef mat-sort-header
sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.number-long' | translate }}">
{{ 'overview.number-long' | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.number }}
</td>
</ng-container>


<ng-container matColumnDef="details">
<th mat-header-cell class="text-end" *matHeaderCellDef>
{{ 'overview.details' | translate }}
</th>
<td mat-cell class="text-end" *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="details">
<th mat-header-cell class="text-end" *matHeaderCellDef>
{{ 'overview.details' | translate }}
</th>
<td mat-cell class="text-end" *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>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
</app-paging> </app-paging>
</div> </div>

+ 2
- 2
matsen-tool/src/app/_views/products/products-detail/products-detail.component.html Voir le fichier

@@ -1,7 +1,7 @@
<div class="spt-container"> <div class="spt-container">
<div class="card"> <div class="card">
<div class="card-body row"> <div class="card-body row">
<div class="spt-col col-8">
<div class="spt-col col-12 col-sm-6 col-lg-8">
<h1>{{ product.name }}</h1> <h1>{{ product.name }}</h1>
<p>{{ product.description }}</p> <p>{{ product.description }}</p>
<dl> <dl>
@@ -17,7 +17,7 @@
<dd>234856372</dd> <dd>234856372</dd>
</dl> </dl>
</div> </div>
<div class="col-4 has-image">
<div class="col-12 col-sm-6 col-lg-4 has-image">
<img *ngIf="product.imageUrl !== null && product.imageUrl !== undefined" <img *ngIf="product.imageUrl !== null && product.imageUrl !== undefined"
src="{{product.imageUrl}}" width="247" height="94" src="{{product.imageUrl}}" width="247" height="94"
alt="{{product.name}}" title="{{product.name}}" /> alt="{{product.name}}" title="{{product.name}}" />


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

@@ -6,90 +6,92 @@
[getDataFunction]="getData" [getDataFunction]="getData"
[dataSource]="dataSource" [dataSource]="dataSource"
> >
<table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
class="mat-elevation-z8">
<div class="table-responsive">
<table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
class="mat-elevation-z8">


<ng-container matColumnDef="pos">
<th mat-header-cell *matHeaderCellDef>
{{ 'overview.number' | translate }}
</th>
<td mat-cell
*matCellDef="let element">{{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }}
</td>
</ng-container>
<ng-container matColumnDef="pos">
<th mat-header-cell *matHeaderCellDef>
{{ 'overview.number' | translate }}
</th>
<td mat-cell
*matCellDef="let element">{{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }}
</td>
</ng-container>


<ng-container matColumnDef="user">
<th mat-header-cell *matHeaderCellDef mat-sort-header
sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.sale-user' | translate }}">
{{ 'overview.sale-user' | translate }}
</th>
<td mat-cell *matCellDef="let element">
<a [routerLink]="['/user', appHelperService.extractId(element.owner.id)]">{{ element.owner.fullName }}</a>
</td>
</ng-container>
<ng-container matColumnDef="user">
<th mat-header-cell *matHeaderCellDef mat-sort-header
sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.sale-user' | translate }}">
{{ 'overview.sale-user' | translate }}
</th>
<td mat-cell *matCellDef="let element">
<a [routerLink]="['/user', appHelperService.extractId(element.owner.id)]">{{ element.owner.fullName }}</a>
</td>
</ng-container>


<ng-container matColumnDef="partner">
<th mat-header-cell *matHeaderCellDef mat-sort-header="address"
sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.sale-partner' | translate }}">
{{ 'overview.sale-partner' | translate }}
</th>
<td mat-cell *matCellDef="let element">
<a [routerLink]="['/customer', appHelperService.extractId(element.partner.id)]">{{ element.partner.name }}</a>
</td>
</ng-container>
<ng-container matColumnDef="partner">
<th mat-header-cell *matHeaderCellDef mat-sort-header="address"
sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.sale-partner' | translate }}">
{{ 'overview.sale-partner' | translate }}
</th>
<td mat-cell *matCellDef="let element">
<a [routerLink]="['/customer', appHelperService.extractId(element.partner.id)]">{{ element.partner.name }}</a>
</td>
</ng-container>


<ng-container matColumnDef="product">
<th mat-header-cell *matHeaderCellDef mat-sort-header
sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.productname' | translate }}">
{{ 'overview.productname' | translate }}
</th>
<td mat-cell *matCellDef="let element">
<a [routerLink]="['/product', appHelperService.extractId(element.product.id)]">{{ element.product.name }}</a>
</td>
</ng-container>
<ng-container matColumnDef="product">
<th mat-header-cell *matHeaderCellDef mat-sort-header
sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.productname' | translate }}">
{{ 'overview.productname' | translate }}
</th>
<td mat-cell *matCellDef="let element">
<a [routerLink]="['/product', appHelperService.extractId(element.product.id)]">{{ element.product.name }}</a>
</td>
</ng-container>


<ng-container matColumnDef="turnover">
<th mat-header-cell *matHeaderCellDef mat-sort-header
sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.turnover' | translate }}">
{{ 'overview.turnover' | translate }}
</th>
<td mat-cell *matCellDef="let element">
{{ element.turnover | currency: 'EUR' }}
</td>
</ng-container>
<ng-container matColumnDef="turnover">
<th mat-header-cell *matHeaderCellDef mat-sort-header
sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.turnover' | translate }}">
{{ 'overview.turnover' | translate }}
</th>
<td mat-cell *matCellDef="let element">
{{ element.turnover | currency: 'EUR' }}
</td>
</ng-container>


<ng-container matColumnDef="profit">
<th mat-header-cell *matHeaderCellDef mat-sort-header
sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.profit' | translate }}">
{{ 'overview.profit' | translate }}
</th>
<td mat-cell *matCellDef="let element">
{{ element.profit | currency: 'EUR' }}
</td>
</ng-container>
<ng-container matColumnDef="profit">
<th mat-header-cell *matHeaderCellDef mat-sort-header
sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.profit' | translate }}">
{{ 'overview.profit' | translate }}
</th>
<td mat-cell *matCellDef="let element">
{{ element.profit | currency: 'EUR' }}
</td>
</ng-container>


<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef mat-sort-header
sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.createdAt' | translate }}">
{{ 'overview.createdAt' | translate }}
</th>
<td mat-cell *matCellDef="let element">
{{ element.createdAt | date:'dd.MM.YYYY HH:mm' }}
</td>
</ng-container>
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef mat-sort-header
sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.createdAt' | translate }}">
{{ 'overview.createdAt' | translate }}
</th>
<td mat-cell *matCellDef="let element">
{{ element.createdAt | date:'dd.MM.YYYY HH:mm' }}
</td>
</ng-container>


<ng-container matColumnDef="details">
<th mat-header-cell class="text-end" *matHeaderCellDef>
{{ 'overview.details' | translate }}
</th>
<td mat-cell class="text-end" *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="details">
<th mat-header-cell class="text-end" *matHeaderCellDef>
{{ 'overview.details' | translate }}
</th>
<td mat-cell class="text-end" *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>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
</app-paging> </app-paging>
</div> </div>

+ 2
- 2
matsen-tool/src/app/_views/sales/sales-detail/sales-detail.component.html Voir le fichier

@@ -1,7 +1,7 @@
<div class="spt-container"> <div class="spt-container">
<div class="card"> <div class="card">
<div *ngIf="sale" class="card-body row pb-5"> <div *ngIf="sale" class="card-body row pb-5">
<div class="spt-col col-8">
<div class="spt-col col-12 col-sm-6 col-lg-8">
<h1>{{'overview.sale-user' | translate }}: {{ sale.owner?.fullName }}</h1> <h1>{{'overview.sale-user' | translate }}: {{ sale.owner?.fullName }}</h1>
<dl> <dl>
<dt *ngIf="sale.partner?.name">{{'overview.partner' | translate}}:</dt> <dt *ngIf="sale.partner?.name">{{'overview.partner' | translate}}:</dt>
@@ -16,7 +16,7 @@
<dd *ngIf="sale.comment" [innerHTML]="appHelperService.getSafeLongtext(sale.comment)"></dd> <dd *ngIf="sale.comment" [innerHTML]="appHelperService.getSafeLongtext(sale.comment)"></dd>
</dl> </dl>
</div> </div>
<div class="col-4"></div>
<div class="col-12 col-sm-6 col-lg-4">
<span *ngIf="sale.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool" data-action="edit" <span *ngIf="sale.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool" data-action="edit"
(click)="openModalEditSale()"></span> (click)="openModalEditSale()"></span>
</div> </div>


+ 9
- 9
matsen-tool/src/app/_views/tasks/task-list/task-list.component.html Voir le fichier

@@ -12,26 +12,26 @@
<div class="card p-3" *ngIf="taskCompactMode"> <div class="card p-3" *ngIf="taskCompactMode">
<div class="row pb-1"> <div class="row pb-1">
<div class="col-12"> <div class="col-12">
<div style="display: flex;justify-content: flex-start;align-items: center;">
<div class="info-box">
<span class="importance" [attr.data-importance]="task.prio"></span> <span class="importance" [attr.data-importance]="task.prio"></span>
<span class="due-date">{{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }}</span>
<h3 class="m-0 ps-3" *ngIf="task.partner">
<span class="due-date pe-3">{{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }}</span>
<h3 class="m-0 pe-3" *ngIf="task.partner">
<app-linked-label [partner]="task.partner"></app-linked-label> <app-linked-label [partner]="task.partner"></app-linked-label>
</h3> </h3>
<h3 class="m-0 ps-3" *ngIf="task.product">
<h3 class="m-0 pe-3" *ngIf="task.product">
<app-linked-label [product]="task.product"></app-linked-label> <app-linked-label [product]="task.product"></app-linked-label>
</h3> </h3>
<p class="m-0 ps-3" *ngIf="task.assignedTo">
<p class="m-0" *ngIf="task.assignedTo">
<app-linked-label [user]="task.assignedTo"></app-linked-label> <app-linked-label [user]="task.assignedTo"></app-linked-label>
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<div class="row spt-compact"> <div class="row spt-compact">
<div class="col-6">
<div class="col-12 col-md-4">
<h2 class="m-0">{{ task.headline }}</h2> <h2 class="m-0">{{ task.headline }}</h2>
</div> </div>
<div class="col-8">
<div class="col-12 col-md-8">
<p class="m-0 mb-3 mt-2" [innerHTML]="appHelperService.getSafeLongtext(task.description)"></p> <p class="m-0 mb-3 mt-2" [innerHTML]="appHelperService.getSafeLongtext(task.description)"></p>
<span *ngIf="task.createdBy === currentUser?.id" class="position-absolute bi bi-pencil p-2" <span *ngIf="task.createdBy === currentUser?.id" class="position-absolute bi bi-pencil p-2"
data-type="user-tool" data-action="edit" (click)="openModalEditTask(task)"></span> data-type="user-tool" data-action="edit" (click)="openModalEditTask(task)"></span>
@@ -51,7 +51,7 @@
</div> </div>
<div class="card p-3" *ngIf="!taskCompactMode"> <div class="card p-3" *ngIf="!taskCompactMode">
<div class="row"> <div class="row">
<div class="col-6">
<div class="col-12 col-sm-6 col-lg-4">
<span class="due-date">{{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }}</span> <span class="due-date">{{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }}</span>
<h3 class="m-0" *ngIf="task.partner"> <h3 class="m-0" *ngIf="task.partner">
<app-linked-label [partner]="task.partner"></app-linked-label> <app-linked-label [partner]="task.partner"></app-linked-label>
@@ -63,7 +63,7 @@
<app-linked-label [user]="task.assignedTo"></app-linked-label> <app-linked-label [user]="task.assignedTo"></app-linked-label>
</p> </p>
</div> </div>
<div class="spt-border col-8">
<div class="spt-border col-12 col-sm-6 col-lg-8">
<span class="importance" [attr.data-importance]="task.prio"></span> <span class="importance" [attr.data-importance]="task.prio"></span>
<h2 class="m-0">{{ task.headline }}</h2> <h2 class="m-0">{{ task.headline }}</h2>
<p class="m-0" [innerHTML]="appHelperService.getSafeLongtext(task.description)"></p> <p class="m-0" [innerHTML]="appHelperService.getSafeLongtext(task.description)"></p>


+ 2
- 2
matsen-tool/src/app/_views/user/user-detail/user-detail.component.html Voir le fichier

@@ -1,14 +1,14 @@
<div *ngIf="user" class="spt-container"> <div *ngIf="user" class="spt-container">
<div class="card contacts-detail"> <div class="card contacts-detail">
<div class="card-body row"> <div class="card-body row">
<div class="spt-col col-8">
<div class="spt-col col-12 col-sm-6 col-lg-8">
<h1>{{ user.firstName }} {{ user.lastName }}</h1> <h1>{{ user.firstName }} {{ user.lastName }}</h1>
<dl> <dl>
<dt>E-Mail Adresse:</dt> <dt>E-Mail Adresse:</dt>
<dd><a href="mailto:{{ user.email }}">{{ user.email }}</a></dd> <dd><a href="mailto:{{ user.email }}">{{ user.email }}</a></dd>
</dl> </dl>
</div> </div>
<div class="col-4 has-image">
<div class="col-12 col-sm-6 col-lg-4 has-image">
<img *ngIf="user.imageUrl !== null && user.imageUrl !== undefined" <img *ngIf="user.imageUrl !== null && user.imageUrl !== undefined"
src="{{user.imageUrl}}" width="247" height="94" src="{{user.imageUrl}}" width="247" height="94"
alt="{{user.firstName}} {{user.lastName}}" title="{{user.firstName}} {{user.lastName}}" /> alt="{{user.firstName}} {{user.lastName}}" title="{{user.firstName}} {{user.lastName}}" />


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

@@ -3,66 +3,68 @@
[getDataFunction]="getData" [getDataFunction]="getData"
[dataSource]="dataSource" [dataSource]="dataSource"
> >
<table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)" class="mat-elevation-z8">
<div class="table-responsive">
<table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)" class="mat-elevation-z8">


<ng-container matColumnDef="pos">
<th mat-header-cell *matHeaderCellDef>
{{ 'overview.number' | translate }}
</th>
<td mat-cell
*matCellDef="let element">{{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }}
</td>
</ng-container>
<ng-container matColumnDef="pos">
<th mat-header-cell *matHeaderCellDef>
{{ 'overview.number' | translate }}
</th>
<td mat-cell
*matCellDef="let element">{{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }}
</td>
</ng-container>


<ng-container matColumnDef="image">
<th mat-header-cell *matHeaderCellDef>
{{ 'overview.image' | translate }}
</th>
<td mat-cell *matCellDef="let element">
<img src="{{ element.imageUrl }}" width="40"
height="40" />
</td>
</ng-container>
<ng-container matColumnDef="image">
<th mat-header-cell *matHeaderCellDef>
{{ 'overview.image' | translate }}
</th>
<td mat-cell *matCellDef="let element">
<img src="{{ element.imageUrl }}" width="40"
height="40" />
</td>
</ng-container>


<ng-container matColumnDef="firstName">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
{{ 'overview.firstName' | translate }}
</th>
<td mat-cell *matCellDef="let element">
<span>{{ element.firstName }}</span>
</td>
</ng-container>
<ng-container matColumnDef="firstName">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
{{ 'overview.firstName' | translate }}
</th>
<td mat-cell *matCellDef="let element">
<span>{{ element.firstName }}</span>
</td>
</ng-container>


<ng-container matColumnDef="lastName">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
{{ 'overview.lastName' | translate }}
</th>
<td mat-cell *matCellDef="let element">
<span>{{ element.lastName }}</span>
</td>
</ng-container>
<ng-container matColumnDef="lastName">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
{{ 'overview.lastName' | translate }}
</th>
<td mat-cell *matCellDef="let element">
<span>{{ element.lastName }}</span>
</td>
</ng-container>


<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
{{ 'overview.email' | translate }}
</th>
<td mat-cell *matCellDef="let element">
<span><a href="mailto:{{ element.email }}">{{ element.email }}</a></span>
</td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
{{ 'overview.email' | translate }}
</th>
<td mat-cell *matCellDef="let element">
<span><a href="mailto:{{ element.email }}">{{ element.email }}</a></span>
</td>
</ng-container>


<ng-container matColumnDef="details">
<th mat-header-cell class="text-end" *matHeaderCellDef>
{{ 'overview.details' | translate }}
</th>
<td mat-cell class="text-end" *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="details">
<th mat-header-cell class="text-end" *matHeaderCellDef>
{{ 'overview.details' | translate }}
</th>
<td mat-cell class="text-end" *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>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
</app-paging> </app-paging>
</div> </div>

+ 12
- 199
matsen-tool/src/assets/scss/_basics.scss Voir le fichier

@@ -97,90 +97,6 @@ img {
} }
} }


.spt-sidebar {
//background: #2b3a44;
padding: 0;
.card {
background: transparent;
color: #fff;
border-bottom: 1px solid #fff;
width: 100%;
text-decoration: none;
.card-body {
min-height: 50px;
text-transform: uppercase;
text-align: right;

h3 {
right: 10px;
bottom: 10px;
}
}
&.active {
.card-body {
min-height: 100px;
position: relative;
&:before {
content: "";
position: absolute;
left: 20px;
top: 50%;
transform: translate(0,-50%);
width: 65px;
height: 100%;
filter: brightness(600%);
border-right: 1px solid #fff;
}
&[data-cat="customer"]:before {
background: transparent url("/assets/images/icons/customer.svg") no-repeat left center;
background-size: 45px auto;
}
&[data-cat="supplier"]:before {
background: transparent url("/assets/images/icons/supplier.svg") no-repeat left center;
background-size: 45px auto;
}
&[data-cat="service"]:before {
background: transparent url("/assets/images/icons/service.svg") no-repeat left center;
background-size: 45px auto;
}
&[data-cat="product"]:before {
background: transparent url("/assets/images/icons/product.svg") no-repeat left center;
background-size: 45px auto;
}
&[data-cat="task"]:before {
background: transparent url("/assets/images/icons/task.svg") no-repeat left center;
background-size: 45px auto;
}
&[data-cat="document"]:before {
background: transparent url("/assets/images/icons/document.svg") no-repeat left center;
background-size: 45px auto;
}
&[data-cat="sale"]:before {
background: transparent url("/assets/images/icons/sale.svg") no-repeat left center;
background-size: 45px auto;
}
&[data-cat="profile"]:before {
background: transparent url("/assets/images/icons/profile.svg") no-repeat left center;
background-size: 45px auto;
}
&[data-cat="user"]:before {
background: transparent url("/assets/images/icons/user.svg") no-repeat left center;
background-size: 45px auto;
}
h3 {
bottom: 50%;
transform: translate(0,50%);
}
}
}
}
.nav {
li {
margin: 0 !important;
}
}
}

.icon-mini { .icon-mini {
height: 15px; height: 15px;
display: inline; display: inline;
@@ -191,6 +107,9 @@ 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) {
//width: calc(100% - calc(var(--bs-gutter-x) * 0.5) - calc(var(--bs-gutter-x) * 0.5));
}
} }


.spt-container { .spt-container {
@@ -238,82 +157,6 @@ img {
} }
} }


.posts .post,
.tasks-box {
border-top: 1px solid #525f66;
padding-top: 3px;
background: #fff;
}
.posts .post,
.tasks {
.card {
background: #fafafa;
.spt-border {
border-left: 1px solid #c1c1c1;
}
}
[data-type="user-tool"]:not(.spt-comments [data-type="user-tool"]) {
right: 0;
top: 5px;
bottom: auto;
}
}

.spt-comments-box {
right: 0;
bottom: 0;
}
.spt-comments {
margin: 5px 0 0 200px;
}

.contacts {
.row:not(.card .row) {
border-top: 1px solid #2B3A44;
padding-bottom: 20px;
}
.card {
background: #f2f2f2;
border-top: 2px solid #c1c1c1;
margin-top: 20px;
}
.spt-contact-box {
position: relative;
.badge {
position: absolute;
right: 12px;
bottom: 0;
}
}
img {
object-fit: cover;
height: 120px;
width: 100%;
}
}

.importance {
display: block;
width: 50%;
max-width: 800px;
height: 5px;
position: absolute;
right: 0;
top: 0px;

&[data-importance="low"] {
background: #77bb33;
}

&[data-importance="medium"] {
background: #ffee55;
}

&[data-importance="high"] {
background: #bb1414;
}
}

.toggle-component { .toggle-component {
.spt-container { .spt-container {
background: #fafafa; background: #fafafa;
@@ -387,45 +230,15 @@ img {
} }
} }


.taskCompactModeBox {
position: relative;
padding-left: 20px;
cursor: pointer;
&:before {
content: "";
position: absolute;
left: 0;
top: 3px;
width: 14px;
height: 14px;
border: 1px solid rgb(33, 37, 41);
}
&.taskCompactMode {
&:after {
content: "";
position: absolute;
left: 3px;
top: 6px;
width: 8px;
height: 8px;
background: rgb(33, 37, 41);
}
}
}
.spt-compact {
position: relative;
padding-top: 4px;
&:before {
content: "";
position: absolute;
left: 12px;
top: 0;
height: 1px;
width: calc(100% - 12px);
background: #c1c1c1;
}
}

.dropdown-menu { .dropdown-menu {
border-radius: 0; border-radius: 0;
} }

.info-box {
display: flex;
justify-content: flex-start;
align-items: center;
@media only screen and (max-width: 767px) {
display: block;
}
}

+ 25
- 0
matsen-tool/src/assets/scss/_contacts.scss Voir le fichier

@@ -0,0 +1,25 @@
.contacts {
.row:not(.card .row) {
border-top: 1px solid #2B3A44;
padding-bottom: 20px;
}
.card {
background: #f2f2f2;
border-top: 2px solid #c1c1c1;
margin-top: 20px;
height: calc(100% - 20px);
}
.spt-contact-box {
position: relative;
.badge {
position: absolute;
right: 0;
bottom: 0;
}
}
img {
object-fit: cover;
height: 120px;
width: 100%;
}
}

+ 87
- 0
matsen-tool/src/assets/scss/_sidebar.scss Voir le fichier

@@ -0,0 +1,87 @@
.spt-sidebar {
position: relative;
padding: 0;
@media only screen and (max-width: 1199px) {
//margin-left: calc(-100vw / 12 * 2);
display: none;
}
.card {
background: transparent;
color: #fff;
border-bottom: 1px solid #fff;
width: 100%;
text-decoration: none;
.card-body {
min-height: 50px;
text-transform: uppercase;
text-align: right;

h3 {
right: 10px;
bottom: 10px;
}
}
&.active {
.card-body {
min-height: 100px;
position: relative;
&:before {
content: "";
position: absolute;
left: 20px;
top: 50%;
transform: translate(0,-50%);
width: 65px;
height: 100%;
filter: brightness(600%);
border-right: 1px solid #fff;
}
&[data-cat="customer"]:before {
background: transparent url("/assets/images/icons/customer.svg") no-repeat left center;
background-size: 45px auto;
}
&[data-cat="supplier"]:before {
background: transparent url("/assets/images/icons/supplier.svg") no-repeat left center;
background-size: 45px auto;
}
&[data-cat="service"]:before {
background: transparent url("/assets/images/icons/service.svg") no-repeat left center;
background-size: 45px auto;
}
&[data-cat="product"]:before {
background: transparent url("/assets/images/icons/product.svg") no-repeat left center;
background-size: 45px auto;
}
&[data-cat="task"]:before {
background: transparent url("/assets/images/icons/task.svg") no-repeat left center;
background-size: 45px auto;
}
&[data-cat="document"]:before {
background: transparent url("/assets/images/icons/document.svg") no-repeat left center;
background-size: 45px auto;
}
&[data-cat="sale"]:before {
background: transparent url("/assets/images/icons/sale.svg") no-repeat left center;
background-size: 45px auto;
}
&[data-cat="profile"]:before {
background: transparent url("/assets/images/icons/profile.svg") no-repeat left center;
background-size: 45px auto;
}
&[data-cat="user"]:before {
background: transparent url("/assets/images/icons/user.svg") no-repeat left center;
background-size: 45px auto;
}
h3 {
bottom: 50%;
transform: translate(0,50%);
}
}
}
}
.nav {
li {
margin: 0 !important;
}
}
}

+ 6
- 0
matsen-tool/src/assets/scss/_table.scss Voir le fichier

@@ -1,3 +1,9 @@
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
}

table { table {
width: 100%; width: 100%;
img { img {


+ 98
- 0
matsen-tool/src/assets/scss/_tasks-posts.scss Voir le fichier

@@ -0,0 +1,98 @@
.posts .post,
.tasks-box {
border-top: 1px solid #525f66;
padding-top: 3px;
background: #fff;
}
.posts .post,
.tasks {
.card {
background: #fafafa;
.spt-border {
border-left: 1px solid #c1c1c1;
}
}
[data-type="user-tool"]:not(.spt-comments [data-type="user-tool"]) {
right: 0;
top: 5px;
bottom: auto;
}
}

.spt-comments-box {
right: 0;
bottom: 0;
}
.spt-comments {
margin: 5px 0 0 200px;
}

.importance {
display: block;
width: 50%;
max-width: 800px;
height: 5px;
position: absolute;
right: 0;
top: 0px;

&[data-importance="low"] {
background: #77bb33;
}

&[data-importance="medium"] {
background: #ffee55;
}

&[data-importance="high"] {
background: #bb1414;
}
}

.taskCompactModeBox {
position: relative;
padding-left: 20px;
cursor: pointer;
&:before {
content: "";
position: absolute;
left: 0;
top: 3px;
width: 14px;
height: 14px;
border: 1px solid rgb(33, 37, 41);
}
&.taskCompactMode {
&:after {
content: "";
position: absolute;
left: 3px;
top: 6px;
width: 8px;
height: 8px;
background: rgb(33, 37, 41);
}
}
}
.spt-compact {
position: relative;
padding-top: 4px;
&:before {
content: "";
position: absolute;
left: 12px;
top: 0;
height: 1px;
width: calc(100% - 12px);
background: #c1c1c1;
}
//&:after {
// content: "";
// position: absolute;
// left: 0;
// top: 11px;
// bottom: 19px;
// width: 1px;
// background: #c1c1c1;
//}
}

+ 3
- 0
matsen-tool/src/styles.scss Voir le fichier

@@ -4,9 +4,12 @@
@import "assets/scss/mixins"; @import "assets/scss/mixins";
@import "assets/scss/basics"; @import "assets/scss/basics";
@import "assets/scss/modal"; @import "assets/scss/modal";
@import "assets/scss/sidebar";
@import "assets/scss/form"; @import "assets/scss/form";
@import "assets/scss/table"; @import "assets/scss/table";
@import "assets/scss/text"; @import "assets/scss/text";
@import "assets/scss/contacts";
@import "assets/scss/tasks-posts";
@import "assets/scss/sales"; @import "assets/scss/sales";
@import "assets/scss/button"; @import "assets/scss/button";
@import "assets/scss/accordion"; @import "assets/scss/accordion";

Écrire Aperçu
Chargement…
Annuler
Enregistrer