From 354de3fdd07cb8da3f93157ff1544c900500b329 Mon Sep 17 00:00:00 2001
From: "J.-S. Caux" <J.S.Caux@uva.nl>
Date: Sun, 4 Jul 2021 05:52:38 +0200
Subject: [PATCH] Make Search available tabs responsive
---
scipost_vue/components/Search.vue | 69 ++++++++-----------
.../components/SearchableObjectsTable.vue | 5 --
2 files changed, 28 insertions(+), 46 deletions(-)
diff --git a/scipost_vue/components/Search.vue b/scipost_vue/components/Search.vue
index da085098e..62e3b29be 100644
--- a/scipost_vue/components/Search.vue
+++ b/scipost_vue/components/Search.vue
@@ -134,37 +134,22 @@
role="tablist"
>
<li
- class="flex-sm-fill text-sm-center nav-item"
- role="presentation"
- >
- <button
- class="nav-link mx-auto active"
- id="publications-tab"
- data-bs-toggle="pill"
- data-bs-target="#publications"
- type="button"
- role="tab"
- aria-controls="publications"
- aria-selected="true"
- >
- Publications
- </button>
- </li>
- <li
+ v-for="(availableTab, index) in availableTabs"
class="flex-sm-fill text-sm-center nav-item"
role="presentation"
>
<button
class="nav-link mx-auto"
- id="submissions-tab"
+ :class="index == 0 ? 'active' : ''"
+ :id="availableTab.label + '-tab'"
data-bs-toggle="pill"
- data-bs-target="#submissions"
+ :data-bs-target="'#' + availableTab.label"
type="button"
role="tab"
- aria-controls="submissions"
+ aria-controls="availableTab.label"
aria-selected="true"
>
- Submissions
+ {{ availableTab.label }}
</button>
</li>
</ul>
@@ -173,29 +158,16 @@
class="tab-content"
id="tabContent">
<div
- class="tab-pane fade show active"
- id="publications"
- role="tabpanel"
- aria-labelledby="publications-tab"
- >
- <searchable-objects-table
- :object_type="'publication'"
- :displayfields="[{ field: 'doi_label', label: 'DOI label' }, { field: 'url', label: 'URL' }]"
- :url="'publications'"
- :initial_filter="initialQuery"
- >
- </searchable-objects-table>
- </div>
- <div
- class="tab-pane fade"
- id="submissions"
+ v-for="(availableTab, index) in availableTabs"
+ class="tab-pane fade show"
+ :class="index == 0 ? 'active' : ''"
+ :id="availableTab.label"
role="tabpanel"
- aria-labelledby="submissions-tab"
+ :aria-labelledby="availableTab.label + '-tab'"
>
<searchable-objects-table
- :object_type="'submission'"
- :displayfields="[{ field: 'title', label: 'Title'}, { field: 'identifier', label: 'Identifier' }]"
- :url="'submissions'"
+ :object_type="availableTab.objectType"
+ :url="availableTab.url"
:initial_filter="initialQuery"
>
</searchable-objects-table>
@@ -221,6 +193,20 @@ export default {
},
},
setup(props, context) {
+ const availableTabs = ref(
+ [
+ {
+ objectType: 'publication',
+ label: 'publications',
+ url: 'publications'
+ },
+ {
+ objectType: 'submission',
+ label: 'submissions',
+ url: 'submissions'
+ },
+ ]
+ )
const initialQuery = ref('')
onMounted( () => {
@@ -230,6 +216,7 @@ export default {
onMounted(() => document.getElementById('header-search-close-btn').click())
return {
+ availableTabs,
initialQuery
}
},
diff --git a/scipost_vue/components/SearchableObjectsTable.vue b/scipost_vue/components/SearchableObjectsTable.vue
index 3360cfe93..8136c7119 100644
--- a/scipost_vue/components/SearchableObjectsTable.vue
+++ b/scipost_vue/components/SearchableObjectsTable.vue
@@ -340,10 +340,6 @@ export default {
type: String,
required: true
},
- displayfields: {
- type: Array,
- required: true
- },
paginated: true,
numbered: false,
url: {
@@ -358,7 +354,6 @@ export default {
setup(props) {
const uId = ref(uniqueId())
const advancedSearchIsOn = ref(false)
- // const basicSearchQuery = toRef(props, 'initial_filter')
const basicSearchQuery = ref('')
const newQueryField = ref(null)
const allowedLookups = ref([])
--
GitLab