336 lines
11 KiB
HTML
336 lines
11 KiB
HTML
<nb-card>
|
|
<nb-card-header>
|
|
|
|
<div class="row show-grid">
|
|
<div class="col-md-2">
|
|
<div> <nb-icon icon="shopping-bag-outline"></nb-icon> Order Management</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<div style=" text-align: end;">
|
|
<!-- <button (click)="Assign()" nbButton status="primary" hero>
|
|
Assign Driver
|
|
</button> -->
|
|
<input nbInput placeholder="Pick Date Range" [nbDatepicker]="formpicker">
|
|
<nb-rangepicker #formpicker (rangeChange)="manipulateDate($event)"[startDate]="defaultStartDate" [endDate]="defaultEndDate"></nb-rangepicker>
|
|
|
|
<!-- <input nbInput class="fx-date-range" type="text"
|
|
ngxDaterangepickerMd
|
|
[locale]="{applyLabel: 'okay', format: 'MM/DD/YY'}"
|
|
[drops]="'down'"
|
|
[opens]="'right'"
|
|
[ranges]="ranges"
|
|
[showCustomRangeLabel]="true"
|
|
[alwaysShowCalendars]="true"
|
|
[keepCalendarOpeningWithRange]="true"
|
|
[showCancel]="true"
|
|
autocomplete="off"
|
|
[(ngModel)]="selectedDateRange"
|
|
name="daterange" placeholder="Fliter Date Wise" (change)="dateWiseFilter()"/> -->
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div style=" text-align: end;">
|
|
<!-- <button (click)="Assign()" nbButton status="primary" hero>
|
|
Assign Driver
|
|
</button> -->
|
|
<input [(ngModel)]="searchTerm" (keyup)="filterItems()" style="width: 100%;" nbInput id="mobileNo" type="text" placeholder="Search" >
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div style=" text-align: end;">
|
|
<button (click)="refresh()" nbTooltip="Refresh" nbTooltipPlacement="top" nbButton status="warning" hero>
|
|
<nb-icon icon="flip-outline"></nb-icon>
|
|
</button>
|
|
<button style=" margin-left: 1rem;" nbButton nbTooltip="Add Order" nbTooltipPlacement="top" (click)="onCreateConfirm()" nbButton status="primary" hero>
|
|
<nb-icon icon="plus-circle-outline"></nb-icon>
|
|
</button>
|
|
|
|
<button style=" margin-left: 1rem;" nbButton nbTooltip="Download" nbTooltipPlacement="top" (click)="download()" nbButton status="success" hero>
|
|
<nb-icon icon="download-outline"></nb-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nb-card-header>
|
|
|
|
<nb-card-body>
|
|
<!-- <ng2-smart-table [settings]="settings" (userRowSelect)="onUserRowSelect($event)" [source]="source" (edit)="onSaveConfirm($event)"
|
|
(create)="onCreateConfirm($event)" (delete)="onDeleteConfirm($event)">
|
|
</ng2-smart-table> -->
|
|
|
|
<ng-data-table
|
|
[id]="'i'"
|
|
[items]=orders
|
|
[minContentWidth]="600"
|
|
[pageable]="true"
|
|
[showColumnSelector]="true"
|
|
[showHeader]="false"
|
|
[selectMode]="'multi'"
|
|
[minContentHeight]="350"
|
|
[selectMode]="'multi'"
|
|
[selectOnRowClick]="true"
|
|
|
|
[limit]="25"
|
|
>
|
|
|
|
<ng-data-table-column
|
|
[field]="'role'"
|
|
[sortable]="false"
|
|
[title]="''"
|
|
[filterable]="false"
|
|
[width]="2">
|
|
|
|
|
|
|
|
<ng-template #ngDataTableHeader let-column="column" >
|
|
<tr ><th class="center" style=" font-size: large; text-align: -webkit-center;"> <div style="text-align: center;">
|
|
|
|
<nb-checkbox (change)="onCheckboxChange($event)" status="primary" ></nb-checkbox>
|
|
</div></th></tr>
|
|
<!-- <tr ><th class="center" style="text-align: -webkit-center;" >{{tableTitle.Y4_st_type_name}}</th></tr> -->
|
|
|
|
</ng-template>
|
|
|
|
|
|
|
|
|
|
|
|
<ng-template #ngDataTableCell let-row="row">
|
|
<td style="text-align: center;" >
|
|
<div class="align-center" style="display: flex; align-items: center;text-align: center;">
|
|
|
|
|
|
<nb-checkbox *ngIf="isChecked == true" [(ngModel)]="row.item.selected" [checked]="row.item.selected == true" (click)="selectSingleRow(row.item)" status="primary" ></nb-checkbox>
|
|
<nb-checkbox *ngIf="isChecked == false" [(ngModel)]="row.item.selected" [checked]="row.item.selected == true" (click)="selectSingleRow(row.item)" status="primary" ></nb-checkbox>
|
|
|
|
</div>
|
|
|
|
</td>
|
|
</ng-template>
|
|
</ng-data-table-column>
|
|
<ng-data-table-column
|
|
[field]="'index'"
|
|
[sortable]="false"
|
|
[title]="'ID'"
|
|
[filterable]="false"
|
|
[width]="2">
|
|
|
|
</ng-data-table-column>
|
|
|
|
<ng-data-table-column
|
|
[field]="'orderId'"
|
|
[sortable]="false"
|
|
[title]="'Order ID'"
|
|
[filterable]="false"
|
|
[width]="4">
|
|
<ng-template #ngDataTableCell let-row="row">
|
|
<td (click)="onViewConfirm(row.item)">
|
|
<div style="display: flex; align-items: center;">
|
|
|
|
<span class="checkTxt" >
|
|
{{row.item.orderId }}
|
|
</span>
|
|
</div>
|
|
|
|
</td>
|
|
</ng-template>
|
|
</ng-data-table-column>
|
|
<ng-data-table-column
|
|
[field]="'customer'"
|
|
[sortable]="false"
|
|
[title]="'Customer Name'"
|
|
[filterable]="false"
|
|
[width]="4">
|
|
|
|
<ng-template #ngDataTableCell let-row="row">
|
|
<td (click)="onViewConfirm(row.item)">
|
|
<div style="display: flex; align-items: center;">
|
|
|
|
<span class="checkTxt" >
|
|
{{row.item.customer }}
|
|
</span>
|
|
</div>
|
|
|
|
</td>
|
|
</ng-template>
|
|
</ng-data-table-column>
|
|
<ng-data-table-column
|
|
[field]="'address'"
|
|
[sortable]="false"
|
|
[title]="'Address'"
|
|
[filterable]="false"
|
|
[width]="6">
|
|
<ng-template #ngDataTableCell let-row="row">
|
|
<td (click)="onViewConfirm(row.item)">
|
|
<div style="display: flex; align-items: center;">
|
|
|
|
<span class="checkTxt" >
|
|
{{row.item.address }}
|
|
</span>
|
|
</div>
|
|
|
|
</td>
|
|
</ng-template>
|
|
</ng-data-table-column>
|
|
<ng-data-table-column
|
|
[field]="'orderDate'"
|
|
[sortable]="false"
|
|
[title]="'Order Date'"
|
|
[filterable]="false"
|
|
[width]="4">
|
|
|
|
<ng-template #ngDataTableCell let-row="row">
|
|
<td (click)="onViewConfirm(row.item)">
|
|
<div style="display: flex; align-items: center;">
|
|
|
|
<span class="checkTxt" >
|
|
{{row.item.updatedAt | date :'dd/MM/yy hh:mm:ss'}}
|
|
</span>
|
|
</div>
|
|
|
|
</td>
|
|
</ng-template>
|
|
|
|
</ng-data-table-column>
|
|
<ng-data-table-column
|
|
[field]="'status'"
|
|
|
|
|
|
[title]="'Status'"
|
|
[sortable]="false"
|
|
|
|
|
|
[width]="5">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<ng-template #ngDataTableCell let-row="row">
|
|
<td (click)="onViewConfirm(row.item)">
|
|
<div style="display: flex; align-items: center;">
|
|
<span [ngStyle] = "{'color':row.item.status =='Out For Delivery'?'blue':'' }" class="checkTxt" *ngIf="row.item.status =='Out For Delivery'" >
|
|
{{row.item.status}} <p class="checkTxt" >({{row.item['UserDetails.userName']}}) <nb-icon icon="done-all-outline" style="color:#08d992" [nbTooltip]="'Driver seen at ' + (row.item.seenTime | date:'dd/MM/yyyy, h:mm a')" *ngIf="row.item.seenStatus == 1" ></nb-icon>
|
|
<nb-icon icon="done-all-outline" nbTooltip="Not Seen" style="color: rgb(159, 167, 170);" *ngIf="row.item.seenStatus == 0" ></nb-icon> </p>
|
|
|
|
</span>
|
|
<span [ngStyle] = "{'color':row.item.status =='ordered'?'#1f1dc9f5':row.item.status =='Delivered' ?'green':'red' }" class="checkTxt" *ngIf="row.item.status !='Out For Delivery'" >
|
|
{{row.item.status}} <p class="checkTxt" *ngIf="row.item.status == 'Delivered'">({{row.item['UserDetails.userName']}})</p>
|
|
</span>
|
|
</div>
|
|
|
|
</td>
|
|
</ng-template>
|
|
</ng-data-table-column>
|
|
|
|
<!-- <ng-data-table-column
|
|
[field]="'reason'"
|
|
[sortable]="false"
|
|
[title]="'Reason'"
|
|
[filterable]="false"
|
|
[width]="4">
|
|
|
|
</ng-data-table-column> -->
|
|
|
|
|
|
<!-- <ng-data-table-column
|
|
[field]="'role'"
|
|
[sortable]="false"
|
|
[title]="'view'"
|
|
[filterable]="false"
|
|
[width]="3">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<ng-template #ngDataTableCell let-row="row">
|
|
<td >
|
|
|
|
<div style="align-items: center;text-align: center;">
|
|
<nb-icon icon="eye-outline" title="View" style="color: green;" (click)="onViewConfirm(row.item)"></nb-icon>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</td>
|
|
</ng-template>
|
|
</ng-data-table-column> -->
|
|
|
|
</ng-data-table>
|
|
|
|
</nb-card-body>
|
|
|
|
|
|
<nb-card-footer>
|
|
<!-- <form class="form" [formGroup]="driverForm" (ngSubmit)="onSubmit()"> -->
|
|
<div class="row show-grid">
|
|
<div class="col-md-2">
|
|
<div style="text-align: center;">
|
|
|
|
<nb-checkbox (change)="onCheckboxChange($event)" status="primary" >Select All</nb-checkbox>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div>
|
|
<nb-select selected="" placeholder="Change Status" clearable style="width: 100% !important;" [(ngModel)]="selectStatus" >
|
|
<!-- <nb-option value="">Change Status</nb-option> -->
|
|
<nb-option value="ordered" >Ordered</nb-option>
|
|
<nb-option value="In Progress" >In Progresss</nb-option>
|
|
<nb-option value="Out For Delivery" >Out For Delivery</nb-option>
|
|
|
|
<!-- <nb-option value="Delivered" >Delivered</nb-option> -->
|
|
<nb-option value="Cancelled" >Cancelled</nb-option>
|
|
|
|
</nb-select>
|
|
<!-- <label for="subject">Drivers:</label> <br /> -->
|
|
|
|
</div>
|
|
</div>
|
|
<!-- <div class="col-md-3">
|
|
<div >
|
|
|
|
|
|
</div>
|
|
</div> -->
|
|
<div class="col-md-5">
|
|
<div >
|
|
<nb-select selected="" placeholder="Select Drivers" *ngIf="selectStatus == 'Out For Delivery'" [(ngModel)]="selectDriver" style="width: 100% !important;margin-right: 1rem;" >
|
|
<!-- <nb-option value="">Select Drivers</nb-option> -->
|
|
|
|
<nb-option *ngFor="let user of drivers; index as i; first as isFirst " [value]="user.id
|
|
">{{user.userName }}</nb-option>
|
|
|
|
|
|
</nb-select>
|
|
<input nbInput *ngIf="selectStatus == 'Cancelled'" [(ngModel)]="CancelReason" placeholder="Reason" style=" margin-right: 2%;" id="text">
|
|
<button (click)="onSubmit2()" type="submit" nbButton status="primary" hero>
|
|
Submit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="col-md-5">
|
|
<div style="text-align: end;">
|
|
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
<!-- </form> -->
|
|
</nb-card-footer>
|
|
|
|
</nb-card> |