From 8170ab5bc773f6a290d48aa77a2ec90dba27a229 Mon Sep 17 00:00:00 2001
From: matthias <matthias.reumann@tum.de>
Date: Fri, 8 Sep 2023 12:48:02 +0200
Subject: [PATCH] Moderate replies (#1131)

Add TS logic to handle reply moderation
---
 dao/chat.go                         |  2 +-
 web/template/components/chat.gohtml | 41 ++++++++++++++++++-----------
 web/ts/api/chat.ts                  |  7 +++++
 web/ts/components/chat.ts           |  3 ++-
 4 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/dao/chat.go b/dao/chat.go
index 18cd74aed..a8f93e01c 100644
--- a/dao/chat.go
+++ b/dao/chat.go
@@ -89,7 +89,7 @@ func (d chatDao) GetReactions(chatID uint) ([]model.ChatReaction, error) {
 func (d chatDao) GetVisibleChats(userID uint, streamID uint) ([]model.Chat, error) {
 	var chats []model.Chat
 	query := DB.
-		Preload("Replies").
+		Preload("Replies", "(visible = 1) OR (user_id = ?)", userID).
 		Preload("Reactions").
 		Preload("AddressedToUsers").
 		Where("(visible = 1) OR (user_id = ?)", userID).
diff --git a/web/template/components/chat.gohtml b/web/template/components/chat.gohtml
index 9062e95d9..be871fd55 100644
--- a/web/template/components/chat.gohtml
+++ b/web/template/components/chat.gohtml
@@ -74,9 +74,7 @@
                                     <span x-show="m.admin"
                                           class="fa-video text-white bg-red-400 p-1 rounded fas"></span>
                                     <span class="text-2 font-semibold" x-text="m.name" :style="'color:'+m.color"></span>
-                                    <span x-show="!m.visible" class="text-5 font-light">
-                        This message is currently only visible to you and admins.
-                    </span>
+                                    <span x-show="!m.visible" class="text-5 font-light">This message is currently only visible to you and admins.</span>
                                 </div>
                                 <div class="relative group p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                                     <div class="flex justify-between">
@@ -190,26 +188,39 @@
 
 
                                 <!-- replies -->
-                                <div x-cloak x-show="m.ShowReplies.value"
-                                     class="grid gap-y-3 py-1 pl-2 mt-2 ml-4 border-l-2 dark:border-secondary-light">
+                                <article x-cloak x-show="m.ShowReplies.value"
+                                         class="grid gap-y-3 py-1 pl-2 mt-2 ml-4 border-l-2 dark:border-secondary-light">
                                     <template x-for="reply in m.replies">
-                                        <div class="grid gap-y-1">
+                                        <section class="grid gap-y-1">
                                             <div>
-                            <span x-show="reply.admin"
-                                  class="text-white bg-red-400 p-1 text-xs rounded fas fa-video"></span>
+                                                <span x-show="reply.admin"
+                                                      class="text-white bg-red-400 p-1 text-xs rounded fas fa-video"></span>
                                                 <span class="text-2 font-semibold" x-text="reply.name"
                                                       :style="'color:'+reply.color"></span>
+                                                <span x-show="!reply.visible" class="text-xs text-5 font-light">This message is currently only visible to you and admins.</span>
                                             </div>
-                                            <div class="group p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700">
-                                                <div class="flex justify-between">
-                                                    <span class="w-5/6 overflow-wrap-anywhere my-auto" x-html="reply.message"></span>
-                                                    <span class="hidden group-hover:inline text-xs text-5 font-light mt-auto"
-                                                          x-text="reply.friendlyCreatedAt()"></span>
+                                            <div class="flex">
+                                                <div class="group p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 flex-grow">
+                                                    <div class="flex justify-between">
+                                                        <span class="w-5/6 overflow-wrap-anywhere my-auto" x-html="reply.message"></span>
+                                                        <span class="hidden group-hover:inline text-xs text-5 font-light mt-auto"
+                                                              x-text="reply.friendlyCreatedAt()"></span>
+                                                    </div>
                                                 </div>
+                                                {{if $course.ModeratedChatEnabled}}
+                                                    <template x-if="isAdmin()">
+                                                        <button x-cloak x-show="!reply.visible"
+                                                                @click="approveMessage(reply.ID)"
+                                                                title="Approve Message"
+                                                                class="tum-live-icon-button shrink mx-2">
+                                                            <i class="fa-solid fa-spell-check"></i>
+                                                        </button>
+                                                    </template>
+                                                {{end}}
                                             </div>
-                                        </div>
+                                        </section>
                                     </template>
-                                </div>
+                                </article>
                             </section>
                         </template>
                     </div>
diff --git a/web/ts/api/chat.ts b/web/ts/api/chat.ts
index fcbce6ecd..7bf8753c7 100644
--- a/web/ts/api/chat.ts
+++ b/web/ts/api/chat.ts
@@ -92,6 +92,13 @@ export class ChatMessageArray {
         this.messages = filtered;
     }
 
+    approveReply(m: ChatMessage) {
+        const base = this.messages.find((msg) => msg.ID === m.replyTo.Int64);
+        const filtered = base.replies.filter((msg) => msg.ID !== m.ID);
+        filtered.push(Object.assign(new ChatMessage(), m));
+        base.replies = filtered;
+    }
+
     retract(msg: ChatMessage, isAdmin: boolean) {
         if (isAdmin) {
             this.messages.find((m) => m.ID === msg.ID).visible = false;
diff --git a/web/ts/components/chat.ts b/web/ts/components/chat.ts
index e260f88c2..1b187e3f4 100644
--- a/web/ts/components/chat.ts
+++ b/web/ts/components/chat.ts
@@ -232,7 +232,8 @@ export function chatContext(streamId: number, user: User, isRecording: boolean):
 
         handleApprove(msg: ChatMessage) {
             this.preprocessors.forEach((f) => f(msg, this.user));
-            this.messages.approve(msg);
+            if (msg.replyTo.Valid) this.messages.approveReply(msg);
+            else this.messages.approve(msg);
         },
 
         handleRetract(msg: ChatMessage) {