ts-glitter 21.8.3 → 21.8.4

package/lowcode/modules/image-library.js

@@ -74,7 +74,19 @@ export class imageLibrary {
         function getPublicConfig(callback) {
             ApiUser.getPublicConfig('image-manager', 'manager').then((data) => {
                 if (data.response.value) {
+                    const tagDiv = window.parent.document.querySelector('.tag-title');
                     vm.link = data.response.value;
+                    if (tagDiv) {
+                        const tag = tagDiv.getAttribute('data-tag');
+                        if (tag) {
+                            console.log('vm.link.filter(item => item.tag.includes(tag)) -- ', vm.link.filter(item => item.tag.includes(tag)));
+                            vm.link
+                                .filter(item => item.tag.includes(tag))
+                                .forEach(item => {
+                                item.selected = true;
+                            });
+                        }
+                    }
                     function loop(array) {
                         array.map(dd => {
                             var _a;
@@ -253,7 +265,7 @@ export class imageLibrary {
                                                             });
                                                         }
                                                         fileItem.selected = !defaultSelect;
-                                                        gvc.notifyDataChange(vm.id);
+                                                        gvc.notifyDataChange([viewID, ids.selectBarID]);
                                                         event.stopPropagation();
                                                     })}"
                                 ${!gvc.glitter.isTouchDevice()
@@ -415,6 +427,7 @@ export class imageLibrary {
                     });
                 }
                 getPublicConfig(() => {
+                    const tagDiv = document.querySelector('.tag-title');
                     gvc.notifyDataChange(vm.id);
                 });
                 return gvc.bindView(() => {
@@ -433,6 +446,7 @@ export class imageLibrary {
                         onclick="${gvc.event(() => {
                                     closeFolderView();
                                     vm.type = 'file';
+                                    cf.key = 'file';
                                     gvc.notifyDataChange(vm.id);
                                 })}"
                       >
@@ -496,14 +510,67 @@ export class imageLibrary {
                                 })
                                     .join('');
                             }
