PMCORE-2554

2020-12-15 23:56:44 +00:00
parent eeb3427927
commit 464062c815
8 changed files with 328 additions and 31 deletions
--- a/resources/assets/js/api/CaseNotes.js
+++ b/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",
+            },
+        });
+    },
 };
--- a/resources/assets/js/components/home/caseDetail/AttachedDocuments.vue
+++ b/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 (
--- a/resources/assets/js/components/home/caseDetail/AttachedDocumentsEdit.vue
+++ b/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>
--- a/resources/assets/js/components/home/caseDetail/CaseComment.vue
+++ b/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>
--- a/resources/assets/js/components/home/caseDetail/CaseComments.vue
+++ b/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>
--- a/resources/assets/js/components/home/caseDetail/IoDocuments.vue
+++ b/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}`
+      );
    },
  },
 };
--- a/resources/assets/js/home/CaseDetail.vue
+++ b/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
     *
@@ -391,7 +413,7 @@ export default {
            dt = that.formatDataResponse(response.data);
            resolutionFunc({
              data: dt,
-            count: response.data.length
+              count: response.data.length,
            });
            that.showTable = response.data.length > 0 ? true : false;
          })
@@ -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>
--- a/resources/assets/js/home/modal/ModalComments.vue
+++ b/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
     *