{"version":3,"sources":["webpack:///./src/pages/messages/Messages.vue?5f6f","webpack:///src/pages/messages/Messages.vue","webpack:///./src/pages/messages/Messages.vue?1d51","webpack:///./src/pages/messages/Messages.vue","webpack:///./src/pages/messages/Messages.vue?f22a"],"names":["render","_vm","this","_h","$createElement","_c","_self","attrs","padding","staticClass","color","text-color","underline-color","align","slot","default","name","label","$t","icon","style","getStyle","float-label","debounce","model","value","search","callback","$$v","expression","$q","platform","is","mobile","staticStyle","height","highlight","separator","sparse","no-border","messages","length","link","_e","_l","filteredMessages","message","index","key","class","id","nativeOn","click","$event","fetchMessage","title","sublabel","fDate","send_date","desktop","domProps","innerHTML","_s","body","visible","loading","size","content-css","minWidth","getMinWidth","maxWidth","getMaxWidth","minHeight","no-backdrop-dismiss","no-esc-dismiss","show_message","flat","round","dense","on","closeMessage","_v","staticRenderFns","_withStripped","Messagesvue_type_script_lang_js_","date","getDateDiff","formatDate","i18nOptions","namespaces","data","computed","objectSpread_default","Object","vuex_esm","access_token","getHeader","headers","defineProperty_default","content-type","authorization","btoa","_this","filter","e","toUpperCase","includes","methods","fetchData","_this2","show","$axios","get","then","response","hide","catch","console","log","_this3","message_id","concat","d","created","messages_Messagesvue_type_script_lang_js_","component","componentNormalizer","options","__file","__webpack_exports__","_node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_2_0_node_modules_css_loader_index_js_ref_6_oneOf_2_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_2_2_node_modules_stylus_loader_index_js_ref_6_oneOf_2_3_node_modules_vue_loader_lib_index_js_vue_loader_options_Messages_vue_vue_type_style_index_0_id_14131f0e_lang_stylus_scoped_true___WEBPACK_IMPORTED_MODULE_0__","__webpack_require__","_node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_2_0_node_modules_css_loader_index_js_ref_6_oneOf_2_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_2_2_node_modules_stylus_loader_index_js_ref_6_oneOf_2_3_node_modules_vue_loader_lib_index_js_vue_loader_options_Messages_vue_vue_type_style_index_0_id_14131f0e_lang_stylus_scoped_true___WEBPACK_IMPORTED_MODULE_0___default","n"],"mappings":"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","file":"js/401f5631.10366e74.js","sourcesContent":["var render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\n    \"q-page\",\n    { attrs: { padding: \"\" } },\n    [\n      _c(\n        \"q-tabs\",\n        {\n          staticClass: \"shadow-1 bg-white\",\n          attrs: {\n            color: \"white\",\n            \"text-color\": \"primary\",\n            \"underline-color\": \"primary\",\n            align: \"justify\"\n          }\n        },\n        [\n          _c(\"q-tab\", {\n            attrs: {\n              slot: \"title\",\n              default: \"\",\n              name: \"feed\",\n              label: _vm.$t(\"messages\"),\n              icon: \"fal fa-envelope\"\n            },\n            slot: \"title\"\n          }),\n          _c(\"q-tab-pane\", { style: _vm.getStyle, attrs: { name: \"feed\" } }, [\n            _c(\"div\", { staticClass: \"row q-mb-sm\" }, [\n              _c(\n                \"div\",\n                { staticClass: \"col-12\" },\n                [\n                  _c(\"q-search\", {\n                    attrs: { \"float-label\": _vm.$t(\"search\"), debounce: 500 },\n                    model: {\n                      value: _vm.search,\n                      callback: function($$v) {\n                        _vm.search = $$v\n                      },\n                      expression: \"search\"\n                    }\n                  })\n                ],\n                1\n              )\n            ]),\n            _vm.$q.platform.is.mobile\n              ? _c(\"div\", { staticClass: \"row\" }, [\n                  _c(\n                    \"div\",\n                    { staticClass: \"col-xs-12\" },\n                    [\n                      _c(\n                        \"q-card\",\n                        { staticStyle: { height: \"70vh\" } },\n                        [\n                          _c(\n                            \"q-card-main\",\n                            [\n                              _c(\n                                \"q-scroll-area\",\n                                { staticStyle: { height: \"60vh\" } },\n                                [\n                                  _c(\n                                    \"q-list\",\n                                    {\n                                      attrs: {\n                                        highlight: \"\",\n                                        separator: \"\",\n                                        sparse: \"\",\n                                        \"no-border\": \"\"\n                                      }\n                                    },\n                                    [\n                                      _vm.messages.length === 0\n                                        ? _c(\n                                            \"q-item\",\n                                            { attrs: { link: \"\" } },\n                                            [\n                                              _c(\"q-item-main\", {\n                                                attrs: {\n                                                  label: _vm.$t(\n                                                    \"no_messages_found\"\n                                                  )\n                                                }\n                                              })\n                                            ],\n                                            1\n                                          )\n                                        : _vm._e(),\n                                      _vm._l(_vm.filteredMessages, function(\n                                        message,\n                                        index\n                                      ) {\n                                        return _c(\n                                          \"q-item\",\n                                          {\n                                            key: index,\n                                            class:\n                                              _vm.id === message.id\n                                                ? \"selected\"\n                                                : \"\",\n                                            attrs: { link: \"\" },\n                                            nativeOn: {\n                                              click: function($event) {\n                                                return _vm.fetchMessage(message)\n                                              }\n                                            }\n                                          },\n                                          [\n                                            _c(\"q-item-main\", {\n                                              attrs: {\n                                                label: message.title,\n                                                sublabel: _vm.fDate(\n                                                  message.send_date\n                                                )\n                                              }\n                                            })\n                                          ],\n                                          1\n                                        )\n                                      })\n                                    ],\n                                    2\n                                  )\n                                ],\n                                1\n                              )\n                            ],\n                            1\n                          )\n                        ],\n                        1\n                      )\n                    ],\n                    1\n                  )\n                ])\n              : _vm._e(),\n            _vm.$q.platform.is.desktop\n              ? _c(\"div\", { staticClass: \"row gutter-xs full-height\" }, [\n                  _c(\n                    \"div\",\n                    { staticClass: \"col-sm-4\" },\n                    [\n                      _c(\n                        \"q-card\",\n                        { staticClass: \"full-height\" },\n                        [\n                          _c(\n                            \"q-card-main\",\n                            { staticClass: \"full-height\" },\n                            [\n                              _c(\n                                \"q-scroll-area\",\n                                { staticClass: \"full-height\" },\n                                [\n                                  _c(\n                                    \"q-list\",\n                                    {\n                                      attrs: {\n                                        highlight: \"\",\n                                        separator: \"\",\n                                        sparse: \"\",\n                                        \"no-border\": \"\"\n                                      }\n                                    },\n                                    [\n                                      _vm.messages.length === 0\n                                        ? _c(\n                                            \"q-item\",\n                                            { attrs: { link: \"\" } },\n                                            [\n                                              _c(\"q-item-main\", {\n                                                attrs: {\n                                                  label: _vm.$t(\n                                                    \"no_messages_found\"\n                                                  )\n                                                }\n                                              })\n                                            ],\n                                            1\n                                          )\n                                        : _vm._e(),\n                                      _vm._l(_vm.filteredMessages, function(\n                                        message,\n                                        index\n                                      ) {\n                                        return _c(\n                                          \"q-item\",\n                                          {\n                                            key: index,\n                                            class:\n                                              _vm.id === message.id\n                                                ? \"selected\"\n                                                : \"\",\n                                            attrs: { link: \"\" },\n                                            nativeOn: {\n                                              click: function($event) {\n                                                return _vm.fetchMessage(message)\n                                              }\n                                            }\n                                          },\n                                          [\n                                            _c(\"q-item-main\", {\n                                              attrs: {\n                                                label: message.title,\n                                                sublabel: _vm.fDate(\n                                                  message.send_date\n                                                )\n                                              }\n                                            })\n                                          ],\n                                          1\n                                        )\n                                      })\n                                    ],\n                                    2\n                                  )\n                                ],\n                                1\n                              )\n                            ],\n                            1\n                          )\n                        ],\n                        1\n                      )\n                    ],\n                    1\n                  ),\n                  _c(\n                    \"div\",\n                    { staticClass: \"col-sm-8\" },\n                    [\n                      _c(\n                        \"q-card\",\n                        { staticClass: \"full-height relative-position\" },\n                        [\n                          _c(\n                            \"q-card-main\",\n                            { staticClass: \"full-height\" },\n                            [\n                              _c(\n                                \"q-scroll-area\",\n                                { staticClass: \"full-height q-pa-xl\" },\n                                [\n                                  _c(\"span\", {\n                                    domProps: { innerHTML: _vm._s(_vm.body) }\n                                  })\n                                ]\n                              )\n                            ],\n                            1\n                          ),\n                          _c(\n                            \"q-inner-loading\",\n                            { attrs: { visible: _vm.loading } },\n                            [\n                              _c(\"q-spinner-dots\", {\n                                attrs: { size: 60, color: \"secondary\" }\n                              })\n                            ],\n                            1\n                          )\n                        ],\n                        1\n                      )\n                    ],\n                    1\n                  )\n                ])\n              : _vm._e()\n          ])\n        ],\n        1\n      ),\n      _c(\n        \"q-modal\",\n        {\n          attrs: {\n            \"content-css\": {\n              minWidth: _vm.getMinWidth,\n              maxWidth: _vm.getMaxWidth,\n              minHeight: \"80vh\"\n            },\n            \"no-backdrop-dismiss\": \"\",\n            \"no-esc-dismiss\": \"\"\n          },\n          model: {\n            value: _vm.show_message,\n            callback: function($$v) {\n              _vm.show_message = $$v\n            },\n            expression: \"show_message\"\n          }\n        },\n        [\n          _c(\n            \"q-modal-layout\",\n            [\n              _c(\n                \"q-toolbar\",\n                { attrs: { slot: \"header\" }, slot: \"header\" },\n                [\n                  _c(\"q-btn\", {\n                    attrs: {\n                      flat: \"\",\n                      round: \"\",\n                      dense: \"\",\n                      icon: \"fas fa-times\"\n                    },\n                    on: {\n                      click: function($event) {\n                        return _vm.closeMessage()\n                      }\n                    }\n                  }),\n                  _c(\"q-toolbar-title\", [\n                    _vm._v(\n                      \"\\n                    \" +\n                        _vm._s(_vm.title) +\n                        \"\\n                \"\n                    )\n                  ])\n                ],\n                1\n              ),\n              _c(\n                \"div\",\n                { staticClass: \"layout-padding relative-position\" },\n                [\n                  _c(\"div\", { staticClass: \"row\" }, [\n                    _c(\"div\", { staticClass: \"col-12\" }, [\n                      _c(\"span\", { domProps: { innerHTML: _vm._s(_vm.body) } })\n                    ])\n                  ]),\n                  _c(\n                    \"q-inner-loading\",\n                    { attrs: { visible: _vm.loading } },\n                    [\n                      _c(\"q-spinner-dots\", {\n                        attrs: { size: 60, color: \"secondary\" }\n                      })\n                    ],\n                    1\n                  )\n                ],\n                1\n              )\n            ],\n            1\n          )\n        ],\n        1\n      )\n    ],\n    1\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }","<template>\n    <q-page padding>\n        <q-tabs color=\"white\" text-color=\"primary\" underline-color=\"primary\" class=\"shadow-1 bg-white\" align=\"justify\">\n            <q-tab default slot=\"title\" name=\"feed\" :label=\"$t('messages')\" icon=\"fal fa-envelope\" />\n\n            <q-tab-pane name=\"feed\" :style=\"getStyle\">\n                <div class=\"row q-mb-sm\">\n                    <div class=\"col-12\">\n                        <q-search v-model=\"search\" :float-label=\"$t('search')\" :debounce=\"500\" />\n                    </div>\n                </div>\n\n                <div class=\"row\" v-if=\"$q.platform.is.mobile\">\n                    <div class=\"col-xs-12\">\n                        <q-card style=\"height: 70vh;\">\n                            <q-card-main>\n                                <q-scroll-area style=\"height: 60vh;\">\n                                    <q-list highlight separator sparse no-border>\n                                        <q-item link v-if=\"messages.length === 0\">\n                                            <q-item-main :label=\"$t('no_messages_found')\" />\n                                        </q-item>\n\n                                        <q-item link v-for=\"(message, index) in filteredMessages\" :key=\"index\" @click.native=\"fetchMessage(message)\" :class=\"id === message.id ? 'selected' : ''\">\n                                            <q-item-main :label=\"message.title\" :sublabel=\"fDate(message.send_date)\" />\n                                        </q-item>\n                                    </q-list>\n                                </q-scroll-area>\n                            </q-card-main>\n                        </q-card>\n                    </div>\n                </div>\n\n                <div class=\"row gutter-xs full-height\" v-if=\"$q.platform.is.desktop\">\n                    <div class=\"col-sm-4\">\n                        <q-card class=\"full-height\">\n                            <q-card-main class=\"full-height\">\n                                <q-scroll-area class=\"full-height\">\n                                    <q-list highlight separator sparse no-border>\n                                        <q-item link v-if=\"messages.length === 0\">\n                                            <q-item-main :label=\"$t('no_messages_found')\" />\n                                        </q-item>\n\n                                        <q-item link v-for=\"(message, index) in filteredMessages\" :key=\"index\" @click.native=\"fetchMessage(message)\" :class=\"id === message.id ? 'selected' : ''\">\n                                            <q-item-main :label=\"message.title\" :sublabel=\"fDate(message.send_date)\" />\n                                        </q-item>\n                                    </q-list>\n                                </q-scroll-area>\n                            </q-card-main>\n                        </q-card>\n                    </div>\n\n                    <div class=\"col-sm-8\">\n                        <q-card class=\"full-height relative-position\">\n                            <q-card-main class=\"full-height\">\n                                <q-scroll-area class=\"full-height q-pa-xl\">\n                                    <span v-html=\"body\"></span>\n                                </q-scroll-area>\n                            </q-card-main>\n\n                            <q-inner-loading :visible=\"loading\">\n                                <q-spinner-dots :size=\"60\" color=\"secondary\"></q-spinner-dots>\n                            </q-inner-loading>\n                        </q-card>\n                    </div>\n                </div>\n            </q-tab-pane>\n        </q-tabs>\n\n        <q-modal v-model=\"show_message\" :content-css=\"{minWidth: getMinWidth, maxWidth: getMaxWidth, minHeight: '80vh'}\" no-backdrop-dismiss no-esc-dismiss>\n            <q-modal-layout>\n                <q-toolbar slot=\"header\">\n                    <q-btn flat round dense @click=\"closeMessage()\" icon=\"fas fa-times\" />\n                    <q-toolbar-title>\n                        {{ title }}\n                    </q-toolbar-title>\n                </q-toolbar>\n\n                <div class=\"layout-padding relative-position\">\n                    <div class=\"row\">\n                        <div class=\"col-12\">\n                            <span v-html=\"body\"></span>\n                        </div>\n                    </div>\n\n                    <q-inner-loading :visible=\"loading\">\n                        <q-spinner-dots :size=\"60\" color=\"secondary\"></q-spinner-dots>\n                    </q-inner-loading>\n                </div>\n            </q-modal-layout>\n        </q-modal>\n    </q-page>\n</template>\n\n<script>\nimport { mapGetters } from 'vuex'\nimport { date } from 'quasar'\nconst { getDateDiff, formatDate } = date\n\nexport default {\n    i18nOptions: { namespaces: [ \"custom\", \"common\"] },\n\n    data() {\n        return {\n            messages: [],\n            title: '',\n            send_date: '',\n            body: '',\n            id: '',\n            loading: false,\n            show_message: false,\n            search: ''\n        }\n    },\n\n    computed: {\n        ...mapGetters({\n            access_token: 'common/access_token'\n        }),\n\n        getHeader() {\n            let headers = {}\n            return headers = {\n                headers: {\n                    'content-type': 'application/json',\n                    'authorization': 'Basic ' + btoa(process.env.APP_CLIENT_ID + ':' + process.env.APP_CLIENT_SECRET),\n                    'authorization': 'Bearer ' + this.access_token\n                }\n            }\n        },\n\n        getStyle() {\n            if (this.$q.platform.is.desktop) return 'height: 60vh;'\n            else if (this.$q.platform.is.mobile) return 'height: 75vh;'\n        },\n\n        getMaxWidth() {\n            if (this.$q.platform.is.mobile) return '100vw'\n            else return '80vw'\n        },\n\n        getMinWidth() {\n            if (!this.$q.platform.is.mobile) return '90vw'\n        },\n\n        filteredMessages() {\n            if (!this.search) return this.messages\n            else {\n                return this.messages.filter((e) => e.title.toUpperCase().includes(this.search.toUpperCase()))\n            }\n        }\n    },\n\n    methods: {\n        fetchData() {\n            this.$q.loading.show()\n\n            this.$axios.get(`/etraining_messages/messages/`, this.getHeader)\n            .then(response => {\n                this.messages = response.data\n                this.$q.loading.hide()\n            })\n            .catch(e => {\n                this.$q.loading.hide()\n                console.log(e)\n            })\n        },\n\n        fetchMessage(message) {\n            this.title = ''\n            this.body = ''\n            this.send_date = ''\n\n            if (!this.$q.platform.is.mobile) {\n                this.id = message.message_id\n                this.loading = true\n\n                if (this.$q.platform.is.mobile) this.show_message = true\n\n                this.$axios.get(`/etraining_messages/messages/${this.id}/`, this.getHeader)\n                .then(response => {\n                    this.title = response.data.title\n                    this.send_date = response.data.send_date\n                    this.body = response.data.body\n                    this.loading = false\n                })\n                .catch(e => {\n                    this.loading = false\n                    console.log(e)\n                })\n            }\n            else if (message.id != this.id) {\n                this.id = message.message_id\n                this.loading = true\n\n                if (this.$q.platform.is.mobile) this.show_message = true\n\n                this.$axios.get(`/etraining_messages/messages/${this.id}/`, this.getHeader)\n                .then(response => {\n                    this.title = response.data.title\n                    this.send_date = response.data.send_date\n                    this.body = response.data.body\n                    this.loading = false\n                })\n                .catch(e => {\n                    this.loading = false\n                    console.log(e)\n                })\n            }\n            else {\n                this.id = ''\n            }\n        },\n\n        fDate(d) {\n            return date.formatDate(d, 'DD/MM/YYYY HH:mm')\n        },\n\n        closeMessage() {\n            this.id = ''\n            this.show_message = false\n        }\n    },\n\n    created() {\n        this.fetchData()\n    }\n}\n</script>\n\n<style lang=\"stylus\" scoped>\n.selected\n    font-weight bold\n</style>\n","import mod from \"-!../../../node_modules/babel-loader/lib/index.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Messages.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/babel-loader/lib/index.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Messages.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Messages.vue?vue&type=template&id=14131f0e&scoped=true&\"\nimport script from \"./Messages.vue?vue&type=script&lang=js&\"\nexport * from \"./Messages.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Messages.vue?vue&type=style&index=0&id=14131f0e&lang=stylus&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"14131f0e\",\n  null\n  \n)\n\ncomponent.options.__file = \"Messages.vue\"\nexport default component.exports","import mod from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-2-0!../../../node_modules/css-loader/index.js??ref--6-oneOf-2-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-2-2!../../../node_modules/stylus-loader/index.js??ref--6-oneOf-2-3!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Messages.vue?vue&type=style&index=0&id=14131f0e&lang=stylus&scoped=true&\"; export default mod; export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-2-0!../../../node_modules/css-loader/index.js??ref--6-oneOf-2-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-2-2!../../../node_modules/stylus-loader/index.js??ref--6-oneOf-2-3!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Messages.vue?vue&type=style&index=0&id=14131f0e&lang=stylus&scoped=true&\""],"sourceRoot":""}