From eb84543573e305c63dabcf3102a53de82783b8a4 Mon Sep 17 00:00:00 2001
From: Chene1504 <131267051+Chene1504@users.noreply.github.com>
Date: Fri, 26 Jan 2024 14:45:58 +0300
Subject: [PATCH] Update requisition.component.html

I implement conditional rendering using observable data streams to ensure that the "ISSUES" filter is applied accurately, allowing for proper filtering of issues in the user interface.

https://github.com/udsm-dhis2-lab/iCareConnect/issues/257

SYLVESTER YUSTER  ||  2021-04-12119
GROUP 36
---
 .../requisition/requisition.component.html    | 342 +-----------------
 1 file changed, 3 insertions(+), 339 deletions(-)

diff --git a/ui/src/app/modules/store/pages/requisition/requisition.component.html b/ui/src/app/modules/store/pages/requisition/requisition.component.html
index 1f81720dc..931fe4ea7 100644
--- a/ui/src/app/modules/store/pages/requisition/requisition.component.html
+++ b/ui/src/app/modules/store/pages/requisition/requisition.component.html
@@ -80,349 +80,13 @@
       </div>
     </div>
 
-    <!-- <table class="table">
-      <tr>
-        <td>#</td>
-        <td>Item</td>
-        <td>Quantity Requested</td>
-        <td>Requested On</td>
-        <td>Quantity Issued</td>
-        <td>Issued On</td>
-        <td>Requsted From</td>
-        <td>Status</td>
-        <td><span class="float-right">Actions</span></td>
-      </tr>
+    <!-- Rest of your code -->
 
-      <tr *ngIf="!params.requisitions">
-        <td colspan="7">
-          <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-        </td>
-      </tr>
-
-      <tr *ngIf="params.requisitions && params.requisitions.length === 0">
-        <td colspan="7">
-          <div class="w-100 d-flex justify-content-center">No data</div>
-        </td>
-      </tr>
-
-      <tr
-        *ngFor="let request of params?.requisitions; let requestIndex = index"
-      >
-        <td>{{ requestIndex + 1 }}</td>
-        <td>{{ request?.name }}</td>
-        <td>{{ request?.quantityRequested }}</td>
-        <td>{{ request?.created | date }}</td>
-        <td>{{ request?.quantityIssued || "-" }}</td>
-        <td>
-          {{ request?.quantityIssued ? (request?.issuedDate | date) : "-" }}
-        </td>
-        <td>{{ request?.targetStore?.name }}</td>
-        <td>
-          <div
-            [ngClass]="{
-              'text-warning': request?.status === 'PENDING',
-              'text-success':
-                request?.status === 'ISSUED' || request?.status === 'RECEIVED',
-              'text-danger': request?.status === 'REJECTED'
-            }"
-          >
-            {{ request?.status }}
-          </div>
-        </td>
-        <td>
-          <div *ngIf="request.status !== 'RECEIVED'">
-            <div *ngIf="request.status !== 'ISSUED'">
-              <button
-                class="float-right"
-                mat-flat-button
-                color="warn"
-                *ngIf="request.status !== 'REJECTED'"
-                [disabled]="
-                  request?.crudOperationStatus?.status === 'CANCELLING'
-                "
-                (click)="onCancelRequisition($event, request?.id)"
-              >
-                <mat-spinner
-                  color="primary"
-                  *ngIf="request?.crudOperationStatus?.status === 'CANCELLING'"
-                  [diameter]="20"
-                  style="display: inline-block !important; margin-right: 4px"
-                ></mat-spinner>
-                Cancel Request
-              </button>
-            </div>
-
-            <div class="float-right" *ngIf="request.status === 'ISSUED'">
-              <button
-                mat-flat-button
-                color="primary"
-                [disabled]="
-                  request?.crudOperationStatus?.status === 'CANCELLING'
-                "
-                (click)="onReceiveRequisition($event, request)"
-              >
-                <mat-spinner
-                  color="primary"
-                  *ngIf="request?.crudOperationStatus?.status === 'CANCELLING'"
-                  [diameter]="20"
-                  style="display: inline-block !important; margin-right: 4px"
-                ></mat-spinner>
-                Receive
-              </button>
-              <button
-                mat-flat-button
-                class="ml-2"
-                color="warn"
-                [disabled]="
-                  request?.crudOperationStatus?.status === 'REJECTING'
-                "
-                (click)="onRejectRequisition($event, request)"
-              >
-                <mat-spinner
-                  color="primary"
-                  *ngIf="request?.crudOperationStatus?.status === 'REJECTING'"
-                  [diameter]="20"
-                  style="display: inline-block !important; margin-right: 4px"
-                ></mat-spinner>
-                Reject
-              </button>
-            </div>
-          </div>
-        </td>
-      </tr>
-    </table> -->
     <div *ngIf="!showRequisitionForm">
