Skip to content

Commit cc8baa9

Browse files
yoiteyouCYan1203
yoiteyou
and
CYan1203
authored
add new function for message management (#1280)
* Draft MR * feat(navbar): add new function for message management --------- Co-authored-by: niuran <[email protected]>
1 parent e385cdb commit cc8baa9

File tree

5 files changed

+153
-21
lines changed

5 files changed

+153
-21
lines changed

‎frontend/public/images/icons/deployment-message.svg‎

Lines changed: 19 additions & 0 deletions
Loading

‎frontend/src/components/navbar/Navbar.vue‎

Lines changed: 122 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -561,6 +561,26 @@
561561
:label="$t('navbar.onlyUnread')"
562562
size="large" />
563563
</div>
564+
<div class="flex items-center justify-between">
565+
<div class="flex items-center gap-[12px] py-[12px]">
566+
<el-checkbox
567+
class="unreadCheckbox"
568+
v-model="selectAll"
569+
@change="handleSelectAllChange"
570+
/>
571+
<span class="text-md text-gray-700">{{ $t('navbar.checkAll') }}</span>
572+
</div>
573+
<div class="flex items-center justify-end gap-[16px]">
574+
<CsgButton
575+
class="btn btn-link-color btn-md"
576+
@click="allRead()"
577+
:name="$t('navbar.allRead')" />
578+
<CsgButton
579+
class="btn btn-link-color btn-md"
580+
@click="allClear()"
581+
:name="$t('navbar.allClear')" />
582+
</div>
583+
</div>
564584
</div>
565585
<div
566586
class="msg-list-container h-[calc(100vh-200px)] overflow-y-auto"
@@ -569,30 +589,36 @@
569589
<div
570590
v-for="(item, index) in msgList"
571591
:key="index"
572-
@click="newMsgShowInfo(2, item, index)"
573-
class="p-4 border-b border-gray-200 hover:bg-gray-50 cursor-pointer">
574-
<div class="flex items-start justify-between">
575-
<div class="flex items-center justify-start gap-[12px]">
576-
<span
577-
class="block w-[8px] h-[8px] rounded-full"
578-
:class="item.is_read ? '' : 'bg-brand-500'"></span>
579-
<SvgIcon
580-
:name="`${item.notification_type}-message`"
581-
class="w-[40px] h-[40px]" />
582-
<div class="text-sm">
583-
<p class="text-gray-700 font-medium">{{ item.title }}</p>
584-
<p class="text-gray-600 font-light">
585-
{{ item.click_action_url }}
586-
</p>
592+
class="p-4 border-b border-gray-200 hover:bg-gray-50 cursor-pointer flex items-start gap-[12px]">
593+
<el-checkbox
594+
v-model="item.checked"
595+
@change="handleItemCheckChange(item)"
596+
class="mt-1 unreadCheckbox"
597+
/>
598+
<div @click="newMsgShowInfo(2, item, index)" class="flex-1">
599+
<div class="flex items-start justify-between gap-[16px]">
600+
<div class="flex items-center justify-start gap-[12px]">
601+
<span
602+
class="block w-[8px] h-[8px] rounded-full flex-shrink-0"
603+
:class="item.is_read ? '' : 'bg-brand-500'"></span>
604+
<SvgIcon
605+
:name="`${item.notification_type}-message`"
606+
class="w-[40px] h-[40px]" />
607+
<div class="text-sm">
608+
<p class="text-gray-700 font-medium">{{ item.title }}</p>
609+
<p class="text-gray-600 font-light line-clamp-1">
610+
{{ item.click_action_url }}
611+
</p>
612+
</div>
587613
</div>
614+
<p class="text-sm text-gray-600 font-light whitespace-nowrap">
615+
{{ `${formatTime(item.created_at * 1000)}` }}
616+
</p>
588617
</div>
589-
<p class="text-sm text-gray-600 font-light">
590-
{{ `${formatTime(item.created_at * 1000)}` }}
618+
<p class="mt-[16px] text-gray-600 text-sm line-clamp-2">
619+
{{ item.content }}
591620
</p>
592621
</div>
593-
<p class="mt-[16px] text-gray-600 text-sm line-clamp-2">
594-
{{ item.content }}
595-
</p>
596622
</div>
597623
<div
598624
v-if="loading"
@@ -757,6 +783,8 @@
757783
const { cookies } = useCookies()
758784
759785
return {
786+
selectAll: false,
787+
selectedItems: [],
760788
showUserSet: false,
761789
showSettings: false,
762790
showMsgList: false,
@@ -875,6 +903,69 @@
875903
showDialog() {
876904
this.$refs.child.showDialog()
877905
},
906+
handleSelectAllChange(val) {
907+
this.msgList.forEach(item => {
908+
item.checked = val
909+
})
910+
this.updateSelectedItems()
911+
},
912+
handleItemCheckChange(item) {
913+
this.updateSelectedItems()
914+
this.selectAll = this.msgList.every(item => item.checked)
915+
},
916+
updateSelectedItems() {
917+
this.selectedItems = this.msgList.filter(item => item.checked)
918+
},
919+
async allRead() {
920+
let params = {}
921+
if(this.selectAll){
922+
params = {
923+
mark_all:true
924+
}
925+
}else {
926+
params = {
927+
ids: this.selectedItems.map(item => item.id)
928+
}
929+
}
930+
const options = { body: JSON.stringify(params) }
931+
const { data, error } = await useFetchApi(
932+
`/notifications/read`,
933+
options
934+
)
935+
.put()
936+
.json()
937+
if (data.value) {
938+
this.resetList()
939+
this.getMsgNum()
940+
} else {
941+
ElMessage.warning(error.value.msg)
942+
}
943+
},
944+
async allClear() {
945+
let params = {}
946+
if(this.selectAll){
947+
params = {
948+
mark_all:true
949+
}
950+
}else {
951+
params = {
952+
ids: this.selectedItems.map(item => item.id)
953+
}
954+
}
955+
const options = { body: JSON.stringify(params) }
956+
const { data, error } = await useFetchApi(
957+
`/notifications`,
958+
options
959+
)
960+
.delete()
961+
.json()
962+
if (data.value) {
963+
this.resetList()
964+
this.getMsgNum()
965+
} else {
966+
ElMessage.warning(error.value.msg)
967+
}
968+
},
878969
handleLocaleChange(locale) {
879970
location.href = `/${locale}/settings/locale`
880971
},
@@ -1071,7 +1162,11 @@
10711162
10721163
if (data.value?.data) {
10731164
this.msgNum = data.value.data.unread_count
1074-
this.msgList = [...this.msgList, ...data.value.data.messages]
1165+
const newMessages = data.value.data.messages.map(msg => ({
1166+
...msg,
1167+
checked: false
1168+
}))
1169+
this.msgList = [...this.msgList, ...newMessages]
10751170
this.currentPage++
10761171
10771172
if (data.value.data.messages.length < this.pageSize) {
@@ -1107,6 +1202,7 @@
11071202
this.msgList = []
11081203
this.currentPage = 1
11091204
this.noMore = false
1205+
this.selectAll = false
11101206
this.getMsgList()
11111207
},
11121208
@@ -1152,6 +1248,11 @@
11521248
}
11531249
},
11541250
watch: {
1251+
msgList(newVal) {
1252+
if (newVal.length > this.selectedItems.length) {
1253+
this.selectAll = false
1254+
}
1255+
},
11551256
onlyUnread(newVal) {
11561257
this.resetList()
11571258
},

‎frontend/src/locales/en_js/navbar.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export const navbar = {
4040
system:'System Messages',
4141
organization:'Organization Messages',
4242
asset_management:'Asset Management',
43+
deployment:'Deployment Message',
4344
noMoreData: 'No more messages',
4445
loading: 'Loading...',
4546
ago: ' ago',
@@ -59,5 +60,8 @@ export const navbar = {
5960
formTip3: 'Valid email required',
6061
formTip4: 'TTL: 1-365 days',
6162
formTip5: 'Select at least one type',
63+
allRead:'Read',
64+
allClear:'Achieve',
65+
checkAll:'Select All',
6266
releaseVersion: 'Version',
6367
}

‎frontend/src/locales/zh_hant_js/navbar.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ export const navbar = {
106106
system: '系統消息',
107107
organization: '組織類消息',
108108
asset_management: '資產管理消息',
109+
deployment:'部署消息',
109110
noMoreData: '沒有更多消息了',
110111
loading: '加載中...',
111112
ago: ' 前',
@@ -125,5 +126,8 @@ export const navbar = {
125126
formTip3: '請輸入有效的郵箱地址',
126127
formTip4: '消息存活時間應為1-365天',
127128
formTip5: '至少選擇一種消息類型',
129+
allRead:'標為已讀',
130+
allClear:'清除選中',
131+
checkAll:'選擇全部',
128132
releaseVersion: '當前版本',
129133
}

‎frontend/src/locales/zh_js/navbar.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export const navbar = {
4040
system:'系统消息',
4141
organization:'组织类消息',
4242
asset_management:'资产管理消息',
43+
deployment:'部署消息',
4344
noMoreData: '没有更多消息了',
4445
loading: '加载中...',
4546
ago: ' 前',
@@ -59,5 +60,8 @@ export const navbar = {
5960
formTip3:'请输入有效的邮箱地址',
6061
formTip4:'消息存活时间应为1-365天',
6162
formTip5:'至少选择一种消息类型',
63+
checkAll:'选择全部',
64+
allRead:'标为已读',
65+
allClear:'清除选中',
6266
releaseVersion: '当前版本',
6367
}

0 commit comments

Comments
 (0)