Moderator notes WIP (#144)

conversejs/custom/plugins/notes/templates/muc-note-occupant.js

@@ -27,7 +27,7 @@ export function tplMucNoteOccupant (el, occupant) {
     </a>
     ${
       el.full_display
-        ? html`<ul>
+        ? html`<ul aria-hidden="true">
             ${jid ? html`<li title=${__('XMPP Address')}>${jid}</li>` : ''}
             ${occupantId ? html`<li title=${__('Occupant Id')}>${occupantId}</li>` : ''}
           </ul>`

conversejs/custom/plugins/notes/templates/muc-note.js

@@ -2,26 +2,43 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only
 
+import { api } from '@converse/headless'
 import { html } from 'lit'
 import { __ } from 'i18n'
 
 export function tplMucNote (el, note) {
   // eslint-disable-next-line no-undef
   const i18nDelete = __(LOC_moderator_note_delete)
+  // eslint-disable-next-line no-undef
+  const i18nSearch = __(LOC_moderator_note_search_for_participant)
 
   const aboutOccupant = note.getAboutOccupant()
 
   return !el.edit
     ? html`
       <div draggable="true" class="note-line draggables-line">
-        <div class="note-description">${note.get('description') ?? ''}</div>
-        ${
-            aboutOccupant
-              ? html`
-                <livechat-converse-muc-note-occupant
+        <div class="note-content">
+          ${
+              aboutOccupant
+                ? html`
+                  <livechat-converse-muc-note-occupant
+                    .full_display=${el.is_ocupant_filter}
                     .model=${aboutOccupant}
                   ></livechat-converse-muc-note-occupant>`
-              : ''
+                : ''
+          }
+          <div class="note-description">${note.get('description') ?? ''}</div>
+        </div>
+        ${
+          aboutOccupant && el.is_ocupant_filter
+            ? ''
+            : html`
+              <button type="button" class="note-action" @click=${ev => {
+                ev.preventDefault()
+                api.livechat_notes.searchNotesAbout(aboutOccupant)
+              }}>
+                <converse-icon class="fa fa-magnifying-glass" size="1em" title=${i18nSearch}></converse-icon>
+              </button>`
         }
         <button class="note-action" title="${__('Edit')}"
           @click=${el.toggleEdit}

conversejs/custom/plugins/notes/templates/muc-notes.js

@@ -7,6 +7,57 @@ import { repeat } from 'lit/directives/repeat.js'
 import { __ } from 'i18n'
 import { tplMucCreateNoteForm } from './muc-note'
 
+function tplFilters (el) {
+  const filterOccupant = el.occupant_filter
+  if (!filterOccupant) { return '' }
+
+  // eslint-disable-next-line no-undef
+  const i18nSearch = __(LOC_moderator_note_filters)
+
+  return html`
+    <div class="notes-filters">
+      <converse-icon class="fa fa-magnifying-glass" size="1em" title=${i18nSearch}></converse-icon>
+      ${
+        filterOccupant
+          ? html`<livechat-converse-muc-note-occupant
+              full_display=${true}
+              .model=${filterOccupant}
+            ></livechat-converse-muc-note-occupant>`
+          : ''
+      }
+      <button class="notes-action" @click=${(ev) => {
+        ev?.preventDefault()
+        el.filterNotes({})
+      }} title="${__('Close')}">
+        <converse-icon class="fa fa-times" size="1em"></converse-icon>
+      </button>
+    </div>
+    <hr/>
+  `
+}
+
+function isFiltered (el, note) {
+  const filterOccupant = el.occupant_filter
+  if (!filterOccupant) { return false }
+
+  const noteOccupant = note.getAboutOccupant()
+  // there is an occupant filter, so if current note has no associated occupant, we can pass.
+  if (!noteOccupant) { return true }
+
+  if (noteOccupant === filterOccupant) {
+    // Yes!
+    return false
+  }
+
+  // We will also test for nickname, so that we can found anonymous users
+  // (they can have multiple associated occupants)
+  if (filterOccupant.get('nick') && filterOccupant.get('nick') === noteOccupant.get('nick')) {
+    return false
+  }
+
+  return true
+}
+
 export default function tplMucNotes (el, notes) {
   if (!notes) { // if user loses rights
     return html`` // FIXME: add a message like "you dont have access"?
@@ -14,11 +65,17 @@ export default function tplMucNotes (el, notes) {
 
   return html`
     ${
-      el.create_note_opened ? tplMucCreateNoteForm(el, el.create_note_for_occupant) : tplCreateButton(el)
+      el.create_note_opened ? tplMucCreateNoteForm(el, el.create_note_about_occupant) : tplCreateButton(el)
     }
+    ${tplFilters(el)}
     ${
       repeat(notes, (note) => note.get('id'), (note) => {
-        return html`<livechat-converse-muc-note .model=${note}></livechat-converse-muc-note>`
+        return isFiltered(el, note)
+          ? ''
+          : html`<livechat-converse-muc-note
+            .model=${note}
+            .is_ocupant_filter=${!!el.occupant_filter}
+          ></livechat-converse-muc-note>`
       })
     }`
 }