ts-glitter 20.6.8 → 20.6.9

package/lowcode/cms-plugin/menus-setting.js

@@ -1,7 +1,7 @@
 import { BgWidget } from '../backend-manager/bg-widget.js';
 import { ApiUser } from '../glitter-base/route/user.js';
 import { EditorElem } from '../glitterBundle/plugins/editor-elem.js';
-import { LanguageBackend } from "./language-backend.js";
+import { LanguageBackend } from './language-backend.js';
 const html = String.raw;
 export class MenusSetting {
     static main(gvc, widget) {
@@ -11,7 +11,7 @@ export class MenusSetting {
             type: 'list',
             index: 0,
             dataList: undefined,
-            query: ''
+            query: '',
         };
         const filterID = gvc.glitter.getUUID();
         let vmi = undefined;
@@ -36,19 +36,19 @@ export class MenusSetting {
                 view: () => {
                     if (vm.type === 'list') {
                         return BgWidget.container(html `
-                            <div class="title-container">
-                                ${BgWidget.title('選單管理')}
-                                <div class="flex-fill"></div>
-                                ${false
+              <div class="title-container">
+                ${BgWidget.title('選單管理')}
+                <div class="flex-fill"></div>
+                ${false
                             ? BgWidget.darkButton('新增', gvc.event(() => {
                                 vm.type = 'add';
                                 gvc.notifyDataChange(id);
                             }))
                             : ''}
-                            </div>
-                            ${BgWidget.container(BgWidget.mainCard(BgWidget.tableV3({
+              </div>
+              ${BgWidget.container(BgWidget.mainCard(BgWidget.tableV3({
                             gvc: gvc,
-                            getData: (vmi) => {
+                            getData: vmi => {
                                 vm.dataList = [
                                     { tag: 'menu-setting', title: '主選單' },
                                     { tag: 'footer-setting', title: '頁腳' },
@@ -65,7 +65,7 @@ export class MenusSetting {
                             },
                             filter: [],
                         })))}
-                        `);
+            `);
                     }
                     else if (vm.type == 'add') {
                         return BgWidget.container(this.setMenu({
@@ -100,13 +100,13 @@ export class MenusSetting {
         const vm = {
             id: cf.gvc.glitter.getUUID(),
             link: {
-                "en-US": [],
-                "zh-CN": [],
-                "zh-TW": []
+                'en-US': [],
+                'zh-CN': [],
+                'zh-TW': [],
             },
             selected: false,
             loading: true,
-            language: window.parent.store_info.language_setting.def
+            language: window.parent.store_info.language_setting.def,
         };
         ApiUser.getPublicConfig(cf.key, 'manager').then((data) => {
             if (data.response.value) {
@@ -115,13 +115,13 @@ export class MenusSetting {
             gvc.notifyDataChange(vm.id);
         });
         function clearNoNeedData(items) {
-            items.map((dd) => {
+            items.map(dd => {
                 dd.selected = undefined;
                 clearNoNeedData(dd.items || []);
             });
         }
         function save() {
-            for (const a of ["en-US", 'zh-CN', 'zh-TW']) {
+            for (const a of ['en-US', 'zh-CN', 'zh-TW']) {
                 clearNoNeedData(vm.link[a]);
             }
             cf.widget.event('loading', {
@@ -131,7 +131,7 @@ export class MenusSetting {
                 key: cf.key,
                 value: vm.link,
                 user_id: 'manager',
-            }).then((data) => {
+            }).then(data => {
                 setTimeout(() => {
                     cf.widget.event('loading', {
                         visible: false,
@@ -144,14 +144,14 @@ export class MenusSetting {
         }
         function selectAll(array) {
             array.selected = true;
-            array.items.map((dd) => {
+            array.items.map(dd => {
                 dd.selected = true;
                 selectAll(dd);
             });
         }
         function clearAll(array) {
             array.selected = false;
-            array.items.map((dd) => {
+            array.items.map(dd => {
                 dd.selected = false;
                 clearAll(dd);
             });
@@ -172,7 +172,7 @@ export class MenusSetting {
             return count;
         }
         function deleteSelect(items) {
-            return items.filter((d1) => {
+            return items.filter(d1 => {
                 d1.items = deleteSelect(d1.items || []);
                 return !d1.selected;
             });
@@ -188,65 +188,72 @@ export class MenusSetting {
                     var _a;
                     const link = vm.link[vm.language];
                     return html `<div class="title-container" style="width: 856px; max-width: 100%;">
-                            ${BgWidget.goBack(cf.gvc.event(() => {
+              ${BgWidget.goBack(cf.gvc.event(() => {
                         cf.goBack();
                     }))}${BgWidget.title((_a = cf.title) !== null && _a !== void 0 ? _a : '選單設定')}
-                        <div class="flex-fill"></div>
-                        ${LanguageBackend.switchBtn({
+              <div class="flex-fill"></div>
+              ${LanguageBackend.switchBtn({
                         gvc: gvc,
                         language: vm.language,
-                        callback: (language) => {
+                        callback: language => {
                             vm.language = language;
                             refresh();
-                        }
+                        },
                     })}
-                        </div>
-                        ${BgWidget.container(html `<div
-                                style="max-width:100%;width: 856px; padding: 20px; background: white; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.08); border-radius: 10px; overflow: hidden; justify-content: center; align-items: center; display: inline-flex"
-                            >
-                                <div style="width: 100%;  position: relative">
-                                    <div style="width: 100%;  left: 0px; top: 0px;  flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; display: inline-flex">
-                                        <div
-                                            class="w-100  ${getSelectCount({
+            </div>
+            ${BgWidget.container(html `<div
+                style="max-width:100%;width: 856px; padding: 20px; background: white; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.08); border-radius: 10px; overflow: hidden; justify-content: center; align-items: center; display: inline-flex"
+              >
+                <div style="width: 100%;  position: relative">
+                  <div
+                    style="width: 100%;  left: 0px; top: 0px;  flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; display: inline-flex"
+                  >
+                    <div
+                      class="w-100  ${getSelectCount({
                         items: link,
                     }) > 0
                         ? ``
                         : `d-none`}"
-                                            style="height: 40px; padding: 12px 18px;background: #F7F7F7; border-radius: 10px; justify-content: flex-end; align-items: center; gap: 8px; display: inline-flex"
-                                        >
-                                            <div style="flex: 1 1 0; color: #393939; font-size: 14px; font-family: Noto Sans; font-weight: 700; word-wrap: break-word">
-                                                已選取${getSelectCount({
+                      style="height: 40px; padding: 12px 18px;background: #F7F7F7; border-radius: 10px; justify-content: flex-end; align-items: center; gap: 8px; display: inline-flex"
+                    >
+                      <div
+                        style="flex: 1 1 0; color: #393939; font-size: 14px; font-family: Noto Sans; font-weight: 700; word-wrap: break-word"
+                      >
+                        已選取${getSelectCount({
                         items: link,
                     })}項
-                                            </div>
-                                            <div
-                                                style="cursor:pointer;padding: 4px 14px;background: white; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.10); border-radius: 20px; border: 1px #DDDDDD solid; justify-content: flex-start; align-items: flex-start; gap: 10px; display: flex"
-                                            >
-                                                <div
-                                                    style="color: #393939; font-size: 14px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word"
-                                                    onclick="${gvc.event(() => {
+                      </div>
+                      <div
+                        style="cursor:pointer;padding: 4px 14px;background: white; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.10); border-radius: 20px; border: 1px #DDDDDD solid; justify-content: flex-start; align-items: flex-start; gap: 10px; display: flex"
+                      >
+                        <div
+                          style="color: #393939; font-size: 14px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word"
+                          onclick="${gvc.event(() => {
                         vm.link[vm.language] = deleteSelect(link);
                         gvc.notifyDataChange(vm.id);
                     })}"
-                                                >
-                                                    刪除
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="d-flex align-items-center" style="width: 100%; height: 22px; position: relative;gap:29px;">
-                                            <div
-                                                class="${allSelect({
+                        >
+                          刪除
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="d-flex align-items-center"
+                      style="width: 100%; height: 22px; position: relative;gap:29px;"
+                    >
+                      <div
+                        class="${allSelect({
                         items: link,
-                        selected: !link.find((dd) => {
+                        selected: !link.find(dd => {
                             return !dd.selected;
                         }),
                     })
                         ? `fa-solid fa-square-check`
                         : `fa-regular fa-square`}"
-                                                style="color:#393939;width: 16px; height: 16px;cursor: pointer;"
-                                                onclick="${cf.gvc.event((e, event) => {
+                        style="color:#393939;width: 16px; height: 16px;cursor: pointer;"
+                        onclick="${cf.gvc.event((e, event) => {
                         event.stopPropagation();
-                        if (link.find((dd) => {
+                        if (link.find(dd => {
                             return !dd.selected;
                         })) {
                             selectAll({
@@ -260,11 +267,17 @@ export class MenusSetting {
                         }
                         gvc.notifyDataChange(vm.id);
                     })}"
-                                            ></div>
-                                            <div style="left: 61px; top: 0px;  color: #393939; font-size: 16px; font-family: Noto Sans; font-weight: 700; word-wrap: break-word">選單名稱 ${BgWidget.languageInsignia(vm.language, 'margin-left:5px;')}</div>
-                                        </div>
-                                        <div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 18px; display: flex">
-                                            ${(() => {
+                      ></div>
+                      <div
+                        style="left: 61px; top: 0px;  color: #393939; font-size: 16px; font-family: Noto Sans; font-weight: 700; word-wrap: break-word"
+                      >
+                        選單名稱 ${BgWidget.languageInsignia(vm.language, 'margin-left:5px;')}
+                      </div>
+                    </div>
+                    <div
+                      style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 18px; display: flex"
+                    >
+                      ${(() => {
                         function renderItems(array) {
                             const id = gvc.glitter.getUUID();
                             return (gvc.bindView(() => {
@@ -274,20 +287,22 @@ export class MenusSetting {
                                         return array
                                             .map((dd, index) => {
                                             const list = html `
-                                                                                <div
-                                                                                    class=" w-100 "
-                                                                                    style="width: 100%; justify-content: flex-start; align-items: center; gap: 5px; display: inline-flex;cursor: pointer;"
-                                                                                    onclick="${cf.gvc.event(() => {
+                                        <div
+                                          class=" w-100 "
+                                          style="width: 100%; justify-content: flex-start; align-items: center; gap: 5px; display: inline-flex;cursor: pointer;"
+                                          onclick="${cf.gvc.event(() => {
                                                 if (dd.items && dd.items.length > 0) {
                                                     dd.toggle = !dd.toggle;
                                                     gvc.notifyDataChange(vm.id);
                                                 }
                                             })}"
-                                                                                >
-                                                                                    <div
-                                                                                        class="${allSelect(dd) ? `fa-solid fa-square-check` : `fa-regular fa-square`}"
-                                                                                        style="color:#393939;width: 16px; height: 16px;"
-                                                                                        onclick="${cf.gvc.event((e, event) => {
+                                        >
+                                          <div
+                                            class="${allSelect(dd)
+                                                ? `fa-solid fa-square-check`
+                                                : `fa-regular fa-square`}"
+                                            style="color:#393939;width: 16px; height: 16px;"
+                                            onclick="${cf.gvc.event((e, event) => {
                                                 event.stopPropagation();
                                                 dd.selected = !dd.selected;
                                                 if (dd.selected) {
@@ -298,85 +313,90 @@ export class MenusSetting {
                                                 }
                                                 gvc.notifyDataChange(vm.id);
                                             })}"
-                                                                                    ></div>
-                                                                                    <div
-                                                                                        class="hoverF2 pe-2 my-1"
-                                                                                        style="width: 100%;  justify-content: flex-start; align-items: center; gap: 8px; display: flex"
-                                                                                    >
-                                                                                        <i
-                                                                                            class="ms-2 fa-solid fa-grip-dots-vertical color39 dragItem hoverBtn d-flex align-items-center justify-content-center"
-                                                                                            style="cursor: pointer;width:25px;height: 25px;"
-                                                                                        ></i>
-                                                                                        <div
-                                                                                            style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; display: inline-flex;white-space: normal;word-break: break-all;"
-                                                                                        >
-                                                                                            <div style="justify-content: flex-start; align-items: center; gap: 8px; display: inline-flex">
-                                                                                                <div
-                                                                                                    style="color: #393939; font-size: 16px; font-family: Noto Sans; font-weight: 400; word-break: break-all;"
-                                                                                                >
-                                                                                                    ${dd.title}
-                                                                                                </div>
-                                                                                                ${dd.items && dd.items.length > 0
+                                          ></div>
+                                          <div
+                                            class="hoverF2 pe-2 my-1"
+                                            style="width: 100%;  justify-content: flex-start; align-items: center; gap: 8px; display: flex"
+                                          >
+                                            <i
+                                              class="ms-2 fa-solid fa-grip-dots-vertical color39 dragItem hoverBtn d-flex align-items-center justify-content-center"
+                                              style="cursor: pointer;width:25px;height: 25px;"
+                                            ></i>
+                                            <div
+                                              style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; display: inline-flex;white-space: normal;word-break: break-all;"
+                                            >
+                                              <div
+                                                style="justify-content: flex-start; align-items: center; gap: 8px; display: inline-flex"
+                                              >
+                                                <div
+                                                  style="color: #393939; font-size: 16px; font-family: Noto Sans; font-weight: 400; word-break: break-all;"
+                                                >
+                                                  ${dd.title}
+                                                </div>
+                                                ${dd.items && dd.items.length > 0
                                                 ? !dd.toggle
                                                     ? `<i class="fa-solid fa-angle-down color39"></i>`
                                                     : `<i class="fa-solid fa-angle-up color39"></i>`
                                                 : ``}
-                                                                                            </div>
-                                                                                            <div
-                                                                                                style="justify-content: flex-start; align-items: center; gap: 8px; display: inline-flex;white-space: normal;word-break: break-all;"
-                                                                                            >
-                                                                                                <div
-                                                                                                    style="color: #3366BB; font-size: 14px; font-family: Noto Sans; font-weight: 400; line-height: 14px; word-wrap: break-word"
-                                                                                                >
-                                                                                                    ${dd.title}
-                                                                                                </div>
-                                                                                                <div
-                                                                                                    style="color: #159240; font-size: 14px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word"
-                                                                                                >
-                                                                                                    ${dd.link}
-                                                                                                </div>
-                                                                                            </div>
-                                                                                        </div>
-                                                                                        <div class="flex-fill"></div>
-                                                                                        <div
-                                                                                            class="child me-2"
-                                                                                            onclick="${cf.gvc.event((e, event) => {
+                                              </div>
+                                              <div
+                                                style="justify-content: flex-start; align-items: center; gap: 8px; display: inline-flex;white-space: normal;word-break: break-all;"
+                                              >
+                                                <div
+                                                  style="color: #3366BB; font-size: 14px; font-family: Noto Sans; font-weight: 400; line-height: 14px; word-wrap: break-word"
+                                                >
+                                                  ${dd.title}
+                                                </div>
+                                                <div
+                                                  style="color: #159240; font-size: 14px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word"
+                                                >
+                                                  ${dd.link}
+                                                </div>
+                                              </div>
+                                            </div>
+                                            <div class="flex-fill"></div>
+                                            <div
+                                              class="child me-2"
+                                              onclick="${cf.gvc.event((e, event) => {
                                                 event.stopPropagation();
                                                 MenusSetting.editEvent({
                                                     link: '',
                                                     title: '',
                                                     items: [],
-                                                }, (data) => {
+                                                }, data => {
                                                     dd.items = dd.items || [];
                                                     dd.items.push(data);
                                                     gvc.notifyDataChange(vm.id);
                                                 });
                                             })}"
-                                                                                        >
-                                                                                            <i class="fa-solid fa-plus" style="color:#393939;"></i>
-                                                                                        </div>
-                                                                                        <div
-                                                                                            class="child"
-                                                                                            onclick="${cf.gvc.event((e, event) => {
+                                            >
+                                              <i class="fa-solid fa-plus" style="color:#393939;"></i>
+                                            </div>
+                                            <div
+                                              class="child"
+                                              onclick="${cf.gvc.event((e, event) => {
                                                 event.stopPropagation();
-                                                MenusSetting.editEvent(dd, (data) => {
+                                                MenusSetting.editEvent(dd, data => {
                                                     array[index] = data;
                                                     gvc.notifyDataChange(vm.id);
                                                 });
                                             })}"
-                                                                                        >
-                                                                                            <i class="fa-solid fa-pencil" style="color:#393939;"></i>
-                                                                                        </div>
-                                                                                    </div>
-                                                                                </div>
-                                                                                ${dd.items && dd.items.length > 0
+                                            >
+                                              <i class="fa-solid fa-pencil" style="color:#393939;"></i>
+                                            </div>
+                                          </div>
+                                        </div>
+                                        ${dd.items && dd.items.length > 0
                                                 ? html `
-                                                                                          <div class=" w-100 ${dd.toggle ? `` : `d-none`}" style="padding-left: 35px;">
-                                                                                              ${renderItems(dd.items)}
-                                                                                          </div>
-                                                                                      `
+                                              <div
+                                                class=" w-100 ${dd.toggle ? `` : `d-none`}"
+                                                style="padding-left: 35px;"
+                                              >
+                                                ${renderItems(dd.items)}
+                                              </div>
+                                            `
                                                 : ``}
-                                                                            `;
+                                      `;
                                             return html `<li class="w-100 ">${list}</li>`;
                                         })
                                             .join('');
@@ -429,40 +449,44 @@ export class MenusSetting {
                                 };
                             }) +
                                 html ` <div
-                                                            style="cursor:pointer;align-self: stretch; height: 50px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; display: flex"
-                                                            onclick="${cf.gvc.event(() => {
+                              style="cursor:pointer;align-self: stretch; height: 50px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; display: flex"
+                              onclick="${cf.gvc.event(() => {
                                     MenusSetting.editEvent({
                                         link: '',
                                         title: '',
                                         items: [],
-                                    }, (data) => {
+                                    }, data => {
                                         array.push(data);
                                         gvc.notifyDataChange(vm.id);
                                     });
                                 })}"
-                                                        >
-                                                            <div
-                                                                style="align-self: stretch; height: 54px; border-radius: 10px; border: 1px #DDDDDD solid; justify-content: center; align-items: center; gap: 6px; display: inline-flex"
-                                                            >
-                                                                <i class="fa-solid fa-plus" style="color: #3366BB;font-size: 16px; "></i>
-                                                                <div style="color: #3366BB; font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word">新增選單</div>
-                                                            </div>
-                                                        </div>`);
+                            >
+                              <div
+                                style="align-self: stretch; height: 54px; border-radius: 10px; border: 1px #DDDDDD solid; justify-content: center; align-items: center; gap: 6px; display: inline-flex"
+                              >
+                                <i class="fa-solid fa-plus" style="color: #3366BB;font-size: 16px; "></i>
+                                <div
+                                  style="color: #3366BB; font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word"
+                                >
+                                  新增選單
+                                </div>
+                              </div>
+                            </div>`);
                         }
                         return renderItems(link);
                     })()}
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>`)}
-                        <div class="update-bar-container">
-                            ${BgWidget.cancel(gvc.event(() => {
+                    </div>
+                  </div>
+                </div>
+              </div>`)}
+            <div class="update-bar-container">
+              ${BgWidget.cancel(gvc.event(() => {
                         cf.goBack();
                     }))}
-                            ${BgWidget.save(gvc.event(() => {
+              ${BgWidget.save(gvc.event(() => {
                         save();
                     }))}
-                        </div>`;
+            </div>`;
                 },
                 divCreate: {
                     style: `padding-bottom:60px;`,
@@ -493,7 +517,7 @@ export class MenusSetting {
                                     title: '選單名稱',
                                     default: data.title || '',
                                     placeHolder: '請輸入選單名稱',
-                                    callback: (text) => {
+                                    callback: text => {
                                         data.title = text;
                                     },
                                 }),
@@ -502,7 +526,7 @@ export class MenusSetting {
                                     title: '',
                                     default: data.link || '',
                                     placeHolder: '選擇或貼上外部連結',
-                                    callback: (text) => {
+                                    callback: text => {
                                         data.link = text;
                                     },
                                 }),
@@ -540,7 +564,7 @@ export class MenusSetting {
                                     title: '分類名稱',
                                     default: data.title || '',
                                     placeHolder: '請輸入分類名稱',
-                                    callback: (text) => {
+                                    callback: text => {
                                         data.title = text;
                                     },
                                 }),
@@ -549,7 +573,7 @@ export class MenusSetting {
                                     title: '',
                                     default: data.link || '',
                                     placeHolder: '請輸入分類標籤',
-                                    callback: (text) => {
+                                    callback: text => {
                                         data.link = text;
                                     },
                                 }),