ts-glitter 22.4.7 → 22.5.0

package/lowcode/public-components/product/product-list.ts

@@ -9,14 +9,7 @@ import { Language } from '../../glitter-base/global/language.js';
  * Page: sy01_pd_collection
  */
 
-type Product = {
-  id: number;
-  content: {
-    collection: string[];
-  };
-};
-
-interface LanguageData {
+interface Seo {
   title: string;
   seo: {
     domain: string;
@@ -27,17 +20,22 @@ interface LanguageData {
 
 type Collection = {
   title: string;
-  code: string;
   array: Collection[];
-  product_id: number[];
+  checked?: boolean;
+  product_id?: number[];
   parentTitles: string[];
   subCollections: string[];
   allCollections: string[];
   seo_title: string;
   seo_content: string;
   seo_image: string;
-  checked: boolean;
-  language_data: LanguageData;
+  code: string;
+  language_data: {
+    'en-US': Seo;
+    'zh-CN': Seo;
+    'zh-TW': Seo;
+  };
+  hidden?: boolean;
 };
 
 const html = String.raw;
@@ -65,22 +63,22 @@ export class ProductList {
     const height = (document.body.clientWidth > 768 ? 56 : 59) * (obj.length + 1);
     const closeHeight = 56;
 
+    const currentPage = decodeURIComponent((obj.gvc.glitter.getUrlParameter('page') || '').split('/').reverse()[0]);
+
     obj.gvc.addStyle(`
       .box-item:hover {
-        background-color: #f5f5f5;
+        background-color: #dddddd;
       }
       .box-container-${text} {
         position: relative;
         height: ${closeHeight}px;
-        overflow-y: hidden;
         transition: height 0.3s ease-out;
       }
       .box-container-${text}.open-box {
         max-height: ${height}px;
         height: ${height}px;
-        overflow-y: auto;
       }
-      .box-navbar-${text} {
+      .box-navbar {
         position: sticky;
         top: 0;
         min-height: 20px;
@@ -89,12 +87,14 @@ export class ProductList {
         padding: 16px;
         align-items: flex-start;
         justify-content: space-between;
-        cursor: pointer;
+      }
+      .box-navbar:hover {
+        background-color: #f5f5f5;
       }
       .arrow-icon-${text} {
         color: #393939 !important;
         box-shadow: none !important;
-        background-color: #fff !important;
+        background: transparent;
         background-image: url(${this.arrowDownDataImage('#000')}) !important;
         background-repeat: no-repeat;
         cursor: pointer;
@@ -108,21 +108,21 @@ export class ProductList {
         transform: rotate(180deg);
       }
       .box-inside-${text} {
-        padding: 0 1.5rem 1.5rem;
-        overflow-y: auto;
+        padding: 0 0 1.5rem 1.5rem;
+        min-height: 56px;
       }
 
       @media (max-width: 768px) {
         .box-inside-${text} {
           padding: 0 1rem 0.5rem;
-          overflow-x: hidden;
         }
       }
     `);
 
-    return html` <div class="box-tag-${obj.tag} box-container-${text} ${obj.openOnInit ? `open-box` : ''}">
+    return html` <div class="box-tag-${obj.tag} box-container-${text} ${obj.openOnInit ? 'open-box' : ''}">
       <div
-        class="box-navbar-${text} ${obj.guideClass ?? ''}"
+        class="box-navbar ${obj.guideClass ?? ''}"
+        style="${currentPage === (obj.code || obj.title) ? 'background-color: #dddddd' : ''}"
         onclick="${obj.gvc.event(e => {
           if (!obj.autoClose) {
             const boxes = document.querySelectorAll(`.box-tag-${obj.tag}`);
@@ -141,29 +141,34 @@ export class ProductList {
           setTimeout(() => {
             e.parentElement.classList.toggle('open-box');
             e.parentElement.querySelector(`.arrow-icon-${text}`).classList.toggle('open-box');
+
             const container = window.document.querySelector(`.box-container-${text}`) as any;
+            const inside = window.document.querySelector(`.box-inside-${text}`) as any;
+
             if (e.parentElement.classList.contains('open-box')) {
               const si = setInterval(() => {
-                const inside = window.document.querySelector(`.box-inside-${text}`) as any;
                 if (inside) {
                   const insideHeight = inside.clientHeight;
                   if (insideHeight + closeHeight < height) {
-                    container.style.height = `${insideHeight + closeHeight + 20}px`;
+                    // container.style.height = `${insideHeight + closeHeight + 20}px`;
                   } else {
-                    container.style.height = `${height}px`;
+                    // container.style.height = `${height}px`;
                   }
+                  container.style.height = `${height}px`;
+                  inside.style.display = 'block';
                   clearInterval(si);
                 }
               }, 100);
             } else {
               container.style.height = `${closeHeight}px`;
+              inside.style.display = 'none';
             }
           }, 50);
         })}"
       >
         <div
           class="d-flex tx_700"
-          style="color: ${obj.fontColor};"
+          style="color: ${obj.fontColor}; cursor: pointer;"
           onclick="${obj.gvc.event(() => {
             obj.changePage('collections/' + obj.code, 'page', {});
             obj.gvc.glitter.closeDrawer();
@@ -172,10 +177,15 @@ export class ProductList {
           ${obj.title}
         </div>
         <div class="d-flex">
-          <button class="box-tag-${obj.tag} arrow-icon-${text}"></button>
+          <button class="box-tag-${obj.tag} arrow-icon-${text} ${obj.openOnInit ? 'open-box' : ''}"></button>
         </div>
       </div>
-      <div class="box-inside-${text} ${obj.guideClass ? `box-inside-${obj.guideClass}` : ''} ">${obj.insideHTML}</div>
+      <div
+        class="box-inside-${text} ${obj.guideClass ? `box-inside-${obj.guideClass}` : ''} "
+        style="${obj.openOnInit ? '' : 'display: none;'}"
+      >
+        ${obj.insideHTML}
+      </div>
     </div>`;
   }
 
@@ -359,6 +369,8 @@ export class ProductList {
       };
     });
 
+    const currentPage = decodeURIComponent((glitter.getUrlParameter('page') || '').split('/').reverse()[0]);
+
     function updateCollections(data: { collections: Collection[] }): Collection[] {
       const flattenCollections = (
         collections: Collection[],
@@ -381,7 +393,7 @@ export class ProductList {
                 return title;
               }
             })(),
-            array: [],
+            array: array,
             product_id: product_id ?? [],
             checked: false,
             parentTitles: parentTitles.length ? [...parentTitles] : [],
@@ -467,6 +479,16 @@ export class ProductList {
       return flattenCollections(data.collections, [], topLevelCollections);
     }
 
+    function getTotalChildCount(item: Collection): number {
+      if (item.array.length === 0) {
+        return 0;
+      }
+
+      const arr = item.array.filter(child => !child.hidden);
+
+      return arr.reduce((sum, child) => sum + getTotalChildCount(child), arr.length);
+    }
+
     async function getProductList() {
       const orderByParam = glitter.getUrlParameter('order_by');
       const page = parseInt(`${vm.pageIndex}`, 10) - 1;
@@ -476,6 +498,7 @@ export class ProductList {
       if (collection) {
         gvc.glitter.setUrlParameter('search', undefined);
       }
+
       const titleMatch = gvc.glitter.getUrlParameter('search');
       const maxPrice = '';
       const minPrice = '';
@@ -493,6 +516,7 @@ export class ProductList {
         with_hide_index: 'false',
         id_list: gvc.glitter.getUrlParameter('ai-search') || undefined,
       };
+
       return new Promise<[]>((resolve, reject) => {
         ApiShop.getProduct(inputObj).then(data => {
           try {
@@ -509,141 +533,136 @@ export class ProductList {
     }
 
     function getCollectionHTML() {
-      return gvc.bindView(
-        (() => {
-          const id = glitter.getUUID();
-          let loading = true;
-          return {
-            bind: id,
-            view: () => {
-              if (loading) {
-                return ProductList.spinner();
-              } else {
-                const cols = vm.collections.filter((item: any) => {
-                  return item.parentTitles.length === 0 && !Boolean(item.hidden);
+      const id = glitter.getUUID();
+      const undefinedOption = '請選擇項目';
+      let loading = true;
+
+      return gvc.bindView({
+        bind: id,
+        view: () => {
+          if (loading) {
+            return ProductList.spinner();
+          }
+
+          const firstCols = vm.collections.filter(
+            (item: any) => item.parentTitles.length === 0 && !Boolean(item.hidden)
+          );
+
+          function printUL(col: Collection) {
+            return html`<div
+              class="box-navbar"
+              style="${currentPage === (col.code || col.title) ? 'background: #dddddd;' : ''}"
+              onclick="${gvc.event(() => {
+                changePage(`collections/${col.code || col.title}`, 'page', {});
+                gvc.glitter.closeDrawer();
+              })}"
+            >
+              <div style="font-weight: 500;">
+                <div class="d-flex tx_700" style="color: ${fontColor}; cursor: pointer;">${col.title}</div>
+              </div>
+            </div>`;
+          }
+
+          function renderItem(item: Collection, depth: number, index: number) {
+            let subHTML = '';
+
+            try {
+              if (item.array.length > 0) {
+                item.array.map((col: Collection, index: number) => {
+                  if (!Boolean(col.hidden)) {
+                    subHTML += col.array.length > 0 ? renderItem(col, depth + 1, index) : printUL(col);
+                  }
                 });
+              }
+
+              const openOnInit = (() => {
+                // 找到目前頁面對應的分類項目
+                const currentItem = vm.collections.find((col: any) => (col.code || col.title) === currentPage);
+                if (!currentItem) return false;
 
-                return html`<ul class="border navbar-nav me-auto mb-2 mb-lg-0">
-                  <li class="border-bottom" style="padding: 16px; cursor: pointer;">
-                    <div
+                // 如果 item.title 是 currentItem 的 parentTitles 之一，表示要開啟
+                return currentItem.parentTitles.includes(item.title);
+              })();
+
+              return html` <div
+                class="${index + 1 === firstCols.length ? '' : ''}"
+                style="${item.array.length > 0 && subHTML.length > 0 ? '' : 'padding: 16px;'}"
+              >
+                ${item.array.length > 0 && subHTML.length > 0
+                  ? ProductList.openBoxContainer({
+                      gvc,
+                      tag: `collection-box-${depth}-${index}`,
+                      title: item.title,
+                      code: item.code,
+                      insideHTML: subHTML,
+                      length: getTotalChildCount(item),
+                      changePage,
+                      fontColor,
+                      openOnInit,
+                    })
+                  : html`<div
                       class="d-flex tx_700"
