PMCORE-2554

resources/assets/js/api/CaseNotes.js

@@ -6,8 +6,16 @@ export let caseNotes = {
         params.append('appUid', data.APP_UID);
         params.append('noteText', data.COMMENT);
         params.append('swSendMail', data.SEND_MAIL ? 1 : 0);
+
+        _.each(data.FILES, (f) => {
+            params.append("filesToUpload[]", f);
+        })
         return axios.post(window.config.SYS_SERVER +
             window.config.SYS_URI +
-            `appProxy/postNote`, params);
+            `appProxy/postNote`, params, {
-    }
+            headers: {
+                "Content-Type": "multipart/form-data",
+            },
+        });
+    },
 };

resources/assets/js/components/home/caseDetail/AttachedDocuments.vue

@@ -51,7 +51,7 @@ export default {
       return "btn v-btn-request " + cls;
     },
     classIcon(icon) {
-      return this.icon[icon];
+      return this.icon[icon] ? this.icon[icon] : "fas fa-file-alt";
     },
     href(item) {
       return (

resources/assets/js/components/home/caseDetail/AttachedDocumentsEdit.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="card v-case-summary-card" style="width: 20rem">
+    <div class="card-body">
+      <h6 class="card-subtitle mb-2 text-muted">{{ data.title }}</h6>
+      <div class="card-text">
+        <div
+          v-for="item in data.items"
+          :key="item.title"
+          class="v-attached-block"
+        >
+          <span>
+            <div class="v-list v-list-row block">
+              <div
+                class="float-right text-md text-danger btn-default"
+                @click="removeDocument(item)"
+              >
+                <i class="fas fa-times-circle"></i>
+              </div>
+              <div class="v-list-item">
+                <div class="v-attached-icon">
+                  <i :class="classIcon(item.extension)"></i>
+                </div>
+                <div class="flex">
+                  <a
+                    @click="item.onClick(item)"
+                    class="v-item-except text-sm h-1x"
+                  >
+                    {{ item.title }}
+                  </a>
+                </div>
+              </div>
+            </div></span
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AttachedDocumentsEdit",
+  props: {
+    data: Object,
+    onRemove: Function,
+  },
+  data() {
+    return {
+      icon: {
+        pdf: "fas fa-file-pdf",
+        doc: "fas fa-file-word",
+        png: "fas fa-image",
+      },
+    };
+  },
+  computed: {},
+  methods: {
+    classBtn(cls) {
+      return "btn v-btn-request " + cls;
+    },
+    classIcon(icon) {
+      return this.icon[icon] ? this.icon[icon] : "fas fa-file-alt";
+    },
+    /**
+     * Remove file from view and update the view
+     */
+    removeDocument(item) {
+      let dt = this.data.items;
+      _.remove(dt, function (n) {
+        return item.title == n.title;
+      });
+      this.data.items = dt;
+      this.$forceUpdate();
+      this.onRemove(item);
+    },
+  },
+};
+</script>
+
+<style>
+.v-list-item {
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+}
+
+.v-list-row .v-list-item {
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.block {
+  background: #fff;
+  border-width: 0;
+  border-radius: 0.25rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.v-list {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.v-item-except {
+  padding-left: 10px;
+  color: #6c757d !important;
+}
+
+.v-attached-icon {
+  font-size: 25px;
+}
+
+.text-md {
+  font-size: 20px;
+}
+</style>

resources/assets/js/components/home/caseDetail/CaseComment.vue

@@ -11,6 +11,12 @@
     <div class="comment-content col-md-11 col-sm-10 v-comment">
       <div class="comment-meta">
         <a href="#">{{ data.user }}</a> {{ data.date }}
+        <div
+          class="btn-default float-right"
+          v-if="this.data.data.attachments.length > 0"
+        >
+          <i class="fas fa-paperclip"></i>
+        </div>
       </div>
       <div class="comment-body">
         <p>{{ data.comment }}</p>

resources/assets/js/components/home/caseDetail/CaseComments.vue

@@ -14,7 +14,16 @@
         />
       </div>
     </div>
-    <div class="comments col-md-12">
+    <div class="v-comments col-md-12" @dragover="onDragOver">
+      <div
+        class="mask flex-center rgba-green-strong"
+        v-show="showMaskDrop"
+        @dragover="onDragOver"
+        @dragleave="onDragLeave"
+        @drop="onDropFile"
+      >
+        <p class="white-text">{{ $t("ID_UPLOAD_FILE") }}</p>
+      </div>
       <div class="comment mb-2 row">
         <div class="comment-avatar col-md-1 col-sm-2 text-center pr-1">
           <a href=""
@@ -66,12 +75,15 @@ export default {
     data: Object,
     onClick: Function,
     postComment: Function,
+    dropFiles: Function,
   },
   components: {
     CaseComment,
   },
   data() {
     return {
+      showMaskDrop: false,
+      files: [],
       itemSelected: null,
     };
   },
@@ -92,16 +104,59 @@ export default {
       return this.icon[icon];
     },
     onClickComment() {
-      this.postComment(this.$refs["comment"].value, this.$refs["send"].checked);
+      let fls = this.files;
+      this.postComment(
+        this.$refs["comment"].value,
+        this.$refs["send"].checked,
+        fls
+      );
       this.resetComment();
     },
     resetComment() {
       this.$refs["comment"].value = "";
       this.$refs["send"].checked = false;
+      this.files = [];
     },
     onSelected(item) {
       this.itemSelected = item;
     },
+    onDropFile(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      let that = this,
+        fls = [];
+      _.each(e.dataTransfer.files, (f) => {
+        that.files.push(f);
+      });
+
+      _.each(that.files, (f) => {
+        fls.push({
+          data: f,
+          title: f.name,
+          extension: f.name.split(".").pop(),
+          onClick: () => {},
+        });
+      });
+
+      this.dropFiles(fls);
+      this.showMaskDrop = false;
+    },
+    onDragOver(e) {
+      e.preventDefault();
+      if (!this.showMaskDrop) {
+        this.showMaskDrop = true;
+      }
+    },
+    onDragLeave(e) {
+      if (this.showMaskDrop) {
+        this.showMaskDrop = false;
+      }
+    },
+    removeFile(file) {
+      _.remove(this.files, function (n) {
+        return file.title == n.name;
+      });
+    },
   },
 };
 </script>
@@ -111,8 +166,47 @@ export default {
   padding-right: 20px;
 }
 
+.v-comments {
+  display: inline-block;
+}
+
+.mask {
+  z-index: 100;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-attachment: fixed;
+  outline: 5px dashed #2ba070;
+  outline-offset: -20px;
+}
+.flex-center {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  height: 100%;
+}
+.rgba-green-strong,
+.rgba-green-strong:after {
+  background-color: rgba(76, 175, 80, 0.7);
+}
+
 .v-img-fluid {
   max-width: 30px;
   height: auto;
 }
+.white-text {
+  font-size: 32px;
+  color: antiquewhite;
+}
 </style>

resources/assets/js/components/home/caseDetail/IoDocuments.vue

@@ -14,9 +14,13 @@
                 <i :class="classIcon(item.extension)"></i>
               </div>
               <div class="flex">
-                <div @click="item.onClick" class="v-item-except text-sm h-1x">
+                <a
+                  @click="item.onClick"
+                  :href="href(item)"
+                  class="v-item-except text-sm h-1x"
+                >
                   {{ item.title }}
-                </div>
+                </a>
               </div>
             </div>
           </div>
@@ -36,9 +40,13 @@
                 <i :class="classIcon(item.extension)"></i>
               </div>
               <div class="flex">
-                <div @click="item.onClick" class="v-item-except text-sm h-1x">
+                <a
+                  @click="item.onClick"
+                  :href="hrefOutput(item)"
+                  class="v-item-except text-sm h-1x"
+                >
                   {{ item.title }}
-                </div>
+                </a>
               </div>
             </div>
           </div>
@@ -68,7 +76,23 @@ export default {
       return "btn v-btn-request " + cls;
     },
     classIcon(icon) {
-      return this.icon[icon];
+      return this.icon[icon] ? this.icon[icon] : "fas fa-file-alt";
+    },
+    href(item) {
+      return (
+        window.config.SYS_SERVER +
+        window.config.SYS_URI +
+        `cases/cases_ShowDocument?a=${item.data.APP_DOC_UID}&v=${item.data.DOC_VERSION}`
+      );
+    },
+    hrefOutput(item) {
+      let random = _.random(0, 10000000),
+        cacheTime = Date.now();
+      return (
+        window.config.SYS_SERVER +
+        window.config.SYS_URI +
+        `cases/cases_ShowOutputDocument?a=${item.data.APP_DOC_UID}&v=${item.data.DOC_VERSION}&ext=doc&random=${random}&nocachetime=${cacheTime}`
+      );
     },
   },
 };

