vista de productos rediseñada para adaptar a las variantes de productos

src/pages/product-details/product-details.html

@@ -25,55 +25,83 @@
         </div>
     </ion-card>
 
-    <ion-list>
-        <ion-list-header color="light">Información</ion-list-header>
-
-        <ion-item>
-            <ion-label stacked>Nombre del producto</ion-label>
-            <ion-input type="text" [(ngModel)]="product.name" required></ion-input>
-        </ion-item>
-
-        <ion-item>
-            <ion-label stacked>Tipo de producto</ion-label>
-            <ion-select [(ngModel)]="product.type">
-                <ion-option value="product">Almacenable</ion-option>
-                <ion-option value="consu">Consumible</ion-option>
-                <ion-option value="service">Servicio</ion-option>
-            </ion-select>
-        </ion-item>
-
-        <ion-item>
-            <ion-label stacked>Precio de venta</ion-label>
-            <ion-input type="number" [(ngModel)]="product.list_price"></ion-input>
-        </ion-item>
-
-        <ion-item>
-            <ion-label stacked>Código EAN13</ion-label>
-            <ion-input type="text" [(ngModel)]="product.ean13"></ion-input>
-        </ion-item>
-
-        <ion-item>
-            <ion-label stacked>Referencia Interna</ion-label>
-            <ion-input type="text" [(ngModel)]="product.default_code"></ion-input>
-        </ion-item>
-
-        <ion-list-header color="light">Abastecimientos e inventario</ion-list-header>
-
-        <ion-item>
-            <ion-label stacked>Precio de costo</ion-label>
-            <ion-input type="number" [(ngModel)]="product.standard_price"></ion-input>
-        </ion-item>
-
-        <ion-item>
-            <ion-label stacked>Cantidad a mano</ion-label>
-            <ion-input type="number" [(ngModel)]="product.qty_available"></ion-input>
-        </ion-item>
-
-        <ion-item>
-            <ion-label stacked>Publicado</ion-label>
-            <ion-toggle [(ngModel)]="product.website_published"></ion-toggle>
-        </ion-item>
-
-    </ion-list>
-
+    <ion-segment [(ngModel)]="view">
+        <ion-segment-button value="information">Información</ion-segment-button>
+        <ion-segment-button value="supplying">Abastecimiento</ion-segment-button>
+        <ion-segment-button value="variants">Variantes</ion-segment-button>
+    </ion-segment>
+
+    <div [ngSwitch]="view">
+         <ion-list *ngSwitchCase="'information'">
+            <ion-item>
+                <ion-label stacked>Nombre del producto</ion-label>
+                <ion-input type="text" [(ngModel)]="product.name" required></ion-input>
+            </ion-item>
+
+            <ion-item>
+                <ion-label stacked>Tipo de producto</ion-label>
+                <ion-select [(ngModel)]="product.type">
+                    <ion-option value="product">Almacenable</ion-option>
+                    <ion-option value="consu">Consumible</ion-option>
+                    <ion-option value="service">Servicio</ion-option>
+                </ion-select>
+            </ion-item>
+
+            <ion-item>
+                <ion-label stacked>Precio de venta</ion-label>
+                <ion-input type="number" [(ngModel)]="product.list_price"></ion-input>
+            </ion-item>
+
+            <ion-item>
+                <ion-label stacked>Código EAN13</ion-label>
+                <ion-input type="text" [(ngModel)]="product.ean13"></ion-input>
+            </ion-item>
+
+            <ion-item>
+                <ion-label stacked>Referencia Interna</ion-label>
+                <ion-input type="text" [(ngModel)]="product.default_code"></ion-input>
+            </ion-item>
+         </ion-list>
+
+         <ion-list *ngSwitchCase="'supplying'">
+              <ion-item>
+                <ion-label stacked>Precio de costo</ion-label>
+                <ion-input type="number" [(ngModel)]="product.standard_price"></ion-input>
+            </ion-item>
+
+            <ion-item>
+                <ion-label stacked>Cantidad a mano</ion-label>
+                <ion-input type="number" [(ngModel)]="product.qty_available"></ion-input>
+            </ion-item>
+
+            <ion-item>
+                <ion-label stacked>Publicado</ion-label>
+                <ion-toggle [(ngModel)]="product.website_published"></ion-toggle>
+            </ion-item>
+         </ion-list>
+
+        <div *ngSwitchCase="'variants'">
+            <ion-card *ngFor="let attr of product.attribute_line_ids">
+                <ion-item>
+                    <ion-label stacked>Attributo</ion-label>
+                    <ion-select [(ngModel)]="attr.attribute">
+                        <ion-option *ngFor="let a of attributes" [value]="a.id">{{ a.name }}</ion-option>
+                    </ion-select>
+                </ion-item>
+
+                <ion-item>
+                    <ion-label stacked>Valor del atributo</ion-label>
+                    <ion-select [(ngModel)]="attr.value" multiple="true">
+                        <ion-option *ngFor="let v of values" [value]="v.id">{{ v.name }}</ion-option>
+                    </ion-select>
+                </ion-item>
+            </ion-card>
+
+            <ion-fab right bottom>
+                <button ion-fab primary (click)="addAttribute()">
+                    <ion-icon name="add"></ion-icon>
+                </button>
+            </ion-fab>
+        </div>
+    </div>
 </ion-content>

src/pages/product-details/product-details.ts

@@ -30,9 +30,59 @@ export class ProductDetailsPage {
         type: "product",
         website_published: false,
         remote_id: 0,
-        doc_state: "created"
+        doc_state: "created",
+        attribute_line_ids: []
     }
 
+     attributes = [
+        {
+            id: 1,
+            name: "Talle",
+        },
+        {
+            id: 2,
+            name: "Color",
+        },
+        {
+            id: 3,
+            name: "Género",
+        },
+        {
+            id: 4,
+            name: "Marca",
+        }
+    ];
+
+     values = [
+         {
+             id: 1,
+             name: "36",
+             attr_id: 1
+         },
+         {
+             id: 2,
+             name: "40",
+             attr_id: 1
+         },
+         {
+             id: 3,
+             name: "Azul Prelavado",
+             attr_id: 2
+         },
+         {
+             id: 4,
+             name: "Femenino",
+             attr_id: 3
+         },
+         {
+             id: 5,
+             name: "RI19",
+             attr_id: 4
+         }
+     ];
+
+
+    view: string = "information";
     watcher: any;
 
     constructor(
@@ -133,6 +183,23 @@ export class ProductDetailsPage {
         });
     }
 
+    /**
+     *
+     */
+    addAttribute(): void {
+        if (!this.product.attribute_line_ids) {
+            this.product.attribute_line_ids = [];
+        }
+        
+        this.product.attribute_line_ids.push({
+            attribute: 1,
+            value: 1
+        });
+
+        console.log(this.product.attribute_line_ids);
+        
+    } 
+
     /**
      *
      */

src/pages/product-list/product-list.ts

@@ -66,6 +66,10 @@ export class ProductListPage extends DefaultListable<Product> implements INaviga
         });
 
         this.popover.onDidDismiss(data => {
+            if (!data) {
+                return;
+            }
+
             switch (data.role) {
                 case "open":
                     this.openItem(item);