Improve console modal

Author: mantou132

packages/duoyun-ui/src/patterns/form.ts

@@ -2,7 +2,7 @@ import { adoptedStyle, customElement, memo, property, shadow } from '@mantou/gem
 import { createRef, createState, css, GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
 import { history } from '@mantou/gem/lib/history';
 import type { StyleObject } from '@mantou/gem/lib/utils';
-import { GemError, styleMap } from '@mantou/gem/lib/utils';
+import { GemError, QueryString, styleMap } from '@mantou/gem/lib/utils';
 
 import { DuoyunDatePickerElement } from '../elements/date-picker';
 import { DuoyunDateRangePickerElement } from '../elements/date-range-picker';
@@ -19,7 +19,7 @@ import { icons } from '../lib/icons';
 import { locale } from '../lib/locale';
 import { blockContainer, focusStyle } from '../lib/styles';
 import { theme } from '../lib/theme';
-import { readProp } from '../lib/utils';
+import { getStringFromTemplate, readProp } from '../lib/utils';
 
 import '../elements/button';
 import '../elements/form';
@@ -555,11 +555,7 @@ type CreateFormOptions<T> = {
 export function createForm<T = Record<string, unknown>>(options: CreateFormOptions<T>) {
   const containerType = options.type === 'modal' ? Modal : Drawer;
   const { query } = history.getParams();
-  if (options.query) {
-    query.setAny(options.query[0], options.query[1]);
-    history.replace({ query });
-  }
-  return containerType
+  let modalPromise = containerType
     .open<DyPatFormElement<T>>({
       header: options.header,
       body: html`
@@ -577,14 +573,26 @@ export function createForm<T = Record<string, unknown>>(options: CreateFormOptio
         await DuoyunWaitElement.instance?.removed;
       },
     })
-    .then((ele) => ele.state.data)
-    .catch((ele) => {
-      throw ele.state.data;
-    })
-    .finally(() => {
-      if (options.query) {
-        query.delete(options.query[0]);
-        history.replace({ query });
-      }
+    .catch((ele) => ele);
+  modalPromise.modal.addEventListener('close', (evt: CustomEvent) => {
+    if (evt.detail !== modalPromise) modalPromise.finally(() => history.back());
+  });
+  if (options.query) {
+    query.delete(options.query[0]);
+    history.replace({ query });
+
+    const newQuery = new QueryString(query);
+    newQuery.setAny(options.query[0], options.query[1]);
+
+    history.push({
+      query: newQuery,
+      title: getStringFromTemplate(options.header || ''),
+      close: () => modalPromise.modal.parentElement && modalPromise.modal.close(modalPromise),
+      open: async () => {
+        const { data } = (await modalPromise).state;
+        modalPromise = createForm({ ...options, data, query: undefined });
+      },
     });
+  }
+  return modalPromise;
 }

packages/gem-examples/src/console/users.ts

@@ -1,4 +1,4 @@
-import { customElement } from '@mantou/gem/lib/decorators';
+import { customElement, type Emitter, effect, emitter, mounted } from '@mantou/gem/lib/decorators';
 import { createState, GemElement, html } from '@mantou/gem/lib/element';
 import type { ContextMenuItem } from 'duoyun-ui/elements/contextmenu';
 import { ContextMenu } from 'duoyun-ui/elements/contextmenu';
@@ -16,6 +16,8 @@ import { fetchItemsWithArgs } from './api';
 import 'duoyun-ui/patterns/table';
 import 'duoyun-ui/elements/button';
 
+import { history } from '@mantou/gem/lib/history';
+
 const pagination = createPaginationStore<Item>({
   storageKey: 'users',
   cacheItems: true,
@@ -38,6 +40,8 @@ type NewItem = Modify<typeof initItem, { social?: string[] }>;
 
 @customElement('console-page-users')
 export class ConsolePageItemElement extends GemElement {
+  @emitter loaded: Emitter;
+
   #state = createState({
     pagination: pagination,
     paginationMap: new Map([['', pagination]]),
@@ -220,13 +224,14 @@ export class ConsolePageItemElement extends GemElement {
       header: `Edit: ${r.id}`,
       query: ['id', r.id],
       formItems: this.getFormItems(true),
+      prepareClose: (data) => {
+        console.log(data);
+      },
       prepareOk: async (data) => {
         await sleep(1000);
         console.log(data);
         this.#state.pagination.updateItem(data);
       },
-    }).catch((data) => {
-      console.log(data);
     });
   };
 
@@ -237,22 +242,37 @@ export class ConsolePageItemElement extends GemElement {
       header: `Create`,
       query: ['new', true],
       formItems: this.getFormItems(),
+      prepareClose: (data) => {
+        console.log(data);
+      },
       prepareOk: async (data) => {
         await sleep(1000);
         console.log(data);
         throw new Error('No implement!');
       },
-    }).catch((data) => {
-      console.log(data);
     });
   };
 
+  @mounted()
+  #init = async () => {
+    const { query } = history.getParams();
+    if (query.get('new')) {
+      this.onCreate();
+    }
+    const id = query.get('id');
+    if (id) {
+      await new Promise((res) => this.addEventListener('loaded', res, { once: true }));
+      const item = this.#state.pagination.store.items[id];
+      item && this.onUpdate(item);
+    }
+  };
+
   /**
    * 将搜索/过滤结果储存进内存 `PaginationStore`
    * 被根据 `searchAndFilterKey` 进行缓存
    * 这里使用页面级缓存，切换页面后将被清除
    */
-  #onFetch = ({ detail }: CustomEvent<FetchEventDetail>) => {
+  #onFetch = async ({ detail }: CustomEvent<FetchEventDetail>) => {
     let newPagination = this.#state.paginationMap.get(detail.pageKey);
     if (!newPagination) {
       newPagination = createPaginationStore<Item>({
@@ -262,7 +282,8 @@ export class ConsolePageItemElement extends GemElement {
       this.#state.paginationMap.set(detail.pageKey, newPagination);
     }
     this.#state({ pagination: newPagination });
-    newPagination.updatePage(fetchItemsWithArgs, detail);
+    await newPagination.updatePage(fetchItemsWithArgs, detail);
+    this.loaded();
   };
 
   render = () => {

packages/gem/src/elements/base/title.ts

@@ -27,11 +27,9 @@ const setTitle = (documentTitle: string) => {
 function setDocumentTitle(defaultTitle?: string | null, prefix = '', suffix = '') {
   const title = titleStore.title || defaultTitle;
   if (title && title !== titleStore.defaultTitle) {
-    GemTitleElement.title = title;
-    setTitle(prefix + GemTitleElement.title + suffix);
+    setTitle(prefix + (GemTitleElement.title = title) + suffix);
   } else {
-    GemTitleElement.title = titleStore.defaultTitle;
-    setTitle(GemTitleElement.title);
+    setTitle((GemTitleElement.title = titleStore.defaultTitle));
   }
 }
 

packages/gem/src/lib/history.ts

@@ -271,7 +271,7 @@ if (!globalThis._GEMHISTORY) {
         path: getInternalPath(pathname),
         query: new QueryString(search),
         hash: decodeURIComponent(hash),
-        title: newState.$title, // document.title 是导航前的
+        title: gemTitleStore.title || newState.$title, // document.title 是导航前的
         data: newState,
       });
     }

packages/vscode-gem-plugin/package.json

@@ -2,7 +2,7 @@
   "private": true,
   "name": "vscode-plugin-gem",
   "displayName": "Gem",
-  "description": "Gem plugin for VS Code",
+  "description": "Language Support for Gem",
   "icon": "logo.png",
   "version": "1.0.10",
   "engines": {