Project

General

Profile

1
<div class="p-grid p-nogutter">
2
  <div class="p-col main-content">
3

    
4
    <h1>{{'INVOICE-PROCESSING' | translate}}</h1>
5

    
6
    <app-horizontal-menu></app-horizontal-menu>
7

    
8
    <app-breadcrumb></app-breadcrumb>
9

    
10
    <div class="p-grid p-nogutter p-pt-5 p-pb-5">
11

    
12
      <!-- Process Identification -->
13
      <div class="p-col p-nogutter p-col-12">
14
        <p-fieldset legend="Process Identification"
15
                    [toggleable]="true">
16

    
17
          <div [formGroup]="processForm">
18
            <div class="p-fluid p-formgrid p-grid">
19

    
20
              <div class="p-field p-col-12 p-lg-4">
21
                <label for="process-id">Process ID</label>
22
                <input pInputText
23
                       type="text"
24
                       inputId="process-id"
25
                       formControlName="processId">
26
              </div>
27

    
28
              <div class="p-field p-col-12 p-lg-4">
29
                <label for="status">Status</label>
30
                <input pInputText
31
                       type="text"
32
                       inputId="status"
33
                       formControlName="status">
34
              </div>
35

    
36

    
37
            </div>
38

    
39
            <div class="p-fluid p-formgrid p-grid">
40
              <div class="p-field p-col-12 p-lg-4">
41
                <label for="ipower-client-name">iPower Client Name</label>
42
                <input pInputText
43
                       type="text"
44
                       inputId="ipower-client-name"
45
                       formControlName="iPowerClientName">
46
              </div>
47

    
48
              <div class="p-field p-col-12 p-lg-4">
49
                <label for="ipower-client-code">iPower Client Code</label>
50
                <input pInputText
51
                       type="text"
52
                       inputId="ipower-client-code"
53
                       formControlName="iPowerClientCode">
54
              </div>
55

    
56
              <div class="p-field-checkbox p-col-12 p-lg-4">
57
                <label for="personal-data" class="p-ml-0">Personal Data</label>
58
                <p-checkbox inputId="personal-data"
59
                            [binary]="true"
60
                            formControlName="personalData">
61
                </p-checkbox>
62
              </div>
63

    
64
            </div>
65
            <p-confirmDialog
66
                       header="{{'ACCEPT-CONFIRMATION' | translate}}"
67
                       acceptLabel="{{'ACCEPT_LABEL' | translate}}"
68
                       rejectLabel="{{'REJECT_LABEL' | translate}}"
69
                       acceptButtonStyleClass="p-button-primary"
70
                       rejectButtonStyleClass="p-button-warning"
71
                       acceptIcon="null"
72
                       rejectIcon="null">
73
      </p-confirmDialog>
74
            <div class="p-fluid p-formgrid p-grid">
75
              <div class="p-field p-col-12 p-lg-4">
76
                <label for="processWorkflow">Process Workflow</label>
77
                <p-dropdown inputId="processWorkflow"
78
                  [options]="processWorkflowActions"
79
                  placeholder="Select"
80
                  formControlName="processWorkflow"
81
                  [showClear]="true">
82
                </p-dropdown>
83
              </div>
84
              <div class="p-field p-col-12 p-lg-2 p-grid p-ai-end vertical-container">
85
                <p-button (onClick)="processWorkFlowProcedure()"
86
                          label="Select"
87
                          [disabled]="processWorkflowButton || !processForm.valid"
88
                          styleClass="p-button-primary">
89
                </p-button>
90
              </div>
91
              <div class="p-field p-col-12 p-lg-4">
92
                <label for="assignedTo">Assigned to</label>
93
                <input pInputText id="assignedTo"
94
                       type="text"
95
                       inputId="assignedTo"
96
                       formControlName="assignedTo">
97
              </div>
98
              <div class="p-field p-col-12 p-lg-2 p-grid p-ai-end vertical-container">
99
                <p-button (onClick)="assignToMe()"
100
                          label="Assign to me"
101
                          styleClass="p-button-primary"
102
                          *ngIf="invoiceProcess!== null && invoiceProcess.userId !== authService.userDetails.name">
103
                </p-button>
104
                <p-button (onClick)="unassignFromMe()"
105
                          label="Unassign from me"
106
                          styleClass="p-button-primary"
107
                          *ngIf="invoiceProcess!== null && invoiceProcess.userId === authService.userDetails.name">
108
                </p-button>
109
              </div>
110
            </div>
111
          </div>
112

    
113
        </p-fieldset>
114
      </div>
115

    
116
      <!-- Included Files -->
117
      <div class="p-col p-nogutter p-col-12 p-mt-5">
118
        <p-fieldset legend="Included Files"
119
                    [toggleable]="receivedFiles"
120
                    [collapsed]="!receivedFiles">
121
          <p-table [value]="receivedFiles"
122
                   [lazy]="true"
123
                   [rows]="rows"
124
                   [loading]="loading"
125
                   styleClass="p-datatable-gridlines"
126
                   [rowHover]="true"
127
                   [autoLayout]="true">
128
            <ng-template pTemplate="header">
129
              <tr>
130
                <th>Received Date</th>
131
                <th>Doc Code</th>
132
                <th>Doc Name</th>
133
                <th>Doc Type</th>
134
                <th>Doc Status</th>
135
                <!-- TODO: Fix hacky way of locking the icon-columns in place -->
136
                <th class="one-button"></th>
137
              </tr>
138
            </ng-template>
139
            <ng-template pTemplate="body" let-file>
140
              <tr>
141
                <td>{{file.rtaReceivedDate | date:'longDate'}}</td>
142
                <td>{{file.dmsDocumentNumber}}</td>
