more paging

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

@@ -15,7 +15,6 @@
                    showFirstLastButtons>
     </mat-paginator>
 </div>
-{{loading}}
 <ng-content></ng-content>
 <div *ngIf="dataLength <= 0" class="spt-no-entries">{{'form.no-data' | translate}}</div>
 <div class="spt-tools single">

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

@@ -68,6 +68,16 @@
                     </td>
                 </ng-container>
 
+                <ng-container matColumnDef="unassign">
+                    <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-delete"
+                                  data-type="user-tool" data-action="edit" (click)="unassignProduct(element)"></span>
+                    </td>
+                </ng-container>
+
                 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                 <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
             </table>

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

@@ -17,6 +17,7 @@ import {MatTableDataSource} from "@angular/material/table";
 import {OrderFilter} from "@app/_models/orderFilter";
 import {NewProductComponent} from "@app/_views/products/new-product/new-product.component";
 import {AssignProductComponent} from "@app/_views/products/assign-product/assign-product.component";
+import {TranslateService} from "@ngx-translate/core";
 
 @Component({
   selector: 'app-product-list',
@@ -41,13 +42,14 @@ export class ProductListComponent implements OnInit, AfterViewInit {
     constructor(
         private router: Router,
         private productService: ProductService,
+        private translateService: TranslateService,
         private userProductService: UserProductService,
         private partnerProductService: PartnerProductService,
         private contactPartnerProductService: ContactPartnerProductService,
         protected appHelperService: AppHelperService,
     ) {
         this.sort = new MatSort();
-        this.displayedColumns = ['details', 'pos', 'image', 'name', 'storage', 'number'];
+        this.displayedColumns = ['details', 'pos', 'image', 'name', 'storage', 'number', 'unassign'];
 
         this.productsSub = new Subscription();
         this.products = [];
@@ -214,4 +216,15 @@ export class ProductListComponent implements OnInit, AfterViewInit {
             throw new Error('data not found')
         }
     }
+
+    unassignProduct(element: any) {
+        let confirmMessage = "";
+        this.translateService.get('system.confirm-unassign').subscribe((translation: string) => {
+            confirmMessage = translation;
+        });
+        const userConfirmed = window.confirm(confirmMessage);
+        if (userConfirmed) {
+            console.log(element);
+        }
+    }
 }

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

@@ -5,7 +5,8 @@
     "confirm-delete-image": "Möchten Sie das Bild wirklich löschen?",
     "delete-file": "Datei löschen",
     "confirm-delete-file": "Möchten Sie die Datei wirklich löschen?",
-    "profit-larger-turnover": "Der Gewinn ist größer als der Umsatz!"
+    "profit-larger-turnover": "Der Gewinn ist größer als der Umsatz!",
+    "confirm-unassign": "Möchten Sie die Zuweisung wirklich aufheben?"
   },
   "basic":
   {

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

@@ -259,6 +259,7 @@ img {
   position: fixed;
   left: 50%;
   top: 50%;
+  z-index: 9999;
   background: #9eb3c1;
   width: 130px;
   height: 130px;