ts-glitter 21.7.2 → 21.7.4

package/lowcode/modules/image-library.js

@@ -39,11 +39,8 @@ export class imageLibrary {
         };
         const ids = {
             classPrefix: 'image-library-dialog',
+            selectBarID: gvc.glitter.getUUID(),
         };
-        gvc.addStyle(css `
-      .${ids.classPrefix} {
-      }
-    `);
         if (cf.key == 'folderEdit') {
             vm.tag = cf.tag;
             vm.type = 'folderEdit';
@@ -70,7 +67,7 @@ export class imageLibrary {
             if (dd.selected) {
                 count++;
             }
-            return dd.items.filter((d) => {
+            return dd.filter((d) => {
                 return d.selected;
             }).length;
         }
@@ -190,18 +187,7 @@ export class imageLibrary {
                                                     const imageUrl = originImageURL !== null && originImageURL !== void 0 ? originImageURL : noImageURL;
                                                     function itemClick() {
                                                         var _a;
-                                                        if (vm.type == 'folder') {
-                                                            vm.type = 'folder';
-                                                            that.selectImageLibrary(gvc, selectData => {
-                                                                vm.link = selectData;
-                                                                gvc.notifyDataChange(vm.id);
-                                                            }, `<div class="d-flex flex-column" style="border-radius: 10px 10px 0px 0px;background: #F2F2F2;">${vm.tag}</div>`, {
-                                                                key: 'folderEdit',
-                                                                mul: true,
-                                                                tag: fileItem.title,
-                                                            });
-                                                        }
-                                                        else if (vm.type == 'folderView') {
+                                                        if (vm.type == 'folderView') {
                                                             function updateLinkList(replaceId, newItem) {
                                                                 const replaceItemIndex = vm.link.findIndex(i => i.id === replaceId);
                                                                 console.log(replaceItemIndex);
@@ -440,7 +426,7 @@ export class imageLibrary {
                             gvc.notifyDataChange(vm.footer_id);
                             function drawBreadcrumb() {
                                 return html `
-                  <div class="d-flex" style="margin: 20px 0">
+                  <div class="d-flex" style="margin-bottom:12px;">
                     <div class="breadcrumb-item">
                       <div
                         class="cursor_pointer"
@@ -495,6 +481,10 @@ export class imageLibrary {
                                         ? '700'
                                         : '500'};cursor: pointer;"
                         onclick="${gvc.event(e => {
+                                        if (vm.type == data.key)
+                                            return;
+                                        else
+                                            vm.link.forEach(item => (item.selected = false));
                                         vm.type = data.key;
                                         vm.query = '';
                                         gvc.notifyDataChange(vm.id);
@@ -506,21 +496,26 @@ export class imageLibrary {
                                 })
                                     .join('');
                             }
-                            if (vm.type == 'folderViewToEdit') {
-                                vm.type = 'folderView';
-                                yield that.selectImageLibrary(gvc, selectData => {
-                                    vm.link = selectData;
-                                    gvc.notifyDataChange(vm.id);
-                                }, `<div class="d-flex flex-column" style="border-radius: 10px 10px 0px 0px;background: #F2F2F2;">${vm.tag}</div>`, {
-                                    key: 'folderEdit',
-                                    mul: true,
-                                    tag: vm.tag,
+                            function drawSelectBar(selectCount) {
+                                return gvc.bindView({
+                                    bind: ids.selectBarID,
+                                    view: () => {
+                                        return html `
+                      <div
+                        class="${selectCount ? `` : `d-none`} ${gClass('select-bar-text')}"
+                      >
+                        已選取${selectCount}項
+                      </div>
+                      <div class="ms-auto ${gClass('search-raw')}">上傳時間舊>新</div>
+                    `;
+                                    },
+                                    divCreate: {
+                                        class: `w-100 ${gClass('select-bar')} `,
+                                    },
                                 });
                             }
                             if (vm.type == 'folderADD') {
                                 function pushFolder(folder, imageArray) {
-                                    console.log('folder -- ', folder);
-                                    console.log('imageArray -- ', imageArray);
                                     imageArray.forEach(image => {
                                         image.selected = false;
                                     });
@@ -588,6 +583,10 @@ export class imageLibrary {
                             if (vm.type == 'folderView') {
                                 changeWindowsName((_b = vm.tag) !== null && _b !== void 0 ? _b : 'folder');
                                 changeCancelBTNName('返回');
+                                const group = vm.link.filter(item2 => {
+                                    var _a;
+                                    return item2.tag && item2.tag.includes((_a = vm.tag) !== null && _a !== void 0 ? _a : '');
+                                });
                                 return html `
                   ${drawBreadcrumb()}
                   <div class="d-flex w-100" style="gap:14px;margin-top: 12px;">
@@ -605,14 +604,11 @@ export class imageLibrary {
                                     options: FilterOptions.imageLibraryOrderBy,
                                 })}
                   </div>
+                  ${drawSelectBar(getSelectCount(group))}
                   ${gvc.bindView({
                                     bind: `folderItemGroup`,
                                     view: () => {
                                         if (vm.tag) {
-                                            let group = vm.link.filter(item2 => {
-                                                var _a;
-                                                return item2.tag && item2.tag.includes((_a = vm.tag) !== null && _a !== void 0 ? _a : '');
-                                            });
                                             return renderItems(group);
                                         }
                                         return ``;
@@ -623,7 +619,7 @@ export class imageLibrary {
                             }
                             if (vm.type == 'folderEdit') {
                                 return html `
-                  <div class="d-flex flex-column ${gClass('album-title')}" >
+                  <div class="d-flex flex-column ${gClass('album-title')}">
                     相簿名稱
                     <input
                       class="w-100"
@@ -651,26 +647,8 @@ export class imageLibrary {
                                 })}
                   </div>
                   <div class="d-flex w-100 justify-content-end" style="gap:12px;margin-top: 18px;">
-                    <div
-                      style="margin-right: auto; color: #393939; font-size: 14px; font-family: Noto Sans; font-weight: 700; word-wrap: break-word"
-                    >
-                      已選取${getSelectCount({
-                                    items: vm.link,
-                                })}項
-                    </div>
-                    ${BgWidget.grayButton('刪除', gvc.event(() => {
-                                    let selectedData = vm.link.filter(item => item.selected);
-                                    selectedData.forEach(item => {
-                                        item.selected = false;
-                                        item.tag = item.tag.filter(tag => {
-                                            return tag !== vm.tag;
-                                        });
-                                    });
-                                    let folder = vm.link.find(dd => {
-                                        return dd.title == vm.tag && dd.type == 'folder';
-                                    });
-                                    gvc.notifyDataChange(vm.id);
-                                }))}
+                    ${drawSelectBar(getSelectCount(vm.link))}
+                    
                     ${BgWidget.grayButton('新增圖片', gvc.event(() => {
                                     const thatGVC = gvc;
                                     gvc.glitter.innerDialog((gvc) => {
@@ -749,7 +727,7 @@ export class imageLibrary {
                                     }, 'add');
                                 }))}
                   </div>
-                  <div >
+                  <div>
                     ${gvc.bindView({
                                     bind: `folderItemGroup`,
                                     view: () => {
@@ -774,10 +752,9 @@ export class imageLibrary {
                     flex-direction: column;
                     height: auto; /* 設定一個固定的高度 (或用 auto 讓內容決定) */
                     flex-shrink: 0;
-                    padding: 15px;
                     box-sizing: border-box; /* padding 不影響宣告的高度 */
                     width: 100%;
-                    gap: 20px;
+                    gap: 12px;
                     position: sticky;
                     background: #fff;
                     left: 0;
@@ -789,9 +766,7 @@ export class imageLibrary {
                     flex-grow: 1; /* 重要：讓此區塊佔滿所有剩餘的垂直空間 */
                     overflow-y: auto; /* 關鍵：當內容垂直溢出時，只在此區塊顯示垂直滾動條 */
                     width: 100%;
-                    padding: 15px;
                     box-sizing: border-box;
-                    gap: 20px;
                   }
 
                   .${ids.classPrefix}-content {
@@ -801,14 +776,20 @@ export class imageLibrary {
                   }
 
                   .${ids.classPrefix}-select-bar {
-                    height: 40px;
-                    padding: 12px 18px;
-                    background: #f7f7f7;
                     border-radius: 10px;
                     justify-content: flex-end;
                     align-items: center;
                     gap: 8px;
                     display: ${cf.mul ? `inline-flex` : `none`};
+                    margin-top: 18px;
+                    margin-bottom: 8px;
+                  }
+                  .${ids.classPrefix}-select-bar-text{
+                    flex: 1 1 0;
+                    color: #393939;
+                    font-size: 14px;
+                    font-weight: 700;
+                    word-wrap: break-word
                   }
 
                   .${ids.classPrefix}-new-album-title-bar {
@@ -816,7 +797,6 @@ export class imageLibrary {
                     font-style: normal;
                     font-weight: 400;
                     gap: 8px;
-                    padding-top: 12px;
                   }
 
                   .${ids.classPrefix}-new-album-title-bar input {
@@ -852,7 +832,6 @@ export class imageLibrary {
                     font-style: normal;
                     font-weight: 400;
                     gap: 8px;
-                    padding-top: 12px;
                   }
 
                   .${ids.classPrefix}-album-title input {
@@ -861,6 +840,13 @@ export class imageLibrary {
                     border-radius: 10px;
                     border: 1px solid #ddd;
                   }
+
+                  .${ids.classPrefix}-search-raw {
+                    color: #393939;
+                    text-align: right;
+                    font-size: 14px;
+                    font-weight: 400;
+                  }
                 `);
                                 return html `
                   <div
@@ -885,21 +871,7 @@ export class imageLibrary {
                       </div>
                     </div>
                     <div class="scrollable-bottom-section d-flex flex-column">
-                      <div
-                        class="w-100 ${gClass('select-bar')} ${getSelectCount({
-                                    items: vm.link,
-                                }) > 0 && vm.type == 'file'
-                                    ? ``
-                                    : `d-none`}"
-                      >
-                        <div
-                          style="flex: 1 1 0; color: #393939; font-size: 14px; font-family: Noto Sans; font-weight: 700; word-wrap: break-word"
-                        >
-                          已選取${getSelectCount({
-                                    items: vm.link,
-                                })}項
-                        </div>
-                      </div>
+                      ${drawSelectBar(getSelectCount(vm.link))}
                       <div
                         style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 18px; display: flex"
                       >
@@ -1015,7 +987,7 @@ export class imageLibrary {
                         }),
                         divCreate: {
                             class: `w-100 h-100`,
-                            style: ``,
+                            style: `padding: 8px;`,
                         },
                     };
                 });
@@ -1110,6 +1082,11 @@ export class imageLibrary {
                                     vm.type = 'folder';
                                     gvc.notifyDataChange(vm.id);
                                 }
+                                else if (vm.type === 'folderEdit') {
+                                    closeFolderView();
+                                    vm.type = 'folderView';
+                                    gvc.notifyDataChange(vm.id);
+                                }
                                 else {
                                     gvc.closeDialog();
                                 }
@@ -1119,7 +1096,8 @@ export class imageLibrary {
                             type: 'edit',
                             label: '編輯',
                             onClick: () => {
-                                vm.type = 'folderViewToEdit';
+                                vm.type = 'folderEdit';
+                                cf.key = "album";
                                 gvc.notifyDataChange(vm.id);
                             },
                         },
@@ -1188,7 +1166,11 @@ export class imageLibrary {
                     view: () => {
                         return defs
                             .map(d => {
-                            const widget = (d.type === 'cancel' || d.type === 'edit') ? BgWidget.cancel : d.type === 'danger' ? BgWidget.danger : BgWidget.save;
+                            const widget = d.type === 'cancel' || d.type === 'edit'
+                                ? BgWidget.cancel
+                                : d.type === 'danger'
+                                    ? BgWidget.danger
+                                    : BgWidget.save;
                             if (d.type == 'edit') {
                                 if (vm.type == 'folderView') {
                                     return widget(gvc.event(d.onClick), d.label);
@@ -1200,10 +1182,11 @@ export class imageLibrary {
                             }
                         })
                             .join('');
-                    }, divCreate: {
+                    },
+                    divCreate: {
                         class: 'w-100 d-flex align-items-center justify-content-end',
-                        style: 'gap:14px'
-                    }
+                        style: 'gap:14px',
+                    },
                 });
             },
             closeCallback: () => {
@@ -1496,9 +1479,10 @@ export class imageLibrary {
                                 BgWidget.danger(gvc.event(() => {
                                     const dialog = new ShareDialog(gvc.glitter);
                                     function deleteImage() {
+                                        const text = (item.type == 'folder') ? `此操作不可復原。確定要刪除相簿${item.title}嗎？` : '刪除此圖片後，所有使用它的頁面與商品將無法顯示。<br>是否確定？';
                                         dialog.checkYesOrNotWithCustomWidth({
                                             width: '432',
-                                            text: '刪除此圖片後，所有使用它的頁面與商品將無法顯示。<br>是否確定？',
+                                            text: text,
                                             icon: '<i class="fa-solid fa-info"></i>',
                                             callback: response => {
                                                 if (response) {