-                            function drawSelectBar(selectCount) {
+                            function pushFolder(folder, imageArray) {
+                                imageArray.forEach(image => {
+                                    image.selected = false;
+                                });
+                                folder.data.push(...imageArray.filter(image => !folder.data.some((existingImage) => existingImage.id === image.id)));
+                                return folder.data;
+                            }
+                            function pushDataToFolder(selectData) {
+                                selectData.map(data => {
+                                    let matchingElement = vm.link.find(item2 => item2.id === data.id);
+                                    if (matchingElement) {
+                                        if (!matchingElement.tag) {
+                                            matchingElement.tag = [];
+                                        }
+                                        if (!matchingElement.tag.includes(vm.tag)) {
+                                            matchingElement.tag.push(vm.tag);
+                                        }
+                                    }
+                                    data.selected = false;
+                                });
+                            }
+                            function drawAlbumInsertImage(callback) {
+                                return html `
+                  <div class="w-100 ${gClass('new-album-add-block')}">
+                    <div
+                      class="btn1"
+                      onclick="${gvc.event(() => {
+                                    that.selectImageLibrary(gvc, selectData => {
+                                        callback(selectData);
+                                    }, `<div class="d-flex flex-column tag-title" data-tag="${vm.tag}"  style="border-radius: 10px 10px 0 0;background: #F2F2F2;">${vm.tag}</div>`, {
+                                        key: 'album',
+                                        mul: true,
+                                    });
+                                })}"
+                    >
+                      從圖庫中選擇
+                    </div>
+                    <div
+                      class="btn1"
+                      onclick="${gvc.event(() => {
+                                    cf.plus(gvc, fileArray => {
+                                        vm.link.push(...fileArray);
+                                        callback(fileArray);
+                                        save(() => {
+                                            gvc.notifyDataChange(vm.id);
+                                        });
+                                    }, 'file');
+                                })}"
+                    >
+                      上傳新圖片
+                    </div>
+                  </div>
+                `;
+                            }
+                            function drawSelectBar(data) {
                                 return gvc.bindView({
                                     bind: ids.selectBarID,
                                     view: () => {
+                                        const selectCount = getSelectCount(data);
                                         return html `
-                      <div
-                        class="${selectCount ? `` : `d-none`} ${gClass('select-bar-text')}"
-                      >
+                      <div class="${selectCount ? `` : `d-none`} ${gClass('select-bar-text')}">
                         已選取${selectCount}項
                       </div>
                       <div class="ms-auto ${gClass('search-raw')}">上傳時間舊>新</div>
@@ -515,21 +582,7 @@ export class imageLibrary {
                                 });
                             }
                             if (vm.type == 'folderADD') {
-                                function pushFolder(folder, imageArray) {
-                                    imageArray.forEach(image => {
-                                        image.selected = false;
-                                    });
-                                    return folder.data.push(...imageArray);
-                                }
-                                vm.newFolder = {
-                                    selected: false,
-                                    title: '',
-                                    data: [],
-                                    items: [],
-                                    type: 'folder',
-                                    tag: [],
-                                    id: gvc.glitter.getUUID(),
-                                };
+                                const copyLink = structuredClone(vm.link);
                                 return html `
                   <div class="d-flex flex-column ${gClass('new-album-title-bar')}">
                     相簿名稱
@@ -542,35 +595,11 @@ export class imageLibrary {
                                 })}"
                     />
                   </div>
-                  <div class="w-100 ${gClass('new-album-add-block')}">
-                    <div
-                      class="btn1"
-                      onclick="${gvc.event(() => {
-                                    this.selectImageLibrary(gvc, selectData => {
-                                        pushFolder(vm.newFolder, selectData);
-                                        gvc.notifyDataChange('folderItemGroup');
-                                    }, `<div class="d-flex flex-column" style="border-radius: 10px 10px 0px 0px;background: #F2F2F2;">${vm.tag}</div>`, {
-                                        key: 'album',
-                                        mul: true,
-                                    });
-                                })}"
-                    >
-                      從圖庫中選擇
-                    </div>
-                    <div
-                      class="btn1"
-                      onclick="${gvc.event(() => {
-                                    cf.plus(gvc, fileArray => {
-                                        pushFolder(vm.newFolder, fileArray);
-                                        save(() => {
-                                            gvc.notifyDataChange('folderItemGroup');
-                                        });
-                                    }, 'file');
-                                })}"
-                    >
-                      上傳新圖片
-                    </div>
-                  </div>
+                  ${drawAlbumInsertImage((selectData) => {
+                                    pushFolder(vm.newFolder, selectData);
+                                    vm.link.push(vm.newFolder);
+                                    gvc.notifyDataChange('folderItemGroup');
+                                })}
                   ${gvc.bindView({
                                     bind: `folderItemGroup`,
                                     view: () => {
@@ -604,7 +633,7 @@ export class imageLibrary {
                                     options: FilterOptions.imageLibraryOrderBy,
                                 })}
                   </div>
-                  ${drawSelectBar(getSelectCount(group))}
+                  ${drawSelectBar(group)}
                   ${gvc.bindView({
                                     bind: `folderItemGroup`,
                                     view: () => {
@@ -631,101 +660,14 @@ export class imageLibrary {
                                 })}"
                     />
                   </div>
-                  <div class="d-flex w-100" style="gap:14px;margin-top: 12px;">
-                    ${BgWidget.searchFilter(gvc.event(e => {
-                                    vm.query = e.value;
-                                    gvc.notifyDataChange(vm.id);
-                                }), vm.query || '', '搜尋圖片')}
-                    ${BgWidget.updownFilter({
-                                    gvc,
-                                    callback: (value) => {
-                                        vm.orderString = value;
-                                        gvc.notifyDataChange(vm.id);
-                                    },
-                                    default: vm.orderString || 'default',
-                                    options: FilterOptions.imageLibraryOrderBy,
+                  ${drawAlbumInsertImage((selectData) => {
+                                    pushDataToFolder(selectData);
+                                    save(() => {
+                                        gvc.notifyDataChange('folderItemGroup');
+                                    });
                                 })}
-                  </div>
                   <div class="d-flex w-100 justify-content-end" style="gap:12px;margin-top: 18px;">
-                    ${drawSelectBar(getSelectCount(vm.link))}
-                    
-                    ${BgWidget.grayButton('新增圖片', gvc.event(() => {
-                                    const thatGVC = gvc;
-                                    gvc.glitter.innerDialog((gvc) => {
-                                        return html `
-                            <div style="width: 445px;height: 255px;border-radius: 10px;background: #FFF;">
-                              <div
-                                class="d-flex"
-                                style="color:#393939;display: flex;padding: 12px 20px;align-items: center;gap: 10px;"
-                              >
-                                新增圖片
-                                <span
-                                  class="d-flex align-items-center justify-content-center"
-                                  style="margin-left: auto;cursor: pointer;"
-                                  onclick="${gvc.event(() => {
-                                            gvc.glitter.closeDiaLog('add');
-                                        })}"
-                                >
-                                  <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    width="14"
-                                    height="14"
-                                    viewBox="0 0 14 14"
-                                    fill="none"
-                                  >
-                                    <path d="M1 1L13 13" stroke="#393939" stroke-linecap="round" />
-                                    <path d="M13 1L1 13" stroke="#393939" stroke-linecap="round" />
-                                  </svg>
-                                </span>
-                              </div>
-                              <div class="d-flex justify-content-center" style="padding-top:61px;gap:14px;">
-                                <div
-                                  style="padding: 10px 18px;border-radius: 10px;border: 1px solid #DDD;background: #FFF;box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);cursor: pointer;"
-                                  onclick="${gvc.event(() => {
-                                            this.selectImageLibrary(gvc, selectData => {
-                                                selectData.map(data => {
-                                                    let matchingElement = vm.link.find(item2 => item2.id === data.id);
-                                                    if (matchingElement) {
-                                                        if (!matchingElement.tag) {
-                                                            matchingElement.tag = [];
-                                                        }
-                                                        if (!matchingElement.tag.includes(vm.tag)) {
-                                                            matchingElement.tag.push(vm.tag);
-                                                        }
-                                                    }
-                                                    data.selected = false;
-                                                });
-                                                gvc.glitter.closeDiaLog('add');
-                                                thatGVC.notifyDataChange(vm.id);
-                                            }, `<div class="d-flex flex-column" style="border-radius: 10px 10px 0px 0px;background: #F2F2F2;">${vm.tag}</div>`, {
-                                                key: 'album',
-                                                mul: true,
-                                            });
-                                        })}"
-                                >
-                                  從圖庫中選擇
-                                </div>
-                                <div
-                                  style="padding: 10px 18px;border-radius: 10px;border: 1px solid #DDD;background: #FFF;box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);cursor: pointer;"
-                                  onclick="${gvc.event(() => {
-                                            cf.plus(gvc, fileArray => {
-                                                fileArray.forEach(item => {
-                                                    item.tag = [];
-                                                    item.tag.push(vm.tag);
-                                                    vm.link.push(item);
-                                                });
-                                                gvc.glitter.closeDiaLog('add');
-                                                thatGVC.notifyDataChange(vm.id);
-                                            }, 'file');
-                                        })}"
-                                >
-                                  上傳新圖片
-                                </div>
-                              </div>
-                            </div>
-                          `;
-                                    }, 'add');
-                                }))}
+                    ${drawSelectBar(vm.link)}
                   </div>
                   <div>
                     ${gvc.bindView({
@@ -784,19 +726,19 @@ export class imageLibrary {
                     margin-top: 18px;
                     margin-bottom: 8px;
                   }
-                  .${ids.classPrefix}-select-bar-text{
+                  .${ids.classPrefix}-select-bar-text {
                     flex: 1 1 0;
                     color: #393939;
                     font-size: 14px;
                     font-weight: 700;
-                    word-wrap: break-word
+                    word-wrap: break-word;
                   }
 
                   .${ids.classPrefix}-new-album-title-bar {
                     font-size: 16px;
                     font-style: normal;
                     font-weight: 400;
-                    gap: 8px;
+                    gap: 12px;
                   }
 
                   .${ids.classPrefix}-new-album-title-bar input {
@@ -807,7 +749,7 @@ export class imageLibrary {
                   }
 
                   .${ids.classPrefix}-new-album-add-block {
-                    margin-top: 18px;
+                    margin-top: 12px;
                     padding: 39px 0;
                     display: flex;
                     justify-content: center;
@@ -815,7 +757,7 @@ export class imageLibrary {
                     border-radius: 10px;
                     border: 1px solid #ddd;
                     background: #fff;
-                    gap: 14px;
+                    gap: 12px;
                   }
 
                   .${ids.classPrefix}-new-album-add-block .btn1 {
@@ -853,7 +795,7 @@ export class imageLibrary {
                     class="w-100 d-inline-flex flex-column justify-content-start align-items-start ${gClass('content')}"
                   >
                     <div class="fixed-top-section">
-                      <div class=" ${cf.key == 'album' ? `d-none` : `d-flex`}" style="gap:14px;">${pageBTN()}</div>
+                      <div class=" ${cf.key != 'album' ? `d-flex` : `d-none`}" style="gap:14px;">${pageBTN()}</div>
                       <div class="d-flex w-100" style="gap:14px;">
                         ${BgWidget.searchFilter(gvc.event(e => {
                                     vm.query = e.value;
@@ -869,9 +811,9 @@ export class imageLibrary {
                                     options: FilterOptions.imageLibraryOrderBy,
                                 })}
                       </div>
+                      ${drawSelectBar(vm.link)}
                     </div>
                     <div class="scrollable-bottom-section d-flex flex-column">
-                      ${drawSelectBar(getSelectCount(vm.link))}
                       <div
                         style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 18px; display: flex"
                       >
@@ -929,6 +871,15 @@ export class imageLibrary {
                                             else {
                                                 vm.tag = '';
                                                 vm.type = 'folderADD';
+                                                vm.newFolder = {
+                                                    selected: false,
+                                                    title: '',
+                                                    data: [],
+                                                    items: [],
+                                                    type: 'folder',
+                                                    tag: [],
+                                                    id: gvc.glitter.getUUID(),
+                                                };
                                                 gvc.notifyDataChange(vm.id);
                                             }
                                         })}"
@@ -940,9 +891,9 @@ export class imageLibrary {
                                     }
                                     return html `
                             <div
-                              class="w-100 ${cf.key == 'album'
-                                        ? `d-none`
-                                        : `d-flex`} align-items-center justify-content-center"
+                              class="w-100 ${vm.type == 'file' || vm.type == 'folder'
+                                        ? `d-flex`
+                                        : `d-none`} align-items-center justify-content-center"
                               style="padding: 39px 0;border-radius: 10px;border: 1px solid #DDD;background: #FFF;"
                             >
                               <div
@@ -959,6 +910,15 @@ export class imageLibrary {
                                         else {
                                             vm.tag = '';
                                             vm.type = 'folderADD';
+                                            vm.newFolder = {
+                                                selected: false,
+                                                title: '',
+                                                data: [],
+                                                items: [],
+                                                type: 'folder',
+                                                tag: [],
+                                                id: gvc.glitter.getUUID(),
+                                            };
                                             gvc.notifyDataChange(vm.id);
                                         }
                                     })}"
@@ -1075,6 +1035,7 @@ export class imageLibrary {
                             type: 'cancel',
                             label: cancelLabel,
                             onClick: () => {
+                                cf.key = 'file';
                                 if (cf.cancelEvent)
                                     cf.cancelEvent();
                                 if (vm.type === 'folderView' || vm.type === 'folderADD') {
@@ -1097,7 +1058,7 @@ export class imageLibrary {
                             label: '編輯',
                             onClick: () => {
                                 vm.type = 'folderEdit';
-                                cf.key = "album";
+                                cf.key = 'album';
                                 gvc.notifyDataChange(vm.id);
                             },
                         },
@@ -1479,7 +1440,9 @@ export class imageLibrary {
                                 BgWidget.danger(gvc.event(() => {
                                     const dialog = new ShareDialog(gvc.glitter);
                                     function deleteImage() {
-                                        const text = (item.type == 'folder') ? `此操作不可復原。確定要刪除相簿${item.title}嗎？` : '刪除此圖片後，所有使用它的頁面與商品將無法顯示。<br>是否確定？';
+                                        const text = item.type == 'folder'
+                                            ? `此操作不可復原。確定要刪除相簿${item.title}嗎？`
+                                            : '刪除此圖片後，所有使用它的頁面與商品將無法顯示。<br>是否確定？';
                                         dialog.checkYesOrNotWithCustomWidth({
                                             width: '432',
                                             text: text,