Skip to content

Commit

Permalink
feat(admin-ui): Filter Asset list by tags
Browse files Browse the repository at this point in the history
Relates to #316.
  • Loading branch information
michaelbromley committed Jan 19, 2021
1 parent 995d1b4 commit c244c0a
Show file tree
Hide file tree
Showing 28 changed files with 284 additions and 99 deletions.
26 changes: 13 additions & 13 deletions packages/admin-ui/i18n-coverage.json
Original file line number Diff line number Diff line change
@@ -1,49 +1,49 @@
{
"generatedOn": "2021-01-18T19:42:25.183Z",
"lastCommit": "cd645caa10aac99dfb3268624888835e8dcf3a2d",
"generatedOn": "2021-01-19T09:29:39.498Z",
"lastCommit": "c63f9ace215e3a452785cf212f820b7d00933032",
"translationStatus": {
"cs": {
"tokenCount": 757,
"tokenCount": 758,
"translatedCount": 755,
"percentage": 100
},
"de": {
"tokenCount": 757,
"tokenCount": 758,
"translatedCount": 596,
"percentage": 79
},
"en": {
"tokenCount": 757,
"translatedCount": 756,
"tokenCount": 758,
"translatedCount": 757,
"percentage": 100
},
"es": {
"tokenCount": 757,
"tokenCount": 758,
"translatedCount": 458,
"percentage": 61
"percentage": 60
},
"fr": {
"tokenCount": 757,
"tokenCount": 758,
"translatedCount": 692,
"percentage": 91
},
"pl": {
"tokenCount": 757,
"tokenCount": 758,
"translatedCount": 551,
"percentage": 73
},
"pt_BR": {
"tokenCount": 757,
"tokenCount": 758,
"translatedCount": 642,
"percentage": 85
},
"zh_Hans": {
"tokenCount": 757,
"tokenCount": 758,
"translatedCount": 533,
"percentage": 70
},
"zh_Hant": {
"tokenCount": 757,
"tokenCount": 758,
"translatedCount": 533,
"percentage": 70
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
<vdr-action-bar>
<vdr-ab-left>
<input
type="text"
name="searchTerm"
[formControl]="searchTerm"
[placeholder]="'asset.search-asset-name' | translate"
class="search-input ml3"
/>
<vdr-ab-left [grow]="true">
<vdr-asset-search-input
class="pr4 mt1"
[tags]="allTags$ | async"
(searchTermChange)="searchTerm$.next($event)"
(tagsChange)="filterByTags$.next($event)"
></vdr-asset-search-input>
</vdr-ab-left>
<vdr-ab-right>
<vdr-action-bar-items locationId="asset-list"></vdr-action-bar-items>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,14 @@ import {
DataService,
DeletionResult,
GetAssetList,
LogicalOperator,
ModalService,
NotificationService,
TagFragment,
} from '@vendure/admin-ui/core';
import { SortOrder } from '@vendure/common/lib/generated-shop-types';
import { PaginationInstance } from 'ngx-pagination';
import { combineLatest, EMPTY, Observable } from 'rxjs';
import { BehaviorSubject, combineLatest, EMPTY, Observable } from 'rxjs';
import { debounceTime, finalize, map, switchMap, takeUntil } from 'rxjs/operators';

@Component({
Expand All @@ -22,10 +24,12 @@ import { debounceTime, finalize, map, switchMap, takeUntil } from 'rxjs/operator
styleUrls: ['./asset-list.component.scss'],
})
export class AssetListComponent
extends BaseListComponent<GetAssetList.Query, GetAssetList.Items>
extends BaseListComponent<GetAssetList.Query, GetAssetList.Items, GetAssetList.Variables>
implements OnInit {
searchTerm = new FormControl('');
searchTerm$ = new BehaviorSubject<string | undefined>(undefined);
filterByTags$ = new BehaviorSubject<TagFragment[] | undefined>(undefined);
uploading = false;
allTags$: Observable<TagFragment[]>;
paginationConfig$: Observable<PaginationInstance>;

constructor(
Expand All @@ -39,20 +43,29 @@ export class AssetListComponent
super.setQueryFn(
(...args: any[]) => this.dataService.product.getAssetList(...args),
data => data.assets,
(skip, take) => ({
options: {
skip,
take,
filter: {
name: {
contains: this.searchTerm.value,
(skip, take) => {
const searchTerm = this.searchTerm$.value;
const tags = this.filterByTags$.value?.map(t => t.value);
return {
options: {
skip,
take,
...(searchTerm
? {
filter: {
name: { contains: searchTerm },
},
}
: {}),
sort: {
createdAt: SortOrder.DESC,
},
tags,
tagsOperator: LogicalOperator.AND,
},
sort: {
createdAt: SortOrder.DESC,
},
},
}),
};
},
{ take: 25, skip: 0 },
);
}

Expand All @@ -61,9 +74,10 @@ export class AssetListComponent
this.paginationConfig$ = combineLatest(this.itemsPerPage$, this.currentPage$, this.totalItems$).pipe(
map(([itemsPerPage, currentPage, totalItems]) => ({ itemsPerPage, currentPage, totalItems })),
);
this.searchTerm.valueChanges
.pipe(debounceTime(250), takeUntil(this.destroy$))
.subscribe(() => this.refresh());
this.searchTerm$.pipe(debounceTime(250), takeUntil(this.destroy$)).subscribe(() => this.refresh());

this.filterByTags$.pipe(takeUntil(this.destroy$)).subscribe(() => this.refresh());
this.allTags$ = this.dataService.product.getTagList().mapStream(data => data.tags.items);
}

filesSelected(files: File[]) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
</div>
</ng-template>
<ng-template ng-label-tmp let-item="item" let-clear="clear">
<ng-container *ngIf="item.facetValue">
<ng-container *ngIf="item.value">
<vdr-facet-value-chip
[facetValue]="item.facetValue"
[removable]="true"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { NgSelectComponent, SELECTION_MODEL_FACTORY } from '@ng-select/ng-select';
import { notNullOrUndefined } from '@vendure/common/lib/shared-utils';

import { SearchProducts } from '@vendure/admin-ui/core';
import { notNullOrUndefined } from '@vendure/common/lib/shared-utils';

import { ProductSearchSelectionModelFactory } from './product-search-selection-model';

Expand Down Expand Up @@ -69,14 +68,6 @@ export class ProductSearchInputComponent {
);
};

groupByFacet = (item: SearchProducts.FacetValues | { label: string }) => {
if (this.isFacetValueItem(item)) {
return item.facetValue.facet.name;
} else {
return '';
}
};

onSelectChange(selectedItems: Array<SearchProducts.FacetValues | { label: string }>) {
if (!Array.isArray(selectedItems)) {
selectedItems = [selectedItems];
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export class BaseListComponent<ResultType, ItemType, VariableType = any> impleme
private onPageChangeFn: OnPageChangeFn<VariableType> = (skip, take) =>
({ options: { skip, take } } as any);
private refresh$ = new BehaviorSubject<undefined>(undefined);
private defaults: { take: number; skip: number } = { take: 10, skip: 0 };

constructor(protected router: Router, protected route: ActivatedRoute) {}

Expand All @@ -38,12 +39,16 @@ export class BaseListComponent<ResultType, ItemType, VariableType = any> impleme
listQueryFn: ListQueryFn<ResultType>,
mappingFn: MappingFn<ItemType, ResultType>,
onPageChangeFn?: OnPageChangeFn<VariableType>,
defaults?: { take: number; skip: number },
) {
this.listQueryFn = listQueryFn;
this.mappingFn = mappingFn;
if (onPageChangeFn) {
this.onPageChangeFn = onPageChangeFn;
}
if (defaults) {
this.defaults = defaults;
}
}

ngOnInit() {
Expand All @@ -52,7 +57,7 @@ export class BaseListComponent<ResultType, ItemType, VariableType = any> impleme
`No listQueryFn has been defined. Please call super.setQueryFn() in the constructor.`,
);
}
this.listQuery = this.listQueryFn(10, 0);
this.listQuery = this.listQueryFn(this.defaults.take, this.defaults.skip);

const fetchPage = ([currentPage, itemsPerPage, _]: [number, number, undefined]) => {
const take = itemsPerPage;
Expand All @@ -70,7 +75,7 @@ export class BaseListComponent<ResultType, ItemType, VariableType = any> impleme
);
this.itemsPerPage$ = this.route.queryParamMap.pipe(
map(qpm => qpm.get('perPage')),
map(perPage => (!perPage ? 10 : +perPage)),
map(perPage => (!perPage ? this.defaults.take : +perPage)),
distinctUntilChanged(),
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -398,8 +398,10 @@ export const CREATE_ASSETS = gql`
mutation CreateAssets($input: [CreateAssetInput!]!) {
createAssets(input: $input) {
...Asset
tags {
...Tag
... on Asset {
tags {
...Tag
}
}
... on ErrorResult {
message
Expand Down
3 changes: 3 additions & 0 deletions packages/admin-ui/src/lib/core/src/public_api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ export * from './shared/components/asset-gallery/asset-gallery.component';
export * from './shared/components/asset-picker-dialog/asset-picker-dialog.component';
export * from './shared/components/asset-preview/asset-preview.component';
export * from './shared/components/asset-preview-dialog/asset-preview-dialog.component';
export * from './shared/components/asset-search-input/asset-search-input.component';
export * from './shared/components/channel-assignment-control/channel-assignment-control.component';
export * from './shared/components/channel-badge/channel-badge.component';
export * from './shared/components/chip/chip.component';
Expand Down Expand Up @@ -131,6 +132,7 @@ export * from './shared/components/history-entry-detail/history-entry-detail.com
export * from './shared/components/items-per-page-controls/items-per-page-controls.component';
export * from './shared/components/labeled-data/labeled-data.component';
export * from './shared/components/language-selector/language-selector.component';
export * from './shared/components/manage-tags-dialog/manage-tags-dialog.component';
export * from './shared/components/modal-dialog/dialog-buttons.directive';
export * from './shared/components/modal-dialog/dialog-component-outlet.component';
export * from './shared/components/modal-dialog/dialog-title.directive';
Expand All @@ -155,6 +157,7 @@ export * from './shared/components/rich-text-editor/rich-text-editor.component';
export * from './shared/components/select-toggle/select-toggle.component';
export * from './shared/components/simple-dialog/simple-dialog.component';
export * from './shared/components/table-row-action/table-row-action.component';
export * from './shared/components/tag-selector/tag-selector.component';
export * from './shared/components/timeline-entry/timeline-entry.component';
export * from './shared/components/title-input/title-input.component';
export * from './shared/directives/disabled.directive';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,8 @@ export class AssetGalleryComponent implements OnChanges {
this.selection.splice(index, 1);
}
}
// Make the selection mutable
this.selection = this.selection.map(x => ({ ...x }));
this.selectionChange.emit(this.selection);
}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<ng-template vdrDialogTitle>
<div class="title-row">
{{ 'asset.select-assets' | translate }}
<span>{{ 'asset.select-assets' | translate }}</span>
<div class="flex-spacer"></div>
<vdr-asset-file-input
class="ml3"
(selectFiles)="createAssets($event)"
Expand All @@ -9,13 +10,12 @@
></vdr-asset-file-input>
</div>
</ng-template>
<input
type="text"
name="searchTerm"
[formControl]="searchTerm"
[placeholder]="'asset.search-asset-name' | translate"
class="search-input"
/>
<vdr-asset-search-input
class="mb2"
[tags]="allTags$ | async"
(searchTermChange)="searchTerm$.next($event)"
(tagsChange)="filterByTags$.next($event)"
></vdr-asset-search-input>
<vdr-asset-gallery
[assets]="(assets$ | async)! | paginate: paginationConfig"
[multiSelect]="true"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
:host {
display: flex;
flex-direction: column;
height: 90vh;
height: 70vh;
}

.title-row {
Expand Down
Loading

0 comments on commit c244c0a

Please sign in to comment.