@xxmachina/components 0.0.0-PLACEHOLDER

package/fesm2022/xxmachina-components-pages-command.mjs

@@ -0,0 +1,482 @@
+import { __decorate, __metadata } from 'tslib';
+import * as i0 from '@angular/core';
+import { inject, effect, computed, untracked, input, Directive, Component } from '@angular/core';
+import { FormGroup, FormArray, FormControl } from '@angular/forms';
+import { RouterOutletFrame } from '@ng-atomic/components/frames/router-outlet';
+import { CommandService } from '@xxmachina/components/services/command';
+import { InjectableComponent, applyToInput, provideEffect, _computed, TokenizedType, NgAtomicComponent, Effect } from '@ng-atomic/core';
+import { ActivatedRoute } from '@angular/router';
+import { FormTemplateStore, FormTemplate } from '@ng-atomic/components/templates/form';
+import { injectRouteParam, injectRouteData, injectRouteParam$, injectUnflattenRouteParam$, injectRouteData$, injectRouteParamMap, getValue$, injectUnflattenRouteParam, getInvalid$, injectRouteSkip } from '@ng-atomic/common/utils';
+import { combineLatest, filter, map, tap, shareReplay, of } from 'rxjs';
+import { AppService } from '@ng-atomic/common/services/app';
+import { makeDI, injectNavStartActionsV2 } from '@ng-atomic/common/services/ui';
+import { Query, QueryHelper, EndpointHelper } from '@xxmachina/common/domain/models';
+import { pick, merge } from 'lodash-es';
+import { injectOne$ } from '@ng-atomic/common/stores/entities';
+import { MachinaDevService } from '@xxmachina/components/services/debug';
+import { derivedAsync } from 'ngxtension/derived-async';
+import { CommandFeature } from '@xxmachina/components/features/command';
+import { TabsFrame } from '@ng-atomic/components/frames/tabs';
+import { QueryFormGroup } from '@xxmachina/components/groups/query-form';
+import { CommandFormGroup } from '@xxmachina/components/groups/command-form';
+import { QueryFeature, QueryGraphqlSchemaFeature } from '@xxmachina/components/features/query';
+import { CloudStorageService } from '@nx-ddd/common/infrastructure/externals/cloud-storage';
+import { injectErrorMessageResolver } from '@ng-atomic/common/pipes/error';
+
+var CommandPageStore_1;
+var ActionId;
+(function (ActionId) {
+    ActionId["EXECUTE_COMMAND"] = "execute-command";
+    ActionId["FILE_SELECTED"] = "file-selected";
+})(ActionId || (ActionId = {}));
+function buildFormData(form, formData = new FormData(), parentKey = '') {
+    Object.keys(form.controls).forEach(key => {
+        const control = form.get(key);
+        const formKey = parentKey ? `${parentKey}.${key}` : key;
+        if (control instanceof FormGroup || control instanceof FormArray) {
+            // 子のFormGroupやFormArrayを再帰的に処理
+            buildFormData(control, formData, formKey);
+        }
+        else if (control instanceof FormControl) {
+            // フォームの値を追加
+            const value = control.value;
+            if (value !== null && value !== undefined) {
+                formData.append(formKey, value);
+            }
+        }
+    });
+    return formData;
+}
+function buildData(form, contentType) {
+    if (contentType === 'multipart/form-data') {
+        return buildFormData(form);
+    }
+    else {
+        return form.getRawValue();
+    }
+}
+function buildActions(hasPermission, invalid) {
+    return hasPermission
+        ? [{ id: ActionId.EXECUTE_COMMAND, name: '実行', disabled: invalid }]
+        : [{ id: ActionId.EXECUTE_COMMAND, name: '実行権限がありません', disabled: true }];
+}
+let CommandPageStore = class CommandPageStore extends InjectableComponent {
+    static { CommandPageStore_1 = this; }
+    static { this.ActionId = ActionId; }
+    static { this.DI = makeDI(CommandPageStore_1, () => {
+        const dev = inject(MachinaDevService);
+        return () => ({
+            style: {
+                width: 'var(--page-width-lv1)',
+            },
+            baseUrls: [],
+            command: {
+                id: '1',
+                webApiRequest: {
+                    serverUrl: null,
+                    apiJsonUrl: null,
+                    path: '/users',
+                    method: 'GET',
+                    bodySchema: null,
+                },
+            },
+            navEndActions: [],
+            additionalFormFieldMap: (dev.isDevMode() ? {} : {
+                'id': { type: 'hidden' },
+                '__typename': { type: 'hidden' },
+                'kind': { type: 'hidden' },
+            }),
+        });
+    }, ['@xxmachina/components', 'pages', 'command']); }
+    static { this.Config = CommandPageStore_1.DI.Config; }
+    static { this.Initializer = CommandPageStore_1.DI.Initializer; }
+    static provideDefault() {
+        return [
+            CommandPageStore_1.DI.provideConfig(),
+            CommandPageStore_1.provideDefaultInitializer(),
+            CommandPageStore_1.provideDefaultEffects(),
+        ];
+    }
+    static provideCustom() {
+        return [
+            CommandPageStore_1.provideDefault(),
+            CommandPageStore_1.provideCommandIdFromRouteDataInitializer(),
+            CommandPageStore_1.provideSetupInitializeQueryInitializer(),
+        ];
+    }
+    static provideDefaultV2() {
+        return [
+            CommandPageStore_1.Config.provide(),
+            CommandPageStore_1.provideDefaultInitializer(),
+            CommandPageStore_1.provideDefaultEffects(),
+            CommandPageStore_1.provideCommandIdFromRouteDataInitializer(),
+            CommandPageStore_1.provideSetupInitializeQueryInitializer(),
+            CommandPageStore_1.provideInitialFormValueFromQueryResult(),
+            CommandPageStore_1.provideQueryFromRouteData(),
+        ];
+    }
+    static provideDefaultInitializer() {
+        return [
+            CommandPageStore_1.providePatchFormFromRouteParamInitializer(),
+            CommandPageStore_1.providePatchCommandFormValueFromCommandInitializer(),
+            CommandPageStore_1.provideInitialFormValueFromQueryResult()
+        ];
+    }
+    static provideDefaultEffects() {
+        return [
+            CommandPageStore_1.provideExecuteCommandEffect(),
+            CommandPageStore_1.provideBackEffect(),
+            QueryFeature.provideDefaultEffects(),
+        ];
+    }
+    static provideCommandFromRouteParamInitializer(paramName = 'commandId') {
+        return CommandPageStore_1.Initializer.provide((store) => {
+            const commandId = injectRouteParam(paramName);
+            const service = inject(CommandService);
+            effect(() => applyToInput(store, 'command', service.getCommand(commandId())));
+        });
+    }
+    static provideCommandIdFromRouteDataInitializer() {
+        return CommandPageStore_1.Initializer.provide((store) => {
+            const commandId = injectRouteData('commandId');
+            const service = inject(CommandService);
+            effect(() => applyToInput(store, 'command', service.getCommand(commandId())));
+        });
+    }
+    static providePatchFormFromRouteParamInitializer() {
+        return [
+            CommandPageStore_1.Initializer.provide(store => {
+                effect(() => store.form().patchValue(store.data()));
+            }),
+        ];
+    }
+    static providePatchCommandFormValueFromCommandInitializer() {
+        return [
+            CommandPageStore_1.Initializer.provide(store => {
+                effect(() => {
+                    if (!store.command())
+                        return;
+                    store.feature.commandForm().patchValue({ ...store.command() });
+                });
+            })
+        ];
+    }
+    static provideQueryIdFromRouteParam(key = 'queryId') {
+        return CommandPageStore_1.Initializer.provide((store) => {
+            const queryId$ = injectRouteParam$(key);
+            const params$ = injectUnflattenRouteParam$('data');
+            const query$ = injectOne$(Query, { id: queryId$ });
+            const setupQuery = derivedAsync(() => combineLatest({
+                query: query$,
+                params: params$,
+            }).pipe(filter(({ query, params }) => !!query && !!params), map(({ query, params }) => QueryHelper.setup(query, params)), tap((query) => console.debug('[CommandPage] query:', query)), shareReplay(1)));
+            effect(() => {
+                console.debug('[CommandPage] setupQuery:', setupQuery());
+                store.queryFeature.form.patchValue(setupQuery());
+            });
+        });
+    }
+    static provideQueryFromRouteData(key = 'query') {
+        return CommandPageStore_1.Initializer.provide((store) => {
+            const params$ = injectUnflattenRouteParam$('data');
+            const query$ = injectRouteData$(key);
+            const setupQuery = derivedAsync(() => combineLatest({
+                query: query$,
+                params: params$,
+            }).pipe(filter(({ query, params }) => !!query), map(({ query, params }) => QueryHelper.setup(query, params)), shareReplay(1)));
+            effect(() => { store.queryFeature.form.patchValue(setupQuery()); });
+        });
+    }
+    static provideRouteParamsToDataInitializer(projector) {
+        return CommandPageStore_1.Initializer.provide((store) => {
+            const route = inject(ActivatedRoute);
+            const data = derivedAsync(() => route.params.pipe(map(params => projector(params))));
+            effect(() => applyToInput(store, 'data', data()));
+        });
+    }
+    static provideRouteParamMapToDataInitializer(projector) {
+        return CommandPageStore_1.Initializer.provide((store) => {
+            const paramMap = injectRouteParamMap({ merge: true });
+            const data = computed(() => projector(paramMap()));
+            effect(() => applyToInput(store, 'data', data()));
+        });
+    }
+    static provideSetupInitializeQueryInitializer() {
+        return CommandPageStore_1.Initializer.provide((store) => {
+            const initializeQuery = derivedAsync(() => combineLatest({
+                initializeQuery: of(store.initializeQuery()),
+                data: of(store.data())
+            }).pipe(filter(({ initializeQuery, data }) => !!initializeQuery && !!data), map(({ initializeQuery, data }) => QueryHelper.setup(initializeQuery, data)), filter((initializeQuery) => !!initializeQuery), shareReplay(1)));
+            effect(() => store.queryFeature.form.patchValue(initializeQuery()));
+        });
+    }
+    static provideInitialFormValueFromQueryResult() {
+        return CommandPageStore_1.Initializer.provide((store) => {
+            effect(() => store.form().patchValue(store.queryFeature.result()));
+            store.queryFeature.refresh();
+        });
+    }
+    static provideExecuteCommandEffect() {
+        return provideEffect(ActionId.EXECUTE_COMMAND, () => {
+            const store = inject(CommandPageStore_1);
+            const app = inject(AppService);
+            const paramKeys = computed(() => EndpointHelper.extract(store.feature.path()));
+            const resolvedParams = computed(() => pick(store.data(), paramKeys()));
+            return () => {
+                const resolvedEndpoint = EndpointHelper.resolve(store.feature.path(), resolvedParams());
+                const data = buildData(store.form(), store.command()?.webApiRequest?.contentType);
+                const command = merge(store.command(), store.feature.commandForm().getRawValue(), { webApiRequest: { path: resolvedEndpoint } });
+                app.loading.await(() => {
+                    return store.feature.execute(command, data).then(() => {
+                        app.snackBar.open('成功しました。');
+                        // history.back();
+                    }).catch((error) => {
+                        console.error(error);
+                        app.snackBar.openError(error);
+                    });
+                });
+            };
+        });
+    }
+    static provideBackEffect() {
+        return provideEffect(FormTemplateStore.ActionId.BACK, () => {
+            return () => history.back();
+        });
+    }
+    static provideFileSelectedEffect() {
+        return provideEffect(CommandPageStore_1.ActionId.FILE_SELECTED, () => {
+            const store = inject(CommandPageStore_1);
+            return (payload) => {
+                store.form().patchValue({ file: payload.files?.[0] });
+            };
+        });
+    }
+    static provideDebugFormInitializer() {
+        return CommandPageStore_1.Initializer.provide(() => {
+            const store = inject(CommandPageStore_1);
+            // FormGroupを再帰的に調べる関数（invalidなコントロールのみ）
+            const getInvalidControls = (formGroup, path = '') => {
+                let invalidControls = [];
+                Object.keys(formGroup.controls).forEach(key => {
+                    const control = formGroup.controls[key];
+                    const currentPath = path ? `${path}.${key}` : key;
+                    // invalidなコントロールを記録
+                    if (control.invalid) {
+                        invalidControls.push({
+                            path: currentPath,
+                            errors: control.errors,
+                            value: control.value,
+                            status: control.status,
+                            valid: control.valid,
+                            invalid: control.invalid,
+                            dirty: control.dirty,
+                            touched: control.touched
+                        });
+                    }
+                    // FormGroupの場合は再帰的に調べる
+                    if (control.controls) {
+                        invalidControls = invalidControls.concat(getInvalidControls(control, currentPath));
+                    }
+                });
+                return invalidControls;
+            };
+            const formValue_ = derivedAsync(() => getValue$(store.form()));
+            effect(() => {
+                const formValue = formValue_();
+                const form = untracked(() => store.form());
+                console.log('[CommandPage] Form value changed:', formValue);
+                console.log('[CommandPage] CommandForm valid:', form?.valid);
+                console.log('[CommandPage] CommandForm status:', form?.status);
+                if (form) {
+                    const invalidControls = getInvalidControls(form);
+                    const invalidPaths = invalidControls.map(control => control.path);
+                    console.log(`[CommandPage] Found ${invalidControls.length} INVALID controls:`);
+                    console.log('[CommandPage] INVALID PATHS:', invalidPaths);
+                }
+            });
+        });
+    }
+    static provideSelectedFileUploadEffect(callbackFactory, { validator = () => null, getPath, }) {
+        return provideEffect(CommandPageStore_1.ActionId.FILE_SELECTED, () => {
+            const storage = inject(CloudStorageService);
+            const app = inject(AppService);
+            const callback = callbackFactory();
+            const errorMessageResolver = injectErrorMessageResolver();
+            return (payload) => {
+                const file = payload.files?.[0];
+                const errors = validator(file);
+                if (errors && Object.keys(errors).length > 0) {
+                    app.snackBar.open(errorMessageResolver(errors));
+                    return;
+                }
+                return app.loading.await(() => {
+                    const path = getPath();
+                    return storage.upload(path, file).then(() => {
+                        app.snackBar.open('ファイルをアップロードしました');
+                        return storage.getDownloadUrl(path).then((imageUrl) => {
+                            return callback({ file, path, url: imageUrl });
+                        });
+                    }).catch((error) => {
+                        console.error(error);
+                        app.snackBar.open('ファイルのアップロードに失敗しました');
+                    });
+                });
+            };
+        });
+    }
+    #navStartActions;
+    constructor() {
+        super();
+        this.feature = inject(CommandFeature);
+        this.config = CommandPageStore_1.Config.inject();
+        this.queryFeature = inject(QueryFeature);
+        this.style = input(_computed(() => this.config().style));
+        this.#navStartActions = injectNavStartActionsV2();
+        this.navStartActions = input(_computed(() => this.#navStartActions()));
+        this.navEndActions = input(_computed(() => this.config().navEndActions));
+        this.command = input(_computed(() => this.config().command));
+        this.form = input(_computed(() => this.feature.form()));
+        this.extractedFormFieldMap = input(_computed(() => this.feature.extractedFormFieldMap()));
+        this.additionalFormFieldMap = input(_computed(() => this.config().additionalFormFieldMap));
+        this.formFieldMap = input(_computed(() => ({
+            ...this.extractedFormFieldMap(),
+            ...this.additionalFormFieldMap()
+        })));
+        this.formFieldKeys = input(_computed(() => []));
+        this.formFlatExcludes = input(_computed(() => []));
+        this._initializeQuery = injectRouteData('query');
+        this.initializeQuery = input(_computed(() => this._initializeQuery()));
+        this._data = injectUnflattenRouteParam('data');
+        this.data = input(_computed(() => this._data()));
+        this.formInvalid = derivedAsync(() => getInvalid$(this.form()));
+        this.title = input(_computed(() => this.feature.title()));
+        this.actions = derivedAsync(() => buildActions(this.feature.hasPermission(this.command()), this.formInvalid()));
+        this.skip = injectRouteSkip();
+        CommandPageStore_1.Initializer.initializeStore(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: CommandPageStore, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.5", type: CommandPageStore, isStandalone: true, inputs: { style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, navStartActions: { classPropertyName: "navStartActions", publicName: "navStartActions", isSignal: true, isRequired: false, transformFunction: null }, navEndActions: { classPropertyName: "navEndActions", publicName: "navEndActions", isSignal: true, isRequired: false, transformFunction: null }, command: { classPropertyName: "command", publicName: "command", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, extractedFormFieldMap: { classPropertyName: "extractedFormFieldMap", publicName: "extractedFormFieldMap", isSignal: true, isRequired: false, transformFunction: null }, additionalFormFieldMap: { classPropertyName: "additionalFormFieldMap", publicName: "additionalFormFieldMap", isSignal: true, isRequired: false, transformFunction: null }, formFieldMap: { classPropertyName: "formFieldMap", publicName: "formFieldMap", isSignal: true, isRequired: false, transformFunction: null }, formFieldKeys: { classPropertyName: "formFieldKeys", publicName: "formFieldKeys", isSignal: true, isRequired: false, transformFunction: null }, formFlatExcludes: { classPropertyName: "formFlatExcludes", publicName: "formFlatExcludes", isSignal: true, isRequired: false, transformFunction: null }, initializeQuery: { classPropertyName: "initializeQuery", publicName: "initializeQuery", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+};
+CommandPageStore = CommandPageStore_1 = __decorate([
+    TokenizedType(),
+    __metadata("design:paramtypes", [])
+], CommandPageStore);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: CommandPageStore, decorators: [{
+            type: Directive,
+            args: [{ standalone: true }]
+        }], ctorParameters: () => [] });
+class CommandPage extends NgAtomicComponent {
+    constructor() {
+        super(...arguments);
+        this.store = inject(CommandPageStore);
+        this.route = inject(ActivatedRoute);
+        this.app = inject(AppService);
+        this.parentRouterOutletFrame = inject(RouterOutletFrame, { optional: true });
+    }
+    onFileSelected(payload) {
+        this.dispatch({ id: ActionId.FILE_SELECTED, payload });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: CommandPage, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: CommandPage, isStandalone: true, selector: "pages-command", providers: [
+            CommandFeature,
+            QueryFeature,
+            QueryGraphqlSchemaFeature
+        ], usesInheritance: true, hostDirectives: [{ directive: CommandPageStore, inputs: ["style", "style", "navEndActions", "navEndActions", "command", "command", "form", "form", "additionalFormFieldMap", "additionalFormFieldMap", "formFieldMap", "formFieldMap", "formFlatExcludes", "formFlatExcludes", "initializeQuery", "initializeQuery", "data", "data"] }], ngImport: i0, template: `
+  <frames-router-outlet [skip]="store.skip()" (action)="dispatch($event)">
+    <templates-form
+      [form]="store.form()"
+      [style]="store.style()"
+      [fieldMap]="store.formFieldMap()"
+      [fieldKeys]="store.formFieldKeys()"
+      [formFlatExcludes]="store.formFlatExcludes()"
+      [title]="store.title()"
+      [navStartActions]="store.navStartActions()"
+      [navEndActions]="store.navEndActions()"
+      [actions]="store.actions()"
+      (action)="dispatch($event)"
+    >
+      <frames-tabs [labels]="['Command', 'InitializeQuery']" dashboard>
+        <ng-template #tab>
+          <groups-command-form (action)="dispatch($event)"/>
+        </ng-template>
+        <ng-template #tab>
+          <groups-query-form
+            [form]="store.queryFeature.form"
+            (action)="dispatch($event)"
+          />
+        </ng-template>
+      </frames-tabs> 
+    </templates-form>
+  </frames-router-outlet>
+  `, isInline: true, styles: [":host{width:100%;height:100%;display:block;--page-width-lv1-SCOPED-IN-command-fWwl: var(--page-width-lv1)}:host .template{--first-content-height: 0px;width:var(--page-width-lv1-SCOPED-IN-command-fWwl)}:host .template div[dashboard]{padding:0;box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: RouterOutletFrame, selector: "frames-router-outlet", outputs: ["events"] }, { kind: "component", type: FormTemplate, selector: "templates-form" }, { kind: "component", type: TabsFrame, selector: "frames-tabs", inputs: ["labels"], outputs: ["selectedTabIndexChange"] }, { kind: "component", type: CommandFormGroup, selector: "groups-command-form", inputs: ["apiJsonUrls"] }, { kind: "component", type: QueryFormGroup, selector: "groups-query-form", inputs: ["form", "keyActions"] }] }); }
+}
+__decorate([
+    Effect(FormTemplateStore.ActionId.FILE_SELECTED),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], CommandPage.prototype, "onFileSelected", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: CommandPage, decorators: [{
+            type: Component,
+            args: [{ selector: 'pages-command', imports: [
+                        RouterOutletFrame,
+                        FormTemplate,
+                        TabsFrame,
+                        CommandFormGroup,
+                        QueryFormGroup
+                    ], providers: [
+                        CommandFeature,
+                        QueryFeature,
+                        QueryGraphqlSchemaFeature
+                    ], template: `
+  <frames-router-outlet [skip]="store.skip()" (action)="dispatch($event)">
+    <templates-form
+      [form]="store.form()"
+      [style]="store.style()"
+      [fieldMap]="store.formFieldMap()"
+      [fieldKeys]="store.formFieldKeys()"
+      [formFlatExcludes]="store.formFlatExcludes()"
+      [title]="store.title()"
+      [navStartActions]="store.navStartActions()"
+      [navEndActions]="store.navEndActions()"
+      [actions]="store.actions()"
+      (action)="dispatch($event)"
+    >
+      <frames-tabs [labels]="['Command', 'InitializeQuery']" dashboard>
+        <ng-template #tab>
+          <groups-command-form (action)="dispatch($event)"/>
+        </ng-template>
+        <ng-template #tab>
+          <groups-query-form
+            [form]="store.queryFeature.form"
+            (action)="dispatch($event)"
+          />
+        </ng-template>
+      </frames-tabs> 
+    </templates-form>
+  </frames-router-outlet>
+  `, hostDirectives: [
+                        {
+                            directive: CommandPageStore,
+                            inputs: [
+                                'style',
+                                'navEndActions',
+                                'command',
+                                'form',
+                                'additionalFormFieldMap',
+                                'formFieldMap',
+                                'formFlatExcludes',
+                                'initializeQuery',
+                                'data',
+                            ]
+                        },
+                    ], styles: [":host{width:100%;height:100%;display:block;--page-width-lv1-SCOPED-IN-command-fWwl: var(--page-width-lv1)}:host .template{--first-content-height: 0px;width:var(--page-width-lv1-SCOPED-IN-command-fWwl)}:host .template div[dashboard]{padding:0;box-sizing:border-box}\n"] }]
+        }], propDecorators: { onFileSelected: [] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CommandPage, CommandPageStore, buildActions };
+//# sourceMappingURL=xxmachina-components-pages-command.mjs.map