sales - tabs

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

@@ -1,5 +1,5 @@
 <div class="sales-summary-container mb-4" *ngFor="let saleSummary of saleSummaries">
-    <p><strong>{{ saleSummary.owner?.fullName }}</strong></p>
+    <p><strong><a [routerLink]="['/user', appHelperService.extractId(saleSummary.owner?.id)]">{{ saleSummary.owner?.fullName }}</a></strong></p>
     <div class="sales-summary-bar">
         <div>
                 <span class="sales-summary-turnover"

matsen-tool/src/app/_views/sales/sale-summary/sale-summary.component.ts

@@ -1,7 +1,8 @@
 import {AfterViewInit, Component, Input, OnInit} from '@angular/core';
 import {Subscription} from "rxjs";
-import {SaleSummaryJsonld, SaleSummaryService, UserJsonld} from "@app/core/api/v1";
+import {SaleJsonld, SaleSummaryJsonld, SaleSummaryService, UserJsonld} from "@app/core/api/v1";
 import {AppHelperService} from "@app/_helpers/app-helper.service";
+import {Router} from "@angular/router";
 
 @Component({
   selector: 'app-sale-summary',
@@ -20,6 +21,7 @@ export class SaleSummaryComponent implements OnInit, AfterViewInit  {
 
     constructor(
         private saleSummaryService: SaleSummaryService,
+        private router: Router,
         protected appHelperService: AppHelperService,
     ) {
         this.salesSummarySub = new Subscription();

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

@@ -2,8 +2,14 @@
     <div class="d-flex justify-content-between align-items-start">
         <h2>{{ 'basic.sales' | translate }}</h2>
     </div>
-    <div class="pb-5">
-        <app-sale-summary></app-sale-summary>
-    </div>
-    <app-sale-list></app-sale-list>
-</div>
+    <mat-tab-group>
+        <mat-tab label="Liste aller Verkäufe">
+            <app-sale-list></app-sale-list>
+        </mat-tab>
+        <mat-tab label="Umsatz & Gewinn">
+            <div class="pb-5">
+                <app-sale-summary></app-sale-summary>
+            </div>
+        </mat-tab>
+    </mat-tab-group>
+</div>

matsen-tool/src/app/app.module.ts

@@ -28,44 +28,45 @@ import {PropertyInterceptor} from "@app/_helpers/property.interceptor";
 import {MatPaginatorModule} from "@angular/material/paginator";
 import {MatSortModule} from "@angular/material/sort";
 import {MatTableModule} from "@angular/material/table";
-import { PostsComponent } from './_views/posts/posts.component';
-import { NewPostComponent } from './_views/posts/new-post/new-post.component';
-import { TasksComponent } from './_views/tasks/tasks.component';
-import { NewTaskComponent } from './_views/tasks/new-task/new-task.component';
-import { NewPartnerComponent } from './_views/partners/new-partner/new-partner.component';
-import { NewDocumentComponent } from './_views/documents/new-document/new-document.component';
-import { NewProductComponent } from './_views/products/new-product/new-product.component';
-import { NewCommentComponent } from './_views/posts/new-comment/new-comment.component';
+import {PostsComponent} from './_views/posts/posts.component';
+import {NewPostComponent} from './_views/posts/new-post/new-post.component';
+import {TasksComponent} from './_views/tasks/tasks.component';
+import {NewTaskComponent} from './_views/tasks/new-task/new-task.component';
+import {NewPartnerComponent} from './_views/partners/new-partner/new-partner.component';
+import {NewDocumentComponent} from './_views/documents/new-document/new-document.component';
+import {NewProductComponent} from './_views/products/new-product/new-product.component';
+import {NewCommentComponent} from './_views/posts/new-comment/new-comment.component';
 import {MatOptionModule} from "@angular/material/core";
 import {MatAutocompleteModule} from "@angular/material/autocomplete";
 import {MatFormFieldModule} from "@angular/material/form-field";
 import {MatInputModule} from "@angular/material/input";
-import { NewTaskNoteComponent } from './_views/tasks/new-task-note/new-task-note.component';
-import { DocumentsDetailComponent } from './_views/documents/documents-detail/documents-detail.component';
-import { SalesComponent } from './_views/sales/sales.component';
-import { SalesDetailComponent } from './_views/sales/sales-detail/sales-detail.component';
-import { NewSaleComponent } from './_views/sales/new-sale/new-sale.component';
-import { ToggleComponent } from './_components/toggle/toggle.component';
-import { ProfileComponent } from './_views/profile/profile.component';
-import { PostListComponent } from './_views/posts/post-list/post-list.component';
+import {NewTaskNoteComponent} from './_views/tasks/new-task-note/new-task-note.component';
+import {DocumentsDetailComponent} from './_views/documents/documents-detail/documents-detail.component';
+import {SalesComponent} from './_views/sales/sales.component';
+import {SalesDetailComponent} from './_views/sales/sales-detail/sales-detail.component';
+import {NewSaleComponent} from './_views/sales/new-sale/new-sale.component';
+import {ToggleComponent} from './_components/toggle/toggle.component';
+import {ProfileComponent} from './_views/profile/profile.component';
+import {PostListComponent} from './_views/posts/post-list/post-list.component';
 import {ContactListComponent} from "@app/_views/contacts/contact-list/contact-list.component";
 import {ApiModule, Configuration, ConfigurationParameters} from "@app/core/api/v1";
-import { TaskListComponent } from './_views/tasks/task-list/task-list.component';
-import { SearchInputComponent } from './_components/search-input/search-input.component';
-import { PagingComponent } from '@app/_components/paging/paging.component';
-import { PartnerListComponent } from './_views/partners/partner-list/partner-list.component';
-import { ProductListComponent } from './_views/products/product-list/product-list.component';
-import { DocumentListComponent } from './_views/documents/document-list/document-list.component';
-import { SaleListComponent } from './_views/sales/sale-list/sale-list.component';
-import { SaleSummaryComponent } from './_views/sales/sale-summary/sale-summary.component';
-import { UsersComponent } from './_views/user/users.component';
-import { UserDetailComponent } from './_views/user/user-detail/user-detail.component';
-import { UserListComponent } from './_views/user/user-list/user-list.component';
-import { AssignProductComponent } from './_views/products/assign-product/assign-product.component';
-import { LinkedLabelComponent } from './_components/linked-label/linked-label.component';
+import {TaskListComponent} from './_views/tasks/task-list/task-list.component';
+import {SearchInputComponent} from './_components/search-input/search-input.component';
+import {PagingComponent} from '@app/_components/paging/paging.component';
+import {PartnerListComponent} from './_views/partners/partner-list/partner-list.component';
+import {ProductListComponent} from './_views/products/product-list/product-list.component';
+import {DocumentListComponent} from './_views/documents/document-list/document-list.component';
+import {SaleListComponent} from './_views/sales/sale-list/sale-list.component';
+import {SaleSummaryComponent} from './_views/sales/sale-summary/sale-summary.component';
+import {UsersComponent} from './_views/user/users.component';
+import {UserDetailComponent} from './_views/user/user-detail/user-detail.component';
+import {UserListComponent} from './_views/user/user-list/user-list.component';
+import {AssignProductComponent} from './_views/products/assign-product/assign-product.component';
+import {LinkedLabelComponent} from './_components/linked-label/linked-label.component';
 import {LoadingInterceptor} from "@app/_helpers/loading-interceptor.service";
-import { SearchSelectComponent } from './_components/search-select/search-select.component';
-import { ListComponent } from './_components/list/list.component';
+import {SearchSelectComponent} from './_components/search-select/search-select.component';
+import {ListComponent} from './_components/list/list.component';
+import {MatTabsModule} from "@angular/material/tabs";
 
 
 export function apiConfigFactory(): Configuration {
@@ -107,6 +108,7 @@ export function HttpLoaderFactory(http: HttpClient) {
         MatAutocompleteModule,
         MatFormFieldModule,
         MatInputModule,
+        MatTabsModule
     ],
     declarations: [
         AppComponent,

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

@@ -32,4 +32,29 @@
   to {
     width: 100%;
   }
+}
+
+.mat-mdc-tab-list .mat-ripple {
+  background: #f6f6f6;
+}
+.mat-mdc-tab-list .mdc-tab-indicator--active .mat-ripple {
+  background: #f2f2f2;
+}
+.mat-ripple:not(:empty) {
+  background: #f6f6f6;
+}
+.mat-mdc-tab .mdc-tab__text-label,
+.mat-mdc-tab:hover .mdc-tab__text-label {
+  color: #000 !important;
+}
+.mat-mdc-tab .mdc-tab-indicator__content--underline,
+.mat-mdc-tab.mdc-tab--active:hover .mdc-tab-indicator__content--underline {
+  border-color: $color-matsen !important;
+}
+.mat-mdc-tab.mdc-tab--active .mdc-tab__text-label,
+.mat-mdc-tab.mdc-tab--active:hover .mdc-tab__text-label {
+  color: $color-matsen !important;
+}
+.mat-mdc-tab-body {
+  padding-top: 30px;
 }