From fbf509a005bf5a2a0aea4a06be543cfcfeddd2f3 Mon Sep 17 00:00:00 2001 From: bach Date: Wed, 10 Mar 2021 11:54:08 +0100 Subject: [PATCH] another display for modalcard accordeon, displaying note icon on mediumcard and refresh it updated in modale --- .../graphql/materio_extension.base.graphqls | 1 + .../materio_extension.extension.graphqls | 4 +++ .../MaterioSchemaExtension.php | 34 +++++++++++++++++++ .../custom/materiotheme/assets/dist/main.css | 10 +++--- .../custom/materiotheme/assets/dist/main.js | 8 ++--- .../materiotheme/assets/styles/main.scss | 14 ++++---- .../vuejs/api/gql/searchresults.fragment.gql | 4 +++ .../vuejs/components/Content/Card.vue | 3 ++ .../vuejs/components/Content/ModalCard.vue | 4 +++ .../vuejs/store/modules/search.js | 29 ++++++++++++++++ 10 files changed, 96 insertions(+), 15 deletions(-) diff --git a/web/modules/custom/materio_graphql/graphql/materio_extension.base.graphqls b/web/modules/custom/materio_graphql/graphql/materio_extension.base.graphqls index 0598bd6..d3363b6 100644 --- a/web/modules/custom/materio_graphql/graphql/materio_extension.base.graphqls +++ b/web/modules/custom/materio_graphql/graphql/materio_extension.base.graphqls @@ -46,6 +46,7 @@ type Materiau implements NodeInterface & SearchResultInterface{ reference: String samples: [Sample] note: Note + note_id: Int # famille: String # index: Int } diff --git a/web/modules/custom/materio_graphql/graphql/materio_extension.extension.graphqls b/web/modules/custom/materio_graphql/graphql/materio_extension.extension.graphqls index d07ea8b..b04d022 100644 --- a/web/modules/custom/materio_graphql/graphql/materio_extension.extension.graphqls +++ b/web/modules/custom/materio_graphql/graphql/materio_extension.extension.graphqls @@ -14,6 +14,10 @@ extend type Query { searchresults(ids: [Int], lang: String): [SearchResultInterface] } +extend type Query { + searchresult(id: Int!, lang: String): SearchResultInterface +} + extend type Query { article(id: Int!, lang: String): Article } diff --git a/web/modules/custom/materio_graphql/src/Plugin/GraphQL/SchemaExtension/MaterioSchemaExtension.php b/web/modules/custom/materio_graphql/src/Plugin/GraphQL/SchemaExtension/MaterioSchemaExtension.php index 70eff95..4513935 100644 --- a/web/modules/custom/materio_graphql/src/Plugin/GraphQL/SchemaExtension/MaterioSchemaExtension.php +++ b/web/modules/custom/materio_graphql/src/Plugin/GraphQL/SchemaExtension/MaterioSchemaExtension.php @@ -365,6 +365,33 @@ class MaterioSchemaExtension extends SdlSchemaExtensionPluginBase { ->map('id', $builder->fromParent()) ) ); + $registry->addFieldResolver('Materiau', 'note_id', + $builder->compose( + $builder->callback(function($parent, $args){ + // get the current user id + $user = \Drupal::currentUser()->id(); + // get the current material id + $target = $parent->id(); + // query the note for these user AND material (if any) + // if null, UI will create it with rest api + $entity_storage = \Drupal::entityTypeManager()->getStorage('node'); + $query = $entity_storage->getQuery() + ->condition('type', 'note') + ->condition('uid', $user) + ->condition('field_target', $target) + ->accessCheck(TRUE); + $results = $query->execute(); + // $test="test"; + return array_shift($results); + }), + $builder->produce('entity_load') + ->map('type', $builder->fromValue('node')) + ->map('bundle', $builder->fromValue('note')) + ->map('id', $builder->fromParent()), + $builder->produce('entity_id') + ->map('entity', $builder->fromParent()) + ) + ); } // _ _ _ @@ -419,6 +446,13 @@ class MaterioSchemaExtension extends SdlSchemaExtensionPluginBase { ->map('ids', $builder->fromArgument('ids')) ->map('language', $builder->fromArgument('lang')) ); + + $registry->addFieldResolver('Query', 'searchresult', + $builder->produce('entity_load') + ->map('type', $builder->fromValue('node')) + ->map('id', $builder->fromArgument('id')) + ->map('language', $builder->fromArgument('lang')) + ); } // ___ _ diff --git a/web/themes/custom/materiotheme/assets/dist/main.css b/web/themes/custom/materiotheme/assets/dist/main.css index c1fe3f0..3e2a1dc 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.css +++ b/web/themes/custom/materiotheme/assets/dist/main.css @@ -2055,7 +2055,7 @@ article.card { border: none; --vsa-heading-padding: 0 0; --vsa-content-padding: 0 0 0.5em; - --vsa-default-icon-size: 0.2; + --vsa-default-icon-size: 0.3; --vsa-border-width: 0; --vsa-text-color: #1A1A1A; --vsa-highlight-color: #fff; @@ -2066,10 +2066,10 @@ article.card { height: 2em; } article.card.modal-card section.col-right .vsa-list .vsa-item .vsa-item__heading button.vsa-item__trigger:hover, article.card.modal-card section.col-right .vsa-list .vsa-item .vsa-item__heading button.vsa-item__trigger:focus { color: var(--vsa-text-color); } - article.card.modal-card section.col-right .vsa-list .vsa-item .vsa-item__heading { - padding-bottom: 0.2em; } - article.card.modal-card section.col-right .vsa-list .vsa-item .vsa-item__heading > button { - border-bottom: 0.5px dotted #1A1A1A; } + article.card.modal-card section.col-right .vsa-list .vsa-item[data-vsa-active="false"] .vsa-item__heading { + padding-bottom: 0.2em; + margin-bottom: 0.2em; + border-bottom: 0.5px dotted #1A1A1A; } article.card.modal-card section.col-right section.linked-materials > ul { display: flex; flex-flow: row wrap; diff --git a/web/themes/custom/materiotheme/assets/dist/main.js b/web/themes/custom/materiotheme/assets/dist/main.js index 80939fc..b8fb700 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.js +++ b/web/themes/custom/materiotheme/assets/dist/main.js @@ -1215,7 +1215,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n})); /***/ ((__unused_webpack_module, exports, __webpack_require__) => { "use strict"; -eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n}));\nexports.default = void 0;\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.common.js\");\n\nvar _LinkedMaterialCard = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/LinkedMaterialCard */ \"./web/themes/custom/materiotheme/vuejs/components/Content/LinkedMaterialCard.vue\"));\n\nvar _cardMixins = _interopRequireDefault(__webpack_require__(/*! vuejs/components/cardMixins */ \"./web/themes/custom/materiotheme/vuejs/components/cardMixins.js\"));\n\nvar _restAxios = __webpack_require__(/*! vuejs/api/rest-axios */ \"./web/themes/custom/materiotheme/vuejs/api/rest-axios.js\");\n\nvar _graphqlAxios = __webpack_require__(/*! vuejs/api/graphql-axios */ \"./web/themes/custom/materiotheme/vuejs/api/graphql-axios.js\");\n\nvar _printer = __webpack_require__(/*! graphql/language/printer */ \"./node_modules/graphql/language/printer.js\");\n\nvar _graphqlTag = _interopRequireDefault(__webpack_require__(/*! graphql-tag */ \"./node_modules/graphql-tag/src/index.js\"));\n\nvar _materiaumodalFragment = _interopRequireDefault(__webpack_require__(/*! vuejs/api/gql/materiaumodal.fragment.gql */ \"./web/themes/custom/materiotheme/vuejs/api/gql/materiaumodal.fragment.gql\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _templateObject() {\n var data = _taggedTemplateLiteral([\"{\\n materiau(id: \", \", lang: \\\"\", \"\\\") {\\n ...MateriauFields\\n }\\n }\\n \", \"\\n \"]);\n\n _templateObject = function _templateObject() {\n return data;\n };\n\n return data;\n}\n\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nvar prettyBytes = __webpack_require__(/*! pretty-bytes */ \"./node_modules/pretty-bytes/index.js\");\n\nvar _debounce = __webpack_require__(/*! lodash/debounce */ \"./node_modules/lodash/debounce.js\");\n\nvar _default = {\n name: \"ModalCard\",\n props: ['item'],\n mixins: [_cardMixins.default],\n components: {\n LinkedMaterialCard: _LinkedMaterialCard.default\n },\n data: function data() {\n return {\n material: null,\n loading: false,\n blanksrc: \"\".concat(drupalSettings.path.themePath, \"/assets/img/blank.gif\"),\n new_folder_name: \"\",\n is_creating_folder: false,\n loadingFlag: false,\n lightbox_index: null,\n note: \"\",\n note_nid: null\n };\n },\n computed: _objectSpread(_objectSpread({}, (0, _vuex.mapState)({\n csrf_token: function csrf_token(state) {\n return state.User.csrf_token;\n },\n flagcolls: function flagcolls(state) {\n return state.User.flagcolls;\n },\n showrooms: function showrooms(state) {\n return state.Showrooms.showrooms_by_tid;\n }\n })), {}, {\n collsLength: function collsLength() {\n return Object.keys(this.flagcolls).length;\n },\n addFlagBtnClassObj: function addFlagBtnClassObj() {\n return {\n 'mdi-plus-circle-outline': !this.is_creating_folder,\n 'mdi-loading': this.is_creating_folder,\n active: this.new_folder_name.length > 4 && !this.is_creating_folder,\n loading: this.is_creating_folder\n };\n }\n }),\n created: function created() {\n console.log('modale item', this.item);\n this.loadMaterial();\n this.debouncedSaveNote = _debounce(this.saveNote, 500);\n },\n watch: {\n // whenever question changes, this function will run\n note: function note(n, o) {\n console.log(\"note watcher: note\", n);\n this.debouncedSaveNote();\n }\n },\n methods: _objectSpread(_objectSpread({}, (0, _vuex.mapActions)({\n createFlagColl: 'User/createFlagColl',\n flagUnflag: 'User/flagUnflag'\n })), {}, {\n loadMaterial: function loadMaterial() {\n var _this = this;\n\n console.log('loadMaterial', this.item.id);\n this.loading = true;\n var ast = (0, _graphqlTag.default)(_templateObject(), this.item.id, drupalDecoupled.lang_code, _materiaumodalFragment.default);\n\n _graphqlAxios.MGQ.post('', {\n query: (0, _printer.print)(ast)\n }).then(function (_ref) {\n var materiau = _ref.data.data.materiau;\n console.log('loadMaterial material loaded', materiau);\n _this.material = materiau;\n _this.loading = false;\n\n if (materiau.note && materiau.note.id) {\n _this.note_id = materiau.note.id;\n _this.note = materiau.note.contenu;\n } // delay the lazyload to let the card the time to update dom\n // maybe not the best method\n\n\n setTimeout(function () {\n this.activateLazyLoad();\n }.bind(_this), 5);\n }).catch(function (error) {\n console.warn('Issue with loadMaterial', error);\n Promise.reject(error);\n });\n },\n onCreateFlagColl: function onCreateFlagColl() {\n var _this2 = this;\n\n console.log(\"Card onCreateFlagColl\", this.new_folder_name);\n this.is_creating_folder = true;\n this.createFlagColl(this.new_folder_name).then(function (data) {\n console.log(\"Card onCreateFlagColl then\", data);\n _this2.new_folder_name = \"\";\n _this2.is_creating_folder = false;\n var collid = data.id;\n _this2.loadingFlag = collid;\n\n _this2.flagUnflag({\n action: 'flag',\n id: _this2.item.id,\n collid: collid\n }).then(function (data) {\n console.log(\"onFlagActionCard then\", data);\n _this2.loadingFlag = false;\n });\n });\n },\n flagIsActive: function flagIsActive(collid) {\n // console.log(this.item.uuid);\n // console.log(this.flagcolls[collid].items_uuids);\n // return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1;\n return this.flagcolls[collid].items.indexOf(this.item.id) !== -1;\n },\n flagIsLoading: function flagIsLoading(collid) {\n // console.log(this.item.uuid);\n // console.log(this.flagcolls[collid].items_uuids);\n return collid === this.loadingFlag;\n },\n onFlagActionCard: function onFlagActionCard(e) {\n var _this3 = this;\n\n console.log(\"Card onFlagActionCard\", e);\n\n if (!this.loadingFlag) {\n var collid = e.target.getAttribute('collid');\n var isActive = this.flagIsActive(collid);\n var action = isActive ? 'unflag' : 'flag'; // console.log('collid', collid);\n // console.log(\"this.item\", this.item);\n\n this.loadingFlag = collid;\n this.flagUnflag({\n action: action,\n id: this.item.id,\n collid: collid\n }).then(function (data) {\n console.log(\"onFlagActionCard then\", data);\n _this3.loadingFlag = false;\n });\n }\n },\n onCloseModalCard: function onCloseModalCard(e) {\n // this.$modal.hideAll()\n this.$modal.hide(\"modal-\".concat(this.item.id));\n },\n prettyFileSize: function prettyFileSize(bytes) {\n return prettyBytes(parseInt(bytes));\n },\n shortUrl: function shortUrl(url) {\n return url.replace(/^http:\\/\\//, '').replace(/^www\\./, '');\n },\n saveNote: function saveNote() {\n console.log(\"saveNote\", this.note);\n\n if (this.note_nid) {\n this.updateNote();\n } else {\n this.createNote();\n }\n },\n updateNote: function updateNote() {\n var params = {\n type: [{\n target_id: 'note'\n }],\n field_contenu: this.note\n };\n var config = {\n headers: {\n \"X-CSRF-Token\": this.csrf_token\n }\n };\n\n _restAxios.REST.patch(\"/node/\".concat(this.note_nid, \"?_format=json\"), params, config).then(function (_ref2) {\n var data = _ref2.data;\n console.log('updateNote REST data', data);\n }).catch(function (error) {\n console.warn('Issue with updateNote', error);\n });\n },\n createNote: function createNote() {\n var _this4 = this;\n\n var params = {\n type: [{\n target_id: 'note'\n }],\n title: [{\n value: \"note\"\n }],\n field_contenu: this.note,\n field_target: this.item.id\n };\n var config = {\n headers: {\n \"X-CSRF-Token\": this.csrf_token\n }\n };\n\n _restAxios.REST.post('/node?_format=json', params, config).then(function (_ref3) {\n var data = _ref3.data;\n console.log('createNote REST data', data);\n _this4.note_nid = data.nid[0].value;\n }).catch(function (error) {\n console.warn('Issue with createNote', error);\n });\n }\n })\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options"); +eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n}));\nexports.default = void 0;\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.common.js\");\n\nvar _LinkedMaterialCard = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/LinkedMaterialCard */ \"./web/themes/custom/materiotheme/vuejs/components/Content/LinkedMaterialCard.vue\"));\n\nvar _cardMixins = _interopRequireDefault(__webpack_require__(/*! vuejs/components/cardMixins */ \"./web/themes/custom/materiotheme/vuejs/components/cardMixins.js\"));\n\nvar _restAxios = __webpack_require__(/*! vuejs/api/rest-axios */ \"./web/themes/custom/materiotheme/vuejs/api/rest-axios.js\");\n\nvar _graphqlAxios = __webpack_require__(/*! vuejs/api/graphql-axios */ \"./web/themes/custom/materiotheme/vuejs/api/graphql-axios.js\");\n\nvar _printer = __webpack_require__(/*! graphql/language/printer */ \"./node_modules/graphql/language/printer.js\");\n\nvar _graphqlTag = _interopRequireDefault(__webpack_require__(/*! graphql-tag */ \"./node_modules/graphql-tag/src/index.js\"));\n\nvar _materiaumodalFragment = _interopRequireDefault(__webpack_require__(/*! vuejs/api/gql/materiaumodal.fragment.gql */ \"./web/themes/custom/materiotheme/vuejs/api/gql/materiaumodal.fragment.gql\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _templateObject() {\n var data = _taggedTemplateLiteral([\"{\\n materiau(id: \", \", lang: \\\"\", \"\\\") {\\n ...MateriauFields\\n }\\n }\\n \", \"\\n \"]);\n\n _templateObject = function _templateObject() {\n return data;\n };\n\n return data;\n}\n\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nvar prettyBytes = __webpack_require__(/*! pretty-bytes */ \"./node_modules/pretty-bytes/index.js\");\n\nvar _debounce = __webpack_require__(/*! lodash/debounce */ \"./node_modules/lodash/debounce.js\");\n\nvar _default = {\n name: \"ModalCard\",\n props: ['item'],\n mixins: [_cardMixins.default],\n components: {\n LinkedMaterialCard: _LinkedMaterialCard.default\n },\n data: function data() {\n return {\n material: null,\n loading: false,\n blanksrc: \"\".concat(drupalSettings.path.themePath, \"/assets/img/blank.gif\"),\n new_folder_name: \"\",\n is_creating_folder: false,\n loadingFlag: false,\n lightbox_index: null,\n note: \"\",\n note_nid: null\n };\n },\n computed: _objectSpread(_objectSpread({}, (0, _vuex.mapState)({\n csrf_token: function csrf_token(state) {\n return state.User.csrf_token;\n },\n flagcolls: function flagcolls(state) {\n return state.User.flagcolls;\n },\n showrooms: function showrooms(state) {\n return state.Showrooms.showrooms_by_tid;\n }\n })), {}, {\n collsLength: function collsLength() {\n return Object.keys(this.flagcolls).length;\n },\n addFlagBtnClassObj: function addFlagBtnClassObj() {\n return {\n 'mdi-plus-circle-outline': !this.is_creating_folder,\n 'mdi-loading': this.is_creating_folder,\n active: this.new_folder_name.length > 4 && !this.is_creating_folder,\n loading: this.is_creating_folder\n };\n }\n }),\n created: function created() {\n console.log('modale item', this.item);\n this.loadMaterial();\n this.debouncedSaveNote = _debounce(this.saveNote, 500);\n },\n watch: {\n // whenever question changes, this function will run\n note: function note(n, o) {\n console.log(\"note watcher: note\", n);\n this.debouncedSaveNote();\n }\n },\n methods: _objectSpread(_objectSpread({}, (0, _vuex.mapActions)({\n refreshItem: 'Search/refreshItem',\n createFlagColl: 'User/createFlagColl',\n flagUnflag: 'User/flagUnflag'\n })), {}, {\n loadMaterial: function loadMaterial() {\n var _this = this;\n\n console.log('loadMaterial', this.item.id);\n this.loading = true;\n var ast = (0, _graphqlTag.default)(_templateObject(), this.item.id, drupalDecoupled.lang_code, _materiaumodalFragment.default);\n\n _graphqlAxios.MGQ.post('', {\n query: (0, _printer.print)(ast)\n }).then(function (_ref) {\n var materiau = _ref.data.data.materiau;\n console.log('loadMaterial material loaded', materiau);\n _this.material = materiau;\n _this.loading = false;\n\n if (materiau.note && materiau.note.id) {\n _this.note_id = materiau.note.id;\n _this.note = materiau.note.contenu;\n } // delay the lazyload to let the card the time to update dom\n // maybe not the best method\n\n\n setTimeout(function () {\n this.activateLazyLoad();\n }.bind(_this), 5);\n }).catch(function (error) {\n console.warn('Issue with loadMaterial', error);\n Promise.reject(error);\n });\n },\n onCreateFlagColl: function onCreateFlagColl() {\n var _this2 = this;\n\n console.log(\"Card onCreateFlagColl\", this.new_folder_name);\n this.is_creating_folder = true;\n this.createFlagColl(this.new_folder_name).then(function (data) {\n console.log(\"Card onCreateFlagColl then\", data);\n _this2.new_folder_name = \"\";\n _this2.is_creating_folder = false;\n var collid = data.id;\n _this2.loadingFlag = collid;\n\n _this2.flagUnflag({\n action: 'flag',\n id: _this2.item.id,\n collid: collid\n }).then(function (data) {\n console.log(\"onFlagActionCard then\", data);\n _this2.loadingFlag = false;\n });\n });\n },\n flagIsActive: function flagIsActive(collid) {\n // console.log(this.item.uuid);\n // console.log(this.flagcolls[collid].items_uuids);\n // return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1;\n return this.flagcolls[collid].items.indexOf(this.item.id) !== -1;\n },\n flagIsLoading: function flagIsLoading(collid) {\n // console.log(this.item.uuid);\n // console.log(this.flagcolls[collid].items_uuids);\n return collid === this.loadingFlag;\n },\n onFlagActionCard: function onFlagActionCard(e) {\n var _this3 = this;\n\n console.log(\"Card onFlagActionCard\", e);\n\n if (!this.loadingFlag) {\n var collid = e.target.getAttribute('collid');\n var isActive = this.flagIsActive(collid);\n var action = isActive ? 'unflag' : 'flag'; // console.log('collid', collid);\n // console.log(\"this.item\", this.item);\n\n this.loadingFlag = collid;\n this.flagUnflag({\n action: action,\n id: this.item.id,\n collid: collid\n }).then(function (data) {\n console.log(\"onFlagActionCard then\", data);\n _this3.loadingFlag = false;\n });\n }\n },\n onCloseModalCard: function onCloseModalCard(e) {\n // this.$modal.hideAll()\n this.$modal.hide(\"modal-\".concat(this.item.id));\n },\n prettyFileSize: function prettyFileSize(bytes) {\n return prettyBytes(parseInt(bytes));\n },\n shortUrl: function shortUrl(url) {\n return url.replace(/^http:\\/\\//, '').replace(/^www\\./, '');\n },\n saveNote: function saveNote() {\n console.log(\"saveNote\", this.note);\n\n if (this.note_nid) {\n this.updateNote();\n } else {\n this.createNote();\n }\n },\n updateNote: function updateNote() {\n var params = {\n type: [{\n target_id: 'note'\n }],\n field_contenu: this.note\n };\n var config = {\n headers: {\n \"X-CSRF-Token\": this.csrf_token\n }\n };\n\n _restAxios.REST.patch(\"/node/\".concat(this.note_nid, \"?_format=json\"), params, config).then(function (_ref2) {\n var data = _ref2.data;\n console.log('updateNote REST data', data);\n }).catch(function (error) {\n console.warn('Issue with updateNote', error);\n });\n },\n createNote: function createNote() {\n var _this4 = this;\n\n var params = {\n type: [{\n target_id: 'note'\n }],\n title: [{\n value: \"note\"\n }],\n field_contenu: this.note,\n field_target: this.item.id\n };\n var config = {\n headers: {\n \"X-CSRF-Token\": this.csrf_token\n }\n };\n\n _restAxios.REST.post('/node?_format=json', params, config).then(function (_ref3) {\n var data = _ref3.data;\n console.log('createNote REST data', data);\n _this4.note_nid = data.nid[0].value; // call search results refresh of the item to display that note is now existing for this item\n // TODO: do the same for article linked materials\n\n _this4.refreshItem({\n id: _this4.item.id\n });\n }).catch(function (error) {\n console.warn('Issue with createNote', error);\n });\n }\n })\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options"); /***/ }), @@ -1764,7 +1764,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n})); /***/ ((__unused_webpack_module, exports, __webpack_require__) => { "use strict"; -eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n}));\nexports.default = void 0;\n\nvar _maAxios = __webpack_require__(/*! vuejs/api/ma-axios */ \"./web/themes/custom/materiotheme/vuejs/api/ma-axios.js\");\n\nvar _querystringEs = _interopRequireDefault(__webpack_require__(/*! querystring-es3 */ \"./node_modules/querystring-es3/index.js\"));\n\nvar _graphqlAxios = __webpack_require__(/*! vuejs/api/graphql-axios */ \"./web/themes/custom/materiotheme/vuejs/api/graphql-axios.js\");\n\nvar _printer = __webpack_require__(/*! graphql/language/printer */ \"./node_modules/graphql/language/printer.js\");\n\nvar _graphqlTag = _interopRequireDefault(__webpack_require__(/*! graphql-tag */ \"./node_modules/graphql-tag/src/index.js\"));\n\nvar _searchresultsFragment = _interopRequireDefault(__webpack_require__(/*! vuejs/api/gql/searchresults.fragment.gql */ \"./web/themes/custom/materiotheme/vuejs/api/gql/searchresults.fragment.gql\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _templateObject() {\n var data = _taggedTemplateLiteral([\"{\\n searchresults(ids: [\", \"], lang: \\\"\", \"\\\") {\\n ...SearchResultFields\\n }\\n }\\n \", \"\\n \"]);\n\n _templateObject = function _templateObject() {\n return data;\n };\n\n return data;\n}\n\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\nvar _default = {\n namespaced: true,\n // initial state\n state: {\n keys: '',\n term: '',\n uuids: [],\n items: [],\n offset: 0,\n limit: 15,\n infos: null,\n count: 0,\n noresults: false,\n // infinteState will come from vue-infinite-loading plugin\n // implemented in vuejs/components/Content/Base.vue\n infiniteLoadingState: null\n },\n // getters\n getters: {},\n // mutations\n mutations: {\n setUuids: function setUuids(state, uuids) {\n state.uuids = state.uuids.concat(uuids);\n },\n resetUuids: function resetUuids(state) {\n state.uuids = [];\n },\n setResults: function setResults(state, items) {\n // console.log('setResults, items', items);\n if (items) {\n // avoid bug like items = [null]\n state.items = state.items.concat(items);\n } // console.log('setResults, state.items', state.items);\n\n },\n resetItems: function resetItems(state) {\n state.items = [];\n },\n setKeys: function setKeys(state, keys) {\n state.keys = keys;\n },\n setTerm: function setTerm(state, term) {\n state.term = term;\n },\n setInfos: function setInfos(state, infos) {\n state.infos = infos;\n },\n setCount: function setCount(state, count) {\n state.count = count;\n },\n resetCount: function resetCount(state, count) {\n state.count = false;\n },\n setNoresults: function setNoresults(state) {\n state.noresults = true;\n },\n resetNoresults: function resetNoresults(state) {\n state.noresults = false;\n },\n resetOffset: function resetOffset(state) {\n state.offset = 0;\n },\n incrementOffset: function incrementOffset(state) {\n state.offset += state.limit;\n },\n setInfiniteState: function setInfiniteState(state, infiniteLoadingstate) {\n state.infiniteLoadingState = infiniteLoadingstate;\n }\n },\n // actions\n actions: {\n newSearch: function newSearch(_ref) {\n var dispatch = _ref.dispatch,\n commit = _ref.commit,\n state = _ref.state;\n console.log('Search newSearch');\n commit('resetUuids');\n commit('resetItems');\n commit('resetCount');\n commit('resetNoresults');\n commit('resetOffset');\n\n if (state.keys || state.term) {\n this.commit('Common/setPagetitle', state.keys);\n } else {\n this.commit('Common/setPagetitle', 'Base');\n }\n\n dispatch('getResults');\n },\n nextPage: function nextPage(_ref2, $infiniteLoadingstate) {\n var dispatch = _ref2.dispatch,\n commit = _ref2.commit,\n state = _ref2.state;\n console.log('Search nextPage', $infiniteLoadingstate);\n commit('incrementOffset');\n commit('setInfiniteState', $infiniteLoadingstate);\n dispatch('getResults');\n },\n getResults: function getResults(_ref3) {\n var dispatch = _ref3.dispatch,\n commit = _ref3.commit,\n state = _ref3.state;\n var params = {\n keys: state.keys,\n term: state.term,\n offset: state.offset,\n limit: state.limit\n }; // console.log('Search getResults params', params);\n\n var q = _querystringEs.default.stringify(params);\n\n return _maAxios.MA.get('/materio_sapi/getresults?' + q).then(function (_ref4) {\n var data = _ref4.data;\n console.log('search MA getresults data', data); // commit('setItems', data.items)\n\n commit('setInfos', data.infos);\n commit('setCount', data.count);\n\n if (data.count) {\n commit('setUuids', data.uuids); // loadMaterials is on mixins\n // https://github.com/huybuidac/vuex-extensions\n // dispatch('loadMaterialsGQL', {\n // ids: data.nids,\n // gqlfragment: materiauGQL,\n // callBack: 'loadSearchResultsCallBack'\n // })\n\n var ast = (0, _graphqlTag.default)(_templateObject(), data.nids, drupalDecoupled.lang_code, _searchresultsFragment.default);\n\n _graphqlAxios.MGQ.post('', {\n query: (0, _printer.print)(ast)\n }).then(function (resp) {\n console.log('loadSearchResultsGQL resp', resp);\n dispatch(\"loadSearchResultsCallBack\", {\n items: resp.data.data.searchresults\n });\n }).catch(function (error) {\n console.warn('Issue with loadSearchResults', error);\n Promise.reject(error);\n });\n } else {\n commit('setNoresults');\n }\n }).catch(function (error) {\n console.warn('Issue with getResults', error);\n Promise.reject(error);\n });\n },\n loadSearchResultsCallBack: function loadSearchResultsCallBack(_ref5, _ref6) {\n var commit = _ref5.commit,\n state = _ref5.state;\n var items = _ref6.items,\n callBackArgs = _ref6.callBackArgs;\n console.log('search loadSearchResultsCallBack', items);\n commit('setResults', items);\n\n if (state.infiniteLoadingState) {\n if (state.offset + state.limit > state.count) {\n console.log('Search infinite completed'); // tell to vue-infinite-loading plugin that there si no new page\n\n state.infiniteLoadingState.complete();\n } else {\n console.log('Search infinite loaded'); // tell to vue-infinite-loading plugin that newpage is loaded\n\n state.infiniteLoadingState.loaded();\n }\n }\n }\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/store/modules/search.js?"); +eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n}));\nexports.default = void 0;\n\nvar _maAxios = __webpack_require__(/*! vuejs/api/ma-axios */ \"./web/themes/custom/materiotheme/vuejs/api/ma-axios.js\");\n\nvar _querystringEs = _interopRequireDefault(__webpack_require__(/*! querystring-es3 */ \"./node_modules/querystring-es3/index.js\"));\n\nvar _vue = _interopRequireDefault(__webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.js\"));\n\nvar _graphqlAxios = __webpack_require__(/*! vuejs/api/graphql-axios */ \"./web/themes/custom/materiotheme/vuejs/api/graphql-axios.js\");\n\nvar _printer = __webpack_require__(/*! graphql/language/printer */ \"./node_modules/graphql/language/printer.js\");\n\nvar _graphqlTag = _interopRequireDefault(__webpack_require__(/*! graphql-tag */ \"./node_modules/graphql-tag/src/index.js\"));\n\nvar _searchresultsFragment = _interopRequireDefault(__webpack_require__(/*! vuejs/api/gql/searchresults.fragment.gql */ \"./web/themes/custom/materiotheme/vuejs/api/gql/searchresults.fragment.gql\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _templateObject2() {\n var data = _taggedTemplateLiteral([\"{\\n searchresult(id: \", \", lang: \\\"\", \"\\\") {\\n ...SearchResultFields\\n }\\n }\\n \", \"\\n \"]);\n\n _templateObject2 = function _templateObject2() {\n return data;\n };\n\n return data;\n}\n\nfunction _templateObject() {\n var data = _taggedTemplateLiteral([\"{\\n searchresults(ids: [\", \"], lang: \\\"\", \"\\\") {\\n ...SearchResultFields\\n }\\n }\\n \", \"\\n \"]);\n\n _templateObject = function _templateObject() {\n return data;\n };\n\n return data;\n}\n\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\nvar _default = {\n namespaced: true,\n // initial state\n state: {\n keys: '',\n term: '',\n uuids: [],\n items: [],\n offset: 0,\n limit: 15,\n infos: null,\n count: 0,\n noresults: false,\n // infinteState will come from vue-infinite-loading plugin\n // implemented in vuejs/components/Content/Base.vue\n infiniteLoadingState: null\n },\n // getters\n getters: {},\n // mutations\n mutations: {\n setUuids: function setUuids(state, uuids) {\n state.uuids = state.uuids.concat(uuids);\n },\n resetUuids: function resetUuids(state) {\n state.uuids = [];\n },\n setResults: function setResults(state, items) {\n // console.log('setResults, items', items);\n if (items) {\n // avoid bug like items = [null]\n state.items = state.items.concat(items);\n } // console.log('setResults, state.items', state.items);\n\n },\n updateItem: function updateItem(state, item) {\n // state.items[data.index] = data.item // this is not triggering vuejs refresh\n // find the right index\n var index = state.items.findIndex(function (i) {\n return i.id === item.id;\n }); // update the array\n\n _vue.default.set(state.items, index, item); // console.log(\"mutation updateItem state.items\", state.items)\n\n },\n resetItems: function resetItems(state) {\n state.items = [];\n },\n setKeys: function setKeys(state, keys) {\n state.keys = keys;\n },\n setTerm: function setTerm(state, term) {\n state.term = term;\n },\n setInfos: function setInfos(state, infos) {\n state.infos = infos;\n },\n setCount: function setCount(state, count) {\n state.count = count;\n },\n resetCount: function resetCount(state, count) {\n state.count = false;\n },\n setNoresults: function setNoresults(state) {\n state.noresults = true;\n },\n resetNoresults: function resetNoresults(state) {\n state.noresults = false;\n },\n resetOffset: function resetOffset(state) {\n state.offset = 0;\n },\n incrementOffset: function incrementOffset(state) {\n state.offset += state.limit;\n },\n setInfiniteState: function setInfiniteState(state, infiniteLoadingstate) {\n state.infiniteLoadingState = infiniteLoadingstate;\n }\n },\n // actions\n actions: {\n newSearch: function newSearch(_ref) {\n var dispatch = _ref.dispatch,\n commit = _ref.commit,\n state = _ref.state;\n console.log('Search newSearch');\n commit('resetUuids');\n commit('resetItems');\n commit('resetCount');\n commit('resetNoresults');\n commit('resetOffset');\n\n if (state.keys || state.term) {\n this.commit('Common/setPagetitle', state.keys);\n } else {\n this.commit('Common/setPagetitle', 'Base');\n }\n\n dispatch('getResults');\n },\n nextPage: function nextPage(_ref2, $infiniteLoadingstate) {\n var dispatch = _ref2.dispatch,\n commit = _ref2.commit,\n state = _ref2.state;\n console.log('Search nextPage', $infiniteLoadingstate);\n commit('incrementOffset');\n commit('setInfiniteState', $infiniteLoadingstate);\n dispatch('getResults');\n },\n getResults: function getResults(_ref3) {\n var dispatch = _ref3.dispatch,\n commit = _ref3.commit,\n state = _ref3.state;\n var params = {\n keys: state.keys,\n term: state.term,\n offset: state.offset,\n limit: state.limit\n }; // console.log('Search getResults params', params);\n\n var q = _querystringEs.default.stringify(params);\n\n return _maAxios.MA.get('/materio_sapi/getresults?' + q).then(function (_ref4) {\n var data = _ref4.data;\n console.log('search MA getresults data', data); // commit('setItems', data.items)\n\n commit('setInfos', data.infos);\n commit('setCount', data.count);\n\n if (data.count) {\n commit('setUuids', data.uuids); // loadMaterials is on mixins\n // https://github.com/huybuidac/vuex-extensions\n // dispatch('loadMaterialsGQL', {\n // ids: data.nids,\n // gqlfragment: materiauGQL,\n // callBack: 'loadSearchResultsCallBack'\n // })\n\n var ast = (0, _graphqlTag.default)(_templateObject(), data.nids, drupalDecoupled.lang_code, _searchresultsFragment.default);\n\n _graphqlAxios.MGQ.post('', {\n query: (0, _printer.print)(ast)\n }).then(function (resp) {\n console.log('loadSearchResultsGQL resp', resp);\n dispatch(\"loadSearchResultsCallBack\", {\n items: resp.data.data.searchresults\n });\n }).catch(function (error) {\n console.warn('Issue with loadSearchResults', error);\n Promise.reject(error);\n });\n } else {\n commit('setNoresults');\n }\n }).catch(function (error) {\n console.warn('Issue with getResults', error);\n Promise.reject(error);\n });\n },\n loadSearchResultsCallBack: function loadSearchResultsCallBack(_ref5, _ref6) {\n var commit = _ref5.commit,\n state = _ref5.state;\n var items = _ref6.items,\n callBackArgs = _ref6.callBackArgs;\n console.log('search loadSearchResultsCallBack', items);\n commit('setResults', items);\n\n if (state.infiniteLoadingState) {\n if (state.offset + state.limit > state.count) {\n console.log('Search infinite completed'); // tell to vue-infinite-loading plugin that there si no new page\n\n state.infiniteLoadingState.complete();\n } else {\n console.log('Search infinite loaded'); // tell to vue-infinite-loading plugin that newpage is loaded\n\n state.infiniteLoadingState.loaded();\n }\n }\n },\n refreshItem: function refreshItem(_ref7, _ref8) {\n var commit = _ref7.commit,\n state = _ref7.state;\n var id = _ref8.id;\n console.log(\"Search refreshItem: id\", id);\n var ast = (0, _graphqlTag.default)(_templateObject2(), id, drupalDecoupled.lang_code, _searchresultsFragment.default);\n\n _graphqlAxios.MGQ.post('', {\n query: (0, _printer.print)(ast)\n }).then(function (resp) {\n console.log('refreshItem searchresult resp', resp); // dispatch(\"loadSearchResultsCallBack\", { items: resp.data.data.searchresults})\n\n commit(\"updateItem\", resp.data.data.searchresult);\n }).catch(function (error) {\n console.warn('Issue with refreshItem', error);\n Promise.reject(error);\n });\n }\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/store/modules/search.js?"); /***/ }), @@ -1856,7 +1856,7 @@ eval("\n var doc = {\"kind\":\"Document\",\"definitions\":[{\"kind\":\"Fragme /*! runtime requirements: module */ /***/ ((module) => { -eval("\n var doc = {\"kind\":\"Document\",\"definitions\":[{\"kind\":\"FragmentDefinition\",\"name\":{\"kind\":\"Name\",\"value\":\"SearchResultFields\"},\"typeCondition\":{\"kind\":\"NamedType\",\"name\":{\"kind\":\"Name\",\"value\":\"SearchResultInterface\"}},\"directives\":[],\"selectionSet\":{\"kind\":\"SelectionSet\",\"selections\":[{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"id\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"uuid\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"bundle\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"path\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"title\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"short_description\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"InlineFragment\",\"typeCondition\":{\"kind\":\"NamedType\",\"name\":{\"kind\":\"Name\",\"value\":\"Materiau\"}},\"directives\":[],\"selectionSet\":{\"kind\":\"SelectionSet\",\"selections\":[{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"images\"},\"arguments\":[],\"directives\":[],\"selectionSet\":{\"kind\":\"SelectionSet\",\"selections\":[{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"url\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"alt\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"style_cardmedium_url\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"style_hd_url\"},\"arguments\":[],\"directives\":[]}]}},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"reference\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"samples\"},\"arguments\":[],\"directives\":[],\"selectionSet\":{\"kind\":\"SelectionSet\",\"selections\":[{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"showroom\"},\"arguments\":[],\"directives\":[],\"selectionSet\":{\"kind\":\"SelectionSet\",\"selections\":[{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"name\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"id\"},\"arguments\":[],\"directives\":[]}]}},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"location\"},\"arguments\":[],\"directives\":[]}]}}]}},{\"kind\":\"InlineFragment\",\"typeCondition\":{\"kind\":\"NamedType\",\"name\":{\"kind\":\"Name\",\"value\":\"Thematique\"}},\"directives\":[],\"selectionSet\":{\"kind\":\"SelectionSet\",\"selections\":[{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"images\"},\"arguments\":[],\"directives\":[],\"selectionSet\":{\"kind\":\"SelectionSet\",\"selections\":[{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"url\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"alt\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"style_cardmedium_url\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"style_hd_url\"},\"arguments\":[],\"directives\":[]}]}}]}}]}}],\"loc\":{\"start\":0,\"end\":425}};\n doc.loc.source = {\"body\":\"fragment SearchResultFields on SearchResultInterface {\\n id\\n uuid\\n bundle\\n path\\n title\\n short_description\\n ... on Materiau{\\n images{\\n url\\n alt\\n style_cardmedium_url\\n style_hd_url\\n }\\n reference\\n \\tsamples{\\n showroom{\\n name\\n id\\n }\\n location\\n }\\n }\\n ... on Thematique {\\n images{\\n url\\n alt\\n style_cardmedium_url\\n style_hd_url\\n }\\n }\\n}\\n\",\"name\":\"GraphQL request\",\"locationOffset\":{\"line\":1,\"column\":1}};\n \n\n var names = {};\n function unique(defs) {\n return defs.filter(\n function(def) {\n if (def.kind !== 'FragmentDefinition') return true;\n var name = def.name.value\n if (names[name]) {\n return false;\n } else {\n names[name] = true;\n return true;\n }\n }\n )\n }\n \n\n module.exports = doc;\n \n\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/api/gql/searchresults.fragment.gql?"); +eval("\n var doc = {\"kind\":\"Document\",\"definitions\":[{\"kind\":\"FragmentDefinition\",\"name\":{\"kind\":\"Name\",\"value\":\"SearchResultFields\"},\"typeCondition\":{\"kind\":\"NamedType\",\"name\":{\"kind\":\"Name\",\"value\":\"SearchResultInterface\"}},\"directives\":[],\"selectionSet\":{\"kind\":\"SelectionSet\",\"selections\":[{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"id\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"uuid\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"bundle\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"path\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"title\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"short_description\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"InlineFragment\",\"typeCondition\":{\"kind\":\"NamedType\",\"name\":{\"kind\":\"Name\",\"value\":\"Materiau\"}},\"directives\":[],\"selectionSet\":{\"kind\":\"SelectionSet\",\"selections\":[{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"images\"},\"arguments\":[],\"directives\":[],\"selectionSet\":{\"kind\":\"SelectionSet\",\"selections\":[{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"url\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"alt\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"style_cardmedium_url\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"style_hd_url\"},\"arguments\":[],\"directives\":[]}]}},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"reference\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"samples\"},\"arguments\":[],\"directives\":[],\"selectionSet\":{\"kind\":\"SelectionSet\",\"selections\":[{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"showroom\"},\"arguments\":[],\"directives\":[],\"selectionSet\":{\"kind\":\"SelectionSet\",\"selections\":[{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"name\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"id\"},\"arguments\":[],\"directives\":[]}]}},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"location\"},\"arguments\":[],\"directives\":[]}]}},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"note\"},\"arguments\":[],\"directives\":[],\"selectionSet\":{\"kind\":\"SelectionSet\",\"selections\":[{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"id\"},\"arguments\":[],\"directives\":[]}]}},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"note_id\"},\"arguments\":[],\"directives\":[]}]}},{\"kind\":\"InlineFragment\",\"typeCondition\":{\"kind\":\"NamedType\",\"name\":{\"kind\":\"Name\",\"value\":\"Thematique\"}},\"directives\":[],\"selectionSet\":{\"kind\":\"SelectionSet\",\"selections\":[{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"images\"},\"arguments\":[],\"directives\":[],\"selectionSet\":{\"kind\":\"SelectionSet\",\"selections\":[{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"url\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"alt\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"style_cardmedium_url\"},\"arguments\":[],\"directives\":[]},{\"kind\":\"Field\",\"name\":{\"kind\":\"Name\",\"value\":\"style_hd_url\"},\"arguments\":[],\"directives\":[]}]}}]}}]}}],\"loc\":{\"start\":0,\"end\":462}};\n doc.loc.source = {\"body\":\"fragment SearchResultFields on SearchResultInterface {\\n id\\n uuid\\n bundle\\n path\\n title\\n short_description\\n ... on Materiau{\\n images{\\n url\\n alt\\n style_cardmedium_url\\n style_hd_url\\n }\\n reference\\n \\tsamples{\\n showroom{\\n name\\n id\\n }\\n location\\n }\\n note{\\n id\\n }\\n note_id\\n }\\n ... on Thematique {\\n images{\\n url\\n alt\\n style_cardmedium_url\\n style_hd_url\\n }\\n }\\n}\\n\",\"name\":\"GraphQL request\",\"locationOffset\":{\"line\":1,\"column\":1}};\n \n\n var names = {};\n function unique(defs) {\n return defs.filter(\n function(def) {\n if (def.kind !== 'FragmentDefinition') return true;\n var name = def.name.value\n if (names[name]) {\n return false;\n } else {\n names[name] = true;\n return true;\n }\n }\n )\n }\n \n\n module.exports = doc;\n \n\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/api/gql/searchresults.fragment.gql?"); /***/ }), @@ -3452,7 +3452,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"render\": () => /* binding */ render,\n/* harmony export */ \"staticRenderFns\": () => /* binding */ staticRenderFns\n/* harmony export */ });\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 search-card\" }, [\n _c(\n \"header\",\n {\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.openModalCard($event)\n }\n }\n },\n [\n _vm.isloggedin ? _c(\"h1\", [_vm._v(_vm._s(_vm.item.title))]) : _vm._e(),\n _vm._v(\" \"),\n _c(\"h4\", [_vm._v(_vm._s(_vm.item.short_description))]),\n _vm._v(\" \"),\n _vm.isloggedin\n ? _c(\"span\", { staticClass: \"ref\" }, [\n _vm._v(_vm._s(_vm.item.reference))\n ])\n : _vm._e()\n ]\n ),\n _vm._v(\" \"),\n _vm.isloggedin\n ? _c(\"nav\", { staticClass: \"tools\" }, [\n _c(\"section\", { staticClass: \"tool flags\" }, [\n _c(\"span\", { staticClass: \"btn mdi mdi-folder-outline\" }),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"tool-content\" }, [\n _c(\n \"ul\",\n [\n _vm._l(_vm.flagcolls, function(coll) {\n return _vm.flagcolls\n ? _c(\"li\", { key: coll.id }, [\n _c(\n \"span\",\n {\n staticClass: \"flag mdi\",\n class: [\n _vm.flagIsLoading(coll.id)\n ? \"mdi-loading mdi-spin\"\n : _vm.flagIsActive(coll.id)\n ? \"mdi-close-circle isActive\"\n : \"mdi-plus\"\n ],\n attrs: { collid: coll.id },\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.onFlagActionCard($event)\n }\n }\n },\n [\n _vm._v(\n \"\\n \" +\n _vm._s(coll.name) +\n \"\\n \"\n )\n ]\n )\n ])\n : _vm._e()\n }),\n _vm._v(\" \"),\n _vm.collsLength < 15\n ? _c(\"li\", { staticClass: \"create-flag\" }, [\n _c(\"input\", {\n directives: [\n {\n name: \"model\",\n rawName: \"v-model\",\n value: _vm.new_folder_name,\n expression: \"new_folder_name\"\n }\n ],\n attrs: { placeholder: \"new folder\" },\n domProps: { value: _vm.new_folder_name },\n on: {\n keyup: function($event) {\n if (\n !$event.type.indexOf(\"key\") &&\n _vm._k(\n $event.keyCode,\n \"enter\",\n 13,\n $event.key,\n \"Enter\"\n )\n ) {\n return null\n }\n $event.preventDefault()\n $event.stopPropagation()\n return _vm.onCreateFlagColl($event)\n },\n input: function($event) {\n if ($event.target.composing) {\n return\n }\n _vm.new_folder_name = $event.target.value\n }\n }\n }),\n _vm._v(\" \"),\n _c(\"span\", {\n staticClass: \"add-btn mdi\",\n class: _vm.addFlagBtnClassObj,\n on: {\n click: function($event) {\n $event.preventDefault()\n $event.stopPropagation()\n return _vm.onCreateFlagColl($event)\n }\n }\n })\n ])\n : _vm._e()\n ],\n 2\n )\n ])\n ]),\n _vm._v(\" \"),\n _vm.item.samples && _vm.item.samples.length\n ? _c(\"section\", { staticClass: \"tool samples\" }, [\n _c(\"span\", { staticClass: \"btn mdi mdi-beaker-outline\" }),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"tool-content\" }, [\n _c(\"span\", { staticClass: \"label\" }, [\n _vm._v(_vm._s(_vm.$t(\"materio.Samples\")))\n ]),\n _vm._v(\" \"),\n _c(\n \"ul\",\n _vm._l(_vm.item.samples, function(sample) {\n return _c(\"li\", { key: sample.showroom.id }, [\n _c(\"span\", { staticClass: \"showroom\" }, [\n _vm._v(_vm._s(sample.showroom.name))\n ]),\n _vm._v(\": \" + _vm._s(sample.location) + \"\\n \")\n ])\n }),\n 0\n )\n ])\n ])\n : _vm._e(),\n _vm._v(\" \"),\n _c(\"section\", { staticClass: \"tool print\" }, [\n _c(\n \"a\",\n {\n attrs: {\n href: _vm.item.path + \"/printable/print\",\n target: \"_blank\"\n }\n },\n [_c(\"span\", { staticClass: \"btn mdi mdi-printer\" })]\n )\n ])\n ])\n : _vm._e(),\n _vm._v(\" \"),\n _c(\n \"section\",\n {\n directives: [{ name: \"switcher\", rawName: \"v-switcher\" }],\n staticClass: \"images\"\n },\n _vm._l(_vm.item.images, function(img, index) {\n return _c(\"figure\", { key: img.url }, [\n _c(\"img\", {\n directives: [\n {\n name: \"lazy\",\n rawName: \"v-lazy\",\n value: index,\n expression: \"index\"\n }\n ],\n staticClass: \"lazy\",\n attrs: { \"data-src\": img.style_cardmedium_url, title: img.title }\n }),\n _vm._v(\" \"),\n _c(\"img\", {\n staticClass: \"blank\",\n attrs: { src: _vm.blanksrc },\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.openModalCard($event)\n }\n }\n })\n ])\n }),\n 0\n )\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Content/Card.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"render\": () => /* binding */ render,\n/* harmony export */ \"staticRenderFns\": () => /* binding */ staticRenderFns\n/* harmony export */ });\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 search-card\" }, [\n _c(\n \"header\",\n {\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.openModalCard($event)\n }\n }\n },\n [\n _vm.isloggedin ? _c(\"h1\", [_vm._v(_vm._s(_vm.item.title))]) : _vm._e(),\n _vm._v(\" \"),\n _c(\"h4\", [_vm._v(_vm._s(_vm.item.short_description))]),\n _vm._v(\" \"),\n _vm.isloggedin\n ? _c(\"span\", { staticClass: \"ref\" }, [\n _vm._v(_vm._s(_vm.item.reference))\n ])\n : _vm._e()\n ]\n ),\n _vm._v(\" \"),\n _vm.isloggedin\n ? _c(\"nav\", { staticClass: \"tools\" }, [\n _c(\"section\", { staticClass: \"tool flags\" }, [\n _c(\"span\", { staticClass: \"btn mdi mdi-folder-outline\" }),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"tool-content\" }, [\n _c(\n \"ul\",\n [\n _vm._l(_vm.flagcolls, function(coll) {\n return _vm.flagcolls\n ? _c(\"li\", { key: coll.id }, [\n _c(\n \"span\",\n {\n staticClass: \"flag mdi\",\n class: [\n _vm.flagIsLoading(coll.id)\n ? \"mdi-loading mdi-spin\"\n : _vm.flagIsActive(coll.id)\n ? \"mdi-close-circle isActive\"\n : \"mdi-plus\"\n ],\n attrs: { collid: coll.id },\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.onFlagActionCard($event)\n }\n }\n },\n [\n _vm._v(\n \"\\n \" +\n _vm._s(coll.name) +\n \"\\n \"\n )\n ]\n )\n ])\n : _vm._e()\n }),\n _vm._v(\" \"),\n _vm.collsLength < 15\n ? _c(\"li\", { staticClass: \"create-flag\" }, [\n _c(\"input\", {\n directives: [\n {\n name: \"model\",\n rawName: \"v-model\",\n value: _vm.new_folder_name,\n expression: \"new_folder_name\"\n }\n ],\n attrs: { placeholder: \"new folder\" },\n domProps: { value: _vm.new_folder_name },\n on: {\n keyup: function($event) {\n if (\n !$event.type.indexOf(\"key\") &&\n _vm._k(\n $event.keyCode,\n \"enter\",\n 13,\n $event.key,\n \"Enter\"\n )\n ) {\n return null\n }\n $event.preventDefault()\n $event.stopPropagation()\n return _vm.onCreateFlagColl($event)\n },\n input: function($event) {\n if ($event.target.composing) {\n return\n }\n _vm.new_folder_name = $event.target.value\n }\n }\n }),\n _vm._v(\" \"),\n _c(\"span\", {\n staticClass: \"add-btn mdi\",\n class: _vm.addFlagBtnClassObj,\n on: {\n click: function($event) {\n $event.preventDefault()\n $event.stopPropagation()\n return _vm.onCreateFlagColl($event)\n }\n }\n })\n ])\n : _vm._e()\n ],\n 2\n )\n ])\n ]),\n _vm._v(\" \"),\n _vm.item.samples && _vm.item.samples.length\n ? _c(\"section\", { staticClass: \"tool samples\" }, [\n _c(\"span\", { staticClass: \"btn mdi mdi-beaker-outline\" }),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"tool-content\" }, [\n _c(\"span\", { staticClass: \"label\" }, [\n _vm._v(_vm._s(_vm.$t(\"materio.Samples\")))\n ]),\n _vm._v(\" \"),\n _c(\n \"ul\",\n _vm._l(_vm.item.samples, function(sample) {\n return _c(\"li\", { key: sample.showroom.id }, [\n _c(\"span\", { staticClass: \"showroom\" }, [\n _vm._v(_vm._s(sample.showroom.name))\n ]),\n _vm._v(\": \" + _vm._s(sample.location) + \"\\n \")\n ])\n }),\n 0\n )\n ])\n ])\n : _vm._e(),\n _vm._v(\" \"),\n _vm.item.note\n ? _c(\"section\", { staticClass: \"tool note\" }, [\n _c(\"span\", { staticClass: \"btn mdi mdi-note\" })\n ])\n : _vm._e(),\n _vm._v(\" \"),\n _c(\"section\", { staticClass: \"tool print\" }, [\n _c(\n \"a\",\n {\n attrs: {\n href: _vm.item.path + \"/printable/print\",\n target: \"_blank\"\n }\n },\n [_c(\"span\", { staticClass: \"btn mdi mdi-printer\" })]\n )\n ])\n ])\n : _vm._e(),\n _vm._v(\" \"),\n _c(\n \"section\",\n {\n directives: [{ name: \"switcher\", rawName: \"v-switcher\" }],\n staticClass: \"images\"\n },\n _vm._l(_vm.item.images, function(img, index) {\n return _c(\"figure\", { key: img.url }, [\n _c(\"img\", {\n directives: [\n {\n name: \"lazy\",\n rawName: \"v-lazy\",\n value: index,\n expression: \"index\"\n }\n ],\n staticClass: \"lazy\",\n attrs: { \"data-src\": img.style_cardmedium_url, title: img.title }\n }),\n _vm._v(\" \"),\n _c(\"img\", {\n staticClass: \"blank\",\n attrs: { src: _vm.blanksrc },\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.openModalCard($event)\n }\n }\n })\n ])\n }),\n 0\n )\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Content/Card.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options"); /***/ }), diff --git a/web/themes/custom/materiotheme/assets/styles/main.scss b/web/themes/custom/materiotheme/assets/styles/main.scss index 10746ca..078a700 100644 --- a/web/themes/custom/materiotheme/assets/styles/main.scss +++ b/web/themes/custom/materiotheme/assets/styles/main.scss @@ -1238,7 +1238,7 @@ article.card{ border: none; --vsa-heading-padding: 0 0; --vsa-content-padding: 0 0 0.5em; - --vsa-default-icon-size: 0.2; + --vsa-default-icon-size: 0.3; --vsa-border-width: 0; --vsa-text-color: #{$color-main-text}; --vsa-highlight-color: #fff; @@ -1257,15 +1257,17 @@ article.card{ } } } - .vsa-item__heading{ - padding-bottom: 0.2em; - >button{ + .vsa-item__content{} + + &[data-vsa-active="false"]{ + .vsa-item__heading{ + padding-bottom: 0.2em; + margin-bottom: 0.2em; border-bottom: 0.5px dotted $color-main-text; } - } - .vsa-item__content{ } + } } section.linked-materials{ diff --git a/web/themes/custom/materiotheme/vuejs/api/gql/searchresults.fragment.gql b/web/themes/custom/materiotheme/vuejs/api/gql/searchresults.fragment.gql index c32d0f7..37ec12b 100644 --- a/web/themes/custom/materiotheme/vuejs/api/gql/searchresults.fragment.gql +++ b/web/themes/custom/materiotheme/vuejs/api/gql/searchresults.fragment.gql @@ -20,6 +20,10 @@ fragment SearchResultFields on SearchResultInterface { } location } + note{ + id + } + note_id } ... on Thematique { images{ diff --git a/web/themes/custom/materiotheme/vuejs/components/Content/Card.vue b/web/themes/custom/materiotheme/vuejs/components/Content/Card.vue index f4b8c06..f2eb1b3 100644 --- a/web/themes/custom/materiotheme/vuejs/components/Content/Card.vue +++ b/web/themes/custom/materiotheme/vuejs/components/Content/Card.vue @@ -53,6 +53,9 @@ +
+ +
diff --git a/web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue b/web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue index c573077..288c107 100644 --- a/web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue +++ b/web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue @@ -335,6 +335,7 @@ export default { }, methods: { ...mapActions({ + refreshItem: 'Search/refreshItem', createFlagColl: 'User/createFlagColl', flagUnflag: 'User/flagUnflag' }), @@ -465,6 +466,9 @@ export default { .then(({ data }) => { console.log('createNote REST data', data) this.note_nid = data.nid[0].value + // call search results refresh of the item to display that note is now existing for this item + // TODO: do the same for article linked materials + this.refreshItem({id: this.item.id}) }) .catch(error => { console.warn('Issue with createNote', error) diff --git a/web/themes/custom/materiotheme/vuejs/store/modules/search.js b/web/themes/custom/materiotheme/vuejs/store/modules/search.js index 1470595..a556e15 100644 --- a/web/themes/custom/materiotheme/vuejs/store/modules/search.js +++ b/web/themes/custom/materiotheme/vuejs/store/modules/search.js @@ -3,6 +3,7 @@ import { MA } from 'vuejs/api/ma-axios' import qs from 'querystring-es3' +import Vue from 'vue' import { MGQ } from 'vuejs/api/graphql-axios' import { print } from 'graphql/language/printer' @@ -46,6 +47,14 @@ export default { } // console.log('setResults, state.items', state.items); }, + updateItem (state, item) { + // state.items[data.index] = data.item // this is not triggering vuejs refresh + // find the right index + const index = state.items.findIndex(i => i.id === item.id) + // update the array + Vue.set(state.items, index, item) + // console.log("mutation updateItem state.items", state.items) + }, resetItems (state) { state.items = [] }, @@ -166,6 +175,26 @@ export default { state.infiniteLoadingState.loaded() } } + }, + refreshItem({ commit, state }, { id }) { + console.log("Search refreshItem: id", id); + let ast = gql`{ + searchresult(id: ${id}, lang: "${drupalDecoupled.lang_code}") { + ...SearchResultFields + } + } + ${ searchresultGQL } + ` + MGQ.post('', { query: print(ast) }) + .then(resp => { + console.log('refreshItem searchresult resp', resp ) + // dispatch("loadSearchResultsCallBack", { items: resp.data.data.searchresults}) + commit("updateItem", resp.data.data.searchresult) + }) + .catch(error => { + console.warn('Issue with refreshItem', error) + Promise.reject(error) + }) } } }