ts-glitter 21.8.2 → 21.8.4

package/lowcode/backend-manager/bg-dialog.ts

@@ -1,30 +1,37 @@
 import { GVC } from '../glitterBundle/GVController.js';
-import { EditorElem } from '../glitterBundle/plugins/editor-elem.js';
-import { PageSplit } from './splitPage.js';
-import { Tool } from '../modules/tool.js';
-import { ApiShop } from '../glitter-base/route/shopping.js';
-import { Article } from '../glitter-base/route/article.js';
-import { ApiUser } from '../glitter-base/route/user.js';
-import { ApiStock } from '../glitter-base/route/stock.js';
 import { ShareDialog } from '../glitterBundle/dialog/ShareDialog.js';
-import { Language, LanguageLocation } from '../glitter-base/global/language.js';
-import { FormModule } from '../cms-plugin/module/form-module.js';
-import { FormCheck } from '../cms-plugin/module/form-check.js';
-import { TableStorage } from '../cms-plugin/module/table-storage.js';
-import { ProductAi } from '../cms-plugin/ai-generator/product-ai.js';
-import { imageLibrary } from '../modules/image-library.js';
+import { Tool } from '../modules/tool.js';
+import { BgWidget } from './bg-widget.js';
 import { Animation } from '../glitterBundle/module/Animation.js';
+import { Article } from '../glitter-base/route/article.js';
+import { ApiRecommend } from '../glitter-base/route/recommend.js';
 
 const html = String.raw;
 const css = String.raw;
 
