Skip to content

Commit

Permalink
feat(admin-ui): Allow editing ProductOptionGroup names & options
Browse files Browse the repository at this point in the history
Relates to #965
  • Loading branch information
michaelbromley committed Aug 31, 2021
1 parent 7b76a7c commit 55d9784
Show file tree
Hide file tree
Showing 24 changed files with 4,590 additions and 4,242 deletions.
34 changes: 17 additions & 17 deletions packages/admin-ui/i18n-coverage.json
Original file line number Diff line number Diff line change
@@ -1,64 +1,64 @@
{
"generatedOn": "2021-07-21T12:03:11.085Z",
"lastCommit": "355488079e08c0dd119431f252f2b4135e390937",
"generatedOn": "2021-08-31T09:12:48.131Z",
"lastCommit": "7b76a7c12e4e93fc1240dd619755d40606004672",
"translationStatus": {
"cs": {
"tokenCount": 621,
"tokenCount": 623,
"translatedCount": 591,
"percentage": 95
},
"de": {
"tokenCount": 621,
"tokenCount": 623,
"translatedCount": 570,
"percentage": 92
"percentage": 91
},
"en": {
"tokenCount": 621,
"tokenCount": 623,
"translatedCount": 621,
"percentage": 100
},
"es": {
"tokenCount": 621,
"tokenCount": 623,
"translatedCount": 309,
"percentage": 50
},
"fr": {
"tokenCount": 621,
"tokenCount": 623,
"translatedCount": 613,
"percentage": 99
"percentage": 98
},
"it": {
"tokenCount": 621,
"tokenCount": 623,
"translatedCount": 621,
"percentage": 100
},
"pl": {
"tokenCount": 621,
"tokenCount": 623,
"translatedCount": 405,
"percentage": 65
},
"pt_BR": {
"tokenCount": 621,
"tokenCount": 623,
"translatedCount": 588,
"percentage": 95
"percentage": 94
},
"ru": {
"tokenCount": 621,
"tokenCount": 623,
"translatedCount": 621,
"percentage": 100
},
"uk": {
"tokenCount": 621,
"tokenCount": 623,
"translatedCount": 621,
"percentage": 100
},
"zh_Hans": {
"tokenCount": 621,
"tokenCount": 623,
"translatedCount": 558,
"percentage": 90
},
"zh_Hant": {
"tokenCount": 621,
"tokenCount": 623,
"translatedCount": 385,
"percentage": 62
}
Expand Down
2 changes: 2 additions & 0 deletions packages/admin-ui/src/lib/catalog/src/catalog.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { OptionValueInputComponent } from './components/option-value-input/optio
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 { ProductOptionsEditorComponent } from './components/product-options-editor/product-options-editor.component';
import { ProductSearchInputComponent } from './components/product-search-input/product-search-input.component';
import { ProductVariantsEditorComponent } from './components/product-variants-editor/product-variants-editor.component';
import { ProductVariantsListComponent } from './components/product-variants-list/product-variants-list.component';
Expand Down Expand Up @@ -54,6 +55,7 @@ import { VariantPriceDetailComponent } from './components/variant-price-detail/v
AssignProductsToChannelDialogComponent,
AssetDetailComponent,
ConfirmVariantDeletionDialogComponent,
ProductOptionsEditorComponent,
],
})
export class CatalogModule {}
31 changes: 31 additions & 0 deletions packages/admin-ui/src/lib/catalog/src/catalog.routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { FacetDetailComponent } from './components/facet-detail/facet-detail.com
import { FacetListComponent } from './components/facet-list/facet-list.component';
import { ProductDetailComponent } from './components/product-detail/product-detail.component';
import { ProductListComponent } from './components/product-list/product-list.component';
import { ProductOptionsEditorComponent } from './components/product-options-editor/product-options-editor.component';
import { ProductVariantsEditorComponent } from './components/product-variants-editor/product-variants-editor.component';
import { AssetResolver } from './providers/routing/asset-resolver';
import { CollectionResolver } from './providers/routing/collection-resolver';
Expand Down Expand Up @@ -52,6 +53,15 @@ export const catalogRoutes: Route[] = [
breadcrumb: productVariantEditorBreadcrumb,
},
},
{
path: 'products/:id/options',
component: ProductOptionsEditorComponent,
resolve: createResolveData(ProductVariantsResolver),
canDeactivate: [CanDeactivateDetailGuard],
data: {
breadcrumb: productOptionsEditorBreadcrumb,
},
},
{
path: 'facets',
component: FacetListComponent,
Expand Down Expand Up @@ -132,6 +142,27 @@ export function productVariantEditorBreadcrumb(data: any, params: any) {
);
}

