Merge pull request #324 from impresso/develop

Develop

src/App.vue

@@ -69,14 +69,16 @@ svg {
 }
 
 
-ul.nav.nav-pills .nav-link{
-    background-color: transparent;
-    font-variant: small-caps;
-    margin-bottom: -1px;
-    border: 1px solid transparent;
-    
-    color: #dee2e6;
-    &.active {
+ul.nav.nav-pills .nav-item{
+    .nav-link {
+      background-color: transparent;
+      font-variant: small-caps;
+      margin-bottom: -1px;
+      border: 1px solid transparent;
+
+      color: #a8b3bd;
+    }
+    &.active .nav-link{
       color: black;
       border-color: #dee2e6;
       border-bottom-color: #f8f9fa;

src/components/IssuePage.vue

@@ -1,8 +1,19 @@
 <template lang='html'>
     <i-layout id="IssuePage">
       <i-layout-section width="300px" class="border-right">
+        <b-tabs v-model="tabIndex" slot="header" class="mt-2">
+          <b-tab v-bind:title="$t('tabs.table_of_contents')" active />
+          <b-tab v-bind:title="$t('tabs.table_of_images')" />
+        </b-tabs>
+        <table-of-images
+          v-show="tabIndex === 1"
+          v-bind:tableOfContents="tableOfImages"
+          v-bind:pageUid="pageUid"
+          v-bind:articleUid="imageUid"
+          v-on:click="loadArticlePage" />
         <table-of-contents
-          v-bind:toc="toc"
+          v-show="tabIndex === 0"
+          v-bind:tableOfContents="tableOfContents"
           v-bind:pageUid="pageUid"
           v-bind:articleUid="articleUid"
           v-on:click="loadArticlePage" />
@@ -21,13 +32,12 @@
             </b-navbar-nav>
           </b-navbar>
         </div>
-            <open-seadragon-viewer
-              v-show="mode === 'image'"
-              v-bind:handler="handler">
-            </open-seadragon-viewer>
-            <issue-viewer-text
-              v-bind:article_uid="articleUid"
-              v-if="articleUid && mode === 'text'" />
+        <open-seadragon-viewer
+          v-show="mode === 'image'"
+          v-bind:handler="handler" />
+        <issue-viewer-text
+          v-bind:article_uid="articleUid"
+          v-if="articleUid && mode === 'text'" />
       </i-layout-section>
       <i-layout-section width="120px" class="border-left">
         <thumbnail-slider
@@ -54,6 +64,7 @@ import IssueViewerText from './modules/IssueViewerText';
 import OpenSeadragonViewer from './modules/OpenSeadragonViewer';
 import BaseTabs from './base/BaseTabs';
 import TableOfContents from './modules/TableOfContents';
+import TableOfImages from './modules/TableOfImages';
 import ThumbnailSlider from './modules/ThumbnailSlider';
 
 export default {
@@ -62,9 +73,11 @@ export default {
     bounds: {},
     tab: {},
     issue: new Issue(),
-    toc: {},
+    tableOfContents: {},
+    tableOfImages: {},
     isLoaded: false,
     isDragging: false,
+    tabIndex: 0,
   }),
   computed: {
     page() {
@@ -89,43 +102,30 @@ export default {
       return this.$route.params.page_uid;
     },
     articleUid() {
-      return this.$route.params.article_uid || this.firstArticleFromCurrentPage;
+      return this.$route.params.article_uid || this.firstArticleFromCurrentPage.uid;
+    },
+    imageUid() {
+      return this.$route.params.article_uid || this.firstImageFromCurrentPage.uid;
     },
     firstArticleFromCurrentPage() {
-      if (this.toc.pages) {
-        for (let i = 0; i < this.toc.pages.length; i += 1) {
-          if (this.toc.pages[i].uid === this.pageUid) {
-            return this.toc.pages[i].articles[0].uid;
+      if (this.tableOfContents.pages) {
+        for (let i = 0; i < this.tableOfContents.pages.length; i += 1) {
+          if (this.tableOfContents.pages[i].uid === this.pageUid) {
+            return this.tableOfContents.pages[i].articles[0];
           }
         }
       }
       return false;
     },
-    newspaperTableData() {
-      return [{
-        acronym: this.issue.newspaper.acronym,
-        startYear: this.issue.newspaper.startYear,
-        endYear: this.issue.newspaper.endYear,
-        deltaYear: this.$n(this.issue.newspaper.deltaYear),
-        countIssues: this.$n(this.issue.newspaper.countIssues),
-        countPages: this.$n(this.issue.newspaper.countPages),
-        countArticles: this.$n(this.issue.newspaper.countArticles),
-      }];
-    },
-    tabs() {
-      return [
-        {
-          label: this.$t('tabs.toc'),
-          name: 'toc',
-          active: true,
-        },
-        {
-          label: this.$t('tabs.overview'),
-          name: 'overview',
-          active: false,
-          disabled: true,
-        },
-      ];
+    firstImageFromCurrentPage() {
+      if (this.tableOfImages.pages) {
+        for (let i = 0; i < this.tableOfImages.pages.length; i += 1) {
+          if (this.tableOfImages.pages[i].uid === this.pageUid) {
+            return this.tableOfImages.pages[i].articles[0];
+          }
+        }
+      }
+      return false;
     },
   },
   methods: {
@@ -174,6 +174,7 @@ export default {
     IssueViewerText,
     ThumbnailSlider,
     TableOfContents,
+    TableOfImages,
     Icon,
   },
   watch: {
@@ -280,8 +281,12 @@ export default {
           });
         });
 
-        this.$store.dispatch('issue/LOAD_TOC', issueUid).then((toc) => {
-          this.toc = toc;
+        this.$store.dispatch('issue/LOAD_TABLE_OF_CONTENTS', issueUid).then((tableOfContents) => {
+          this.tableOfContents = tableOfContents;
+        });
+
+        this.$store.dispatch('issue/LOAD_TABLE_OF_IMAGES', issueUid).then((tableOfImages) => {
+          this.tableOfImages = tableOfImages;
         });
       },
     },
@@ -350,15 +355,17 @@ div.overlay-region{
     "label_display": "Display as",
     "tabs": {
         "overview": "Overview",
-        "toc": "Table of Contents",
+        "table_of_contents": "Table of Contents",
+        "table_of_images": "Images",
         "search": "Search"
     }
   },
   "nl": {
     "label_display": "Toon als",
     "tabs": {
         "overview": "Overzicht",
-        "toc": "Inhoudsopgave",
+        "table_of_contents": "Inhoudsopgave",
+        "table_of_images": "Afbeeldingen",
         "search": "Zoek"
     }
   }

src/components/NewspapersDetailPage.vue

@@ -64,6 +64,9 @@
       <div v-else>
         <div class="p-4">
           <b-row>
+            {{firstIssue[0].date.substring(0, firstIssue[0].date.indexOf("-"))}}
+            <br>
+            {{issues[issues.length-1].date.substring(0, issues[issues.length-1].date.indexOf("-"))}}
             <b-col
               sm="12" md="4" lg="3"
               v-for="(issue, i) in issues"
@@ -170,6 +173,21 @@ export default {
       this.total = response.total;
       return response.data;
     },
+    async getFirstIssue({
+      page = 1,
+    } = {}) {
+      const response = await this.$store.dispatch('newspapers/LOAD_ISSUES', {
+        page,
+        orderBy: this.orderBy,
+        limit: 1,
+        filters: [{
+          type: 'newspaper',
+          q: this.$route.params.newspaper_uid,
+          context: 'include',
+        }],
+      });
+      return response.data;
+    },
 
     async getNewspaper() {
       return this.$store.dispatch('newspapers/LOAD_DETAIL', this.$route.params.newspaper_uid);
@@ -180,6 +198,7 @@ export default {
       immediate: true,
       async handler() {
         this.issues = await this.getIssues();
+        this.firstIssue = await this.getFirstIssue();
         this.newspaper = await this.getNewspaper();
       },
     },

src/components/SearchFacets.vue

@@ -1,6 +1,6 @@
 <template lang="html">
   <div id="search-facets">
-    <div class="m-2 p-2 border-top border-tertiary">
+    <div class="border-top mx-3 py-2 mb-2">
       <!--  timeline title -->
       <base-title-bar>{{$t(`label.timeline.${groupByLabel}`)}}
         <div slot="options">
@@ -10,10 +10,10 @@
         </div>
         <div slot="description">
           <span v-if="daterangeFilters.length">
-            {{$t(`label.timelineDescription.filtered`)}}
+            {{$t(`label.timelineDescription.${groupByLabel}.filtered`)}}
           </span>
           <span v-else>
-              {{$t(`label.timelineDescription.description`)}}
+              {{$t(`label.timelineDescription.${groupByLabel}.description`)}}
           </span>
         </div>
       </base-title-bar>
@@ -38,7 +38,7 @@
       </timeline>
 
       <div v-for="(filter, index) in daterangeFilters" :key="index" class="bg-light border p-2 mt-2">
-        <filter-monitor :filter="filter" type="daterange" />
+        <filter-monitor :store="store" :filter="filter" type="daterange" />
       </div>
       <div v-if="!daterangeFilters.length">
         <b-button size="sm" variant="outline-primary" @click="addDaterangeFilter">
@@ -66,8 +66,9 @@
         </div>
       </div>
     </div>
-    <div v-for="(facet, index) in facets" class="border-top m-2 p-2">
+    <div v-for="(facet, index) in facets" class="border-top mx-3 py-2 mb-2">
       <filter-facet :facet="facet"
+        :store="store"
         @submit-buckets="submitBuckets"
         @update-filter="updateFilter"
         @reset-filter="resetFilter"/>
@@ -111,6 +112,10 @@ const fillYears = (initialValues = []) => {
 
 export default {
   props: {
+    store: {
+      type: String,
+      default: 'search',
+    },
     startYear: {
       type: Number,
       default: 1737,
@@ -130,8 +135,14 @@ export default {
     facetsOrder: ['language', 'newspaper', 'topic'],
   }),
   computed: {
+    currentStore() {
+      if (this.store === 'searchImages') {
+        return this.$store.state.searchImages;
+      }
+      return this.$store.state.search;
+    },
     daterangeFilters() {
-      return this.$store.state.search.search.filters.filter(d => d.type === 'daterange');
+      return this.currentStore.search.filters.filter(d => d.type === 'daterange');
     },
     daterangeIncluded() {
       return this.daterangeFilters.filter(d => d.context === 'include');
@@ -210,12 +221,12 @@ export default {
     },
     groupByLabel: {
       get() {
-        return this.$t(`groupBy.${this.$store.state.search.groupBy}`);
+        return this.$t(`groupBy.${this.currentStore.groupBy}`);
       },
     },
     values: {
       get() {
-        const facet = this.$store.state.search.facets.find(d => d.type === 'year');
+        const facet = this.currentStore.facets.find(d => d.type === 'year');
         if (!facet) {
           return [];
         }
@@ -231,7 +242,7 @@ export default {
     },
     facets: {
       get() {
-        return this.$store.state.search.facets
+        return this.currentStore.facets
           .filter(d => d.type !== 'year')
           .sort((a, b) => {
             const indexA = this.facetsOrder.indexOf(a.type);
@@ -266,11 +277,11 @@ export default {
       // create new daterangefilter if theres none
       if (!this.daterangeIncluded.length) {
         const dr = new Daterange({
-          start: new Date(`${this.startYear}-01-01`),
-          end: new Date(`${this.endYear}-12-31`),
+          start: this.startDaterange,
+          end: this.endDaterange,
         });
 
-        this.$store.commit('search/ADD_FILTER', {
+        this.$store.commit(`${this.store}/ADD_FILTER`, {
           type: 'daterange',
           q: dr.getValue(),
         });
@@ -387,11 +398,18 @@ export default {
     "en": {
       "label": {
         "timeline": {
-          "articles": "publication date"
+          "articles": "publication date",
+          "images": "publication date"
         },
         "timelineDescription": {
-          "articles": "Number of articles per year",
-          "description": "Number of articles per year"
+          "articles": {
+            "description": "Number of articles per year",
+            "filtered": "Number of articles per year (filtered)"
+          },
+          "images": {
+            "description": "Number of images extracted per year",
+            "filtered": "Number of images per year (filtered)"
+          }
         },
         "daterange": {
           "pick": "add filter ...",
@@ -401,7 +419,8 @@ export default {
         }
       },
       "groupBy": {
-        "articles": "articles"
+        "articles": "articles",
+        "images": "images"
       }
     }
   }