ts-glitter 21.3.7 → 21.3.9

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

@@ -977,8 +977,8 @@ export class BgWidget {
                   obj.default = e.value;
                   obj.oninput && obj.oninput(e.value);
                 })}"
-                onclick="${obj.gvc.event((e)=>{
-                  obj.onclick && obj.onclick(e)
+                onclick="${obj.gvc.event(e => {
+                  obj.onclick && obj.onclick(e);
                 })}"
                 value="${(obj.default ?? '').replace(/"/g, '"')}"
                 ${obj.readonly ? `readonly` : ``}
@@ -2784,7 +2784,7 @@ ${obj.default ?? ''}</textarea
                   [
                     this.searchPlace(
                       gvc.event(e => {
-                        search = e.value;
+                        search = `${e.value}`.trim();
                         gvc.notifyDataChange(id);
                       }),
                       search || '',
@@ -2794,11 +2794,19 @@ ${obj.default ?? ''}</textarea
                     ),
                     this.multiCheckboxContainer(
                       gvc,
-                      data.filter(item => item.name.includes(search)),
+                      data.filter(item => item.name.toLowerCase().includes(search.toLowerCase())),
                       def,
                       stringArray => {
-                        def = stringArray;
-                        callback(stringArray);
+                        def = [
+                          ...new Set(
+                            def
+                              .filter(tag => {
+                                return !tag.toLowerCase().includes(search.toLowerCase());
+                              })
+                              .concat(stringArray)
+                          ),
+                        ];
+                        callback(def);
                       },
                       {
                         single: false,
@@ -3529,6 +3537,175 @@ ${obj.default ?? ''}</textarea
     </div>`;
   }
 
+  static searchTagsFilter(
+    gvc: GVC,
+    def: string[],
+    callback: (data: string[]) => void,
+    placeholder: string,
+    margin?: string
+  ) {
+    const id = gvc.glitter.getUUID();
+    let loading = true;
+    let show = false;
+    let tagList: { key: string; name: string }[] = [];
+    let search = '';
+    let selectTags: string[] = def || [];
+
+    return gvc.bindView({
+      bind: id,
+      view: () => {
+        if (loading) {
+          return '';
+        }
+
+        if (show) {
+          return html`<div
+            style="margin-top: 1px;border: 8px solid #fff; outline: 1px solid #aeaeae; height: 300px; width: 100%; border-radius: 5px; position: absolute; top: 0; background-color: #fff; border-radius: 5px; overflow: auto;"
+          >
+            <div class="position-relative">
+              <div
+                class="w-100 d-flex align-items-center gap-1 position-sticky mb-1"
+                style="top: 0; background-color: #fff;"
+              >
+                <div class="w-100">
+                  <i
+                    class="fa-regular fa-magnifying-glass"
+                    style="font-size: 18px; color: #A0A0A0; position: absolute; left: 18px; top: 50%; transform: translateY(-50%);"
+                    aria-hidden="true"
+                  ></i>
+                  <input
+                    class="form-control h-100"
+                    style="border-radius: 10px; border: 1px solid #DDD; padding-left: 50px; height: 100%;"
+                    placeholder="${placeholder}"
+                    onchange="${gvc.event(e => {
+                      search = `${e.value}`.trim();
+                      gvc.notifyDataChange(id);
+                    })}"
+                    value="${search}"
+                  />
+                </div>
+                ${this.customButton({
+                  button: {
+                    color: 'black',
+                    size: 'md',
+                  },
+                  text: {
+                    name: '確認',
+                    style: 'font-size: 14px;',
+                  },
+                  event: gvc.event(() => {
+                    show = false;
+                    gvc.notifyDataChange(id);
+                    callback(selectTags);
+                  }),
+                })}
+              </div>
+              <div class="p-2">
+                ${this.multiCheckboxContainer(
+                  gvc,
+                  tagList.filter(tag => tag.name.toLowerCase().includes(search.toLowerCase())),
+                  selectTags,
+                  text => {
+                    if (search) {
+                      selectTags = [
+                        ...new Set(
+                          selectTags
+                            .filter(tag => {
+                              return !tag.toLowerCase().includes(search.toLowerCase());
+                            })
+                            .concat(text)
+                        ),
+                      ];
+                    } else {
+                      selectTags = text;
+                    }
+                  },
+                  { single: false }
+                )}
+              </div>
+            </div>
+          </div>`;
+        } else {
+          return html`<div
+            class="h-100"
+            onclick="${gvc.event(() => {
+              show = true;
+              gvc.notifyDataChange(id);
+            })}"
+          >
+            <i
+              class="fa-regular fa-magnifying-glass"
+              style="font-size: 18px; color: #A0A0A0; position: absolute; left: 18px; top: 50%; transform: translateY(-50%);"
+              aria-hidden="true"
+            ></i>
+            <div
+              class="form-control h-100"
+              style="border-radius: 10px; border: 1px solid #DDD; padding-left: 50px; height: 100%; color: #aeaeae; ${selectTags.length >
+                0 && false
+                ? 'padding: 0.3rem 3rem;'
+                : ''}"
+            >
+              ${placeholder}
+              <!-- ${selectTags.length > 0
+                ? html`<div class="d-flex flex-wrap gap-2">
+                    ${selectTags.map(item => this.normalInsignia(`#${item}`)).join('')}
+                  </div>`
+                : placeholder} -->
+            </div>
+          </div>`;
+        }
+      },
+      divCreate: {
+        class: 'w-100 position-relative search-tags-filter',
+        style: `height: 40px !important; margin: ${margin ?? 0};`,
+      },
+      onCreate: async () => {
+        if (loading) {
+          tagList = await ApiUser.getPublicConfig('product_manager_tags', 'manager').then((dd: any) => {
+            if (dd.result && dd.response?.value?.list) {
+              return dd.response.value.list.map((item: string) => {
+                return {
+                  key: item,
+                  name: `#${item}`,
+                };
+              });
+            }
+            return [];
+          });
+          loading = false;
+          gvc.notifyDataChange(id);
+        } else if (show) {
+          function hasSearchTagsFilterAncestor(target: EventTarget | null): boolean {
+            let el = target as Element | null;
+
+            for (let i = 0; i < 10 && el; i++) {
+              if (el.classList.contains('search-tags-filter')) {
+                return true;
+              }
+              el = el.parentElement;
+            }
+
+            return false;
+          }
+
+          function clickEvent(event: any) {
+            if (
+              !hasSearchTagsFilterAncestor(event.target) &&
+              !event.target.classList.contains('form-check-input') &&
+              !event.target.classList.contains('form-check-label')
+            ) {
+              show = false;
+              gvc.notifyDataChange(id);
+              window.parent.document.removeEventListener('click', clickEvent);
+            }
+          }
+
+          setTimeout(() => window.parent.document.addEventListener('click', clickEvent), 100);
+        }
+      },
+    });
+  }
+
   static activeFilter = '';
 
   static setActiveFilter = (gvc: GVC, key: ActiveFilterKeys) => {
@@ -3950,7 +4127,10 @@ ${obj.default ?? ''}</textarea
                   <div class="c_dialog_main">
                     ${obj.readonly
                       ? ''
-                      : html` <div class="d-flex" style="gap: 12px;">
+                      : html` <div
+                          class="d-flex position-sticky px-1"
+                          style="gap: 12px; top: 0; background-color: #fff;"
+                        >
                           ${this.searchFilter(
                             gvc.event((e, event) => {
                               vm.query = e.value;
@@ -5487,11 +5667,16 @@ ${obj.default ?? ''}</textarea
             if (vm.loading) {
               return html` <div class="my-4">${this.spinner()}</div>`;
             }
-            return html` <div class="bg-white shadow rounded-3 h-100 d-flex flex-column" style="width: 100%; ">
-              <div class="w-100 d-flex align-items-center p-3 border-bottom" style="background: #F2F2F2;">
-                <div class="tx_700">${obj.title ?? '產品列表'}</div>
+            return html` <div
+              class="bg-white shadow rounded-3 h-100 d-flex flex-column position-relative overflow-hidden"
+              style="width: 100%; padding-top: 61px;"
+            >
+              <div
+                class="w-100 d-flex align-items-center p-3 border-bottom position-absolute"
+                style="background: #F2F2F2;top:0;left:0"
+              >
+                <div class="tx_700 dialog-title">${obj.title ?? '圖片庫'}</div>
                 <div class="flex-fill"></div>
-
                 <i
                   class="fa-sharp fa-solid fa-xmark fs-5 text-dark cursor_pointer"
                   onclick="${gvc.event(() => {
@@ -5502,9 +5687,9 @@ ${obj.default ?? ''}</textarea
                   })}"
                 ></i>
               </div>
-              <div class="c_dialog flex-fill">
+              <div class="c_dialog flex-fill " style="height: 600px;">
                 <div class="c_dialog_body d-flex flex-column h-100">
-                  <div class="c_dialog_main flex-fill" style="gap: 24px;max-height:100%; ">
+                  <div class="c_dialog_main flex-fill" style="gap: 24px;max-height:100%;padding-top:0;">
                     ${obj.innerHTML(gvc) ?? ''}
                   </div>
                   <div class="c_dialog_bar">${obj.footer_html(gvc) ?? ''}</div>

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

@@ -364,7 +364,7 @@ export class POSSetting {
               >
                 <div
                   class="d-flex flex-column position-relative"
-                  style="width: 542px;padding: 32px;background-color: white;border-radius: 10px;max-width: calc(100% - 20px);overflow-y:auto;max-height:calc(100% - 20px);"
+                  style="width: 542px;padding: 24px;background-color: white;border-radius: 10px;max-width: calc(100% - 20px);overflow-y:auto;max-height:calc(100% - 20px);"
                   onclick="${gvc.event((_, event) => event.stopPropagation())}"
                 >
                   <div class="w-100 d-block d-sm-flex flex-column flex-sm-row m" style="gap:24px;">
@@ -564,7 +564,7 @@ export class POSSetting {
                                         class: 'd-flex align-items-center justify-content-center',
                                         style: `
                               flex: 1;
-                              padding: 12px 24px;
+                              padding: 12px 12px;
                               font-size: 20px;
                               color: #fff;
                               font-weight: 500;

package/lowcode/cms-plugin/POS-setting.ts

@@ -420,7 +420,7 @@ export class POSSetting {
               >
                 <div
                   class="d-flex flex-column position-relative"
-                  style="width: 542px;padding: 32px;background-color: white;border-radius: 10px;max-width: calc(100% - 20px);overflow-y:auto;max-height:calc(100% - 20px);"
+                  style="width: 542px;padding: 24px;background-color: white;border-radius: 10px;max-width: calc(100% - 20px);overflow-y:auto;max-height:calc(100% - 20px);"
                   onclick="${gvc.event((_, event) => event.stopPropagation())}"
                 >
                   <div class="w-100 d-block d-sm-flex flex-column flex-sm-row m" style="gap:24px;">
@@ -641,7 +641,7 @@ export class POSSetting {
                             class: 'd-flex align-items-center justify-content-center',
                             style: `
                               flex: 1;
-                              padding: 12px 24px;
+                              padding: 12px 12px;
                               font-size: 20px;
                               color: #fff;
                               font-weight: 500;

package/lowcode/cms-plugin/auto-fcm-advertise.js

@@ -184,6 +184,7 @@ export class AutoFcmAdvertise {
                             page: 0,
                             limit: 99999,
                             id: tagData.filter.join(','),
+                            only_id: true,
                         }).then(dd => {
                             dd.response.data.map((user) => {
                                 postData.userList.push({
@@ -202,6 +203,7 @@ export class AutoFcmAdvertise {
                                     page: 0,
                                     limit: 99999,
                                     group: { type: 'level', tag: id },
+                                    only_id: true,
                                 }).then(data => {
                                     data.response.data.map((user) => {
                                         list.push({
@@ -231,6 +233,7 @@ export class AutoFcmAdvertise {
                                     page: 0,
                                     limit: 99999,
                                     group: { type: type },
+                                    only_id: true,
                                 }).then(data => {
                                     let dataArray = data.response.data;
                                     if (data.response.extra) {
@@ -260,6 +263,7 @@ export class AutoFcmAdvertise {
                             page: 0,
                             limit: 99999,
                             filter: { birth: tagData.filter },
+                            only_id: true,
                         }).then(data => {
                             data.response.data.map((user) => {
                                 postData.userList.push({
@@ -274,6 +278,7 @@ export class AutoFcmAdvertise {
                             page: 0,
                             limit: 99999,
                             filter: { tags: tagData.filter },
+                            only_id: true,
                         }).then(data => {
                             data.response.data.map((user) => {
                                 postData.userList.push({
@@ -290,6 +295,7 @@ export class AutoFcmAdvertise {
                             page: 0,
                             limit: 99999,
                             filter: { rebate: { key: 'moreThan', value: tagData.filter } },
+                            only_id: true,
                         }).then(data => {
                             data.response.data.map((user) => {
                                 postData.userList.push({
@@ -357,11 +363,15 @@ export class AutoFcmAdvertise {
           <div style="display:flex; align-items: center; gap: 18px; margin: 8px 0;">
             <div class="tx_normal">${postData.userList.length}人</div>
             ${BgWidget.grayButton('查看名單', gvc.event(() => {
+                    const dialog = new ShareDialog(gvc.glitter);
                     if (postData.userList.length === 0) {
-                        const dialog = new ShareDialog(gvc.glitter);
                         dialog.infoMessage({ text: '目前無預計寄件的顧客' });
                         return;
                     }
+                    if (postData.userList.length > 500) {
+                        dialog.infoMessage({ text: '預覽人數超過500筆，請減少名單人數後再次開啟' });
+                        return;
+                    }
                     const userVM = {
                         dataList: [],
                     };
@@ -377,6 +387,7 @@ export class AutoFcmAdvertise {
                                     page: 0,
                                     limit: 99999,
                                     id: postData.userList.map(user => { var _a; return (_a = user.id) !== null && _a !== void 0 ? _a : 0; }).join(','),
+                                    only_id: true,
                                 }).then(dd => {
                                     if (dd.response.data) {
                                         userVM.dataList = dd.response.data.map((item) => {
@@ -520,8 +531,8 @@ export class AutoFcmAdvertise {
                                                             ApiUser.getUserList({
                                                                 page: 0,
                                                                 limit: 99999,
-                                                                only_id: true,
                                                                 search: data.query,
+                                                                only_id: true,
                                                             }).then(dd => {
                                                                 if (dd.response.data) {
                                                                     vm.dataList = dd.response.data

package/lowcode/cms-plugin/auto-fcm-advertise.ts

@@ -200,6 +200,7 @@ export class AutoFcmAdvertise {
               page: 0,
               limit: 99999,
               id: tagData.filter.join(','),
+              only_id: true,
             }).then(dd => {
               dd.response.data.map((user: any) => {
                 postData.userList.push({
@@ -218,6 +219,7 @@ export class AutoFcmAdvertise {
                   page: 0,
                   limit: 99999,
                   group: { type: 'level', tag: id },
+                  only_id: true,
                 }).then(data => {
                   data.response.data.map((user: any) => {
                     list.push({
@@ -247,6 +249,7 @@ export class AutoFcmAdvertise {
                   page: 0,
                   limit: 99999,
                   group: { type: type },
+                  only_id: true,
                 }).then(data => {
                   // 加入額外的會員資料，例如有訂閱但未註冊者
                   let dataArray = data.response.data;
@@ -277,6 +280,7 @@ export class AutoFcmAdvertise {
               page: 0,
               limit: 99999,
               filter: { birth: tagData.filter },
+              only_id: true,
             }).then(data => {
               data.response.data.map((user: any) => {
                 postData.userList.push({
@@ -291,6 +295,7 @@ export class AutoFcmAdvertise {
               page: 0,
               limit: 99999,
               filter: { tags: tagData.filter },
+              only_id: true,
             }).then(data => {
               data.response.data.map((user: any) => {
                 postData.userList.push({
@@ -307,6 +312,7 @@ export class AutoFcmAdvertise {
               page: 0,
               limit: 99999,
               filter: { rebate: { key: 'moreThan', value: tagData.filter } },
+              only_id: true,
             }).then(data => {
               data.response.data.map((user: any) => {
                 postData.userList.push({
@@ -382,11 +388,18 @@ export class AutoFcmAdvertise {
             ${BgWidget.grayButton(
               '查看名單',
               gvc.event(() => {
+                const dialog = new ShareDialog(gvc.glitter);
+
                 if (postData.userList.length === 0) {
-                  const dialog = new ShareDialog(gvc.glitter);
                   dialog.infoMessage({ text: '目前無預計寄件的顧客' });
                   return;
                 }
+
+                if (postData.userList.length > 500) {
+                  dialog.infoMessage({ text: '預覽人數超過500筆，請減少名單人數後再次開啟' });
+                  return;
+                }
+
                 const userVM = {
                   dataList: [] as { key: string; value: string; note: string }[],
                 };
@@ -402,6 +415,7 @@ export class AutoFcmAdvertise {
                         page: 0,
                         limit: 99999,
                         id: postData.userList.map(user => user.id ?? 0).join(','),
+                        only_id: true,
                       }).then(dd => {
                         if (dd.response.data) {
                           userVM.dataList = dd.response.data.map(
@@ -556,8 +570,8 @@ export class AutoFcmAdvertise {
                                             ApiUser.getUserList({
                                               page: 0,
                                               limit: 99999,
-                                              only_id: true,
                                               search: data.query,
+                                              only_id: true,
                                             }).then(dd => {
                                               if (dd.response.data) {
                                                 vm.dataList = dd.response.data

package/lowcode/cms-plugin/auto-fcm-history.js

@@ -867,6 +867,7 @@ export class BgNotify {
                             page: 0,
                             limit: 99999,
                             id: tagData.filter.join(','),
+                            only_id: true,
                         }).then(dd => {
                             dd.response.data.map((user) => {
                                 if (user.userData.email && user.userData.email.length > 0) {
@@ -888,6 +889,7 @@ export class BgNotify {
                                     page: 0,
                                     limit: 99999,
                                     group: { type: 'level', tag: id },
+                                    only_id: true,
                                 }).then(data => {
                                     data.response.data.map((user) => {
                                         if (user.userData.email) {
@@ -920,6 +922,7 @@ export class BgNotify {
                                     page: 0,
                                     limit: 99999,
                                     group: { type: type },
+                                    only_id: true,
                                 }).then(data => {
                                     let dataArray = data.response.data;
                                     if (data.response.extra) {
@@ -952,6 +955,7 @@ export class BgNotify {
                             page: 0,
                             limit: 99999,
                             filter: { birth: tagData.filter },
+                            only_id: true,
                         }).then(data => {
                             data.response.data.map((user) => {
                                 if (user.userData.email) {
@@ -969,6 +973,7 @@ export class BgNotify {
                             page: 0,
                             limit: 99999,
                             filter: { tags: tagData.filter },
+                            only_id: true,
                         }).then(data => {
                             data.response.data.map((user) => {
                                 if (user.userData.email) {
@@ -988,6 +993,7 @@ export class BgNotify {
                             page: 0,
                             limit: 99999,
                             filter: { rebate: { key: 'moreThan', value: tagData.filter } },
+                            only_id: true,
                         }).then(data => {
                             data.response.data.map((user) => {
                                 if (user.userData.email) {
@@ -1057,11 +1063,15 @@ export class BgNotify {
           <div style="display:flex; align-items: center; gap: 18px; margin: 8px 0;">
             <div class="tx_normal">${postData.userList.length}人</div>
             ${BgWidget.grayButton('查看名單', gvc.event(() => {
+                    const dialog = new ShareDialog(gvc.glitter);
                     if (postData.userList.length === 0) {
-                        const dialog = new ShareDialog(gvc.glitter);
                         dialog.infoMessage({ text: '目前無預計寄件的顧客' });
                         return;
                     }
+                    if (postData.userList.length > 500) {
+                        dialog.infoMessage({ text: '預覽人數超過500筆，請減少名單人數後再次開啟' });
+                        return;
+                    }
                     const userVM = {
                         dataList: [],
                     };
@@ -1077,6 +1087,7 @@ export class BgNotify {
                                     page: 0,
                                     limit: 99999,
                                     id: postData.userList.map(user => { var _a; return (_a = user.id) !== null && _a !== void 0 ? _a : 0; }).join(','),
+                                    only_id: true,
                                 }).then(dd => {
                                     if (dd.response.data) {
                                         userVM.dataList = dd.response.data.map((item) => {
@@ -1234,8 +1245,8 @@ export class BgNotify {
                                                             ApiUser.getUserList({
                                                                 page: 0,
                                                                 limit: 99999,
-                                                                only_id: true,
                                                                 search: data.query,
+                                                                only_id: true,
                                                             }).then(dd => {
                                                                 if (dd.response.data) {
                                                                     vm.dataList = dd.response.data

package/lowcode/cms-plugin/auto-fcm-history.ts

@@ -972,6 +972,7 @@ export class BgNotify {
               page: 0,
               limit: 99999,
               id: tagData.filter.join(','),
+              only_id: true,
             }).then(dd => {
               dd.response.data.map((user: any) => {
                 if (user.userData.email && user.userData.email.length > 0) {
@@ -993,6 +994,7 @@ export class BgNotify {
                   page: 0,
                   limit: 99999,
                   group: { type: 'level', tag: id },
+                  only_id: true,
                 }).then(data => {
                   data.response.data.map((user: any) => {
                     if (user.userData.email) {
@@ -1025,6 +1027,7 @@ export class BgNotify {
                   page: 0,
                   limit: 99999,
                   group: { type: type },
+                  only_id: true,
                 }).then(data => {
                   // 加入額外的會員資料，例如有訂閱但未註冊者
                   let dataArray = data.response.data;
@@ -1058,6 +1061,7 @@ export class BgNotify {
               page: 0,
               limit: 99999,
               filter: { birth: tagData.filter },
+              only_id: true,
             }).then(data => {
               data.response.data.map((user: any) => {
                 if (user.userData.email) {
@@ -1075,6 +1079,7 @@ export class BgNotify {
               page: 0,
               limit: 99999,
               filter: { tags: tagData.filter },
+              only_id: true,
             }).then(data => {
               data.response.data.map((user: any) => {
                 if (user.userData.email) {
@@ -1094,6 +1099,7 @@ export class BgNotify {
               page: 0,
               limit: 99999,
               filter: { rebate: { key: 'moreThan', value: tagData.filter } },
+              only_id: true,
             }).then(data => {
               data.response.data.map((user: any) => {
                 if (user.userData.email) {
@@ -1171,11 +1177,18 @@ export class BgNotify {
             ${BgWidget.grayButton(
               '查看名單',
               gvc.event(() => {
+                const dialog = new ShareDialog(gvc.glitter);
+
                 if (postData.userList.length === 0) {
-                  const dialog = new ShareDialog(gvc.glitter);
                   dialog.infoMessage({ text: '目前無預計寄件的顧客' });
                   return;
                 }
+
+                if (postData.userList.length > 500) {
+                  dialog.infoMessage({ text: '預覽人數超過500筆，請減少名單人數後再次開啟' });
+                  return;
+                }
+
                 const userVM = {
                   dataList: [] as { key: string; value: string; note: string }[],
                 };
@@ -1191,6 +1204,7 @@ export class BgNotify {
                         page: 0,
                         limit: 99999,
                         id: postData.userList.map(user => user.id ?? 0).join(','),
+                        only_id: true,
                       }).then(dd => {
                         if (dd.response.data) {
                           userVM.dataList = dd.response.data.map(
@@ -1357,8 +1371,8 @@ export class BgNotify {
                                           ApiUser.getUserList({
                                             page: 0,
                                             limit: 99999,
-                                            only_id: true,
                                             search: data.query,
+                                            only_id: true,
                                           }).then(dd => {
                                             if (dd.response.data) {
                                               vm.dataList = dd.response.data

package/lowcode/cms-plugin/model/order.d.ts

@@ -116,6 +116,7 @@ interface OrderData {
   custom_form_format?: any;
   custom_form_data?: any;
   tags?: string[];
+  fbp?: string;
 }
 
 interface PaymentFlow {