From e29bed914c473a4db4453e16ba0119357a89bd12 Mon Sep 17 00:00:00 2001 From: bach Date: Tue, 9 Mar 2021 14:53:22 +0100 Subject: [PATCH] modalcard accordeon improved --- .../custom/materiotheme/assets/dist/main.css | 4 + .../custom/materiotheme/assets/dist/main.js | 4 +- .../materiotheme/assets/styles/main.scss | 6 ++ .../vuejs/components/Content/ModalCard.vue | 101 ++++++++++++++++-- 4 files changed, 103 insertions(+), 12 deletions(-) diff --git a/web/themes/custom/materiotheme/assets/dist/main.css b/web/themes/custom/materiotheme/assets/dist/main.css index 44429e11..1c267c42 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.css +++ b/web/themes/custom/materiotheme/assets/dist/main.css @@ -2060,6 +2060,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 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 7592cce7..b0273081 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 loadingFlag: false,\n lightbox_index: null,\n note: \"\",\n note_nid: null\n };\n },\n computed: _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 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 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 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 _this2 = 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 _this2.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 _this3 = 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 _this3.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 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"); /***/ }), @@ -3548,7 +3548,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 !_vm.material || _vm.loading\n ? _c(\"div\", { staticClass: \"loading\" }, [\n _c(\"span\", [_vm._v(\"Loading ...\")])\n ])\n : _c(\n \"article\",\n { staticClass: \"card modal-card\" },\n [\n _c(\n \"section\",\n { staticClass: \"col col-right\" },\n [\n _c(\"header\", [\n _c(\"h1\", [_vm._v(_vm._s(_vm.material.title))]),\n _vm._v(\" \"),\n _c(\"h4\", [_vm._v(_vm._s(_vm.material.short_description))]),\n _vm._v(\" \"),\n _c(\"span\", { staticClass: \"ref\" }, [\n _vm._v(_vm._s(_vm.material.reference))\n ])\n ]),\n _vm._v(\" \"),\n _c(\"nav\", { staticClass: \"tools\" }, [\n _c(\"section\", { staticClass: \"tool close\" }, [\n _c(\"span\", {\n staticClass: \"btn mdi mdi-close\",\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.onCloseModalCard($event)\n }\n }\n })\n ]),\n _vm._v(\" \"),\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(\"span\", { staticClass: \"label\" }, [\n _vm._v(_vm._s(_vm.$t(\"materio.My folders\")))\n ]),\n _vm._v(\" \"),\n _c(\n \"ul\",\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 0\n )\n ])\n ]),\n _vm._v(\" \"),\n _c(\"section\", { staticClass: \"tool note\" }, [\n _c(\"span\", {\n staticClass: \"btn mdi mdi-square-edit-outline\"\n }),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"tool-content\" }, [\n _c(\"textarea\", {\n directives: [\n {\n name: \"model\",\n rawName: \"v-model\",\n value: _vm.note,\n expression: \"note\"\n }\n ],\n attrs: { spellcheck: \"false\", name: \"note\" },\n domProps: { value: _vm.note },\n on: {\n input: function($event) {\n if ($event.target.composing) {\n return\n }\n _vm.note = $event.target.value\n }\n }\n })\n ])\n ]),\n _vm._v(\" \"),\n _c(\"section\", { staticClass: \"tool print\" }, [\n _c(\n \"a\",\n {\n attrs: {\n href: _vm.material.path + \"/printable/print\",\n target: \"_blank\"\n }\n },\n [_c(\"span\", { staticClass: \"btn mdi mdi-printer\" })]\n )\n ])\n ]),\n _vm._v(\" \"),\n _c(\n \"vsa-list\",\n [\n _c(\n \"vsa-item\",\n { attrs: { initActive: true } },\n [\n _c(\"vsa-heading\", [\n _c(\"span\", { staticClass: \"label\" }, [\n _vm._v(\"Description\")\n ])\n ]),\n _vm._v(\" \"),\n _c(\"vsa-content\", [\n _c(\"section\", {\n staticClass: \"body\",\n domProps: { innerHTML: _vm._s(_vm.material.body) }\n })\n ])\n ],\n 1\n ),\n _vm._v(\" \"),\n _vm.item.samples && _vm.item.samples.length\n ? _c(\n \"vsa-item\",\n [\n _c(\"vsa-heading\", [\n _c(\"span\", { staticClass: \"label\" }, [\n _vm._v(_vm._s(_vm.$t(\"materio.Samples\")))\n ])\n ]),\n _vm._v(\" \"),\n _c(\"vsa-content\", [\n _c(\"section\", { staticClass: \"samples\" }, [\n _c(\n \"ul\",\n _vm._l(_vm.material.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(\n \": \" +\n _vm._s(sample.location) +\n \"\\n \"\n )\n ])\n }),\n 0\n )\n ])\n ])\n ],\n 1\n )\n : _vm._e(),\n _vm._v(\" \"),\n _vm.material.linked_materials\n ? _c(\n \"vsa-item\",\n [\n _c(\"vsa-heading\", [\n _c(\"span\", { staticClass: \"label\" }, [\n _vm._v(_vm._s(_vm.$t(\"materio.Linked materials\")))\n ])\n ]),\n _vm._v(\" \"),\n _c(\"vsa-content\", [\n _c(\"section\", { staticClass: \"linked-materials\" }, [\n _c(\n \"ul\",\n _vm._l(_vm.material.linked_materials, function(\n m\n ) {\n return _c(\n \"li\",\n { key: m.id },\n [\n _c(\"LinkedMaterialCard\", {\n attrs: { item: m }\n })\n ],\n 1\n )\n }),\n 0\n )\n ])\n ])\n ],\n 1\n )\n : _vm._e(),\n _vm._v(\" \"),\n _vm.material.manufacturer || _vm.material.distributor\n ? _c(\n \"vsa-item\",\n [\n _c(\"vsa-heading\", [\n _c(\"span\", { staticClass: \"label\" }, [\n _vm._v(_vm._s(_vm.$t(\"default.Contact\")))\n ])\n ]),\n _vm._v(\" \"),\n _c(\"vsa-content\", [\n _c(\"section\", { staticClass: \"industriels\" }, [\n _vm.material.manufacturer\n ? _c(\"section\", [\n _c(\"span\", { staticClass: \"label\" }, [\n _vm._v(\n _vm._s(_vm.$t(\"materio.Manufacturer\"))\n )\n ]),\n _vm._v(\" \"),\n _c(\n \"ul\",\n _vm._l(\n _vm.material.manufacturer,\n function(manu) {\n return _c(\"li\", { key: manu.id }, [\n _c(\"h2\", [\n _vm._v(_vm._s(manu.name))\n ]),\n _vm._v(\" \"),\n manu.website\n ? _c(\"p\", [\n _c(\n \"a\",\n {\n attrs: {\n target: \"_blank\",\n href: manu.website.url\n }\n },\n [\n _vm._v(\n _vm._s(\n _vm.shortUrl(\n manu.website.url\n )\n )\n )\n ]\n )\n ])\n : _vm._e(),\n _vm._v(\" \"),\n manu.email\n ? _c(\"p\", [\n _c(\n \"a\",\n {\n attrs: {\n href:\n \"mailto:\" + manu.email\n }\n },\n [_vm._v(_vm._s(manu.email))]\n )\n ])\n : _vm._e()\n ])\n }\n ),\n 0\n )\n ])\n : _vm._e(),\n _vm._v(\" \"),\n _vm.material.distributor\n ? _c(\"section\", [\n _c(\"span\", { staticClass: \"label\" }, [\n _vm._v(\n _vm._s(_vm.$t(\"materio.Distributor\"))\n )\n ]),\n _vm._v(\" \"),\n _c(\n \"ul\",\n _vm._l(_vm.material.distributor, function(\n distrib\n ) {\n return _c(\"li\", { key: distrib.id }, [\n _c(\"h2\", [\n _vm._v(_vm._s(distrib.name))\n ]),\n _vm._v(\" \"),\n distrib.website\n ? _c(\"p\", [\n _c(\n \"a\",\n {\n attrs: {\n target: \"_blank\",\n href: distrib.website.url\n }\n },\n [\n _vm._v(\n _vm._s(\n _vm.shortUrl(\n distrib.website.url\n )\n )\n )\n ]\n )\n ])\n : _vm._e(),\n _vm._v(\" \"),\n distrib.email\n ? _c(\"p\", [\n _c(\n \"a\",\n {\n attrs: {\n href:\n \"mailto:\" +\n distrib.email\n }\n },\n [\n _vm._v(\n _vm._s(distrib.email)\n )\n ]\n )\n ])\n : _vm._e()\n ])\n }),\n 0\n )\n ])\n : _vm._e()\n ])\n ])\n ],\n 1\n )\n : _vm._e(),\n _vm._v(\" \"),\n _vm.material.attachments && _vm.material.attachments.length\n ? _c(\n \"vsa-item\",\n [\n _c(\"vsa-heading\", [\n _c(\"span\", { staticClass: \"label\" }, [\n _vm._v(_vm._s(_vm.$t(\"materio.Attachments\")))\n ])\n ]),\n _vm._v(\" \"),\n _c(\"vsa-content\", [\n _c(\"section\", { staticClass: \"attachments\" }, [\n _c(\n \"ul\",\n _vm._l(_vm.material.attachments, function(\n attachmt\n ) {\n return _c(\"li\", { key: attachmt.file.fid }, [\n _c(\n \"a\",\n {\n attrs: {\n target: \"_blank\",\n href: attachmt.file.url\n }\n },\n [\n _vm._v(\n _vm._s(attachmt.file.filename) + \" \"\n ),\n _c(\"span\", [\n _vm._v(\n \"(\" +\n _vm._s(\n _vm.prettyFileSize(\n attachmt.file.filesize\n )\n ) +\n \")\"\n )\n ])\n ]\n ),\n _vm._v(\" \"),\n attachmt.description\n ? _c(\"p\", {\n staticClass: \"description\",\n domProps: {\n innerHTML: _vm._s(\n attachmt.description\n )\n }\n })\n : _vm._e()\n ])\n }),\n 0\n )\n ])\n ])\n ],\n 1\n )\n : _vm._e()\n ],\n 1\n )\n ],\n 1\n ),\n _vm._v(\" \"),\n _c(\n \"section\",\n {\n directives: [{ name: \"switcher\", rawName: \"v-switcher\" }],\n staticClass: \"col col-left images\"\n },\n _vm._l(_vm.material.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: {\n \"data-src\": img.style_cardfull.url,\n title: img.title\n }\n }),\n _vm._v(\" \"),\n _c(\"img\", {\n staticClass: \"blank\",\n attrs: { src: _vm.blanksrc },\n on: {\n click: function($event) {\n _vm.lightbox_index = index\n }\n }\n })\n ])\n }),\n 0\n ),\n _vm._v(\" \"),\n _c(\"CoolLightBox\", {\n attrs: {\n items: _vm.material.images,\n index: _vm.lightbox_index,\n srcName: \"url\",\n loop: true\n },\n on: {\n close: function($event) {\n _vm.lightbox_index = null\n }\n }\n })\n ],\n 1\n )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.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 !_vm.material || _vm.loading\n ? _c(\"div\", { staticClass: \"loading\" }, [\n _c(\"span\", [_vm._v(\"Loading ...\")])\n ])\n : _c(\n \"article\",\n { staticClass: \"card modal-card\" },\n [\n _c(\n \"section\",\n { staticClass: \"col col-right\" },\n [\n _c(\"header\", [\n _c(\"h1\", [_vm._v(_vm._s(_vm.material.title))]),\n _vm._v(\" \"),\n _c(\"h4\", [_vm._v(_vm._s(_vm.material.short_description))]),\n _vm._v(\" \"),\n _c(\"span\", { staticClass: \"ref\" }, [\n _vm._v(_vm._s(_vm.material.reference))\n ])\n ]),\n _vm._v(\" \"),\n _c(\"nav\", { staticClass: \"tools\" }, [\n _c(\"section\", { staticClass: \"tool close\" }, [\n _c(\"span\", {\n staticClass: \"btn mdi mdi-close\",\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.onCloseModalCard($event)\n }\n }\n })\n ]),\n _vm._v(\" \"),\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(\"span\", { staticClass: \"label\" }, [\n _vm._v(_vm._s(_vm.$t(\"materio.My folders\")))\n ]),\n _vm._v(\" \"),\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(\n \": \" +\n _vm._s(sample.location) +\n \"\\n \"\n )\n ])\n }),\n 0\n )\n ])\n ])\n : _vm._e(),\n _vm._v(\" \"),\n _c(\"section\", { staticClass: \"tool note\" }, [\n _c(\"span\", {\n staticClass: \"btn mdi mdi-square-edit-outline\"\n }),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"tool-content\" }, [\n _c(\"textarea\", {\n directives: [\n {\n name: \"model\",\n rawName: \"v-model\",\n value: _vm.note,\n expression: \"note\"\n }\n ],\n attrs: { spellcheck: \"false\", name: \"note\" },\n domProps: { value: _vm.note },\n on: {\n input: function($event) {\n if ($event.target.composing) {\n return\n }\n _vm.note = $event.target.value\n }\n }\n })\n ])\n ]),\n _vm._v(\" \"),\n _c(\"section\", { staticClass: \"tool print\" }, [\n _c(\n \"a\",\n {\n attrs: {\n href: _vm.material.path + \"/printable/print\",\n target: \"_blank\"\n }\n },\n [_c(\"span\", { staticClass: \"btn mdi mdi-printer\" })]\n )\n ])\n ]),\n _vm._v(\" \"),\n _c(\n \"vsa-list\",\n [\n _c(\n \"vsa-item\",\n { attrs: { initActive: true } },\n [\n _c(\"vsa-heading\", [\n _c(\"span\", { staticClass: \"label\" }, [\n _vm._v(\"Description\")\n ])\n ]),\n _vm._v(\" \"),\n _c(\"vsa-content\", [\n _c(\"section\", {\n staticClass: \"body\",\n domProps: { innerHTML: _vm._s(_vm.material.body) }\n }),\n _vm._v(\" \"),\n _c(\"section\", { staticClass: \"attachments\" }, [\n _c(\n \"ul\",\n _vm._l(_vm.material.attachments, function(\n attachmt\n ) {\n return _c(\"li\", { key: attachmt.file.fid }, [\n _c(\n \"a\",\n {\n attrs: {\n target: \"_blank\",\n href: attachmt.file.url\n }\n },\n [\n _vm._v(\n _vm._s(attachmt.file.filename) + \" \"\n ),\n _c(\"span\", [\n _vm._v(\n \"(\" +\n _vm._s(\n _vm.prettyFileSize(\n attachmt.file.filesize\n )\n ) +\n \")\"\n )\n ])\n ]\n ),\n _vm._v(\" \"),\n attachmt.description\n ? _c(\"p\", {\n staticClass: \"description\",\n domProps: {\n innerHTML: _vm._s(attachmt.description)\n }\n })\n : _vm._e()\n ])\n }),\n 0\n )\n ]),\n _vm._v(\" \"),\n _c(\"section\", { staticClass: \"industriels\" }, [\n _vm.material.manufacturer\n ? _c(\"section\", [\n _c(\"span\", { staticClass: \"label\" }, [\n _vm._v(_vm._s(_vm.$t(\"materio.Manufacturer\")))\n ]),\n _vm._v(\" \"),\n _c(\n \"ul\",\n _vm._l(_vm.material.manufacturer, function(\n manu\n ) {\n return _c(\"li\", { key: manu.id }, [\n _c(\"h2\", [_vm._v(_vm._s(manu.name))]),\n _vm._v(\" \"),\n manu.website\n ? _c(\"p\", [\n _c(\n \"a\",\n {\n attrs: {\n target: \"_blank\",\n href: manu.website.url\n }\n },\n [\n _vm._v(\n _vm._s(\n _vm.shortUrl(\n manu.website.url\n )\n )\n )\n ]\n )\n ])\n : _vm._e(),\n _vm._v(\" \"),\n manu.email\n ? _c(\"p\", [\n _c(\n \"a\",\n {\n attrs: {\n href: \"mailto:\" + manu.email\n }\n },\n [_vm._v(_vm._s(manu.email))]\n )\n ])\n : _vm._e()\n ])\n }),\n 0\n )\n ])\n : _vm._e(),\n _vm._v(\" \"),\n _vm.material.distributor\n ? _c(\"section\", [\n _c(\"span\", { staticClass: \"label\" }, [\n _vm._v(_vm._s(_vm.$t(\"materio.Distributor\")))\n ]),\n _vm._v(\" \"),\n _c(\n \"ul\",\n _vm._l(_vm.material.distributor, function(\n distrib\n ) {\n return _c(\"li\", { key: distrib.id }, [\n _c(\"h2\", [_vm._v(_vm._s(distrib.name))]),\n _vm._v(\" \"),\n distrib.website\n ? _c(\"p\", [\n _c(\n \"a\",\n {\n attrs: {\n target: \"_blank\",\n href: distrib.website.url\n }\n },\n [\n _vm._v(\n _vm._s(\n _vm.shortUrl(\n distrib.website.url\n )\n )\n )\n ]\n )\n ])\n : _vm._e(),\n _vm._v(\" \"),\n distrib.email\n ? _c(\"p\", [\n _c(\n \"a\",\n {\n attrs: {\n href:\n \"mailto:\" + distrib.email\n }\n },\n [_vm._v(_vm._s(distrib.email))]\n )\n ])\n : _vm._e()\n ])\n }),\n 0\n )\n ])\n : _vm._e()\n ])\n ])\n ],\n 1\n ),\n _vm._v(\" \"),\n _vm.material.linked_materials\n ? _c(\n \"vsa-item\",\n [\n _c(\"vsa-heading\", [\n _c(\"span\", { staticClass: \"label\" }, [\n _vm._v(_vm._s(_vm.$t(\"materio.Linked materials\")))\n ])\n ]),\n _vm._v(\" \"),\n _c(\"vsa-content\", [\n _c(\"section\", { staticClass: \"linked-materials\" }, [\n _c(\n \"ul\",\n _vm._l(_vm.material.linked_materials, function(\n m\n ) {\n return _c(\n \"li\",\n { key: m.id },\n [\n _c(\"LinkedMaterialCard\", {\n attrs: { item: m }\n })\n ],\n 1\n )\n }),\n 0\n )\n ])\n ])\n ],\n 1\n )\n : _vm._e()\n ],\n 1\n )\n ],\n 1\n ),\n _vm._v(\" \"),\n _c(\n \"section\",\n {\n directives: [{ name: \"switcher\", rawName: \"v-switcher\" }],\n staticClass: \"col col-left images\"\n },\n _vm._l(_vm.material.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: {\n \"data-src\": img.style_cardfull.url,\n title: img.title\n }\n }),\n _vm._v(\" \"),\n _c(\"img\", {\n staticClass: \"blank\",\n attrs: { src: _vm.blanksrc },\n on: {\n click: function($event) {\n _vm.lightbox_index = index\n }\n }\n })\n ])\n }),\n 0\n ),\n _vm._v(\" \"),\n _c(\"CoolLightBox\", {\n attrs: {\n items: _vm.material.images,\n index: _vm.lightbox_index,\n srcName: \"url\",\n loop: true\n },\n on: {\n close: function($event) {\n _vm.lightbox_index = null\n }\n }\n })\n ],\n 1\n )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.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 2b0fcec6..ecb1eb0f 100644 --- a/web/themes/custom/materiotheme/assets/styles/main.scss +++ b/web/themes/custom/materiotheme/assets/styles/main.scss @@ -1248,6 +1248,12 @@ article.card{ } } } + .vsa-item__heading{ + padding-bottom: 0.2em; + >button{ + border-bottom: 0.5px dotted $color-main-text; + } + } .vsa-item__content{ } diff --git a/web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue b/web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue index 3363f09a..f324d47b 100644 --- a/web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue +++ b/web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue @@ -33,23 +33,35 @@ {{ coll.name }} +
  • + + +
    • - +
    @@ -98,10 +110,48 @@
    +
    + + +
    +
    + +
    + {{ $t("materio.Manufacturer") }} + +
    +
    + {{ $t("materio.Distributor") }} + +
    +
    - + @@ -134,7 +184,7 @@ - + - +
    @@ -244,6 +294,8 @@ export default { material: null, loading: false, blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`, + new_folder_name: "", + is_creating_folder: false, loadingFlag: false, lightbox_index: null, note: "", @@ -255,7 +307,18 @@ export default { csrf_token: state => state.User.csrf_token, flagcolls: state => state.User.flagcolls, showrooms: state => state.Showrooms.showrooms_by_tid - }) + }), + collsLength() { + return Object.keys(this.flagcolls).length + }, + addFlagBtnClassObj() { + return { + 'mdi-plus-circle-outline': !this.is_creating_folder, + 'mdi-loading': this.is_creating_folder, + active: this.new_folder_name.length > 4 && !this.is_creating_folder, + loading: this.is_creating_folder + } + } }, created () { console.log('modale item', this.item) @@ -271,6 +334,7 @@ export default { }, methods: { ...mapActions({ + createFlagColl: 'User/createFlagColl', flagUnflag: 'User/flagUnflag' }), loadMaterial(){ @@ -304,6 +368,23 @@ export default { Promise.reject(error) }) }, + onCreateFlagColl () { + console.log("Card onCreateFlagColl", this.new_folder_name) + this.is_creating_folder = true; + this.createFlagColl(this.new_folder_name) + .then(data => { + console.log("Card onCreateFlagColl then", data); + this.new_folder_name = ""; + this.is_creating_folder = false; + let collid = data.id + this.loadingFlag = collid; + this.flagUnflag({ action: 'flag', id: this.item.id, collid: collid}) + .then(data => { + console.log("onFlagActionCard then", data); + this.loadingFlag = false; + }) + }) + }, flagIsActive(collid) { // console.log(this.item.uuid); // console.log(this.flagcolls[collid].items_uuids);