resources/assets/js/home/CaseDetail.vue

@@ -67,16 +67,23 @@
     <div class="row">
       <div class="col-sm-9">
         <case-comments
+          ref="case-comments"
           :data="dataComments"
           :onClick="onClickComment"
           :postComment="postComment"
+          :dropFiles="dropFiles"
         />
       </div>
       <div class="col-sm-3">
         <attached-documents
-          v-if="dataAttachedDocuments.items.length > 0"
+          v-if="dataAttachedDocuments.items.length > 0 && !attachDocuments"
           :data="dataAttachedDocuments"
         ></attached-documents>
+        <attached-documents-edit
+          v-if="dataAttachedDocuments.items.length > 0 && attachDocuments"
+          :data="dataAttachedDocuments"
+          :onRemove="onRemoveAttachedDocument"
+        ></attached-documents-edit>
       </div>
     </div>
   </div>
@@ -86,6 +93,7 @@
 import IoDocuments from "../components/home/caseDetail/IoDocuments.vue";
 import CaseSummary from "../components/home/caseDetail/CaseSummary.vue";
 import AttachedDocuments from "../components/home/caseDetail/AttachedDocuments.vue";
+import AttachedDocumentsEdit from "../components/home/caseDetail/AttachedDocumentsEdit.vue";
 import CaseComment from "../components/home/caseDetail/CaseComment";
 import CaseComments from "../components/home/caseDetail/CaseComments";
 import TabsCaseDetail from "../home/TabsCaseDetail.vue";