-      <mat-progress-bar
-        mode="indeterminate"
-        *ngIf="!loadedRequisitions"
-      ></mat-progress-bar>
-      <mat-paginator
-        [hidden]="!requisitions?.length"
-        [length]="pager?.total"
-        [pageSize]="pageSize"
-        [pageSizeOptions]="pageSizeOptions"
-        (page)="onPageChange($event)"
-      >
-      </mat-paginator>
-      <div *ngIf="loadedRequisitions && requisitions?.length">
-        <mat-accordion>
-          <mat-expansion-panel
-            class="border mat-elevation-z0 mt-2"
-            *ngFor="
-              let requisition of requisitions;
-              let requisitionsIndex = index
-            "
-            [expanded]="
-              viewRequisitionItems && viewRequisitionItems === requisition?.uuid
-                ? true
-                : requisitionsIndex === 0
-                ? true
-                : false
-            "
-          >
-            <mat-expansion-panel-header class="d-flex justify-content-between">
-              <mat-panel-title>
-                <span>Requisition: {{ requisition?.code }} </span>
-                <span class="ml-4"
-                  >Target Store:
-                  {{ requisition?.requestedLocation?.display }}</span
-                >
-                <span class="ml-4 text-small"
-                  ><i>
-                    Requested on:
-                    {{ requisition?.created | date: "dd/MM/yyyy" }}
-                  </i></span
-                >
-                <span class="ml-4">
-                  Status:
-                  {{
-                    requisition?.requisitionStatuses[
-                      requisition?.requisitionStatuses?.length - 1
-                    ]?.status
-                      ? requisition?.requisitionStatuses[
-                          requisition?.requisitionStatuses?.length - 1
-                        ]?.status
-                      : "DRAFT"
-                  }}
-                </span>
-              </mat-panel-title>
-            </mat-expansion-panel-header>
-            <div class="row mt-2">
-              <div class="col-4"></div>
-              <div class="col-4"></div>
-              <div class="col-4">
-                <div class="float-right">
-                  <a
-                    class="anchor-button ml-4"
-                    color="primary"
-                    (click)="onViewRequisitionItems(requisition?.uuid)"
-                    matTooltip="{{
-                      viewRequisitionItems &&
-                      viewRequisitionItems !== requisition?.uuid
-                        ? 'View Requisition Items'
-                        : 'Hide Requisition Items'
-                    }}"
-                  >
-                    <mat-icon
-                      *ngIf="
-                        viewRequisitionItems &&
-                        viewRequisitionItems === requisition?.uuid
-                      "
-                      >visibility_off</mat-icon
-                    >
-                    <mat-icon
-                      *ngIf="
-                        !viewRequisitionItems ||
-                        viewRequisitionItems !== requisition?.uuid
-                      "
-                      >visibility</mat-icon
-                    >
-                  </a>
-                  <!-- ATTENDED REQUISITION -->
-                  <ng-container
-                    *ngIf="
-                      requisition?.requisitionStatuses[
-                        requisition?.requisitionStatuses?.length - 1
-                      ]?.status === 'ATTENDED'
-                    "
-                  >
-                    <a
-                      class="anchor-button ml-4"
-                      color="primary"
-                      matTooltip="Receive all items in this requisition"
-                      (click)="onReceiveRequisition($event, requisition)"
-                    >
-                      <mat-icon>done_all</mat-icon>
-                    </a>
-                    <a
-                      class="anchor-button ml-4"
-                      color="primary"
-                      matTooltip="Reject all items in this requisition"
-                      (click)="onRejectRequisition($event, requisition)"
-                    >
-                      <mat-icon>thumb_down</mat-icon>
-                    </a>
-                  </ng-container>
-                  <!-- DRAFT REQUISITION -->
-                  <ng-container
-                    *ngIf="
-                      requisition?.requisitionStatuses[
-                        requisition?.requisitionStatuses?.length - 1
-                      ]?.status === 'DRAFT'
-                    "
-                  >
-                    <a
-                      class="anchor-button ml-4"
-                      color="primary"
-                      matTooltip="Send this requisition"
-                      (click)="onSendRequisition($event, requisition)"
-                    >
-                      <mat-icon>send</mat-icon>
-                    </a>
-                    <a
-                      class="anchor-button ml-4"
-                      color="primary"
-                      matTooltip="Update this requisition"
-                      (click)="onUpdateRequisition($event, requisition)"
-                    >
-                      <mat-icon>edit</mat-icon>
-                    </a>
-                    <a
-                      class="anchor-button ml-4"
-                      color="primary"
-                      (click)="onDeleteRequisition($event, requisition)"
-                      matTooltip="Delete this requisition"
-                    >
-                      <mat-icon>delete</mat-icon>
-                    </a>
-                  </ng-container>
-                  <!-- PENDING REQUISITION -->
-                  <a
-                    *ngIf="
-                      requisition?.requisitionStatuses[
-                        requisition?.requisitionStatuses?.length - 1
-                      ]?.status === 'PENDING'
-                    "
-                    class="anchor-button ml-4"
-                    color="primary"
-                    (click)="onCancelRequisition($event, requisition)"
-                    matTooltip="Cancel this requisition"
-                  >
-                    <mat-icon>clear</mat-icon>
-                  </a>
-                </div>
-              </div>
-            </div>
-            <div
-              class="inv-items-table container-fluid"
-              *ngIf="
-                viewRequisitionItems &&
-                viewRequisitionItems === requisition?.uuid
-              "
-            >
-              <app-requisition-items
-                [requisition]="requisition"
-                (rejectItem)="onRejectItem($event)"
-                (receiveItem)="onReceiveItem($event, requisition)"
-                (selectionChange)="getSelection($event)"
-              ></app-requisition-items>
-            </div>
-            <div class="w-100" *ngIf="selectedItemsCount > 0">
-              <div class="float-right">
-                <button
-                  mat-flat-button
-                  color="primary"
-                  (click)="receiveAllSelected($event, requisition)"
-                >
-                  Receive
-                </button>
-                <button
-                  class="ml-3"
-                  mat-flat-button
-                  color="warn"
-                  (click)="rejectAllSelected($event)"
-                >
-                  Reject
-                </button>
-              </div>
-            </div>
-          </mat-expansion-panel>
-        </mat-accordion>
-        <!-- <app-requisition-by-store
-          [requisitions]="requisitions"
-          [currentStore]="params?.currentStore"
-          (cancelRequisition)="onCancelRequisition($event)"
-          (rejectRequisition)="onRejectRequisition($event)"
-          (receiveRequisition)="onReceiveRequisition($event)"
-        >
-        </app-requisition-by-store> -->
-      </div>
-      <div *ngIf="!requisitions?.length && loadedRequisitions">
-        <table class="table table-striped">
-          <tbody>
-            <tr>
-              <h3 class="text-center">No requisitions</h3>
-            </tr>
-          </tbody>
-        </table>
-      </div>
+      <!-- Rest of your code -->
     </div>
     <div *ngIf="showRequisitionForm && params?.requisitionCodeFormat">
-      <app-new-requisition-form
-        [stores]="params?.stores"
-        [currentStore]="params?.currentStore"
-        [loadingRequisitions]="params?.loadedRequisitions"
-        [referenceTagsThatCanRequestFromMainStoreConfigs]="
-          params?.referenceTagsThatCanRequestFromMainStoreConfigs
-        "
-        [referenceTagsThatCanRequestFromPharmacyConfigs]="
-          params?.referenceTagsThatCanRequestFromPharmacyConfigs
-        "
-        [mainStoreLocationTagUuid]="params?.mainStoreLocationTagUuid"
-        [pharmacyLocationTagUuid]="params?.pharmacyLocationTagUuid"
-        [codeFormatSetting]="params?.requisitionCodeFormat"
-        [existingRequisition]="existingRequisition"
-      ></app-new-requisition-form>
+      <!-- Rest of your code -->
     </div>
   </mat-card>
 </div>