Skip to content

Commit

Permalink
feat(admin-ui): Add controls for stockOnHand & trackInventory
Browse files Browse the repository at this point in the history 
Relates to #81
  • Loading branch information
@michaelbromley
michaelbromley committed May 2, 2019
1 parent d8e6258 commit 4e021b8
Show file tree
Hide file tree
Showing 7 changed files with 233 additions and 203 deletions.
4 changes: 4 additions & 0 deletions admin-ui/src/app/catalog/components/product-detail/product-detail.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ export interface VariantFormValue {
priceIncludesTax: boolean;
priceWithTax: number;
taxCategoryId: string;
stockOnHand: number;
trackInventory: boolean;
facetValueIds: string[];
}

Expand Down Expand Up @@ -372,6 +374,8 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
priceIncludesTax: variant.priceIncludesTax,
priceWithTax: variant.priceWithTax,
taxCategoryId: variant.taxCategory.id,
stockOnHand: variant.stockOnHand,
trackInventory: variant.trackInventory,
facetValueIds,
};

Expand Down
222 changes: 119 additions & 103 deletions ...-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,117 +8,133 @@
</div>
<div class="variants-list">
<div class="variant-container card" *ngFor="let variant of variants; let i = index">
<div class="card-block header-row">
<div class="toggle">
<vdr-select-toggle
size="small"
[selected]="isVariantSelected(variant.id)"
(selectedChange)="toggleSelectVariant(variant.id)"
></vdr-select-toggle>
</div>
<div class="details">
<div class="sku">
<clr-input-container>
<input
clrInput
type="text"
[formControl]="formArray.get([i, 'sku'])"
[placeholder]="'catalog.sku' | translate"
/>
</clr-input-container>
<ng-container [formGroup]="formArray.at(i)">
<div class="card-block header-row">
<div class="toggle">
<vdr-select-toggle
size="small"
[selected]="isVariantSelected(variant.id)"
(selectedChange)="toggleSelectVariant(variant.id)"
></vdr-select-toggle>
</div>
<div class="name">
<clr-input-container>
<input
clrInput
type="text"
[formControl]="formArray.get([i, 'name'])"
[placeholder]="'common.name' | translate"
/>
</clr-input-container>
<div class="details">
<div class="sku">
<clr-input-container>
<input
clrInput
type="text"
formControlName="sku"
[placeholder]="'catalog.sku' | translate"
/>
</clr-input-container>
</div>
<div class="name">
<clr-input-container>
<input
clrInput
type="text"
formControlName="name"
[placeholder]="'common.name' | translate"
/>
</clr-input-container>
</div>
</div>
</div>
<div *ngIf="variant.options.length">
<div class="options">
{{ 'catalog.options' | translate }}:
<vdr-chip *ngFor="let option of variant.options">{{ option.name }}</vdr-chip>
<div *ngIf="variant.options.length">
<div class="options">
{{ 'catalog.options' | translate }}:
<vdr-chip *ngFor="let option of variant.options">{{ option.name }}</vdr-chip>
</div>
</div>
</div>
<div class="flex-spacer"></div>
<div>
<clr-toggle-wrapper>
<input
type="checkbox"
clrToggle
name="enabled"
[formControl]="formArray.get([i, 'enabled'])"
/>
<label>{{ 'common.enabled' | translate }}</label>
</clr-toggle-wrapper>
</div>
</div>
<div class="card-block">
<div class="row">
<div class="assets">
<vdr-product-assets
[compact]="true"
[assets]="variant.assets"
[featuredAsset]="variant.featuredAsset"
(change)="onAssetChange(variant.id, $event)"
></vdr-product-assets>
<div class="flex-spacer"></div>
<div>
<clr-toggle-wrapper>
<input type="checkbox" clrToggle name="enabled" formControlName="enabled" />
<label>{{ 'common.enabled' | translate }}</label>
</clr-toggle-wrapper>
</div>
<div class="col">
<div class="pricing">
<div class="tax-category">
<clr-select-container>
<label>{{ 'catalog.tax-category' | translate }}</label>
<select
clrSelect
name="options"
[formControl]="formArray.get([i, 'taxCategoryId'])"
>
<option
*ngFor="let taxCategory of taxCategories"
[value]="taxCategory.id"
>
{{ taxCategory.name }}
</option>
</select>
</clr-select-container>
</div>
<div class="price">
<clr-input-container>
<label>{{ 'catalog.price' | translate }}</label>
<vdr-currency-input
clrInput
[currencyCode]="variant.currencyCode"
[formControl]="formArray.get([i, 'price'])"
></vdr-currency-input>
</clr-input-container>
</div>
<div class="card-block">
<div class="row">
<div class="assets">
<vdr-product-assets
[compact]="true"
[assets]="variant.assets"
[featuredAsset]="variant.featuredAsset"
(change)="onAssetChange(variant.id, $event)"
></vdr-product-assets>
</div>
<div class="col">
<div class="pricing">
<div class="tax-category">
<clr-select-container>
<label>{{ 'catalog.tax-category' | translate }}</label>
<select clrSelect name="options" formControlName="taxCategoryId">
<option
*ngFor="let taxCategory of taxCategories"
[value]="taxCategory.id"
>
{{ taxCategory.name }}
</option>
</select>
</clr-select-container>
</div>
<div class="price">
<clr-input-container>
<label>{{ 'catalog.price' | translate }}</label>
<vdr-currency-input
clrInput
[currencyCode]="variant.currencyCode"
formControlName="price"
></vdr-currency-input>
</clr-input-container>
</div>
<vdr-variant-price-detail
[price]="formArray.get([i, 'price'])!.value"
[currencyCode]="variant.currencyCode"
[priceIncludesTax]="variant.priceIncludesTax"
[taxCategoryId]="formArray.get([i, 'taxCategoryId'])!.value"
></vdr-variant-price-detail>
<div class="stock">
<clr-input-container>
<label>{{ 'catalog.stock-on-hand' | translate }}</label>
<input
clrInput
type="number"
min="0"
step="1"
formControlName="stockOnHand"
/>
</clr-input-container>
</div>
<div class="stock">
<clr-checkbox-wrapper>
<input
type="checkbox"
clrCheckbox
name="trackInventory"
formControlName="trackInventory"
/>
<label>{{ 'catalog.track-inventory' | translate }}</label>
</clr-checkbox-wrapper>
</div>
</div>
<vdr-variant-price-detail
[price]="formArray.get([i, 'price'])!.value"
[currencyCode]="variant.currencyCode"
[priceIncludesTax]="variant.priceIncludesTax"
[taxCategoryId]="formArray.get([i, 'taxCategoryId'])!.value"
></vdr-variant-price-detail>
</div>
</div>
</div>
</div>
<div class="card-block">
<div class="facets">
<vdr-facet-value-chip
*ngFor="let facetValue of existingFacetValues(i)"
[facetValue]="facetValue"
(remove)="removeFacetValue(i, facetValue.id)"
></vdr-facet-value-chip>
<vdr-facet-value-chip
*ngFor="let facetValue of pendingFacetValues(i)"
[facetValue]="facetValue"
(remove)="removeFacetValue(i, facetValue.id)"
></vdr-facet-value-chip>
<div class="card-block">
<div class="facets">
<vdr-facet-value-chip
*ngFor="let facetValue of existingFacetValues(i)"
[facetValue]="facetValue"
(remove)="removeFacetValue(i, facetValue.id)"
></vdr-facet-value-chip>
<vdr-facet-value-chip
*ngFor="let facetValue of pendingFacetValues(i)"
[facetValue]="facetValue"
(remove)="removeFacetValue(i, facetValue.id)"
></vdr-facet-value-chip>
</div>
</div>
</div>
</ng-container>
</div>
</div>
2 changes: 2 additions & 0 deletions admin-ui/src/app/data/definitions/product-definitions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ export const PRODUCT_VARIANT_FRAGMENT = gql`
currencyCode
priceIncludesTax
priceWithTax
stockOnHand
trackInventory
taxRateApplied {
id
name
Expand Down
2 changes: 2 additions & 0 deletions admin-ui/src/app/data/providers/product-data.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,8 @@ export class ProductDataService {
'facetValueIds',
'featuredAssetId',
'assetIds',
'trackInventory',
'stockOnHand',
]),
),
};
Expand Down
2 changes: 2 additions & 0 deletions admin-ui/src/i18n-messages/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,10 @@
"set-as-featured-asset": "Set as featured asset",
"sku": "SKU",
"slug": "Slug",
"stock-on-hand": "Stock",
"tax-category": "Tax category",
"taxes": "Taxes",
"track-inventory": "Track inventory",
"truncated-options-count": "{count} further {count, plural, one {option} other {options}}",
"upload-assets": "Upload assets",
"values": "Values",
Expand Down
2 changes: 1 addition & 1 deletion packages/common/src/generated-shop-types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// tslint:disable
// Generated in 2019-05-02T12:27:28+02:00
// Generated in 2019-05-02T20:00:05+02:00
export type Maybe<T> = T | null;

export interface OrderListOptions {
Expand Down
Loading

0 comments on commit 4e021b8

Please sign in to comment.