ngx-thin-admin 0.0.0-alpha.0 → 0.0.0-alpha.10

package/types/ngx-thin-admin.d.ts

@@ -1,14 +1,16 @@
+import * as rxjs from 'rxjs';
 import * as i0 from '@angular/core';
-import { OnChanges, OnInit, TemplateRef, SimpleChanges } from '@angular/core';
+import { InjectionToken, Provider, EventEmitter, SimpleChanges, OnChanges, OnInit, TemplateRef } from '@angular/core';
 import { MtxGridColumn } from '@ng-matero/extensions/grid';
-import { FormlyFieldConfig, FormlyFieldProps } from '@ngx-formly/core';
+import { UrlTree } from '@angular/router';
+import { FormlyFieldConfig, FormlyFieldProps, ConfigOption } from '@ngx-formly/core';
 import { PageEvent } from '@angular/material/paginator';
 import { FormGroup } from '@angular/forms';
 
 /**
  * Config for editor
  */
-interface NgxThinAdminEditorConfig {
+interface NgxThinAdminEditorConfig<T = any> {
     /**
      * Label for the item
      * @example "User Account", "Article", etc. (used for singular form in UI)
@@ -31,15 +33,44 @@ interface NgxThinAdminEditorConfig {
      * @param id
      * @returns The item data
      */
-    fetcher: (id: string) => Promise<any> | any;
+    fetcher: (id: string) => Promise<T> | T;
     /**
      * Function to create item / save item
      * @param data
      * @param id (only for update)
      * @returns The created/updated item data
      */
-    saver?: (data: any, id?: string) => Promise<any> | any;
+    saver?: (data: T, id?: string) => Promise<T> | T;
+    /**
+     * Optional config for back button
+     */
+    backButton?: NgxThinAdminEditorBackButtonConfig;
+    /**
+     * Optional config for custom footer buttons
+     */
+    footerButtons?: {
+        label: string;
+        click: (data: T, itemId: string | undefined) => void;
+        show?: (data: T, itemId: string | undefined) => boolean;
+        className?: string;
+    }[];
 }
+type NgxThinAdminEditorBackButtonConfig = {
+    label?: string;
+    historyBack: true;
+} | {
+    label?: string;
+    click: () => void;
+    historyBack?: boolean;
+} | {
+    label?: string;
+    link: string;
+    historyBack?: boolean;
+} | {
+    label?: string;
+    routerLink: string;
+    historyBack?: boolean;
+};
 /**
  * Columns for editor (extended type of FormlyFieldConfig)
  */
@@ -58,14 +89,14 @@ interface NgxThinAdminEditorField extends Omit<NgxThinAdminFieldConfig, 'props'>
  * Columns for list (extended type of MtxGridColumn)
  * @see https://ng-matero.github.io/extensions/components/grid/api
  */
-interface NgxThinAdminListColumn extends MtxGridColumn {
-    link?: (item: any) => string | undefined;
-    routerLink?: (item: any) => string | undefined;
+interface NgxThinAdminListColumn<T = any> extends MtxGridColumn<T> {
+    link?: (item: T) => string | undefined;
+    routerLink?: (item: T) => string | UrlTree | undefined;
 }
 /**
  * Config for list
  */
-interface NgxThinAdminListConfig {
+interface NgxThinAdminListConfig<T = any> {
     /**
      * Title of the list
      * @example "User Accounts", "Articles", etc.
@@ -81,12 +112,16 @@ interface NgxThinAdminListConfig {
      * @default [10, 25, 50, 100]
      */
     pageSizes?: number[];
+    /**
+     * Default page size
+     */
+    pageSize?: number;
     /**
      * Function to fetch list data. It will be called with a query object when the component initializes and when the fetch() method is called.
      * @param query - The query object containing parameters for fetching the list (e.g., keyword, pagination info).
      * @returns An array of data to be displayed in the grid.
      */
-    fetcher: ListFetcher;
+    fetcher: ListFetcher<T>;
     /**
      * Optional config for create button. If provided, a create button will be displayed in the UI.
      */
@@ -95,11 +130,36 @@ interface NgxThinAdminListConfig {
      * Optional config for CSV export
      */
     csvExportButton?: NgxThinAdminListCsvExportButtonConfig | 'default';
+    /**
+     * Field key for the item ID
+     * (used by itemDeleterConfig to identify the item being deleted)
+     * @example "id", "loginId", "articleId", etc.
+     */
+    idFieldKey?: string;
+    /**
+     * Field key for the item label
+     * (used by itemDeleterConfig to display the item label in the confirmation dialog)
+     * @example "userName", "accountName", "articleTitle", etc.
+     */
+    labelFieldKey?: string;
+    /**
+     * Function to change the category of an item.
+     * If provided, a category change button will be automatically added to the item's action column.
+     * @param id ID of the item
+     * @param categoryId Destination category ID (undefined if moving to "no category")
+     */
+    categoryChanger?: (id: string, categoryId: string | undefined) => Promise<void> | Promise<any> | void;
+    /**
+     * Field key or function to get the current category ID of an item.
+     * (used to set the initial selected category in the category change dialog)
+     * @example "categoryId", "role", or (item) => item.category?.id
+     */
+    categoryFieldKey?: string | ((item: T) => string | undefined);
 }
 /**
  * Fetcher function to retrieve list data.
  */
-type ListFetcher = (query: NgxThinAdminListQuery) => Promise<NgxThinAdminListResponse> | NgxThinAdminListResponse;
+type ListFetcher<T = any> = (query: NgxThinAdminListQuery) => Promise<NgxThinAdminListResponse<T>> | NgxThinAdminListResponse<T>;
 /**
  * Config for category selector
  */
@@ -136,22 +196,22 @@ interface NgxThinAdminCategorySelectorConfig {
      * @param category The category object to be updated.
      * @returns A promise that resolves with the updated category object.
      */
-    updater?: (category: NgxThinAdminCategory) => Promise<NgxThinAdminCategory> | NgxThinAdminCategory;
+    updater?: (category: NgxThinAdminCategory) => Promise<void> | Promise<any> | void;
     /**
      * Optional function to delete a category. If provided, a category deletion option will be displayed in the category selector.
      * @param category The category object to be deleted.
      * @returns A promise that resolves when the category has been deleted.
      */
-    deleter?: (category: NgxThinAdminCategory) => Promise<void> | void;
+    deleter?: (category: NgxThinAdminCategory) => Promise<void> | Promise<any> | void;
 }
 type NgxThinAdminListCreateButtonConfig = {
-    label: string;
+    label?: string;
     click: () => void;
 } | {
-    label: string;
+    label?: string;
     link: string;
 } | {
-    label: string;
+    label?: string;
     routerLink: string;
 };
 interface NgxThinAdminListCsvExportButtonConfig {
@@ -166,9 +226,12 @@ interface NgxThinAdminListQuery {
     categoryId?: string;
     page: number;
     perPage: number;
+    filterColumn?: string;
+    filterValue?: string;
+    filterLabel?: string;
 }
-interface NgxThinAdminListResponse {
-    items: any[];
+interface NgxThinAdminListResponse<T = any> {
+    items: T[];
     totalCount: number;
 }
 interface NgxThinAdminCategory {
@@ -179,9 +242,74 @@ interface NgxThinAdminCategory {
 interface NgxThinAdminCategoryListResponse {
     categories: NgxThinAdminCategory[];
 }
+/**
+ * Config for item deleter
+ * (Can be used in both list and editor components)
+ */
+interface NgxThinAdminItemDeleterConfig {
+    /**
+     * Function to delete an item
+     * @param id ID to be deleted (Value of the field specified by listConfig.idFieldKey or editorConfig.idFieldKey)
+     */
+    deleter: (id: string) => Promise<void> | Promise<any> | void;
+    /**
+     * Navigate to after deletion (used after deletion in editor screen)
+     * @example "/accounts"
+     */
+    afterDeleteNavigateTo?: string;
+}
+
+type NgxThinAdminLocale = 'en' | 'ja';
+type NgxThinAdminI18nKey = 'common.cancel' | 'common.ok' | 'common.save' | 'common.create' | 'common.edit' | 'common.delete' | 'common.back' | 'list.defaultTitle' | 'list.clearFilters' | 'list.searchDefaultPlaceholder' | 'list.searchInCategoryPlaceholder' | 'list.clearSearchKeyword' | 'list.refresh' | 'list.exportAsCsv' | 'list.exportedFileName' | 'list.exportItems' | 'editor.titleForCreate' | 'editor.titleForEdit' | 'editor.idLabel' | 'editor.saveForCreate' | 'editor.saveForEdit' | 'editor.errorInvalidInput' | 'editor.errorNoSaver' | 'editor.successSaved' | 'editor.backToList' | 'category.defaultSingular' | 'category.defaultPlural' | 'category.all' | 'category.editorDialogTitleForCreate' | 'category.editorDialogTitleForEdit' | 'category.deletionDialogTitle' | 'category.deletionDialogMessage' | 'category.errorCouldNotCreate' | 'category.errorFailedUpdate' | 'category.errorFailedDelete' | 'category.errorCouldNotSave' | 'category.successCreated' | 'category.successUpdated' | 'category.successDeleted' | 'item.defaultSingular' | 'item.deletionDialogTitle' | 'item.deletionDialogMessage' | 'item.errorFailedDelete' | 'item.successDeleted' | 'item.changeCategory' | 'item.changeCategoryDialogTitle' | 'item.changeCategoryDialogMessage' | 'item.successCategoryChanged' | 'item.errorFailedCategoryChange' | 'category.unselected' | 'csv.exporting' | 'csv.exportCompleted' | 'csv.exportCompletedWithErrors' | 'csv.errorGenerateFailed';
+type NgxThinAdminI18nParams = Record<string, string | number | undefined>;
+type NgxThinAdminTranslate = (key: NgxThinAdminI18nKey, params?: NgxThinAdminI18nParams) => string;
+interface NgxThinAdminI18nConfig {
+    locale?: NgxThinAdminLocale;
+    messages?: Partial<Record<NgxThinAdminI18nKey, string>>;
+    translate?: NgxThinAdminTranslate;
+}
+declare const NGX_THIN_ADMIN_TRANSLATE: InjectionToken<NgxThinAdminTranslate>;
+declare function provideNgxThinAdminI18n(config?: NgxThinAdminI18nConfig): Provider;
+
+declare class ListCategorySelector {
+    /**
+     * Config for the category selector
+     */
+    config?: NgxThinAdminCategorySelectorConfig;
+    /**
+     * Selected category. This will be updated when the user selects a category from the list.
+     */
+    selectedCategory?: (NgxThinAdminCategory | undefined)[];
+    /**
+     * Event emitted when the selected category changes.
+     */
+    selectedCategoryChange: EventEmitter<(NgxThinAdminCategory | undefined)[]>;
+    /**
+     * Categories to be displayed in the category selector.
+     */
+    categories: NgxThinAdminCategory[];
+    /**
+     * Services
+     */
+    private snackbar;
+    private dialog;
+    private cdr;
+    private translate;
+    t(key: NgxThinAdminI18nKey, params?: Record<string, string | number | undefined>): string;
+    ngOnChanges(changes: SimpleChanges<ListCategorySelector>): void;
+    fetchCategories(): Promise<void>;
+    createCategory(categoryLabel: string): Promise<void>;
+    updateCategory(category: NgxThinAdminCategory): Promise<void>;
+    deleteCategory(category: NgxThinAdminCategory): Promise<void>;
+    openCategoryEditorDialog(editCategory: NgxThinAdminCategory | undefined): Promise<void>;
+    openCategoryDeletionDialog(category: NgxThinAdminCategory): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ListCategorySelector, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ListCategorySelector, "lib-list-category-selector", never, { "config": { "alias": "config"; "required": false; }; "selectedCategory": { "alias": "selectedCategory"; "required": false; }; }, { "selectedCategoryChange": "selectedCategoryChange"; }, never, never, true, never>;
+}
 
 declare class CsvExportService {
     private snackbar;
+    private translate;
     private encoders;
     constructor();
     private loadOptionalEncoders;
@@ -194,24 +322,33 @@ declare class CsvExportService {
     static ɵprov: i0.ɵɵInjectableDeclaration<CsvExportService>;
 }
 
-declare class NgxThinAdminList implements OnChanges, OnInit {
+declare class NgxThinAdminList<T = any> implements OnChanges, OnInit {
     /**
      * Config for list
      */
-    listConfig?: NgxThinAdminListConfig;
+    listConfig?: NgxThinAdminListConfig<T>;
     /**
      * Config for category selector. If provided, a category selector will be displayed in the UI.
      */
     categorySelectorConfig?: NgxThinAdminCategorySelectorConfig;
+    /**
+     * Config for item deleter (If provided, item deletion feature is enabled)
+     * It works by calling openItemDeletionDialog(row) from the click handler of the column definition.
+     */
+    itemDeleterConfig?: NgxThinAdminItemDeleterConfig;
     /**
      * Column schema (extended type of MtxGridColumn)
      * @see https://ng-matero.github.io/extensions/components/grid/api
      */
-    listColumns?: MtxGridColumn[];
+    listColumns?: (NgxThinAdminListColumn<T> | MtxGridColumn)[];
     /**
      * Query (Optional)
      */
     query: NgxThinAdminListQuery;
+    /**
+     * Output query
+     */
+    queryChange: EventEmitter<NgxThinAdminListQuery>;
     /**
      * Fetcher function to retrieve list data.
      * This should be provided as part of listConfig.
@@ -222,7 +359,7 @@ declare class NgxThinAdminList implements OnChanges, OnInit {
      */
     isLoading: boolean;
     gridColumns: MtxGridColumn[];
-    gridData: any[];
+    gridData: T[];
     totalCount: number;
     /**
      * Internal state for category list
@@ -238,27 +375,41 @@ declare class NgxThinAdminList implements OnChanges, OnInit {
      * Template for cells
      */
     cellTplWithLink: TemplateRef<any>;
+    /**
+     * Category Selector
+     */
+    categorySelector?: ListCategorySelector;
     /**
      * Services
      */
     private cdr;
+    private translate;
+    private snackbar;
     csvExportService: CsvExportService;
-    ngOnChanges(changes: SimpleChanges<NgxThinAdminList>): void;
+    private dialog;
+    t(key: NgxThinAdminI18nKey, params?: Record<string, string | number | undefined>): string;
+    ngOnChanges(changes: SimpleChanges<NgxThinAdminList<T>>): void;
+    private buildGridColumns;
     fetchList(): Promise<void>;
     clearFilters(): void;
     onKeywordInput(): void;
     exportAsCsv(encoderKey: 'utf8' | string): Promise<void>;
+    getColumnLabel(columnName: string): string | rxjs.Observable<string>;
+    getColumnValueLabel(columnName: string, value: string): any;
     onPageChange(event: PageEvent): void;
     onSelectedCategoryChange($event: (NgxThinAdminCategory | undefined)[]): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgxThinAdminList, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgxThinAdminList, "ngx-thin-admin-list", never, { "listConfig": { "alias": "listConfig"; "required": false; }; "categorySelectorConfig": { "alias": "categorySelectorConfig"; "required": false; }; "listColumns": { "alias": "listColumns"; "required": false; }; "query": { "alias": "query"; "required": false; }; }, {}, never, never, true, never>;
+    openItemDeletionDialog(item: any): Promise<void>;
+    deleteItem(id: string, label: string): Promise<void>;
+    openItemCategoryChangeDialog(item: any): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxThinAdminList<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxThinAdminList<any>, "ngx-thin-admin-list", never, { "listConfig": { "alias": "listConfig"; "required": false; }; "categorySelectorConfig": { "alias": "categorySelectorConfig"; "required": false; }; "itemDeleterConfig": { "alias": "itemDeleterConfig"; "required": false; }; "listColumns": { "alias": "listColumns"; "required": false; }; "query": { "alias": "query"; "required": false; }; }, { "queryChange": "queryChange"; }, never, never, true, never>;
 }
 
-declare class NgxThinAdminEditor implements OnChanges {
+declare class NgxThinAdminEditor<T = any> implements OnChanges {
     /**
      * Config for editor
      */
-    editorConfig?: NgxThinAdminEditorConfig;
+    editorConfig?: NgxThinAdminEditorConfig<T>;
     /**
      * Fields for formly form
      */
@@ -267,26 +418,56 @@ declare class NgxThinAdminEditor implements OnChanges {
      * Id of the item being edited.
      */
     itemId?: string;
+    /**
+     * Config for item deleter
+     */
+    itemDeleterConfig?: NgxThinAdminItemDeleterConfig;
     /**
      * Internal state for form
      */
     isSaving: boolean;
     isLoading: boolean;
     form: FormGroup<{}>;
-    data: any;
-    formData: any;
+    data: Partial<T>;
+    formData: Partial<T>;
+    /**
+     * For history back
+     */
+    windowHistory: History;
     /**
      * Services
      */
     private snackbar;
     private cdr;
-    ngOnChanges(changes: SimpleChanges<NgxThinAdminEditor>): void;
+    private translate;
+    private dialog;
+    private router;
+    t(key: NgxThinAdminI18nKey, params?: Record<string, string | number | undefined>): string;
+    get editorItemType(): string;
+    ngOnChanges(changes: SimpleChanges<NgxThinAdminEditor<T>>): void;
     overwriteFieldProps(field: NgxThinAdminEditorField): NgxThinAdminEditorField;
     fetchItem(): Promise<void>;
     save(): Promise<void>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgxThinAdminEditor, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgxThinAdminEditor, "ngx-thin-admin-editor", never, { "editorConfig": { "alias": "editorConfig"; "required": false; }; "editorFields": { "alias": "editorFields"; "required": false; }; "itemId": { "alias": "itemId"; "required": false; }; }, {}, never, never, true, never>;
+    openDeletionDialog(): Promise<void>;
+    deleteItem(id: string, label: string): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxThinAdminEditor<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxThinAdminEditor<any>, "ngx-thin-admin-editor", never, { "editorConfig": { "alias": "editorConfig"; "required": false; }; "editorFields": { "alias": "editorFields"; "required": false; }; "itemId": { "alias": "itemId"; "required": false; }; "itemDeleterConfig": { "alias": "itemDeleterConfig"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-export { NgxThinAdminEditor, NgxThinAdminList };
-export type { ListFetcher, NgxThinAdminCategory, NgxThinAdminCategoryListResponse, NgxThinAdminCategorySelectorConfig, NgxThinAdminEditorConfig, NgxThinAdminEditorField, NgxThinAdminFieldConfig, NgxThinAdminFieldProps, NgxThinAdminListColumn, NgxThinAdminListConfig, NgxThinAdminListCreateButtonConfig, NgxThinAdminListCsvExportButtonConfig, NgxThinAdminListQuery, NgxThinAdminListResponse };
+/**
+ * Injection token for providing extra formly config to NgxThinAdminEditor.
+ * Use provideNgxThinAdminFormlyConfig() to register from the consumer app.
+ */
+declare const NGX_THIN_ADMIN_EXTRA_FORMLY_CONFIG: InjectionToken<ConfigOption>;
+/**
+ * Returns a provider that adds custom formly types, wrappers, etc. to NgxThinAdminEditor.
+ *
+ * @example
+ * provideNgxThinAdminFormlyConfig({
+ *   types: [{ name: 'qrcode', component: QrcodeFieldComponent }],
+ * })
+ */
+declare function provideNgxThinAdminFormlyConfig(config: ConfigOption): Provider;
+
+export { NGX_THIN_ADMIN_EXTRA_FORMLY_CONFIG, NGX_THIN_ADMIN_TRANSLATE, NgxThinAdminEditor, NgxThinAdminList, provideNgxThinAdminFormlyConfig, provideNgxThinAdminI18n };
+export type { ListFetcher, NgxThinAdminCategory, NgxThinAdminCategoryListResponse, NgxThinAdminCategorySelectorConfig, NgxThinAdminEditorBackButtonConfig, NgxThinAdminEditorConfig, NgxThinAdminEditorField, NgxThinAdminFieldConfig, NgxThinAdminFieldProps, NgxThinAdminI18nConfig, NgxThinAdminI18nKey, NgxThinAdminI18nParams, NgxThinAdminItemDeleterConfig, NgxThinAdminListColumn, NgxThinAdminListConfig, NgxThinAdminListCreateButtonConfig, NgxThinAdminListCsvExportButtonConfig, NgxThinAdminListQuery, NgxThinAdminListResponse, NgxThinAdminLocale, NgxThinAdminTranslate };