diff --git a/app/assets/stylesheets/repository/repository_table.scss b/app/assets/stylesheets/repository/repository_table.scss index 734ce0bf0..b16849674 100644 --- a/app/assets/stylesheets/repository/repository_table.scss +++ b/app/assets/stylesheets/repository/repository_table.scss @@ -4,10 +4,28 @@ @import "constants"; .repository-table { + position: relative; + .dataTables_filter { float: right; } + .repository-table-error { + background: $color-white; + display: none; + height: 200px; + padding: 1em; + position: absolute; + text-align: center; + top: 176px; + width: 100%; + z-index: 1; + + &.active { + display: block; + } + } + // hack only for firefox @-moz-document url-prefix() { input.form-control[type="file"] { diff --git a/app/javascript/packs/vue/bmt_filter.js b/app/javascript/packs/vue/bmt_filter.js index bf41a4be1..310674459 100644 --- a/app/javascript/packs/vue/bmt_filter.js +++ b/app/javascript/packs/vue/bmt_filter.js @@ -34,6 +34,7 @@ window.initBMTFilter = () => { this.reloadDataTable(); }, clearFilters() { + this.clearSearchError(); this.dataTableElement.removeAttr('data-external-ids'); this.reloadDataTable(); }, @@ -41,10 +42,14 @@ window.initBMTFilter = () => { $(this.$el).closest('.dropdown').removeClass('open'); }, reloadDataTable() { + this.clearSearchError(); this.dataTableElement.DataTable().ajax.reload(); }, handleSearchError(error) { - setTimeout(() => $('.dataTables_empty').html(error), 100); + $('.repository-table-error').addClass('active').html(error); + }, + clearSearchError() { + $('.repository-table-error').removeClass('active').html(''); } } }); diff --git a/app/views/repositories/_repository_table.html.erb b/app/views/repositories/_repository_table.html.erb index e38871be5..ccd98e89b 100644 --- a/app/views/repositories/_repository_table.html.erb +++ b/app/views/repositories/_repository_table.html.erb @@ -1,4 +1,5 @@
+