Design QA - 2 (Sage300/MSDynamics) (#441)

* Generic QA items Sage300/MSD * exportlog dialog sub header * shimmers fix * Line Height * line height -2 * add height to row * width for dropdown * Shimmers and msd dashboard fix * removed onChanges * cross icon * pr comments fixed
fylein · Jan 11, 2024 · 2866528 · 2866528
1 parent 6bf3ddd
commit 2866528
Show file tree

Hide file tree

Showing 16 changed files with 58 additions and 30 deletions.
diff --git a/...usiness-central-main/business-central-dashboard/business-central-dashboard.component.html b/...usiness-central-main/business-central-dashboard/business-central-dashboard.component.html
@@ -18,21 +18,19 @@
         [processedCount]="processedCount">
     </app-dashboard-export-section>
 
-    <app-zero-state 
-        *ngIf="!accountingExportSummary" 
+    <app-zero-state *ngIf="!accountingExportSummary && !exportableAccountingExportIds.length" 
         [zeroStateImageURL]="'assets/icons/dashboard-illustration.svg'"
         [zeroStateCaption]="'There are no expenses to export at the moment!'"
         >
     </app-zero-state>
 
-    <app-dashboard-export-summary-section 
-        *ngIf="accountingExportSummary"
+    <app-dashboard-export-summary-section *ngIf="exportableAccountingExportIds.length || accountingExportSummary"
         [appName]="appName"
         [accountingExportType]="accountingExportType"
         [accountingExportSummary]="accountingExportSummary">
     </app-dashboard-export-summary-section>
 
-    <app-dashboard-error-section 
+    <app-dashboard-error-section *ngIf="errors.EMPLOYEE_MAPPING.length || errors.CATEGORY_MAPPING.length || errors.ACCOUNTING_ERROR.length"
         [appName]="appName" 
         [errors]="errors" 
         [groupedErrorStat]="groupedErrorStat"

diff --git a/...hared/components/dashboard/dashboard-error-section/dashboard-error-section.component.html b/...hared/components/dashboard/dashboard-error-section/dashboard-error-section.component.html
@@ -9,7 +9,7 @@ <h4 class="!tw-font-500 !tw-text-18-px">Errors</h4>
                     <div class="container">
                         <div class="sub-text-container">
                             <h4 class="tw-text-16-px !tw-font-500 tw-text-normal-text-color">Integrations Errors</h4>
-                            <h5 class="!tw-text-faded-text-color tw-text-14-px !tw-font-400 !tw-leading-4">Check and resolve these errors before trying to re-export them again.</h5>
+                            <h5 class="!tw-text-faded-text-color tw-text-14-px !tw-font-400 !tw-leading-4 tw-pt-10-px">Check and resolve these errors before trying to re-export them again.</h5>
                         </div>
                     </div>
                 </div>
@@ -21,7 +21,7 @@ <h4 class="tw-text-14-px !tw-font-500 tw-text-slightly-normal-text-color">Employ
                             <h5 *ngIf="groupedErrorStat.EMPLOYEE_MAPPING" class="tw-text-faded-text-color tw-text-12-px">{{ groupedErrorStat.EMPLOYEE_MAPPING?.resolvedCount }}/{{ groupedErrorStat.EMPLOYEE_MAPPING?.totalCount }} error(s) resolved</h5>
                             <div class="flex-wrapper">
                                 <h5 class="!tw-text-faded-text-color tw-text-14-px tw-pt-10-px !tw-font-400 !tw-leading-4">
-                                    <p>Map the employees in {{brandingConfig.brandName}} to their corresponding records in {{appName}}.</p>
+                                    <p>Map employees in {{brandingConfig.brandName}} to their corresponding records in {{appName}}.</p>
                                 </h5>
                                 <button *ngIf="!groupedErrorStat.EMPLOYEE_MAPPING || (groupedErrorStat.EMPLOYEE_MAPPING && groupedErrorStat.EMPLOYEE_MAPPING.resolvedCount !== groupedErrorStat.EMPLOYEE_MAPPING.totalCount)" type="button" (click)="showMappingResolve(ErrorType.EMPLOYEE_MAPPING, errors.EMPLOYEE_MAPPING, ExportErrorSourceType.EMPLOYEE)" class="tw-text-white tw-text-500 tw-text-12-px tw-px-12-px tw-py-6-px tw-bg-slightly-normal-text-color tw-rounded-4-px tw-w-100-px tw-font-500">
                                     Resolve
@@ -43,7 +43,7 @@ <h5 class="!tw-text-faded-text-color tw-text-14-px tw-pt-10-px !tw-font-400 !tw-
                             <h4 class="tw-text-14-px !tw-font-500 tw-text-slightly-normal-text-color">Category Mapping Errors</h4>
                             <h5 *ngIf="groupedErrorStat.CATEGORY_MAPPING" class="tw-pt-4-px tw-text-faded-text-color tw-text-12-px">{{ groupedErrorStat.CATEGORY_MAPPING.resolvedCount }}/{{ groupedErrorStat.CATEGORY_MAPPING?.totalCount }} error(s) resolved</h5>
                             <div class="flex-wrapper">
-                                <h5 class="!tw-text-faded-text-color tw-text-14-px tw-pt-10-px !tw-font-400 !tw-leading-4"><p>Map the category in {{brandingConfig.brandName}} to their corresponding records in {{appName}}.</p>
+                                <h5 class="!tw-text-faded-text-color tw-text-14-px tw-pt-10-px !tw-font-400 !tw-leading-4"><p>Map category in {{brandingConfig.brandName}} to their corresponding records in {{appName}}.</p>
                                 </h5>
                                 <button *ngIf="!groupedErrorStat.CATEGORY_MAPPING || (groupedErrorStat.CATEGORY_MAPPING && groupedErrorStat.CATEGORY_MAPPING.resolvedCount !== groupedErrorStat.CATEGORY_MAPPING.totalCount)" type="button" (click)="showMappingResolve(ErrorType.CATEGORY_MAPPING, errors.CATEGORY_MAPPING, ExportErrorSourceType.CATEGORY)" class="tw-text-white tw-text-500 tw-text-12-px tw-px-12-px tw-py-6-px tw-bg-slightly-normal-text-color tw-rounded-4-px tw-w-100-px tw-font-500">
                                     Resolve
@@ -89,9 +89,9 @@ <h5 class="!tw-text-faded-text-color tw-text-12-px tw-pt-10-px !tw-font-400 !tw-
 </div>
 <!-- Integration Specific Errors -->
 <div *ngIf="isAccountingErrorDialogVisible">
-    <p-dialog [dismissableMask]="true" [modal]="true" [(visible)]="isAccountingErrorDialogVisible" [position]="'top-right'" [style]="{ width: '50vw', height:'100vh' }" [maximizable]="false" [draggable]="false" [resizable]="false" [breakpoints]="{ '960px': '75vw' }">
+    <p-dialog [dismissableMask]="true" [modal]="true" [(visible)]="isAccountingErrorDialogVisible" [position]="'top-right'" [style]="{ width: 'fit-content', height: '100vh' }" [maximizable]="false" [draggable]="false" [resizable]="false" [breakpoints]="{ '960px': '75vw' }">
         <p-header>
-            <p>{{appName}} Error</p>
+            <p class="tw-line-height-20">{{appName}} Error</p>
             <h3 class="sub-header">{{errorDetail}}</h3>
         </p-header>
         <app-dashboard-accounting-error-dialog  [isLoading]="isLoading" [errorExpenses]="errorExpenses"></app-dashboard-accounting-error-dialog>
@@ -105,9 +105,9 @@ <h3 class="sub-header">{{errorDetail}}</h3>
 
 <!-- Mapping Errors -->
 <div>
-    <p-dialog [dismissableMask]="true" [(visible)]="isMappingResolveVisible" [modal]="true" [position]="'top-right'" [style]="{ width: '50vw', height:'100vh' }" [maximizable]="false" [draggable]="false" [resizable]="false" [breakpoints]="{ '960px': '75vw' }" (onHide)="handleResolvedMappingStat()">
+    <p-dialog [dismissableMask]="true" [(visible)]="isMappingResolveVisible" [modal]="true" [position]="'top-right'" [style]="{ width: 'fit-content', height: '100vh' }" [maximizable]="false" [draggable]="false" [resizable]="false" [breakpoints]="{ '960px': '75vw' }" (onHide)="handleResolvedMappingStat()">
         <p-header>
-            <p>{{errorType | snakeCaseToSpaceCase | titlecase }} Errors</p>
+            <p class="tw-line-height-20">{{errorType | snakeCaseToSpaceCase | titlecase }} Errors</p>
             <p class="dialog-sub-header">Resolve the following mapping errors to export your failed expenses successfully to {{appName}}</p>
         </p-header>
           <app-generic-mapping-table [employeeFieldMapping]="employeeFieldMapping" [isLoading]="isLoading" [appName]="appName" [isDashboardMappingResolve]="true" [destinationField]="destinationField" [filteredMappings]="filteredMappings" [sourceField]="sourceField" [destinationOptions]="destinationOptions"></app-generic-mapping-table>

diff --git a/...hared/components/dashboard/dashboard-error-section/dashboard-error-section.component.scss b/...hared/components/dashboard/dashboard-error-section/dashboard-error-section.component.scss
@@ -20,14 +20,13 @@
 }
 
 .sub-header {
-    @apply tw-text-14-px tw-font-400;
-    color: grey;
+    @apply tw-text-14-px tw-mt-8-px tw-font-400 tw-text-faded-text-color;
 }
 
 :host  ::ng-deep .p-dialog {
     @apply tw-max-h-full tw-m-0 #{!important};
   }
 
 .dialog-sub-header {
-    @apply tw-text-14-px tw-font-400 tw-w-400-px;
+    @apply tw-text-14-px tw-font-400 tw-w-400-px tw-mt-8-px tw-text-faded-text-color;
 }
