ts-glitter 21.9.6 → 21.9.8

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

@@ -9,7 +9,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 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 { ShareDialog } from '../glitterBundle/dialog/ShareDialog.js';
 const html = String.raw;
@@ -17,18 +16,17 @@ export class MenusSetting {
     static main(gvc, widget, def) {
         const html = String.raw;
         const glitter = gvc.glitter;
+        const dialog = new ShareDialog(glitter);
         const vm = {
             type: 'list',
             index: 0,
             dataList: undefined,
             query: '',
             tab: def || 'menu',
-            select: { title: '', tag: '' }
+            select: { title: '', tag: '' },
         };
-        const filterID = gvc.glitter.getUUID();
-        let vmi = undefined;
         function getDatalist() {
-            return vm.dataList.map((dd, index) => {
+            return vm.dataList.map((dd) => {
                 return [
                     {
                         key: '選單名稱',
@@ -39,9 +37,6 @@ export class MenusSetting {
         }
         return gvc.bindView(() => {
             const id = glitter.getUUID();
-            function refresh() {
-                gvc.notifyDataChange(id);
-            }
             return {
                 bind: id,
                 dataList: [{ obj: vm, key: 'type' }],
@@ -56,7 +51,6 @@ export class MenusSetting {
                             function next() {
                                 var _a;
                                 return __awaiter(this, void 0, void 0, function* () {
-                                    const dialog = new ShareDialog(gvc.glitter);
                                     dialog.dataLoading({ visible: true });
                                     const tab = vm.tab === 'menu' ? `頁首選單` : `頁腳選單`;
                                     let menu_all = (yield ApiUser.getPublicConfig('menu-setting-list', 'manager')).response.value;
@@ -64,14 +58,14 @@ export class MenusSetting {
                                     menu_all.list = [
                                         {
                                             tag: gvc.glitter.getUUID(),
-                                            title: title || [tab, `${(menu_all.list.length + 1)}`].join(''),
-                                            tab: vm.tab === 'menu' ? 'menu-setting' : 'footer-setting'
-                                        }
+                                            title: title || [tab, `${menu_all.list.length + 1}`].join(''),
+                                            tab: vm.tab === 'menu' ? 'menu-setting' : 'footer-setting',
+                                        },
                                     ].concat(menu_all.list);
                                     yield ApiUser.setPublicConfig({
                                         key: 'menu-setting-list',
                                         value: menu_all,
-                                        user_id: 'manager'
+                                        user_id: 'manager',
                                     });
                                     dialog.dataLoading({ visible: false });
                                     gvc.notifyDataChange(id);
@@ -84,13 +78,13 @@ export class MenusSetting {
                                     return [
                                         BgWidget.editeInput({
                                             title: '',
-                                            callback: (text) => {
+                                            callback: text => {
                                                 title = text;
                                             },
                                             default: title,
                                             gvc: gvc,
-                                            placeHolder: '請輸入選單名稱'
-                                        })
+                                            placeHolder: '請輸入選單名稱',
+                                        }),
                                     ].join('');
                                 },
                                 footer_html: (gvc) => {
@@ -99,17 +93,19 @@ export class MenusSetting {
                                         gvc.closeDialog();
                                     }), '儲存');
                                 },
-                                width: 300
+                                width: 300,
                             });
                         })))}
               </div>
-              ${def ? `` : BgWidget.tab([
-                            { title: '主選單', key: 'menu' },
-                            { title: '頁腳', key: 'footer' }
-                        ], gvc, vm.tab, (text) => {
-                            vm.tab = text;
-                            gvc.notifyDataChange(id);
-                        }, `${document.body.clientWidth < 800 ? `` : `margin-bottom:0px !important;`}
+              ${def
+                            ? ''
+                            : BgWidget.tab([
+                                { title: '主選單', key: 'menu' },
+                                { title: '頁腳', key: 'footer' },
+                            ], gvc, vm.tab, text => {
+                                vm.tab = text;
+                                gvc.notifyDataChange(id);
+                            }, `${document.body.clientWidth < 800 ? '' : `margin-bottom:0px !important;`}
                 `)}
               ${BgWidget.container(BgWidget.mainCard(BgWidget.tableV3({
                             gvc: gvc,
@@ -119,12 +115,16 @@ export class MenusSetting {
                                 let menu_all = (yield ApiUser.getPublicConfig('menu-setting-list', 'manager')).response.value;
                                 menu_all.list = (_a = menu_all.list) !== null && _a !== void 0 ? _a : [];
                                 vm.dataList = [
-                                    { tag: tag, title: `
-                       <div> ${vm.tab === 'menu' ? `頁首選單` : `頁腳選單`} <span style="font-size:12px;color:#36B;">系統預設</span></div>
-                        ` },
-                                    ...menu_all.list.filter((d1) => {
-                                        return d1.tab === tag;
-                                    })
+                                    {
+                                        tag: tag,
+                                        title: html `
+                            <div>
+                              ${vm.tab === 'menu' ? '頁首選單' : '頁腳選單'}
+                              <span style="font-size: 12px; color: #36B;">系統預設</span>
+                            </div>
+                          `,
+                                    },
+                                    ...menu_all.list.filter((d1) => d1.tab === tag),
                                 ];
                                 vmi.pageSize = 1;
                                 vmi.originalData = vm.dataList;
@@ -132,7 +132,7 @@ export class MenusSetting {
                                 vmi.loading = false;
                                 vmi.callback();
                             }),
-                            rowClick: (data, index) => {
+                            rowClick: (_, index) => {
                                 vm.select = vm.dataList[index];
                                 vm.type = 'replace';
                             },
@@ -163,8 +163,8 @@ export class MenusSetting {
                     }
                 },
                 divCreate: {
-                    class: `w-100 `,
-                    style: `max-width:100%;`,
+                    class: 'w-100',
+                    style: 'max-width: 100%;',
                 },
             };
         });
@@ -179,8 +179,10 @@ export class MenusSetting {
             },
             selected: false,
             loading: true,
-            language: window.parent.store_info.language_setting.def
+            language: window.parent.store_info.language_setting.def,
         };
+        const gvc = cf.gvc;
+        const dialog = new ShareDialog(gvc.glitter);
         ApiUser.getPublicConfig(cf.key, 'manager').then((data) => {
             if (data.response.value) {
                 vm.link = data.response.value;
@@ -200,16 +202,17 @@ export class MenusSetting {
                     vm.link[a] = (_a = vm.link[a]) !== null && _a !== void 0 ? _a : [];
                     clearNoNeedData(vm.link[a]);
                 }
-                const dialog = new ShareDialog(gvc.glitter);
                 dialog.dataLoading({ visible: true });
                 let menu_all = (yield ApiUser.getPublicConfig('menu-setting-list', 'manager')).response.value;
                 menu_all.list = (_b = menu_all.list) !== null && _b !== void 0 ? _b : [];
-                const find_ = menu_all.list.find((d1) => { return d1.tag === cf.key; });
+                const find_ = menu_all.list.find((d1) => {
+                    return d1.tag === cf.key;
+                });
                 find_ && (find_.title = cf.title);
                 yield ApiUser.setPublicConfig({
                     key: 'menu-setting-list',
                     value: menu_all,
-                    user_id: 'manager'
+                    user_id: 'manager',
                 });
                 ApiUser.setPublicConfig({
                     key: cf.key,
@@ -258,7 +261,6 @@ export class MenusSetting {
                 return !d1.selected;
             });
         }
-        const gvc = cf.gvc;
         function refresh() {
             gvc.notifyDataChange(vm.id);
         }
@@ -273,8 +275,8 @@ export class MenusSetting {
               ${BgWidget.goBack(cf.gvc.event(() => {
                         cf.goBack();
                     }))}${BgWidget.title((_b = cf.title) !== null && _b !== void 0 ? _b : '選單設定')}
-            <div class="mx-2 ${['menu-setting', 'footer-setting', 'text-manager'].includes(cf.key) ? `d-none` : ``}">
-              ${BgWidget.grayButton('重新命名', gvc.event(() => {
+              <div class="mx-2 ${['menu-setting', 'footer-setting', 'text-manager'].includes(cf.key) ? 'd-none' : ''}">
+                ${BgWidget.grayButton('重新命名', gvc.event(() => {
                         BgWidget.settingDialog({
                             gvc: gvc,
                             title: '重新命名',
@@ -282,13 +284,13 @@ export class MenusSetting {
                                 return [
                                     BgWidget.editeInput({
                                         title: '',
-                                        callback: (text) => {
+                                        callback: text => {
                                             cf.title = text;
                                         },
                                         default: cf.title,
                                         gvc: gvc,
-                                        placeHolder: ''
-                                    })
+                                        placeHolder: '',
+                                    }),
                                 ].join('');
                             },
                             footer_html: (gvc) => {
@@ -297,13 +299,11 @@ export class MenusSetting {
                                     refresh();
                                 }), '儲存');
                             },
-                            width: 500
+                            width: 500,
                         });
                     }))}
-            </div>
-           
+              </div>
               <div class="flex-fill"></div>
-          
               ${LanguageBackend.switchBtn({
                         gvc: gvc,
                         language: vm.language,
@@ -321,19 +321,13 @@ export class MenusSetting {
                     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`}"
+                      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({
-                        items: link,
-                    })}項
+                        已選取${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"
@@ -356,26 +350,18 @@ export class MenusSetting {
                       <div
                         class="${allSelect({
                         items: link,
-                        selected: !link.find(dd => {
-                            return !dd.selected;
-                        }),
+                        selected: !link.find(dd => !dd.selected),
                     })
-                        ? `fa-solid fa-square-check`
-                        : `fa-regular fa-square`}"
-                        style="color:#393939;width: 16px; height: 16px;cursor: pointer;"
+                        ? 'fa-solid fa-square-check'
+                        : 'fa-regular fa-square'}"
+                        style="color: #393939; width: 16px; height: 16px; cursor: pointer;"
                         onclick="${cf.gvc.event((e, event) => {
                         event.stopPropagation();
-                        if (link.find(dd => {
-                            return !dd.selected;
-                        })) {
-                            selectAll({
-                                items: link,
-                            });
+                        if (link.find(dd => !dd.selected)) {
+                            selectAll({ items: link });
                         }
                         else {
-                            clearAll({
-                                items: link,
-                            });
+                            clearAll({ items: link });
                         }
                         gvc.notifyDataChange(vm.id);
                     })}"
@@ -400,7 +386,7 @@ export class MenusSetting {
                                             .map((dd, index) => {
                                             const list = html `
                                         <div
-                                          class=" w-100 "
+                                          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) {
@@ -414,7 +400,7 @@ export class MenusSetting {
                                                 ? `fa-solid fa-square-check`
                                                 : `fa-regular fa-square`}"
                                             style="color:#393939;width: 16px; height: 16px;"
-                                            onclick="${cf.gvc.event((e, event) => {
+                                            onclick="${cf.gvc.event((_, event) => {
                                                 event.stopPropagation();
                                                 dd.selected = !dd.selected;
                                                 if (dd.selected) {
@@ -447,9 +433,9 @@ export class MenusSetting {
                                                 </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>`
-                                                : ``}
+                                                    ? html `<i class="fa-solid fa-angle-down color39"></i>`
+                                                    : html `<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;"
@@ -469,11 +455,12 @@ export class MenusSetting {
                                             <div class="flex-fill"></div>
                                             <div
                                               class="child me-2"
-                                              onclick="${cf.gvc.event((e, event) => {
+                                              onclick="${cf.gvc.event((_, event) => {
                                                 event.stopPropagation();
                                                 MenusSetting.editEvent({
                                                     link: '',
                                                     title: '',
+                                                    visible_type: 'all',
                                                     items: [],
                                                 }, data => {
                                                     dd.items = dd.items || [];
@@ -486,7 +473,7 @@ export class MenusSetting {
                                             </div>
                                             <div
                                               class="child"
-                                              onclick="${cf.gvc.event((e, event) => {
+                                              onclick="${cf.gvc.event((_, event) => {
                                                 event.stopPropagation();
                                                 MenusSetting.editEvent(dd, data => {
                                                     array[index] = data;
@@ -501,13 +488,13 @@ export class MenusSetting {
                                         ${dd.items && dd.items.length > 0
                                                 ? html `
                                               <div
-                                                class=" w-100 ${dd.toggle ? `` : `d-none`}"
+                                                class=" w-100 ${dd.toggle ? '' : 'd-none'}"
                                                 style="padding-left: 35px;"
                                               >
                                                 ${renderItems(dd.items)}
                                               </div>
                                             `
-                                                : ``}
+                                                : ''}
                                       `;
                                             return html `<li class="w-100 ">${list}</li>`;
                                         })
@@ -515,8 +502,8 @@ export class MenusSetting {
                                     },
                                     divCreate: {
                                         elem: 'ul',
-                                        class: `w-100 my-2`,
-                                        style: `display:flex;flex-direction: column;gap:18px;`,
+                                        class: 'w-100 my-2',
+                                        style: 'display:flex; flex-direction: column; gap: 18px;',
                                     },
                                     onCreate: () => {
                                         gvc.glitter.addMtScript([
@@ -528,11 +515,11 @@ export class MenusSetting {
                                             if (window.Sortable) {
                                                 try {
                                                     gvc.addStyle(`
-                                                                                ul {
-                                                                                    list-style: none;
-                                                                                    padding: 0;
-                                                                                }
-                                                                            `);
+                                          ul {
+                                            list-style: none;
+                                            padding: 0;
+                                          }
+                                        `);
                                                     function swapArr(arr, index1, index2) {
                                                         const data = arr[index1];
                                                         arr.splice(index1, 1);
@@ -566,6 +553,7 @@ export class MenusSetting {
                                     MenusSetting.editEvent({
                                         link: '',
                                         title: '',
+                                        visible_type: 'all',
                                         items: [],
                                     }, data => {
                                         array.push(data);
@@ -592,26 +580,28 @@ export class MenusSetting {
                 </div>
               </div>`)}
             <div class="update-bar-container">
-              ${['menu-setting', 'footer-setting', 'text-manager'].includes(cf.key) ? `` : BgWidget.danger(gvc.event(() => __awaiter(this, void 0, void 0, function* () {
-                        const dialog = new ShareDialog(gvc.glitter);
-                        dialog.checkYesOrNot({
-                            text: '是否確認刪除?',
-                            callback: (response) => __awaiter(this, void 0, void 0, function* () {
-                                if (response) {
-                                    dialog.dataLoading({ visible: true });
-                                    let menu_all = (yield ApiUser.getPublicConfig('menu-setting-list', 'manager')).response.value;
-                                    menu_all.list = menu_all.list.filter((d1) => d1.tag != cf.key);
-                                    yield ApiUser.setPublicConfig({
-                                        key: 'menu-setting-list',
-                                        value: menu_all,
-                                        user_id: 'manager'
-                                    });
-                                    dialog.dataLoading({ visible: false });
-                                    cf.goBack();
-                                }
-                            })
-                        });
-                    })))}
+              ${['menu-setting', 'footer-setting', 'text-manager'].includes(cf.key)
+                        ? ''
+                        : BgWidget.danger(gvc.event(() => __awaiter(this, void 0, void 0, function* () {
+                            dialog.checkYesOrNot({
+                                text: '是否確認刪除?',
+                                callback: (response) => __awaiter(this, void 0, void 0, function* () {
+                                    if (response) {
+                                        dialog.dataLoading({ visible: true });
+                                        let menu_all = (yield ApiUser.getPublicConfig('menu-setting-list', 'manager')).response
+                                            .value;
+                                        menu_all.list = menu_all.list.filter((d1) => d1.tag != cf.key);
+                                        yield ApiUser.setPublicConfig({
+                                            key: 'menu-setting-list',
+                                            value: menu_all,
+                                            user_id: 'manager',
+                                        });
+                                        dialog.dataLoading({ visible: false });
+                                        cf.goBack();
+                                    }
+                                }),
+                            });
+                        })))}
               ${BgWidget.cancel(gvc.event(() => {
                         cf.goBack();
                     }))}
@@ -628,7 +618,226 @@ export class MenusSetting {
     }
     static editEvent(data, save) {
         const gvc = window.parent.glitter.pageConfig[0].gvc;
-        const rightMenu = window.parent.glitter.share.NormalPageEditor;
+        const glitter = gvc.glitter;
+        const rightMenu = glitter.share.NormalPageEditor;
+        const vm = {
+            search: '',
+            levelList: undefined,
+            userList: undefined,
+            visibleDataList: undefined,
+            cloneData: structuredClone(data),
+            show: false,
+            dataLoading: true,
+        };
+        const ids = {
+            main: glitter.getUUID(),
+            visibleSelect: glitter.getUUID(),
+            dataArray: glitter.getUUID(),
+        };
+        const setVisibleSelect = () => {
+            return gvc.bindView({
+                bind: ids.visibleSelect,
+                view: () => {
+                    var _a;
+                    return html `
+            <div class="tx_normal fw-normal">選單可見對象</div>
+            <div class="d-flex align-items-center" style="margin-top: 8px; gap: 10px;">
+              ${[
+                        BgWidget.select({
+                            gvc,
+                            callback: value => {
+                                data.visible_type = value;
+                                data.visible_data_array = [];
+                                vm.visibleDataList = [];
+                                vm.show = false;
+                                vm.dataLoading = true;
+                                gvc.notifyDataChange([ids.visibleSelect, ids.dataArray]);
+                            },
+                            default: (_a = data.visible_type) !== null && _a !== void 0 ? _a : 'all',
+                            options: [
+                                { key: 'all', value: '所有顧客' },
+                                { key: 'loggedIn', value: '已登入顧客' },
+                                { key: 'user', value: '特定顧客' },
+                                { key: 'level', value: '特定會員等級' },
+                            ],
+                        }),
+                        ['user', 'level'].includes(data.visible_type)
+                            ? BgWidget.grayButton('選擇', gvc.event(() => {
+                                if (!vm.show) {
+                                    vm.show = true;
+                                    gvc.notifyDataChange(ids.dataArray);
+                                }
+                            }))
+                            : '',
+                    ].join('')}
+            </div>
+          `;
+                },
+                divCreate: {
+                    style: 'margin-top: 8px;',
+                },
+            });
+        };
+        const optionView = () => {
+            const id = glitter.getUUID();
+            return gvc.bindView({
+                bind: id,
+                view: () => {
+                    var _a;
+                    function includesItem(item) {
+                        var _a, _b;
+                        const text = vm.search.toLowerCase();
+                        return ((_a = item.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(text)) || ((_b = item.note) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(text));
+                    }
+                    const targetList = data.visible_type === 'user' ? vm.userList : vm.levelList;
+                    if (!targetList) {
+                        return BgWidget.spinner({ container: { class: 'w-100' } });
+                    }
+                    const filterList = targetList.filter((item) => includesItem(item));
+                    const filterListIdArray = new Set(filterList.map((item) => item.key));
+                    return BgWidget.multiCheckboxContainer(gvc, filterList, (_a = data.visible_data_array) !== null && _a !== void 0 ? _a : [], items => {
+                        var _a;
+                        data.visible_data_array = [
+                            ...new Set(((_a = data.visible_data_array) !== null && _a !== void 0 ? _a : [])
+                                .filter(item => {
+                                return !filterListIdArray.has(item);
+                            })
+                                .concat(items)),
+                        ];
+                    });
+                },
+                divCreate: {
+                    style: 'max-height: 300px; overflow-y: auto; width: 100%;',
+                },
+                onCreate: () => {
+                    if (vm.userList === undefined) {
+                        this.getUserOption().then(data => {
+                            vm.userList = data;
+                            gvc.notifyDataChange(id);
+                        });
+                    }
+                    if (vm.levelList === undefined) {
+                        this.getLevelOption().then(data => {
+                            vm.levelList = data;
+                            gvc.notifyDataChange(id);
+                        });
+                    }
+                },
+            });
+        };
+        const setVisibleDataArray = () => {
+            return gvc.bindView({
+                bind: ids.dataArray,
+                view: () => {
+                    if (data.visible_type === 'user' || data.visible_type === 'level') {
+                        if (!vm.show) {
+                            if (vm.dataLoading) {
+                                return BgWidget.spinner({ container: { class: 'w-100' } });
+                            }
+                            return html `
+                <div class="mt-2">${data.visible_type === 'user' ? '顧客名稱' : '會員等級'}</div>
+                ${BgWidget.horizontalLine()}
+                <div class="d-flex flex-column gap-1">
+                  ${Array.isArray(vm.visibleDataList)
+                                ? data.visible_type === 'user'
+                                    ? vm.visibleDataList
+                                        .map(item => {
+                                        return html `<div class="d-flex gap-1">
+                              <div>${item.userData.name}</div>
+                              ${BgWidget.grayNote(item.account)}
+                            </div>`;
+                                    })
+                                        .join('')
+                                    : vm.visibleDataList
+                                        .map(item => {
+                                        return html `<div class="d-flex gap-1">
+                              <div>${item.title.replace('會員等級 - ', '')}</div>
+                            </div>`;
+                                    })
+                                        .join('')
+                                : ''}
+                </div>
+              `;
+                        }
+                        return BgWidget.mainCard([
+                            html `<div
+                  class="d-flex align-items-center cursor_pointer"
+                  onclick="${gvc.event(() => {
+                                vm.show = false;
+                                vm.dataLoading = true;
+                                gvc.notifyDataChange(ids.dataArray);
+                            })}"
+                >
+                  ${BgWidget.goBack('')}
+                  <span>返回</span>
+                </div>`,
+                            BgWidget.searchPlace(gvc.event(e => {
+                                vm.search = e.value;
+                                gvc.notifyDataChange(ids.dataArray);
+                            }), vm.search || '', '搜尋', undefined, '0', 'width: 100%;'),
+                            optionView(),
+                        ].join(''), 'd-flex flex-column align-items-start');
+                    }
+                    return '';
+                },
+                divCreate: {
+                    class: 'mt-1 p-1',
+                },
+                onCreate: () => {
+                    if (vm.dataLoading && (data.visible_type === 'user' || data.visible_type === 'level')) {
+                        Promise.all([
+                            Array.isArray(data.visible_data_array) && data.visible_data_array.length > 0
+                                ? data.visible_type === 'user'
+                                    ? this.getUserList(data.visible_data_array)
+                                    : this.getLevelList(data.visible_data_array)
+                                : [],
+                        ]).then(([visibleDataList]) => {
+                            vm.visibleDataList = visibleDataList;
+                            vm.dataLoading = false;
+                            gvc.notifyDataChange(ids.dataArray);
+                        });
+                    }
+                },
+            });
+        };
+        const backToDefault = () => {
+            return html `<div
+        class="position-absolute bottom-0 left-0 w-100 d-flex align-items-center justify-content-end p-3 border-top pe-4"
+        style="gap: 10px; background-color: #fff"
+      >
+        ${BgWidget.cancel(gvc.event(() => {
+                data = vm.cloneData;
+                vm.show = false;
+                vm.dataLoading = true;
+                gvc.notifyDataChange(ids.main);
+            }), '回到預設值')}
+      </div>`;
+        };
+        const view = [
+            BgWidget.editeInput({
+                gvc: gvc,
+                title: '選單名稱',
+                default: data.title || '',
+                placeHolder: '請輸入選單名稱',
+                callback: text => {
+                    data.title = text;
+                },
+            }),
+            BgWidget.linkList({
+                gvc: gvc,
+                title: '連結位置',
+                default: data.link || '',
+                placeHolder: '選擇或貼上外部連結',
+                callback: text => {
+                    data.link = text;
+                },
+            }),
+            setVisibleSelect(),
+            setVisibleDataArray(),
+            backToDefault(),
+        ]
+            .map(h => html `<div class="w-100">${h}</div>`)
+            .join('');
         rightMenu.closeEvent = () => {
             if (data.title.length > 0 || data.link.length > 0) {
                 save(data);
@@ -637,39 +846,10 @@ export class MenusSetting {
         rightMenu.toggle({
             visible: true,
             title: '新增選單',
-            view: [
-                gvc.bindView(() => {
-                    const id = gvc.glitter.getUUID();
-                    return {
-                        bind: id,
-                        view: () => {
-                            return [
-                                EditorElem.editeInput({
-                                    gvc: gvc,
-                                    title: '選單名稱',
-                                    default: data.title || '',
-                                    placeHolder: '請輸入選單名稱',
-                                    callback: text => {
-                                        data.title = text;
-                                    },
-                                }),
-                                BgWidget.linkList({
-                                    gvc: gvc,
-                                    title: '',
-                                    default: data.link || '',
-                                    placeHolder: '選擇或貼上外部連結',
-                                    callback: text => {
-                                        data.link = text;
-                                    },
-                                }),
-                            ].join('');
-                        },
-                        divCreate: {
-                            style: `padding:20px;`,
-                        },
-                    };
-                }),
-            ].join(''),
+            view: gvc.bindView({
+                bind: ids.main,
+                view: () => html `<div class="d-flex flex-column p-3">${view}</div>`,
+            }),
             right: true,
         });
     }
@@ -712,7 +892,7 @@ export class MenusSetting {
                             ].join('');
                         },
                         divCreate: {
-                            style: `padding:20px;`,
+                            style: 'padding: 20px;',
                         },
                     };
                 }),
@@ -720,5 +900,73 @@ export class MenusSetting {
             right: true,
         });
     }
+    static getUserList(visible_data_array) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield ApiUser.getUserList({
+                page: 0,
+                limit: 15,
+                only_id: true,
+                id: visible_data_array.join(','),
+            }).then(dd => {
+                try {
+                    return dd.response.data;
+                }
+                catch (error) {
+                    return [];
+                }
+            });
+        });
+    }
+    static getUserOption() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield ApiUser.getUserList({
+                page: 0,
+                limit: 15,
+                only_id: true,
+            }).then(dd => {
+                var _a;
+                try {
+                    return ((_a = dd.response.data.map((item) => {
+                        var _a;
+                        return {
+                            key: item.userID,
+                            name: (_a = item.userData.name) !== null && _a !== void 0 ? _a : '（尚無姓名）',
+                            note: item.userData.email,
+                        };
+                    })) !== null && _a !== void 0 ? _a : []);
+                }
+                catch (error) {
+                    return [];
+                }
+            });
+        });
+    }
+    static getLevelList(visible_data_array) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield ApiUser.getUserGroupList('level').then(r => {
+                var _a;
+                if (r.result && Array.isArray((_a = r.response) === null || _a === void 0 ? void 0 : _a.data)) {
+                    return r.response.data.filter((d) => {
+                        return visible_data_array === null || visible_data_array === void 0 ? void 0 : visible_data_array.includes(d.tag === '' ? 'default' : d.tag);
+                    });
+                }
+                return [];
+            });
+        });
+    }
+    static getLevelOption() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield ApiUser.getUserGroupList('level').then(r => {
+                var _a;
+                if (r.result && Array.isArray((_a = r.response) === null || _a === void 0 ? void 0 : _a.data)) {
+                    return r.response.data.map((d) => ({
+                        key: d.tag || 'default',
+                        name: d.title.replace('會員等級 - ', ''),
+                    }));
+                }
+                return [];
+            });
+        });
+    }
 }
 window.glitter.setModule(import.meta.url, MenusSetting);