export function productOptionsEditorBreadcrumb(data: any, params: any) {
return data.entity.pipe(
map((entity: any) => {
return [
{
label: _('breadcrumb.products'),
link: ['../', 'products'],
},
{
label: `${entity.name}`,
link: ['../', 'products', params.id, { tab: 'variants' }],
},
{
label: _('breadcrumb.product-options'),
link: ['options'],
},
];
}),
);
}

export function facetBreadcrumb(data: any, params: any) {
return detailBreadcrumb<FacetWithValues.Fragment>({
entity: data.entity,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<vdr-action-bar>
<vdr-ab-left>
<vdr-language-selector
[availableLanguageCodes]="availableLanguages$ | async"
[currentLanguageCode]="languageCode$ | async"
(languageCodeChange)="setLanguage($event)"
></vdr-language-selector>
</vdr-ab-left>

<vdr-ab-right>
<div class="flex center">
<div class="mr2">
<clr-checkbox-wrapper>
<input
clrCheckbox
type="checkbox"
id="auto-update"
[(ngModel)]="autoUpdateVariantNames"
/>
<label>{{ 'catalog.auto-update-product-variant-name' | translate }}</label>
</clr-checkbox-wrapper>
</div>
<button
*vdrIfPermissions="updatePermission"
class="btn btn-primary"
(click)="save()"
[disabled]="detailForm.pristine || detailForm.invalid"
>
{{ 'common.update' | translate }}
</button>
</div>
</vdr-ab-right>
</vdr-action-bar>
<form class="form" [formGroup]="detailForm" *ngIf="optionGroups$ | async as optionGroups">
<div formGroupName="optionGroups" class="clr-row">
<div class="clr-col-12 clr-col-xl-6" *ngFor="let optionGroup of getOptionGroups(); index as i">
<section class="card" [formArrayName]="i">
<div class="card-header option-group-header">
<vdr-entity-info [entity]="optionGroup.value"></vdr-entity-info>
<div class="ml2">{{ optionGroup.value.code }}</div>
</div>
<div class="card-block">
<vdr-form-field [label]="'common.name' | translate" for="name">
<input
[id]="'name-' + i"
type="text"
formControlName="name"
[readonly]="!(updatePermission | hasPermission)"
/>
</vdr-form-field>
<vdr-form-field [label]="'common.code' | translate" for="code">
<input
[id]="'code-' + i"
type="text"
[readonly]="!(updatePermission | hasPermission)"
formControlName="code"
/>
</vdr-form-field>
</div>
<section class="card-block">
<table class="facet-values-list table mt2 mb4" formGroupName="options">
<thead>
<tr>
<th></th>
<th>{{ 'common.name' | translate }}</th>
<th>{{ 'common.code' | translate }}</th>
</tr>
</thead>
<tbody>
<tr
class="facet-value"
*ngFor="let option of getOptions(optionGroup); let i = index"
[formGroupName]="i"
>
<td class="align-middle">
<vdr-entity-info [entity]="option.value"></vdr-entity-info>
</td>
<td class="align-middle">
<input
type="text"
formControlName="name"
[readonly]="!(updatePermission | hasPermission)"
/>
</td>
<td class="align-middle"><input type="text" formControlName="code" /></td>
</tr>
</tbody>
</table>
</section>
</section>
</div>
</div>
</form>
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.option-group-header {
display: flex;
align-items: baseline;
}
Loading

0 comments on commit 55d9784

Please sign in to comment.