@nu-art/thunderstorm-frontend 0.400.5

package/_ats/ATS_ActionProcessor/ATS_ActionProcessor.d.ts

@@ -0,0 +1,17 @@
+import './ATS_ActionProcessor.scss';
+import { ActionMetaData } from '@nu-art/thunderstorm-shared/action-processor/index';
+import { ComponentAsync } from '../../core/ComponentAsync.js';
+import { AppToolsScreen } from '../../components/TS_AppTools/index.js';
+type State = {
+    actions: ActionMetaData[];
+    actionsInProgress: string[];
+};
+export declare class ATS_ActionProcessor extends ComponentAsync<{}, State> {
+    static screen: AppToolsScreen;
+    protected deriveStateFromProps(nextProps: {}): Promise<State>;
+    private onButtonClick;
+    private renderButtons;
+    private renderButtonGroups;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/_ats/ATS_ActionProcessor/ATS_ActionProcessor.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './ATS_ActionProcessor.scss';
+import { _keys } from '@nu-art/ts-common';
+import { Dialog_ActionProcessorConfirmation } from '../dialogs/index.js';
+import { ComponentAsync } from '../../core/ComponentAsync.js';
+import { ATS_Backend, TS_AppTools } from '../../components/TS_AppTools/index.js';
+import { ModuleFE_ActionProcessor } from '../../modules/action-processor/ModuleFE_ActionProcessor.js';
+import { genericNotificationAction } from '../../components/TS_Notifications/index.js';
+import { LL_H_C, LL_V_L } from '../../components/Layouts/index.js';
+import { Button } from '../../components/Button/Button.js';
+export class ATS_ActionProcessor extends ComponentAsync {
+    static screen = { name: 'Refactoring Actions', key: 'refactoring-actions', renderer: this, group: ATS_Backend };
+    // ######################### Life Cycle #########################
+    async deriveStateFromProps(nextProps) {
+        const state = this.state ? { ...this.state } : {};
+        state.actions = await ModuleFE_ActionProcessor.vv1.list({}).executeSync();
+        state.actionsInProgress ??= [];
+        return state;
+    }
+    // ######################### Logic #########################
+    onButtonClick = async (action) => {
+        return Dialog_ActionProcessorConfirmation.show(action, async () => {
+            await genericNotificationAction(async () => {
+                this.setState({ actionsInProgress: [...this.state.actionsInProgress, action.key] });
+                await ModuleFE_ActionProcessor.vv1.execute({ key: action.key }).executeSync();
+            }, { inProgress: `Executing ${action.key}`, success: `${action.key} - Success`, failed: `${action.key} - Failure` });
+            this.setState({ actionsInProgress: this.state.actionsInProgress.filter(i => i !== action.key) });
+        });
+    };
+    // ######################### Render #########################
+    renderButtons(actionGroup) {
+        return _jsx(LL_H_C, { className: 'action-group__buttons', children: actionGroup.map(action => {
+                return _jsx(Button, { onClick: () => this.onButtonClick(action), disabled: this.state.actionsInProgress.includes(action.key), children: action.key.replace(/-/g, ' ') }, action.key);
+            }) });
+    }
+    renderButtonGroups() {
+        const groups = this.state.actions?.reduce((acc, curr) => {
+            if (!acc[curr.group])
+                acc[curr.group] = [];
+            acc[curr.group].push(curr);
+            return acc;
+        }, {});
+        if (!groups)
+            return '';
+        return _jsx(LL_V_L, { className: 'action-groups', children: _keys(groups).map(key => {
+                return _jsxs(LL_V_L, { className: 'action-group', children: [_jsx("div", { className: 'action-group__title', children: key }), this.renderButtons(groups[key])] }, key);
+            }) });
+    }
+    render() {
+        return _jsxs("div", { className: 'refactoring-actions-page', children: [TS_AppTools.renderPageHeader('Refactoring Actions'), this.renderButtonGroups()] });
+    }
+}

package/_ats/ATS_ActionProcessor/ATS_ActionProcessor.scss

@@ -0,0 +1,43 @@
+@use '@nu-art/ts-styles' as styles;
+
+.refactoring-actions-page {
+  width: 100%;
+  height: 100%;
+
+  .action-groups {
+    height: calc(100% - 56px);
+    width: 100%;
+    gap: 16px;
+    padding: 0 16px;
+    @include styles.customScrollbar('vertical', true);
+
+    .action-group {
+      width: 100%;
+      gap: 8px;
+
+      .action-group__title {
+        width: 100%;
+        font: {
+          size: 20px;
+          weight: bold;
+        }
+      }
+
+      .action-group__buttons {
+        flex-wrap: wrap;
+        align-items: stretch;
+        width: 100%;
+        gap: 8px;
+
+        .ts-busy-button {
+          margin: 0;
+          padding: 8px;
+          border: 2px solid white;
+          font-size: 16px;
+          max-width: 200px;
+          white-space: pre-wrap;
+        }
+      }
+    }
+  }
+}

package/_ats/ATS_AppConfigEditor/ATS_AppConfigEditor.d.ts

@@ -0,0 +1,25 @@
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { AppToolsScreen } from '../../components/TS_AppTools/index.js';
+import './ATS_AppConfigEditor.scss';
+import { DB_AppConfig } from '@nu-art/thunderstorm-shared';
+type Props = {
+    appConfigFilter?: (appConfig: DB_AppConfig) => boolean;
+};
+type State = {
+    configs: DB_AppConfig[];
+    selectedKey?: string;
+    dataString?: string;
+};
+export declare class ATS_AppConfigEditor extends ComponentSync<Props, State> {
+    static Screen: (props: Props) => AppToolsScreen;
+    protected deriveStateFromProps(nextProps: Props, state: State): State;
+    private getConfigKey;
+    private resolveDataString;
+    private selectConfig;
+    private saveData;
+    render(): import("react/jsx-runtime").JSX.Element;
+    private render_AppConfigList;
+    private render_Editor;
+    private render_Editor_DataEditor;
+}
+export {};

package/_ats/ATS_AppConfigEditor/ATS_AppConfigEditor.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { LL_H_C, LL_V_L } from '../../components/Layouts/index.js';
+import { TS_AppTools } from '../../components/TS_AppTools/index.js';
+import { __stringify, exists, sortArray } from '@nu-art/ts-common';
+import { _className } from '../../utils/tools.js';
+import './ATS_AppConfigEditor.scss';
+import { TS_JSONViewer } from '../../components/TS_JSONViewer/TS_JSONViewer.js';
+import { TS_TextArea } from '../../components/TS_Input/index.js';
+import { Button } from '../../components/Button/Button.js';
+import { AppConfigKey_FE, ModuleFE_AppConfig } from '../../index.js';
+export class ATS_AppConfigEditor extends ComponentSync {
+    //######################### Static #########################
+    static Screen = (props) => ({
+        key: 'app-config-editor',
+        renderer: () => _jsx(ATS_AppConfigEditor, { ...props }),
+        name: 'App Config Editor',
+        group: 'Editors',
+        modulesToAwait: [ModuleFE_AppConfig],
+    });
+    //######################### Life Cycle #########################
+    deriveStateFromProps(nextProps, state) {
+        const allConfigs = !!nextProps.appConfigFilter
+            ? ModuleFE_AppConfig.cache.filter(nextProps.appConfigFilter)
+            : ModuleFE_AppConfig.cache.allMutable();
+        state.configs ??= sortArray(allConfigs, config => config.key);
+        if (!state.selectedKey && state.configs.length) {
+            const configKey = new AppConfigKey_FE(state.configs[0].key);
+            state.selectedKey ??= configKey.key;
+            state.dataString = this.resolveDataString(configKey.get());
+        }
+        return state;
+    }
+    //######################### Logic #########################
+    getConfigKey(key) {
+        if (!key)
+            return;
+        return new AppConfigKey_FE(key);
+    }
+    resolveDataString(data) {
+        return __stringify({ data: data }, true);
+    }
+    selectConfig = (config) => {
+        const configKey = this.getConfigKey(config.key);
+        const dataString = this.resolveDataString(config.data);
+        this.setState({ selectedKey: configKey?.key, dataString });
+    };
+    saveData = async (data) => {
+        const selectedKey = this.state.selectedKey;
+        if (!selectedKey)
+            return;
+        const configKey = new AppConfigKey_FE(selectedKey);
+        await configKey.set(data.data);
+    };
+    //######################### Render #########################
+    render() {
+        return _jsxs(LL_V_L, { id: 'ats__app-config-editor', children: [TS_AppTools.renderPageHeader('App Config Editor'), _jsxs(LL_H_C, { className: 'app-config-editor__main', children: [this.render_AppConfigList(), this.render_Editor()] })] });
+    }
+    render_AppConfigList = () => {
+        const selectedKey = this.state.selectedKey;
+        return _jsx(LL_V_L, { className: 'app-config-editor__config-list', children: this.state.configs.map(config => {
+                const className = _className('app-config-editor__config-list__config', config.key === selectedKey && 'selected');
+                return _jsx("div", { className: className, onClick: () => this.selectConfig(config), children: config.key }, config._id);
+            }) });
+    };
+    //######################### Render - Editor #########################
+    render_Editor = () => {
+        const selectedKey = this.state.selectedKey;
+        const config = this.state.configs.find(config => config.key === selectedKey);
+        if (!config)
+            return;
+        return _jsxs(LL_V_L, { className: 'app-config-editor__editor', children: [_jsx("div", { className: 'app-config-editor__editor__title', children: config.key }), _jsxs(LL_H_C, { className: 'app-config-editor__editor__views', children: [_jsx(TS_JSONViewer, { item: config }), this.render_Editor_DataEditor()] })] });
+    };
+    render_Editor_DataEditor = () => {
+        const dataString = this.state.dataString;
+        let dataObject = undefined;
+        let error = undefined;
+        if (!dataString)
+            return;
+        try {
+            dataObject = JSON.parse(dataString);
+        }
+        catch (e) {
+            error = e;
+        }
+        return _jsxs(LL_V_L, { className: 'app-config-editor__editors', children: [_jsx(TS_TextArea, { type: 'text', value: dataString, onChange: value => this.setState({ dataString: value }) }), exists(dataObject) && _jsx(TS_JSONViewer, { item: dataObject }), exists(error) && _jsx("p", { className: 'app-config-editor__error', children: error.message }), _jsx(Button, { disabled: exists(error), onClick: () => this.saveData(dataObject), children: "Save Data" })] });
+    };
+}

package/_ats/ATS_AppConfigEditor/ATS_AppConfigEditor.scss

@@ -0,0 +1,117 @@
+@use '@nu-art/ts-styles' as styles;
+
+#ats__app-config-editor {
+  width: 100%;
+  height: 100%;
+
+  .app-tools-page__page__header {
+    margin: 0;
+    padding: 0 20px;
+    height: 50px;
+    width: 100%;
+    line-height: 50px;
+    flex-shrink: 0;
+  }
+
+  .app-config-editor__main {
+    width: 100%;
+    height: 0;
+    flex-grow: 1;
+
+    .app-config-editor__config-list {
+      height: 100%;
+      width: 20%;
+      border-right: 2px solid black;
+      overflow-y: overlay;
+
+      .app-config-editor__config-list__config {
+        padding: 0 20px;
+        width: 100%;
+        height: 30px;
+        line-height: 30px;
+        flex-shrink: 0;
+        cursor: pointer;
+
+        @include styles.text-ellipsis;
+
+        &:not(:last-child) {
+          border-bottom: 1px solid black;
+        }
+
+        &.selected {
+          background: styles.gray(3);
+          color: white;
+        }
+      }
+    }
+
+    .app-config-editor__editor {
+      width: 80%;
+      height: 100%;
+
+      .app-config-editor__editor__title {
+        height: 50px;
+        width: 100%;
+        line-height: 50px;
+        flex-shrink: 0;
+        border-bottom: 1px solid black;
+        padding: 0 20px;
+        font: {
+          size: 20px;
+          weight: bold;
+        }
+      }
+
+      .app-config-editor__editor__views {
+        padding: 20px;
+        height: 0;
+        flex-grow: 1;
+        width: 100%;
+        gap: 20px;
+
+        .ts-json-viewer {
+          width: 0;
+          flex-grow: 1;
+        }
+
+        .app-config-editor__editors {
+          height: 100%;
+          width: 0;
+          flex-grow: 1;
+          gap: 20px;
+
+          .ts-textarea {
+            height: 0;
+            width: 100%;
+            flex: 1;
+            resize: none;
+          }
+
+          .ts-json-viewer {
+            height: 0;
+            width: 100%;
+            flex: 1;
+          }
+
+          .app-config-editor__error {
+            height: 0;
+            width: 100%;
+            flex: 1;
+            background: white;
+            border: 2px solid black;
+            border-radius: 10px;
+            margin: 0;
+            padding: 10px;
+          }
+
+          .ts-busy-button {
+            height: 40px;
+            flex-shrink: 0;
+            width: 100%;
+            margin: 0;
+          }
+        }
+      }
+    }
+  }
+}

