loaded materials form solr with jsonapi, and display them

2019-06-10 18:30:48 +02:00
parent 058aed796a
commit 01cee3ba8a
19 changed files with 719 additions and 17 deletions
--- a/composer.json
+++ b/composer.json
@@ -32,11 +32,13 @@
        "drupal/computed_field": "^2.0@beta",
        "drupal/config_split": "^1.4",
        "drupal/console": "^1.0.2",
+        "drupal/consumer_image_styles": "3.x-dev",
        "drupal/core": "^8.7.1",
        "drupal/entity_clone": "^1.0",
        "drupal/error_log": "^1.0",
        "drupal/genpass": "1.x-dev",
        "drupal/image_delta_formatter": "1.x-dev",
+        "drupal/jsonapi_extras": "^3.7",
        "drupal/jsonrpc": "1.x-dev",
        "drupal/login_history": "1.x-dev",
        "drupal/mailgun": "1.x-dev",
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
        "This file is @generated automatically"
    ],
-    "content-hash": "659326ced02c2fe78453f4b0f66d7e4e",
+    "content-hash": "e67674c8f819a51a74785fddb76fb1d5",
    "packages": [
        {
            "name": "alchemy/zippy",
@@ -4774,6 +4774,99 @@
            "description": "Drupal Console Extend Plugin",
            "time": "2017-07-28T17:11:54+00:00"
        },
+        {
+            "name": "drupal/consumer_image_styles",
+            "version": "dev-3.x",
+            "source": {
+                "type": "git",
+                "url": "https://git.drupalcode.org/project/consumer_image_styles.git",
+                "reference": "dde88d03caf59911eab3a744d90975bb119ce03c"
+            },
+            "require": {
+                "drupal/consumers": "^1.2",
+                "drupal/core": "*",
+                "drupal/jsonapi": "*",
+                "drupal/jsonapi_extras": "^3.3"
+            },
+            "type": "drupal-module",
+            "extra": {
+                "branch-alias": {
+                    "dev-3.x": "3.x-dev"
+                },
+                "drupal": {
+                    "version": "8.x-3.0-rc2+0-dev",
+                    "datestamp": "1556657885",
+                    "security-coverage": {
+                        "status": "not-covered",
+                        "message": "Dev releases are not covered by Drupal security advisories."
+                    }
+                }
+            },
+            "notification-url": "https://packages.drupal.org/8/downloads",
+            "license": [
+                "GPL-2.0+"
+            ],
+            "authors": [
+                {
+                    "name": "Mateu Aguiló Bosch",
+                    "homepage": "https://www.drupal.org/user/550110",
+                    "email": "mateu.aguilo.bosch@gmail.com"
+                }
+            ],
+            "description": "Consumer Image Styles integrates with JSON API to provide image styles to your images in your decoupled project.",
+            "homepage": "https://www.drupal.org/project/consumer_image_styles",
+            "support": {
+                "source": "https://git.drupalcode.org/project/consumer_image_styles"
+            },
+            "time": "2019-04-30T20:55:34+00:00"
+        },
+        {
+            "name": "drupal/consumers",
+            "version": "1.9.0",
+            "source": {
+                "type": "git",
+                "url": "https://git.drupalcode.org/project/consumers.git",
+                "reference": "8.x-1.9"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://ftp.drupal.org/files/projects/consumers-8.x-1.9.zip",
+                "reference": "8.x-1.9",
+                "shasum": "c0fbff0b88da87ae5d5c980f4c9aed15db4301f6"
+            },
+            "require": {
+                "drupal/core": "*"
+            },
+            "type": "drupal-module",
+            "extra": {
+                "branch-alias": {
+                    "dev-1.x": "1.x-dev"
+                },
+                "drupal": {
+                    "version": "8.x-1.9",
+                    "datestamp": "1549832280",
+                    "security-coverage": {
+                        "status": "covered",
+                        "message": "Covered by Drupal's security advisory policy"
+                    }
+                }
+            },
+            "notification-url": "https://packages.drupal.org/8/downloads",
+            "license": [
+                "GPL-2.0-or-later"
+            ],
+            "authors": [
+                {
+                    "name": "e0ipso",
+                    "homepage": "https://www.drupal.org/user/550110"
+                }
+            ],
+            "description": "Declare all the consumers of your API",
+            "homepage": "https://www.drupal.org/project/consumers",
+            "support": {
+                "source": "https://git.drupalcode.org/project/consumers"
+            }
+        },
        {
            "name": "drupal/content_lock",
            "version": "1.0.0-alpha8",
@@ -6949,6 +7042,67 @@
                "source": "https://git.drupalcode.org/project/interval"
            }
        },
