drafted article display, added materio_decoupled module

This commit is contained in:
Bachir Soussi Chiadmi 2019-07-14 15:21:04 +02:00
parent a926595856
commit bd17a0b7c1
10 changed files with 608 additions and 44 deletions

View File

@ -90,6 +90,7 @@ module:
mailgun: 0 mailgun: 0
maillog: 0 maillog: 0
mailsystem: 0 mailsystem: 0
materio_decoupled: 0
materio_home: 0 materio_home: 0
materio_jsonapi: 0 materio_jsonapi: 0
materio_migrate: 0 materio_migrate: 0

View File

@ -5149,6 +5149,73 @@ display:
separator: ', ' separator: ', '
field_api_classes: false field_api_classes: false
plugin_id: field plugin_id: field
created:
id: created
table: node_field_data
field: created
relationship: none
group_type: group
admin_label: ''
label: 'Authored on'
exclude: false
alter:
alter_text: false
text: ''
make_link: false
path: ''
absolute: false
external: false
replace_spaces: false
path_case: none
trim_whitespace: false
alt: ''
rel: ''
link_class: ''
prefix: ''
suffix: ''
target: ''
nl2br: false
max_length: 0
word_boundary: true
ellipsis: true
more_link: false
more_link_text: ''
more_link_path: ''
strip_tags: false
trim: false
preserve_tags: ''
html: false
element_type: ''
element_class: ''
element_label_type: ''
element_label_class: ''
element_label_colon: true
element_wrapper_type: ''
element_wrapper_class: ''
element_default_classes: true
empty: ''
hide_empty: false
empty_zero: false
hide_alter_empty: true
click_sort_column: value
type: timestamp
settings:
date_format: html_date
custom_date_format: ''
timezone: ''
group_column: value
group_columns: { }
group_rows: true
delta_limit: 0
delta_offset: 0
delta_reversed: false
delta_first_last: false
multi_type: separator
separator: ', '
field_api_classes: false
entity_type: node
entity_field: created
plugin_id: field
changed: changed:
id: changed id: changed
table: node_field_data table: node_field_data
@ -5557,6 +5624,7 @@ display:
field_linked_materials: field_linked_materials field_linked_materials: field_linked_materials
field_workflow: field_workflow field_workflow: field_workflow
field_migration: field_migration field_migration: field_migration
created: created
changed: changed changed: changed
field_memo: field_memo field_memo: field_memo
info: info:
@ -5618,14 +5686,23 @@ display:
separator: '' separator: ''
empty_column: false empty_column: false
responsive: '' responsive: ''
created:
sortable: true
default_sort_order: desc
align: ''
separator: ''
empty_column: false
responsive: ''
changed: changed:
sortable: false sortable: true
default_sort_order: asc default_sort_order: desc
align: '' align: ''
separator: '' separator: ''
empty_column: false empty_column: false
responsive: '' responsive: ''
field_memo: field_memo:
sortable: false
default_sort_order: asc
align: '' align: ''
separator: '' separator: ''
empty_column: false empty_column: false

View File

