Skip to content

Commit

Permalink
feat(admin-ui): Implement integrated ProductVariant creation
Browse files Browse the repository at this point in the history
Relates to #124
  • Loading branch information
michaelbromley committed Jul 9, 2019
1 parent 5f6bef3 commit 58dad1d
Show file tree
Hide file tree
Showing 29 changed files with 558 additions and 673 deletions.
20 changes: 3 additions & 17 deletions admin-ui/src/app/catalog/catalog.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,16 @@ import { CollectionDetailComponent } from './components/collection-detail/collec
import { CollectionListComponent } from './components/collection-list/collection-list.component';
import { CollectionTreeNodeComponent } from './components/collection-tree/collection-tree-node.component';
import { CollectionTreeComponent } from './components/collection-tree/collection-tree.component';
import { CreateOptionGroupDialogComponent } from './components/create-option-group-dialog/create-option-group-dialog.component';
import { CreateOptionGroupFormComponent } from './components/create-option-group-form/create-option-group-form.component';
import { FacetDetailComponent } from './components/facet-detail/facet-detail.component';
import { FacetListComponent } from './components/facet-list/facet-list.component';
import { GenerateProductVariantsComponent } from './components/generate-product-variants/generate-product-variants.component';
import { OptionValueInputComponent } from './components/option-value-input/option-value-input.component';
import { ProductAssetsComponent } from './components/product-assets/product-assets.component';
import { ProductDetailComponent } from './components/product-detail/product-detail.component';
import { ProductListComponent } from './components/product-list/product-list.component';
import { ProductSearchInputComponent } from './components/product-search-input/product-search-input.component';
import { ProductVariantsListComponent } from './components/product-variants-list/product-variants-list.component';
import { ProductVariantsTableComponent } from './components/product-variants-table/product-variants-table.component';
import { ProductVariantsWizardComponent } from './components/product-variants-wizard/product-variants-wizard.component';
import { SelectOptionGroupDialogComponent } from './components/select-option-group-dialog/select-option-group-dialog.component';
import { SelectOptionGroupComponent } from './components/select-option-group/select-option-group.component';
import { VariantPriceDetailComponent } from './components/variant-price-detail/variant-price-detail.component';
import { CollectionResolver } from './providers/routing/collection-resolver';
import { FacetResolver } from './providers/routing/facet-resolver';
Expand All @@ -41,11 +37,6 @@ import { ProductResolver } from './providers/routing/product-resolver';
declarations: [
ProductListComponent,
ProductDetailComponent,
CreateOptionGroupDialogComponent,
ProductVariantsWizardComponent,
SelectOptionGroupDialogComponent,
CreateOptionGroupFormComponent,
SelectOptionGroupComponent,
FacetListComponent,
FacetDetailComponent,
GenerateProductVariantsComponent,
Expand All @@ -65,14 +56,9 @@ import { ProductResolver } from './providers/routing/product-resolver';
ProductVariantsTableComponent,
AssetPreviewComponent,
ProductSearchInputComponent,
OptionValueInputComponent,
],
entryComponents: [
AssetPickerDialogComponent,
CreateOptionGroupDialogComponent,
SelectOptionGroupDialogComponent,
ApplyFacetDialogComponent,
AssetPreviewComponent,
],
entryComponents: [AssetPickerDialogComponent, ApplyFacetDialogComponent, AssetPreviewComponent],
providers: [ProductResolver, FacetResolver, CollectionResolver],
})
export class CatalogModule {}

This file was deleted.

Empty file.

This file was deleted.

This file was deleted.

Empty file.

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,17 +1,99 @@
<vdr-dropdown>
<button type="button" class="btn btn-primary" vdrDropdownTrigger>
<clr-icon shape="add"></clr-icon>
{{ 'catalog.generate-product-variants' | translate }}
<clr-icon shape="caret down"></clr-icon>
</button>
<vdr-dropdown-menu vdrPosition="bottom-right">
<button type="button" vdrDropdownItem (click)="generateProductVariants()">
{{ 'catalog.generate-variants-default-only' | translate }}
<div *ngFor="let group of optionGroups" class="option-groups">
<div class="name">
<label>{{ 'catalog.option' | translate }}</label>
<input
placeholder="e.g. Size"
clrInput
[(ngModel)]="group.name"
name="name"
required
(keydown.enter)="handleEnter($event, optionValueInputComponent)"
/>
</div>
<div class="values">
<label>{{ 'catalog.option-values' | translate }}</label>
<vdr-option-value-input
#optionValueInputComponent
[(ngModel)]="group.values"
(ngModelChange)="generateVariants()"
[groupName]="group.name"
[disabled]="group.name === ''"
></vdr-option-value-input>
</div>
<div class="remove-group">
<button
class="btn btn-icon btn-warning-outline"
[title]="'catalog.remove-option' | translate"
(click)="removeOption(group.name)"
>
<clr-icon shape="trash"></clr-icon>
</button>
<button type="button" vdrDropdownItem (click)="startProductVariantsWizard()">
{{ 'catalog.generate-variants-with-options' | translate }}
</button>
</vdr-dropdown-menu>
</vdr-dropdown>
</div>
</div>
<button class="btn btn-primary-outline btn-sm" (click)="addOption()">
<clr-icon shape="plus"></clr-icon>
{{ 'catalog.add-option' | translate }}
</button>

<vdr-product-variants-wizard #productVariantsWizard [product]="product"></vdr-product-variants-wizard>
<div class="variants-preview">
<table class="table">
<thead>
<tr>
<th *ngIf="1 < variants.length">{{ 'common.create' | translate }}</th>
<th *ngIf="1 < variants.length">{{ 'catalog.variant' | translate }}</th>
<th>{{ 'catalog.sku' | translate }}</th>
<th>{{ 'catalog.price' | translate }}</th>
<th>{{ 'catalog.stock-on-hand' | translate }}</th>
</tr>
</thead>
<tr
*ngFor="let variant of variants; trackBy: trackByFn"
[class.disabled]="!variantFormValues[variant.id].enabled"
>
<td *ngIf="1 < variants.length">
<input
type="checkbox"
(change)="onFormChange()"
[(ngModel)]="variantFormValues[variant.id].enabled"
clrCheckbox
/>
</td>
<td *ngIf="1 < variants.length">
{{ variant.values.join(' ') }}
</td>
<td>
<clr-input-container>
<input
clrInput
type="text"
(change)="onFormChange()"
[(ngModel)]="variantFormValues[variant.id].sku"
[placeholder]="'catalog.sku' | translate"
/>
</clr-input-container>
</td>
<td>
<clr-input-container>
<vdr-currency-input
clrInput
[(ngModel)]="variantFormValues[variant.id].price"
(ngModelChange)="onFormChange()"
[currencyCode]="currencyCode"
></vdr-currency-input>
</clr-input-container>
</td>
<td>
<clr-input-container>
<input
clrInput
type="number"
[(ngModel)]="variantFormValues[variant.id].stock"
(change)="onFormChange()"
min="0"
step="1"
/>
</clr-input-container>
</td>
</tr>
</table>
</div>
Original file line number Diff line number Diff line change
@@ -1,3 +1,32 @@
@import "variables";

:host {
display: block;
margin-bottom: 120px;
}

.option-groups {
display: flex;
}

::ng-deep ng-dropdown-panel {
display: none;
}

.values {
flex: 1;
margin: 0 6px;
}

.remove-group {
padding-top: 18px;
}

.variants-preview {
tr.disabled {
td {
background-color: $color-grey-100;
color: $color-grey-400;
}
}
}
Loading

0 comments on commit 58dad1d

Please sign in to comment.