Add Image to User to Assigned (PanJiaChen#2852)

* Add Image to User to Assigned * Add Paginations * minimal change * Minimal changes
EdwinBetanc0urt · Oct 22, 2024 · d339f03 · d339f03
1 parent 4435972
commit d339f03
Show file tree

Hide file tree

Showing 7 changed files with 163 additions and 23 deletions.
diff --git a/src/api/ADempiere/user-interface/component/issue.js b/src/api/ADempiere/user-interface/component/issue.js
@@ -50,11 +50,13 @@ export function requestExistsIssues({
  * @param {string} searchValue
  */
 export function requestListIssues({
+  pageSize,
   recordId,
   tableName,
+  pageToken,
+  categoryId,
   searchValue,
   groupId = 0,
-  categoryId = 0,
   statusId = 0,
   projectId = 0,
   priorityValue,
@@ -66,12 +68,14 @@ export function requestListIssues({
     url: `/issue-management/issues`,
     method: 'get',
     params: {
+      // page_size: pageSize,
+      // page_token: pageToken,
       group_id: groupId,
       record_id: recordId,
-      category_id: categoryId,
       status_id: statusId,
       table_name: tableName,
       project_id: projectId,
+      category_id: categoryId,
       search_value: searchValue,
       priority_value: priorityValue,
       status_category_id: statusCategory,
@@ -89,10 +93,12 @@ export function requestListIssues({
  */
 
 export function requestListIssuesAll({
+  pageSize,
   recordId,
   tableName,
-  searchValue,
+  pageToken,
   categoryId,
+  searchValue,
   groupId = 0,
   statusId = 0,
   projectId = 0,
@@ -105,6 +111,8 @@ export function requestListIssuesAll({
     url: `/issue-management/issues/all`,
     method: 'get',
     params: {
+      page_size: pageSize,
+      page_token: pageToken,
       group_id: groupId,
       record_id: recordId,
       status_id: statusId,

diff --git a/src/components/ADempiere/DataTable/Components/CustomPagination.vue b/src/components/ADempiere/DataTable/Components/CustomPagination.vue
@@ -129,6 +129,10 @@ export default defineComponent({
     isShowedSelected: {
       type: Boolean,
       default: false
+    },
+    isEmptyIndex: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -188,6 +192,7 @@ export default defineComponent({
     })
 
     const currentIndex = computed(() => {
+      if (props.isEmptyIndex) return ''
       if (!isEmptyValue(props.rowIndex) || !isEmptyValue(props.rowUid)) {
         return indexRowByPage({
           indexRow: props.rowIndex,

diff --git a/src/components/ADempiere/Form/Issues/ListIssues/index.vue b/src/components/ADempiere/Form/Issues/ListIssues/index.vue
@@ -281,7 +281,7 @@
         </el-collapse>
         <br>
       </el-card>
-      <div v-if="!isEdit && !isKanban" class="table-list-request" :style="isEdit ? 'max-height: 78vh;' : 'max-height: 85vh;'">
+      <div v-if="!isEdit && !isKanban" class="table-list-request" :style="isEdit ? 'max-height: 78vh;' : 'height: -webkit-fill-available;'">
         <el-empty v-if="isEmptyValue(listIssues)" />
         <span
           v-else
@@ -296,6 +296,21 @@
               :record-id="recordId"
             />
           </span>
+          <el-row v-if="isAll">
+            <el-col :span="24">
+              <custom-pagination
+                :total-records="recordCount"
+                :is-showed-selected="false"
+                :page-number="pageNumber"
+                :page-size="pageSize"
+                :is-empty-index="true"
+                :handle-change-page-number="setPageNumber"
+                :handle-change-page-size="setPageSize"
+              />
+              <br>
+              <br>
+            </el-col>
+          </el-row>
         </span>
       </div>
       <div
@@ -424,7 +439,7 @@ import DraggableElements from 'vuedraggable'
 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'
-
+import CustomPagination from '@/components/ADempiere/DataTable/Components/CustomPagination.vue'
 // Utils and Helper Methods
 import { showMessage } from '@/utils/ADempiere/notification'
 
@@ -449,6 +464,7 @@ export default defineComponent({
     IssueRow,
     // Editor
     KanbanIssues,
+    CustomPagination,
     DraggableElements,
     ProgressPercentage
   },
@@ -515,6 +531,18 @@ export default defineComponent({
       return store.getters.getListKanbanGroup
     })
 
+    const recordCount = computed(() => {
+      return store.getters.geIssuesData.recordCount
+    })
+
+    const pageNumber = computed(() => {
+      return store.getters.geIssuesData.pageNumber
+    })
+
+    const pageSize = computed(() => {
+      return store.getters.geIssuesData.pageSize
+    })
+
     function newIssues(issue) {
       isNewIssues.value = !isNewIssues.value
       store.dispatch('changeCurrentIssues', issue)
@@ -834,7 +862,10 @@ export default defineComponent({
         })
     }
 
-    function updateListIssues() {
+    function updateListIssues({
+      pageNumber,
+      pageSize
+    }) {
       if (isAll.value) {
         store.dispatch('listRequestAll', {
           businessPartnerId: isEmptyValue(businessPartnerField.value) ? 0 : businessPartnerField.value,
@@ -843,7 +874,9 @@ export default defineComponent({
           statusId: isEmptyValue(statusField.value) ? 0 : statusField.value,
           groupId: isEmptyValue(groupField.value) ? 0 : groupField.value,
           taskStatusValue: taskStatusField.value,
-          priorityValue: priorityField.value
+          priorityValue: priorityField.value,
+          pageNumber,
+          pageSize
         })
           .finally(() => {
             loadIssues()
@@ -857,7 +890,9 @@ export default defineComponent({
         statusId: isEmptyValue(statusField.value) ? 0 : statusField.value,
         groupId: isEmptyValue(groupField.value) ? 0 : groupField.value,
         taskStatusValue: taskStatusField.value,
-        priorityValue: priorityField.value
+        priorityValue: priorityField.value,
+        pageNumber,
+        pageSize
       })
         .finally(() => {
           loadIssues()
@@ -959,12 +994,26 @@ export default defineComponent({
       }, 500)
     }
 
+    function setPageNumber(pageNumber) {
+      updateListIssues({
+        pageNumber
+      })
+    }
+    function setPageSize(pageSize) {
+      updateListIssues({
+        pageSize
+      })
+    }
+
     return {
       statusesExpand,
       listKanbanGroup,
       updateDragStatus,
       isloadinUpdateKanban,
       //
+      pageSize,
+      pageNumber,
+      recordCount,
       timeOut,
       isEdit,
       isKanban,
@@ -1009,6 +1058,8 @@ export default defineComponent({
       findCategory,
       activeKanban,
       updateStatus,
+      setPageNumber,
+      setPageSize,
       activeGruop,
       findProject,
       findStatus,

diff --git a/src/components/ADempiere/FormDefinition/IssueManagement/IssuesList/issueRow.vue b/src/components/ADempiere/FormDefinition/IssueManagement/IssuesList/issueRow.vue
@@ -92,11 +92,7 @@
                   effect="plain"
                 >
                   <i style="font-size: 12px;color: #82848a;">
-                    <b>
-                      <svg-icon icon-class="user" />
-                      <!-- {{ $t('issues.businessPartner') }} : -->
-                    </b>
-                    {{ metadata.business_partner.name }}
+                    <issue-avatar :user="metadata.business_partner" :table-name="TABLE_NAME_C_BPARTNER" />
                   </i>
                 </span>
               </p>
@@ -251,10 +247,10 @@ import store from '@/store'
 import IssuePreview from '@/components/ADempiere/FormDefinition/IssueManagement/IssuesList/issuePreview.vue'
 import IssueRecordTime from '@/components/ADempiere/FormDefinition/IssueManagement/IssueRecordTime/index.vue'
 import ProgressPercentage from '@/components/ADempiere/ContainerOptions/ProgressPercentage.vue'
-
+import IssueAvatar from '@/components/ADempiere/FormDefinition/IssueManagement/issueAvatar.vue'
 // Constants
 import { REQUEST_WINDOW_UUID } from '@/utils/ADempiere/dictionary/form/Issues.js'
-
+import { TABLE_NAME_C_BPARTNER } from '@/utils/ADempiere/constants/resoucer.ts'
 // Utils and Helper Methods
 import { formatDate } from '@/utils/ADempiere/formatValue/dateFormat'
 import { zoomIn } from '@/utils/ADempiere/coreUtils.js'
@@ -264,6 +260,7 @@ export default defineComponent({
   name: 'IssueRow',
 
   components: {
+    IssueAvatar,
     IssuePreview,
     IssueRecordTime,
     ProgressPercentage
@@ -309,6 +306,8 @@ export default defineComponent({
     }
 
     return {
+      // Const
+      TABLE_NAME_C_BPARTNER,
       // Computed
       isNewIssues,
       // Methods

diff --git a/src/components/ADempiere/FormDefinition/IssueManagement/issueAvatar.vue b/src/components/ADempiere/FormDefinition/IssueManagement/issueAvatar.vue
@@ -46,6 +46,7 @@ import store from '@/store'
 
 // Utils and Helper Methods
 import { pathImageWindows } from '@/utils/ADempiere/resource.js'
+import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
 // Constants
 import { COLUMN_NAME, TABLE_NAME_USER } from '@/utils/ADempiere/constants/resoucer.ts'
 
@@ -56,6 +57,10 @@ export default defineComponent({
     user: {
       type: Object,
       default: () => {}
+    },
+    tableName: {
+      type: String,
+      default: TABLE_NAME_USER
     }
   },
 
@@ -74,7 +79,7 @@ export default defineComponent({
     const imageURL = computed(() => {
       return pathImageWindows({
         clientId: clientId.value,
-        tableName: TABLE_NAME_USER,
+        tableName: isEmptyValue(props.tableName) ? TABLE_NAME_USER : props.tableName,
         recordId: props.user.id,
         columnName: COLUMN_NAME,
         resourceName: `${COLUMN_NAME}.png`