@ -19,6 +19,7 @@ dependencies:
- smart_trim - smart_trim
- taxonomy - taxonomy
- user - user
- workflow
id: blabla id: blabla
label: Blabla label: Blabla
module: views module: views
@ -476,18 +477,127 @@ display:
separator: ', ' separator: ', '
field_api_classes: false field_api_classes: false
plugin_id: field plugin_id: field
filters: view_node:
status: id: view_node
value: '1' table: node
table: node_field_data field: view_node
field: status relationship: none
plugin_id: boolean group_type: group
admin_label: ''
label: ''
exclude: false
alter:
alter_text: false
text: ''
make_link: false
path: ''
absolute: false
external: false
replace_spaces: false
path_case: none
trim_whitespace: false
alt: ''
rel: ''
link_class: ''
prefix: ''
suffix: ''
target: ''
nl2br: false
max_length: 0
word_boundary: true
ellipsis: true
more_link: false
more_link_text: ''
more_link_path: ''
strip_tags: false
trim: false
preserve_tags: ''
html: false
element_type: ''
element_class: ''
element_label_type: ''
element_label_class: ''
element_label_colon: false
element_wrapper_type: ''
element_wrapper_class: ''
element_default_classes: true
empty: ''
hide_empty: false
empty_zero: false
hide_alter_empty: true
text: view
output_url_as_text: true
absolute: false
entity_type: node entity_type: node
entity_field: status plugin_id: entity_link
id: status created:
expose: id: created
operator: '' table: node_field_data
group: 1 field: created
relationship: none
group_type: group
admin_label: ''
label: ''
exclude: false
alter:
alter_text: false
text: ''
make_link: false
path: ''
absolute: false
external: false
replace_spaces: false
path_case: none
trim_whitespace: false
alt: ''
rel: ''
link_class: ''
prefix: ''
suffix: ''
target: ''
nl2br: false
max_length: 0
word_boundary: true
ellipsis: true
more_link: false
more_link_text: ''
more_link_path: ''
strip_tags: false
trim: false
preserve_tags: ''
html: false
element_type: ''
element_class: ''
element_label_type: ''
element_label_class: ''
element_label_colon: false
element_wrapper_type: ''
element_wrapper_class: ''
element_default_classes: true
empty: ''
hide_empty: false
empty_zero: false
hide_alter_empty: true
click_sort_column: value
type: timestamp
settings:
date_format: html_date
custom_date_format: ''
timezone: ''
group_column: value
group_columns: { }
group_rows: true
delta_limit: 0
delta_offset: 0
delta_reversed: false
delta_first_last: false
multi_type: separator
separator: ', '
field_api_classes: false
entity_type: node
entity_field: created
plugin_id: field
filters:
type: type:
id: type id: type
table: node_field_data table: node_field_data
@ -537,22 +647,61 @@ display:
entity_type: node entity_type: node
entity_field: langcode entity_field: langcode
plugin_id: language plugin_id: language
field_workflow_value:
id: field_workflow_value
table: node__field_workflow
field: field_workflow_value
relationship: none
group_type: group
admin_label: ''
operator: or
value:
workflow_visible: workflow_visible
group: 1
exposed: false
expose:
operator_id: ''
label: ''
description: ''
use_operator: false
operator: ''
identifier: ''
required: false
remember: false
multiple: false
remember_roles:
authenticated: authenticated
reduce: false
is_grouped: false
group_info:
label: ''
description: ''
identifier: ''
optional: true
widget: select
multiple: false
remember: false
default_group: All
default_group_multiple: { }
group_items: { }
reduce_duplicates: false
plugin_id: workflow_state
sorts: sorts:
created: created:
id: created id: created
table: node_field_data table: node_field_data
field: created field: created
order: DESC
entity_type: node
entity_field: created
plugin_id: date
relationship: none relationship: none
group_type: group group_type: group
admin_label: '' admin_label: ''
order: DESC
exposed: false exposed: false
expose: expose:
label: '' label: ''
granularity: second granularity: minute
entity_type: node
entity_field: created
plugin_id: date
title: Blabla title: Blabla
header: { } header: { }
footer: { } footer: { }
@ -614,7 +763,6 @@ display:
style: style:
type: serializer type: serializer
options: options:
uses_fields: false
formats: formats:
json: json json: json
defaults: defaults:
@ -645,6 +793,7 @@ display:
items_per_page_options_all_label: '- All -' items_per_page_options_all_label: '- All -'
offset: false offset: false
offset_label: Offset offset_label: Offset
rendering_language: '***LANGUAGE_entity_translation***'
cache_metadata: cache_metadata:
max-age: -1 max-age: -1
contexts: contexts:

View File

@ -0,0 +1,5 @@
name: 'materio_decoupled'
type: module
description: 'helpers for progressive decoupling'
core: 8.x
package: 'Materio'

View File

@ -0,0 +1,71 @@
<?php
/**
* @file
* Contains materio_decoupled.module.
*/
use Drupal\Core\Routing\RouteMatchInterface;
/**
* Implements hook_help().
*/
function materio_decoupled_help($route_name, RouteMatchInterface $route_match) {
switch ($route_name) {
// Main module help for the materio_decoupled module.
case 'help.page.materio_decoupled':
$output = '';
$output .= '<h3>' . t('About') . '</h3>';
$output .= '<p>' . t('helpers for progressive decoupling') . '</p>';
return $output;
default:
}
}
/**
* Implements hook_page_attachments().
* @param array $attachments
*/
function materio_decoupled_page_attachments(array &$attachments) {
$current_path = \Drupal::service('path.current')->getPath();
$current_language = \Drupal::languageManager()->getCurrentLanguage()->getId();
$is_front = \Drupal::service('path.matcher')->isFrontPage();
$entity_type = null;
$entity_bundle = null;
$entity_id = null;
foreach (['node', 'taxonomy_term'] as $type) {
$entity = \Drupal::routeMatch()->getParameter($type);
if($entity){
$entity_type = $type;
$entity_bundle = $entity->bundle();
$entity_id = $entity->id();
$entity_uuid = $entity->uuid();
break;
}
}
$js_str = "var drupalDecoupled = {\n
sys_path:'".$current_path."',\n
is_front:".($is_front ? 'true':'false').",\n
lang_code:'".$current_language."',\n
entity_type:'".$entity_type."',\n
entity_bundle:'".$entity_bundle."',\n
entity_id:'".$entity_id."',\n
entity_uuid:'".$entity_uuid."',\n
};";
$attachments['#attached']['html_head'][] = [
[
'#type' => 'html_tag',
'#tag' => 'script',
'#value' => $js_str,
'#weight' => -999,
'#group' => 'decoupled'
],
// A key, to make it possible to recognize this HTML element when altering.
'decoupled',
];
}

View File

