wc: Allow to filter by tags in note-browser #TASK-7267 #TASK-6445

opencb · Dec 16, 2024 · baed514 · baed514
1 parent 5c73263
commit baed514
Showing 1 changed file with 25 additions and 0 deletions.
diff --git a/src/webcomponents/note/note-browser.js b/src/webcomponents/note/note-browser.js
@@ -235,6 +235,31 @@ export default class NoteBrowser extends LitElement {
                                 multiple: true,
                                 description: ""
                             },
+                            {
+                                id: "tags",
+                                name: "Tags",
+                                render: (onFilterChange, query, opencgaSession) => {
+                                    const resource = (query?.scope === "ORGANIZATION" || query?.scope === "NOTE_ORGANIZATION") ? "NOTE_ORGANIZATION" : "NOTE_STUDY";
+                                    const tagsFilterConfig = {
+                                        preprocessResults: results => {
+                                            return results.map(result => result.tags)
+                                                .flat()
+                                                .map(tag => ({id: tag}));
+                                        },
+                                    };
+                                    return html`
+                                        <catalog-search-autocomplete
+                                            .resource="${resource}"
+                                            .value="${query?.tags}"
+                                            .searchField="${"tags"}"
+                                            .query="${{include: "tags"}}"
+                                            .opencgaSession="${opencgaSession}"
+                                            .config="${tagsFilterConfig}"
+                                            @filterChange="${e => onFilterChange("tags", e.detail.value)}">
+                                        </catalog-search-autocomplete>
+                                    `;
+                                },
+                            },
                             {
                                 id: "date",
                                 name: "Creation Date",