add popover of Workflow log (#284)

* Add popover to Workflow Log

* delete italic format

* change funtion

src/lang/ADempiere/en.js

@@ -273,7 +273,13 @@ export default {
       notes: 'Notes',
       changeLog: 'Change Log',
       workflowLog: 'Workflow Log',
-      changeDetail: 'Detalle del cambio'
+      changeDetail: 'Detalle del cambio',
+      logWorkflow: {
+        message: 'Message',
+        responsible: 'Responsible',
+        workflowName: 'Name of Workflow Status',
+        timeElapsed: 'Time Elapsed'
+      }
     }
   },
   data: {

src/lang/ADempiere/es.js

@@ -248,7 +248,13 @@ export default {
       notes: 'Notas',
       changeLog: 'Histórico de Cambios',
       workflowLog: 'Histórico de Flujo de Trabajo',
-      changeDetail: 'Detalle del cambio'
+      changeDetail: 'Detalle del cambio',
+      logWorkflow: {
+        message: 'Mensaje',
+        responsible: 'Responsable',
+        workflowName: 'Nombre de estado del flujo de trabajo',
+        timeElapsed: 'Tiempo transcurrido'
+      }
     }
   },
   data: {

src/store/modules/ADempiere/containerInfo.js

@@ -53,7 +53,6 @@ const containerInfo = {
       const pageToken = 0
       return requestListWorkflows({ tableName, pageSize, pageToken })
         .then(response => {
-          console.log(response)
           commit('addListWorkflows', response)
         })
         .catch(error => {

src/utils/ADempiere/valueUtils.js

@@ -205,6 +205,77 @@ export function convertFieldListToShareLink(fieldList) {
 
   return attributesListLink.slice(0, -1)
 }
+/**
+ * Find element in an array recursively
+ * @param {object|array} treeData
+ * @param {string} attributeName, key to get value, default id
+ * @param {mixed}  attributeValue, value to compare with search
+ * @param {string} attributeChilds, childs list into element
+ */
+export const recursiveTreeSearch = ({
+  treeData,
+  attributeValue,
+  attributeName = 'id',
+  secondAttribute = false,
+  attributeChilds = 'childsList',
+  isParent = false
+}) => {
+  if (Array.isArray(treeData)) {
+    let index = 0
+    const length = treeData.length
+    while (index < length) {
+      let value = treeData[index]
+      if (!isEmptyValue(value) && value.hasOwnProperty(attributeName)) {
+        value = value[attributeName]
+      }
+      if (!isEmptyValue(value) && secondAttribute && value.hasOwnProperty(secondAttribute)) {
+        value = value[secondAttribute]
+      }
+
+      // compare item to search
+      if (value === attributeValue) {
+        return treeData[index]
+      }
+
+      if (treeData[index] && treeData[index][attributeChilds]) {
+        const found = recursiveTreeSearch({
+          treeData: treeData[index][attributeChilds],
+          attributeValue,
+          attributeName,
+          secondAttribute,
+          attributeChilds,
+          isParent
+        })
+        if (found) {
+          return found
+        }
+      }
+      index++
+    }
+  } else {
+    let value = treeData
+    if (!isEmptyValue(value) && value.hasOwnProperty(attributeName)) {
+      value = value[attributeName]
+    }
+    if (!isEmptyValue(value) && secondAttribute && value.hasOwnProperty(secondAttribute)) {
+      value = value[secondAttribute]
+    }
+
+    // compare item to search
+    if (value === attributeValue) {
+      return treeData
+    }
+
+    const found = recursiveTreeSearch({
+      treeData: treeData[attributeChilds],
+      attributeValue,
+      attributeName,
+      secondAttribute,
+      attributeChilds
+    })
+    return found
+  }
+}
 
 /**
  *
@@ -290,76 +361,3 @@ export function parsedValueComponent({ fieldType, value, referenceType, isMandat
   }
   return returnValue
 }
-
-/**
- * Find element in an array recursively
- * @param {object|array} treeData
- * @param {string} attributeName, key to get value, default id
- * @param {mixed}  attributeValue, value to compare with search
- * @param {string} attributeChilds, childs list into element
- */
-export const recursiveTreeSearch = ({
-  treeData,
-  attributeValue,
-  attributeName = 'id',
-  secondAttribute = false,
-  attributeChilds = 'childsList',
-  isParent = false
-}) => {
-  if (Array.isArray(treeData)) {
-    let index = 0
-    const length = treeData.length
-    while (index < length) {
-      // ESTA MIERDA NO SIRVE PORQUE LOS ATRIBTO
-      let value = treeData[index]
-      if (!isEmptyValue(value) && value.hasOwnProperty(attributeName)) {
-        value = value[attributeName]
-      }
-      if (!isEmptyValue(value) && secondAttribute && value.hasOwnProperty(secondAttribute)) {
-        value = value[secondAttribute]
-      }
-
-      // compare item to search
-      if (value === attributeValue) {
-        return treeData[index]
-      }
-
-      if (treeData[index] && treeData[index][attributeChilds]) {
-        const found = recursiveTreeSearch({
-          treeData: treeData[index][attributeChilds],
-          attributeValue,
-          attributeName,
-          secondAttribute,
-          attributeChilds,
-          isParent
-        })
-        if (found) {
-          return found
-        }
-      }
-      index++
-    }
-  } else {
-    let value = treeData
-    if (!isEmptyValue(value) && value.hasOwnProperty(attributeName)) {
-      value = value[attributeName]
-    }
-    if (!isEmptyValue(value) && secondAttribute && value.hasOwnProperty(secondAttribute)) {
-      value = value[secondAttribute]
-    }
-
-    // compare item to search
-    if (value === attributeValue) {
-      return treeData
-    }
-
-    const found = recursiveTreeSearch({
-      treeData: treeData[attributeChilds],
-      attributeValue,
-      attributeName,
-      secondAttribute,
-      attributeChilds
-    })
-    return found
-  }
-}

src/views/ADempiere/Window/index.vue

@@ -21,12 +21,14 @@
                             :icon="iconIsShowedRecordNavigation"
                             circle
                             style="margin-left: 10px;"
+                            class="el-button-window"
                             @click="handleChangeShowedRecordNavigation()"
                           />
                           <el-button
                             v-show="!isPanel"
                             :icon="iconIsShowedAside"
                             circle
+                            class="el-button-window"
                             @click="handleChangeShowedPanel()"
                           />
                         </div>
@@ -42,6 +44,7 @@
                             v-show="isPanel"
                             icon="el-icon-caret-left"
                             circle
+                            class="el-button-window"
                             @click="handleChangeShowedPanel()"
                           />
                         </div>
@@ -77,7 +80,7 @@
                           class="tab-window"
                         />
                         <div style="right: 0%;top: 40%;position: absolute;">
-                          <el-button v-show="!show" type="info" icon="el-icon-info" circle style="float: right;" @click="conteInfo" />
+                          <el-button v-show="!show" type="info" icon="el-icon-info" circle style="float: right;" class="el-button-window" @click="conteInfo" />
                         </div>
                         <div class="small-4 columns">
                           <div class="wrapper">
@@ -92,6 +95,7 @@
                               icon="el-icon-caret-top"
                               :class="classIsMobile"
                               circle
+                              type="primary"
                               @click="handleChangeShowedTabChildren()"
                             />
                           </div>
@@ -108,6 +112,7 @@
                               :icon="iconIsShowedRecordNavigation"
                               class="open-navegation"
                               circle
+                              type="primary"
                               @click="handleChangeShowedRecordNavigation()"
                             />
                           </div>
@@ -124,6 +129,7 @@
                             <el-button
                               icon="el-icon-caret-bottom"
                               circle
+                              class="el-button-window"
                               @click="handleChangeShowedTabChildren()"
                             />
                           </div>
@@ -145,7 +151,7 @@
         <SplitArea :size="show ? 30 : 0">
           <el-main>
             <div style="top: 40%;position: absolute;">
-              <el-button v-show="show" type="info" icon="el-icon-info" circle style="float: right;" @click="conteInfo" />
+              <el-button v-show="show" type="info" icon="el-icon-info" circle style="float: right;" class="el-button-window" @click="conteInfo" />
             </div>
             <div id="example-1">
               <transition name="slide-fade">
@@ -163,7 +169,7 @@
                             v-for="(listLogs, index) in getTypeLogs"
                             :key="index"
                           >
-                            <el-scrollbar wrap-class="scroll">
+                            <el-scrollbar wrap-class="scroll-window-log-change">
                               <el-timeline>
                                 <el-timeline-item
                                   v-for="(evenType, key) in listLogs.logs"
@@ -180,7 +186,7 @@
                                     <br>
                                     <el-collapse-transition>
                                       <div v-show="(currentKey === key) && (typeAction === index)" :key="key" class="text item">
-                                        <span><p><b><i> {{ evenType.displayColumnName }}:  </i></b> <strike>{{ evenType.oldDisplayValue }} </strike>     {{ evenType.newDisplayValue }}</p></span>
+                                        <span><p><b> {{ evenType.displayColumnName }}: </b> <strike>{{ evenType.oldDisplayValue }} </strike>     {{ evenType.newDisplayValue }}</p></span>
                                       </div>
                                     </el-collapse-transition>
                                   </el-card>
@@ -208,35 +214,49 @@
                           <el-card
                             class="box-card"
                           >
-                            <el-timeline>
-                              <el-timeline-item
-                                v-for="(workflow,index) in gettersListWorkflow"
-                                :key="index"
-                                :timestamp="translateDate(workflow.logDate)"
-                                placement="top"
-                              >
-                                <el-card shadow="hover">
-                                  <div slot="header" class="clearfix">
-                                    <span> {{ workflow.workflowName }} </span>
-                                  </div>
-                                  <div>
-                                    <el-steps
-                                      :space="200"
-                                      :active="workflow.workflowState"
-                                      align-center
-                                      process-status="process"
-                                    >
-                                      <el-step
-                                        v-for="(nodeList, key) in workflow.workflowEventsList"
-                                        :key="key"
-                                        :title="nodeList.nodeName"
-                                        :description="$t('login.userName')+ '' + nodeList.userName"
-                                      />
-                                    </el-steps>
-                                  </div>
-                                </el-card>
-                              </el-timeline-item>
-                            </el-timeline>
+                            <el-scrollbar wrap-class="scroll-window-log-workflow">
+                              <el-timeline>
+                                <el-timeline-item
+                                  v-for="(workflow,index) in gettersListWorkflow"
+                                  :key="index"
+                                  :timestamp="translateDate(workflow.logDate)"
+                                  placement="top"
+                                >
+                                  <el-card shadow="hover">
+                                    <div slot="header" class="clearfix">
+                                      <span> {{ workflow.workflowName }} </span>
+                                    </div>
+                                    <div>
+                                      <el-steps
+                                        :active="workflow.workflowEventsList.length"
+                                        align-center
+                                        finish-status="success"
+                                      >
+                                        <el-step
+                                          v-for="(nodeList, key) in workflow.workflowEventsList"
+                                          :key="key"
+                                        >
+                                          <span slot="title">
+                                            <el-popover
+                                              placement="top-start"
+                                              width="400"
+                                              trigger="hover"
+                                            >
+                                              <p><b> {{ $t('login.userName') }}:</b> {{ nodeList.userName }} </p>
+                                              <p v-if="!isEmptyValue(nodeList.textMessage)"><b> {{ $t('window.containerInfo.logWorkflow.message') }}:</b> {{ nodeList.textMessage }} </p>
+                                              <p><b> {{ $t('window.containerInfo.logWorkflow.responsible') }}:</b>  {{ nodeList.responsibleName }} </p>
+                                              <p><b> {{ $t('window.containerInfo.logWorkflow.workflowName') }}:</b>  {{ nodeList.workflowStateName }} </p>
+                                              <p><b> {{ $t('window.containerInfo.logWorkflow.timeElapsed') }}:</b>  {{ nodeList.timeElapsed }} </p>
+                                              <el-button slot="reference" type="text"> {{ nodeList.nodeName }} </el-button>
+                                            </el-popover>
+                                          </span>
+                                        </el-step>
+                                      </el-steps>
+                                    </div>
+                                  </el-card>
+                                </el-timeline-item>
+                              </el-timeline>
+                            </el-scrollbar>
                           </el-card>
                         </div>
                         <div
@@ -259,21 +279,23 @@
                             <div slot="header" class="clearfix">
                               <span>{{ $t('window.containerInfo.notes') }} {{ gettersLisRecordChats[0].description }} </span>
                             </div>
-                            <el-timeline>
-                              <el-timeline-item
-                                v-for="(chats, key) in gettersLischat"
-                                :key="key"
-                                :timestamp="translateDate(chats.logDate)"
-                                placement="top"
-                              >
-                                <el-card shadow="hover">
-                                  <div>
-                                    <span>{{ chats.userName }}</span>
-                                    <span>{{ chats.characterData }}</span>
-                                  </div>
-                                </el-card>
-                              </el-timeline-item>
-                            </el-timeline>
+                            <el-scrollbar wrap-class="scroll-window-log-chat">
+                              <el-timeline>
+                                <el-timeline-item
+                                  v-for="(chats, key) in gettersLischat"
+                                  :key="key"
+                                  :timestamp="translateDate(chats.logDate)"
+                                  placement="top"
+                                >
+                                  <el-card shadow="hover">
+                                    <div>
+                                      <span>{{ chats.userName }}</span>
+                                      <span>{{ chats.characterData }}</span>
+                                    </div>
+                                  </el-card>
+                                </el-timeline-item>
+                              </el-timeline>
+                            </el-scrollbar>
                           </el-card>
                         </div>
                         <div
@@ -771,7 +793,7 @@ export default {
     top: 2%;
     left: 1%;
   }
-  .el-button {
+  .el-button-window {
     cursor: pointer;
     background: #FFFFFF;
     border: 1px solid #DCDFE6;
@@ -799,6 +821,15 @@ export default {
 }
 </style>
 <style>
+  .scroll-window-log-change {
+    max-height: 45vh !important;
+  }
+  .scroll-window-log-workflow {
+    max-height: 68vh !important;
+  }
+  .scroll-window-log-chat {
+    max-height: 68vh !important;
+  }
   .el-card__header {
     background: rgba(245, 247, 250, 0.75);
     padding: 18px 20px;