🔨 Add mark all read to message

nextcloud_backup/backend/src/routes/messages.ts

@@ -3,16 +3,21 @@ import messageManager from "../tools/messageManager.js";
 
 const messageRouter = express.Router();
 
-messageRouter.get('/', (req, res, next)=>{
-  res.json(messageManager.get())
+messageRouter.get("/", (req, res) => {
+  res.json(messageManager.get());
 });
 
-messageRouter.patch('/:messageId/readed', (req, res, next)=>{
-  if(messageManager.markReaded(req.params.messageId)){
+messageRouter.patch("/:messageId/readed", (req, res) => {
+  if (messageManager.markReaded(req.params.messageId)) {
     res.json(messageManager.get());
-  }else{
+  } else {
     res.status(404).send();
   }
 });
 
+messageRouter.post("/allReaded", (req, res) => {
+  messageManager.markAllReaded();
+  res.json(messageManager.get());
+});
+
 export default messageRouter;

nextcloud_backup/backend/src/tools/messageManager.ts

@@ -7,14 +7,19 @@ const maxMessageLength = 255;
 class MessageManager {
   private messages: Message[] = [];
 
-  public addMessage(type: MessageType, message: string, detail?: string, isImportant = false) {
-    this.messages.push({
+  public addMessage(
+    type: MessageType,
+    message: string,
+    detail?: string,
+    isImportant = false
+  ) {
+    this.messages.unshift({
       id: randomUUID(),
       message: message,
       type: type,
       time: DateTime.now(),
       viewed: !isImportant,
-      detail: detail
+      detail: detail,
     });
     if (this.messages.length > maxMessageLength) {
       this.messages.shift();
@@ -37,24 +42,28 @@ class MessageManager {
     this.addMessage(MessageType.SUCCESS, message, detail);
   }
 
-  public get(){
+  public get() {
     return this.messages;
   }
 
-  public getById(id: string){
-    return this.messages.find(value=>value.id == id);
+  public getById(id: string) {
+    return this.messages.find((value) => value.id == id);
   }
 
-  public markReaded(id: string){
-    const index = this.messages.findIndex(value=>value.id == id);
-    if(index == -1){
+  public markReaded(id: string) {
+    const index = this.messages.findIndex((value) => value.id == id);
+    if (index == -1) {
       return false;
     }
     this.messages[index].viewed = true;
     return true;
   }
+  public markAllReaded() {
+    this.messages.forEach((value: Message) => {
+      value.viewed = true;
+    });
+  }
 }
 
-
 const messageManager = new MessageManager();
 export default messageManager;

nextcloud_backup/frontend/src/components/MessageBar.vue

@@ -1,47 +1,51 @@
 <template>
   <v-menu activator="#message-btn" :close-on-content-click="false">
     <v-sheet width="500" border rounded>
-      <v-toolbar color="surface" density="compact">
-        <div class="d-flex justify-center w-100">
-          <h4>Messages</h4>
-        </div>
+      <v-toolbar color="surface" density="comfortable" border>
+        <v-toolbar-title>Messages</v-toolbar-title>
+        <v-spacer></v-spacer>
+        <v-btn icon @click="markAllReaded">
+          <v-icon color="success">mdi-check-all</v-icon>
+        </v-btn>
       </v-toolbar>
       <v-divider></v-divider>
       <v-responsive max-height="350px" class="overflow-y-auto">
         <v-list class="py-0">
-          <template v-for="(item, index) in messages" :key="item.id">
+          <v-data-iterator :items="messages" item-value="id" items-per-page="-1">
+            <template v-slot:default="{ items,  isExpanded, toggleExpand}">
+              <template v-for="(item, index) in items" :key="item.raw.id">
                 <v-divider v-if="index != 0"></v-divider>
-            <v-list-item :class="{ 'bg-brown-darken-4': !item.viewed }">
+                <v-list-item :class="{ 'bg-brown-darken-4': !item.raw.viewed }">
                   <v-list-item-title>
-                {{ item.message }}
+                    {{ item.raw.message }}
                   </v-list-item-title>
                   <template v-slot:prepend>
                     <v-icon
-                  :icon="getMessageIcon(item.type)"
-                  :color="getMessageColor(item.type)"
+                      :icon="getMessageIcon(item.raw.type)"
+                      :color="getMessageColor(item.raw.type)"
                       class="mr-3"
                     ></v-icon>
                   </template>
                   <template v-slot:append>
                     <v-btn
-                  v-if="item.detail"
+                      v-if="item.raw.detail"
                       variant="text"
                       icon
                       color="secondary"
-                  @click="show[index] = show[index] ? false : true"
+                      @click="toggleExpand(item)"
                       size="small"
                     >
                       <v-icon>
-                    {{ show[index] ? "mdi-chevron-up" : "mdi-information" }}
+                        {{ isExpanded(item) ? "mdi-chevron-up" : "mdi-information" }}
                       </v-icon>
                     </v-btn>
                     <v-scroll-x-transition>
                       <v-btn
                         color="success"
                         variant="text"
-                    @click="markReaded(item.id)"
+                        @click="markReaded(item.raw.id)"
                         icon
-                    v-show="!item.viewed"
+                        v-show="!item.raw.viewed"
                         size="small"
                       >
                         <v-icon>mdi-check</v-icon>
@@ -49,21 +53,24 @@
                     </v-scroll-x-transition>
 
                     <div class="text-caption text-disabled ml-1">
-                  {{ getTimeDelta(item.time) }}
+                      {{ getTimeDelta(item.raw.time) }}
                     </div>
                   </template>
                 </v-list-item>
-            <v-expand-transition v-if="item.detail">
-              <div v-show="show[index]">
+                <v-expand-transition v-if="item.raw.detail">
+                  <div v-if="isExpanded(item)">
                     <v-divider class="mx-3"></v-divider>
                     <v-card class="mx-3 my-2" variant="outlined" color="secondary">
                       <v-card-text>
-                    {{ item.detail }}
+                        {{ item.raw.detail }}
                       </v-card-text>
                     </v-card>
                   </div>
                 </v-expand-transition>
               </template>
+            </template>
+          </v-data-iterator>
+          
         </v-list>
       </v-responsive>
     </v-sheet>
@@ -153,8 +160,13 @@ function markReaded(id: string) {
   });
 }
 
+function markAllReaded(){
+  messageService.markAllRead().then((value) => {
+    messages.value = value;
+  })
+}
+
 onBeforeUnmount(() => {
   clearInterval(interval);
 });
 </script>
-@/store/message

nextcloud_backup/frontend/src/services/messageService.ts

@@ -8,3 +8,7 @@ export function getMessages() {
 export function markRead(id: string) {
   return kyClient.patch(`messages/${encodeURI(id)}/readed`).json<Message[]>();
 }
+
+export function markAllRead(){
+  return kyClient.post(`messages/allReaded`).json<Message[]>();
+}