@ -417,7 +417,19 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n
/***/ (function(module, exports, __webpack_require__) { /***/ (function(module, exports, __webpack_require__) {
"use strict"; "use strict";
eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _jsonAxios = __webpack_require__(/*! vuejs/api/json-axios */ \"./web/themes/custom/materiotheme/vuejs/api/json-axios.js\");\n\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nvar _default = {\n name: \"Article\",\n props: ['item']\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Article.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options"); eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _route = _interopRequireDefault(__webpack_require__(/*! vuejs/route */ \"./web/themes/custom/materiotheme/vuejs/route/index.js\"));\n\nvar _jsonAxios = __webpack_require__(/*! vuejs/api/json-axios */ \"./web/themes/custom/materiotheme/vuejs/api/json-axios.js\");\n\nvar _querystring = _interopRequireDefault(__webpack_require__(/*! querystring */ \"./node_modules/querystring-es3/index.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nvar _default = {\n name: \"Article\",\n router: _route.default,\n props: ['item'],\n data: function data() {\n return {\n uuid: null,\n content: null\n };\n },\n created: function created() {\n this.getArticle();\n },\n methods: {\n getArticle: function getArticle() {\n console.log(this.$route);\n\n if (this.$route.query.uuid) {\n // directly record uuid\n this.uuid = this.$route.query.uuid;\n this.loadArticle();\n } else if (drupalDecoupled.entity_type == 'node' && drupalDecoupled.entity_bundle == 'article') {\n // get the uuid from drupalDeclouped\n // provided by materio_decoupled.module\n // console.log(drupalDecoupled);\n this.uuid = drupalDecoupled.entity_uuid;\n this.loadArticle();\n } else {\n this.$route.replace('home');\n }\n },\n loadArticle: function loadArticle() {\n var _this = this;\n\n console.log('loadArticle', this.uuid);\n var params = {\n include: 'field_linked_materials,field_showroom,field_tags,field_thesaurus,field_visuel,uid'\n };\n\n var q = _querystring.default.stringify(params);\n\n _jsonAxios.JSONAPI.get(\"node/article/\".concat(this.uuid, \"?\").concat(q)).then(function (_ref) {\n var data = _ref.data;\n console.log('loadArticle data', data);\n\n _this.parseData(data);\n }).catch(function (error) {\n console.warn('Issue with loadArticle', error);\n Promise.reject(error);\n });\n },\n parseData: function parseData(data) {\n var _this2 = this;\n\n var attrs = data.data.attributes;\n var relations = data.data.relationships;\n console.log('relations', relations);\n var inc = data.included;\n console.log('included', inc);\n this.content = {\n title: attrs.title,\n body: attrs.body.value // parse all relationships\n\n };\n\n var _loop = function _loop(key) {\n // skip loop if the property is from prototype\n if (!relations.hasOwnProperty(key)) return \"continue\";\n var obj = relations[key];\n console.log('typeof obj.data', _typeof(obj.data)); // skip obj if data is not array\n\n if (!Array.isArray(obj.data)) return \"continue\";\n _this2.content[key] = []; // parse relationship values using included\n\n var field = {};\n obj.data.forEach(function (e) {\n // get the included values\n var included = inc.find(function (i) {\n return i.id == e.id;\n }); // fill the values\n\n switch (key) {\n case 'field_visuel':\n field = e.meta;\n field.id = e.id;\n field.src = included.links.card_medium.href;\n break;\n\n case 'field_linked_materials':\n case 'field_thesaurus':\n case 'field_tags':\n field = included.attributes;\n field.id = included.id;\n break;\n // case 'field_showroom':\n // field = included.attributes\n // break\n\n default:\n }\n\n _this2.content[key].push(field);\n });\n };\n\n for (var key in relations) {\n var _ret = _loop(key);\n\n if (_ret === \"continue\") continue;\n }\n\n console.log('article.content', this.content);\n }\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Article.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
/***/ }),
/***/ "./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?vue&type=script&lang=js&":
/*!********************************************************************************************************************************************************************************************!*\
!*** ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?vue&type=script&lang=js& ***!
\********************************************************************************************************************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _jsonAxios = __webpack_require__(/*! vuejs/api/json-axios */ \"./web/themes/custom/materiotheme/vuejs/api/json-axios.js\");\n\nvar _route = _interopRequireDefault(__webpack_require__(/*! vuejs/route */ \"./web/themes/custom/materiotheme/vuejs/route/index.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nvar basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;\nvar _default = {\n name: \"ArticleCard\",\n router: _route.default,\n props: ['item'],\n data: function data() {\n return {\n alias: this.item.view_node.replace(/^.?\\/blabla\\//g, '')\n };\n },\n methods: {\n onclick: function onclick() {\n console.log('clicked on article', this.alias);\n this.$router.push({\n name: \"article\",\n params: {\n alias: this.alias\n },\n query: {\n uuid: this.item.uuid // meta: { uuid:this.item.uuid },\n\n }\n });\n }\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
/***/ }), /***/ }),
@ -441,7 +453,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n
/***/ (function(module, exports, __webpack_require__) { /***/ (function(module, exports, __webpack_require__) {
"use strict"; "use strict";
eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _restAxios = __webpack_require__(/*! vuejs/api/rest-axios */ \"./web/themes/custom/materiotheme/vuejs/api/rest-axios.js\");\n\nvar _Article = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/Article */ \"./web/themes/custom/materiotheme/vuejs/components/Content/Article.vue\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nvar _default = {\n name: \"Blabla\",\n data: function data() {\n return {\n items: [],\n page: 1\n };\n },\n beforeMount: function beforeMount() {\n this.getArticles();\n },\n methods: {\n getArticles: function getArticles($state) {\n var _this = this;\n\n _restAxios.REST.get(\"/blabla_rest?_format=json&page=\".concat(this.page), {}).then(function (_ref) {\n var data = _ref.data;\n console.log('blabla REST: data', data);\n\n if (data.length) {\n _this.items = _this.items.concat(data); // console.log('items.length', this.items.length);\n\n _this.page += 1;\n if ($state) $state.loaded();\n } else {\n if ($state) $state.complete();\n }\n }).catch(function (error) {\n console.warn('Issue with blabla', error);\n Promise.reject(error);\n });\n }\n },\n components: {\n Article: _Article.default\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Blabla.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options"); eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _restAxios = __webpack_require__(/*! vuejs/api/rest-axios */ \"./web/themes/custom/materiotheme/vuejs/api/rest-axios.js\");\n\nvar _ArticleCard = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/ArticleCard */ \"./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nvar _default = {\n name: \"Blabla\",\n data: function data() {\n return {\n items: [],\n page: 0\n };\n },\n created: function created() {\n this.getArticles();\n },\n methods: {\n getArticles: function getArticles($state) {\n var _this = this;\n\n _restAxios.REST.get(\"/blabla_rest?_format=json&page=\".concat(this.page), {}).then(function (_ref) {\n var data = _ref.data;\n console.log('blabla REST: data', data);\n\n if (data.length) {\n _this.items = _this.items.concat(data); // console.log('items.length', this.items.length);\n\n _this.page += 1;\n if ($state) $state.loaded();\n } else {\n if ($state) $state.complete();\n }\n }).catch(function (error) {\n console.warn('Issue with blabla', error);\n Promise.reject(error);\n });\n }\n },\n components: {\n ArticleCard: _ArticleCard.default\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Blabla.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
/***/ }), /***/ }),
@ -685,7 +697,19 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
/***/ (function(module, __webpack_exports__, __webpack_require__) { /***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict"; "use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"article\", { staticClass: \"card article\" }, [\n _c(\"header\", [\n _c(\"h1\", { domProps: { innerHTML: _vm._s(_vm.item.title) } }),\n _vm._v(\" \"),\n _c(\"h4\", {\n staticClass: \"body\",\n domProps: { innerHTML: _vm._s(_vm.item.body) }\n })\n ]),\n _vm._v(\" \"),\n _c(\"section\", { staticClass: \"images\" }, [\n _c(\"figure\", { domProps: { innerHTML: _vm._s(_vm.item.field_visuel) } })\n ])\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Article.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options"); eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return !_vm.content\n ? _c(\"div\", { staticClass: \"loading\" }, [\n _c(\"span\", [_vm._v(\"Loading ...\")])\n ])\n : _c(\"article\", { staticClass: \"article\" }, [\n _c(\"header\", [\n _c(\"h1\", [_vm._v(_vm._s(_vm.content.title))]),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"taxonomy\" }, [\n _c(\"div\", { staticClass: \"thesaurus\" }, [\n _c(\n \"ul\",\n _vm._l(_vm.content.field_thesaurus, function(term) {\n return _c(\"li\", { key: term.id }, [_vm._v(_vm._s(term.name))])\n }),\n 0\n )\n ]),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"tags\" }, [\n _c(\n \"ul\",\n _vm._l(_vm.content.field_tags, function(term) {\n return _c(\"li\", { key: term.id }, [_vm._v(_vm._s(term.name))])\n }),\n 0\n )\n ])\n ]),\n _vm._v(\" \"),\n _c(\"div\", {\n staticClass: \"body\",\n domProps: { innerHTML: _vm._s(_vm.content.body) }\n }),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"linked-materials\" }, [\n _c(\n \"ul\",\n _vm._l(_vm.content.field_linked_materials, function(node) {\n return _c(\"li\", { key: node.id }, [\n _c(\"section\", { attrs: { uuid: node.id } }, [\n _c(\"h1\", [_vm._v(_vm._s(node.title))]),\n _vm._v(\" \"),\n _c(\"h3\", [_vm._v(_vm._s(node.field_reference))]),\n _vm._v(\" \"),\n _c(\"h2\", [_vm._v(_vm._s(node.field_short_description))])\n ])\n ])\n }),\n 0\n )\n ]),\n _vm._v(\" \"),\n _c(\n \"div\",\n { staticClass: \"visuels\" },\n _vm._l(_vm.content.field_visuel, function(visuel) {\n return _c(\"figure\", { key: visuel.id }, [\n _c(\"img\", {\n attrs: {\n src: visuel.src,\n alt: visuel.alt,\n title: visuel.title\n }\n }),\n _vm._v(\" \"),\n _c(\"caption\")\n ])\n }),\n 0\n )\n ])\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Article.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
/***/ }),
/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?vue&type=template&id=08b811fe&scoped=true&":
/*!**********************************************************************************************************************************************************************************************************************************************************!*\
!*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?vue&type=template&id=08b811fe&scoped=true& ***!
\**********************************************************************************************************************************************************************************************************************************************************/
/*! exports provided: render, staticRenderFns */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"article\", { staticClass: \"card article\" }, [\n _c(\"header\", [\n _c(\"h1\", [\n _c(\"a\", {\n attrs: { href: _vm.item.view_node },\n domProps: { innerHTML: _vm._s(_vm.item.title) },\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.onclick($event)\n }\n }\n })\n ]),\n _vm._v(\" \"),\n _c(\"aside\", { domProps: { innerHTML: _vm._s(_vm.item.created) } }),\n _vm._v(\" \"),\n _c(\"h4\", {\n staticClass: \"body\",\n domProps: { innerHTML: _vm._s(_vm.item.body) }\n })\n ]),\n _vm._v(\" \"),\n _c(\"section\", { staticClass: \"images\" }, [\n _c(\"figure\", { domProps: { innerHTML: _vm._s(_vm.item.field_visuel) } })\n ])\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
/***/ }), /***/ }),
@ -709,7 +733,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
/***/ (function(module, __webpack_exports__, __webpack_require__) { /***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict"; "use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", { attrs: { id: \"blabla\" } }, [\n !_vm.items.length\n ? _c(\"div\", { staticClass: \"loading\" }, [\n _c(\"span\", [_vm._v(\"Loading ...\")])\n ])\n : _c(\n \"div\",\n { staticClass: \"cards-list\" },\n [\n _c(\n \"ul\",\n _vm._l(_vm.items, function(item) {\n return _c(\n \"li\",\n { key: item.uuid },\n [_c(\"Article\", { attrs: { item: item } })],\n 1\n )\n }),\n 0\n ),\n _vm._v(\" \"),\n _c(\"infinite-loading\", { on: { infinite: _vm.getArticles } }, [\n _c(\"div\", { attrs: { slot: \"no-more\" }, slot: \"no-more\" }, [\n _vm._v(\"No more results\")\n ])\n ])\n ],\n 1\n )\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Blabla.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options"); eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", { attrs: { id: \"blabla\" } }, [\n !_vm.items.length\n ? _c(\"div\", { staticClass: \"loading\" }, [\n _c(\"span\", [_vm._v(\"Loading ...\")])\n ])\n : _c(\n \"div\",\n { staticClass: \"cards-list\" },\n [\n _c(\n \"ul\",\n _vm._l(_vm.items, function(item) {\n return _c(\n \"li\",\n { key: item.uuid },\n [_c(\"ArticleCard\", { attrs: { item: item } })],\n 1\n )\n }),\n 0\n ),\n _vm._v(\" \"),\n _c(\"infinite-loading\", { on: { infinite: _vm.getArticles } }, [\n _c(\"div\", { attrs: { slot: \"no-more\" }, slot: \"no-more\" }, [\n _vm._v(\"No more results\")\n ])\n ])\n ],\n 1\n )\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Blabla.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
/***/ }), /***/ }),
@ -1067,6 +1091,42 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _nod
/***/ }), /***/ }),
/***/ "./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue":
/*!*********************************************************************************!*\
!*** ./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue ***!
\*********************************************************************************/
/*! no static exports found */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _ArticleCard_vue_vue_type_template_id_08b811fe_scoped_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ArticleCard.vue?vue&type=template&id=08b811fe&scoped=true& */ \"./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?vue&type=template&id=08b811fe&scoped=true&\");\n/* harmony import */ var _ArticleCard_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ArticleCard.vue?vue&type=script&lang=js& */ \"./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?vue&type=script&lang=js&\");\n/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _ArticleCard_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _ArticleCard_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__[key]; }) }(__WEBPACK_IMPORT_KEY__));\n/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ \"./node_modules/vue-loader/lib/runtime/componentNormalizer.js\");\n\n\n\n\n\n/* normalize component */\n\nvar component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(\n _ArticleCard_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n _ArticleCard_vue_vue_type_template_id_08b811fe_scoped_true___WEBPACK_IMPORTED_MODULE_0__[\"render\"],\n _ArticleCard_vue_vue_type_template_id_08b811fe_scoped_true___WEBPACK_IMPORTED_MODULE_0__[\"staticRenderFns\"],\n false,\n null,\n \"08b811fe\",\n null\n \n)\n\n/* hot reload */\nif (false) { var api; }\ncomponent.options.__file = \"web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue\"\n/* harmony default export */ __webpack_exports__[\"default\"] = (component.exports);\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?");
/***/ }),
/***/ "./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?vue&type=script&lang=js&":
/*!**********************************************************************************************************!*\
!*** ./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?vue&type=script&lang=js& ***!
\**********************************************************************************************************/
/*! no static exports found */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_babel_loader_lib_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_ArticleCard_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../../../../node_modules/babel-loader/lib!../../../../../../../node_modules/vue-loader/lib??vue-loader-options!./ArticleCard.vue?vue&type=script&lang=js& */ \"./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?vue&type=script&lang=js&\");\n/* harmony import */ var _node_modules_babel_loader_lib_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_ArticleCard_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_babel_loader_lib_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_ArticleCard_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__);\n/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _node_modules_babel_loader_lib_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_ArticleCard_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _node_modules_babel_loader_lib_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_ArticleCard_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));\n /* harmony default export */ __webpack_exports__[\"default\"] = (_node_modules_babel_loader_lib_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_ArticleCard_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0___default.a); \n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?");
/***/ }),
/***/ "./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?vue&type=template&id=08b811fe&scoped=true&":
/*!****************************************************************************************************************************!*\
!*** ./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?vue&type=template&id=08b811fe&scoped=true& ***!
\****************************************************************************************************************************/
/*! exports provided: render, staticRenderFns */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_ArticleCard_vue_vue_type_template_id_08b811fe_scoped_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../../../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../../../../../node_modules/vue-loader/lib??vue-loader-options!./ArticleCard.vue?vue&type=template&id=08b811fe&scoped=true& */ \"./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?vue&type=template&id=08b811fe&scoped=true&\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_ArticleCard_vue_vue_type_template_id_08b811fe_scoped_true___WEBPACK_IMPORTED_MODULE_0__[\"render\"]; });\n\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_ArticleCard_vue_vue_type_template_id_08b811fe_scoped_true___WEBPACK_IMPORTED_MODULE_0__[\"staticRenderFns\"]; });\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?");
/***/ }),
/***/ "./web/themes/custom/materiotheme/vuejs/components/Content/Base.vue": /***/ "./web/themes/custom/materiotheme/vuejs/components/Content/Base.vue":
/*!**************************************************************************!*\ /*!**************************************************************************!*\
!*** ./web/themes/custom/materiotheme/vuejs/components/Content/Base.vue ***! !*** ./web/themes/custom/materiotheme/vuejs/components/Content/Base.vue ***!
@ -1315,7 +1375,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _nod
/***/ (function(module, exports, __webpack_require__) { /***/ (function(module, exports, __webpack_require__) {
"use strict"; "use strict";
eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _vue = _interopRequireDefault(__webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.js\"));\n\nvar _vueRouter = _interopRequireDefault(__webpack_require__(/*! vue-router */ \"./node_modules/vue-router/dist/vue-router.esm.js\"));\n\nvar _Home = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/Home */ \"./web/themes/custom/materiotheme/vuejs/components/Content/Home.vue\"));\n\nvar _Base = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/Base */ \"./web/themes/custom/materiotheme/vuejs/components/Content/Base.vue\"));\n\nvar _Blabla = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/Blabla */ \"./web/themes/custom/materiotheme/vuejs/components/Content/Blabla.vue\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n_vue.default.use(_vueRouter.default); // https://www.lullabot.com/articles/decoupled-hard-problems-routing\n// We could use aliases to never reload the page on language changement\n// BUT beforeupdate is not triggered when push alias instead of path or name\n\n\nvar languages = ['en', 'fr'];\nconsole.log('path aliases', function () {\n return languages.map(function (l) {\n return \"/\".concat(l, \"/base\");\n });\n}());\nvar basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;\nvar routes = [{\n name: 'home',\n path: basePath,\n // path: '/',\n // alias: (() => languages.map(l => `/${l}`))(),\n component: _Home.default // components: {\n // 'home': Home\n // }\n\n}, {\n name: 'base',\n path: \"\".concat(basePath, \"base\"),\n // path: `/base`,\n // alias: (() => languages.map(l => `/${l}/base`))(),\n component: _Base.default // components: {\n // 'base': Base\n // }\n\n}, {\n name: 'blabla',\n path: \"\".concat(basePath, \"blabla\"),\n // path: `/base`,\n // alias: (() => languages.map(l => `/${l}/base`))(),\n component: _Blabla.default // components: {\n // 'base': Base\n // }\n\n}];\n\nvar _default = new _vueRouter.default({\n mode: 'history',\n routes: routes\n});\n\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/route/index.js?"); eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _vue = _interopRequireDefault(__webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.js\"));\n\nvar _vueRouter = _interopRequireDefault(__webpack_require__(/*! vue-router */ \"./node_modules/vue-router/dist/vue-router.esm.js\"));\n\nvar _Home = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/Home */ \"./web/themes/custom/materiotheme/vuejs/components/Content/Home.vue\"));\n\nvar _Base = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/Base */ \"./web/themes/custom/materiotheme/vuejs/components/Content/Base.vue\"));\n\nvar _Blabla = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/Blabla */ \"./web/themes/custom/materiotheme/vuejs/components/Content/Blabla.vue\"));\n\nvar _Article = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/Article */ \"./web/themes/custom/materiotheme/vuejs/components/Content/Article.vue\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n_vue.default.use(_vueRouter.default); // https://www.lullabot.com/articles/decoupled-hard-problems-routing\n// We could use aliases to never reload the page on language changement\n// BUT beforeupdate is not triggered when push alias instead of path or name\n// const languages = ['en', 'fr'];\n// console.log('path aliases', (() => languages.map(l => `/${l}/base`))() );\n\n\nvar basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;\nvar routes = [{\n name: 'home',\n path: basePath,\n // path: '/',\n // alias: (() => languages.map(l => `/${l}`))(),\n component: _Home.default // components: {\n // 'home': Home\n // }\n\n}, {\n name: 'base',\n path: \"\".concat(basePath, \"base\"),\n // path: `/base`,\n // alias: (() => languages.map(l => `/${l}/base`))(),\n component: _Base.default // components: {\n // 'base': Base\n // }\n\n}, // {\n// name:'blabla',\n// path: `${basePath}blabla`,\n// component: Blabla,\n// children: [\n// {\n// path: `${basePath}blabla/:alias`,\n// component: Article\n// }\n// ]\n// }\n{\n name: 'blabla',\n path: \"\".concat(basePath, \"blabla\"),\n component: _Blabla.default\n}, {\n name: 'article',\n path: \"\".concat(basePath, \"blabla/:alias\"),\n component: _Article.default // meta: { uuid:null }\n // {\n // path: '*',\n // name: 'notfound',\n // components: {\n // 'notfound': NotFound\n // }\n // }\n\n}];\n\nvar _default = new _vueRouter.default({\n mode: 'history',\n routes: routes\n});\n\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/route/index.js?");
/***/ }), /***/ }),

