EZQMS-310, EZQMS-311, EZQMS-317: Support read only mode for thread messages + fix adding thread comments (#3862)

* EZQMS-310, EZQMS-311: Support read only mode for thread messages

Signed-off-by: Anna No <anna.no@xored.com>

* EZQMS-317: fix adding comments to thread

Signed-off-by: Anna No <anna.no@xored.com>

* EZQMS-317: fix adding comments to thread

Signed-off-by: Anna No <anna.no@xored.com>

---------

Signed-off-by: Anna No <anna.no@xored.com>

plugins/chunter-resources/src/components/Message.svelte

@@ -43,6 +43,7 @@
   export let isPinned: boolean = false
   export let isSaved: boolean = false
   export let isHighlighted = false
+  export let readOnly = false
 
   let refInput: AttachmentRefInput
 
@@ -254,30 +255,32 @@
       </div>
     {/if}
   </div>
-  <div class="buttons clear-mins" class:menuShowed>
+  {#if !readOnly}
-    <div class="tool">
+    <div class="buttons clear-mins" class:menuShowed>
-      <ActionIcon
+      <div class="tool">
-        icon={IconMoreH}
+        <ActionIcon
-        size={'medium'}
+          icon={IconMoreH}
-        action={(e) => {
+          size={'medium'}
-          showMenu(e)
+          action={(e) => {
-        }}
+            showMenu(e)
-      />
+          }}
+        />
+      </div>
+      {#if !thread}
+        <div class="tool"><ActionIcon icon={Thread} size={'medium'} action={openThread} /></div>
+      {/if}
+      <div class="tool book">
+        <ActionIcon
+          icon={Bookmark}
+          size={'medium'}
+          action={addToSaved}
+          label={isSaved ? chunter.string.RemoveFromSaved : chunter.string.AddToSaved}
+        />
+      </div>
+      <!-- <div class="tool"><ActionIcon icon={Share} size={'medium'}/></div> -->
+      <div class="tool"><ActionIcon icon={Emoji} size={'medium'} action={openEmojiPalette} /></div>
     </div>
-    {#if !thread}
+  {/if}
-      <div class="tool"><ActionIcon icon={Thread} size={'medium'} action={openThread} /></div>
-    {/if}
-    <div class="tool book">
-      <ActionIcon
-        icon={Bookmark}
-        size={'medium'}
-        action={addToSaved}
-        label={isSaved ? chunter.string.RemoveFromSaved : chunter.string.AddToSaved}
-      />
-    </div>
-    <!-- <div class="tool"><ActionIcon icon={Share} size={'medium'}/></div> -->
-    <div class="tool"><ActionIcon icon={Emoji} size={'medium'} action={openEmojiPalette} /></div>
-  </div>
 </div>
 
 <style lang="scss">

plugins/chunter-resources/src/components/Thread.svelte

@@ -36,6 +36,8 @@
   export let savedAttachmentsIds: Ref<Attachment>[]
   export let _id: Ref<Message>
   export let showHeader = true
+  export let readOnly = false
+
   let parent: Message | undefined
   let commentId = generateId() as Ref<ThreadMessage>
 
@@ -127,13 +129,13 @@
     if (parent === undefined) return
     const { message, attachments } = event.detail
     const me = getCurrentAccount()._id
-    await client.createDoc(
+    await client.addCollection(
-      plugin.class.ThreadMessage,
+      chunter.class.ThreadMessage,
       parent.space,
+      parent._id,
+      parent._class,
+      'repliesCount',
       {
-        attachedTo: _id,
-        attachedToClass: plugin.class.Message,
-        collection: 'repliesCount',
         content: message,
         createBy: me,
         attachments
@@ -171,7 +173,7 @@
 {/if}
 <div class="flex-col content mt-2 flex-no-shrink">
   {#if parent}
-    <MsgView message={parent} thread {savedAttachmentsIds} />
+    <MsgView message={parent} thread {savedAttachmentsIds} {readOnly} />
     {#if total > comments.length}
       <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div
@@ -184,29 +186,31 @@
       </div>
     {/if}
     {#each comments as comment (comment._id)}
-      <MsgView message={comment} thread {savedAttachmentsIds} />
+      <MsgView message={comment} thread {savedAttachmentsIds} {readOnly} />
     {/each}
-    <div class="flex mr-4 ml-4 pb-4 mt-2 clear-mins">
+    {#if !readOnly}
-      <div class="min-w-6">
+      <div class="flex mr-4 ml-4 pb-4 mt-2 clear-mins">
-        <Avatar size="x-small" avatar={currentEmployee?.avatar} name={currentEmployee?.name} />
+        <div class="min-w-6">
+          <Avatar size="x-small" avatar={currentEmployee?.avatar} name={currentEmployee?.name} />
+        </div>
+        <div class="ml-2 w-full">
+          <AttachmentRefInput
+            space={parent.space}
+            _class={plugin.class.ThreadMessage}
+            objectId={commentId}
+            placeholder={chunter.string.AddCommentPlaceholder}
+            {showActions}
+            {showSend}
+            on:message={onMessage}
+            on:focus={() => {
+              showSend = true
+              showActions = true
+            }}
+            bind:loading
+          />
+        </div>
       </div>
-      <div class="ml-2 w-full">
+    {/if}
-        <AttachmentRefInput
-          space={parent.space}
-          _class={plugin.class.ThreadMessage}
-          objectId={commentId}
-          placeholder={chunter.string.AddCommentPlaceholder}
-          {showActions}
-          {showSend}
-          on:message={onMessage}
-          on:focus={() => {
-            showSend = true
-            showActions = true
-          }}
-          bind:loading
-        />
-      </div>
-    </div>
   {/if}
 </div>