• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/**
2 * Copyright (c) 2021-2022 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import { AppItemInfo, FolderData, Log } from '@ohos/common';
17import { AppIcon } from '@ohos/common/component';
18import { AppName } from '@ohos/common/component';
19import { CommonConstants } from '@ohos/common';
20import { StyleConstants } from '@ohos/common';
21import { ResourceManager } from '@ohos/common';
22import { BigFolderStyleConfig } from '../BigFolderStyleConfig';
23import TitleDescriptionComponent from './TitleDescriptionComponent';
24import { BigFolderViewModel } from '../../viewmodel/BigFolderViewModel';
25import { BigFolderStyleConstants } from '../constants/BigFolderStyleConstants';
26
27const TAG = 'FolderAppListDialog';
28
29interface FolderItemType {
30  folderId: string;
31  folderName: string;
32  enterEditing?: boolean;
33  layoutInfo: AppItemInfo[][]
34}
35
36@CustomDialog
37export default struct FolderAppListDialog {
38  @StorageLink('NavigationBarStatusValue') navigationBarStatusValue: boolean = false;
39  @StorageLink('isPad') isPad: boolean = false;
40  @StorageLink('allAppListForFolder') allAppInfoList: AppItemInfo[] = [];
41  @StorageLink('folderAppList') folderAppList: [] = [];
42  @StorageLink('appListChecked') @Watch('onAppListChecked') appListChecked: Array<AppItemInfo> = [];
43  @StorageLink('titleDescription') titleDescription: string = '';
44  @State mNameFontColor: string = BigFolderStyleConstants.FOLDER_ADD_APP_FONT_COLOR;
45  @Link mBigFolderViewModel: BigFolderViewModel;
46  private mFolderStyleConfig: BigFolderStyleConfig = this.mBigFolderViewModel.getFolderStyleConfig();
47  private mDialogHeight: number = 0;
48  private mGridHeight: number = 0;
49  controller?: CustomDialogController;
50  cancel = () => {};
51  confirm = (isDestory: boolean) => {};
52  folderItem: FolderData = { layoutInfo: [], folderName: '', folderId: '', enterEditing: false };
53  addToString: string = '';
54
55  aboutToAppear(): void {
56    Log.showInfo(TAG, `aboutToAppear`);
57    this.mBigFolderViewModel.getFolderAddAppList(this.folderItem.folderId);
58    this.mBigFolderViewModel.getFolderAppList(this.folderItem.folderId);
59    this.appListChecked = this.folderAppList;
60    ResourceManager.getInstance().getStringById($r('app.string.add_to').id, this.updateTitleDes);
61    this.mDialogHeight = this.mBigFolderViewModel.getDialogHeight(this.allAppInfoList);
62    this.mGridHeight = this.mDialogHeight - BigFolderStyleConstants.DEFAULT_APP_ADD_TITLE_SIZE -
63    BigFolderStyleConstants.DEFAULT_BUTTON_HEIGHT - BigFolderStyleConstants.DEFAULT_DIALOG_BOTTOM_MARGIN;
64  }
65
66  aboutToDisappear(): void {
67  }
68
69  private updateTitleDes = (value: string) => {
70    this.addToString = value;
71    this.onAppListChecked();
72  }
73
74  private onAppListChecked() {
75    this.titleDescription = `${this.addToString}${this.folderItem.folderName}(${this.appListChecked.length}/${this.allAppInfoList.length})`;
76    AppStorage.setOrCreate('titleDescription', this.titleDescription);
77  }
78
79  private getColumnsTemplate() {
80    let columnsTemplate = '';
81    for (let index = 0; index < (this.mBigFolderViewModel?.getAddListColumn() as number); index++) {
82      columnsTemplate += '1fr ';
83    }
84    return columnsTemplate;
85  }
86
87  build() {
88    Column() {
89      Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center }) {
90        TitleDescriptionComponent({
91          mTextSize: this.mFolderStyleConfig.mAddFolderTitleSize })
92        Column() {
93          Grid() {
94            ForEach(this.allAppInfoList, (item: AppItemInfo) => {
95              GridItem() {
96                Stack() {
97                  Column() {
98                    Column() {
99                      AppIcon({
100                        iconSize: (this.mFolderStyleConfig.mAddFolderIconSize as number),
101                        iconId: item.appIconId,
102                        bundleName: item.bundleName,
103                        moduleName: item.moduleName,
104                        icon: ResourceManager.getInstance()
105                          .getCachedAppIcon(item.appIconId, item.bundleName, item.moduleName),
106                        badgeNumber: CommonConstants.BADGE_DISPLAY_HIDE,
107                      })
108                      AppName({
109                        nameHeight: this.mFolderStyleConfig.mAddFolderTextSize *
110                        this.mFolderStyleConfig.mAddFolderTextLines,
111                        nameSize: this.mFolderStyleConfig.mAddFolderTextSize,
112                        nameFontColor: this.mNameFontColor,
113                        bundleName: item.bundleName,
114                        moduleName: item.moduleName,
115                        appName: item.appName,
116                        labelId: item.appLabelId,
117                        nameLines: this.mFolderStyleConfig.mAddFolderTextLines,
118                        marginTop: BigFolderStyleConstants.DEFAULT_APP_TITLE_MARGIN
119                      })
120                    }
121                    .width(StyleConstants.PERCENTAGE_100)
122                    .height(StyleConstants.PERCENTAGE_100)
123                    .backgroundColor(StyleConstants.DEFAULT_TRANSPARENT_COLOR)
124                    .borderRadius(StyleConstants.DEFAULT_0)
125                    .padding({ top: BigFolderStyleConstants.DEFAULT_APP_TITLE_MARGIN })
126                  }
127
128                  Toggle({ type: ToggleType.Checkbox, isOn: item.checked })
129                    .width(this.mFolderStyleConfig.mFolderToggleSize)
130                    .height(this.mFolderStyleConfig.mFolderToggleSize)
131                    .padding(0)
132                    .selectedColor(0x007DFF)
133                    .position({ x: 0,
134                      y: 0 })
135                    .onChange((isOn: boolean) => {
136                      Log.showDebug(TAG, `Toggle onChange this.isOn: ${isOn}`);
137                      if (isOn) {
138                        item.checked = true;
139                        let appItem: AppItemInfo;
140                        appItem = item;
141                        appItem.area = [1, 1];
142                        appItem.typeId = CommonConstants.TYPE_APP;
143                        this.appListChecked.push(appItem);
144                      } else {
145                        item.checked = false;
146                        let index = this.appListChecked.indexOf(item);
147                        this.appListChecked.splice(index, 1);
148                      }
149                      AppStorage.setOrCreate('appListChecked', this.appListChecked);
150                    })
151                }
152              }
153              .width(this.mFolderStyleConfig.mAddFolderItemSize)
154              .height(this.mFolderStyleConfig.mAddFolderIconSize + this.mFolderStyleConfig.mAddFolderTextLines +
155              this.mFolderStyleConfig.mFolderToggleSize + this.mFolderStyleConfig.mAddFolderGridMargin)
156            }, (item: AppItemInfo) => JSON.stringify(item))
157          }
158          .columnsTemplate(this.getColumnsTemplate())
159          .columnsGap(this.mFolderStyleConfig.mAddFolderGridGap)
160          .rowsGap(this.mFolderStyleConfig.mAddFolderGridGap)
161          .margin(this.mFolderStyleConfig.mAddFolderGridMargin)
162        }
163        .width(this.mFolderStyleConfig.mAddFolderDialogWidth)
164        .height(this.mGridHeight)
165
166        Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceAround }) {
167          Button() {
168            Text($r('app.string.cancel_dialog'))
169              .fontSize(this.mFolderStyleConfig.mAddFolderButtonSize)
170              .fontColor(StyleConstants.BUTTON_FONT_COLOR)
171          }
172          .flexGrow(1)
173          .backgroundColor(StyleConstants.DEFAULT_BG_COLOR)
174          .width(BigFolderStyleConstants.DEFAULT_BUTTON_WIDTH)
175          .height(BigFolderStyleConstants.DEFAULT_BUTTON_HEIGHT)
176          .onClick(() => {
177            this.controller?.close();
178            this.cancel()
179          })
180
181          Divider()
182            .vertical(true)
183            .color(StyleConstants.DEFAULT_DIVIDER_COLOR)
184            .height(BigFolderStyleConstants.DEFAULT_DIVIDER_HEIGHT)
185
186          Button() {
187            Text($r('app.string.confirm_dialog'))
188              .fontSize(this.mFolderStyleConfig.mAddFolderButtonSize)
189              .fontColor(StyleConstants.BUTTON_FONT_COLOR)
190          }
191          .flexGrow(1)
192          .backgroundColor(StyleConstants.DEFAULT_BG_COLOR)
193          .height(BigFolderStyleConstants.DEFAULT_BUTTON_HEIGHT)
194          .width(BigFolderStyleConstants.DEFAULT_BUTTON_WIDTH)
195          .onClick(() => {
196            Log.showDebug(TAG, 'Dialog confirm start');
197            this.mBigFolderViewModel?.updateFolderAppList(this.appListChecked, this.folderItem);
198            let isDestory = false;
199            if (this.folderItem.layoutInfo[0].length < 2) {
200              isDestory = true;
201            } else {
202              this.mBigFolderViewModel?.refreshFolder(this.folderItem);
203            }
204            this.controller?.close();
205            this.confirm(isDestory);
206            Log.showDebug(TAG, 'Dialog confirm end');
207          })
208        }
209      }
210      .backgroundColor(Color.White)
211      .opacity(BigFolderStyleConstants.DEFAULT_DIALOG_OPACITY)
212      .padding({
213        bottom: BigFolderStyleConstants.DEFAULT_DIALOG_BOTTOM_MARGIN
214      })
215      .border({
216        radius: StyleConstants.DEFAULT_DIALOG_RADIUS
217      })
218      .margin({
219        bottom: BigFolderStyleConstants.DEFAULT_DIALOG_BOTTOM_MARGIN
220      })
221      .width(this.mFolderStyleConfig.mAddFolderDialogWidth)
222      .height(this.mDialogHeight)
223
224      if (!this.navigationBarStatusValue) {
225        Stack()
226          .width(this.mFolderStyleConfig.mAddFolderDialogWidth)
227          .height(BigFolderStyleConstants.DEFAULT_APP_GRID_TOGGLE_SIZE)
228      }
229    }
230    .width('100%')
231    .height('100%')
232    .justifyContent(this.isPad ? FlexAlign.Center : FlexAlign.End)
233  }
234}
235