{"version":3,"sources":["webpack:///./src/components/Chat.vue?b6ff","webpack:///./src/models/models.js","webpack:///./src/components/Chat.vue?f2a3","webpack:///src/components/Chat.vue","webpack:///./src/components/Chat.vue?61f6","webpack:///./src/components/Chat.vue"],"names":["_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Chat_vue_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0__","__webpack_require__","_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Chat_vue_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0___default","n","education","c","id","name","svpb","institute","year","completed","document","documentName","assignment","title","description","professionalsQty","contactDetails","address","postalCode","city","dates","map","d","assignmentDate","startTime","hours","skills","clientProfileImage","clientCompany","clientEmail","clientName","clientPhone","professionalEmail","professionalName","professionalPhone","professionalProfileImage","conditions","date","actualHours","lockedHours","assignmentId","assignmentUsers","u","assignmentUser","applicationUserId","assignmentStatusId","assignmentDateId","inviteDate","updateDate","applicationUser","assignmentStatus","rates","chatMessage","message","from","to","read","Date","send","isRead","isMe","toAll","report","reportType","reportDate","subject","internalComments","submitDate","attachments","locked","rapporteur","review","publicReview","privateReview","rating","fromId","toId","render","_vm","this","_h","$createElement","_c","_self","attrs","ref","staticClass","width","_e","messages","length","_l","m","idx","key","class","offset-2 me","icon","_v","_s","domProps","innerHTML","toLocaleDateString","toLocaleTimeString","isLoading","disabled","_m","on","submit","$event","preventDefault","sendMessage","directives","rawName","value","expression","placeholder","input","target","composing","$set","type","staticRenderFns","Chatvue_type_script_lang_js_","components","Loader","props","Boolean","required","default","Number","userId","String","data","isLoadingTop","allLoaded","skip","models","$route","params","mounted","_this","getMessages","$refs","chatbox","addEventListener","ev","currentTarget","scrollTop","then","res","methods","scrollDown","setTimeout","wrapper","querySelector","scrollTo","scrollHeight","_this2","$http","get","forEach","unshift","catch","_this3","replace","post","push","watch","components_Chatvue_type_script_lang_js_","component","Object","componentNormalizer","__webpack_exports__"],"mappings":"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","file":"js/Client-assignment-pages~professional-assignment-pages~professional-pages~21833f8f.9cefbd25.js","sourcesContent":["import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Chat.vue?vue&type=style&index=0&lang=scss&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Chat.vue?vue&type=style&index=0&lang=scss&\"","\r\nexport const education = (c) => {\r\n    return {\r\n        id: c.id,\r\n        name: c.name,\r\n        svpb: c.svpb,\r\n        institute: c.institute,\r\n        year: c.year,\r\n        completed: c.completed,\r\n        document: c.document,\r\n        documentName: (c.documentName == null) ? 'Kopie document...': c.documentName\r\n    }\r\n};\r\n\r\nexport const assignment = (c) => {\r\n    return {\r\n        id: c.id,\r\n        title: c.title,\r\n        description: c.description,\r\n        professionalsQty: c.professionalsQty,\r\n        contactDetails: c.contactDetails,\r\n        address: c.address,\r\n        postalCode: c.postalCode,\r\n        city: c.city,\r\n        dates: c.dates.map((d) => { return new assignmentDate(d) }),\r\n        startTime: c.startTime,\r\n        hours: (!!c.hours) ? c.hours : 0,\r\n        skills: (c.skills == null) ? [] : c.skills,\r\n        clientProfileImage: c.clientProfileImage,\r\n        clientCompany: c.clientCompany,\r\n        clientEmail: c.clientEmail,\r\n        clientName: c.clientName,\r\n        clientPhone: c.clientPhone,\r\n        professionalEmail: c.professionalEmail,\r\n        professionalName: c.professionalName,\r\n        professionalPhone: c.professionalPhone,\r\n        professionalProfileImage: c.professionalProfileImage,\r\n        conditions: (c.conditions) ? c.conditions : false\r\n\r\n        //assignmentUsers: (c.assignmentUsers == null) ? [] : c.assignmentUsers\r\n    }\r\n}\r\n\r\nexport const assignmentDate = (c) => {\r\n    return {\r\n        id: c.id,\r\n        date: c.date,\r\n        startTime: c.startTime,\r\n        hours: c.hours,\r\n        actualHours: (!!c.actualHours ||c.actualHours > 0) ? c.actualHours : 0,\r\n        lockedHours: (!!c.actualHours || c.actualHours > 0) ? true : false,\r\n        assignmentId: c.assignmentId,\r\n        assignmentUsers: (c.assignmentUsers == null) ? [] : c.assignmentUsers.map((u) => { return new assignmentUser(u) })\r\n    }\r\n}\r\n\r\nexport const assignmentUser = (c) => {\r\n    return {\r\n        id: c.id,\r\n        applicationUserId: c.applicationUserId,\r\n        assignmentStatusId: c.assignmentStatusId,\r\n        assignmentDateId: c.assignmentDateId,\r\n        startTime: c.startTime,\r\n        hours: c.hours,\r\n        actualHours: c.actualHours,\r\n        inviteDate: c.inviteDate,\r\n        updateDate: c.updateDate,\r\n        applicationUser: c.applicationUser,\r\n        assignmentStatus: c.assignmentStatus,\r\n        assignmentDate: c.assignmentDate,\r\n        rates: (c.rates == null) ? [] : c.rates,\r\n        lockedHours: (!!c.actualHours || c.actualHours > 0) ? true : false\r\n    }\r\n}\r\n\r\n\r\nexport const chatMessage = (c) => {\r\n    return {\r\n        id: c.id,\r\n        message: c.message,\r\n        from: c.from,\r\n        to: c.to,\r\n        read: typeof(c.read) == \"string\" ? new Date(c.read) : c.read,\r\n        send: typeof(c.send) == \"string\" ? new Date(c.send) : c.send,\r\n        isRead: c.isRead,\r\n        isMe: c.isMe,\r\n        assignmentId: c.assignmentId,\r\n        toAll: c.toAll\r\n    }\r\n}\r\n\r\nexport const report = (c) => {\r\n    return {\r\n        id: c.id,\r\n        reportType: (c.reportType) ? c.reportType : 'Dienstrapport',\r\n        reportDate: c.reportDate,\r\n        subject: c.subject,\r\n        message: c.message,\r\n        internalComments: c.internalComments,\r\n        submitDate: c.submitDate,\r\n        assignmentId: c.assignmentId,\r\n        attachments: c.attachments ? c.attachments : [],\r\n        locked: c.locked || false,\r\n        rapporteur: c.rapporteur\r\n    }\r\n}\r\n\r\nexport const review = (c) => {\r\n    return {\r\n        id: c.id,\r\n        publicReview: c.publicReview,\r\n        privateReview: c.privateReview,\r\n        date: c.date,\r\n        rating: c.rating,\r\n        assignmentId: c.assignmentId,\r\n        fromId: c.fromId,\r\n        toId: c.toId,\r\n    }\r\n}\r\n\r\nexport const document = (c) => {\r\n    return {\r\n        id: c.id,\r\n        fileName: c.fileName,\r\n        fileSize: c.fileSize,\r\n        fileContentType: c.fileContentType,\r\n        file: c.file,\r\n        createDate: c.createDate\r\n    }\r\n}","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{\"id\":\"chatbox\"}},[_c('div',{ref:\"chatbox\",staticClass:\"chat-wrapper p-3\"},[(_vm.isLoadingTop)?_c('div',{staticClass:\"text-center vert-center mb-3\"},[_c('loader',{attrs:{\"width\":\"3rem\"}})],1):_vm._e(),(_vm.messages.length > 0)?_c('div',_vm._l((_vm.messages),function(m,idx){return _c('div',{key:idx},[_c('div',{class:['col-10', 'p-3', 'mb-3', 'talk', 'chat', { 'offset-2 me': m.isMe }]},[_c('div',{staticClass:\"head\"},[_c('font-awesome-icon',{attrs:{\"icon\":['far', 'comment']}}),_vm._v(\" \\n                        \"),_c('strong',[_vm._v(_vm._s((m.isMe) ? 'U' : 'Ontvangen Bericht'))])],1),_c('div',{staticClass:\"message mb-2\"},[_c('span',{domProps:{\"innerHTML\":_vm._s(m.message)}})]),_c('div',{staticClass:\"foot mb-3\"},[_c('div',{staticClass:\"float-left time d-inline-block invisible-sm\"},[_vm._v(\"\\n                            \"+_vm._s(m.send.toLocaleDateString())+\" \"+_vm._s(m.send.toLocaleTimeString())+\" \"),(m.isRead && m.isMe)?_c('span',[_vm._v(\"(gelezen)\")]):_vm._e(),_vm._v(\" \"),(m.toAll)?_c('span',[_vm._v(\"(groepsbericht)\")]):_vm._e()]),(m.isRead && m.isMe)?_c('div',{staticClass:\"float-right read d-inline-block invisible-sm\",attrs:{\"title\":\"Gelezen\"}},[_c('font-awesome-icon',{attrs:{\"icon\":\"check\"}})],1):_vm._e()])])])}),0):(!_vm.isLoading)?_c('div',{staticClass:\"text-center vert-center no-messages\"},[_c('h4',[_vm._v(\"Nog geen berichten...\")])]):_vm._e(),(_vm.isLoading)?_c('div',{staticClass:\"text-center vert-center mb-3\"},[_c('loader',{attrs:{\"width\":\"3rem\"}})],1):_vm._e()]),(!_vm.disabled)?_c('form',{staticClass:\"chat-message-box row\",on:{\"submit\":function($event){$event.preventDefault();return _vm.sendMessage($event)}}},[_c('div',{staticClass:\"chat-message col-md-8\"},[_c('textarea',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.message.message),expression:\"message.message\"}],staticClass:\"form-control\",attrs:{\"placeholder\":\"Type hier uw bericht...\"},domProps:{\"value\":(_vm.message.message)},on:{\"input\":function($event){if($event.target.composing){ return; }_vm.$set(_vm.message, \"message\", $event.target.value)}}})]),_c('div',{staticClass:\"chat-send col-md-4 d-flex align-items-end mt-3\"},[_c('button',{staticClass:\"btn btn-azure-dark btn-wide float-right text-center align-items-end\",attrs:{\"type\":\"submit\",\"disabled\":!_vm.message.message || _vm.disabled}},[_vm._v(\"Versturen\")])])]):_c('div',{staticClass:\"chat-message-box text-center\"},[_vm._m(0)])])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('h3',[_vm._v(\"Helaas u kunt geen berichten meer sturen.\"),_c('br'),_vm._v(\"De opdracht is voltooid.\")])}]\n\nexport { render, staticRenderFns }","<template>\r\n    <div id=\"chatbox\">\r\n        <div class=\"chat-wrapper p-3\" ref=\"chatbox\">\r\n            <div v-if=\"isLoadingTop\" class=\"text-center vert-center mb-3\">\r\n                <loader width=\"3rem\" ></loader>\r\n            </div>\r\n            <div v-if=\"messages.length > 0\">\r\n                <div v-for=\"(m, idx) in messages\" :key=\"idx\">\r\n                    <div :class=\"['col-10', 'p-3', 'mb-3', 'talk', 'chat', { 'offset-2 me': m.isMe }]\" >\r\n                        <div class=\"head\">\r\n                            <font-awesome-icon :icon=\"['far', 'comment']\"></font-awesome-icon>&nbsp;\r\n                            <strong>{{(m.isMe) ? 'U' : 'Ontvangen Bericht' }}</strong>\r\n                        </div>\r\n                        <div class=\"message mb-2\">\r\n                            <span v-html=\"m.message\"></span>\r\n                        </div>\r\n                        <div class=\"foot mb-3\">\r\n                            <div class=\"float-left time d-inline-block invisible-sm\">\r\n                                {{m.send.toLocaleDateString()}} {{m.send.toLocaleTimeString()}} <span v-if=\"m.isRead && m.isMe\">(gelezen)</span>&nbsp;<span v-if=\"m.toAll\">(groepsbericht)</span>\r\n                            </div>\r\n                            <div class=\"float-right read d-inline-block invisible-sm\" title=\"Gelezen\" v-if=\"m.isRead && m.isMe\">\r\n                                <font-awesome-icon icon=\"check\"></font-awesome-icon>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div v-else-if=\"!isLoading\" class=\"text-center vert-center no-messages\">\r\n                <h4>Nog geen berichten...</h4>\r\n            </div>\r\n            <div v-if=\"isLoading\" class=\"text-center vert-center mb-3\">\r\n                <loader width=\"3rem\" ></loader>\r\n            </div>\r\n        </div>\r\n        <form class=\"chat-message-box row\" @submit.prevent=\"sendMessage\" v-if=\"!disabled\">\r\n            <div class=\"chat-message col-md-8\">\r\n                <textarea class=\"form-control\" placeholder=\"Type hier uw bericht...\" v-model=\"message.message\" ></textarea>\r\n            </div>\r\n            <div class=\"chat-send col-md-4 d-flex align-items-end mt-3\">\r\n                <button type=\"submit\" class=\"btn btn-azure-dark btn-wide float-right text-center align-items-end\" :disabled=\"!message.message || disabled\">Versturen</button>\r\n            </div>\r\n        </form>\r\n        <div v-else class=\"chat-message-box text-center\">\r\n            <h3>Helaas u kunt geen berichten meer sturen.<br>De opdracht is voltooid.</h3>\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nimport Loader from '@/components/Loader';\r\nimport { chatMessage } from '@/models/models.js';\r\n\r\nexport default {\r\n    name: 'chat',\r\n    components: {\r\n        Loader\r\n    },\r\n    props: \r\n    {\r\n        disabled: \r\n        {\r\n            type: Boolean,\r\n            required: false,\r\n            default: false\r\n        },\r\n        assignmentId: \r\n        {\r\n            type: Number,\r\n            required: true,\r\n        },\r\n        userId: \r\n        {\r\n            type: String,\r\n            required: false,\r\n            default: ''\r\n        }\r\n    },\r\n    data() {\r\n        return {\r\n            isLoading: true,\r\n            isLoadingTop: false,\r\n            allLoaded: false,\r\n            skip: 0,\r\n            message: new chatMessage({ assignmentId: this.$route.params.id }),\r\n            messages: []\r\n        }\r\n    },\r\n    mounted() {\r\n        this.isLoading = true;\r\n        this.getMessages();\r\n\r\n        this.$refs.chatbox.addEventListener('scroll', (ev) => {\r\n            if(ev.currentTarget.scrollTop == 0 && !this.allLoaded)\r\n            {\r\n                this.isLoadingTop = true;\r\n                this.skip += 10;\r\n                this.getMessages().then((res) => {\r\n                    if(res.data.length < 10)\r\n                        this.allLoaded = true;\r\n                })\r\n            }\r\n        })\r\n    },\r\n    methods: {\r\n        scrollDown() {\r\n            setTimeout(() => {\r\n                const wrapper = document.querySelector(\"#chatbox .chat-wrapper\");\r\n                wrapper.scrollTo(0, wrapper.scrollHeight);\r\n            },1);\r\n        },\r\n        getMessages() {\r\n            return this.$http.get('api/Chat/' + this.assignmentId + \"?skip=\" + this.skip + \"&to=\" + this.userId).then((res) => {\r\n                res.data.forEach((c) => {\r\n                    this.messages.unshift(new chatMessage(c));\r\n                });\r\n                this.isLoading = false;\r\n                this.isLoadingTop = false;\r\n\r\n                if(this.skip == 0)\r\n                    this.scrollDown();\r\n\r\n                return res;\r\n            }).catch(() => {\r\n                this.messages = [];\r\n                this.isLoading = false;\r\n                this.isLoadingTop = false;\r\n                this.scrollDown();\r\n            });\r\n        },\r\n        sendMessage() {\r\n            if(this.message ==  null)\r\n                return;\r\n\r\n            this.isLoading = true;\r\n            this.scrollDown();\r\n            this.message.message = this.message.message.replace(/\\n\\r?/g, '<br />');\r\n\r\n            this.$http.post(\"api/Chat/\" + this.assignmentId + \"?to=\" + this.userId, this.message).then((res) => {\r\n                this.isLoading = false;\r\n                this.messages.push(new chatMessage(res.data));\r\n                this.message = new chatMessage({ assignmentId: this.$route.params.id });\r\n                this.scrollDown();\r\n            }).catch(() => {\r\n                this.isLoading = false;\r\n            });\r\n        }\r\n    },\r\n    watch: {\r\n        userId(to)\r\n        {\r\n            this.skip = 0;\r\n            this.messages = [];\r\n            this.getMessages();\r\n        } \r\n    }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n#chatbox\r\n{\r\n    height: 100%;\r\n    min-height: 500px;\r\n    position:relative;\r\n\r\n    .chat-wrapper {\r\n        height: calc(100% - 100px);\r\n        width: 100%;\r\n        left: 0;\r\n        overflow: auto;\r\n        position: absolute;\r\n        top: 0;\r\n        //border: .5px solid lightgray;\r\n        scroll-behavior: smooth;\r\n        //border-left: 1px solid $darkColor;\r\n        //border-top: 1px solid $darkColor;\r\n        //border-right: 1px solid $darkColor;\r\n        border: 1px solid $darkColor;\r\n\r\n        .no-messages {\r\n            color: lightgray;\r\n        }\r\n\r\n        .chat {\r\n            border-radius: 5px;\r\n            background-color: $darkColor;\r\n            color: $lightColor;\r\n\r\n            .foot {\r\n                font-size: 12px;\r\n            }\r\n            .read {\r\n                font-size: 12px;\r\n                color: green;\r\n            }\r\n\r\n        }\r\n\r\n        .chat.me {\r\n            background-color: $lightColor;\r\n            color: $darkColor;\r\n        }\r\n\r\n        .chat.talk {\r\n            position:relative;\r\n            height:100% !important;\r\n            width:100% !important;\r\n        }\r\n        .chat.talk:after {\r\n            content:'';\r\n            position: absolute;\r\n            top: 100%;\r\n            width: 0;\r\n            height: 0;\r\n            border-top: solid 5px $darkColor;\r\n            border-left: solid 5px transparent;\r\n            border-right: solid 5px transparent;\r\n        }\r\n        .chat.talk:not(.me):after {\r\n            left: 5%;\r\n            margin-left: -5px;\r\n        }\r\n        .chat.talk.me:after {\r\n            right: 5%;\r\n            margin-right: -5px;\r\n            border-top: solid 5px $lightColor;\r\n        }\r\n\r\n    }\r\n\r\n    \r\n    .chat-message-box {\r\n        width: 100%;\r\n        height: 100px;\r\n        max-height: 100px;\r\n        min-height: 10px;\r\n        bottom: 0;\r\n        left: 0;\r\n        right: 0;\r\n        margin: auto;\r\n        padding: 15px;\r\n        position: absolute;\r\n        background-color: $lightColor;\r\n        border-left: 1px solid $darkColor;\r\n        border-right: 1px solid $darkColor;\r\n        border-bottom: 1px solid $darkColor;\r\n\r\n        .form-control {\r\n            color: $darkColor;\r\n        }\r\n\r\n        .chat-message textarea {\r\n            height: 2.5rem;\r\n            height: 70px;\r\n            min-height: 70px;\r\n            max-height: 70px;\r\n        }\r\n    }\r\n}\r\n\r\n</style>","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Chat.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Chat.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Chat.vue?vue&type=template&id=33c17c5d&\"\nimport script from \"./Chat.vue?vue&type=script&lang=js&\"\nexport * from \"./Chat.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Chat.vue?vue&type=style&index=0&lang=scss&\"\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  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}