feat: Start time traking. (PanJiaChen#1939)

EdwinBetanc0urt · Feb 20, 2024 · 549b367 · 549b367
1 parent 3135fdd
commit 549b367
Show file tree

Hide file tree

Showing 13 changed files with 207 additions and 55 deletions.
diff --git a/src/components/ADempiere/Form/Issues/ListIssues/index.vue b/src/components/ADempiere/Form/Issues/ListIssues/index.vue
@@ -229,7 +229,6 @@ import lang from '@/lang'
 
 // Components and Mixins
 import DraggableElements from 'vuedraggable'
-import RecordTime from '@/components/ADempiere/Form/Issues/recordTime.vue'
 import IssueRow from '@/components/ADempiere/FormDefinition/IssueManagement/IssuesList/issueRow.vue'
 import KanbanIssues from '@/components/ADempiere/Form/Issues/ListIssues/kanban.vue'
 import ProgressPercentage from '@/components/ADempiere/ContainerOptions/ProgressPercentage.vue'
@@ -252,7 +251,6 @@ export default defineComponent({
     // Editor
     KanbanIssues,
     DraggableElements,
-    RecordTime,
     ProgressPercentage
   },
 

diff --git a/src/components/ADempiere/Form/Issues/ListIssues/kanban.vue b/src/components/ADempiere/Form/Issues/ListIssues/kanban.vue
@@ -279,7 +279,6 @@ import {
 import store from '@/store'
 
 // Components and Mixins
-// import RecordTime from '@/components/ADempiere/Form/Issues/recordTime.vue'
 import ProgressPercentage from '@/components/ADempiere/ContainerOptions/ProgressPercentage.vue'
 
 // Utils and Helper Methods
@@ -290,7 +289,6 @@ export default defineComponent({
   name: 'IssuesKanban',
 
   components: {
-  //   RecordTime,
     ProgressPercentage
   },
 

diff --git a/src/components/ADempiere/Form/Issues/component/Comment.vue b/src/components/ADempiere/Form/Issues/component/Comment.vue
@@ -308,7 +308,7 @@
                     trigger="click"
                     width="450"
                   >
-                    <record-time
+                    <issue-record-time
                       :issue-id="currentIssues.id"
                     />
                     <el-button slot="reference" type="text">
@@ -1008,7 +1008,7 @@
                     trigger="click"
                     width="450"
                   >
-                    <record-time
+                    <issue-record-time
                       :issue-id="currentIssues.id"
                     />
                     <el-button slot="reference" type="text">
@@ -1518,7 +1518,7 @@ import IssueAvatar from '@/components/ADempiere/FormDefinition/IssueManagement/i
 import IssueCommentAdd from '@/components/ADempiere/FormDefinition/IssueManagement/IssueFeed/issueCommentAdd.vue'
 import IssueCommentView from '@/components/ADempiere/FormDefinition/IssueManagement/IssueFeed/issueCommentView.vue'
 import IssueLog from '@/components/ADempiere/FormDefinition/IssueManagement/IssueFeed/issueLog.vue'
-import RecordTime from '../recordTime.vue'
+import IssueRecordTime from '@/components/ADempiere/FormDefinition/IssueManagement/IssueRecordTime/index.vue'
 
 // Constants
 import { REQUEST_WINDOW_UUID } from '@/utils/ADempiere/dictionary/form/Issues.js'
@@ -1551,7 +1551,7 @@ export default defineComponent({
     IssueCommentAdd,
     IssueCommentView,
     IssueLog,
-    RecordTime
+    IssueRecordTime
   },
 
   props: {

diff --git a/...ents/ADempiere/Form/Issues/recordTime.vue → ...IssueManagement/IssueRecordTime/index.vue b/...ents/ADempiere/Form/Issues/recordTime.vue → ...IssueManagement/IssueRecordTime/index.vue
@@ -19,9 +19,10 @@
 <template>
   <el-form
     label-position="top"
-    class="time-record-issue form-min-label"
+    size="mini"
+    class="time-record-issue form-base"
   >
-    <el-row style="padding-bottom: 10px;" :gutter="20">
+    <el-row :gutter="20">
       <el-col :span="12">
         <el-form-item
           :label="$t('form.timeRecord.date')"
@@ -49,35 +50,50 @@
         </el-form-item>
       </el-col>
 
-      <el-col :span="12">
+      <el-col :span="24">
         <el-form-item
           :label="$t('form.timeRecord.description')"
         >
           <el-input
             v-model="description"
             type="textarea"
-            autosize
+            :rows="3"
           />
         </el-form-item>
       </el-col>
 
       <el-col :span="12">
         <el-form-item
-          :label="$t('form.timeRecord.quantity')"
+          :label="$t('form.timeRecord.quantity') + ' (H)'"
           :rules="{
             required: true
           }"
         >
           <el-input-number
             v-model="quantity"
+            :disabled="timer != null"
             controls-position="right"
             :precision="2"
+            :min="0"
             style="width: -webkit-fill-available;"
+            @change="changeQuantityToTime"
+          />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item
+          :label="$t('form.timeRecord.time') + ' (HH:MM:SS)'"
+        >
+          <el-input
+            v-model="time"
+            disabled
           />
         </el-form-item>
       </el-col>
 
-      <!-- <el-col :span="24">
+      <!--
+      <el-col :span="24">
         <el-form-item
           :label="$t('form.timeRecord.project')"
         >
@@ -95,10 +111,38 @@
             />
           </el-select>
         </el-form-item>
-      </el-col> -->
+      </el-col>
+      -->
 
-      <el-col :span="24">
+      <el-col :span="24" style="padding-top: 5px;">
         <samp style="float: right; paddint-top: 4px;">
+          <el-button
+            v-if="timer == null"
+            type="success"
+            class="button-base-icon"
+            plain
+            @click="play();"
+          >
+            <svg-icon icon-class="play-circle" />
+          </el-button>
+          <el-button
+            v-else
+            type="warning"
+            class="button-base-icon"
+            plain
+            @click="play();"
+          >
+            <svg-icon icon-class="pause-circle" />
+          </el-button>
+          <el-button
+            type="danger"
+            class="button-base-icon"
+            plain
+            @click="clear();"
+          >
+            <svg-icon icon-class="stop-circle" />
+          </el-button>
+
           <el-button
             type="info"
             class="button-base-icon"
@@ -154,6 +198,20 @@ export default defineComponent({
     const date = ref(new Date())
     const quantity = ref(0)
 
+    const seconds = ref(0)
+    const minutes = ref(0)
+    const hours = ref(0)
+    const timer = ref(null)
+
+    const time = computed({
+      get() {
+        return `${zeroFill(hours.value)}:${zeroFill(minutes.value)}:${zeroFill(seconds.value)}`
+      },
+      set(newValue) {
+        //
+      }
+    })
+
     // const listRequest = ref([])
     const listProjects = ref([])
 
@@ -192,6 +250,7 @@ export default defineComponent({
       description.value = ''
       quantity.value = 0
       date.value = new Date()
+      clear()
     }
 
     /**
@@ -229,6 +288,92 @@ export default defineComponent({
         })
     }
 
+    function changeQuantityToTime(quantityValue) {
+      if (isEmptyValue(quantityValue) || quantityValue <= 0) {
+        return clear()
+      }
+      if (quantityValue < 1) {
+        const minutesToQuantity = quantityValue * 60
+        minutes.value = Number.parseInt(minutesToQuantity)
+      } else if (quantityValue > 0) {
+        const hoursToQuantity = Math.abs(quantityValue)
+        if (!Number.isInteger(quantityValue)) {
+          const decimalHours = hoursToQuantity - Math.floor(hoursToQuantity)
+          const minutesToQuantity = decimalHours * 60
+          minutes.value = Number.parseInt(minutesToQuantity)
+          hours.value = hoursToQuantity - decimalHours
+        } else {
+          hours.value = quantityValue
+        }
+      }
+    }
+
+    function changeTimeToQuantity(timeValue) {
+      if (isEmptyValue(timeValue) || String(timeValue) === '00:00:00') {
+        return
+      }
+
+      let quantityToMinutes = 0
+      if (minutes.value > 0) {
+        quantityToMinutes = minutes.value / 60
+      }
+
+      let quantityToHours = 0
+      if (hours.valie > 0) {
+        quantityToHours = hours.value / 0.6
+      }
+
+      quantity.value = quantityToHours + quantityToMinutes
+    }
+
+    function zeroFill(number) {
+      if (isEmptyValue(number)) {
+        return '00'
+      }
+      return number.toString().padStart(2, 0)
+    }
+
+    function play() {
+      if (timer.value === null) {
+        playing()
+        timer.value = setInterval(() => {
+          playing()
+        }, 1000)
+      } else {
+        clearInterval(timer.value)
+        timer.value = null
+        pause()
+      }
+    }
+
+    function playing() {
+      seconds.value++
+      if (seconds.value >= 59) {
+        seconds.value = 0
+        minutes.value++
+      }
+      if (minutes.value >= 59) {
+        minutes.value = 0
+        hours.value++
+      }
+      changeTimeToQuantity(time.value)
+    }
+
+    function pause() {
+    }
+
+    function clear() {
+      if (timer.value !== null) {
+        clearInterval(timer.value)
+        timer.value = null
+      }
+      seconds.value = 0
+      minutes.value = 0
+      hours.value = 0
+      //
+      quantity.value = 0
+    }
+
     return {
       name,
       description,
@@ -237,11 +382,21 @@ export default defineComponent({
       isLoadingCreate,
       listProjects,
       //
+      timer,
+      time,
+      hours,
+      minutes,
+      seconds,
+      //
       isValidateAdd,
       //
       geProjectsList,
       clearFormValues,
-      addTimeRecord
+      addTimeRecord,
+      changeQuantityToTime,
+      //
+      clear,
+      play
     }
   }
 })
@@ -250,25 +405,8 @@ export default defineComponent({
 <style lang="scss">
 .time-record-issue {
   .el-form-item {
-    margin-bottom: 12px !important;
-    margin-left: 10px;
-    margin-right: 10px;
-  }
-
-  /**
-   * Reduce the spacing between the form element and its label
-   */
-  .el-form-item__label {
-    padding-bottom: 0px !important;
-  }
-
-  .el-input, .el-input-number, .el-select {
-    width: 100%;
-  }
-
-  .el-input-number {
-    .el-input__inner {
-      text-align-last: end !important;
+    &.el-form-item--mini {
+      margin-bottom: 7px !important;
     }
   }
 }

diff --git a/src/components/ADempiere/FormDefinition/IssueManagement/IssuesList/issueRow.vue b/src/components/ADempiere/FormDefinition/IssueManagement/IssuesList/issueRow.vue
@@ -213,11 +213,11 @@
             <el-popover
               ref="timeRecord"
               placement="left"
-              :title="$t('form.timeRecord.timeRecord') + ' (' + metadata.id + ')'"
+              :title="$t('form.timeRecord.timeRecord') + ' (#' + metadata.document_no + ')'"
               trigger="click"
               width="450"
             >
-              <record-time
+              <issue-record-time
                 :issue-id="metadata.id"
               />
               <el-button
@@ -249,7 +249,7 @@ import store from '@/store'
 
 // Components and Mixins
 import IssuePreview from '@/components/ADempiere/FormDefinition/IssueManagement/IssuesList/issuePreview.vue'
-import RecordTime from '@/components/ADempiere/Form/Issues/recordTime.vue'
+import IssueRecordTime from '@/components/ADempiere/FormDefinition/IssueManagement/IssueRecordTime/index.vue'
 import ProgressPercentage from '@/components/ADempiere/ContainerOptions/ProgressPercentage.vue'
 
 // Constants
@@ -265,7 +265,7 @@ export default defineComponent({
 
   components: {
     IssuePreview,
-    RecordTime,
+    IssueRecordTime,
     ProgressPercentage
   },
 

diff --git a/src/components/ADempiere/FormDefinition/IssueManagement/index.vue b/src/components/ADempiere/FormDefinition/IssueManagement/index.vue
@@ -41,7 +41,6 @@ import store from '@/store'
 
 // Components and Mixins
 import Comment from '@/components/ADempiere/Form/Issues/component/Comment.vue'
-import RecordTime from '@/components/ADempiere/Form/Issues/recordTime.vue'
 import ListIssues from '@/components/ADempiere/Form/Issues/ListIssues/index.vue'
 
 export default defineComponent({
@@ -50,8 +49,7 @@ export default defineComponent({
   components: {
     // Editor
     Comment,
-    ListIssues,
-    RecordTime
+    ListIssues
   },
 
   props: {