@@ -102,12 +110,13 @@ export default {
     IoDocuments,
     CaseSummary,
     AttachedDocuments,
+    AttachedDocumentsEdit,
     CaseComment,
     CaseComments,
     ModalCancelCase,
     ButtonFleft,
     ModalNewRequest,
-    TaskCell
+    TaskCell,
   },
   props: {},
   data() {
@@ -164,6 +173,7 @@ export default {
         title: "Attached Documents",
         items: [],
       },
+      attachDocuments: false,
       dataComments: {
         title: "Comments",
         items: [],
@@ -181,17 +191,20 @@ export default {
     this.getCasesNotes();
   },
   methods: {
-    postComment(comment, send) {
+    postComment(comment, send, files) {
       let that = this;
       Api.caseNotes
         .post(
           _.extend({}, this.dataCase, {
             COMMENT: comment,
             SEND_MAIL: send,
+            FILES: files,
           })
         )
         .then((response) => {
           if (response.data.success === "success") {
+            that.attachDocuments = false;
+            this.dataAttachedDocuments.items = [];
             that.getCasesNotes();
           }
         });
@@ -263,7 +276,8 @@ export default {
               info = {
                 title: document[i].TITLE,
                 extension: document[i].TITLE.split(".")[1],
-                onClick: document[i].DOWNLOAD_LINK,
+                onClick: () => {},
+                data: document[i],
               };
               this.dataIoDocuments.inputDocuments.push(info);
             }
@@ -288,7 +302,8 @@ export default {
               info = {
                 title: document[i].TITLE,
                 extension: document[i].TITLE.split(".")[1],
-                onClick: document[i].DOWNLOAD_LINK,
+                onClick: () => {},
+                data: document[i],
               };
               this.dataIoDocuments.outputDocuments.push(info);
             }
@@ -298,6 +313,13 @@ export default {
           throw new Error(err);
         });
     },
+    dropFiles(files) {
+      this.attachDocuments = true;
+      this.dataAttachedDocuments.items = files;
+    },
+    onRemoveAttachedDocument(file) {
+      this.$refs["case-comments"].removeFile(file);
+    },
     /**
      * Get for user format name configured in Processmaker Environment Settings
      *
@@ -386,18 +408,18 @@ export default {
         dt;
       return new Promise((resolutionFunc, rejectionFunc) => {
         Api.cases
-        .pendingtask(that.$parent.dataCase)
+          .pendingtask(that.$parent.dataCase)
-        .then((response) => {
+          .then((response) => {
-          dt = that.formatDataResponse(response.data);
+            dt = that.formatDataResponse(response.data);
-          resolutionFunc({
+            resolutionFunc({
-            data: dt,
+              data: dt,
-            count: response.data.length
+              count: response.data.length,
+            });
+            that.showTable = response.data.length > 0 ? true : false;
+          })
+          .catch((err) => {
+            throw new Error(err);
           });
-          that.showTable = response.data.length > 0 ? true : false;
-        })
-        .catch((err) => {
-          throw new Error(err);
-        });
       });
     },
     formatDataResponse(response) {
@@ -407,17 +429,17 @@ export default {
           TASK: {
             TITLE: v.TAS_TITLE,
             CODE_COLOR: v.TAS_COLOR,
-            COLOR: v.TAS_COLOR_LABEL
+            COLOR: v.TAS_COLOR_LABEL,
           },
           CASE_TITLE: v.DEL_TITLE,
           ASSIGNEE: v.USR_FIRSTNAME + " " + v.USR_LASTNAME,
           STATUS: v.DEL_THREAD_STATUS,
           DUE_DATE: v.DEL_TASK_DUE_DATE,
-          TASK_COLOR: v.TAS_COLOR_LABEL
+          TASK_COLOR: v.TAS_COLOR_LABEL,
-        });        
+        });
       });
       return data;
-    }
+    },
   },
 };
 </script>

resources/assets/js/home/modal/ModalComments.vue

@@ -4,15 +4,23 @@
       <div class="row">
         <div class="col-sm-8">
           <case-comments
+            ref="case-comments"
             :data="dataComments"
             :onClick="onClickComment"
             :postComment="postComment"
+            :dropFiles="dropFiles"
           />
         </div>
         <div class="col-sm-4">
           <attached-documents
+            v-if="dataAttachedDocuments.items.length > 0 && !attachDocuments"
             :data="dataAttachedDocuments"
           ></attached-documents>
+          <attached-documents-edit
+            v-if="dataAttachedDocuments.items.length > 0 && attachDocuments"
+            :data="dataAttachedDocuments"
+            :onRemove="onRemoveAttachedDocument"
+          ></attached-documents-edit>
         </div>
       </div>
     </b-modal>
@@ -23,17 +31,20 @@
 import Api from "./../../api/index";
 import CaseComments from "../../components/home/caseDetail/CaseComments.vue";
 import AttachedDocuments from "../../components/home/caseDetail/AttachedDocuments.vue";
+import AttachedDocumentsEdit from "../../components/home/caseDetail/AttachedDocumentsEdit.vue";
 export default {
   name: "ModalComments",
   components: {
     CaseComments,
     AttachedDocuments,
+    AttachedDocumentsEdit,
   },
   props: {},
   mounted() {},
   data() {
     return {
       dataCase: null,
+      attachDocuments: false,
       dataComments: {
         title: this.$i18n.t("ID_COMMENTS"),
         items: [],
@@ -55,17 +66,20 @@ export default {
         });
         this.dataAttachedDocuments.items = att;
       },
-      postComment: (comment, send) => {
+      postComment: (comment, send, files) => {
         let that = this;
         Api.caseNotes
           .post(
             _.extend({}, this.dataCase, {
               COMMENT: comment,
               SEND_MAIL: send,
+              FILES: files,
             })
           )
           .then((response) => {
             if (response.data.success === "success") {
+              that.attachDocuments = false;
+              this.dataAttachedDocuments.items = [];
               that.getCasesNotes();
             }
           });
@@ -94,6 +108,9 @@ export default {
           throw new Error(err);
         });
     },
+    onRemoveAttachedDocument(file) {
+      this.$refs["case-comments"].removeFile(file);
+    },
     formatResponseCaseNotes(notes) {
       let that = this,
         notesArray = [];
@@ -112,6 +129,10 @@ export default {
 
       this.dataComments.items = notesArray;
     },
+    dropFiles(files) {
+      this.attachDocuments = true;
+      this.dataAttachedDocuments.items = files;
+    },
     /**
      * Get for user format name configured in Processmaker Environment Settings
      *