From a8be6da726a7ebc84efbc04fdd78cc2fb3a7e89e Mon Sep 17 00:00:00 2001
From: Rodiel Martinez <10471758+Rodielm@users.noreply.github.com>
Date: Tue, 7 Nov 2023 11:11:07 +0100
Subject: [PATCH] wc: replace select component in study-admin-audit #TASK-5070

---
 .../study/admin/study-admin-audit.js          | 48 ++++++++++++-------
 src/webcomponents/study/admin/study-admin.js  |  4 +-
 2 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/src/webcomponents/study/admin/study-admin-audit.js b/src/webcomponents/study/admin/study-admin-audit.js
index befd3d5237..f032279ef7 100644
--- a/src/webcomponents/study/admin/study-admin-audit.js
+++ b/src/webcomponents/study/admin/study-admin-audit.js
@@ -293,54 +293,66 @@ export default class StudyAdminAudit extends LitElement {
                     ${~this._config.filter.sections[0].filters.findIndex(field => field.id === "userId") ? html`
                         <!-- User ID -->
                         <div class="col-12">
-                            <select-field-filter
-                                .opencgaSession="${this.opencgaSession}"
+                            <select-field-filter2
                                 .data="${this.sortedUserIds || []}"
-                                .config=${this._config}
+                                .config=${{
+                                    ...this._config,
+                                    placeholder: "User: All",
+                                    liveSearch: false,
+                                    tags: false
+                                }}
                                 .value="${this.query?.userId}"
-                                placeholder="${"User: All"}"
-                                multiple
                                 @filterChange="${e => this.onFilterChange("userId", e.detail.value)}">
-                            </select-field-filter>
+                            </select-field-filter2>
                         </div>
                     `: nothing}
 
                     ${~this._config.filter.sections[0].filters.findIndex(field => field.id === "action") ? html`
                         <!-- TODO: Action build autocomplete-->
                         <div class="col-12">
-                            <select-field-filter
-                                .opencgaSession="${this.opencgaSession}"
+                            <select-field-filter2
                                 .data="${this.actionValues}"
-                                .config=${this._config}
+                                .config=${{
+                                    ...this._config,
+                                    placeholder: "Action: All",
+                                    liveSearch: false,
+                                    tags: false
+                                }}
                                 .value="${this.query?.action}"
-                                placeholder="${"Action: All"}"
-                                multiple
                                 @filterChange="${e => this.onFilterChange("action", e.detail.value)}">
-                            </select-field-filter>
+                            </select-field-filter2>
                         </div>
                     ` : nothing}
 
                     ${~this._config.filter.sections[0].filters.findIndex(field => field.id === "resource") ? html`
                         <!-- Resource -->
                         <div class="col-12">
-                            <select-field-filter
+                            <select-field-filter2
                                 .data="${this.resourceTypeValues}"
                                 .value=${this.query?.resource}
-                                placeholder="${"Resource: All"}"
+                                .config=${{
+                                    placeholder: "Resource: All",
+                                    liveSearch: false,
+                                    tags: false
+                                }}
                                 @filterChange="${e => this.onFilterChange("resource", e.detail.value)}">
-                            </select-field-filter>
+                            </select-field-filter2>
                         </div>
                     ` : nothing}
 
                     ${~this._config.filter.sections[0].filters.findIndex(field => field.id === "status") ? html`
                         <!-- Status -->
                         <div class="col-12">
-                            <select-field-filter
+                            <select-field-filter2
                                 .data="${this.statusTypeValues}"
                                 .value=${this.query?.status}
-                                placeholder="${"Status: All"}"
+                                .config=${{
+                                    placeholder: "Status: All",
+                                    liveSearch: false,
+                                    tags: false
+                                }}
                                 @filterChange="${e => this.onFilterChange("status", e.detail.value)}">
-                            </select-field-filter>
+                            </select-field-filter2>
                         </div>
                     ` : nothing}
 
diff --git a/src/webcomponents/study/admin/study-admin.js b/src/webcomponents/study/admin/study-admin.js
index 0e200d2d2c..6ac7df5f63 100644
--- a/src/webcomponents/study/admin/study-admin.js
+++ b/src/webcomponents/study/admin/study-admin.js
@@ -527,8 +527,8 @@ export default class StudyAdmin extends LitElement {
                             visibility: "private",
                             render: (opencgaSession, study) => html`
                                 <study-admin-audit
-                                        .opencgaSession="${opencgaSession}"
-                                        .study="${study}">
+                                    .opencgaSession="${opencgaSession}"
+                                    .study="${study}">
                                 </study-admin-audit>`,
                         },
                         // {