package/_ats/ATS_CollectionUpgrades/ATS_CollectionUpgrades.d.ts

@@ -0,0 +1,17 @@
+import './ATS_CollectionUpgrades.scss';
+import { AppToolsScreen } from '../../components/TS_AppTools/index.js';
+import { ModuleFE_BaseApi } from '../../modules/db-api-gen/ModuleFE_BaseApi.js';
+import { ModuleFE_BaseDB } from '../../modules/db-api-gen/ModuleFE_BaseDB.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+type State = {
+    upgradableModules: ModuleFE_BaseApi<any, any>[];
+};
+export declare class ATS_CollectionUpgrades extends ComponentSync<{}, State> {
+    static screen: AppToolsScreen;
+    protected deriveStateFromProps(nextProps: {}, state: State): State;
+    __onSyncStatusChanged(module: ModuleFE_BaseDB<any, any>): void;
+    private upgradeCollection;
+    private upgradeAll;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/_ats/ATS_CollectionUpgrades/ATS_CollectionUpgrades.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterDuplicates, Minute, RuntimeModules, sortArray } from '@nu-art/ts-common';
+import './ATS_CollectionUpgrades.scss';
+import { ATS_Backend, TS_AppTools } from '../../components/TS_AppTools/index.js';
+import { genericNotificationAction } from '../../components/TS_Notifications/index.js';
+import { LL_H_C } from '../../components/Layouts/index.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { Button } from '../../components/Button/Button.js';
+import { ModuleFE_CollectionActions } from '../../modules/ModuleFE_CollectionActions.js';
+export class ATS_CollectionUpgrades extends ComponentSync {
+    static screen = {
+        name: 'Collection Upgrades',
+        key: 'collection-upgrades',
+        renderer: this,
+        group: ATS_Backend,
+    };
+    deriveStateFromProps(nextProps, state) {
+        state.upgradableModules ??= sortArray(filterDuplicates(RuntimeModules().filter((module) => {
+            return !!module.getCollectionName;
+        }), (module) => module.getCollectionName()), item => item.getCollectionName());
+        return state;
+    }
+    __onSyncStatusChanged(module) {
+        this.forceUpdate();
+    }
+    upgradeCollection = async (collectionName, module, e) => {
+        await genericNotificationAction(async () => {
+            await ModuleFE_CollectionActions.upgrade.collections({
+                dbKeys: [module.dbDef.dbKey],
+                force: e.metaKey,
+            }).setTimeout(5 * Minute).executeSync();
+        }, `Upgrading ${collectionName}`);
+    };
+    upgradeAll = async (e) => {
+        await genericNotificationAction(async () => {
+            await ModuleFE_CollectionActions.upgrade.all({ force: e.metaKey }).setTimeout(5 * Minute).executeSync();
+        }, `Upgrading all collections`);
+    };
+    render() {
+        return _jsxs("div", { className: 'collection-upgrades-page', children: [_jsx(Button, { onClick: e => this.upgradeAll(e), children: "Upgrade All" }), TS_AppTools.renderPageHeader('Collection Upgrades - To force upgrade click + ⌘/ctrl'), _jsx(LL_H_C, { className: 'buttons-container', children: (this.state.upgradableModules || []).map(module => {
+                        const name = module.getCollectionName().replace(/-/g, ' ');
+                        return _jsxs(Button, { onClick: (e) => this.upgradeCollection(name, module, e), children: [name, " (", module.cache.all().length, ")"] }, name + module.cache.all().length);
+                    }) })] });
+    }
+}

