wc: replace select component in study-admin-audit #TASK-5070

opencb · Nov 7, 2023 · a8be6da · a8be6da
1 parent cf2f32c
commit a8be6da
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 20 deletions.
diff --git 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
@@ -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>`,
                         },
                         // {