Add guide (#1002)

Co-authored-by: elsiosanchez <elsiossanches@gmail.com>

Author: elsiosanchez

src/components/ADempiere/Form/WorkflowActivity/Guide/steps.js

@@ -0,0 +1,28 @@
+import language from '@/lang'
+const steps = [
+  {
+    element: '#WorkflowActivity',
+    popover: {
+      title: language.t('form.activity.guide.table.title'),
+      description: language.t('form.activity.guide.table.description'),
+      position: 'bottom'
+    }
+  },
+  {
+    element: '#workflow',
+    popover: {
+      title: language.t('form.activity.guide.workflow.title'),
+      description: language.t('form.activity.guide.workflow.description'),
+      position: 'bottom'
+    }
+  },
+  {
+    element: '#logsWorkflow',
+    popover: {
+      title: language.t('form.activity.guide.workflowLogs.title'),
+      description: language.t('form.activity.guide.workflowLogs.description'),
+      position: 'top'
+    }
+  }
+]
+export default steps

src/components/ADempiere/Form/WorkflowActivity/index.vue

@@ -15,7 +15,7 @@
 -->
 <template>
   <el-container style="height: 100% !important;">
-    <el-header id="WorkflowActivity" class="header" :style="!collapse ? 'height: 35% !important;' : 'height: 10%!important'">
+    <el-header id="WorkflowActivity" class="header" :style="!collapse ? 'height: 45% !important;' : 'height: 10%!important'">
       <el-card :style="!collapse ? 'height: 100% !important;' : 'height: auto'">
         <div slot="header">
           <span> {{ $t('form.activity.title') }} </span>
@@ -44,7 +44,7 @@
     </el-header>
     <el-main class="main">
       <el-container style="height: 100%;">
-        <el-aside v-if="!isEmptyValue(currentActivity)" width="70%" style="background: white;">
+        <el-aside v-if="!isEmptyValue(currentActivity)" id="workflow" width="70%" style="background: white;">
           <transition name="el-zoom-in-center">
             <el-card v-show="show" :style="{position: 'absolute', zIndex: '5', left: leftContextualMenu + 'px', top: topContextualMenu + 'px'}" class="box-card">
               <div slot="header" class="clearfix">
@@ -78,8 +78,8 @@
             @state-click="onLabelClicked(node, $event)"
           />
         </el-aside>
-        <el-main v-if="!isEmptyValue(currentActivity)">
-          <el-card class="box-card">
+        <el-main v-if="!isEmptyValue(currentActivity)" style="overflow: hidden;">
+          <el-card id="logsWorkflow" class="box-card">
             <div slot="header" class="clearfix">
               {{ $t('field.logsField') }}
             </div>
@@ -99,24 +99,6 @@
         </el-main>
       </el-container>
     </el-main>
-    <el-footer :class="styleFooter">
-      <el-card shadow="hover" class="search">
-        <el-form v-if="!isEmptyValue(fieldsList)" :disabled="isEmptyValue(currentActivity)" label-position="top" class="from-main">
-          <el-form-item>
-            <el-row>
-              <el-col v-for="(field, index) in fieldsList" :key="index" :span="6">
-                <field
-                  :key="field.columnName"
-                  :metadata-field="field"
-                  :v-model="field.value"
-                />
-              </el-col>
-            </el-row>
-          </el-form-item>
-        </el-form>
-        <el-button type="primary" icon="el-icon-check" style="float: right;" :disabled="isEmptyValue(currentActivity)" />
-      </el-card>
-    </el-footer>
   </el-container>
 </template>
 

src/lang/ADempiere/en.js

@@ -566,6 +566,14 @@ export default {
       table: {
         priority: 'Priority',
         node: 'Node'
+      },
+      workflow: {
+        title: 'Workflow',
+        description: 'Workflow life cycle diagram. The highlighted Node is the one currently awaiting verification.'
+      },
+      workflowLogs: {
+        title: 'Change Log',
+        description: 'Workflow timeline'
       }
     }
   }

src/lang/ADempiere/es.js

@@ -57,7 +57,7 @@ export default {
   navbar: {
     badge: {
       Notifications: 'Notificaciones',
-      activity: 'Actividades pendiente',
+      activity: 'Flujos de Trabajos por Aprobar',
       link: 'Ir a Histórico de Procesos'
     },
     logOut: 'Salir',
@@ -542,6 +542,20 @@ export default {
       table: {
         priority: 'Prioridad',
         node: 'Nodo'
+      },
+      guide: {
+        table: {
+          title: 'Lista de Flujos de trabajos por aprobar',
+          description: 'Seleccione al menos uno para ver el detalle y responsable de aprobación. De igual manera puede decidir si aprueba, rechaza o redirecciona el mismo'
+        },
+        workflow: {
+          title: 'Flujo de Trabajo',
+          description: 'Diagrama del ciclo de vida del flijo de trabajo. El Nodo resaltado es el que se encuentra actualmente a la espera de verificación.'
+        },
+        workflowLogs: {
+          title: 'Bitacora de Cambios',
+          description: 'Linea de tiempo del flujo de trabajo'
+        }
       }
     }
   }

src/layout/components/Navbar.vue

@@ -68,7 +68,6 @@ import Badge from '@/components/ADempiere/Badge'
 import { getImagePath } from '@/utils/ADempiere/resource.js'
 import Driver from 'driver.js' // import driver.js
 import 'driver.js/dist/driver.min.css' // import driver.js css
-import steps from '@/components/ADempiere/Form/VPOS/Guide/steps'
 
 export default {
   components: {
@@ -134,6 +133,26 @@ export default {
         return list.filter(field => field.isShowedFromUserDefault)
       }
       return []
+    },
+    getForm() {
+      return this.$store.getters.getForm(this.$route.meta.uuid)
+    },
+    formSteps() {
+      let form
+      switch (this.getForm.fileName) {
+        case 'WFActivity':
+          form = require('@/components/ADempiere/Form/WorkflowActivity/Guide/steps')
+          break
+        case 'VPOS':
+          form = require('@/components/ADempiere/Form/VPOS/Guide/steps')
+          break
+        default:
+          form = {
+            default: []
+          }
+          break
+      }
+      return form.default
     }
   },
   mounted() {
@@ -202,7 +221,7 @@ export default {
           })
           break
         case 'form':
-          field = this.showCollection && this.isShowedPOSKeyLaout ? steps : steps.filter(steps => this.isEmptyValue(steps.panel))
+          field = this.formSteps
           break
       }
       return field