+        {
+            "name": "drupal/jsonapi_extras",
+            "version": "3.7.0",
+            "source": {
+                "type": "git",
+                "url": "https://git.drupalcode.org/project/jsonapi_extras.git",
+                "reference": "8.x-3.7"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://ftp.drupal.org/files/projects/jsonapi_extras-8.x-3.7.zip",
+                "reference": "8.x-3.7",
+                "shasum": "9987918f7b8a814de267231006f25cff2eb7cb26"
+            },
+            "require": {
+                "drupal/core": "~8.0",
+                "drupal/jsonapi": "*",
+                "e0ipso/shaper": "^1"
+            },
+            "require-dev": {
+                "drupal/jsonapi": "*"
+            },
+            "type": "drupal-module",
+            "extra": {
+                "branch-alias": {
+                    "dev-3.x": "3.x-dev"
+                },
+                "drupal": {
+                    "version": "8.x-3.7",
+                    "datestamp": "1558388885",
+                    "security-coverage": {
+                        "status": "covered",
+                        "message": "Covered by Drupal's security advisory policy"
+                    }
+                }
+            },
+            "notification-url": "https://packages.drupal.org/8/downloads",
+            "license": [
+                "GPL-2.0+"
+            ],
+            "authors": [
+                {
+                    "name": "Mateu Aguiló Bosch",
+                    "homepage": "https://www.drupal.org/user/550110",
+                    "email": "mateu.aguilo.bosch@gmail.com"
+                },
+                {
+                    "name": "Martin Kolar",
+                    "homepage": "https://www.drupal.org/u/mkolar"
+                },
+                {
+                    "name": "Karel Majzlik",
+                    "homepage": "https://www.drupal.org/u/karlos007"
+                }
+            ],
+            "description": "JSON:API Extras provides a means to override and provide limited configurations to the default zero-configuration implementation provided by the JSON:API module.",
+            "homepage": "https://www.drupal.org/project/jsonapi_extras",
+            "support": {
+                "source": "https://git.drupalcode.org/project/jsonapi_extras"
+            }
+        },
        {
            "name": "drupal/jsonrpc",
            "version": "dev-1.x",
@@ -17369,6 +17523,7 @@
        "drupal/commerce_recurring": 20,
        "drupal/commerce_variation_cart_form": 20,
        "drupal/computed_field": 10,
+        "drupal/consumer_image_styles": 20,
        "drupal/genpass": 20,
        "drupal/image_delta_formatter": 20,
        "drupal/jsonrpc": 20,
--- a/config/sync/autologout.settings.yml
+++ b/config/sync/autologout.settings.yml
@@ -5,7 +5,7 @@ role_logout: true
 redirect_url: /
 no_dialog: false
 message: 'Your session is about to expire. Do you want to reset it?'
-inactivity_message: 'You have been logged out due to inactivity.'
+inactivity_message: ''
 enforce_admin: false
 jstimer_format: '%hours%:%mins%:%secs%'
 jstimer_js_load_option: false
--- a/config/sync/core.extension.yml
+++ b/config/sync/core.extension.yml
@@ -42,6 +42,8 @@ module:
  config_split: 0
  config_translation: 0
  config_update: 0
+  consumer_image_styles: 0
+  consumers: 0
  contact: 0
  content_lock: 0
  content_lock_timeout: 0
@@ -77,6 +79,7 @@ module:
  inline_entity_form: 0
  interval: 0
  jsonapi: 0
+  jsonapi_extras: 0
  kint: 0
  language: 0
  link: 0
--- a/config/sync/image.style.card_medium.yml
+++ b/config/sync/image.style.card_medium.yml
@@ -0,0 +1,15 @@
+uuid: 6f2b50e1-db9e-47b4-9a65-f3a81b06165f
+langcode: en
+status: true
+dependencies: {  }
+name: card_medium
+label: card-medium
+effects:
+  34e936a0-1fee-4327-9553-b4f48bde14e6:
+    uuid: 34e936a0-1fee-4327-9553-b4f48bde14e6
+    id: image_scale_and_crop
+    weight: 1
+    data:
+      width: 210
+      height: 295
+      anchor: center-center
--- a/config/sync/jsonapi_extras.jsonapi_resource_config.advancedqueue_queue--advancedqueue_queue.yml
+++ b/config/sync/jsonapi_extras.jsonapi_resource_config.advancedqueue_queue--advancedqueue_queue.yml
@@ -0,0 +1,89 @@
+uuid: a11d30de-143c-4de1-8f39-f03875cc136d
+langcode: en
+status: true
+dependencies:
+  module:
+    - advancedqueue
+id: advancedqueue_queue--advancedqueue_queue
+disabled: true
+path: advancedqueue_queue/advancedqueue_queue
+resourceType: advancedqueue_queue--advancedqueue_queue
+resourceFields:
+  uuid:
+    fieldName: uuid
+    publicName: uuid
+    enhancer:
+      id: ''
+    disabled: false
+  langcode:
+    fieldName: langcode
+    publicName: langcode
+    enhancer:
+      id: ''
+    disabled: false
+  status:
+    fieldName: status
+    publicName: status
+    enhancer:
+      id: ''
+    disabled: false
+  dependencies:
+    fieldName: dependencies
+    publicName: dependencies
+    enhancer:
+      id: ''
+    disabled: false
+  third_party_settings:
+    fieldName: third_party_settings
+    publicName: third_party_settings
+    enhancer:
+      id: ''
+    disabled: false
+  _core:
+    fieldName: _core
+    publicName: _core
+    enhancer:
+      id: ''
+    disabled: false
+  id:
+    fieldName: id
+    publicName: id
+    enhancer:
+      id: ''
+    disabled: false
+  label:
+    fieldName: label
+    publicName: label
+    enhancer:
+      id: ''
+    disabled: false
+  backend:
+    fieldName: backend
+    publicName: backend
+    enhancer:
+      id: ''
+    disabled: false
+  backend_configuration:
+    fieldName: backend_configuration
+    publicName: backend_configuration
+    enhancer:
+      id: ''
+    disabled: false
+  processor:
+    fieldName: processor
+    publicName: processor
+    enhancer:
+      id: ''
+    disabled: false
+  processing_time:
+    fieldName: processing_time
+    publicName: processing_time
+    enhancer:
+      id: ''
+    disabled: false
+  locked:
+    fieldName: locked
+    publicName: locked
+    enhancer:
+      id: ''
+    disabled: false
--- a/config/sync/jsonapi_extras.jsonapi_resource_config.node--materiau.yml
+++ b/config/sync/jsonapi_extras.jsonapi_resource_config.node--materiau.yml
@@ -0,0 +1,268 @@
+uuid: 57bab5e2-229d-4e0d-886a-e20b693a70b0
+langcode: en
+status: true
+dependencies:
+  config:
+    - node.type.materiau
+id: node--materiau
+disabled: false
+path: node/materiau
+resourceType: node--materiau
+resourceFields:
+  nid:
+    disabled: true
+    fieldName: nid
+    publicName: nid
+    enhancer:
+      id: ''
+  uuid:
+    fieldName: uuid
+    publicName: uuid
+    enhancer:
+      id: ''
+    disabled: false
+  vid:
+    disabled: true
+    fieldName: vid
+    publicName: vid
+    enhancer:
+      id: ''
+  langcode:
+    disabled: true
+    fieldName: langcode
+    publicName: langcode
+    enhancer:
+      id: ''
+  type:
+    disabled: true
+    fieldName: type
+    publicName: type
+    enhancer:
+      id: ''
+  revision_timestamp:
+    fieldName: revision_timestamp
+    publicName: revision_timestamp
+    enhancer:
+      id: ''
+    disabled: false
+  revision_uid:
+    disabled: true
+    fieldName: revision_uid
+    publicName: revision_uid
+    enhancer:
+      id: ''
+  revision_log:
+    disabled: true
+    fieldName: revision_log
+    publicName: revision_log
+    enhancer:
+      id: ''
+  status:
+    disabled: true
+    fieldName: status
+    publicName: status
+    enhancer:
+      id: ''
+  uid:
+    disabled: true
+    fieldName: uid
+    publicName: uid
+    enhancer:
+      id: ''
+  title:
+    fieldName: title
+    publicName: title
+    enhancer:
+      id: ''
+    disabled: false
+  created:
+    disabled: true
+    fieldName: created
+    publicName: created
+    enhancer:
+      id: ''
+  changed:
+    disabled: true
+    fieldName: changed
+    publicName: changed
+    enhancer:
+      id: ''
+  promote:
+    disabled: true
+    fieldName: promote
+    publicName: promote
+    enhancer:
+      id: ''
+  sticky:
+    disabled: true
+    fieldName: sticky
+    publicName: sticky
+    enhancer:
+      id: ''
+  default_langcode:
+    disabled: true
+    fieldName: default_langcode
+    publicName: default_langcode
+    enhancer:
+      id: ''
+  revision_default:
+    disabled: true
+    fieldName: revision_default
+    publicName: revision_default
+    enhancer:
+      id: ''
+  revision_translation_affected:
+    disabled: true
+    fieldName: revision_translation_affected
+    publicName: revision_translation_affected
+    enhancer:
+      id: ''
+  path:
+    fieldName: path
+    publicName: path
+    enhancer:
+      id: ''
+    disabled: false
+  synonyms:
+    fieldName: synonyms
+    publicName: synonyms
+    enhancer:
+      id: ''
+    disabled: false
+  menu_link:
+    disabled: true
+    fieldName: menu_link
+    publicName: menu_link
+    enhancer:
+      id: ''
+  content_translation_source:
+    disabled: true
+    fieldName: content_translation_source
+    publicName: content_translation_source
+    enhancer:
+      id: ''
+  content_translation_outdated:
+    disabled: true
+    fieldName: content_translation_outdated
+    publicName: content_translation_outdated
+    enhancer:
+      id: ''
+  body:
+    fieldName: body
+    publicName: body
+    enhancer:
+      id: ''
+    disabled: false
+  field_attachments:
+    fieldName: field_attachments
+    publicName: field_attachments
+    enhancer:
+      id: ''
+    disabled: false
+  field_distributor:
+    fieldName: field_distributor
+    publicName: field_distributor
+    enhancer:
+      id: ''
+    disabled: false
+  field_famille:
+    fieldName: field_famille
+    publicName: field_famille
+    enhancer:
+      id: ''
+    disabled: false
+  field_index:
+    fieldName: field_index
+    publicName: field_index
+    enhancer:
+      id: ''
+    disabled: false
+  field_linked_articles:
+    fieldName: field_linked_articles
+    publicName: field_linked_articles
+    enhancer:
+      id: ''
+    disabled: false
+  field_linked_materials:
+    fieldName: field_linked_materials
+    publicName: field_linked_materials
+    enhancer:
+      id: ''
+    disabled: false
+  field_localisation_old:
+    disabled: true
+    fieldName: field_localisation_old
+    publicName: field_localisation_old
+    enhancer:
+      id: ''
+  field_manufacturer:
+    fieldName: field_manufacturer
+    publicName: field_manufacturer
+    enhancer:
+      id: ''
+    disabled: false
+  field_materiau_images:
+    fieldName: field_materiau_images
+    publicName: images
+    enhancer:
+      id: image_styles
+      settings:
+        styles:
+          refine: true
+          custom_selection:
+            - card_medium
+    disabled: false
+  field_memo:
+    disabled: true
+    fieldName: field_memo
+    publicName: field_memo
+    enhancer:
+      id: ''
+  field_migration:
+    disabled: true
+    fieldName: field_migration
+    publicName: field_migration
+    enhancer:
+      id: ''
+  field_reference:
+    fieldName: field_reference
+    publicName: field_reference
+    enhancer:
+      id: ''
+    disabled: false
+  field_samples:
+    fieldName: field_samples
+    publicName: field_samples
+    enhancer:
+      id: ''
+    disabled: false
+  field_short_description:
+    fieldName: field_short_description
+    publicName: field_short_description
+    enhancer:
+      id: ''
+    disabled: false
+  field_tags:
+    fieldName: field_tags
+    publicName: field_tags
+    enhancer:
+      id: ''
+    disabled: false
+  field_thesaurus:
+    fieldName: field_thesaurus
+    publicName: field_thesaurus
+    enhancer:
+      id: ''
+    disabled: false
+  field_video:
+    fieldName: field_video
+    publicName: field_video
+    enhancer:
+      id: ''
+    disabled: false
+  field_workflow:
+    disabled: true
+    fieldName: field_workflow
+    publicName: field_workflow
+    enhancer:
+      id: ''
--- a/config/sync/jsonapi_extras.settings.yml
+++ b/config/sync/jsonapi_extras.settings.yml
@@ -0,0 +1,4 @@
+path_prefix: jsonapi
+include_count: false
+_core:
+  default_config_hash: eZ7KZ6nM56SRhfriFWCo1372Z9UiKufhSLRbkdhVmUg
--- a/config/sync/search_api.index.database.yml
+++ b/config/sync/search_api.index.database.yml
@@ -8,8 +8,8 @@ dependencies:
    - taxonomy
    - search_api
  config:
-    - field.storage.node.field_famille
    - field.storage.node.body
+    - field.storage.node.field_famille
    - field.storage.node.field_tags
    - field.storage.taxonomy_term.field_synonyms
    - field.storage.node.field_thesaurus
@@ -176,6 +176,14 @@ field_settings:
    dependencies:
      module:
        - node
+  uuid:
+    label: UUID
+    datasource_id: 'entity:node'
+    property_path: uuid
+    type: string
+    dependencies:
+      module:
+        - node
 datasource_settings:
  'entity:node':
    bundles:
@@ -222,6 +230,7 @@ processor_settings:
      - thesaurus_synonyms
      - thesaurus_tid
      - title
+      - uuid
    title: true
    alt: true
    tags:
--- a/package-lock.json
+++ b/package-lock.json
@@ -1107,6 +1107,21 @@
        }
      }
    },