143
                <td>{{file.dmsFileName}}</td>
144
                <td>{{file.dmsFileType}}</td>
145
                <td>{{file.statusPerDocument?.documentCurrentStatusId?.name}}</td>
146
                <!-- Preview Icon -->
147
                <td>
148
                  <button pButton
149
                          (click)="preview(file)"
150
                          icon="pi pi-file-o"
151
                          class="p-button-secondary p-button-rounded p-button-outlined"
152
                          pTooltip="{{'PREVIEW-DOCUMENT' | translate}}">
153
                  </button>
154
                </td>
155
              </tr>
156
            </ng-template>
157
          </p-table>
158
        </p-fieldset>
159
      </div>
160

    
161
      <div class="p-col p-nogutter p-col-12 p-mt-5">
162
        <p-accordion [multiple]="true" (onOpen)="onTabOpen($event)" (onClose)="onTabClose($event)">
163
          <p-accordionTab [disabled]="!canSeeDataCaptureAndVerification()" [selected] = accordionTabStatusList[0] >
164
            <ng-template pTemplate="header">
165
              <div class="accrordion-title">Data Capturing and Verification</div>
166
              <p-button *ngIf="accordionTabStatusList[0]" pTooltip="Refresh table data"
167
                        styleClass="p-button-accordion-tab p-button-rounded p-button-outlined p-ml-2"
168
                        icon="pi pi-refresh"
169
                        (onClick)="$event.stopPropagation();refreshTabTableData('data capturing and verification')">
170
              </p-button>
171
            </ng-template>
172
            <ng-template pTemplate="content">
173
              <app-data-capturing-and-verification #dataCapturing [process]="invoiceProcess"
174
                                                   (processCompleted)="onProcessCompleted($event)">
175
              </app-data-capturing-and-verification>
176
            </ng-template>
177
          </p-accordionTab>
178

    
179
          <p-accordionTab [disabled]="!canSeeJournalEntriesVerification()" [selected] = accordionTabStatusList[1] >
180
            <ng-template pTemplate="header">
181
              <div class="accrordion-title">Verification of Journal Entries</div>
182
              <p-button *ngIf="accordionTabStatusList[1]" pTooltip="Refresh table data"
183
                        styleClass="p-button-accordion-tab p-button-rounded p-button-outlined p-ml-2"
184
                        icon="pi pi-refresh"
185
                        (onClick)="$event.stopPropagation();refreshTabTableData('journal entries')">
186
              </p-button>
187
            </ng-template>
188
            <ng-template pTemplate="content">
189
              <app-journal-entries-verification [journalEntries]="invoiceProcess?.journalEntries">
190
              </app-journal-entries-verification>
191
            </ng-template>
192
          </p-accordionTab>
193

    
194
          <p-accordionTab [disabled]="!canSeeManipulationOfExceptions()" [selected] = accordionTabStatusList[2] >
195
            <ng-template pTemplate="header">
196
              <div class="accrordion-title">Manipulation of Exceptions</div>
197
              <p-button *ngIf="accordionTabStatusList[2]" pTooltip="Refresh table data"
198
                        styleClass="p-button-accordion-tab p-button-rounded p-button-outlined p-ml-2"
199
                        icon="pi pi-refresh"
200
                        (onClick)="$event.stopPropagation();refreshTabTableData('manipulation of exceptions')">
201
              </p-button>
202
            </ng-template>
203
            <ng-template pTemplate="content">
204
              <app-process-exception-manipulation [receivedException]="invoiceProcess?.alteryxExceptions">
205
              </app-process-exception-manipulation>
206
            </ng-template>
207
          </p-accordionTab>
208

    
209
          <p-accordionTab [disabled]="!canSeeManipulationOfUnhandledData()" [selected] = accordionTabStatusList[3] >
210
            <ng-template pTemplate="header">
211
              <div class="accrordion-title">Manipulation of Unhandled Data</div>
212
              <p-button *ngIf="accordionTabStatusList[3]" pTooltip="Refresh table data"
213
                        styleClass="p-button-accordion-tab p-button-rounded p-button-outlined p-ml-2"
214
                        icon="pi pi-refresh"
215
                        (onClick)="$event.stopPropagation();refreshTabTableData('manipulation of unhandled data')">
216
              </p-button>
217
            </ng-template>
218
            <ng-template pTemplate="content">
219
              <app-process-unhandled-data [unhandledDataList]="invoiceProcess?.alteryxUnhandled">
220
              </app-process-unhandled-data>
221
            </ng-template>
222
          </p-accordionTab>
223

    
224
          <p-accordionTab [disabled]="!canSeeMissingRecords()" [selected] = accordionTabStatusList[4] >
225
            <ng-template pTemplate="header">
226
              <div class="accrordion-title">Missing Records</div>
227
            </ng-template>
228
            <ng-template pTemplate="content">
229
              <app-missing-records [failedRecordsList]="invoiceProcess?.failedRecords">
230
              </app-missing-records>
231
            </ng-template>
232
          </p-accordionTab>
233
        </p-accordion>
234
        <div class="p-col p-nogutter p-col-12 p-mt-5">
235
          <p-fieldset legend="Process History"
236
                      [toggleable]="true">
237
            <app-process-history [process]="invoiceProcess" >
238
            </app-process-history>
239
          </p-fieldset>
240
        </div>
241
        <div class="p-formgroup-inline p-mt-5 p-jc-center">
242
          <p-button (onClick)="goBack()"
243
                    label="{{'BACK-TO-LIST' | translate}}"
244
                    styleClass="p-button-primary">
245
          </p-button>
246
        </div>
247
      </div>
248

    
249

    
250
    </div>
251

    
252
  </div>
253
</div>
(1-1/4)