-                      style="color: ${fontColor};"
+                      style="color: ${fontColor}; cursor: pointer;"
                       onclick="${gvc.event(() => {
-                        changePage('all-product', 'page', {});
+                        changePage('collections/' + item.code, 'page', {});
                         gvc.glitter.closeDrawer();
                       })}"
                     >
-                      ${(() => {
-                        if (gvc.glitter.getUrlParameter('ai-search')) {
-                          return Language.text('ai_choose');
-                        } else if (gvc.glitter.getUrlParameter('search')) {
-                          return `${Language.text('search')}: ${gvc.glitter.getUrlParameter('search')}`;
-                        } else {
-                          return Language.text('all_products');
-                        }
-                      })()}
-                    </div>
-                  </li>
-                  ${cols
-                    .map((item: any, index: number) => {
-                      let subHTML = '';
-                      if (item.subCollections.length > 0) {
-                        for (const col of vm.collections) {
-                          if (
-                            item.subCollections.includes(col.title) &&
-                            col.parentTitles[0] === item.title &&
-                            !Boolean(col.hidden)
-                          ) {
-                            subHTML += html`<ul
-                              class="mt-1 pt-2 mx-n4 px-4 mb-n2 pb-2 box-item"
-                              style="${decodeURIComponent(
-                                (glitter.getUrlParameter('page') || '').split('/').reverse()[0]
-                              ) === (col.code || col.title)
-                                ? `background:#f5f5f5;`
-                                : ``}"
-                              onclick="${gvc.event(() => {
-                                changePage(`collections/${col.code || col.title}`, 'page', {});
-                                gvc.glitter.closeDrawer();
-                              })}"
-                            >
-                              <li style="font-weight: 500; line-height: 40px;">
-                                <div class="d-flex tx_700" style="color: ${fontColor};">${col.title}</div>
-                              </li>
-                            </ul>`;
-                          }
-                        }
-                      }
+                      ${item.title}
+                    </div>`}
+              </div>`;
+            } catch (error) {
+              console.error('Product-list RenderItem Error: ', error);
+              return '發生錯誤';
+            }
+          }
 
-                      return html` <li
-                        class="${index + 1 === cols.length ? '' : 'border-bottom'}"
-                        style="${item.subCollections.length > 0 && subHTML.length > 0
-                          ? ''
-                          : 'padding: 16px;'} cursor: pointer;"
-                      >
-                        ${item.subCollections.length > 0 && subHTML.length > 0
-                          ? ProductList.openBoxContainer({
-                              gvc,
-                              tag: 'collection-box',
-                              title: item.title,
-                              code: item.code,
-                              insideHTML: subHTML,
-                              length: item.subCollections.length,
-                              changePage,
-                              fontColor,
-                              openOnInit: [item.code]
-                                .concat(
-                                  vm.collections
-                                    .filter((col: any) => {
-                                      return (
-                                        item.subCollections.includes(col.title) && col.parentTitles[0] === item.title
-                                      );
-                                    })
-                                    .map((dd: any) => {
-                                      return dd.code || dd.title;
-                                    })
-                                )
-                                .includes(
-                                  decodeURIComponent((glitter.getUrlParameter('page') || '').split('/').reverse()[0])
-                                ),
-                            })
-                          : html`<div
-                              class="d-flex tx_700"
-                              style="color: ${fontColor};"
-                              onclick="${gvc.event(() => {
-                                changePage('collections/' + item.code, 'page', {});
-                                gvc.glitter.closeDrawer();
-                              })}"
-                            >
-                              ${item.title}
-                            </div>`}
-                      </li>`;
-                    })
-                    .join('')}
-                </ul>`;
-              }
-            },
-            divCreate: {
-              style: 'position: sticky; top: 7.5rem;',
-            },
-            onCreate: () => {
-              if (loading) {
-                ApiShop.getCollection().then((data: any) => {
-                  if (data.result && data.response.value.length > 0) {
-                    setAdTag();
-                    vm.allParents = ['(無)'].concat(data.response.value.map((item: { title: string }) => item.title));
-                    vm.collections = updateCollections({
-                      collections: data.response.value,
-                    });
-                    updatePageTitle();
+          return html`<div class="${PdClass.isPhone() ? '' : 'border'} navbar-nav me-auto mb-2 mb-lg-0">
+            <div style="padding: 16px;">
+              <div
+                class="d-flex tx_700"
+                style="color: ${fontColor}; cursor: pointer;"
+                onclick="${gvc.event(() => {
+                  changePage('all-product', 'page', {});
+                  gvc.glitter.closeDrawer();
+                })}"
+              >
+                ${(() => {
+                  if (gvc.glitter.getUrlParameter('ai-search')) {
+                    return Language.text('ai_choose');
+                  } else if (gvc.glitter.getUrlParameter('search')) {
+                    return `${Language.text('search')}: ${gvc.glitter.getUrlParameter('search')}`;
+                  } else {
+                    return Language.text('all_products');
                   }
-                  loading = false;
-                  gvc.notifyDataChange(id);
+                })()}
+              </div>
+            </div>
+            ${firstCols.map((item: any, index: number) => renderItem(item, 0, index)).join('')}
+          </div>`;
+        },
+        divCreate: {
+          style: PdClass.isPhone() ? '' : 'position: sticky; top: 7.5rem;',
+        },
+        onCreate: () => {
+          if (loading) {
+            ApiShop.getCollection().then((data: any) => {
+              if (data.result && data.response.value.length > 0) {
+                setAdTag();
+                vm.allParents = [undefinedOption].concat(
+                  data.response.value.map((item: { title: string }) => item.title)
+                );
+                vm.collections = updateCollections({
+                  collections: data.response.value,
                 });
+                updatePageTitle();
               }
-            },
-          };
-        })()
-      );
+              loading = false;
+              gvc.notifyDataChange(id);
+            });
+          }
+        },
+      });
     }
 
     function collectionTitle(titleText: string) {
@@ -759,7 +778,9 @@ export class ProductList {
       <div class="container d-flex mt-2" style="min-height: 1000px;">
         <div
           class="d-none d-sm-block mt-4"
-          style="${PdClass.isPad() ? 'width: 180px; min-width: 180px;' : 'width: 282px; min-width: 282px;'}"
+          style="${PdClass.isPad()
+            ? 'width: 180px; min-width: 180px;'
+            : 'width: 282px; min-width: 282px; margin-bottom: 300px;'}"
         >
           ${getCollectionHTML()}
         </div>
@@ -776,18 +797,12 @@ export class ProductList {
                 })}
               </div>`}
           <div class="d-flex justify-content-between mb-3">
-            ${document.body.clientWidth > 768
-              ? html`<div class="fw-500" style="font-size: 24px; color: ${fontColor}">
-                  ${gvc.bindView({
-                    bind: ids.pageTitle,
-                    view: () => vm.title,
-                  })}
-                </div>`
-              : html`<button
+            ${PdClass.isPhone()
+              ? html`<button
                   class="filter-btn"
                   onclick="${gvc.event(() => {
                     glitter.setDrawer(
-                      html`<div class="p-3">
+                      html`<div class="py-3 px-2" style="height: 100vh; overflow: scroll;">
                         <div
                           class="fw-500 mb-3"
                           style="font-size: 24px; color: ${fontColor};padding-top:${gvc.glitter.share
@@ -805,7 +820,13 @@ export class ProductList {
                 >
                   <i class="fa-regular fa-filter-list me-1"></i>
                   ${Language.text('filter')}
-                </button>`}
+                </button>`
+              : html`<div class="fw-500" style="font-size: 24px; color: ${fontColor}">
+                  ${gvc.bindView({
+                    bind: ids.pageTitle,
+                    view: () => vm.title,
+                  })}
+                </div>`}
             <select
               class="form-select form-select-xs"
               style="width: 200px;"

package/lowcode/public-models/product.ts

@@ -55,7 +55,19 @@ interface ChangeLog {
   changed_json: any;
 }
 
+interface Available{
+  earliest:{
+    value:string,
+    unit:'day' | 'month'
+  }
+  latest:{
+    value:string,
+    unit:'day' | 'month'
+  }
+}
+
 export interface Product {
+  available_time: Available;
   sync_shopee_stock?: boolean;
   shopee_id: number;
   tax?: string;
@@ -74,7 +86,7 @@ export interface Product {
     addProduct: boolean;
     giveaway: boolean;
   };
-  product_category: 'course' | 'commodity' | 'kitchen' | 'weighing';
+  product_category: 'course' | 'commodity' | 'kitchen' | 'weighing' | 'reserve';
   visible: 'true' | 'false';
   content: string;
   preview_image: string[];
@@ -138,6 +150,19 @@ export interface Product {
   comments: any[];
   multi_sale_price?: MultiSalePrice[];
   records: ChangeLog[];
+  reserve_locations:Store[]
+}
+
+export interface Store{
+  id:string,
+  address:string,
+  manager_name:string,
+  manager_phone:string,
+  name:string,
+  note:string,
+  dataPin:string,
+  checked:boolean,
+  is_shop:boolean
 }
 
 export type MultiSaleType = 'store' | 'level' | 'tags';