loaded materials form solr with jsonapi, and display them

This commit is contained in:
Bachir Soussi Chiadmi 2019-06-10 18:30:48 +02:00
parent 058aed796a
commit 01cee3ba8a
19 changed files with 719 additions and 17 deletions

View File

@ -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",

157
composer.lock generated
View File

@ -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,

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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: ''

View File

@ -0,0 +1,4 @@
path_prefix: jsonapi
include_count: false
_core:
default_config_hash: eZ7KZ6nM56SRhfriFWCo1372Z9UiKufhSLRbkdhVmUg

View File

@ -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:

23
package-lock.json generated
View File

@ -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",

View File

@ -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"

View File

@ -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,
];
}

File diff suppressed because one or more lines are too long

View File

@ -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'

View File

@ -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;
}
}
}

View File

@ -1,10 +1,13 @@
<template>
<div id="Base">
<h1 class="page-title">{{ pagetitle }}</h1>
<div class="loading" v-if="!items.length">
<span>Loading ...</span>
</div>
<div class="cards-list" v-else>
<aside class="search-info">
{{ searchinfos }}
</aside>
<div class="results">
<ul>
<li v-for="item in items" v-bind:key="item.nid">
<Card :item="item"/>

View File

@ -1,6 +1,12 @@
<template>
<div class="card">
<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>

View File

@ -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');

View File

@ -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);
}
}
}