+    "@babel/runtime": {
+      "version": "7.4.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.5.tgz",
+      "integrity": "sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==",
+      "requires": {
+        "regenerator-runtime": "^0.13.2"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.13.2",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz",
+          "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA=="
+        }
+      }
+    },
    "@babel/template": {
      "version": "7.4.0",
      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.4.0.tgz",
@@ -9466,6 +9481,14 @@
      "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
      "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
    },
+    "vue-autofocus-directive": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/vue-autofocus-directive/-/vue-autofocus-directive-1.0.3.tgz",
+      "integrity": "sha512-f+tNZOaPDSTGjak74h/PAcn35yn14bnwKmIap8vKNqF0MEof9mr+iKY53EVgNAuFdPEQKwlQZeDGFpgZ2VAh+g==",
+      "requires": {
+        "@babel/runtime": "^7.4.4"
+      }
+    },
    "vue-eslint-parser": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz",
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
  "dependencies": {
    "axios": "^0.18.1",
    "vue": "^2.6.10",
+    "vue-autofocus-directive": "^1.0.3",
    "vue-meta": "^1.6.0",
    "vue-router": "^3.0.6",
    "vuex": "^3.1.1"
--- a/web/modules/custom/materio_sapi/src/Controller/Base.php
+++ b/web/modules/custom/materio_sapi/src/Controller/Base.php
@@ -102,9 +102,11 @@ class Base extends ControllerBase {
      $items = [];
      foreach ($this->results as $result) {
        $nid = $result->getField('nid')->getValues()[0];
+        $uuid = $result->getField('uuid')->getValues()[0];
        $title = $result->getField('title')->getValues()[0]->getText();
        $items[] = [
          'nid' => $nid,
+          'uuid' => $uuid,
          'title' => $title,
        ];
      }
--- a/web/themes/custom/materiotheme/assets/dist/main.js
+++ b/web/themes/custom/materiotheme/assets/dist/main.js
--- a/web/themes/custom/materiotheme/assets/scripts/main.js
+++ b/web/themes/custom/materiotheme/assets/scripts/main.js
@@ -3,6 +3,9 @@ import Vue from 'vue'
 import store from 'vuejs/store'
 import router from 'vuejs/route'

+// import autofocus from 'vue-autofocus-directive';
+// Vue.directive('autofocus', autofocus);
+
 import VUserBlock from 'vuejs/components/Block/UserBlock'
 import VMainContent from 'vuejs/components/Content/MainContent'
 import VSearchBlock from 'vuejs/components/Block/SearchBlock'
--- a/web/themes/custom/materiotheme/assets/styles/main.scss
+++ b/web/themes/custom/materiotheme/assets/styles/main.scss
@@ -210,3 +210,53 @@ article.node--type-frontpage{
    }
  }
 }
