Merge pull request #43 from source-data/EEB13/use-new-endpoint

EEB 13: Use the new endpoint, overall functionality improvements

frontend/src/App.vue

@@ -11,7 +11,6 @@ v-app
 <script>
 import TopNavBar from './layouts/top-nav-bar'
 import Banner from './layouts/banner'
-import LeftSideBar from './layouts/left-side-bar'
 import Footer from './layouts/footer'
 
 export default {
@@ -20,7 +19,6 @@ export default {
   components: {
     TopNavBar,
     Banner,
-    LeftSideBar,
     Footer
   },
   metaInfo: {

frontend/src/components/filtering/by-reviewing-service.vue

@@ -2,57 +2,53 @@
 v-card(flat)
   v-card-title Review sources
   v-card-text
-    v-chip-group(v-model="selectedRev" mandatory column)
-      span(v-for="serviceId in this.reviewingList" :key="`${serviceId}-chip`")
-        router-link(:to="{ path: `/refereed-preprints/${serviceId2Slug(serviceId)}` }")
-          v-chip(
-            :value="serviceId2Slug(serviceId)" :disabled="loadingRecords"
-          )
-            img(v-if="imageFileName(serviceId2Slug(serviceId))" :src="require(`@/assets/chips/` + imageFileName(serviceId2Slug(serviceId)))" height="24px" :alt="serviceId2Name(serviceId)").pa-1
-            | {{ serviceId2Name(serviceId) }}
+    v-chip-group(v-model="selectedReviewer" mandatory column)
+      span(v-for="service in this.reviewing_services" :key="`${service.id}-chip`")
+        v-chip(:value="service.id" :disabled="loadingRecords" filter filter-icon="mdi-check" 
+               active-class="active-chip" text-color="black")
+          img(v-if="imageFileName(serviceId2Slug(service.id))" :src="require(`@/assets/chips/` + imageFileName(serviceId2Slug(service.id)))" height="24px" :alt="serviceId2Name(service.id)").pa-1
+          | {{ serviceId2Name(service.id) }}
 
     InfoCardsReviewServiceSummaryGraph(
-      :service_name="serviceId2Name(serviceSlug2Id(selectedRev))",
-      :url="reviewingService(serviceSlug2Id(selectedRev)).url",
-      :peer_review_policy="reviewingService(serviceSlug2Id(selectedRev)).peer_review_policy",
-      :review_requested_by="reviewingService(serviceSlug2Id(selectedRev)).review_requested_by",
-      :reviewer_selected_by="reviewingService(serviceSlug2Id(selectedRev)).reviewer_selected_by",
-      :review_coverage="reviewingService(serviceSlug2Id(selectedRev)).review_coverage",
-      :reviewer_identity_known_to="reviewingService(serviceSlug2Id(selectedRev)).reviewer_identity_known_to",
-      :competing_interests="reviewingService(serviceSlug2Id(selectedRev)).competing_interests",
-      :public_interaction="reviewingService(serviceSlug2Id(selectedRev)).public_interaction",
-      :opportunity_for_author_response="reviewingService(serviceSlug2Id(selectedRev)).opportunity_for_author_response",
-      :recommendation="reviewingService(serviceSlug2Id(selectedRev)).recommendation",
+      :service_name="serviceId2Name(selectedReviewer)",
+      :url="reviewingService(selectedReviewer).url",
+      :peer_review_policy="reviewingService(selectedReviewer).peer_review_policy",
+      :review_requested_by="reviewingService(selectedReviewer).review_requested_by",
+      :reviewer_selected_by="reviewingService(selectedReviewer).reviewer_selected_by",
+      :review_coverage="reviewingService(selectedReviewer).review_coverage",
+      :reviewer_identity_known_to="reviewingService(selectedReviewer).reviewer_identity_known_to",
+      :competing_interests="reviewingService(selectedReviewer).competing_interests",
+      :public_interaction="reviewingService(selectedReviewer).public_interaction",
+      :opportunity_for_author_response="reviewingService(selectedReviewer).opportunity_for_author_response",
+      :recommendation="reviewingService(selectedReviewer).recommendation",
     ).px-0.mt-2
 </template>
 
 <script>
 
-import { mapGetters, mapState } from 'vuex'
-import { serviceId2Slug, serviceId2Name, serviceSlug2Id } from '../../store/by-reviewing-service'
+import { mapState, mapGetters } from 'vuex'
+import { serviceId2Slug, serviceId2Name } from '../../store/by-filters'
 import InfoCardsReviewServiceSummaryGraph from '../review-service-info/review-service-summary-graph.vue'
 
 export default {
   components: {
     InfoCardsReviewServiceSummaryGraph,
   },
   data () {
-    return {
-      selectedRev: undefined,
-    }
-  },
-  beforeMount () {
-    this.selectedRev = this.$route.params.service
+    return {}
   },
   computed: {
-    ...mapState('highlights', ['loadingRecords']),
-    ...mapGetters('byReviewingService', ['records', 'reviewingService']),
-    reviewingList () {
-      const ids =  this.records.map(
-        (r) => {return r.id}
-      ).sort().reverse()
-      return ids
-    },
+    ...mapState('byFilters', ['reviewing_services', 'loadingRecords', 'reviewed_by']),
+    ...mapGetters('byFilters', ['reviewingService']),
+
+    selectedReviewer: {
+      set(value) {
+        this.$store.commit("byFilters/setReviewedBy", value);
+      },
+      get() {
+        return this.reviewed_by
+      }
+    }
   },
   methods: {
     // Returns the filename for the  image that should be associated with the chip's text, or null if none is found
@@ -64,17 +60,13 @@ export default {
       else return null
     },
     serviceId2Slug,
-    serviceId2Name,
-    serviceSlug2Id
+    serviceId2Name
   },
 }
 </script>
 
 <style lang="scss" scoped>
-/* After the user clicks on a reviewing service's button, all rev service buttons are disabled.
- * This makes the clicked-on-but-disabled button distinct from all the other disabled buttons.
- */
-.v-btn--active.v-btn--disabled::before {
-  opacity: 0.5 !important;
+.active-chip {
+  background-color: var(--v-accent-lighten1);
 }
 </style>

frontend/src/components/filtering/by-simple-search-query.vue

@@ -1,31 +1,43 @@
 <template lang="pug">
-v-text-field(
-  v-model="query"
-  :loading="loadingRecords"
-  placeholder="keywords, authors, doi"
-  prepend-icon="mdi-magnify"
-  hide-details
-  @keyup.enter="onSubmit"
-)
+v-card(flat).flex-grow-1
+  v-card-title Search for terms
+  v-card-text.d-flex.d-flex-row.align-center
+    v-text-field(
+      :value="currentQuery" v-on:keyup.enter="currentQuery = $event.target.value"
+      :loading="loadingRecords"
+      placeholder="keywords, authors, doi"
+      prepend-icon="mdi-magnify"
+      hide-details
+      outlined
+    ).mt-0.pt-0
+    v-tooltip(bottom transition="fade-transition")
+      template(v-slot:activator="{ on, hover, attrs }")
+        v-btn(text v-bind="attrs" v-on="on" @click="currentQuery = ''" icon :disabled="query === ''")
+          v-icon(dense) mdi-close-circle
+      span Clear search
 </template>
 
 <script>
 import { mapState } from 'vuex'
+
 export default {
   data: function() {
     return {
-      query: ''
     }
   },
   computed: {
-    ...mapState('fulltextSearch', ['loadingRecords'])
+    ...mapState('byFilters', ['query', 'loadingRecords']),
+
+    currentQuery: {
+      set(value) {
+        this.$vuetify.goTo(0);
+        this.$store.commit("byFilters/setQuery", value);
+      },
+      get() {
+        return this.query
+      }
+    }
   },
-  methods: {
-    onSubmit()  {
-      this.$store.dispatch('fulltextSearch/search', this.query).then(
-        () => {this.$store.dispatch('highlights/listByCurrent', 'fulltextSearch')}
-      )
-    },
-  }
+  methods: {}
 }
-</script>
+</script>

frontend/src/components/highlights/index.vue

@@ -1,36 +1,38 @@
 <template lang="pug">
-div.d-flex.ml-auto.mr-auto
+div.d-flex.mr-auto
   v-container(v-if="loadingRecords")
     v-progress-circular(:size="70" :width="7" color="primary" indeterminate)
 
-  span(v-if="!loadingRecords")
-    v-container(fluid v-if="records.length > 0" :class="{'highlights-loading': loadingRecords}")
-      h2 {{ records.length }} reviewed preprints found
-    v-container(fluid v-if="records.length == 0 && !loadingRecords")
-      h2(v-if="records.length == 0 && !loadingRecords") No results
+  span(v-else).mt-3
+    v-container(fluid v-if="paging.totalItems > 0" :class="{'highlights-loading': loadingRecords}")
+      h2 {{ paging.totalItems }} reviewed preprints found
+    v-container(fluid v-if="paging.totalItems == 0")
+      h2 Sorry, we couldn't find any results
+      p Try changing some of the filter values
     v-container(fluid :class="{'highlights-loading': loadingRecords}")
       v-row(align="center" justify="start")
         v-col(cols=8).px-0.d-flex
           v-pagination(
+            v-if="paging.totalItems > 0"
             v-model="pageNumber"
             :length="pageCount"
             :total-visible="10"
           )
-      v-row
+      v-row(v-if="paging.totalItems > 0")
         v-col.d-flex
-          v-btn-toggle(v-model="sortBy" @change="sortRecords")
+          v-btn-toggle(v-model="sortBy")
             v-tooltip(bottom transition="fade-transition")
               template(v-slot:activator="{ on, hover, attrs }")
-                v-btn(x-small v-bind="attrs" v-on="on" outlined value="pub_date")
+                v-btn(x-small v-bind="attrs" v-on="on" outlined value="preprint-date")
                   | preprint date
               span Sort by preprint date
             v-tooltip(bottom transition="fade-transition")
               template(v-slot:activator="{ on, hover, attrs }")
-                v-btn(x-small outlined value="posting_date" v-bind="attrs" v-on="on")
+                v-btn(x-small outlined value="reviewing-date" v-bind="attrs" v-on="on")
                   | reviewing date
               span Sort by revewing date
 
-          v-btn-toggle(v-model="sortDirection" @change="sortRecords" mandatory).ml-3
+          v-btn-toggle(v-model="sortedOrder" mandatory).ml-3
             v-tooltip(right transition="fade-transition")
               template(v-slot:activator="{ on, hover, attrs }")
                 v-btn(x-small v-bind="attrs" v-on="on" icon aria-label="descending" value="desc")
@@ -42,10 +44,10 @@ div.d-flex.ml-auto.mr-auto
                   v-icon(dense) mdi-sort-ascending
               span Sort earliest first
 
-      v-row(v-for="article in paginatedRecords" :key="article.id")
+      v-row(v-for="article in records" :key="article.id")
         v-col
           HighlightedListItem(:article="article")
-      v-row(justify="start")
+      v-row(v-if="paging.totalItems > 0" justify="start")
         v-col(cols=6).px-0.d-flex
           v-pagination(
             v-model="pageNumber"
@@ -56,63 +58,48 @@ div.d-flex.ml-auto.mr-auto
 
 <script>
 import HighlightedListItem from './list-item.vue'
-import { mapGetters, mapState } from 'vuex'
-
+import { mapState } from 'vuex'
 
 export default {
   data() {
-    return {
-      pageSize: 10,
-    }
+    return {}
   },
   components: {
     HighlightedListItem,
   },
   computed: {
-    ...mapGetters('highlights', ['records', 'selectedTab']),
-    ...mapState('highlights', ['loadingRecords']),
+    ...mapState('byFilters', ['records', 'paging', 'loadingRecords']),
     pageNumber: {
       get() {
-        return this.$store.getters['highlights/currentPage']
+        return parseInt(this.paging.currentPage)
       },
-      set(page) {
-        this.$store.commit('highlights/updateCurrentPage', page)
-      } 
-    },
-    pageCount() {
-      let l = this.records.length,
-          s = this.pageSize
-      return Math.ceil(l / s)
-    },
-    paginatedRecords(){
-      const start = (this.pageNumber - 1) * this.pageSize,
-            end = start + this.pageSize;
-      return this.records.slice(start, end);
+      set(value) {
+        this.$store.commit("byFilters/setCurrentPage", value);
+      }
     },
     sortBy: {
       get() {
-        return this.$store.getters['highlights/getSortBy']
+        return this.paging.sortedBy
       },
       set(value) {
-        this.$store.commit('highlights/setSortBy', {value: value})
+        this.$store.commit('byFilters/setSortedBy', value);
       }
     },
-    sortDirection: {
+    sortedOrder: {
       get() { 
-        return this.$store.getters['highlights/getSortDirection']
+        return this.paging.sortedOrder
       },
       set(value) {
-        this.$store.commit('highlights/setSortDirection', {value: value})
+        this.$store.commit('byFilters/setSortedOrder', value);
       }
-    }
-  },
-  methods: {
-    sortRecords() {
-      this.$store.commit('highlights/setSortBy', {value: this.sortBy})
-      this.$store.commit('highlights/setSortDirection', {value: this.sortDirection})
-      this.$store.commit('highlights/sortRecords')
+    },
+    pageCount() {
+      let l = this.paging.totalItems,
+          s = this.paging.perPage
+      return Math.ceil(l / s)
     },
   },
+  methods: {},
 }
 </script>
 

frontend/src/components/highlights/list-item.vue

@@ -65,7 +65,7 @@ v-card(v-if="article" color="tertiary")
 <script>
 import MarkdownIt from 'markdown-it'
 import { BASE_URL } from '../../lib/http'
-import { serviceId2Name } from '../../store/by-reviewing-service'
+import { serviceId2Name } from '../../store/by-filters'
 import '@source-data/render-rev'
 
 export default {
@@ -74,9 +74,7 @@ export default {
     expandedReview: Object,
   },
   data() {
-    return {
-      activeCards: [0,1,2],
-    }
+    return {}
   },
   methods: {
     href(doi) {
@@ -179,8 +177,8 @@ export default {
     --rr-timeline-width: 100%;
   }
   .v-sheet.v-card.article-card {
-    box-shadow: unset;
-    border-radius: 0;
+    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+    border-radius: 4px;
   }
 
   @media screen and (max-width: 1080px) {