Skip to content

Commit

Permalink
SideBar组件增加拖拽排序功能，排序后更新数据库 (#217)
Browse files Browse the repository at this point in the history 
* fix: SideBar组件增加拖拽排序功能，排序后更新数据库

* feat: 不同类型的分组定义
  • Loading branch information
@yi-boide
yi-boide authored Jul 21, 2024
1 parent 368a095 commit 49aa6e6
Show file tree
Hide file tree
Showing 6 changed files with 137 additions and 59 deletions.
131 changes: 88 additions & 43 deletions entry/src/main/ets/componets/common/SideBar.ets
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,63 +2,35 @@
* @author Andy
* @datetime 2024/7/6 01:06
* @className: SideBar
* 分类左侧列表，支持是否开启角标
* 分类左侧列表，支持是否开启角标，支持是否开启拖拽
*/
import { GroupList, GroupPartList } from '../../database/entities/BookSource'

@Component
export default struct SideBar {
@Link currentIndex: number
@Prop sideBarList: GroupList[] | GroupPartList[] | string[] = []
@Link sideBarList: GroupList[] | GroupPartList[] | string[]
@Prop isBadge: boolean = false
clickAction: Function = (_index: number) => {}
@Prop isDrag: boolean = false
clickAction: Function = (_index: number) => {
}
scroller?: Scroller = undefined
onDragChange: (list: GroupList[] | GroupPartList[] | string[]) => void = (_list) => {}

// 交换listArr数组中listItem的位置
changeListItemIndex(index1: number, index2: number) {
let tempItem = this.sideBarList[index1];
this.sideBarList[index1] = this.sideBarList[index2];
this.sideBarList[index2] = tempItem;
this.onDragChange(this.sideBarList)
}

build() {
List({ scroller: this.scroller }) {
ForEach(this.sideBarList, (item: GroupList | string, index: number) => {
ListItem() {
Stack({ alignContent: Alignment.TopStart }) {
Column() {
Stack({ alignContent: Alignment.TopEnd }) {
Text(typeof item === 'string' ? item : item.title)
.height('48vp')
.textAlign(TextAlign.Center)
.fontWeight(this.currentIndex === index ? FontWeight.Bold : FontWeight.Normal)

if (this.isBadge && typeof item !== 'string') {
Column() {
Text(item.list.length.toString())
.fontSize(10)
.fontWeight(500)
.fontColor(Color.White)
.textAlign(TextAlign.Center)
}
.height(16)
.position({
right: -10
})
.justifyContent(FlexAlign.Center)
.padding({ left: 4, right: 4 })
.borderRadius(20)
.backgroundColor(0xEF4444)
}
}
}
.width('100%')
.alignItems(HorizontalAlign.Center)
.backgroundColor(this.currentIndex === index ? 0xF5F5F5 : Color.White)
.borderRadius({
topRight: this.currentIndex + 1 === index ? 12 : 0,
bottomRight: this.currentIndex - 1 === index || this.sideBarList.length === index + 1 ? 12 : 0
})
.animation({
duration: 100,
curve: Curve.Linear
})
.onClick(() => {
this.clickAction(index)
})
this.ItemBuilder(item, index)

if (this.currentIndex === index) {
Row()
Expand All @@ -72,14 +44,87 @@ export default struct SideBar {
}
}
}
.height(48)
})
}
.height('100%')
.width('100%')
.scrollBar(BarState.Off)
.lanes({ minLength: 48, maxLength: 88 })
.borderRadius({
topRight: 12,
bottomRight: 12
})
.onItemDragStart((event: ItemDragInfo, index: number) => {
console.info('TagInfo index:', index)
if (!this.isDrag) {
return;
}
const item = this.sideBarList[index] as GroupList;
return this.ItemBuilder(item, index, 88);
})
.onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => {
if (!this.isDrag) return;
if (!isSuccess || insertIndex >= this.sideBarList.length) {
return;
}
this.changeListItemIndex(itemIndex, insertIndex);
})
}

@Builder
ItemBuilder(item: GroupList | string, index: number, width: number | string = '100%') {
Row() {
Stack({ alignContent: Alignment.TopEnd }) {
Text(typeof item === 'string' ? item : item.title)
.height(48)
.textAlign(TextAlign.Center)
.fontWeight(this.currentIndex === index ? FontWeight.Bold : FontWeight.Normal)

if (this.isBadge && typeof item !== 'string') {
Column() {
Text(item.list.length.toString())
.fontSize(10)
.fontWeight(500)
.fontColor(Color.White)
.textAlign(TextAlign.Center)
}
.height(16)
.position({
right: -10
})
.justifyContent(FlexAlign.Center)
.padding({ left: 4, right: 4 })
.borderRadius(20)
.backgroundColor(0xEF4444)
}
}

if (this.isDrag) {
Column() {
Image($r('app.media.drag'))
.width(32)
.width(24)
.draggable(false)
}
.padding(5)
.margin({ right: -10 })
}
}
.width(width)
.justifyContent(FlexAlign.Center)
.alignItems(VerticalAlign.Center)
.backgroundColor(this.currentIndex === index ? 0xF5F5F5 : Color.White)
.borderRadius({
topRight: this.currentIndex + 1 === index ? 12 : 0,
bottomRight: this.currentIndex - 1 === index || this.sideBarList.length === index + 1 ? 12 : 0
})
.animation({
duration: 100,
curve: Curve.Linear
})
.onClick(() => {
this.clickAction(index)
})
}
}
15 changes: 14 additions & 1 deletion entry/src/main/ets/componets/source/SourceView.ets
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,20 @@ export default struct SourceView {
clickAction: (index: number) => {
this.scrollChangeAction(index, true)
},
isBadge: !this.isBatch
isBadge: !this.isBatch,
isDrag: this.isBatch,
onDragChange: async (_list) => {
const bookSourcePartList = this.groupList.reduce((acc: BookSourcePart[], item) => acc.concat(item.list), [])
const sortBookSourcePartList = bookSourcePartList.map((item, index) => {
if (index !== 0) {
item.customOrder = bookSourcePartList[index - 1].customOrder + 1
}
return item
})
console.info('TagInfo: 更新成功')
await BookSourceDao.batchUpdateFlow(sortBookSourcePartList)
this.refreshCount += 1
}
})
.width(88)