-export interface Option {
-  key: string;
-  value: string;
-  note?: string;
-  image?: string;
-  icon?: string;
-}
+export type ShopType = 'group' | 'recommend' | 'hidden' | 'onepage';
+
+type ShopObject = { key: string; icon: string; title: string };
+
+type OptionData = { key: string; name: string; realname: string };
+
+type ViewControl = 'selected' | 'view';
+
+type ViewModel = {
+  controllerId: string;
+  control: ViewControl;
+  mainId: string;
+  selectedId: string;
+  loading: Boolean;
+  pageType: ShopType;
+  searchType: 'title';
+  search: string;
+  orderString: string;
+  dataList: OptionData[];
+  filterList: { key: string; name: string }[];
+  postData: string[];
+  filterData: string[];
+};
 
 export class BgDialog {
   gvc: GVC;
@@ -42,13 +49,21 @@ export class BgDialog {
   }
 
   private init() {
-    this.gvc.addStyle(css`
+    this.gvc.addStyle(`
       .${this.prefix}_body {
         border-radius: 10px;
         background: #fff;
         overflow-y: auto;
-        min-width: calc(100vw - 180px);
-        max-width: calc(100vw - 20px);
+        ${
+          this.isMobile
+            ? `
+                width: calc(100vw - 20px);
+              `
+            : `
+                min-width: calc(100vw - 40%);
+                max-width: calc(100vw - 20px);
+              `
+        }
       }
 
       .${this.prefix}_header {
@@ -59,21 +74,29 @@ export class BgDialog {
         padding: 12px 20px;
       }
 
-      .${this.prefix}_btn {
+      .${this.prefix}_main {
+        max-height: 540px;
+        border: 20px solid #fff;
+        gap: 0;
+        position: relative;
+      }
+
+      .${this.prefix}_triple_bar {
         display: flex;
-        padding: 3.25px 18px;
-        align-items: center;
-        gap: 8px;
-        border-radius: 10px;
+        flex-direction: column;
+        position: sticky;
+        top: 0;
+        background-color: #fff;
       }
 
-      .${this.prefix}_save {
-        background: #393939;
+      .${this.prefix}_param_bar {
+        display: flex;
+        margin-top: 8px;
+        gap: 10px;
       }
 
-      .${this.prefix}_cancel {
-        background: #fff;
-        border: 1px solid #ddd;
+      .${this.prefix}_checkbox_container {
+        min-height: 353px;
       }
 
       .${this.prefix}_footer {
@@ -93,138 +116,402 @@ export class BgDialog {
         display: flex;
         align-items: center;
         justify-content: end;
-        gap: 14px;
+        gap: ${this.isMobile ? 8 : 14}px;
       }
-    `);
-  }
 
-  static select(obj: { gvc: GVC; default: string; options: Option[]; callback: (value: string) => void }) {
-    return html` <select
-      class="c_select c_select_w_100"
-      onchange="${obj.gvc.event(e => {
-        return obj.callback(e.value);
-      })}"
-    >
-      ${obj.options
-        .map(opt => {
-          return html` <option class="c_select_option" value="${opt.key}" ${obj.default === opt.key ? 'selected' : ''}>
-            ${opt.value}
-          </option>`;
-        })
-        .join('')}
-      ${obj.options.find(opt => obj.default === opt.key)
-        ? ''
-        : html`<option class="d-none" selected>請選擇項目</option>`}
-    </select>`;
-  }
+      .${this.prefix}_view_all {
+        color: #4d86db;
+        font-size: 16px;
+        font-weight: 400;
+        cursor: pointer;
+        overflow-wrap: break-word;
+      }
 
-  save(event: string, text: string = '完成'): string {
-    return html` <button class="btn ${this.prefix}_btn ${this.prefix}_save" type="button" onclick="${event}">
-      <span class="tx_700_white">${text}</span>
-    </button>`;
-  }
+      .${this.prefix}_clear_all {
+        margin-right: 8px;
+        font-size: 16px;
+        text-decoration: underline;
+        cursor: pointer;
+      }
 
-  cancal(event: string, text: string = '取消'): string {
-    return html` <button class="btn ${this.prefix}_btn ${this.prefix}_cancel" type="button" onclick="${event}">
-      <span class="tx_700">${text}</span>
-    </button>`;
+      .${this.prefix}_icon {
+        width: 16px;
+        height: 16px;
+        margin-right: 8px;
+        text-align: center;
+      }
+    `);
   }
 
-  viewAllSelect(event: string, text: string = '檢視已選取項目'): string {
-    return html`<span
-      style="color: #4D86DB; font-size: 16px; font-weight: 400; cursor:pointer; overflow-wrap: break-word;"
-      onclick="${event}"
-      >${text}</span
-    >`;
+  viewAll(event: string, text: string = '檢視已選取項目'): string {
+    return html`<span class="${this.prefix}_view_all" onclick="${event}">${text}</span>`;
   }
 
   clearAll(event: string, text: string = '清除全部'): string {
-    return html`<span style="margin-right: 8px; font-size: 16px; text-decoration: underline;" onclick="${event}"
-      >${text}</span
-    >`;
+    return html`<span class="${this.prefix}_clear_all" onclick="${event}">${text}</span>`;
+  }
+
+  shopTypeRecord(): Record<ShopType, ShopObject> {
+    return {
+      hidden: {
+        key: 'hidden',
+        icon: html`<i class="fa-solid fa-face-dotted ${this.prefix}_icon"></i>`,
+        title: '隱形賣場',
+      },
+      onepage: {
+        key: 'onepage',
+        icon: html`<i class="fa-regular fa-file ${this.prefix}_icon"></i>`,
+        title: '一頁商店',
+      },
+      group: {
+        key: 'group',
+        icon: html`<i class="fa-regular fa-puzzle-piece ${this.prefix}_icon"></i>`,
+        title: '拼團賣場',
+      },
+      recommend: {
+        key: 'recommend',
+        icon: html`<i class="fa-regular fa-share-nodes ${this.prefix}_icon"></i>`,
+        title: '分銷連結',
+      },
+    };
   }
 
-  marketShop() {
+  marketShop(args: { def: string[]; callback: (postData: string[]) => void }) {
     const gvc = this.gvc;
     const glitter = this.glitter;
+    const dialog = new ShareDialog(glitter);
+
+    const vm: ViewModel = {
+      controllerId: glitter.getUUID(),
+      control: 'view' as ViewControl,
+      mainId: glitter.getUUID(),
+      selectedId: glitter.getUUID(),
+      loading: true,
+      pageType: 'hidden',
+      searchType: 'title',
+      search: '',
+      orderString: '',
+      dataList: [], // 所有資料陣列
+      filterList: [], // 搜尋結果陣列
+      postData: args.def, // 預計回調資料
+      filterData: [], // 與搜尋結果相關的預計回調資料
+    };
 
-    const marketOptions = [
-      { key: 'hidden', value: '隱形賣場' },
-      { key: 'onepage', value: '一頁商店' },
-      { key: 'group', value: '拼團賣場' },
-      { key: 'recommend', value: '分銷連結' },
-    ];
-
-    return glitter.innerDialog(
-      (gvc: GVC) => {
-        const vm = {
-          id: gvc.glitter.getUUID(),
-          loading: false,
+    const marketOptions = Object.values(this.shopTypeRecord())
+      .filter(item => item.key !== 'group')
+      .map(item => {
+        return {
+          key: item.key,
+          value: item.title,
         };
+      });
 
-        return html` <div class="${this.prefix}_body">
-          ${gvc.bindView({
-            bind: vm.id,
-            view: () => {
-              if (vm.loading) {
-                return 'Loading';
-              }
+    const searchTypeOptions = [{ key: 'title', value: '賣場名稱' }];
 
-              return html` <div class="${this.prefix}_header">
-                  <div class="tx_700">產品列表</div>
-                  <div class="flex-fill"></div>
-                </div>
-                <div class="c_dialog">
-                  <div class="c_dialog_body">
-                    <div class="c_dialog_main" style="height: auto; max-height: 500px; gap: 24px;">
-                      ${BgDialog.select({
+    const resetPostData = () => {
+      vm.postData = [
+        ...new Set(
+          vm.postData
+            .filter(key => {
+              return !vm.filterList.some(item => item.key === key);
+            })
+            .concat(vm.filterData)
+        ),
+      ];
+    };
+
+    const selectedView = (gvc: GVC) => {
+      const selectedList = vm.dataList.filter(item => vm.postData.includes(item.key));
+
+      const bindView = gvc.bindView({
+        bind: vm.selectedId,
+        view: () => {
+          return html` <div class="${this.prefix}_header">
+              <div class="tx_700">賣場列表</div>
+              <div class="flex-fill"></div>
+            </div>
+            <div class="c_dialog">
+              <div class="c_dialog_body">
+                <div class="c_dialog_main ${this.prefix}_main">
+                  <div class="${this.prefix}_triple_bar">
+                    ${[
+                      BgWidget.tripletCheckboxContainer(
                         gvc,
-                        default: marketOptions[0].key,
-                        options: marketOptions,
-                        callback: value => {
-                          console.log(value);
-                        },
-                      })}
-                    </div>
-                    <div class="${this.prefix}_footer">
-                      <div class="${this.prefix}_footer_left">
-                        ${this.viewAllSelect(
-                          gvc.event(() => {
-                            console.log('viewAllSelect');
-                          }),
-                          '檢視已選商品(12)'
-                        )}
-                      </div>
-                      <div class="${this.prefix}_footer_right">
-                        ${[
-                          this.clearAll(
-                            gvc.event(() => {
-                              console.log('clearAll');
-                            })
-                          ),
-                          this.cancal(
-                            gvc.event(() => {
-                              console.log('cancal');
-                            })
-                          ),
-                          this.save(
-                            gvc.event(() => {
-                              console.log('save');
-                            })
-                          ),
-                        ].join('')}
-                      </div>
-                    </div>
+                        '賣場名稱',
+                        (() => {
+                          if (vm.postData.length === 0) return -1;
+                          return vm.postData.length === selectedList.length ? 1 : 0;
+                        })(),
+                        r => {
+                          vm.postData = r === 1 ? selectedList.map(({ key }: { key: any }) => key) : [];
+                          gvc.notifyDataChange(vm.selectedId);
+                        }
+                      ),
+                      BgWidget.horizontalLine({ margin: 0.5 }),
+                    ].join('')}
+                  </div>
+                  <div class="${this.prefix}_checkbox_container">
+                    ${BgWidget.multiCheckboxContainer(gvc, selectedList, vm.postData, text => {
+                      vm.postData = text;
+                      gvc.notifyDataChange(vm.selectedId);
+                    })}
+                  </div>
+                </div>
+                <div class="${this.prefix}_footer">
+                  <div class="${this.prefix}_footer_left">
+                    ${this.viewAll(
+                      gvc.event(() => {
+                        gvc.closeDialog();
+                        vm.control = 'view';
+                      }),
+                      '繼續選擇'
+                    )}
+                  </div>
+                  <div class="${this.prefix}_footer_right">
+                    ${[
+                      this.clearAll(
+                        gvc.event(() => {
+                          if (vm.postData.length > 0) {
+                            dialog.checkYesOrNot({
+                              text: '確定要清除所有已選取的選項嗎？',
+                              callback: bool => {
+                                if (bool) {
+                                  vm.postData = [];
+                                  gvc.notifyDataChange(vm.selectedId);
+                                }
+                              },
+                            });
+                          }
+                        }),
+                        this.isMobile ? '全刪' : '清除全部'
+                      ),
+                      BgWidget.cancel(
+                        gvc.event(() => {
+                          gvc.closeDialog();
+                        })
+                      ),
+                      BgWidget.save(
+                        gvc.event(() => {
+                          args.callback(vm.postData);
+                          gvc.closeDialog();
+                        }),
+                        '完成'
+                      ),
+                    ].join('')}
                   </div>
-                </div>`;
+                </div>
+              </div>
+            </div>`;
+        },
+      });
+
+      return html`<div class="${this.prefix}_body">${bindView}</div>`;
+    };
+
+    const dialogView = (gvc: GVC) => {
+      const bindView = gvc.bindView({
+        bind: vm.mainId,
+        view: () => {
+          if (vm.loading) {
+            return html`<div class="my-4">${BgWidget.spinner()}</div>`;
+          }
+
+          vm.filterList = vm.dataList.filter(
+            item => item.key.includes(vm.pageType) && item.realname.includes(vm.search)
+          );
+          vm.filterData = vm.postData.filter(key => vm.filterList.find(item => item.key === key));
+
+          const pageTypeSelect = BgWidget.select({
+            gvc,
+            default: vm.pageType,
+            options: marketOptions,
+            callback: value => {
+              vm.pageType = value;
+              vm.search = '';
+              gvc.notifyDataChange(vm.mainId);
+            },
+          });
+
+          const searchTypeSelect = BgWidget.select({
+            gvc,
+            default: vm.searchType,
+            options: searchTypeOptions,
+            callback: value => {
+              vm.searchType = value;
+              gvc.notifyDataChange(vm.mainId);
             },
-          })}
-        </div>`;
+            style: 'max-width: 120px;',
+          });
+
+          const searchPlace = BgWidget.searchPlace(
+            gvc.event(e => {
+              vm.search = e.value;
+              gvc.notifyDataChange(vm.mainId);
+            }),
+            vm.search || '',
+            '搜尋賣場名稱',
+            '0',
+            '0'
+          );
+
+          return html` <div class="${this.prefix}_header">
+              <div class="tx_700">賣場列表</div>
+              <div class="flex-fill"></div>
+            </div>
+            <div class="c_dialog">
+              <div class="c_dialog_body">
+                <div class="c_dialog_main ${this.prefix}_main">
+                  <div class="${this.prefix}_triple_bar">
+                    ${this.isMobile
+                      ? html` <div class="${this.prefix}_param_bar">${[pageTypeSelect, searchTypeSelect].join('')}</div>
+                          <div class="w-100 mt-2">${searchPlace}</div>`
+                      : html`${pageTypeSelect}
+                          <div class="${this.prefix}_param_bar">
+                            ${[searchTypeSelect, html`<div class="w-100">${searchPlace}</div>`].join('')}
+                          </div>`}
+                    ${[
+                      BgWidget.mbContainer(12),
+                      BgWidget.tripletCheckboxContainer(
+                        gvc,
+                        '賣場名稱',
+                        (() => {
+                          if (vm.filterData.length === 0) return -1;
+                          return vm.filterData.length === vm.filterList.length ? 1 : 0;
+                        })(),
+                        r => {
+                          vm.filterData = r === 1 ? vm.filterList.map(({ key }: { key: any }) => key) : [];
+                          resetPostData();
+                          gvc.notifyDataChange(vm.mainId);
+                        }
+                      ),
+                      BgWidget.horizontalLine({ margin: 0.5 }),
+                    ].join('')}
+                  </div>
+                  <div class="${this.prefix}_checkbox_container">
+                    ${BgWidget.multiCheckboxContainer(gvc, vm.filterList, vm.filterData, text => {
+                      vm.filterData = text;
+                      resetPostData();
+                      gvc.notifyDataChange(vm.mainId);
+                    })}
+                  </div>
+                </div>
+                <div class="${this.prefix}_footer">
+                  <div class="${this.prefix}_footer_left">
+                    ${this.viewAll(
+                      gvc.event(() => {
+                        if (vm.postData.length > 0) {
+                          gvc.closeDialog();
+                          vm.control = 'selected';
+                        }
+                      }),
+                      this.isMobile ? `檢視(${vm.postData.length})` : `檢視已選賣場(${vm.postData.length})`
+                    )}
+                  </div>
+                  <div class="${this.prefix}_footer_right">
+                    ${[
+                      this.clearAll(
+                        gvc.event(() => {
+                          if (vm.postData.length > 0) {
+                            dialog.checkYesOrNot({
+                              text: '確定要清除所有已選取的選項嗎？',
+                              callback: bool => {
+                                if (bool) {
+                                  vm.postData = [];
+                                  gvc.notifyDataChange(vm.mainId);
+                                }
+                              },
+                            });
+                          }
+                        }),
+                        this.isMobile ? '全刪' : '清除全部'
+                      ),
+                      BgWidget.cancel(
+                        gvc.event(() => {
+                          gvc.closeDialog();
+                        })
+                      ),
+                      BgWidget.save(
+                        gvc.event(() => {
+                          args.callback(vm.postData);
+                          gvc.closeDialog();
+                        }),
+                        '完成'
+                      ),
+                    ].join('')}
+                  </div>
+                </div>
+              </div>
+            </div>`;
+        },
+        onCreate: () => {
+          if (vm.loading) {
+            vm.dataList = [];
+
+            Promise.all([
+              Article.get({
+                page: 0,
+                limit: 9999,
+                search: vm.search || undefined,
+                status: '0,1',
+              }),
+              ApiRecommend.getList({
+                page: 0,
+                limit: 9999,
+                data: {},
+                token: (window.parent as any).config.token,
+              }),
+            ]).then(dataArray => {
+              const [article, recommend] = dataArray;
+              const shopTypeRecord = this.shopTypeRecord();
+
+              if (Array.isArray(article.response?.data)) {
+                article.response.data.map((item: any) => {
+                  if (['hidden', 'shopping'].includes(item.content.page_type)) {
+                    const pageType = item.content.page_type === 'hidden' ? 'hidden' : 'onepage';
+
+                    vm.dataList.push({
+                      key: `${pageType}-${item.id}`,
+                      name: `${shopTypeRecord[pageType].icon}${item.content.name}`,
+                      realname: item.content.name,
+                    });
+                  }
+                });
+              }
+
+              if (Array.isArray(recommend.response?.data)) {
+                recommend.response.data.map((item: any) => {
+                  vm.dataList.push({
+                    key: `recommend-${item.id}`,
+                    name: `${shopTypeRecord.recommend.icon}${item.content.title}`,
+                    realname: item.content.title,
+                  });
+                });
+              }
+
+              vm.loading = false;
+              gvc.notifyDataChange(vm.mainId);
+            });
+          }
+        },
+      });
+
+      return html`<div class="${this.prefix}_body">${bindView}</div>`;
+    };
+
+    return gvc.bindView({
+      bind: vm.controllerId,
+      dataList: [{ obj: vm, key: 'control' }],
+      view: () => {
+        switch (vm.control) {
+          case 'selected':
+            glitter.innerDialog(selectedView, glitter.getUUID(), { animation: Animation.fade });
+            break;
+          case 'view':
+            glitter.innerDialog(dialogView, glitter.getUUID(), { animation: Animation.fade });
+            break;
+        }
+        return '';
       },
-      gvc.glitter.getUUID(),
-      {
-        animation: Animation.fade,
-      }
-    );
+    });
   }
 }

package/lowcode/backend-manager/bg-widget.js

@@ -800,7 +800,7 @@ ${(_d = obj.default) !== null && _d !== void 0 ? _d : ''}</textarea
         >
       </div>`;
     }
-    static searchPlace(event, vale, placeholder, margin, padding) {
+    static searchPlace(event, value, placeholder, margin, padding) {
         const defMargin = document.body.clientWidth > 768 ? '16px 0' : '8px 0';
         const defPadding = document.body.clientWidth > 768 ? '0 16px' : '0';
         return html `
@@ -816,7 +816,7 @@ ${(_d = obj.default) !== null && _d !== void 0 ? _d : ''}</textarea
             style="border-radius: 10px; border: 1px solid #DDD; padding-left: 50px;"
             placeholder="${placeholder}"
             onchange="${event}"
-            value="${vale}"
+            value="${value}"
           />
         </div>
       </div>
@@ -2044,8 +2044,8 @@ ${(_d = obj.default) !== null && _d !== void 0 ? _d : ''}</textarea
                           class="${trIndex === 0 ? ids.tr : ''} ${dd.find(d3 => d3.tooltip)
                                 ? 'tr-tooltip-container'
                                 : ''}"
-                          onclick="${gvc.event(() => {
-                                obj.rowClick && obj.rowClick(dd, trIndex);
+                          onclick="${gvc.event((e, event) => {
+                                obj.rowClick && obj.rowClick(dd, trIndex, e, event);
                             })}"
                           onmouseover="${gvc.event(() => {
                                 $(`#${ids.pencil}${trIndex}`).removeClass('d-none');