package/_ats/ATS_CollectionUpgrades/ATS_CollectionUpgrades.scss

@@ -0,0 +1,24 @@
+.collection-upgrades-page {
+  width: 100%;
+  height: 100%;
+
+  .buttons-container {
+    padding: 0 16px;
+    width: 100%;
+    flex-wrap: wrap;
+    gap: 16px;
+    align-items: stretch;
+
+    .ts-busy-button {
+      margin: 0;
+      width: 200px;
+      height: 65px;
+      white-space: pre-wrap;
+      font: {
+        size: 18px;
+      }
+      border: 2px solid white;
+      border-radius: 8px;
+    }
+  }
+}

package/_ats/ATS_CrudOperations/ATS_CrudOperations.d.ts

@@ -0,0 +1,29 @@
+import './ATS_CrudOperations.scss';
+import { AppToolsScreen } from '../../components/TS_AppTools/index.js';
+import { ModuleFE_BaseApi } from '../../modules/db-api-gen/ModuleFE_BaseApi.js';
+import { ModuleFE_BaseDB } from '../../modules/db-api-gen/ModuleFE_BaseDB.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { BaseHttpRequest } from '@nu-art/thunderstorm-shared';
+type Action = {
+    label: string;
+    action: (dbModule: ModuleFE_BaseApi<any, any>, input: string) => BaseHttpRequest<any>;
+};
+type State = {
+    dbModuleToRequest?: ModuleFE_BaseApi<any, any>;
+    selectedAction?: Action;
+    input?: string;
+    result?: string | Object | Object[];
+};
+export declare class ATS_CrudOperations extends ComponentSync<{}, State> {
+    static screen: AppToolsScreen;
+    protected deriveStateFromProps(nextProps: {}, state: State): State;
+    __onSyncStatusChanged(module: ModuleFE_BaseDB<any, any>): void;
+    private onDBModuleSelected;
+    private onDBActionSelected;
+    private onChangeInput;
+    private onClickExecute;
+    render(): import("react/jsx-runtime").JSX.Element;
+    private renderResult;
+    private renderResults;
+}
+export {};

