Skip to content

Commit

Permalink
Merge pull request #9 from OpenLMIS/OLMIS-7375
Browse files Browse the repository at this point in the history 
OLMIS-7375: removed input ovelaping the table in order view
  • Loading branch information
@saleksandra
saleksandra authored Oct 7, 2024
2 parents cb2083a + 2b99c23 commit 842abaf
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 87 deletions.
10 changes: 10 additions & 0 deletions src/order-view/_order-view.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
.order-view-content {
display: flex;
flex-direction: row;
gap: 1rem;

.sidebar {
height: min-content;
}
}

.order-view {

@mixin button-icon-inherit($icon) {
Expand Down
176 changes: 89 additions & 87 deletions src/order-view/order-view.html
View file
Original file line number Diff line number Diff line change
@@ -1,89 +1,91 @@
<h2>{{'orderView.viewOrders' | message}}</h2>
<form class="sidebar" ng-submit="vm.loadOrders()">
<label for="supplyingFacility">{{'orderView.supplyingFacility' | message}}</label>
<select id="supplyingFacility"
ng-model="vm.supplyingFacility"
ng-options="facility.name for facility in vm.supplyingFacilities"
required></select>
<input type="submit" value="{{'orderView.search' | message}}" />
</form>
<section class="openlmis-table-container order-view">
<form ng-submit="vm.loadOrders()" >
<label for="requestingFacility">{{'orderView.requestingFacility' | message}}</label>
<select id="requestingFacility"
ng-model="vm.requestingFacility"
ng-options="facility.name for facility in vm.requestingFacilities"></select>
<label>{{'orderView.program' | message}}</label>
<select id="program"
ng-model="vm.program"
ng-options="program.name for program in vm.programs"></select>
<label>{{'orderView.status' | message}}</label>
<select id="status"
ng-model="vm.status"
ng-options="status as status.name for status in vm.orderStatuses track by status.value"></select>
<label for=periodStartDate>{{'orderView.periodStart' | message}}</label>
<input id="periodStartDate" type="date" ng-model="vm.periodStartDate" max-date="vm.periodEndDate"/>
<label for=periodEndDate>{{'orderView.periodEnd' | message}}</label>
<input id="periodEndDate" type="date" ng-model="vm.periodEndDate" min-date="vm.periodStartDate"/>
<input type="submit" class="btn btn-primary" value="{{'orderView.search' | message}}"/>
<div class="order-view-content">
<form class="sidebar" ng-submit="vm.loadOrders()">
<label for="supplyingFacility">{{'orderView.supplyingFacility' | message}}</label>
<select id="supplyingFacility"
ng-model="vm.supplyingFacility"
ng-options="facility.name for facility in vm.supplyingFacilities"
required></select>
<input type="submit" value="{{'orderView.search' | message}}" />
</form>
<table>
<caption ng-if="!vm.orders.length">{{'orderView.noOrdersFound' | message}}</caption>
<thead>
<tr>
<th>{{'orderView.orderNumber' | message}}</th>
<th>{{'orderView.facility' | message}}</th>
<th>{{'orderView.district' | message}}</th>
<th>{{'orderView.program' | message}}</th>
<th>{{'orderView.period' | message}}</th>
<th>{{'orderView.startDate' | message}}</th>
<th>{{'orderView.endDate' | message}}</th>
<th>{{'orderView.status' | message}}</th>
<th>{{'orderView.emergency' | message}}</th>
<th>{{'orderView.createdDate' | message}}</th>
<th>{{'orderView.lastUpdated' | message}}</th>
<th class="col-sticky sticky-right">{{'orderView.actions' | message}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="order in vm.orders">
<td>{{order.orderCode}}</td>
<td>{{order.facility.code}} - {{order.facility.name}}</td>
<td>{{order.facility.geographicZone.name}}</td>
<td>{{order.program.name}}</td>
<td>{{order.processingPeriod.name}}</td>
<td>{{order.processingPeriod.startDate | openlmisDate}}</td>
<td>{{order.processingPeriod.endDate | openlmisDate}}</td>
<td>{{order.status}}</td>
<td class="col-emergency">
<i ng-class="{'icon-ok': order.emergency}"></i>
</td>
<td>{{order.createdDate | openlmisDate}}</td>
<td>{{order.lastUpdatedDate | openlmisDate}}</td>
<td>
<button ng-if="order.status !== 'CREATING'"
class="print"
openlmis-download="{{vm.getPrintUrl(order)}}">
{{'orderView.print'|message}}
</button>
<button ng-if="order.status !== 'CREATING'"
class="download"
openlmis-download="{{vm.getDownloadUrl(order)}}">
{{'orderView.download'|message}}
</button>
<button ng-if="order.status !== 'CREATING' && vm.canRetryTransfer && order.transferFailed()"
class="retry"
ng-click="vm.retryTransfer(order)">
{{'orderView.retry'|message}}
</button>
<button ng-if="order.status === 'CREATING'"
class="order-edit"
ng-click="vm.redirectToOrderEdit(order.id)">
{{ 'orderView.edit' | message }}
</button>
</td>
</tr>
</tbody>
</table>
<openlmis-pagination/>
</section>
<section class="openlmis-table-container order-view">
<form ng-submit="vm.loadOrders()" >
<label for="requestingFacility">{{'orderView.requestingFacility' | message}}</label>
<select id="requestingFacility"
ng-model="vm.requestingFacility"
ng-options="facility.name for facility in vm.requestingFacilities"></select>
<label>{{'orderView.program' | message}}</label>
<select id="program"
ng-model="vm.program"
ng-options="program.name for program in vm.programs"></select>
<label>{{'orderView.status' | message}}</label>
<select id="status"
ng-model="vm.status"
ng-options="status as status.name for status in vm.orderStatuses track by status.value"></select>
<label for=periodStartDate>{{'orderView.periodStart' | message}}</label>
<input id="periodStartDate" type="date" ng-model="vm.periodStartDate" max-date="vm.periodEndDate"/>
<label for=periodEndDate>{{'orderView.periodEnd' | message}}</label>
<input id="periodEndDate" type="date" ng-model="vm.periodEndDate" min-date="vm.periodStartDate"/>
<input type="submit" class="btn btn-primary" value="{{'orderView.search' | message}}"/>
</form>
<table>
<caption ng-if="!vm.orders.length">{{'orderView.noOrdersFound' | message}}</caption>
<thead>
<tr>
<th>{{'orderView.orderNumber' | message}}</th>
<th>{{'orderView.facility' | message}}</th>
<th>{{'orderView.district' | message}}</th>
<th>{{'orderView.program' | message}}</th>
<th>{{'orderView.period' | message}}</th>
<th>{{'orderView.startDate' | message}}</th>
<th>{{'orderView.endDate' | message}}</th>
<th>{{'orderView.status' | message}}</th>
<th>{{'orderView.emergency' | message}}</th>
<th>{{'orderView.createdDate' | message}}</th>
<th>{{'orderView.lastUpdated' | message}}</th>
<th class="col-sticky sticky-right">{{'orderView.actions' | message}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="order in vm.orders">
<td>{{order.orderCode}}</td>
<td>{{order.facility.code}} - {{order.facility.name}}</td>
<td>{{order.facility.geographicZone.name}}</td>
<td>{{order.program.name}}</td>
<td>{{order.processingPeriod.name}}</td>
<td>{{order.processingPeriod.startDate | openlmisDate}}</td>
<td>{{order.processingPeriod.endDate | openlmisDate}}</td>
<td>{{order.status}}</td>
<td class="col-emergency">
<i ng-class="{'icon-ok': order.emergency}"></i>
</td>
<td>{{order.createdDate | openlmisDate}}</td>
<td>{{order.lastUpdatedDate | openlmisDate}}</td>
<td>
<button ng-if="order.status !== 'CREATING'"
class="print"
openlmis-download="{{vm.getPrintUrl(order)}}">
{{'orderView.print'|message}}
</button>
<button ng-if="order.status !== 'CREATING'"
class="download"
openlmis-download="{{vm.getDownloadUrl(order)}}">
{{'orderView.download'|message}}
</button>
<button ng-if="order.status !== 'CREATING' && vm.canRetryTransfer && order.transferFailed()"
class="retry"
ng-click="vm.retryTransfer(order)">
{{'orderView.retry'|message}}
</button>
<button ng-if="order.status === 'CREATING'"
class="order-edit"
ng-click="vm.redirectToOrderEdit(order.id)">
{{ 'orderView.edit' | message }}
</button>
</td>
</tr>
</tbody>
</table>
<openlmis-pagination/>
</section>
</div>

0 comments on commit 842abaf

Please sign in to comment.