I have a task where I need the timestamp to be updated after the orders in the application have completed loading. For more context, this is a website I’m working on that has an ‘Orderbook’ tab. Within the “Orderbook’ tab, is an ag-grid where orderbook orders are loaded. Below is the HTML code regarding the timestamp:
<div class= "col d-flex">
<div class="mr-auto">h4>Orderbook</h4></div>
<div class="py-1 px-1"><span class="last-refreshed-text"> Last Updated On:
{{lastRefreshed | date: 'MM dd hh:mm:ss a'}} </span></div>
</div>
<div class="py-1 px-1"><button mat-raised-button color="blue" title="Refresh Orders"
(click) ='refreshECM()' [disabled]="lastRefreshedInProgress">
<div class="my-auto"
<mat-spinner diameter= "16" *ngIf="lastRefreshedInProgress"></mat-spinner>
Refresh
</div>
</button>
</div>
Currently, if I navigate between tabs on the website such as “Orderbook” or “Roadshow Schedule”, the timestamp persists. Once I’m back on the Orderbook tab, the timestamp hasn’t updated which is what’s intended. The timestamp also refreshes once I click the refresh button or when I refresh from the browser itself as intended. However, when I click the refresh button created, the timestamp refreshes immediately even though the data hasn’t completed loading. This is the setup that I currently have:
ngOnInit() {
// Clear the stored timestamp when the page is refreshed or closed
window.onbeforeunload = () => {
sessionStorage.removeItem('lastRefreshed');
};
this.showIndicationRoadshow = this.hasRoadshowData;
// Retrieve the stored timestamp from local storage, if available
const storedLastRefreshed = sessionStorage.getItem('lastRefreshed');
if (storedLastRefreshed) {
this.lastRefreshed = new Date(storedLastRefreshed);
} else {
this.lastRefreshed = new Date();
}
}
refreshECM() {
this.lastRefreshed = new Date();
this.lastRefreshedInProgress = true;
if (this.gridApi) {
this.gridApi.showLoadingOverlay();
}
this.orderbookLoadingTimeout = 0;
this.refreshOrderBook.emit(true);
sessionStorage.setItem('lastRefreshed', this.lastRefreshed.toISOString());
}
ngOnDestroy(){
sessionStorage.setItem('lastRefreshed', this.lastRefreshed.toISOString());
}
I thought I could update the timestamp where the order data is processed so within this but I’m not sure :
ngOnChanges(changes: SimpleChanges) {
if (changes.orderData) {
setTimeout(() => {
this.rowDataECM = this.orderData;
this.orderbookLoadingTimeout = 500;
this.lastRefreshedInProgress = false;
}, this.orderbookLoadingTimeout);
}
}
If I work within ngOnChanges to update the timestamp after the orders have finished loading with this code, the timestamp doesn’t freeze when I’m navigating in between tabs and return to the ‘Orderbook’ tab:
ngOnChanges(changes: SimpleChanges) {
if (changes.orderData) {
setTimeout(() => {
this.rowDataECM = this.orderData;
this.orderbookLoadingTimeout = 500;
this.lastRefreshedInProgress = false;
// Update the timestamp after the orders have finished loading
this.lastRefreshed = new Date();
sessionStorage.setItem('lastRefreshed', this.lastRefreshed.toString());
}, this.orderbookLoadingTimeout);
}
}
So how can I have it so that the timestamp updates once the orders are finished loading but that if I am to navigate to another tab on the page, the timestamp shouldn’t update? Currently, I’ve only figured out a way for either the timestamp to freeze between tabs + timestamp refresh automatically despite orders still loading or timestamp refreshing after orders completed loading + timestamp also refreshes when navigating between tabs.