+
+
+ //   ___             _
+ //  / __|__ _ _ _ __| |___
+ // | (__/ _` | '_/ _` (_-<
+ //  \___\__,_|_| \__,_/__/
+
+.cards-list{
+  &>ul{
+    margin:0; padding:0;
+    &>li{
+      list-style: none;
+      margin:0 1em 1em 0; padding:0;
+      display: inline-block;
+      vertical-align: top;
+    }
+  }
+}
+
+.card{
+  position: relative;
+  width:200px; height:295px;
+  header{
+    position: absolute;
+    bottom:0;
+    z-index:10;
+    color: #fff;
+    background-color: rgba(0,0,0,0.5);
+    width:100%;
+    h1, h4{ margin:0; padding:0; }
+    h1{
+      font-size: 1.5em;
+    }
+    h4{
+      font-size: 1em;
+      font-weight: normal;
+    }
+
+  }
+  section.images{
+    position: relative;
+    img:first-of-type{
+      z-index:5
+    }
+    img:not(:first-of-type){
+      position: absolute;
+      top:0; left:0;
+    }
+  }
+}
--- a/web/themes/custom/materiotheme/vuejs/components/Content/Base.vue
+++ b/web/themes/custom/materiotheme/vuejs/components/Content/Base.vue
@@ -1,10 +1,13 @@
 <template>
  <div id="Base">
    <h1 class="page-title">{{ pagetitle }}</h1>