package/_ats/ATS_CrudOperations/ATS_CrudOperations.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import './ATS_CrudOperations.scss';
+import { ATS_Backend } from '../../components/TS_AppTools/index.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { LL_H_C, LL_V_L } from '../../components/Layouts/index.js';
+import { DropDown_DBModules } from './ui-components.js';
+import { TS_DropDown } from '../../components/TS_Dropdown/index.js';
+import { SimpleListAdapter } from '../../components/adapter/Adapter.js';
+import { TS_TextArea } from '../../components/TS_Input/index.js';
+import { Button } from '../../components/Button/Button.js';
+import { ModuleFE_Toaster } from '../../component-modules/ModuleFE_Toaster.js';
+import { ModuleFE_Thunderstorm } from '../../modules/ModuleFE_Thunderstorm.js';
+import { TS_Icons } from '@nu-art/ts-styles';
+const ACTIONS = [
+    {
+        label: 'upsert',
+        action: (dbModule, input) => dbModule.v1.upsert(input)
+    },
+    {
+        label: 'upsert all',
+        action: (dbModule, input) => dbModule.v1.upsertAll(JSON.parse(input))
+    },
+    {
+        label: 'query',
+        action: (dbModule, input) => dbModule.v1.query(input)
+    },
+    {
+        label: 'delete',
+        action: (dbModule, input) => dbModule.v1.delete(input)
+    },
+    {
+        label: 'delete query',
+        action: (dbModule, input) => dbModule.v1.deleteQuery(input)
+    }
+];
+export class ATS_CrudOperations extends ComponentSync {
+    //######################### Life Cycle #########################
+    static screen = {
+        name: 'Crud Operations',
+        key: 'crud-operations',
+        renderer: this,
+        group: ATS_Backend,
+    };
+    deriveStateFromProps(nextProps, state) {
+        state.input = '{}';
+        return state;
+    }
+    __onSyncStatusChanged(module) {
+        this.forceUpdate();
+    }
+    //######################### Logic #########################
+    onDBModuleSelected = (module) => {
+        this.setState({ dbModuleToRequest: module, selectedAction: undefined });
+    };
+    onDBActionSelected = (action) => {
+        this.setState({ selectedAction: action });
+    };
+    onChangeInput = (value) => {
+        this.setState({ input: value });
+    };
+    onClickExecute = async () => {
+        const { selectedAction, input, dbModuleToRequest } = this.state;
+        if (!dbModuleToRequest || !selectedAction || !input) {
+            return ModuleFE_Toaster.toastError('Cannot Execute without all fields');
+        }
+        try {
+            const response = await selectedAction.action(dbModuleToRequest, JSON.parse(input)).executeSync();
+            this.setState({ result: response });
+        }
+        catch (e) {
+            this.setState({ result: `error occurred: ${e.message}` });
+        }
+    };
+    //######################### Render #########################
+    render() {
+        const { dbModuleToRequest, selectedAction, input, result } = this.state;
+        return _jsxs(LL_H_C, { className: 'ats-crud-operations-container', children: [_jsxs(LL_V_L, { className: 'ats-crud-operations-container__selection', children: [_jsx(DropDown_DBModules.selectable, { selected: dbModuleToRequest, onSelected: this.onDBModuleSelected }), _jsx(TS_DropDown, { adapter: SimpleListAdapter(ACTIONS, action => _jsx(_Fragment, { children: action.item.label })), selected: selectedAction, placeholder: 'Select Action', onSelected: this.onDBActionSelected }), _jsx(TS_TextArea, { className: 'ats-crud-operations-container__selection__input', type: 'text', placeholder: 'Enter input', disabled: false, value: input, onChange: this.onChangeInput, style: { fontFamily: 'monospace', fontSize: 15 } }, 'crud-operations-query'), _jsxs(LL_H_C, { className: 'ats-crud-operations-container__selection__buttons', children: [_jsx(Button, { className: 'ats-crud-operations-container__selection__execute', disabled: !(dbModuleToRequest && selectedAction && input), onClick: this.onClickExecute, variant: 'primary', children: "Execute" }), _jsx(TS_Icons.copy.component, { onClick: async () => {
+                                        if (!result)
+                                            return;
+                                        const copyObject = JSON.stringify(result, null, 2);
+                                        await ModuleFE_Thunderstorm.copyToClipboard(copyObject);
+                                    } })] })] }), this.renderResults()] });
+    }
+    renderResult = (item) => (_jsx(TS_TextArea, { className: 'ats-crud-operations-container__result', type: 'text', value: JSON.stringify(item, null, 2), placeholder: 'Results', disabled: true, style: { fontFamily: 'monospace', fontSize: 15 } }, item?._id));
+    renderResults = () => {
+        const result = this.state.result;
+        if (result && Array.isArray(result)) {
+            return (_jsx(LL_V_L, { className: 'ats-crud-operations-container__results', children: result.map((item) => this.renderResult(item)) }));
+        }
+        return this.renderResult(result);
+    };
+}
+;

