unassign product WIP

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

@@ -68,13 +68,13 @@
                     </td>
                 </ng-container>
 
-                <ng-container matColumnDef="unassign">
-                    <th mat-header-cell *matHeaderCellDef>
-                        {{ 'overview.details' | translate }}
+                <ng-container matColumnDef="unassign" *ngIf="partner || contact">
+                    <th mat-header-cell class="text-end" *matHeaderCellDef>
+                        {{ 'overview.unassign' | 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 mat-cell class="spt-button-td text-end" *matCellDef="let element">
+                            <span class="spt-icon-unassign"
+                                  (click)="unassignProduct(element)"></span>
                     </td>
                 </ng-container>
 

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

@@ -49,7 +49,7 @@ export class ProductListComponent implements OnInit, AfterViewInit {
         protected appHelperService: AppHelperService,
     ) {
         this.sort = new MatSort();
-        this.displayedColumns = ['details', 'pos', 'image', 'name', 'storage', 'number', 'unassign'];
+        this.displayedColumns = ['details', 'pos', 'image', 'name', 'storage', 'number'];
 
         this.productsSub = new Subscription();
         this.products = [];
@@ -58,6 +58,9 @@ export class ProductListComponent implements OnInit, AfterViewInit {
     }
 
     ngOnInit(){
+        if (this.partner || this.contact) {
+            this.displayedColumns.push('unassign');
+        }
         this.bShowNewProductButton =
             this.user === undefined && this.partner === undefined && this.contact === undefined;
     }
@@ -225,6 +228,13 @@ export class ProductListComponent implements OnInit, AfterViewInit {
         const userConfirmed = window.confirm(confirmMessage);
         if (userConfirmed) {
             console.log(element);
+            console.log(this.partner);
+            console.log(this.contact);
+            if (this.partner) {
+                //this.contactPartnerProductService.contactPartnerProductsIdDelete(element.id)
+            } else if (this.contact) {
+                //this.partnerProductService.partnerProductsIdDelete(element.id)
+            }
         }
     }
 }

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

@@ -88,7 +88,8 @@
     "createdAt": "erstellt am",
     "firstName": "Vorname",
     "lastName": "Vorname",
-    "email": "Email"
+    "email": "Email",
+    "unassign": "Zuweisung aufheben"
   },
   "form":
   {

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

@@ -100,3 +100,10 @@ body {
     border-color: #6d757c !important;
   }
 }
+
+.spt-icon-unassign {
+  display: inline-block;
+  width: 20px;
+  height: 30px;
+  @include delete-image();
+}

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

@@ -1,3 +1,25 @@
 @mixin transition {
   transition: all 0.3s ease-out;
+}
+
+@mixin delete-image {
+  position: relative;
+  cursor: pointer;
+  &: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);
+  }
 }

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

@@ -58,32 +58,14 @@ th.mat-sort-header-sorted {
 }
 
 .spt-clear {
+  @include delete-image();
   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 {