Expand Down
6 changes: 6 additions & 0 deletions entry/src/main/ets/database/entities/BookSource.ets
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,12 @@ export const BOOK_SOURCE_TYPE: Record<number, string> = {
1 : '有声'
}

export const SOURCE_GROUP_MAP: Record<number, string[]> = {
0: ['男频', '女频', '综合', '出版', '下载', '正版', '轻文', '网络', '其他'],
1: ['听书', '音乐', '正版', '其他'],
2: ['国漫', '日漫', '韩漫', '美漫', '综合', '网络', '正版', '其他']
}

export interface BookSourceDb extends Omit<BookSource, 'ruleExplore' | 'ruleSearch' | 'ruleBookInfo' | 'ruleToc' | 'ruleContent' | 'ruleReview'> {
// 发现规则
ruleExplore?: string
Expand Down
19 changes: 6 additions & 13 deletions entry/src/main/ets/pages/view/Find/BookSource/AddSourcePage.ets
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import FormItem from '../../../../componets/Form/FormItem';
import SourceDebug from './components/SourceDebug';
import { JSON } from '@kit.ArkTS';
import BookSourceDao from '../../../../database/dao/BookSourceDao';
import { BookSource, BOOK_SOURCE_TYPE, GRADE_TYPE } from '../../../../database/entities/BookSource';
import { BookSource, BOOK_SOURCE_TYPE, GRADE_TYPE, SOURCE_GROUP_MAP } from '../../../../database/entities/BookSource';

interface RouteParams {
id: string,
Expand Down Expand Up @@ -265,22 +265,15 @@ struct AddSourcePage {
.fontColor(this.formModel.bookSourceType !== undefined ? '#E0000000' : '#73000000')
.onSelect((index: number, text?: string | undefined) => {
this.formModel.bookSourceType = [0, 2, 1][index]
this.formModel.bookSourceGroup = SOURCE_GROUP_MAP[this.formModel.bookSourceType ?? 0][0]
})
.backgroundColor('#f5f5f5')
.layoutWeight(1)
Row().width(16)
Select([
{ value: '男频' },
{ value: '女频' },
{ value: '综合' },
{ value: '出版' },
{ value: '下载' },
{ value: '正版' },
{ value: '轻文' },
{ value: '网络' },
{ value: '其他' }
])
.value(this.formModel.bookSourceGroup ?? '男频')
Select(
SOURCE_GROUP_MAP[this.formModel.bookSourceType ?? 0].map(item => ({ value: item } as SelectOption))
)
.value(this.formModel.bookSourceGroup ?? SOURCE_GROUP_MAP[this.formModel.bookSourceType ?? 0][0])
.borderRadius(4)
.fontColor(this.formModel.bookSourceGroup ? '#E0000000' : '#73000000')
.onSelect((index: number, text: string) => {
Expand Down
16 changes: 14 additions & 2 deletions entry/src/main/ets/pages/view/Find/BookSource/components/SourceView.ets
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,20 @@ export default struct SourceView {
clickAction: (index: number) => {
this.scrollChangeAction(index, true)
},
isBadge: !this.isBatch
isBadge: !this.isBatch,
isDrag: this.isBatch,
onDragChange: async (_list) => {
const bookSourcePartList = this.groupList.reduce((acc: BookSourcePart[], item) => acc.concat(item.list), [])
const sortBookSourcePartList = bookSourcePartList.map((item, index) => {
if (index !== 0) {
item.customOrder = bookSourcePartList[index - 1].customOrder + 1
}
return item
})
console.info('TagInfo bookSourcePartList:', JSON.stringify(bookSourcePartList))
await BookSourceDao.batchUpdateFlow(sortBookSourcePartList)
this.refreshCount += 1
}
})
.width(88)

Expand Down Expand Up @@ -433,7 +446,6 @@ export default struct SourceView {
.onClick(async () => {
this.isBatch = false
this.activeNameMap = {}
BookSourceDao.batchUpdateFlow(this.sourceList)
this.getList()
})
}
Expand Down
9 changes: 9 additions & 0 deletions entry/src/main/resources/base/media/drag.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 49aa6e6

Please sign in to comment.