package/_ats/ATS_CrudOperations/ATS_CrudOperations.scss

@@ -0,0 +1,46 @@
+.ats-crud-operations-container {
+  gap: 50px;
+  height: 700px;
+
+  .ats-crud-operations-container__selection {
+    width: 400px;
+    margin: 30px;
+    gap: 50px;
+
+    .ats-crud-operations-container__selection__input {
+      height: 400px;
+      resize: none;
+    }
+
+    .ats-crud-operations-container__selection__buttons {
+      gap: 10px;
+
+      .ats-crud-operations-container__selection__execute {
+        align-self: flex-end;
+      }
+    }
+  }
+
+  .ats-crud-operations-container__result {
+    width: 450px;
+    height: 200px;
+    margin-top: 20px;
+    align-self: flex-start;
+    resize: none;
+    overflow-y: auto;
+  }
+
+  .ats-crud-operations-container__results {
+    width: 400px;
+    max-height: 650px;
+    align-self: flex-start;
+    gap: 10px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  .ats-crud-operations-container__results .ats-crud-operations-container__result {
+    height: 200px;
+  }
+
+}

package/_ats/ATS_CrudOperations/ui-components.d.ts

@@ -0,0 +1,24 @@
+import { ResolvableContent } from '@nu-art/ts-common';
+import { MandatoryProps_TS_DropDown } from '../../components/TS_Dropdown/index.js';
+import { ModuleFE_BaseApi } from '../../modules/db-api-gen/ModuleFE_BaseApi.js';
+export declare const Props_DBModulesDropDown: ResolvableContent<MandatoryProps_TS_DropDown<ModuleFE_BaseApi<any>>>;
+export declare const DropDown_DBModules: {
+    editable: (props: {
+        className?: string;
+        inputValue?: string;
+        placeholder?: string;
+        onNoMatchingSelectionForString?: ((filterText: string, matchingItems: ModuleFE_BaseApi<any, object, object & import("../../core/db-api-gen/db-def.js").DBApiFEConfig<any>>[], e: import("react").KeyboardEvent) => Promise<void> | void) | undefined;
+        mapper?: ((item: ModuleFE_BaseApi<any, object, object & import("../../core/db-api-gen/db-def.js").DBApiFEConfig<any>>) => string[]) | undefined;
+        renderer?: ((item: ModuleFE_BaseApi<any, object, object & import("../../core/db-api-gen/db-def.js").DBApiFEConfig<any>>) => import("react").ReactElement) | undefined;
+        queryFilter?: ((item: ModuleFE_BaseApi<any, object, object & import("../../core/db-api-gen/db-def.js").DBApiFEConfig<any>>) => boolean) | undefined;
+        disabled?: boolean;
+        ifNoneShowAll?: boolean;
+    } & (import("../../editable-item.js").UIProps_EditableItem<any, string | number | symbol, any> & (import("../../components/types.js").ComponentProps_Error & ({
+        canUnselect: true;
+        onSelected?: ((selected?: ModuleFE_BaseApi<any, object, object & import("../../core/db-api-gen/db-def.js").DBApiFEConfig<any>> | undefined) => void) | undefined;
+    } | {
+        canUnselect?: false;
+        onSelected?: ((selected: ModuleFE_BaseApi<any, object, object & import("../../core/db-api-gen/db-def.js").DBApiFEConfig<any>>) => void) | undefined;
+    })))) => import("react/jsx-runtime").JSX.Element;
+    selectable: (props: import("../../components/TS_Dropdown/TS_DropDown.js").PartialProps_DropDown<ModuleFE_BaseApi<any, object, object & import("../../core/db-api-gen/db-def.js").DBApiFEConfig<any>>>) => import("react/jsx-runtime").JSX.Element;
+};

package/_ats/ATS_CrudOperations/ui-components.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Filter, filterDuplicates, RuntimeModules, sortArray } from '@nu-art/ts-common';
+import { TS_DropDown } from '../../components/TS_Dropdown/index.js';
+import { SimpleListAdapter } from '../../components/adapter/Adapter.js';
+import { LL_V_L } from '../../components/Layouts/index.js';
+export const Props_DBModulesDropDown = {
+    adapter: () => SimpleListAdapter(sortArray(filterDuplicates(RuntimeModules().filter((module) => !!module.getCollectionName), (module) => module.getCollectionName()), item => item.getCollectionName()), module => (_jsxs(LL_V_L, { children: [_jsx("div", { style: { fontSize: '16px', fontWeight: 'bold' }, children: module.item.getCollectionName() }), _jsx("div", { style: { fontSize: '12px', color: '#666' }, children: module.item.getCollectionKey() })] }))),
+    placeholder: 'DB Module',
+    filter: new Filter(module => [module.dbDef.dbKey, module.getCollectionName()])
+};
+export const DropDown_DBModules = TS_DropDown.prepare(Props_DBModulesDropDown);

package/_ats/ATS_EditableItem/ATS_EditableItem.d.ts

@@ -0,0 +1,16 @@
+import { AppToolsScreen } from '../../components/TS_AppTools/index.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { EditableItem } from '../../utils/EditableItem.js';
+import { UI_EditableTest } from '@nu-art/thunderstorm-shared';
+type State = {
+    editableItem: EditableItem<UI_EditableTest>;
+};
+export declare class ATS_EditableItemTesting extends ComponentSync<{}, State> {
+    static defaultProps: {};
+    static screen: AppToolsScreen;
+    protected deriveStateFromProps(nextProps: {}, state: State): State;
+    private getInitialItem;
+    private getEditableItem;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};