-    <aside class="search-info">
-      {{ searchinfos }}
-    </aside>
-    <div class="results">
+    <div class="loading" v-if="!items.length">
+      <span>Loading ...</span>
+    </div>
+    <div class="cards-list" v-else>
+      <aside class="search-info">
+        {{ searchinfos }}
+      </aside>
      <ul>
        <li v-for="item in items" v-bind:key="item.nid">
          <Card :item="item"/>
--- a/web/themes/custom/materiotheme/vuejs/components/Content/Card.vue
+++ b/web/themes/custom/materiotheme/vuejs/components/Content/Card.vue
@@ -1,6 +1,12 @@
 <template>
  <div class="card">
-    <h1>{{ item.title }}</h1>
+    <header>
+      <h1>{{ item.title }}</h1>
+      <h4>{{ item.description }}</h4>
+    </header>
+    <section class=images>
+      <img class="images" v-for="img in item.images" :src="img.url" :title="img.title"/>
+    </section>
  </div>
 </template>

@@ -17,4 +23,5 @@ export default {
 </script>

 <style lang="scss" scoped>
+
 </style>
--- a/web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue
+++ b/web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue
@@ -68,8 +68,12 @@ export default {
  mounted(){
    // console.log('SearchForm mounted');
    Drupal.attachBehaviors(this.$el);
+    // get the search input
+    let $input = this.$el.querySelector('#edit-search')
+    // focus on input
+    $input.focus()
    // Catch the jquery ui events for autocmplete widget
-    jQuery(this.$el.querySelector('#edit-search')).on('autocompleteselect', this.onAutoCompleteSelect);
+    jQuery($input).on('autocompleteselect', this.onAutoCompleteSelect);
  },
  render(h) {
    // console.log('searchForm render');
--- a/web/themes/custom/materiotheme/vuejs/store/modules/search.js
+++ b/web/themes/custom/materiotheme/vuejs/store/modules/search.js
@@ -24,6 +24,9 @@ export default {
    setItems (state, items) {
      state.items = items
    },
+    resetItems(state) {
+      state.items = []
+    },
    setKeys (state, keys) {
      state.keys = keys
    },
@@ -48,6 +51,7 @@ export default {
  actions : {
    newSearch({ dispatch, commit, state }) {
      console.log('Search newSearch');
+      commit('resetItems')
      commit('resetOffset')
      dispatch('getResults')
    },
@@ -63,14 +67,74 @@ export default {
      return MA.get(`/materio_sapi/getresults?`+q)
        .then(({ data }) => {
          console.log('search MA getresults data', data)
-          commit('setItems', data.items)
+          // commit('setItems', data.items)
          commit('setInfos', data.infos)
          commit('setCount', data.count)
+          dispatch('getItems', data.items)
        })
        .catch(( error ) => {
            console.warn('Issue with getResults', error)
            Promise.reject(error)
        })
+    },
+    getItems({ dispatch, commit, state}, itemslist) {
+      let params = {
+        // include: 'images', // no needs to include thanks to consumers_image_styles module
+        'filter[uuids-groupe][group][conjunction]': 'OR'
+      };
+      for (var i = 0; i < itemslist.length; i++) {
+        let uuid = itemslist[i].uuid
+        params[`filter[${uuid}][condition][path]`] = 'id'
+        params[`filter[${uuid}][condition][value]`] = uuid
+        params[`filter[${uuid}][condition][operator]`] = '='
+        params[`filter[${uuid}][condition][memberOf]`] = 'uuids-groupe'
+      }
+      console.log('search JSONAPI params', params);
+      let q = qs.stringify(params)
+      return JSONAPI.get('node/materiau?'+q)
+        .then(({ data }) => {
+          console.log('search getItems data', data)
+          dispatch('parseItems', data)
+          // commit('setItems', data.items)
+        })
+        .catch(( error ) => {
+            console.warn('Issue with getItems', error)
+            Promise.reject(error)
+        })
+    },
+    parseItems({ dispatch, commit, state }, { data }) {
+      console.log('search parseItems data', data)
+      let items = []
+      for (var i = 0; i < data.length; i++) {
+        let itemsrc = data[i]
+        let attrs = itemsrc.attributes
+        let relations = itemsrc.relationships
+
+        // get field values
+        let item = {
+          title: attrs.title,
+          description: attrs.field_short_description,
+          body: attrs.body,
+          reference: attrs.field_reference,
+        }
+
+        // get images included values
+        let imgsrc = relations.images.data
+        item.images = []
+        for (var j = 0; j < imgsrc.length; j++) {
+        //   // https://stackoverflow.com/questions/11258077/how-to-find-index-of-an-object-by-key-and-value-in-an-javascript-array
+        //   let index = included.findIndex(p => p.id == imgsrc[j].id)
+        //   let img = included[index]
+          item.images.push({
+            title: imgsrc[j].meta.title,
+            url: imgsrc[j].meta.imageDerivatives.links.card_medium.href
+          })
+        }
+
+        items.push(item)
+      }
+      console.log('items', items);
+      commit('setItems', items);
    }
  }
 }