View File

@ -1,21 +1,159 @@
<template> <template>
<article class="card article"> <div class="loading" v-if="!content">
<span>Loading ...</span>
</div>
<article class="article" v-else>
<header> <header>
<h1 v-html="item.title"></h1> <h1>{{ content.title }}</h1>
<h4 class="body" v-html="item.body"></h4> <div class="taxonomy">
</header> <div class="thesaurus">
<section class="images"> <ul>
<figure v-html="item.field_visuel"></figure> <li
v-for="term in content.field_thesaurus" v-bind:key="term.id"
>{{ term.name }}</li>
</ul>
</div>
<div class="tags">
<ul>
<li
v-for="term in content.field_tags" v-bind:key="term.id"
>{{ term.name }}</li>
</ul>
</div>
</div>
<div class="body" v-html="content.body"></div>
<div class="linked-materials">
<ul>
<li v-for="node in content.field_linked_materials" v-bind:key="node.id">
<section :uuid="node.id">
<h1>{{ node.title }}</h1>
<h3>{{ node.field_reference }}</h3>
<h2>{{ node.field_short_description }}</h2>
</section> </section>
</li>
</ul>
</div>
<div class="visuels">
<figure
v-for="visuel in content.field_visuel" v-bind:key="visuel.id"
>
<img
:src="visuel.src"
:alt="visuel.alt"
:title="visuel.title"
/>
<caption></caption>
</figure>
</div>
</header>
</article> </article>
</template> </template>
<script> <script>
import router from 'vuejs/route'
import { JSONAPI } from 'vuejs/api/json-axios' import { JSONAPI } from 'vuejs/api/json-axios'
import qs from 'querystring'
export default { export default {
name: "Article", name: "Article",
props: ['item'] router,
props: ['item'],
data(){
return {
uuid:null,
content:null
}
},
created(){
this.getArticle()
},
methods: {
getArticle(){
console.log(this.$route);
if(this.$route.query.uuid){
// directly record uuid
this.uuid = this.$route.query.uuid
this.loadArticle()
}else if(drupalDecoupled.entity_type == 'node' && drupalDecoupled.entity_bundle == 'article'){
// get the uuid from drupalDeclouped
// provided by materio_decoupled.module
// console.log(drupalDecoupled);
this.uuid = drupalDecoupled.entity_uuid
this.loadArticle()
}else{
this.$route.replace('home')
}
},
loadArticle(){
console.log('loadArticle', this.uuid)
let params = {
include:'field_linked_materials,field_showroom,field_tags,field_thesaurus,field_visuel,uid'
}
let q = qs.stringify(params)
JSONAPI.get(`node/article/${this.uuid}?${q}`)
.then(({ data }) => {
console.log('loadArticle data', data)
this.parseData(data)
})
.catch(( error ) => {
console.warn('Issue with loadArticle', error)
Promise.reject(error)
})
},
parseData(data){
let attrs = data.data.attributes
let relations = data.data.relationships
console.log('relations', relations);
let inc = data.included
console.log('included', inc);
this.content = {
title:attrs.title,
body: attrs.body.value
}
// parse all relationships
for (let key in relations) {
// skip loop if the property is from prototype
if (!relations.hasOwnProperty(key)) continue;
let obj = relations[key]
console.log('typeof obj.data', typeof obj.data);
// skip obj if data is not array
if(!Array.isArray(obj.data)) continue
this.content[key] = []
// parse relationship values using included
let field = {}
obj.data.forEach((e) => {
// get the included values
let included = inc.find((i) => { return i.id == e.id })
// fill the values
switch (key) {
case 'field_visuel':
field = e.meta
field.id = e.id
field.src = included.links.card_medium.href
break;
case 'field_linked_materials':
case 'field_thesaurus':
case 'field_tags':
field = included.attributes
field.id = included.id
break;
// case 'field_showroom':
// field = included.attributes
// break
default:
}
this.content[key].push(field)
})
}
console.log('article.content',this.content);
}
}
} }
</script> </script>

