@deenruv/admin-ui 1.0.0

package/core/common/base-detail.component.d.ts

@@ -0,0 +1,146 @@
+import { Type } from '@angular/core';
+import { AbstractControl, UntypedFormGroup } from '@angular/forms';
+import { ActivatedRoute, ResolveFn, Router } from '@angular/router';
+import { ResultOf, TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { Observable, Subject } from 'rxjs';
+import { DataService } from '../data/providers/data.service';
+import { ServerConfigService } from '../data/server-config';
+import { BreadcrumbValue } from '../providers/breadcrumb/breadcrumb.service';
+import { PermissionsService } from '../providers/permissions/permissions.service';
+import { DeactivateAware } from './deactivate-aware';
+import { CustomFieldConfig, CustomFields, LanguageCode } from './generated-types';
+import { TranslationOf } from './utilities/find-translation';
+/**
+ * @description
+ * A base class for entity detail views. It should be used in conjunction with the
+ * {@link BaseEntityResolver}.
+ *
+ * @example
+ * ```ts
+ * \@Component({
+ *   selector: 'app-my-entity',
+ *   templateUrl: './my-entity.component.html',
+ *   styleUrls: ['./my-entity.component.scss'],
+ *   changeDetection: ChangeDetectionStrategy.OnPush,
+ * })
+ * export class GlobalSettingsComponent extends BaseDetailComponent<MyEntityFragment> implements OnInit {
+ *   detailForm: FormGroup;
+ *
+ *   constructor(
+ *     router: Router,
+ *     route: ActivatedRoute,
+ *     serverConfigService: ServerConfigService,
+ *     protected dataService: DataService,
+ *     private formBuilder: FormBuilder,
+ *   ) {
+ *     super(route, router, serverConfigService, dataService);
+ *     this.detailForm = this.formBuilder.group({
+ *       name: [''],
+ *     });
+ *   }
+ *
+ *   protected setFormValues(entity: MyEntityFragment, languageCode: LanguageCode): void {
+ *     this.detailForm.patchValue({
+ *       name: entity.name,
+ *     });
+ *   }
+ * }
+ * ```
+ *
+ * @docsCategory list-detail-views
+ */
+export declare abstract class BaseDetailComponent<Entity extends {
+    id: string;
+    updatedAt?: string;
+}> implements DeactivateAware {
+    protected route: ActivatedRoute;
+    protected router: Router;
+    protected serverConfigService: ServerConfigService;
+    protected dataService: DataService;
+    protected permissionsService: PermissionsService;
+    entity$: Observable<Entity>;
+    availableLanguages$: Observable<LanguageCode[]>;
+    languageCode$: Observable<LanguageCode>;
+    languageCode: LanguageCode;
+    isNew$: Observable<boolean>;
+    id: string;
+    abstract detailForm: UntypedFormGroup;
+    protected destroy$: Subject<void>;
+    protected constructor(route: ActivatedRoute, router: Router, serverConfigService: ServerConfigService, dataService: DataService, permissionsService: PermissionsService);
+    init(): void;
+    protected setUpStreams(): void;
+    destroy(): void;
+    setLanguage(code: LanguageCode): void;
+    canDeactivate(): boolean;
+    protected abstract setFormValues(entity: Entity, languageCode: LanguageCode): void;
+    protected setCustomFieldFormValues<T = Entity>(customFields: CustomFieldConfig[], formGroup: AbstractControl | null, entity: T, currentTranslation?: TranslationOf<T>): void;
+    protected getCustomFieldConfig(key: Exclude<keyof CustomFields, '__typename'>): CustomFieldConfig[];
+    protected setQueryParam(key: string, value: any): void;
+}
+/**
+ * @description
+ * A version of the {@link BaseDetailComponent} which is designed to be used with a
+ * [TypedDocumentNode](https://the-guild.dev/graphql/codegen/plugins/typescript/typed-document-node).
+ *
+ * @docsCategory list-detail-views
+ */
+export declare abstract class TypedBaseDetailComponent<T extends TypedDocumentNode<any, any>, Field extends keyof ResultOf<T>> extends BaseDetailComponent<NonNullable<ResultOf<T>[Field]>> {
+    protected result$: Observable<ResultOf<T>>;
+    protected entity: ResultOf<T>[Field];
+    protected constructor();
+    init(): void;
+}
+/**
+ * @description
+ * A helper function for creating tabs that point to a {@link TypedBaseDetailComponent}. This takes
+ * care of the route resolver parts so that the detail component automatically has access to the
+ * correct resolved detail data.
+ *
+ * @example
+ * ```ts
+ * \@NgModule({
+ *   imports: [ReviewsSharedModule],
+ *   declarations: [/* ... *\/],
+ *   providers: [
+ *     registerPageTab({
+ *       location: 'product-detail',
+ *       tab: 'Specs',
+ *       route: 'specs',
+ *       component: detailComponentWithResolver({
+ *         component: ProductSpecDetailComponent,
+ *         query: GetProductSpecsDocument,
+ *         entityKey: 'spec',
+ *       }),
+ *     }),
+ *   ],
+ * })
+ * export class ProductSpecsUiExtensionModule {}
+ * ```
+ * @docsCategory list-detail-views
+ */
+export declare function detailComponentWithResolver<T extends TypedDocumentNode<any, {
+    id: string;
+}>, Field extends keyof ResultOf<T>, R extends Field>(config: {
+    component: Type<TypedBaseDetailComponent<T, Field>>;
+    query: T;
+    entityKey: R;
+    getBreadcrumbs?: (entity: ResultOf<T>[R]) => BreadcrumbValue;
+    variables?: T extends TypedDocumentNode<any, infer V> ? Omit<V, 'id'> : never;
+}): {
+    resolveFn: ResolveFn<{
+        entity: Observable<ResultOf<T>[keyof ResultOf<T>] | null>;
+        result?: ResultOf<T> | undefined;
+    }>;
+    breadcrumbFn: (result: any) => string | import("../providers/breadcrumb/breadcrumb.service").BreadcrumbLabelLinkPair | BreadcrumbValue[];
+    component: Type<TypedBaseDetailComponent<T, Field>>;
+};
+export declare function createBaseDetailResolveFn<T extends TypedDocumentNode<any, {
+    id: string;
+}>, Field extends keyof ResultOf<T>, R extends Field>(config: {
+    query: T;
+    entityKey: R | string;
+    variables?: T extends TypedDocumentNode<any, infer V> ? Omit<V, 'id'> : never;
+}): ResolveFn<{
+    entity: Observable<ResultOf<T>[Field] | null>;
+    result?: ResultOf<T>;
+}>;

package/core/common/base-entity-resolver.d.ts

@@ -0,0 +1,45 @@
+import { ActivatedRouteSnapshot, ResolveData, Router, RouterStateSnapshot } from '@angular/router';
+import { Type } from '@deenruv/common/lib/shared-types';
+import { Observable } from 'rxjs';
+export interface EntityResolveData<R> extends ResolveData {
+    entity: Type<BaseEntityResolver<R>>;
+}
+export declare function createResolveData<T extends BaseEntityResolver<R>, R>(resolver: Type<T>): EntityResolveData<R>;
+/**
+ * @description
+ * A base resolver for an entity detail route. Resolves to an observable of the given entity, or a "blank"
+ * version if the route id equals "create". Should be used together with details views which extend the
+ * {@link BaseDetailComponent}.
+ *
+ * @example
+ * ```ts
+ * \@Injectable({
+ *   providedIn: 'root',
+ * })
+ * export class MyEntityResolver extends BaseEntityResolver<MyEntityFragment> {
+ *   constructor(router: Router, dataService: DataService) {
+ *     super(
+ *       router,
+ *       {
+ *         __typename: 'MyEntity',
+ *         id: '',
+ *         createdAt: '',
+ *         updatedAt: '',
+ *         name: '',
+ *       },
+ *       id => dataService.query(GET_MY_ENTITY, { id }).mapStream(data => data.myEntity),
+ *     );
+ *   }
+ * }
+ * ```
+ *
+ * @docsCategory list-detail-views
+ */
+export declare class BaseEntityResolver<T> {
+    protected router: Router;
+    private readonly emptyEntity;
+    private entityStream;
+    constructor(router: Router, emptyEntity: T, entityStream: (id: string) => Observable<T | null | undefined>);
+    /** @internal */
+    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Observable<T>>;
+}

package/core/common/base-list.component.d.ts

@@ -0,0 +1,138 @@
+import { OnDestroy, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { ActivatedRoute, QueryParamsHandling, Router } from '@angular/router';
+import { ResultOf, TypedDocumentNode, VariablesOf } from '@graphql-typed-document-node/core';
+import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import { DataService } from '../data/providers/data.service';
+import { QueryResult } from '../data/query-result';
+import { ServerConfigService } from '../data/server-config';
+import { DataTableFilterCollection } from '../providers/data-table/data-table-filter-collection';
+import { DataTableSortCollection } from '../providers/data-table/data-table-sort-collection';
+import { PermissionsService } from '../providers/permissions/permissions.service';
+import { CustomFieldConfig, CustomFields, LanguageCode } from './generated-types';
+import { SelectionManager } from './utilities/selection-manager';
+import * as i0 from "@angular/core";
+export type ListQueryFn<R> = (take: number, skip: number, ...args: any[]) => QueryResult<R, any>;
+export type MappingFn<T, R> = (result: R) => {
+    items: T[];
+    totalItems: number;
+};
+export type OnPageChangeFn<V> = (skip: number, take: number) => V;
+/**
+ * Unwraps a query that returns a paginated list with an "items" property,
+ * returning the type of one of the items in the array.
+ */
+export type ItemOf<T, K extends keyof T> = T[K] extends {
+    items: infer R;
+} ? R extends any[] ? R[number] : R : never;
+/**
+ * @description
+ * This is a base class which implements the logic required to fetch and manipulate
+ * a list of data from a query which returns a PaginatedList type.
+ *
+ * It is normally used in combination with the {@link DataTable2Component}.
+ *
+ * @docsCategory list-detail-views
+ */
+export declare class BaseListComponent<ResultType, ItemType, VariableType extends Record<string, any> = any> implements OnInit, OnDestroy {
+    protected router: Router;
+    protected route: ActivatedRoute;
+    searchTermControl: FormControl<string | null>;
+    selectionManager: SelectionManager<any>;
+    result$: Observable<ResultType>;
+    items$: Observable<ItemType[]>;
+    totalItems$: Observable<number>;
+    itemsPerPage$: Observable<number>;
+    currentPage$: Observable<number>;
+    protected destroy$: Subject<void>;
+    private listQuery;
+    private listQueryFn;
+    private mappingFn;
+    private onPageChangeFn;
+    protected refresh$: BehaviorSubject<undefined>;
+    private defaults;
+    constructor(router: Router, route: ActivatedRoute);
+    /**
+     * @description
+     * Sets the fetch function for the list being implemented.
+     */
+    setQueryFn(listQueryFn: ListQueryFn<ResultType>, mappingFn: MappingFn<ItemType, ResultType>, onPageChangeFn?: OnPageChangeFn<VariableType>, defaults?: {
+        take: number;
+        skip: number;
+    }): void;
+    /** @internal */
+    ngOnInit(): void;
+    /**
+     * @description
+     * Accepts a list of Observables which will trigger a refresh of the list when any of them emit.
+     */
+    protected refreshListOnChanges(...streams: Array<Observable<any>>): void;
+    /** @internal */
+    ngOnDestroy(): void;
+    /**
+     * @description
+     * Sets the current page number in the url.
+     */
+    setPageNumber(page: number): void;
+    /**
+     * @description
+     * Sets the number of items per page in the url.
+     */
+    setItemsPerPage(perPage: number): void;
+    /**
+     * @description
+     * Re-fetch the current page of results.
+     */
+    refresh(): void;
+    protected setQueryParam(hash: {
+        [key: string]: any;
+    }, options?: {
+        replaceUrl?: boolean;
+        queryParamsHandling?: QueryParamsHandling;
+    }): any;
+    protected setQueryParam(key: string, value: any, options?: {
+        replaceUrl?: boolean;
+        queryParamsHandling?: QueryParamsHandling;
+    }): any;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseListComponent<any, any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseListComponent<any, any, any>, never, never, {}, {}, never, never, false, never>;
+}
+/**
+ * @description
+ * A version of the {@link BaseListComponent} which is designed to be used with a
+ * [TypedDocumentNode](https://the-guild.dev/graphql/codegen/plugins/typescript/typed-document-node).
+ *
+ * @docsCategory list-detail-views
+ */
+export declare class TypedBaseListComponent<T extends TypedDocumentNode<any, Vars>, Field extends keyof ResultOf<T>, Vars extends {
+    options: {
+        filter: any;
+        sort: any;
+    };
+} = VariablesOf<T>> extends BaseListComponent<ResultOf<T>, ItemOf<ResultOf<T>, Field>, VariablesOf<T>> implements OnInit {
+    availableLanguages$: Observable<LanguageCode[]>;
+    contentLanguage$: Observable<LanguageCode>;
+    protected dataService: DataService;
+    protected router: Router;
+    protected serverConfigService: ServerConfigService;
+    protected permissionsService: PermissionsService;
+    private refreshStreams;
+    private collections;
+    constructor();
+    protected configure(config: {
+        document: T;
+        getItems: (data: ResultOf<T>) => {
+            items: Array<ItemOf<ResultOf<T>, Field>>;
+            totalItems: number;
+        };
+        setVariables?: (skip: number, take: number) => VariablesOf<T>;
+        refreshListOnChanges?: Array<Observable<any>>;
+    }): void;
+    ngOnInit(): void;
+    createFilterCollection(): DataTableFilterCollection<NonNullable<NonNullable<Vars['options']>['filter']>>;
+    createSortCollection(): DataTableSortCollection<NonNullable<NonNullable<Vars['options']>['sort']>>;
+    setLanguage(code: LanguageCode): void;
+    getCustomFieldConfig(key: Exclude<keyof CustomFields, '__typename'> | string): CustomFieldConfig[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<TypedBaseListComponent<any, any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TypedBaseListComponent<any, any, any>, never, never, {}, {}, never, never, false, never>;
+}

package/core/common/component-registry-types.d.ts

@@ -0,0 +1,65 @@
+import { FormControl } from '@angular/forms';
+import { DataTableLocationId } from '../shared/components/data-table-2/data-table-custom-component.service';
+/**
+ * @description
+ * This interface should be implemented by any component being used as a custom input. For example,
+ * inputs for custom fields, or for configurable arguments.
+ *
+ * @docsCategory custom-input-components
+ */
+export interface FormInputComponent<C = InputComponentConfig> {
+    /**
+     * @description
+     * Should be set to `true` if this component is designed to handle lists.
+     * If `true` then the formControl value will be an array of all the
+     * values in the list.
+     */
+    isListInput?: boolean;
+    /**
+     * @description
+     * This is set by the Admin UI when consuming this component, indicating that the
+     * component should be rendered in a read-only state.
+     */
+    readonly: boolean;
+    /**
+     * @description
+     * This controls the actual value of the form item. The current value is available
+     * as `this.formControl.value`, and an Observable stream of value changes is available
+     * as `this.formControl.valueChanges`. To update the value, use `.setValue(val)` and then
+     * `.markAsDirty()`.
+     *
+     * Full documentation can be found in the [Angular docs](https://angular.io/api/forms/FormControl).
+     */
+    formControl: FormControl;
+    /**
+     * @description
+     * The `config` property contains the full configuration object of the custom field or configurable argument.
+     */
+    config: C;
+}
+export type InputComponentConfig = {
+    [prop: string]: any;
+};
+/**
+ * @description
+ * The valid locationIds for registering action bar items or tabs.
+ *
+ * @docsCategory action-bar
+ */
+export type PageLocationId = 'administrator-detail' | 'administrator-list' | 'asset-detail' | 'asset-list' | 'channel-detail' | 'channel-list' | 'collection-detail' | 'collection-list' | 'country-detail' | 'country-list' | 'customer-detail' | 'customer-list' | 'customer-group-list' | 'customer-group-detail' | 'draft-order-detail' | 'facet-detail' | 'facet-list' | 'global-setting-detail' | 'system-status' | 'job-list' | 'order-detail' | 'order-list' | 'modify-order' | 'payment-method-detail' | 'payment-method-list' | 'product-detail' | 'product-list' | 'product-variant-detail' | 'profile' | 'promotion-detail' | 'promotion-list' | 'role-detail' | 'role-list' | 'seller-detail' | 'seller-list' | 'shipping-method-detail' | 'shipping-method-list' | 'stock-location-detail' | 'stock-location-list' | 'tax-category-detail' | 'tax-category-list' | 'tax-rate-detail' | 'tax-rate-list' | 'zone-detail' | 'zone-list';
+/**
+ * @description
+ * The valid locationIds for registering action bar items. For a list of
+ * values, see {@link PageLocationId}.
+ *
+ * @docsCategory action-bar
+ */
+export type ActionBarLocationId = PageLocationId;
+/**
+ * @description
+ * The valid locations for embedding a {@link CustomDetailComponent}.
+ *
+ * @docsCategory custom-detail-components
+ */
+export type CustomDetailComponentLocationId = 'administrator-profile' | 'administrator-detail' | 'channel-detail' | 'collection-detail' | 'country-detail' | 'customer-detail' | 'customer-group-detail' | 'draft-order-detail' | 'facet-detail' | 'global-settings-detail' | 'order-detail' | 'payment-method-detail' | 'product-detail' | 'product-variant-detail' | 'promotion-detail' | 'seller-detail' | 'shipping-method-detail' | 'stock-location-detail' | 'tax-category-detail' | 'tax-rate-detail' | 'zone-detail';
+export type UIExtensionLocationId = ActionBarLocationId | CustomDetailComponentLocationId | DataTableLocationId;

package/core/common/deactivate-aware.d.ts

@@ -0,0 +1,8 @@
+/**
+ * This interface should be implemented by those top-level components which want to
+ * signal to the user if a route deactivation is attempted in a state where chages
+ * would be lost.
+ */
+export interface DeactivateAware {
+    canDeactivate(): boolean;
+}

package/core/common/detail-breadcrumb.d.ts

@@ -0,0 +1,12 @@
+import { Observable } from 'rxjs';
+import { BreadcrumbValue } from '../providers/breadcrumb/breadcrumb.service';
+/**
+ * Creates an observable of breadcrumb links for use in the route config of a detail route.
+ */
+export declare function detailBreadcrumb<T>(options: {
+    entity: Observable<T>;
+    id: string;
+    breadcrumbKey: string;
+    getName: (entity: T) => string;
+    route: string;
+}): Observable<BreadcrumbValue>;