diff --git a/.../shared/components/dashboard/dashboard-error-section/dashboard-error-section.component.ts b/.../shared/components/dashboard/dashboard-error-section/dashboard-error-section.component.ts
@@ -104,7 +104,9 @@ export class DashboardErrorSectionComponent implements OnInit {
     this.errors[errorType][0].expense_attribute;
     const isCategoryMappingGeneric = FyleField.CATEGORY === (this.sourceField as unknown as FyleField) ? this.isCategoryMappingGeneric : false;
     this.filteredMappings = ErrorModel.getErroredMappings(this.errors, errorType, isCategoryMappingGeneric);
-    this.isLoading = false;
+    setTimeout(() => {
+      this.isLoading = false;
+    }, 100);
   }
 
   private getDestinationOptionsV2(errorType: AccountingErrorType) {

diff --git a/...mponents/dashboard/dashboard-export-log-dialog/dashboard-export-log-dialog.component.html b/...mponents/dashboard/dashboard-export-log-dialog/dashboard-export-log-dialog.component.html
@@ -1,4 +1,8 @@
 <p-dialog header="{{exportLogHeader}} Expenses" [dismissableMask]="true" [modal]="true" [draggable]="false" [(visible)]="isExportLogVisible" (onHide)="handleDialogClose()" [position]="'top-right'" [style]="{ width: '50vw', height: '100vh' }">
+    <p-header>
+        <p>{{exportLogHeader}}</p>
+        <h3 class="sub-header">{{exportLogSubHeader}}</h3>
+    </p-header>
     <div class="tw-rounded-6-px tw-bg-white tw-border-1-px">
         <app-export-log-table [appName]="appName" [filteredExpenseGroups]="accountingExports" [isDashboardFailed]="exportLogHeader==='Successful' ? false : true" [isExportLogTable]="false"></app-export-log-table>
     </div>

diff --git a/...mponents/dashboard/dashboard-export-log-dialog/dashboard-export-log-dialog.component.scss b/...mponents/dashboard/dashboard-export-log-dialog/dashboard-export-log-dialog.component.scss
@@ -1,3 +1,7 @@
 :host  ::ng-deep .p-dialog {
   @apply tw-max-h-full tw-m-0 #{!important};
-  }  
+  }  
+
+.sub-header {
+    @apply tw-text-14-px tw-mt-8-px tw-font-400 tw-text-faded-text-color tw-w-450-px;
+}
diff --git a/...components/dashboard/dashboard-export-log-dialog/dashboard-export-log-dialog.component.ts b/...components/dashboard/dashboard-export-log-dialog/dashboard-export-log-dialog.component.ts
@@ -12,6 +12,8 @@ export class DashboardExportLogDialogComponent implements OnInit {
 
   @Input() exportLogHeader: string;
 
+  @Input() exportLogSubHeader: string;
+
   @Input() isExportLogVisible: boolean;
 
   @Input() accountingExports: AccountingExportList[];

diff --git a/...ashboard/dashboard-export-summary-section/dashboard-export-summary-section.component.html b/...ashboard/dashboard-export-summary-section/dashboard-export-summary-section.component.html
@@ -47,5 +47,5 @@ <h4 class="tw-font-500 tw-text-18-px">Your last export</h4>
 </div>
 
 <div>
-    <app-dashboard-export-log-dialog (hideExportLogDialog)="handleDialogClose()" [appName]="appName" [isExportLogVisible]="isExportLogVisible" [accountingExports]="filteredAccountingExports" [isExportLogFetchInProgress]="isExportLogFetchInProgress" [exportLogHeader]="exportLogHeader"></app-dashboard-export-log-dialog>
+    <app-dashboard-export-log-dialog (hideExportLogDialog)="handleDialogClose()" [appName]="appName" [isExportLogVisible]="isExportLogVisible" [accountingExports]="filteredAccountingExports" [isExportLogFetchInProgress]="isExportLogFetchInProgress" [exportLogHeader]="exportLogHeader" [exportLogSubHeader]="exportLogSubHeader"></app-dashboard-export-log-dialog>
 </div>
diff --git a/.../dashboard/dashboard-export-summary-section/dashboard-export-summary-section.component.ts b/.../dashboard/dashboard-export-summary-section/dashboard-export-summary-section.component.ts
@@ -29,6 +29,8 @@ export class DashboardExportSummarySectionComponent implements OnInit {
 
   exportLogHeader: string;
 
+  exportLogSubHeader: string;
+
   isExportLogFetchInProgress: boolean;
 
   AccountingExportStatus = AccountingExportStatus;
@@ -85,6 +87,7 @@ export class DashboardExportSummarySectionComponent implements OnInit {
   showExportLog(status: AccountingExportStatus) {
     this.isExportLogFetchInProgress = true;
     this.exportLogHeader = status === AccountingExportStatus.COMPLETE ? 'Successful' : 'Failed';
+    this.exportLogSubHeader = status === AccountingExportStatus.COMPLETE ? 'These expenses have been successfully exported to your ' + this.appName +'.' : 'These expenses have failed to export due to some errors. Resolve the errors on your dashboard to and try to re-export them again';
     this.setupAccountingExports(500, 0, status);
     this.isExportLogVisible = true;
   }

diff --git a/...ared/components/helper/mapping/generic-mapping-table/generic-mapping-table.component.html b/...ared/components/helper/mapping/generic-mapping-table/generic-mapping-table.component.html
@@ -7,7 +7,7 @@
         </tr>
     </ng-template>
     <ng-template pTemplate="body" let-mapping>
-        <tr *ngIf="!isLoading">
+        <tr *ngIf="!isLoading" [ngClass]="{'tw-h-70-px': isDashboardMappingResolve}">
             <td>
                 <div class="tw-flex tw-items-center">
                     <svg-icon-sprite *ngIf="mapping.auto_mapped && !isDashboardMappingResolve" pTooltip="Auto-mapped" tooltipPosition="top" src="flash" width="12px" height="12px" class="tw-mr-12-px tw-text-placeholder"></svg-icon-sprite>
@@ -16,6 +16,7 @@
             </td>
             <td>
                 <p-dropdown appendTo="body" (onShow)="tableDropdownWidth()"
+                [ngClass]="{'dropdown-width': isDashboardMappingResolve}"
                 [ngModel]="getDropdownValue(mapping)" 
                 [options]="destinationOptions" 
                 optionLabel="value" 
@@ -35,5 +36,8 @@
 </p-table>
 
 <ng-template #shimmers>
-    <app-shimmers [isMappingTableShimmers]="isLoading"></app-shimmers>
+    <tr *ngFor="let _ of [0,1,2,3,4,5,6]">
+        <td *ngIf="isLoading"><p-skeleton width="150px" height="28px" shape="rectangle"></p-skeleton></td>
+        <td *ngIf="isLoading"><p-skeleton width="250px" height="28px" shape="rectangle"></p-skeleton></td>
+    </tr>
 </ng-template>
diff --git a/...ared/components/helper/mapping/generic-mapping-table/generic-mapping-table.component.scss b/...ared/components/helper/mapping/generic-mapping-table/generic-mapping-table.component.scss
@@ -1,3 +1,7 @@
+:host ::ng-deep .dropdown-width {
+    @apply tw-w-220-px #{!important};
+}
+
 :host ::ng-deep .prevBtn:disabled > .pi-chevron-left,:host ::ng-deep .nextBtn:disabled > .pi-chevron-right,
 :host ::ng-deep .prevBtn:disabled > .pi-minus, :host ::ng-deep .nextBtn:disabled > .pi-minus {
     @apply tw-text-placeholder #{!important};

diff --git a/...shared/components/helper/mapping/generic-mapping-table/generic-mapping-table.component.ts b/...shared/components/helper/mapping/generic-mapping-table/generic-mapping-table.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { DestinationAttribute } from 'src/app/core/models/db/destination-attribute.model';
 import { ExtendedGenericMapping } from 'src/app/core/models/db/extended-generic-mapping.model';
 import { GenericMapping, MappingClass } from 'src/app/core/models/db/generic-mapping.model';

diff --git a/src/app/shared/components/helper/shimmers/shimmers.component.html b/src/app/shared/components/helper/shimmers/shimmers.component.html
@@ -21,13 +21,4 @@
         <td *ngIf="isExportLogFetchInProgress && exportLogHeader==='Successful'"><p-skeleton width="50px" height="28px" shape="rectangle"></p-skeleton></td>
         <td *ngIf="isExportLogFetchInProgress && exportLogHeader==='Successful'"><p-skeleton width="50px" height="28px" shape="rectangle"></p-skeleton></td>
     </tr>
-</div>
-
-
-<!-- Mapping Resolve Table Shimmers -->
-<div *ngIf="isMappingTableShimmers">
-    <tr *ngFor="let _ of [0,1,2,3,4,5,6]">
-        <td><p-skeleton width="150px" height="28px" shape="rectangle"></p-skeleton></td>
-        <td><p-skeleton width="250px" height="28px" shape="rectangle"></p-skeleton></td>
-    </tr>
 </div>
diff --git a/src/assets/icons/cross.svg b/src/assets/icons/cross.svg
diff --git a/src/styles.scss b/src/styles.scss
@@ -19,6 +19,10 @@ p {
     @apply tw-m-0-px;
 }
 
+.pi-times:before {
+    content: url('./assets/icons/cross.svg') #{!important};
+}
+
 .pi-chevron-down:before {
     content: url('./assets/icons/arrow-down.svg') #{!important};
 }

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -233,6 +233,11 @@ module.exports = {
       maxHeight: {
         '20-px': '20px'
       },
+      lineHeight: {
+        'normal': 'normal',
+        '19': '19.6px',
+        '20': '20px'
+      },
       width: {
         '1-px': '1px',
         '6-px': '6px',
-Original file line number
+Diff line change
@@ Expand Up / @@ -47,5 +47,5 @@ <h4 class="tw-font-500 tw-text-18-px">Your last export</h4> @@
     </div>
     <div>
-        <app-dashboard-export-log-dialog (hideExportLogDialog)="handleDialogClose()" [appName]="appName" [isExportLogVisible]="isExportLogVisible" [accountingExports]="filteredAccountingExports" [isExportLogFetchInProgress]="isExportLogFetchInProgress" [exportLogHeader]="exportLogHeader"></app-dashboard-export-log-dialog>
+        <app-dashboard-export-log-dialog (hideExportLogDialog)="handleDialogClose()" [appName]="appName" [isExportLogVisible]="isExportLogVisible" [accountingExports]="filteredAccountingExports" [isExportLogFetchInProgress]="isExportLogFetchInProgress" [exportLogHeader]="exportLogHeader" [exportLogSubHeader]="exportLogSubHeader"></app-dashboard-export-log-dialog>
     </div>