View File

@ -0,0 +1,50 @@
<template>
<article class="card article">
<header>
<h1>
<a
:href="item.view_node"
@click.prevent="onclick"
v-html="item.title"
></a>
</h1>
<aside v-html="item.created"></aside>
<h4 class="body" v-html="item.body"></h4>
</header>
<section class="images">
<figure v-html="item.field_visuel"></figure>
</section>
</article>
</template>
<script>
import { JSONAPI } from 'vuejs/api/json-axios'
import router from 'vuejs/route'
let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;
export default {
name: "ArticleCard",
router,
props: ['item'],
data(){
return {
alias: this.item.view_node.replace(/^.?\/blabla\//g, '')
}
},
methods:{
onclick(){
console.log('clicked on article', this.alias);
this.$router.push({
name:`article`,
params: { alias:this.alias },
query: { uuid: this.item.uuid }
// meta: { uuid:this.item.uuid },
})
}
}
}
</script>
<style lang="scss" scoped>
</style>

View File

@ -6,7 +6,7 @@
<div class="cards-list" v-else> <div class="cards-list" v-else>
<ul> <ul>
<li v-for="item in items" v-bind:key="item.uuid"> <li v-for="item in items" v-bind:key="item.uuid">
<Article :item="item"/> <ArticleCard :item="item"/>
</li> </li>
</ul> </ul>
<infinite-loading @infinite="getArticles"> <infinite-loading @infinite="getArticles">
@ -19,17 +19,17 @@
<script> <script>
import { REST } from 'vuejs/api/rest-axios' import { REST } from 'vuejs/api/rest-axios'
import Article from 'vuejs/components/Content/Article' import ArticleCard from 'vuejs/components/Content/ArticleCard'
export default { export default {
name: "Blabla", name: "Blabla",
data() { data() {
return { return {
items:[], items:[],
page:1 page:0
} }
}, },
beforeMount(){ created(){
this.getArticles() this.getArticles()
}, },
methods: { methods: {
@ -55,7 +55,7 @@ export default {
} }
}, },
components: { components: {
Article ArticleCard
} }
} }
</script> </script>

