{"version":3,"sources":["webpack:///./src/components/Chat.vue?f183","webpack:///./src/models/models.js","webpack:///./src/components/Chat.vue?1398","webpack:///src/components/Chat.vue","webpack:///./src/components/Chat.vue?61f6","webpack:///./src/components/Chat.vue"],"names":["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","_e","messages","length","_l","m","idx","key","class","_v","_s","domProps","toLocaleDateString","toLocaleTimeString","isLoading","disabled","_m","on","$event","preventDefault","sendMessage","directives","rawName","value","expression","target","composing","$set","staticRenderFns","component"],"mappings":"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","file":"js/Client-assignment~professional~professional-assignment~21833f8f.abe3ea87.js","sourcesContent":["import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.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/dist/cjs.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/dist/cjs.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/dist/cjs.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":""}