@ethlete/query 4.7.2 → 4.7.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/devtools/components/query-devtools/query-devtools.component.mjs +41 -15
- package/esm2022/lib/query/query.mjs +1 -10
- package/esm2022/lib/query-store/query-store.mjs +1 -2
- package/fesm2022/ethlete-query.mjs +39 -23
- package/fesm2022/ethlete-query.mjs.map +1 -1
- package/lib/devtools/components/query-devtools/query-devtools.component.d.ts +6 -0
- package/package.json +1 -1
|
@@ -4,7 +4,7 @@ import { Observable, filter, takeWhile, switchMap, of, tap, BehaviorSubject, sha
|
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
5
|
import { isDevMode, InjectionToken, inject, signal, computed, effect, Component, ChangeDetectionStrategy, ViewEncapsulation, TemplateRef, ViewContainerRef, ErrorHandler, ChangeDetectorRef, Directive, Input, ElementRef, NgZone, assertInInjectionContext } from '@angular/core';
|
|
6
6
|
import { NgIf, NgFor, AsyncPipe, JsonPipe } from '@angular/common';
|
|
7
|
-
import { toSignal } from '@angular/core/rxjs-interop';
|
|
7
|
+
import { toObservable, toSignal } from '@angular/core/rxjs-interop';
|
|
8
8
|
import { FormGroup } from '@angular/forms';
|
|
9
9
|
import { Router, ActivatedRoute } from '@angular/router';
|
|
10
10
|
|
|
@@ -907,15 +907,6 @@ class Query {
|
|
|
907
907
|
this._isPollingPaused = false;
|
|
908
908
|
return this.poll({ ...this._currentPollConfig, triggerImmediately: true });
|
|
909
909
|
}
|
|
910
|
-
/**
|
|
911
|
-
* @internal
|
|
912
|
-
*/
|
|
913
|
-
_destroy() {
|
|
914
|
-
this._state$.complete();
|
|
915
|
-
this._onAbort$.complete();
|
|
916
|
-
this._pollingSubscription?.unsubscribe();
|
|
917
|
-
this._requestSubscription?.unsubscribe();
|
|
918
|
-
}
|
|
919
910
|
_getBearerAuthProvider() {
|
|
920
911
|
const authProvider = this._client.authProvider;
|
|
921
912
|
if (authProvider && isBearerAuthProvider(authProvider)) {
|
|
@@ -1201,6 +1192,7 @@ class QueryDevtoolsComponent {
|
|
|
1201
1192
|
this.isOpen = signal(false);
|
|
1202
1193
|
this.isTranslucent = signal(false);
|
|
1203
1194
|
this.snapLayout = signal('full');
|
|
1195
|
+
this.queryListMode = signal('live');
|
|
1204
1196
|
this.showResponse = signal(false);
|
|
1205
1197
|
this.showRawResponse = signal(false);
|
|
1206
1198
|
this.selectedClientId = signal(0);
|
|
@@ -1216,25 +1208,41 @@ class QueryDevtoolsComponent {
|
|
|
1216
1208
|
const config = this.selectedClientConfig();
|
|
1217
1209
|
return config.client._store;
|
|
1218
1210
|
});
|
|
1211
|
+
this.queryStore$ = toObservable(this.queryStore);
|
|
1219
1212
|
this._queries$ = new BehaviorSubject([]);
|
|
1220
1213
|
this.queries = toSignal(this._queries$);
|
|
1221
1214
|
this.selectedQuery = computed(() => {
|
|
1222
1215
|
const path = this.selectedQueryPath();
|
|
1223
|
-
|
|
1216
|
+
const mode = this.queryListMode();
|
|
1217
|
+
if (!path || !mode) {
|
|
1224
1218
|
return null;
|
|
1225
1219
|
}
|
|
1226
|
-
|
|
1220
|
+
if (mode === 'live') {
|
|
1221
|
+
return this.queries()?.find((q) => q._routeWithParams === path) ?? null;
|
|
1222
|
+
}
|
|
1223
|
+
return this.queryHistory()?.find((q) => q._routeWithParams === path) ?? null;
|
|
1227
1224
|
});
|
|
1225
|
+
this.queryHistory = signal([]);
|
|
1228
1226
|
this.trackByClient = (_, { client }) => client.config.baseRoute;
|
|
1229
1227
|
this.trackByQuery = (_, { _routeWithParams }) => _routeWithParams;
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1228
|
+
this.queryStore$
|
|
1229
|
+
.pipe(switchMap((s) => s.storeChange$.pipe(startWith(''), map(() => s._store), tap((s) => this._queries$.next(Array.from(s.values()))), takeUntil(this._destroy$))))
|
|
1230
|
+
.subscribe();
|
|
1231
|
+
this._queries$
|
|
1232
|
+
.pipe(tap((queries) => {
|
|
1233
|
+
const currentHistory = this.queryHistory();
|
|
1234
|
+
if (!queries || !currentHistory)
|
|
1235
|
+
return;
|
|
1236
|
+
const currentHistoryClone = [...currentHistory];
|
|
1237
|
+
for (const query of queries) {
|
|
1238
|
+
if (!currentHistoryClone.includes(query)) {
|
|
1239
|
+
currentHistoryClone.push(query);
|
|
1240
|
+
}
|
|
1241
|
+
}
|
|
1242
|
+
currentHistoryClone.splice(50);
|
|
1243
|
+
this.queryHistory.set(currentHistoryClone);
|
|
1244
|
+
}), takeUntil(this._destroy$))
|
|
1245
|
+
.subscribe();
|
|
1238
1246
|
effect(() => {
|
|
1239
1247
|
const devtoolConfig = {
|
|
1240
1248
|
isOpen: this.isOpen(),
|
|
@@ -1244,6 +1252,7 @@ class QueryDevtoolsComponent {
|
|
|
1244
1252
|
showRawResponse: this.showRawResponse(),
|
|
1245
1253
|
selectedClientId: this.selectedClientId(),
|
|
1246
1254
|
selectedQueryPath: this.selectedQueryPath(),
|
|
1255
|
+
queryListMode: this.queryListMode(),
|
|
1247
1256
|
};
|
|
1248
1257
|
window.localStorage.setItem('ethlete:query:devtools', JSON.stringify(devtoolConfig));
|
|
1249
1258
|
});
|
|
@@ -1257,6 +1266,7 @@ class QueryDevtoolsComponent {
|
|
|
1257
1266
|
this.showRawResponse.set(parsed.showRawResponse ?? false);
|
|
1258
1267
|
this.selectedClientId.set(parsed.selectedClientId ?? 0);
|
|
1259
1268
|
this.selectedQueryPath.set(parsed.selectedQueryPath ?? null);
|
|
1269
|
+
this.queryListMode.set(parsed.queryListMode ?? 'live');
|
|
1260
1270
|
}
|
|
1261
1271
|
}
|
|
1262
1272
|
toggleOpen() {
|
|
@@ -1274,20 +1284,27 @@ class QueryDevtoolsComponent {
|
|
|
1274
1284
|
selectSnapLayout(layout) {
|
|
1275
1285
|
this.snapLayout.set(layout);
|
|
1276
1286
|
}
|
|
1287
|
+
selectQueryListMode(mode) {
|
|
1288
|
+
this.queryListMode.set(mode);
|
|
1289
|
+
}
|
|
1277
1290
|
selectClient(clientId) {
|
|
1278
1291
|
this.selectedClientId.set(clientId);
|
|
1292
|
+
this.clearQueryHistory();
|
|
1279
1293
|
}
|
|
1280
1294
|
selectQuery(query) {
|
|
1281
1295
|
this.selectedQueryPath.set(query._routeWithParams);
|
|
1282
1296
|
}
|
|
1297
|
+
clearQueryHistory() {
|
|
1298
|
+
this.queryHistory.set([]);
|
|
1299
|
+
}
|
|
1283
1300
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: QueryDevtoolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1284
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: QueryDevtoolsComponent, isStandalone: true, selector: "et-query-devtools", host: { classAttribute: "et-query-devtools" }, ngImport: i0, template: "<button *ngIf=\"!isOpen()\" (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn\">Open Devtools</button>\n\n<div\n *ngIf=\"isOpen()\"\n [class.et-query-devtools-container--transparent]=\"isTranslucent()\"\n class=\"et-query-devtools-container et-query-devtools-container--snap-{{ snapLayout() }}\"\n>\n <button (click)=\"toggleOpen()\" class=\"et-query-devtools-close-btn\">Close Devtools</button>\n <button (click)=\"toggleTranslucent()\" class=\"et-query-devtools-translucent-btn\">Toggle Translucent</button>\n <button (click)=\"selectSnapLayout('full')\" class=\"et-query-devtools-snap-btn\">Snap full</button>\n <button (click)=\"selectSnapLayout('top')\" class=\"et-query-devtools-snap-btn\">Snap top</button>\n <button (click)=\"selectSnapLayout('bottom')\" class=\"et-query-devtools-snap-btn\">Snap bottom</button>\n <button (click)=\"selectSnapLayout('left')\" class=\"et-query-devtools-snap-btn\">Snap left</button>\n <button (click)=\"selectSnapLayout('right')\" class=\"et-query-devtools-snap-btn\">Snap right</button>\n\n <ng-container *ngIf=\"queryClientConfigs.length > 1\">\n <p>Client instance:</p>\n <ul>\n <li *ngFor=\"let clientConfig of queryClientConfigs; index as i; trackBy: trackByClient\">\n <button (click)=\"selectClient(i)\">\n {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n </button>\n </li>\n </ul>\n </ng-container>\n\n <ng-container *ngIf=\"selectedClientConfig() as cfg\">\n <p>{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n <button (click)=\"cfg.client._store.refreshQueriesInUse()\">Force Refresh of in use queries</button> <br />\n <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\">HARD Force Refresh</button>\n <br />\n <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\">\n PURGE & HARD Force Refresh\n </button>\n\n <ul>\n <li *ngFor=\"let query of queries(); trackBy: trackByQuery\">\n <button (click)=\"selectQuery(query)\">\n {{ query._routeWithParams }}\n </button>\n </li>\n </ul>\n </ng-container>\n\n <ng-container *ngIf=\"selectedQuery() as query\">\n <p>{{ query._routeWithParams }}</p>\n\n <button (click)=\"query.execute()\">Execute</button> <br />\n <button (click)=\"query.execute({ skipCache: true })\">FORCE Execute</button> <br />\n <button (click)=\"query.abort()\">Abort</button> <br />\n <button (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\">Poll</button> <br />\n <button (click)=\"query.stopPolling()\">Stop polling</button> <br />\n <button (click)=\"query.pausePolling()\">Pause polling</button> <br />\n <button (click)=\"query.resumePolling()\">Resume polling</button> <br />\n\n <div>\n <p>state type</p>\n <pre>{{
|
|
1301
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: QueryDevtoolsComponent, isStandalone: true, selector: "et-query-devtools", host: { classAttribute: "et-query-devtools" }, ngImport: i0, template: "<button *ngIf=\"!isOpen()\" (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn\">Open Devtools</button>\n\n<div\n *ngIf=\"isOpen()\"\n [class.et-query-devtools-container--transparent]=\"isTranslucent()\"\n class=\"et-query-devtools-container et-query-devtools-container--snap-{{ snapLayout() }}\"\n>\n <button (click)=\"toggleOpen()\" class=\"et-query-devtools-close-btn\">Close Devtools</button>\n <button (click)=\"toggleTranslucent()\" class=\"et-query-devtools-translucent-btn\">Toggle Translucent</button>\n <button (click)=\"selectSnapLayout('full')\" class=\"et-query-devtools-snap-btn\">Snap full</button>\n <button (click)=\"selectSnapLayout('top')\" class=\"et-query-devtools-snap-btn\">Snap top</button>\n <button (click)=\"selectSnapLayout('bottom')\" class=\"et-query-devtools-snap-btn\">Snap bottom</button>\n <button (click)=\"selectSnapLayout('left')\" class=\"et-query-devtools-snap-btn\">Snap left</button>\n <button (click)=\"selectSnapLayout('right')\" class=\"et-query-devtools-snap-btn\">Snap right</button>\n\n <ng-container *ngIf=\"queryClientConfigs.length > 1\">\n <p>Client instance:</p>\n <ul>\n <li *ngFor=\"let clientConfig of queryClientConfigs; index as i; trackBy: trackByClient\">\n <button (click)=\"selectClient(i)\">\n {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n </button>\n </li>\n </ul>\n </ng-container>\n\n <ng-container *ngIf=\"selectedClientConfig() as cfg\">\n <p>{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n <button (click)=\"cfg.client._store.refreshQueriesInUse()\">Force Refresh of in use queries</button> <br />\n <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\">HARD Force Refresh</button>\n <br />\n <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\">\n PURGE & HARD Force Refresh\n </button>\n\n <br />\n <br />\n\n <button (click)=\"selectQueryListMode('live')\">Live</button>\n <button (click)=\"selectQueryListMode('history')\">History (last {{ queryHistory().length }} )</button>\n <button *ngIf=\"queryListMode() === 'history'\" (click)=\"clearQueryHistory()\">Clear</button>\n <ul *ngIf=\"queryListMode() === 'live'\">\n <li *ngFor=\"let query of queries(); trackBy: trackByQuery\">\n <button (click)=\"selectQuery(query)\">\n {{ query._routeWithParams }}\n </button>\n </li>\n </ul>\n\n <ul *ngIf=\"queryListMode() === 'history'\">\n <li *ngFor=\"let query of queryHistory(); trackBy: trackByQuery\">\n <button (click)=\"selectQuery(query)\">\n {{ query._routeWithParams }}\n </button>\n </li>\n </ul>\n </ng-container>\n\n <ng-container *ngIf=\"selectedQuery() as query\">\n <p>{{ query._routeWithParams }}</p>\n\n <button (click)=\"query.execute()\">Execute</button> <br />\n <button (click)=\"query.execute({ skipCache: true })\">FORCE Execute</button> <br />\n <button (click)=\"query.abort()\">Abort</button> <br />\n <button (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\">Poll</button> <br />\n <button (click)=\"query.stopPolling()\">Stop polling</button> <br />\n <button (click)=\"query.pausePolling()\">Pause polling</button> <br />\n <button (click)=\"query.resumePolling()\">Resume polling</button> <br />\n\n <div>\n <p>state type</p>\n <pre>{{ query.rawState.type }}</pre>\n </div>\n\n <div>\n <p>_enableSmartPolling:</p>\n <pre>{{ query._enableSmartPolling }}</pre>\n </div>\n\n <div>\n <p>isExpired:</p>\n <pre>{{ query.isExpired }}</pre>\n </div>\n\n <div>\n <p>isInUse:</p>\n <pre>{{ query.isInUse }}</pre>\n </div>\n\n <div>\n <p>_subscriberCount:</p>\n <pre>{{ query._subscriberCount }}</pre>\n </div>\n\n <div>\n <p>isPolling:</p>\n <pre>{{ query.isPolling }}</pre>\n </div>\n\n <div>\n <p>_arguments:</p>\n <pre>{{ query._arguments | json }}</pre>\n </div>\n\n <div>\n <p>state$:</p>\n <p><i> Warning, this will cause a subscription if shown </i></p>\n <button (click)=\"toggleShowResponse()\">Show/Hide</button>\n <pre *ngIf=\"showResponse()\">{{ query.state$ | async | json }}</pre>\n </div>\n\n <div>\n <p>rawState:</p>\n <button (click)=\"toggleShowRawResponse()\">Show/Hide</button>\n <pre *ngIf=\"showRawResponse()\">{{ query.rawState | json }}</pre>\n </div>\n </ng-container>\n</div>\n", styles: [".et-query-devtools-container{position:fixed;inset:0;background-color:#000;z-index:10000;overflow:auto}.et-query-devtools-container.et-query-devtools-container--transparent{opacity:.25;pointer-events:none}.et-query-devtools-container.et-query-devtools-container--transparent .et-query-devtools-translucent-btn{pointer-events:all}.et-query-devtools-container.et-query-devtools-container--snap-left{inset-inline-start:0;inset-block-start:0;inset-block-end:0;width:50%}.et-query-devtools-container.et-query-devtools-container--snap-right{inset-inline-start:unset;inset-inline-end:0;inset-block-start:0;inset-block-end:0;width:50%}.et-query-devtools-container.et-query-devtools-container--snap-top{inset-inline-start:0;inset-block-start:0;inset-inline-end:0;height:50%}.et-query-devtools-container.et-query-devtools-container--snap-bottom{inset-inline-start:0;inset-block-start:unset;inset-block-end:0;inset-inline-end:0;height:50%}.et-query-devtools-open-btn{position:fixed;inset-inline-start:0;inset-block-start:0;z-index:9999}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
|
|
1285
1302
|
}
|
|
1286
1303
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: QueryDevtoolsComponent, decorators: [{
|
|
1287
1304
|
type: Component,
|
|
1288
1305
|
args: [{ selector: 'et-query-devtools', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, host: {
|
|
1289
1306
|
class: 'et-query-devtools',
|
|
1290
|
-
}, imports: [NgIf, NgFor, AsyncPipe, JsonPipe], hostDirectives: [], template: "<button *ngIf=\"!isOpen()\" (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn\">Open Devtools</button>\n\n<div\n *ngIf=\"isOpen()\"\n [class.et-query-devtools-container--transparent]=\"isTranslucent()\"\n class=\"et-query-devtools-container et-query-devtools-container--snap-{{ snapLayout() }}\"\n>\n <button (click)=\"toggleOpen()\" class=\"et-query-devtools-close-btn\">Close Devtools</button>\n <button (click)=\"toggleTranslucent()\" class=\"et-query-devtools-translucent-btn\">Toggle Translucent</button>\n <button (click)=\"selectSnapLayout('full')\" class=\"et-query-devtools-snap-btn\">Snap full</button>\n <button (click)=\"selectSnapLayout('top')\" class=\"et-query-devtools-snap-btn\">Snap top</button>\n <button (click)=\"selectSnapLayout('bottom')\" class=\"et-query-devtools-snap-btn\">Snap bottom</button>\n <button (click)=\"selectSnapLayout('left')\" class=\"et-query-devtools-snap-btn\">Snap left</button>\n <button (click)=\"selectSnapLayout('right')\" class=\"et-query-devtools-snap-btn\">Snap right</button>\n\n <ng-container *ngIf=\"queryClientConfigs.length > 1\">\n <p>Client instance:</p>\n <ul>\n <li *ngFor=\"let clientConfig of queryClientConfigs; index as i; trackBy: trackByClient\">\n <button (click)=\"selectClient(i)\">\n {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n </button>\n </li>\n </ul>\n </ng-container>\n\n <ng-container *ngIf=\"selectedClientConfig() as cfg\">\n <p>{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n <button (click)=\"cfg.client._store.refreshQueriesInUse()\">Force Refresh of in use queries</button> <br />\n <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\">HARD Force Refresh</button>\n <br />\n <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\">\n PURGE & HARD Force Refresh\n </button>\n\n <ul>\n <li *ngFor=\"let query of queries(); trackBy: trackByQuery\">\n <button (click)=\"selectQuery(query)\">\n {{ query._routeWithParams }}\n </button>\n </li>\n </ul>\n </ng-container>\n\n <ng-container *ngIf=\"selectedQuery() as query\">\n <p>{{ query._routeWithParams }}</p>\n\n <button (click)=\"query.execute()\">Execute</button> <br />\n <button (click)=\"query.execute({ skipCache: true })\">FORCE Execute</button> <br />\n <button (click)=\"query.abort()\">Abort</button> <br />\n <button (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\">Poll</button> <br />\n <button (click)=\"query.stopPolling()\">Stop polling</button> <br />\n <button (click)=\"query.pausePolling()\">Pause polling</button> <br />\n <button (click)=\"query.resumePolling()\">Resume polling</button> <br />\n\n <div>\n <p>state type</p>\n <pre>{{
|
|
1307
|
+
}, imports: [NgIf, NgFor, AsyncPipe, JsonPipe], hostDirectives: [], template: "<button *ngIf=\"!isOpen()\" (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn\">Open Devtools</button>\n\n<div\n *ngIf=\"isOpen()\"\n [class.et-query-devtools-container--transparent]=\"isTranslucent()\"\n class=\"et-query-devtools-container et-query-devtools-container--snap-{{ snapLayout() }}\"\n>\n <button (click)=\"toggleOpen()\" class=\"et-query-devtools-close-btn\">Close Devtools</button>\n <button (click)=\"toggleTranslucent()\" class=\"et-query-devtools-translucent-btn\">Toggle Translucent</button>\n <button (click)=\"selectSnapLayout('full')\" class=\"et-query-devtools-snap-btn\">Snap full</button>\n <button (click)=\"selectSnapLayout('top')\" class=\"et-query-devtools-snap-btn\">Snap top</button>\n <button (click)=\"selectSnapLayout('bottom')\" class=\"et-query-devtools-snap-btn\">Snap bottom</button>\n <button (click)=\"selectSnapLayout('left')\" class=\"et-query-devtools-snap-btn\">Snap left</button>\n <button (click)=\"selectSnapLayout('right')\" class=\"et-query-devtools-snap-btn\">Snap right</button>\n\n <ng-container *ngIf=\"queryClientConfigs.length > 1\">\n <p>Client instance:</p>\n <ul>\n <li *ngFor=\"let clientConfig of queryClientConfigs; index as i; trackBy: trackByClient\">\n <button (click)=\"selectClient(i)\">\n {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n </button>\n </li>\n </ul>\n </ng-container>\n\n <ng-container *ngIf=\"selectedClientConfig() as cfg\">\n <p>{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n <button (click)=\"cfg.client._store.refreshQueriesInUse()\">Force Refresh of in use queries</button> <br />\n <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\">HARD Force Refresh</button>\n <br />\n <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\">\n PURGE & HARD Force Refresh\n </button>\n\n <br />\n <br />\n\n <button (click)=\"selectQueryListMode('live')\">Live</button>\n <button (click)=\"selectQueryListMode('history')\">History (last {{ queryHistory().length }} )</button>\n <button *ngIf=\"queryListMode() === 'history'\" (click)=\"clearQueryHistory()\">Clear</button>\n <ul *ngIf=\"queryListMode() === 'live'\">\n <li *ngFor=\"let query of queries(); trackBy: trackByQuery\">\n <button (click)=\"selectQuery(query)\">\n {{ query._routeWithParams }}\n </button>\n </li>\n </ul>\n\n <ul *ngIf=\"queryListMode() === 'history'\">\n <li *ngFor=\"let query of queryHistory(); trackBy: trackByQuery\">\n <button (click)=\"selectQuery(query)\">\n {{ query._routeWithParams }}\n </button>\n </li>\n </ul>\n </ng-container>\n\n <ng-container *ngIf=\"selectedQuery() as query\">\n <p>{{ query._routeWithParams }}</p>\n\n <button (click)=\"query.execute()\">Execute</button> <br />\n <button (click)=\"query.execute({ skipCache: true })\">FORCE Execute</button> <br />\n <button (click)=\"query.abort()\">Abort</button> <br />\n <button (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\">Poll</button> <br />\n <button (click)=\"query.stopPolling()\">Stop polling</button> <br />\n <button (click)=\"query.pausePolling()\">Pause polling</button> <br />\n <button (click)=\"query.resumePolling()\">Resume polling</button> <br />\n\n <div>\n <p>state type</p>\n <pre>{{ query.rawState.type }}</pre>\n </div>\n\n <div>\n <p>_enableSmartPolling:</p>\n <pre>{{ query._enableSmartPolling }}</pre>\n </div>\n\n <div>\n <p>isExpired:</p>\n <pre>{{ query.isExpired }}</pre>\n </div>\n\n <div>\n <p>isInUse:</p>\n <pre>{{ query.isInUse }}</pre>\n </div>\n\n <div>\n <p>_subscriberCount:</p>\n <pre>{{ query._subscriberCount }}</pre>\n </div>\n\n <div>\n <p>isPolling:</p>\n <pre>{{ query.isPolling }}</pre>\n </div>\n\n <div>\n <p>_arguments:</p>\n <pre>{{ query._arguments | json }}</pre>\n </div>\n\n <div>\n <p>state$:</p>\n <p><i> Warning, this will cause a subscription if shown </i></p>\n <button (click)=\"toggleShowResponse()\">Show/Hide</button>\n <pre *ngIf=\"showResponse()\">{{ query.state$ | async | json }}</pre>\n </div>\n\n <div>\n <p>rawState:</p>\n <button (click)=\"toggleShowRawResponse()\">Show/Hide</button>\n <pre *ngIf=\"showRawResponse()\">{{ query.rawState | json }}</pre>\n </div>\n </ng-container>\n</div>\n", styles: [".et-query-devtools-container{position:fixed;inset:0;background-color:#000;z-index:10000;overflow:auto}.et-query-devtools-container.et-query-devtools-container--transparent{opacity:.25;pointer-events:none}.et-query-devtools-container.et-query-devtools-container--transparent .et-query-devtools-translucent-btn{pointer-events:all}.et-query-devtools-container.et-query-devtools-container--snap-left{inset-inline-start:0;inset-block-start:0;inset-block-end:0;width:50%}.et-query-devtools-container.et-query-devtools-container--snap-right{inset-inline-start:unset;inset-inline-end:0;inset-block-start:0;inset-block-end:0;width:50%}.et-query-devtools-container.et-query-devtools-container--snap-top{inset-inline-start:0;inset-block-start:0;inset-inline-end:0;height:50%}.et-query-devtools-container.et-query-devtools-container--snap-bottom{inset-inline-start:0;inset-block-start:unset;inset-block-end:0;inset-inline-end:0;height:50%}.et-query-devtools-open-btn{position:fixed;inset-inline-start:0;inset-block-start:0;z-index:9999}\n"] }]
|
|
1291
1308
|
}], ctorParameters: function () { return []; } });
|
|
1292
1309
|
|
|
1293
1310
|
class QueryDirective {
|
|
@@ -1984,7 +2001,6 @@ class QueryStore {
|
|
|
1984
2001
|
return this._store.get(id) ?? null;
|
|
1985
2002
|
}
|
|
1986
2003
|
remove(id) {
|
|
1987
|
-
this.get(id)?._destroy();
|
|
1988
2004
|
this._store.delete(id);
|
|
1989
2005
|
this._logState(id, null, 'REMOVE');
|
|
1990
2006
|
this._storeChange$.next(id);
|