Feature/data provider (#1211)

* remove proxy when not required use a specific env variable when needed * check that items exists in FIlterMonitor * add dataProvider property * Update messages.js * add data provider label and fix translations * fix missing space :) * Update messages.js
impresso · Apr 12, 2024 · f9a905f · f9a905f
1 parent 1280905
commit f9a905f
Show file tree

Hide file tree

Showing 10 changed files with 102 additions and 54 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@ Welcome to the _impresso_ app frontend website to search, explore and create per
 
 ## Install for development
 
-This is a website that uses vue2 framework build in **node v17** and **is not compatible with node v18**. We provide a dockerfile-dev which points to the right node version to use. Alternatively, you can use `nvm install 17` and then install all dependencies 
+This is a website that uses vue2 framework build in **node v17** and **is not compatible with node v18**. We provide a dockerfile-dev which points to the right node version to use. Alternatively, you can use `nvm install 17` and then install all dependencies
 
 with `--openssl-legacy-provider` option
 
@@ -20,14 +20,18 @@ VUE_APP_MIDDLELAYER_API_PATH="/api"
 VUE_APP_MIDDLELAYER_API_SOCKET_PATH="/api/socket.io"
 ```
 
-FInally run with:
+To use vue proxy while developing, add this env variable to your `.env.development.local` file:
 
+```sh
+VUE_APP_USE_PROXY_MIDDLEWARE=true
+```
+
+Finally run with:
 
 ```
 NODE_OPTIONS=--openssl-legacy-provider npm start
 ```
 
-
 ### Use docker stack for development (node v12)
 
 We provide a Dockerfile-dev to streamline node 12 installation with now unsupported modules.

diff --git a/src/components/SelectionMonitor.vue b/src/components/SelectionMonitor.vue
@@ -38,7 +38,7 @@
         />
         <h2 class="mx-3" v-if="monitor.item">
           <ItemLabel :item="monitor.item" :type="monitor.type" />
-          <span class="small-caps pl-2">{{ $t('types_' + monitor.type) }}</span>
+          <!-- <span class="small-caps pl-2">{{ $t('types_' + monitor.type) }}</span> -->
         </h2>
 
         <!-- end title -->

diff --git a/src/components/modules/FilterMonitor.vue b/src/components/modules/FilterMonitor.vue
@@ -90,7 +90,9 @@
           <item-label :item="item" :type="type" />
           <span v-if="!item.uid">...</span>
           <span v-if="item.count"
-            >(<span v-html="$tc('numbers.results', item.count, { n: $n(item.count) })" />)</span
+            >&nbsp;(<span
+              v-html="$tc('numbers.results', item.count, { n: $n(item.count) })"
+            />)&nbsp;</span
           >
           <item-selector :uid="item.uid" :item="item" :type="type" />
         </b-form-checkbox>
@@ -371,7 +373,7 @@ export default {
       ]
     },
     filterItems() {
-      return [...this.filter.items]
+      return this.filter && Array.isArray(this.filter.items) ? [...this.filter.items] : []
     },
     hasChanges() {
       return (
@@ -627,6 +629,18 @@ label.custom-control-label {
           "exclude": "<b>NOT</b> published in"
         }
       },
+      "partner": {
+        "title": "data provider",
+        "selected": "filter results if they are provided by <b>one of {count} selected</b> data providers",
+        "description": "check one or more data provider to filter results",
+        "clear": "reset",
+        "apply": "apply changes",
+        "update": "apply changes (added: {added}, removed: {removed})",
+        "context": {
+          "include": "Provided by",
+          "exclude": "<b>NOT</b> provided by"
+        }
+      },
       "language": {
         "title": "language of articles",
         "selected": "filter results if they are written in <b>one of {count} selected</b> languages",

diff --git a/src/components/modules/ItemSelector.vue b/src/components/modules/ItemSelector.vue
@@ -1,7 +1,7 @@
 <template>
   <span v-on:click.prevent.stop="selectItem">
     <slot></slot>
-    <span v-if="label" class="ItemSelector_label">{{ label }}</span>
+    <span v-if="label" class="ItemSelector_label underline">{{ label }}</span>
     <span v-else class="dripicons-enter icon-link"></span>
   </span>
 </template>
@@ -69,7 +69,8 @@ export default {
 .ItemSelector_label {
   cursor: pointer;
 }
-.ItemSelector_label:hover {
+.ItemSelector_label:hover,
+.ItemSelector_label.underline {
   box-shadow: 0 1px 0px 0 black;
 }
 </style>
diff --git a/src/components/modules/lists/ArticleItem.vue b/src/components/modules/lists/ArticleItem.vue
@@ -1,4 +1,4 @@
-<template lang="html">
+<template>
   <article :class="{ reference: asReference, ArticleItem: true }">
     <slot name="title">
       <h2 v-if="item.title" class="mb-0 font-weight-bold">
@@ -20,9 +20,17 @@
         {{ item.newspaper.name }}
       </router-link>
       <item-selector :uid="item.newspaper.uid" :item="item.newspaper" type="newspaper" /> &nbsp;
-      <span class="date">{{ $d(item.date, 'long') }}</span>
+      <span>{{ $d(item.date, 'long') }}</span>
       <span> – {{ pages }}</span>
-      <div>{{ $t(`buckets.accessRight.${item.accessRight}`) }}</div>
+      <div>
+        {{ $t(`buckets.accessRight.${item.accessRight}`) }} &mdash; {{ $t('providedBy') }}
+        <ItemSelector
+          :uid="item.dataProvider"
+          :label="$t(`buckets.dataProvider.${item.dataProvider}`)"
+          :item="{ uid: item.dataProvider }"
+          type="partner"
+        />
+      </div>
     </div>
 
     <div

diff --git a/src/components/modules/lists/ItemLabel.vue b/src/components/modules/lists/ItemLabel.vue
@@ -73,7 +73,7 @@ export default {
         }
       } else if (this.type === 'year') {
         t = this.item ? this.item.y : this.val
-      } else if (['type', 'country', 'language'].includes(this.type)) {
+      } else if (['type', 'country', 'language', 'partner'].includes(this.type)) {
         t = this.$t(`buckets.${this.type}.${this.item.uid}`)
       } else if (typeof this.item.name === 'string' && this.item.name.length) {
         t = this.item.name

diff --git a/src/i18n/messages.js b/src/i18n/messages.js
@@ -47,6 +47,12 @@ export default {
         CH: 'Switzerland',
         LU: 'Luxembourg',
       },
+      dataProvider: {
+        SNL: 'Swiss National Library',
+        BNL: 'Luxembourg National Library',
+        NZZ: 'NZZ',
+        Migros: 'Migros',
+      },
       partner: {
         SNL: 'Swiss National Library',
         BNL: 'Luxembourg National Library',
@@ -202,6 +208,7 @@ export default {
     },
     pp: 'no pages | p.{pages} | pp.{pages} ({n} pages)',
     ppOf: 'p.{num} of {pages}',
+    providedBy: 'provided by',
     readingTime: '{min} min read',
     reducedReadingTime: 'short text',
     applyCurrentSearchFiltersDisabled: 'Current filters cannot be applied.',
@@ -219,6 +226,7 @@ export default {
       Conflict: {
         UsernameExistError: 'This username is already taken!',
       },
+      MethodNotAllowed: 'Method not allowed.',
       BadGateway: {
         SequelizeConnectionRefusedError:
           'Please reload the page. Connection troubles (network) with the impresso database',

diff --git a/src/models/Article.js b/src/models/Article.js
@@ -1,10 +1,10 @@
-import Issue from './Issue';
-import Newspaper from './Newspaper';
-import Page from './Page';
-import Region from './Region';
-import ArticleTopic from './ArticleTopic';
-import Tag from './Tag';
-import ArticleBase from './ArticleBase';
+import Issue from './Issue'
+import Newspaper from './Newspaper'
+import Page from './Page'
+import Region from './Region'
+import ArticleTopic from './ArticleTopic'
+import Tag from './Tag'
+import ArticleBase from './ArticleBase'
 /**
  * @class Article is an object representing a newspaper article
  * @param {String} country Country Code
@@ -45,6 +45,7 @@ export default class Article extends ArticleBase {
     language = '',
     matches = [],
     nbPages = 0,
+    dataProvider = '',
     newspaper = new Newspaper(),
     pages = [],
     regions = [],
@@ -84,63 +85,64 @@ export default class Article extends ArticleBase {
       regionBreaks,
       mentions,
       content,
-    });
+    })
     // missing data from ArticleBase
-    this.country = String(country);
-    this.dl = parseInt(dl, 10);
-    this.isFront = Boolean(isFront);
-    this.language = String(language);
-    this.time = parseInt(time, 10);
-    this.year = parseInt(year, 10);
+    this.country = String(country)
+    this.dl = parseInt(dl, 10)
+    this.isFront = Boolean(isFront)
+    this.language = String(language)
+    this.time = parseInt(time, 10)
+    this.year = parseInt(year, 10)
 
     if (date instanceof Date) {
-      this.date = date;
+      this.date = date
     } else if (date) {
-      this.date = new Date(date);
+      this.date = new Date(date)
     }
 
     if (issue instanceof Issue) {
-      this.issue = issue;
+      this.issue = issue
     } else {
-      this.issue = new Issue(issue);
+      this.issue = new Issue(issue)
     }
 
-    this.labels = labels.map(label => String(label));
+    this.labels = labels.map(label => String(label))
 
+    this.dataProvider = dataProvider
     if (newspaper instanceof Newspaper) {
-      this.newspaper = newspaper;
+      this.newspaper = newspaper
     } else {
-      this.newspaper = new Newspaper(newspaper);
+      this.newspaper = new Newspaper(newspaper)
     }
 
-    this.pages = pages.map((page) => {
+    this.pages = pages.map(page => {
       if (page instanceof Page) {
-        return page;
+        return page
       }
-      return new Page(page);
-    });
+      return new Page(page)
+    })
 
-    this.regions = regions.map((region) => {
+    this.regions = regions.map(region => {
       if (region instanceof Region) {
-        return region;
+        return region
       }
-      return new Region(region);
-    });
+      return new Region(region)
+    })
 
-    this.tags = tags.map((tag) => {
+    this.tags = tags.map(tag => {
       if (tag instanceof Tag) {
-        return tag;
+        return tag
       }
-      return new Tag(tag);
-    });
+      return new Tag(tag)
+    })
 
-    this.topics = topics.map((topic) => {
+    this.topics = topics.map(topic => {
       if (topic instanceof ArticleTopic) {
-        return topic;
+        return topic
       }
-      return new ArticleTopic(topic);
-    });
+      return new ArticleTopic(topic)
+    })
 
-    this.images = images;
+    this.images = images
   }
 }
diff --git a/src/services/index.js b/src/services/index.js
@@ -11,8 +11,11 @@ import NamesService from './names'
 
 // e.g io api base is http://localhost
 // and path is  something like /path/to/socket.io defined in the backend
-const SocketBasePath =
-  process.env.NODE_ENV === 'development' ? '' : process.env.VUE_APP_MIDDLELAYER_API
+// const SocketBasePath =
+//   process.env.NODE_ENV === 'development' ? '' : process.env.VUE_APP_MIDDLELAYER_API
+const SocketBasePath = process.env.VUE_APP_USE_PROXY_MIDDLEWARE
+  ? ''
+  : process.env.VUE_APP_MIDDLELAYER_API
 const socket = io(SocketBasePath, {
   path: process.env.VUE_APP_MIDDLELAYER_API_SOCKET_PATH,
 })

diff --git a/vue.config.js b/vue.config.js
@@ -2,7 +2,11 @@ const readFile = require('fs').readFileSync
 
 const PackageJsonPath = `${__dirname}/package.json`
 const SocketIoProxyPath = `^${process.env.VUE_APP_MIDDLELAYER_API_SOCKET_PATH}`
-const ApiIiifProxyPath = `^${process.env.VUE_APP_MIDDLELAYER_API_PATH}/proxy/`
+const ApiIiifProxyPath = [
+  '^',
+  String(process.env.VUE_APP_MIDDLELAYER_API_PATH).replace(/\/+$/, ''),
+  '/proxy/',
+].join('')
 
 function getVersion() {
   try {
@@ -24,6 +28,11 @@ process.env.VUE_APP_VERSION = getVersion()
 
 console.log('[vue.config] SocketIoProxyPath', SocketIoProxyPath)
 console.log('[vue.config] ApiIiifProxyPath', ApiIiifProxyPath)
+console.log('[vue.config] process.env.NODE_ENV', process.env.NODE_ENV)
+console.log(
+  '[vue.config] process.env.VUE_APP_USE_PROXY_MIDDLEWARE (check src/services/index.js)',
+  process.env.VUE_APP_USE_PROXY_MIDDLEWARE,
+)
 console.log('[vue.config] process.env.VUE_APP_MIDDLELAYER_API', process.env.VUE_APP_MIDDLELAYER_API)
 console.log(
   '[vue.config] process.env.VUE_APP_MIDDLELAYER_API_SOCKET_PATH',
@@ -64,7 +73,6 @@ module.exports = {
   },
   devServer: {
     public: 'http://localhost:8080',
-
     proxy: {
       [SocketIoProxyPath]: {
         target: process.env.VUE_APP_MIDDLELAYER_API,