mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-26 10:03:12 +00:00
278 lines
13 KiB
HTML
278 lines
13 KiB
HTML
<div id="product" class="page-layout carded fullwidth inner-scroll">
|
|
|
|
<!-- TOP BACKGROUND -->
|
|
<div class="top-bg accent"></div>
|
|
<!-- / TOP BACKGROUND -->
|
|
|
|
<!-- CENTER -->
|
|
<div class="center">
|
|
|
|
<!-- HEADER -->
|
|
<div class="header accent" fxLayout="row" fxLayoutAlign="space-between center">
|
|
|
|
<!-- APP TITLE -->
|
|
<div fxLayout="row" fxLayoutAlign="start center">
|
|
|
|
<button mat-icon-button class="mr-0 mr-sm-16" [routerLink]="'/apps/e-commerce/products'">
|
|
<mat-icon>arrow_back</mat-icon>
|
|
</button>
|
|
|
|
<div class="product-image mr-8 mr-sm-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
|
|
<img *ngIf="product.images[0]" [src]="product.images[0].url">
|
|
<img *ngIf="!product.images[0]" [src]="'assets/images/ecommerce/product-image-placeholder.png'">
|
|
</div>
|
|
|
|
<div fxLayout="column" fxLayoutAlign="start start"
|
|
[@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">
|
|
<div class="h2" *ngIf="pageType ==='edit'">
|
|
{{product.name}}
|
|
</div>
|
|
<div class="h2" *ngIf="pageType ==='new'">
|
|
New Product
|
|
</div>
|
|
<div class="subtitle secondary-text">
|
|
<span>Product Detail</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- / APP TITLE -->
|
|
|
|
<button mat-raised-button
|
|
class="save-product-button"
|
|
[disabled]="productForm.invalid"
|
|
*ngIf="pageType ==='new'" (click)="addProduct()">
|
|
<span>ADD</span>
|
|
</button>
|
|
|
|
<button mat-raised-button
|
|
class="save-product-button"
|
|
[disabled]="productForm.invalid || productForm.pristine"
|
|
*ngIf="pageType ==='edit'" (click)="saveProduct()">
|
|
<span>SAVE</span>
|
|
</button>
|
|
</div>
|
|
<!-- / HEADER -->
|
|
|
|
<!-- CONTENT CARD -->
|
|
<div class="content-card">
|
|
|
|
<!-- CONTENT -->
|
|
<div class="content">
|
|
|
|
<form name="productForm" [formGroup]="productForm" class="product w-100-p" fxLayout="column" fxFlex>
|
|
|
|
<mat-tab-group>
|
|
|
|
<mat-tab label="Basic Info">
|
|
|
|
<div class="tab-content p-24" fusePerfectScrollbar>
|
|
|
|
<mat-form-field appearance="outline" class="w-100-p">
|
|
<mat-label>Product Name</mat-label>
|
|
<input matInput
|
|
name="name"
|
|
formControlName="name"
|
|
required>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="w-100-p">
|
|
<mat-label>Product Description</mat-label>
|
|
<textarea matInput
|
|
name="description"
|
|
formControlName="description"
|
|
rows="5">
|
|
</textarea>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="w-100-p">
|
|
|
|
<mat-label>Categories</mat-label>
|
|
|
|
<mat-chip-list #categoryList name="categories" formControlName="categories">
|
|
|
|
<mat-chip *ngFor="let category of product.categories"
|
|
[removable]="true" (removed)="product.removeCategory(category)">
|
|
{{category}}
|
|
<mat-icon matChipRemove>cancel</mat-icon>
|
|
</mat-chip>
|
|
|
|
<input [matChipInputFor]="categoryList"
|
|
[matChipInputAddOnBlur]="true"
|
|
(matChipInputTokenEnd)="product.addCategory($event)"/>
|
|
|
|
</mat-chip-list>
|
|
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="w-100-p">
|
|
|
|
<mat-label>Tags</mat-label>
|
|
|
|
<mat-chip-list #tagList name="tags" formControlName="tags">
|
|
|
|
<mat-chip *ngFor="let tag of product.tags"
|
|
[removable]="true" (removed)="product.removeTag(tag)">
|
|
{{tag}}
|
|
<mat-icon matChipRemove>cancel</mat-icon>
|
|
</mat-chip>
|
|
|
|
<input [matChipInputFor]="tagList"
|
|
[matChipInputAddOnBlur]="true"
|
|
(matChipInputTokenEnd)="product.addTag($event)"/>
|
|
|
|
</mat-chip-list>
|
|
|
|
</mat-form-field>
|
|
|
|
</div>
|
|
|
|
</mat-tab>
|
|
|
|
<mat-tab label="Product Images">
|
|
<div class="tab-content p-24" fusePerfectScrollbar>
|
|
<div fxLayout="row wrap" fxLayoutAlign="start start">
|
|
|
|
<div *ngIf="product.images.length === 0"
|
|
class="product-image" fxlayout="row" fxLayoutAlign="center center">
|
|
<img class="media"
|
|
[src]="'assets/images/ecommerce/product-image-placeholder.png'">
|
|
</div>
|
|
|
|
<div *ngFor="let image of product.images">
|
|
<div *ngIf="product.images.length > 0"
|
|
class="product-image" fxlayout="row" fxLayoutAlign="center center">
|
|
<img class="media" [src]="image.url">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</mat-tab>
|
|
|
|
<mat-tab label="Pricing">
|
|
<div class="tab-content p-24" fusePerfectScrollbar>
|
|
|
|
<mat-form-field appearance="outline" class="w-100-p">
|
|
<mat-label>Tax Excluded Price</mat-label>
|
|
<input matInput
|
|
name="priceTaxExcl"
|
|
formControlName="priceTaxExcl"
|
|
type="number">
|
|
<span matPrefix>$ </span>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="w-100-p">
|
|
<mat-label>Tax Included Price</mat-label>
|
|
<input matInput
|
|
name="priceTaxIncl"
|
|
formControlName="priceTaxIncl"
|
|
type="number">
|
|
<span matPrefix>$ </span>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="w-100-p">
|
|
<mat-label>Tax Rate</mat-label>
|
|
<input matInput
|
|
name="taxRate"
|
|
formControlName="taxRate"
|
|
type="number">
|
|
<span matPrefix>%</span>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="w-100-p">
|
|
<mat-label>Compared Price</mat-label>
|
|
<input matInput
|
|
name="comparedPrice"
|
|
formControlName="comparedPrice"
|
|
type="number">
|
|
<span matPrefix>$ </span>
|
|
<mat-hint align="start">Add a compare price to show next to the real price
|
|
</mat-hint>
|
|
</mat-form-field>
|
|
|
|
</div>
|
|
</mat-tab>
|
|
|
|
<mat-tab label="Inventory">
|
|
<div class="tab-content p-24" fusePerfectScrollbar>
|
|
|
|
<mat-form-field appearance="outline" class="w-100-p">
|
|
<mat-label>SKU</mat-label>
|
|
<input matInput
|
|
name="sku"
|
|
formControlName="sku">
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="w-100-p">
|
|
<mat-label>Quantity</mat-label>
|
|
<input matInput
|
|
name="quantity"
|
|
formControlName="quantity"
|
|
type="number">
|
|
</mat-form-field>
|
|
</div>
|
|
</mat-tab>
|
|
|
|
<mat-tab label="Shipping">
|
|
|
|
<div class="tab-content p-24" fusePerfectScrollbar fxLayout="column">
|
|
|
|
<div fxLayout="row" fxLayoutAlign="space-between">
|
|
|
|
<mat-form-field appearance="outline" fxFlex="30">
|
|
<mat-label>Width</mat-label>
|
|
<input matInput
|
|
name="Width"
|
|
formControlName="width">
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" fxFlex="30">
|
|
<mat-label>Height</mat-label>
|
|
<input matInput
|
|
name="Height"
|
|
formControlName="height">
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" fxFlex="30">
|
|
<mat-label>Depth</mat-label>
|
|
<input matInput
|
|
name="Depth"
|
|
formControlName="depth">
|
|
</mat-form-field>
|
|
|
|
</div>
|
|
|
|
<mat-form-field appearance="outline" class="w-100-p">
|
|
<mat-label>Weight</mat-label>
|
|
<input matInput
|
|
name="Weight"
|
|
formControlName="weight">
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="w-100-p">
|
|
<mat-label>Extra Shipping Fee</mat-label>
|
|
<input matInput
|
|
name="extraShippingFee"
|
|
formControlName="extraShippingFee"
|
|
type="number">
|
|
<span matPrefix>$ </span>
|
|
</mat-form-field>
|
|
|
|
</div>
|
|
|
|
</mat-tab>
|
|
|
|
</mat-tab-group>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
<!-- / CONTENT -->
|
|
|
|
</div>
|
|
<!-- / CONTENT CARD -->
|
|
|
|
</div>
|
|
<!-- / CENTER -->
|
|
|
|
</div>
|