View File

@ -4,6 +4,7 @@ import VueRouter from 'vue-router'
import Home from 'vuejs/components/Content/Home' import Home from 'vuejs/components/Content/Home'
import Base from 'vuejs/components/Content/Base' import Base from 'vuejs/components/Content/Base'
import Blabla from 'vuejs/components/Content/Blabla' import Blabla from 'vuejs/components/Content/Blabla'
import Article from 'vuejs/components/Content/Article'
Vue.use(VueRouter) Vue.use(VueRouter)
@ -11,8 +12,8 @@ Vue.use(VueRouter)
// We could use aliases to never reload the page on language changement // We could use aliases to never reload the page on language changement
// BUT beforeupdate is not triggered when push alias instead of path or name // BUT beforeupdate is not triggered when push alias instead of path or name
const languages = ['en', 'fr']; // const languages = ['en', 'fr'];
console.log('path aliases', (() => languages.map(l => `/${l}/base`))() ); // console.log('path aliases', (() => languages.map(l => `/${l}/base`))() );
let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix; let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;
@ -37,16 +38,28 @@ const routes = [
// 'base': Base // 'base': Base
// } // }
}, },
// {
// name:'blabla',
// path: `${basePath}blabla`,
// component: Blabla,
// children: [
// {
// path: `${basePath}blabla/:alias`,
// component: Article
// }
// ]
// }
{ {
name:'blabla', name:'blabla',
path: `${basePath}blabla`, path: `${basePath}blabla`,
// path: `/base`, component: Blabla
// alias: (() => languages.map(l => `/${l}/base`))(),
component: Blabla,
// components: {
// 'base': Base
// }
}, },
{
name:'article',
path: `${basePath}blabla/:alias`,
component: Article,
// meta: { uuid:null }
}
// { // {
// path: '*', // path: '*',
// name: 'notfound', // name: 'notfound',