@ethlete/query 5.21.0 → 5.22.0
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/CHANGELOG.md +12 -0
- package/fesm2022/ethlete-query.mjs +419 -228
- package/fesm2022/ethlete-query.mjs.map +1 -1
- package/lib/experimental/http-request.d.ts +3 -1
- package/lib/experimental/index.d.ts +1 -0
- package/lib/experimental/paged-query.d.ts +35 -0
- package/lib/experimental/query-errors.d.ts +7 -1
- package/lib/experimental/query-stack.d.ts +4 -2
- package/package.json +5 -7
- package/esm2022/ethlete-query.mjs +0 -5
- package/esm2022/index.mjs +0 -21
- package/esm2022/lib/auth/auth-provider.types.mjs +0 -2
- package/esm2022/lib/auth/auth-provider.utils.mjs +0 -25
- package/esm2022/lib/auth/basic-auth-provider.mjs +0 -15
- package/esm2022/lib/auth/bearer-auth-provider.mjs +0 -168
- package/esm2022/lib/auth/custom-header-auth-provider.mjs +0 -12
- package/esm2022/lib/auth/index.mjs +0 -6
- package/esm2022/lib/class-validator/class-validator.types.mjs +0 -2
- package/esm2022/lib/class-validator/class-validator.utils.mjs +0 -4
- package/esm2022/lib/class-validator/index.mjs +0 -3
- package/esm2022/lib/devtools/components/query-devtools/index.mjs +0 -2
- package/esm2022/lib/devtools/components/query-devtools/query-devtools.component.mjs +0 -297
- package/esm2022/lib/devtools/pipes/index.mjs +0 -2
- package/esm2022/lib/devtools/pipes/query-short-name.pipe.mjs +0 -24
- package/esm2022/lib/devtools/utils/index.mjs +0 -2
- package/esm2022/lib/devtools/utils/query-client.utils.mjs +0 -13
- package/esm2022/lib/directives/index.mjs +0 -4
- package/esm2022/lib/directives/infinity-query-trigger.directive.mjs +0 -56
- package/esm2022/lib/directives/infinity-query.directive.mjs +0 -147
- package/esm2022/lib/directives/query.directive.mjs +0 -123
- package/esm2022/lib/entity/entity-store.mjs +0 -127
- package/esm2022/lib/entity/entity.types.mjs +0 -2
- package/esm2022/lib/entity/entity.utils.mjs +0 -29
- package/esm2022/lib/entity/index.mjs +0 -4
- package/esm2022/lib/experimental/bearer-auth-provider-config.mjs +0 -19
- package/esm2022/lib/experimental/bearer-auth-provider.mjs +0 -245
- package/esm2022/lib/experimental/http-request.mjs +0 -154
- package/esm2022/lib/experimental/index.mjs +0 -22
- package/esm2022/lib/experimental/query-client-config.mjs +0 -13
- package/esm2022/lib/experimental/query-client.mjs +0 -16
- package/esm2022/lib/experimental/query-creator-templates.mjs +0 -33
- package/esm2022/lib/experimental/query-creator.mjs +0 -28
- package/esm2022/lib/experimental/query-dependencies.mjs +0 -14
- package/esm2022/lib/experimental/query-errors.mjs +0 -61
- package/esm2022/lib/experimental/query-execute-utils.mjs +0 -54
- package/esm2022/lib/experimental/query-execute.mjs +0 -14
- package/esm2022/lib/experimental/query-features.mjs +0 -126
- package/esm2022/lib/experimental/query-repository.mjs +0 -97
- package/esm2022/lib/experimental/query-snapshot.mjs +0 -45
- package/esm2022/lib/experimental/query-stack.mjs +0 -65
- package/esm2022/lib/experimental/query-state.mjs +0 -20
- package/esm2022/lib/experimental/query-utils.mjs +0 -176
- package/esm2022/lib/experimental/query.mjs +0 -29
- package/esm2022/lib/experimental/secure-query-creator.mjs +0 -15
- package/esm2022/lib/experimental/secure-query-execute.mjs +0 -80
- package/esm2022/lib/experimental/secure-query.mjs +0 -33
- package/esm2022/lib/gql/gql.mjs +0 -23
- package/esm2022/lib/gql/index.mjs +0 -2
- package/esm2022/lib/infinite-query/index.mjs +0 -4
- package/esm2022/lib/infinite-query/infinity-query.mjs +0 -171
- package/esm2022/lib/infinite-query/infinity-query.types.mjs +0 -2
- package/esm2022/lib/infinite-query/infinity-query.utils.mjs +0 -3
- package/esm2022/lib/logger/index.mjs +0 -2
- package/esm2022/lib/logger/logger.mjs +0 -16
- package/esm2022/lib/query/index.mjs +0 -4
- package/esm2022/lib/query/query.mjs +0 -431
- package/esm2022/lib/query/query.types.mjs +0 -2
- package/esm2022/lib/query/query.utils.mjs +0 -253
- package/esm2022/lib/query-client/index.mjs +0 -4
- package/esm2022/lib/query-client/query-client.mjs +0 -80
- package/esm2022/lib/query-client/query-client.types.mjs +0 -2
- package/esm2022/lib/query-client/query-client.utils.mjs +0 -20
- package/esm2022/lib/query-creator/index.mjs +0 -3
- package/esm2022/lib/query-creator/query-creator.mjs +0 -55
- package/esm2022/lib/query-creator/query-creator.types.mjs +0 -2
- package/esm2022/lib/query-form/index.mjs +0 -4
- package/esm2022/lib/query-form/query-form.mjs +0 -412
- package/esm2022/lib/query-form/query-form.types.mjs +0 -2
- package/esm2022/lib/query-form/query-form.utils.mjs +0 -97
- package/esm2022/lib/query-store/index.mjs +0 -2
- package/esm2022/lib/query-store/query-store.mjs +0 -144
- package/esm2022/lib/request/index.mjs +0 -4
- package/esm2022/lib/request/request.mjs +0 -196
- package/esm2022/lib/request/request.types.mjs +0 -2
- package/esm2022/lib/request/request.util.mjs +0 -252
- package/esm2022/lib/symfony/index.mjs +0 -3
- package/esm2022/lib/symfony/symfony.types.mjs +0 -2
- package/esm2022/lib/symfony/symfony.utils.mjs +0 -31
- package/esm2022/lib/utils/data.utils.mjs +0 -138
- package/esm2022/lib/utils/deep-freeze.util.mjs +0 -17
- package/esm2022/lib/utils/def.util.mjs +0 -8
- package/esm2022/lib/utils/index.mjs +0 -4
|
@@ -1121,17 +1121,13 @@ const isQueryCollection = (query) => {
|
|
|
1121
1121
|
const createQueryCollection = (
|
|
1122
1122
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
1123
1123
|
queryMap) => new BehaviorSubject(null);
|
|
1124
|
-
const createQueryCollectionSubject = (
|
|
1125
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
1126
|
-
queryMap, config) => {
|
|
1124
|
+
const createQueryCollectionSubject = (queryMap, config) => {
|
|
1127
1125
|
assertInInjectionContext(createQueryCollectionSubject);
|
|
1128
1126
|
const subject = new BehaviorSubject(null);
|
|
1129
1127
|
addQueryContainerHandling(subject.pipe(map((s) => s?.query ?? null)), () => subject.getValue()?.query ?? null, config);
|
|
1130
1128
|
return subject;
|
|
1131
1129
|
};
|
|
1132
|
-
const createQueryCollectionSignal = (
|
|
1133
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
1134
|
-
queryMap, config) => {
|
|
1130
|
+
const createQueryCollectionSignal = (queryMap, config) => {
|
|
1135
1131
|
assertInInjectionContext(createQueryCollectionSignal);
|
|
1136
1132
|
const _signal = signal(null);
|
|
1137
1133
|
addQueryContainerHandling(toObservable(_signal).pipe(map((s) => s?.query ?? null)), () => _signal()?.query ?? null, config);
|
|
@@ -1720,7 +1716,7 @@ class BearerAuthProvider {
|
|
|
1720
1716
|
refreshToken: null,
|
|
1721
1717
|
});
|
|
1722
1718
|
const cookieEnabled = _config.refreshConfig?.cookieEnabled ?? true;
|
|
1723
|
-
const cookieToken = _config.refreshConfig?.cookieName && cookieEnabled ? getCookie(_config.refreshConfig.cookieName) ?? null : null;
|
|
1719
|
+
const cookieToken = _config.refreshConfig?.cookieName && cookieEnabled ? (getCookie(_config.refreshConfig.cookieName) ?? null) : null;
|
|
1724
1720
|
this._tokens$.next({
|
|
1725
1721
|
token: _config.token || null,
|
|
1726
1722
|
refreshToken: _config.refreshConfig?.token || cookieToken || null,
|
|
@@ -1959,13 +1955,12 @@ class QueryDirective {
|
|
|
1959
1955
|
this._viewContainerRef.createEmbeddedView(this._mainTemplateRef, this._viewContext);
|
|
1960
1956
|
}
|
|
1961
1957
|
}
|
|
1962
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1963
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1958
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: QueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1959
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.3", type: QueryDirective, isStandalone: true, selector: "[etQuery]", inputs: { query: ["etQuery", "query"], cache: ["etQueryCache", "cache"] }, ngImport: i0 }); }
|
|
1964
1960
|
}
|
|
1965
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1961
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: QueryDirective, decorators: [{
|
|
1966
1962
|
type: Directive,
|
|
1967
1963
|
args: [{
|
|
1968
|
-
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
1969
1964
|
selector: '[etQuery]',
|
|
1970
1965
|
standalone: true,
|
|
1971
1966
|
}]
|
|
@@ -2270,13 +2265,12 @@ class InfinityQueryDirective {
|
|
|
2270
2265
|
this._viewContext.currentQuery = null;
|
|
2271
2266
|
this._data$.next([]);
|
|
2272
2267
|
}
|
|
2273
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2274
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2268
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InfinityQueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2269
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.3", type: InfinityQueryDirective, isStandalone: true, selector: "[etInfinityQuery]", inputs: { infinityQuery: ["etInfinityQuery", "infinityQuery"] }, providers: [{ provide: INFINITY_QUERY_TOKEN, useExisting: InfinityQueryDirective }], exportAs: ["etInfinityQuery"], hostDirectives: [{ directive: i1.DelayableDirective }], ngImport: i0 }); }
|
|
2275
2270
|
}
|
|
2276
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2271
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InfinityQueryDirective, decorators: [{
|
|
2277
2272
|
type: Directive,
|
|
2278
2273
|
args: [{
|
|
2279
|
-
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
2280
2274
|
selector: '[etInfinityQuery]',
|
|
2281
2275
|
exportAs: 'etInfinityQuery',
|
|
2282
2276
|
standalone: true,
|
|
@@ -2326,13 +2320,12 @@ class InfinityQueryTriggerDirective {
|
|
|
2326
2320
|
});
|
|
2327
2321
|
this._observer.observe(this._elementRef.nativeElement);
|
|
2328
2322
|
}
|
|
2329
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2330
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2323
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InfinityQueryTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2324
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.3", type: InfinityQueryTriggerDirective, isStandalone: true, selector: "[etInfinityQueryTrigger], et-infinity-query-trigger", inputs: { scrollContainerSelector: "scrollContainerSelector" }, ngImport: i0 }); }
|
|
2331
2325
|
}
|
|
2332
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2326
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InfinityQueryTriggerDirective, decorators: [{
|
|
2333
2327
|
type: Directive,
|
|
2334
2328
|
args: [{
|
|
2335
|
-
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
2336
2329
|
selector: '[etInfinityQueryTrigger], et-infinity-query-trigger',
|
|
2337
2330
|
standalone: true,
|
|
2338
2331
|
}]
|
|
@@ -2354,10 +2347,10 @@ class QueryShortNamePipe {
|
|
|
2354
2347
|
}
|
|
2355
2348
|
return route;
|
|
2356
2349
|
}
|
|
2357
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2358
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
2350
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: QueryShortNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
2351
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: QueryShortNamePipe, isStandalone: true, name: "queryShortName" }); }
|
|
2359
2352
|
}
|
|
2360
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2353
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: QueryShortNamePipe, decorators: [{
|
|
2361
2354
|
type: Pipe,
|
|
2362
2355
|
args: [{ name: 'queryShortName', standalone: true }]
|
|
2363
2356
|
}] });
|
|
@@ -2591,7 +2584,7 @@ class QueryDevtoolsComponent {
|
|
|
2591
2584
|
viewMode: this.viewMode(),
|
|
2592
2585
|
};
|
|
2593
2586
|
window.localStorage.setItem('ethlete:query:devtools', JSON.stringify(devtoolConfig));
|
|
2594
|
-
}
|
|
2587
|
+
});
|
|
2595
2588
|
const initialConfig = window.localStorage.getItem('ethlete:query:devtools');
|
|
2596
2589
|
if (initialConfig) {
|
|
2597
2590
|
const parsed = JSON.parse(initialConfig);
|
|
@@ -2648,14 +2641,14 @@ class QueryDevtoolsComponent {
|
|
|
2648
2641
|
clearQueryHistory() {
|
|
2649
2642
|
this.queryHistory$.next([]);
|
|
2650
2643
|
}
|
|
2651
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2652
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: QueryDevtoolsComponent, isStandalone: true, selector: "et-query-devtools", host: { classAttribute: "et-query-devtools" }, ngImport: i0, template: "@if (!isOpen()) {\n <button (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn et-qd-chip\">Query Devtools</button>\n}\n\n@if (isOpen()) {\n <div\n [class.et-query-devtools-container--transparent]=\"isTranslucent()\"\n class=\"et-query-devtools-container et-query-devtools-container--snap-{{ snapLayout() }}\"\n >\n <header class=\"et-qd-header\">\n <h3 class=\"et-qd-header__title\">Query Devtools</h3>\n\n <div class=\"et-qd-header__select\">\n <label for=\"et-query-client-instance\">Client instance</label>\n <select [formControl]=\"selectedClientIdCtrl\" id=\"et-query-client-instance\">\n @for (clientConfig of queryClientConfigs; track trackByClient(i, clientConfig); let i = $index) {\n <option [value]=\"i\">\n {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n </option>\n }\n </select>\n </div>\n\n <button (click)=\"toggleOpen()\" class=\"et-qd-btn et-qd-btn-secondary\">Close</button>\n </header>\n\n <div class=\"et-qd-sub-header\">\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !isTranslucent() }\"\n (click)=\"toggleTranslucent()\"\n class=\"et-qd-chip et-qd-translucent-clickable\"\n >\n Translucent\n </button>\n <div class=\"et-qd-sub-header__divider\"></div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'full' }\"\n (click)=\"selectSnapLayout('full')\"\n class=\"et-qd-chip\"\n >\n Fullscreen\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'top' }\"\n (click)=\"selectSnapLayout('top')\"\n class=\"et-qd-chip\"\n >\n Top\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'bottom' }\"\n (click)=\"selectSnapLayout('bottom')\"\n class=\"et-qd-chip\"\n >\n Bottom\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'left' }\"\n (click)=\"selectSnapLayout('left')\"\n class=\"et-qd-chip\"\n >\n Left\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'right' }\"\n (click)=\"selectSnapLayout('right')\"\n class=\"et-qd-chip\"\n >\n Right\n </button>\n </div>\n\n @if (selectedClientConfig(); as cfg) {\n <div class=\"et-qd-client\">\n <p class=\"et-qd-client__title\">{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n <div class=\"et-qd-client__actions\">\n <button (click)=\"cfg.client._store.refreshQueriesInUse()\" class=\"et-qd-chip\">Refresh all</button>\n <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\" class=\"et-qd-chip\">\n Refresh all (ignore caches)\n </button>\n <button\n (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\"\n class=\"et-qd-chip\"\n >\n Refresh all (ignore caches & purge unused)\n </button>\n </div>\n </div>\n }\n\n @if (selectedClientConfig(); as cfg) {\n <div class=\"et-qd-queries\">\n <p class=\"et-qd-queries__title\">Inspector</p>\n <div class=\"et-qd-queries__actions\">\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'live' || viewMode() !== 'query' }\"\n (click)=\"selectQueryListMode('live'); selectViewMode('query')\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Live Queries ({{ queries()?.length ?? 0 }})\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'history' || viewMode() !== 'query' }\"\n (click)=\"selectQueryListMode('history'); selectViewMode('query')\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Query History ({{ (queryHistory$ | async)?.length ?? 0 }}/50)\n </button>\n @if (queryListMode() === 'history' && viewMode() === 'query') {\n <div class=\"et-qd-queries__divider\"></div>\n <button (click)=\"clearQueryHistory()\" class=\"et-qd-chip et-qd-chip-bordered\">Clear history</button>\n }\n\n <div class=\"et-qd-queries__divider\"></div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': viewMode() !== 'authProvider' }\"\n (click)=\"selectViewMode('authProvider')\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Auth Provider\n </button>\n </div>\n\n @if (viewMode() === 'query') {\n <div class=\"et-qd-queries__browser\">\n @if (queryListMode() === 'live') {\n <ul class=\"et-qd-queries__browser-list\">\n @for (query of queries(); track trackByQuery($index, query)) {\n <li>\n <button\n [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\"\n (click)=\"selectQuery(query)\"\n >\n <span> {{ query._queryConfig.method }}</span>\n <span> {{ query | queryShortName }}</span>\n </button>\n </li>\n }\n </ul>\n }\n @if (queryListMode() === 'history') {\n <ul class=\"et-qd-queries__browser-list\">\n @for (query of queryHistory$ | async; track trackByQuery($index, query)) {\n <li>\n <button\n [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\"\n (click)=\"selectQuery(query)\"\n >\n <span> {{ query._queryConfig.method }}</span>\n <span> {{ query | queryShortName }}</span>\n </button>\n </li>\n }\n </ul>\n }\n <div class=\"et-qd-queries__browser-detail\">\n @if (selectedQuery(); as query) {\n <p class=\"et-qd-queries__browser-detail__title\">\n {{ query._queryConfig.method }} {{ query._routeWithParams }}\n </p>\n\n <div class=\"et-qd-queries__actions\">\n <button (click)=\"query.execute()\" class=\"et-qd-chip et-qd-chip-bordered\">Execute</button>\n <button (click)=\"query.execute({ skipCache: true })\" class=\"et-qd-chip et-qd-chip-bordered\">\n Execute (ignore cache)\n </button>\n\n <button (click)=\"query.abort()\" class=\"et-qd-chip et-qd-chip-bordered\">Abort</button>\n <div class=\"et-qd-queries__divider\"></div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !query.isPolling }\"\n (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Poll\n </button>\n\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': query.isPolling }\"\n (click)=\"query.stopPolling()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Stop polling\n </button>\n @if (query.isPolling || query._isPollingPaused) {\n <button (click)=\"query.pausePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n Pause polling\n </button>\n <button (click)=\"query.resumePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n Resume polling\n </button>\n }\n </div>\n\n <div class=\"et-qd-list\">\n <div class=\"et-qd-list-item\">\n <p>State type</p>\n <pre>{{ query.rawState.type }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Dependents</p>\n <pre>{{ query._dependents | json }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Is expired</p>\n <pre>{{ query.isExpired }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Is in use</p>\n <pre>{{ query.isInUse }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Subscriber count</p>\n <pre>{{ query._subscriberCount }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Is polling</p>\n <pre>{{ query.isPolling }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Is polling paused</p>\n <pre>{{ query._isPollingPaused }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Enable smart polling</p>\n <pre>{{ query._enableSmartPolling }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Query store key</p>\n <pre>{{ query._queryStoreKey }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Arguments</p>\n\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showArguments() }\"\n (click)=\"toggleShowArguments()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n @if (showArguments()) {\n <pre>{{ query._arguments | json }}</pre>\n }\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>State</p>\n <p><i> Warning, this will cause a subscription if shown!</i></p>\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showResponse() }\"\n (click)=\"toggleShowResponse()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n @if (showResponse()) {\n <pre>{{ query.state$ | async | json }}</pre>\n }\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Raw state</p>\n <p><i> The query state unaffected by entity stores</i></p>\n\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showRawResponse() }\"\n (click)=\"toggleShowRawResponse()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n @if (showRawResponse()) {\n <pre>{{ query.rawState | json }}</pre>\n }\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Query config</p>\n\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showQueryConfig() }\"\n (click)=\"toggleShowQueryConfig()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n @if (showQueryConfig()) {\n <pre>{{ stringifiedQueryConfig() | json }}</pre>\n }\n </div>\n\n @if (!!query._queryConfig.entity) {\n <div class=\"et-qd-list-item\">\n <p>Entity store value</p>\n\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showEntityStoreValue() }\"\n (click)=\"toggleShowEntityStoreValue()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n @if (showEntityStoreValue()) {\n <pre>{{ selectedQueryEntityStoreValue$ | async | json }}</pre>\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n } @else if (viewMode() === 'authProvider') {\n <div class=\"et-qd-auth-provider__viewer\">\n @if (authProviderDetails(); as details) {\n <div class=\"et-qd-list\">\n <div class=\"et-qd-list-item\">\n <p>Type</p>\n <pre>{{ details.type }}</pre>\n </div>\n <div class=\"et-qd-list-item\">\n <p>Header value</p>\n <pre>{{ details.header() | json }}</pre>\n </div>\n <div class=\"et-qd-list-item\">\n <p>Config</p>\n <pre>{{ details.config | json }}</pre>\n </div>\n\n @if (details.type === 'BearerAuthProvider') {\n <div class=\"et-qd-list-item\">\n <p>Tokens</p>\n <pre>{{ details.provider.tokens$ | async | json }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Should refresh on unauthorized response</p>\n <pre>{{ details.provider.shouldRefreshOnUnauthorizedResponse }}</pre>\n </div>\n\n <ng-container\n *etQuery=\"\n details.provider.currentRefreshQuery$ | async as response;\n loading as loading;\n error as error;\n query as query\n \"\n >\n <div class=\"et-qd-list-item\">\n <p>Refresh query response</p>\n\n <div>\n <button (click)=\"details.provider._refreshQuery()\" class=\"et-qd-chip et-qd-chip-bordered\">\n Refresh\n </button>\n </div>\n <pre>{{ response | json }}</pre>\n </div>\n <div class=\"et-qd-list-item\">\n <p>Refresh query loading</p>\n <pre>{{ loading }}</pre>\n </div>\n <div class=\"et-qd-list-item\">\n <p>Refresh query error</p>\n <pre>{{ error ?? 'null' }}</pre>\n </div>\n <div class=\"et-qd-list-item\">\n <p>State</p>\n <pre>{{ query?.state$ | async | json }}</pre>\n </div>\n </ng-container>\n }\n </div>\n } @else {\n <p>No auth provider set</p>\n }\n </div>\n }\n </div>\n }\n </div>\n}\n", styles: [":host{position:fixed;top:0;z-index:1000000;font-size:14px;color:#fff}.et-query-devtools-container{position:fixed;inset:0;background-color:#25292e;z-index:10000;overflow:auto;font-family:monospace;display:grid;grid-template-rows:auto auto auto minmax(0,1fr)}.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%;border-right:1px solid rgb(37,41,46)}.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%;border-left:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-top{inset-inline-start:0;inset-block-start:0;inset-inline-end:0;height:50%;border-bottom:1px solid rgb(37,41,46)}.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%;border-top:1px solid rgb(37,41,46)}button.et-query-devtools-open-btn{position:fixed;inset-inline-end:20px;inset-block-end:0;z-index:9999;font-family:monospace;border-radius:3px 3px 0 0;line-height:14px;font-size:12px}.et-qd-header{background-color:#00ffa1;padding:12px;display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center}.et-qd-header__title{color:#25292e;margin:0;font-size:22px}.et-qd-header__select{display:grid;background-color:#25292e;border-radius:10px;overflow:hidden}.et-qd-header__select select{width:250px;color:#fff;padding:3px 10px 2px;border:none;background-color:#25292e;font-family:monospace}.et-qd-header__select label{padding:3px 10px;color:#25292e;font-size:12px;font-weight:700;color:#fff;border-bottom:1px solid gray}.et-qd-sub-header{background-color:#00b371;padding:12px;display:flex;gap:12px;flex-wrap:wrap}.et-qd-sub-header__divider{width:1px;background-color:#25292e}.et-qd-btn{background-color:#00ffa1;color:#25292e;border:none;padding:12px;cursor:pointer;font-size:14px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;width:100%;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-btn:hover{background-color:#00cc81}.et-qd-btn.et-qd-btn-secondary{background-color:#25292e;color:#00ffa1}.et-qd-btn.et-qd-btn-secondary:hover{background-color:#3c424a}.et-qd-chip{background-color:#00ffa1;color:#25292e;border:none;padding:4px 9px;cursor:pointer;font-size:12px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-chip:hover{background-color:#00cc81}.et-qd-chip.et-qd-chip-secondary{background-color:#25292e;color:#00ffa1}.et-qd-chip.et-qd-chip-secondary:hover{background-color:#3c424a}.et-qd-chip.et-qd-chip-bordered{border:1px solid rgb(0,255,161)}.et-qd-translucent-clickable{pointer-events:all}.et-qd-client{border-bottom:1px solid #3c424a;padding:12px}.et-qd-client__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-client__actions{display:flex;gap:12px;margin-top:12px}.et-qd-queries{padding:12px;display:grid;grid-template-rows:auto auto minmax(0,1fr)}.et-qd-queries__actions{display:flex;gap:12px;margin-top:12px;margin-bottom:16px}.et-qd-queries__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-queries__divider{width:1px;background-color:#3c424a}.et-qd-queries__browser{display:grid;grid-template-columns:1fr minmax(0,3fr);margin-left:-12px;margin-right:-12px;border-top:1px solid #3c424a;margin-bottom:-12px}.et-qd-queries__browser-list{border-right:1px solid #3c424a;list-style:none;padding:0;margin:0;display:grid;grid-auto-flow:row;grid-auto-rows:55px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-list li{margin:0}.et-qd-queries__browser-list li button{all:unset;font-family:monospace;box-sizing:border-box;width:100%;border:none;border-bottom:1px solid #3c424a;background-color:#25292e;color:#fff;text-align:left;padding:12px;height:100%;transition:all .3s ease-in-out;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px;display:block}.et-qd-queries__browser-list li button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.et-qd-queries__browser-list li button span:first-of-type{font-weight:700}.et-qd-queries__browser-list li button:hover,.et-qd-queries__browser-list li button.et-qd-query--active{background-color:#30363c}.et-qd-queries__browser-detail{padding:12px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-detail__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-auth-provider__viewer{border-top:1px solid #3c424a;margin-left:-12px;margin-right:-12px;margin-bottom:-12px;padding:12px;overflow-y:auto;overflow-x:hidden}.et-qd-list{display:grid;gap:12px}.et-qd-list-item{display:grid}.et-qd-list-item p{font-weight:700;margin:0;padding-bottom:8px}.et-qd-list-item p+p{margin-top:-8px}.et-qd-list-item div+pre{margin-top:8px}.et-qd-list-item pre{margin:0;padding:4px;background-color:#0e1012;border-radius:4px;max-height:450px;overflow:auto}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: QueryShortNamePipe, name: "queryShortName" }, { kind: "directive", type: QueryDirective, selector: "[etQuery]", inputs: ["etQuery", "etQueryCache"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
|
|
2644
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: QueryDevtoolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2645
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: QueryDevtoolsComponent, isStandalone: true, selector: "et-query-devtools", host: { classAttribute: "et-query-devtools" }, ngImport: i0, template: "@if (!isOpen()) {\n <button (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn et-qd-chip\">Query Devtools</button>\n}\n\n@if (isOpen()) {\n <div\n [class.et-query-devtools-container--transparent]=\"isTranslucent()\"\n class=\"et-query-devtools-container et-query-devtools-container--snap-{{ snapLayout() }}\"\n >\n <header class=\"et-qd-header\">\n <h3 class=\"et-qd-header__title\">Query Devtools</h3>\n\n <div class=\"et-qd-header__select\">\n <label for=\"et-query-client-instance\">Client instance</label>\n <select [formControl]=\"selectedClientIdCtrl\" id=\"et-query-client-instance\">\n @for (clientConfig of queryClientConfigs; track trackByClient(i, clientConfig); let i = $index) {\n <option [value]=\"i\">\n {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n </option>\n }\n </select>\n </div>\n\n <button (click)=\"toggleOpen()\" class=\"et-qd-btn et-qd-btn-secondary\">Close</button>\n </header>\n\n <div class=\"et-qd-sub-header\">\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !isTranslucent() }\"\n (click)=\"toggleTranslucent()\"\n class=\"et-qd-chip et-qd-translucent-clickable\"\n >\n Translucent\n </button>\n <div class=\"et-qd-sub-header__divider\"></div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'full' }\"\n (click)=\"selectSnapLayout('full')\"\n class=\"et-qd-chip\"\n >\n Fullscreen\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'top' }\"\n (click)=\"selectSnapLayout('top')\"\n class=\"et-qd-chip\"\n >\n Top\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'bottom' }\"\n (click)=\"selectSnapLayout('bottom')\"\n class=\"et-qd-chip\"\n >\n Bottom\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'left' }\"\n (click)=\"selectSnapLayout('left')\"\n class=\"et-qd-chip\"\n >\n Left\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'right' }\"\n (click)=\"selectSnapLayout('right')\"\n class=\"et-qd-chip\"\n >\n Right\n </button>\n </div>\n\n @if (selectedClientConfig(); as cfg) {\n <div class=\"et-qd-client\">\n <p class=\"et-qd-client__title\">{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n <div class=\"et-qd-client__actions\">\n <button (click)=\"cfg.client._store.refreshQueriesInUse()\" class=\"et-qd-chip\">Refresh all</button>\n <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\" class=\"et-qd-chip\">\n Refresh all (ignore caches)\n </button>\n <button\n (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\"\n class=\"et-qd-chip\"\n >\n Refresh all (ignore caches & purge unused)\n </button>\n </div>\n </div>\n }\n\n @if (selectedClientConfig(); as cfg) {\n <div class=\"et-qd-queries\">\n <p class=\"et-qd-queries__title\">Inspector</p>\n <div class=\"et-qd-queries__actions\">\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'live' || viewMode() !== 'query' }\"\n (click)=\"selectQueryListMode('live'); selectViewMode('query')\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Live Queries ({{ queries()?.length ?? 0 }})\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'history' || viewMode() !== 'query' }\"\n (click)=\"selectQueryListMode('history'); selectViewMode('query')\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Query History ({{ (queryHistory$ | async)?.length ?? 0 }}/50)\n </button>\n @if (queryListMode() === 'history' && viewMode() === 'query') {\n <div class=\"et-qd-queries__divider\"></div>\n <button (click)=\"clearQueryHistory()\" class=\"et-qd-chip et-qd-chip-bordered\">Clear history</button>\n }\n\n <div class=\"et-qd-queries__divider\"></div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': viewMode() !== 'authProvider' }\"\n (click)=\"selectViewMode('authProvider')\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Auth Provider\n </button>\n </div>\n\n @if (viewMode() === 'query') {\n <div class=\"et-qd-queries__browser\">\n @if (queryListMode() === 'live') {\n <ul class=\"et-qd-queries__browser-list\">\n @for (query of queries(); track trackByQuery($index, query)) {\n <li>\n <button\n [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\"\n (click)=\"selectQuery(query)\"\n >\n <span> {{ query._queryConfig.method }}</span>\n <span> {{ query | queryShortName }}</span>\n </button>\n </li>\n }\n </ul>\n }\n @if (queryListMode() === 'history') {\n <ul class=\"et-qd-queries__browser-list\">\n @for (query of queryHistory$ | async; track trackByQuery($index, query)) {\n <li>\n <button\n [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\"\n (click)=\"selectQuery(query)\"\n >\n <span> {{ query._queryConfig.method }}</span>\n <span> {{ query | queryShortName }}</span>\n </button>\n </li>\n }\n </ul>\n }\n <div class=\"et-qd-queries__browser-detail\">\n @if (selectedQuery(); as query) {\n <p class=\"et-qd-queries__browser-detail__title\">\n {{ query._queryConfig.method }} {{ query._routeWithParams }}\n </p>\n\n <div class=\"et-qd-queries__actions\">\n <button (click)=\"query.execute()\" class=\"et-qd-chip et-qd-chip-bordered\">Execute</button>\n <button (click)=\"query.execute({ skipCache: true })\" class=\"et-qd-chip et-qd-chip-bordered\">\n Execute (ignore cache)\n </button>\n\n <button (click)=\"query.abort()\" class=\"et-qd-chip et-qd-chip-bordered\">Abort</button>\n <div class=\"et-qd-queries__divider\"></div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !query.isPolling }\"\n (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Poll\n </button>\n\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': query.isPolling }\"\n (click)=\"query.stopPolling()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Stop polling\n </button>\n @if (query.isPolling || query._isPollingPaused) {\n <button (click)=\"query.pausePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n Pause polling\n </button>\n <button (click)=\"query.resumePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n Resume polling\n </button>\n }\n </div>\n\n <div class=\"et-qd-list\">\n <div class=\"et-qd-list-item\">\n <p>State type</p>\n <pre>{{ query.rawState.type }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Dependents</p>\n <pre>{{ query._dependents | json }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Is expired</p>\n <pre>{{ query.isExpired }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Is in use</p>\n <pre>{{ query.isInUse }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Subscriber count</p>\n <pre>{{ query._subscriberCount }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Is polling</p>\n <pre>{{ query.isPolling }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Is polling paused</p>\n <pre>{{ query._isPollingPaused }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Enable smart polling</p>\n <pre>{{ query._enableSmartPolling }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Query store key</p>\n <pre>{{ query._queryStoreKey }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Arguments</p>\n\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showArguments() }\"\n (click)=\"toggleShowArguments()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n @if (showArguments()) {\n <pre>{{ query._arguments | json }}</pre>\n }\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>State</p>\n <p><i> Warning, this will cause a subscription if shown!</i></p>\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showResponse() }\"\n (click)=\"toggleShowResponse()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n @if (showResponse()) {\n <pre>{{ query.state$ | async | json }}</pre>\n }\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Raw state</p>\n <p><i> The query state unaffected by entity stores</i></p>\n\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showRawResponse() }\"\n (click)=\"toggleShowRawResponse()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n @if (showRawResponse()) {\n <pre>{{ query.rawState | json }}</pre>\n }\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Query config</p>\n\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showQueryConfig() }\"\n (click)=\"toggleShowQueryConfig()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n @if (showQueryConfig()) {\n <pre>{{ stringifiedQueryConfig() | json }}</pre>\n }\n </div>\n\n @if (!!query._queryConfig.entity) {\n <div class=\"et-qd-list-item\">\n <p>Entity store value</p>\n\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showEntityStoreValue() }\"\n (click)=\"toggleShowEntityStoreValue()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n @if (showEntityStoreValue()) {\n <pre>{{ selectedQueryEntityStoreValue$ | async | json }}</pre>\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n } @else if (viewMode() === 'authProvider') {\n <div class=\"et-qd-auth-provider__viewer\">\n @if (authProviderDetails(); as details) {\n <div class=\"et-qd-list\">\n <div class=\"et-qd-list-item\">\n <p>Type</p>\n <pre>{{ details.type }}</pre>\n </div>\n <div class=\"et-qd-list-item\">\n <p>Header value</p>\n <pre>{{ details.header() | json }}</pre>\n </div>\n <div class=\"et-qd-list-item\">\n <p>Config</p>\n <pre>{{ details.config | json }}</pre>\n </div>\n\n @if (details.type === 'BearerAuthProvider') {\n <div class=\"et-qd-list-item\">\n <p>Tokens</p>\n <pre>{{ details.provider.tokens$ | async | json }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Should refresh on unauthorized response</p>\n <pre>{{ details.provider.shouldRefreshOnUnauthorizedResponse }}</pre>\n </div>\n\n <ng-container\n *etQuery=\"\n details.provider.currentRefreshQuery$ | async as response;\n loading as loading;\n error as error;\n query as query\n \"\n >\n <div class=\"et-qd-list-item\">\n <p>Refresh query response</p>\n\n <div>\n <button (click)=\"details.provider._refreshQuery()\" class=\"et-qd-chip et-qd-chip-bordered\">\n Refresh\n </button>\n </div>\n <pre>{{ response | json }}</pre>\n </div>\n <div class=\"et-qd-list-item\">\n <p>Refresh query loading</p>\n <pre>{{ loading }}</pre>\n </div>\n <div class=\"et-qd-list-item\">\n <p>Refresh query error</p>\n <pre>{{ error ?? 'null' }}</pre>\n </div>\n <div class=\"et-qd-list-item\">\n <p>State</p>\n <pre>{{ query?.state$ | async | json }}</pre>\n </div>\n </ng-container>\n }\n </div>\n } @else {\n <p>No auth provider set</p>\n }\n </div>\n }\n </div>\n }\n </div>\n}\n", styles: [":host{position:fixed;top:0;z-index:1000000;font-size:14px;color:#fff}.et-query-devtools-container{position:fixed;inset:0;background-color:#25292e;z-index:10000;overflow:auto;font-family:monospace;display:grid;grid-template-rows:auto auto auto minmax(0,1fr)}.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%;border-right:1px solid rgb(37,41,46)}.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%;border-left:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-top{inset-inline-start:0;inset-block-start:0;inset-inline-end:0;height:50%;border-bottom:1px solid rgb(37,41,46)}.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%;border-top:1px solid rgb(37,41,46)}button.et-query-devtools-open-btn{position:fixed;inset-inline-end:20px;inset-block-end:0;z-index:9999;font-family:monospace;border-radius:3px 3px 0 0;line-height:14px;font-size:12px}.et-qd-header{background-color:#00ffa1;padding:12px;display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center}.et-qd-header__title{color:#25292e;margin:0;font-size:22px}.et-qd-header__select{display:grid;background-color:#25292e;border-radius:10px;overflow:hidden}.et-qd-header__select select{width:250px;color:#fff;padding:3px 10px 2px;border:none;background-color:#25292e;font-family:monospace}.et-qd-header__select label{padding:3px 10px;color:#25292e;font-size:12px;font-weight:700;color:#fff;border-bottom:1px solid gray}.et-qd-sub-header{background-color:#00b371;padding:12px;display:flex;gap:12px;flex-wrap:wrap}.et-qd-sub-header__divider{width:1px;background-color:#25292e}.et-qd-btn{background-color:#00ffa1;color:#25292e;border:none;padding:12px;cursor:pointer;font-size:14px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;width:100%;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-btn:hover{background-color:#00cc81}.et-qd-btn.et-qd-btn-secondary{background-color:#25292e;color:#00ffa1}.et-qd-btn.et-qd-btn-secondary:hover{background-color:#3c424a}.et-qd-chip{background-color:#00ffa1;color:#25292e;border:none;padding:4px 9px;cursor:pointer;font-size:12px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-chip:hover{background-color:#00cc81}.et-qd-chip.et-qd-chip-secondary{background-color:#25292e;color:#00ffa1}.et-qd-chip.et-qd-chip-secondary:hover{background-color:#3c424a}.et-qd-chip.et-qd-chip-bordered{border:1px solid rgb(0,255,161)}.et-qd-translucent-clickable{pointer-events:all}.et-qd-client{border-bottom:1px solid rgb(59.734939759,66.1927710843,74.265060241);padding:12px}.et-qd-client__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-client__actions{display:flex;gap:12px;margin-top:12px}.et-qd-queries{padding:12px;display:grid;grid-template-rows:auto auto minmax(0,1fr)}.et-qd-queries__actions{display:flex;gap:12px;margin-top:12px;margin-bottom:16px}.et-qd-queries__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-queries__divider{width:1px;background-color:#3c424a}.et-qd-queries__browser{display:grid;grid-template-columns:1fr minmax(0,3fr);margin-left:-12px;margin-right:-12px;border-top:1px solid rgb(59.734939759,66.1927710843,74.265060241);margin-bottom:-12px}.et-qd-queries__browser-list{border-right:1px solid rgb(59.734939759,66.1927710843,74.265060241);list-style:none;padding:0;margin:0;display:grid;grid-auto-flow:row;grid-auto-rows:55px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-list li{margin:0}.et-qd-queries__browser-list li button{all:unset;font-family:monospace;box-sizing:border-box;width:100%;border:none;border-bottom:1px solid rgb(59.734939759,66.1927710843,74.265060241);background-color:#25292e;color:#fff;text-align:left;padding:12px;height:100%;transition:all .3s ease-in-out;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px;display:block}.et-qd-queries__browser-list li button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.et-qd-queries__browser-list li button span:first-of-type{font-weight:700}.et-qd-queries__browser-list li button:hover,.et-qd-queries__browser-list li button.et-qd-query--active{background-color:#30363c}.et-qd-queries__browser-detail{padding:12px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-detail__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-auth-provider__viewer{border-top:1px solid rgb(59.734939759,66.1927710843,74.265060241);margin-left:-12px;margin-right:-12px;margin-bottom:-12px;padding:12px;overflow-y:auto;overflow-x:hidden}.et-qd-list{display:grid;gap:12px}.et-qd-list-item{display:grid}.et-qd-list-item p{font-weight:700;margin:0;padding-bottom:8px}.et-qd-list-item p+p{margin-top:-8px}.et-qd-list-item div+pre{margin-top:8px}.et-qd-list-item pre{margin:0;padding:4px;background-color:#0e1012;border-radius:4px;max-height:450px;overflow:auto}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: QueryShortNamePipe, name: "queryShortName" }, { kind: "directive", type: QueryDirective, selector: "[etQuery]", inputs: ["etQuery", "etQueryCache"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
|
|
2653
2646
|
}
|
|
2654
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2647
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: QueryDevtoolsComponent, decorators: [{
|
|
2655
2648
|
type: Component,
|
|
2656
|
-
args: [{ selector: 'et-query-devtools',
|
|
2649
|
+
args: [{ selector: 'et-query-devtools', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, host: {
|
|
2657
2650
|
class: 'et-query-devtools',
|
|
2658
|
-
}, imports: [AsyncPipe, JsonPipe, ReactiveFormsModule, NgClass, QueryShortNamePipe, QueryDirective], template: "@if (!isOpen()) {\n <button (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn et-qd-chip\">Query Devtools</button>\n}\n\n@if (isOpen()) {\n <div\n [class.et-query-devtools-container--transparent]=\"isTranslucent()\"\n class=\"et-query-devtools-container et-query-devtools-container--snap-{{ snapLayout() }}\"\n >\n <header class=\"et-qd-header\">\n <h3 class=\"et-qd-header__title\">Query Devtools</h3>\n\n <div class=\"et-qd-header__select\">\n <label for=\"et-query-client-instance\">Client instance</label>\n <select [formControl]=\"selectedClientIdCtrl\" id=\"et-query-client-instance\">\n @for (clientConfig of queryClientConfigs; track trackByClient(i, clientConfig); let i = $index) {\n <option [value]=\"i\">\n {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n </option>\n }\n </select>\n </div>\n\n <button (click)=\"toggleOpen()\" class=\"et-qd-btn et-qd-btn-secondary\">Close</button>\n </header>\n\n <div class=\"et-qd-sub-header\">\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !isTranslucent() }\"\n (click)=\"toggleTranslucent()\"\n class=\"et-qd-chip et-qd-translucent-clickable\"\n >\n Translucent\n </button>\n <div class=\"et-qd-sub-header__divider\"></div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'full' }\"\n (click)=\"selectSnapLayout('full')\"\n class=\"et-qd-chip\"\n >\n Fullscreen\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'top' }\"\n (click)=\"selectSnapLayout('top')\"\n class=\"et-qd-chip\"\n >\n Top\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'bottom' }\"\n (click)=\"selectSnapLayout('bottom')\"\n class=\"et-qd-chip\"\n >\n Bottom\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'left' }\"\n (click)=\"selectSnapLayout('left')\"\n class=\"et-qd-chip\"\n >\n Left\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'right' }\"\n (click)=\"selectSnapLayout('right')\"\n class=\"et-qd-chip\"\n >\n Right\n </button>\n </div>\n\n @if (selectedClientConfig(); as cfg) {\n <div class=\"et-qd-client\">\n <p class=\"et-qd-client__title\">{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n <div class=\"et-qd-client__actions\">\n <button (click)=\"cfg.client._store.refreshQueriesInUse()\" class=\"et-qd-chip\">Refresh all</button>\n <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\" class=\"et-qd-chip\">\n Refresh all (ignore caches)\n </button>\n <button\n (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\"\n class=\"et-qd-chip\"\n >\n Refresh all (ignore caches & purge unused)\n </button>\n </div>\n </div>\n }\n\n @if (selectedClientConfig(); as cfg) {\n <div class=\"et-qd-queries\">\n <p class=\"et-qd-queries__title\">Inspector</p>\n <div class=\"et-qd-queries__actions\">\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'live' || viewMode() !== 'query' }\"\n (click)=\"selectQueryListMode('live'); selectViewMode('query')\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Live Queries ({{ queries()?.length ?? 0 }})\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'history' || viewMode() !== 'query' }\"\n (click)=\"selectQueryListMode('history'); selectViewMode('query')\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Query History ({{ (queryHistory$ | async)?.length ?? 0 }}/50)\n </button>\n @if (queryListMode() === 'history' && viewMode() === 'query') {\n <div class=\"et-qd-queries__divider\"></div>\n <button (click)=\"clearQueryHistory()\" class=\"et-qd-chip et-qd-chip-bordered\">Clear history</button>\n }\n\n <div class=\"et-qd-queries__divider\"></div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': viewMode() !== 'authProvider' }\"\n (click)=\"selectViewMode('authProvider')\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Auth Provider\n </button>\n </div>\n\n @if (viewMode() === 'query') {\n <div class=\"et-qd-queries__browser\">\n @if (queryListMode() === 'live') {\n <ul class=\"et-qd-queries__browser-list\">\n @for (query of queries(); track trackByQuery($index, query)) {\n <li>\n <button\n [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\"\n (click)=\"selectQuery(query)\"\n >\n <span> {{ query._queryConfig.method }}</span>\n <span> {{ query | queryShortName }}</span>\n </button>\n </li>\n }\n </ul>\n }\n @if (queryListMode() === 'history') {\n <ul class=\"et-qd-queries__browser-list\">\n @for (query of queryHistory$ | async; track trackByQuery($index, query)) {\n <li>\n <button\n [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\"\n (click)=\"selectQuery(query)\"\n >\n <span> {{ query._queryConfig.method }}</span>\n <span> {{ query | queryShortName }}</span>\n </button>\n </li>\n }\n </ul>\n }\n <div class=\"et-qd-queries__browser-detail\">\n @if (selectedQuery(); as query) {\n <p class=\"et-qd-queries__browser-detail__title\">\n {{ query._queryConfig.method }} {{ query._routeWithParams }}\n </p>\n\n <div class=\"et-qd-queries__actions\">\n <button (click)=\"query.execute()\" class=\"et-qd-chip et-qd-chip-bordered\">Execute</button>\n <button (click)=\"query.execute({ skipCache: true })\" class=\"et-qd-chip et-qd-chip-bordered\">\n Execute (ignore cache)\n </button>\n\n <button (click)=\"query.abort()\" class=\"et-qd-chip et-qd-chip-bordered\">Abort</button>\n <div class=\"et-qd-queries__divider\"></div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !query.isPolling }\"\n (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Poll\n </button>\n\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': query.isPolling }\"\n (click)=\"query.stopPolling()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Stop polling\n </button>\n @if (query.isPolling || query._isPollingPaused) {\n <button (click)=\"query.pausePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n Pause polling\n </button>\n <button (click)=\"query.resumePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n Resume polling\n </button>\n }\n </div>\n\n <div class=\"et-qd-list\">\n <div class=\"et-qd-list-item\">\n <p>State type</p>\n <pre>{{ query.rawState.type }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Dependents</p>\n <pre>{{ query._dependents | json }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Is expired</p>\n <pre>{{ query.isExpired }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Is in use</p>\n <pre>{{ query.isInUse }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Subscriber count</p>\n <pre>{{ query._subscriberCount }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Is polling</p>\n <pre>{{ query.isPolling }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Is polling paused</p>\n <pre>{{ query._isPollingPaused }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Enable smart polling</p>\n <pre>{{ query._enableSmartPolling }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Query store key</p>\n <pre>{{ query._queryStoreKey }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Arguments</p>\n\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showArguments() }\"\n (click)=\"toggleShowArguments()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n @if (showArguments()) {\n <pre>{{ query._arguments | json }}</pre>\n }\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>State</p>\n <p><i> Warning, this will cause a subscription if shown!</i></p>\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showResponse() }\"\n (click)=\"toggleShowResponse()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n @if (showResponse()) {\n <pre>{{ query.state$ | async | json }}</pre>\n }\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Raw state</p>\n <p><i> The query state unaffected by entity stores</i></p>\n\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showRawResponse() }\"\n (click)=\"toggleShowRawResponse()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n @if (showRawResponse()) {\n <pre>{{ query.rawState | json }}</pre>\n }\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Query config</p>\n\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showQueryConfig() }\"\n (click)=\"toggleShowQueryConfig()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n @if (showQueryConfig()) {\n <pre>{{ stringifiedQueryConfig() | json }}</pre>\n }\n </div>\n\n @if (!!query._queryConfig.entity) {\n <div class=\"et-qd-list-item\">\n <p>Entity store value</p>\n\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showEntityStoreValue() }\"\n (click)=\"toggleShowEntityStoreValue()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n @if (showEntityStoreValue()) {\n <pre>{{ selectedQueryEntityStoreValue$ | async | json }}</pre>\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n } @else if (viewMode() === 'authProvider') {\n <div class=\"et-qd-auth-provider__viewer\">\n @if (authProviderDetails(); as details) {\n <div class=\"et-qd-list\">\n <div class=\"et-qd-list-item\">\n <p>Type</p>\n <pre>{{ details.type }}</pre>\n </div>\n <div class=\"et-qd-list-item\">\n <p>Header value</p>\n <pre>{{ details.header() | json }}</pre>\n </div>\n <div class=\"et-qd-list-item\">\n <p>Config</p>\n <pre>{{ details.config | json }}</pre>\n </div>\n\n @if (details.type === 'BearerAuthProvider') {\n <div class=\"et-qd-list-item\">\n <p>Tokens</p>\n <pre>{{ details.provider.tokens$ | async | json }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Should refresh on unauthorized response</p>\n <pre>{{ details.provider.shouldRefreshOnUnauthorizedResponse }}</pre>\n </div>\n\n <ng-container\n *etQuery=\"\n details.provider.currentRefreshQuery$ | async as response;\n loading as loading;\n error as error;\n query as query\n \"\n >\n <div class=\"et-qd-list-item\">\n <p>Refresh query response</p>\n\n <div>\n <button (click)=\"details.provider._refreshQuery()\" class=\"et-qd-chip et-qd-chip-bordered\">\n Refresh\n </button>\n </div>\n <pre>{{ response | json }}</pre>\n </div>\n <div class=\"et-qd-list-item\">\n <p>Refresh query loading</p>\n <pre>{{ loading }}</pre>\n </div>\n <div class=\"et-qd-list-item\">\n <p>Refresh query error</p>\n <pre>{{ error ?? 'null' }}</pre>\n </div>\n <div class=\"et-qd-list-item\">\n <p>State</p>\n <pre>{{ query?.state$ | async | json }}</pre>\n </div>\n </ng-container>\n }\n </div>\n } @else {\n <p>No auth provider set</p>\n }\n </div>\n }\n </div>\n }\n </div>\n}\n", styles: [":host{position:fixed;top:0;z-index:1000000;font-size:14px;color:#fff}.et-query-devtools-container{position:fixed;inset:0;background-color:#25292e;z-index:10000;overflow:auto;font-family:monospace;display:grid;grid-template-rows:auto auto auto minmax(0,1fr)}.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%;border-right:1px solid rgb(37,41,46)}.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%;border-left:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-top{inset-inline-start:0;inset-block-start:0;inset-inline-end:0;height:50%;border-bottom:1px solid rgb(37,41,46)}.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%;border-top:1px solid rgb(37,41,46)}button.et-query-devtools-open-btn{position:fixed;inset-inline-end:20px;inset-block-end:0;z-index:9999;font-family:monospace;border-radius:3px 3px 0 0;line-height:14px;font-size:12px}.et-qd-header{background-color:#00ffa1;padding:12px;display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center}.et-qd-header__title{color:#25292e;margin:0;font-size:22px}.et-qd-header__select{display:grid;background-color:#25292e;border-radius:10px;overflow:hidden}.et-qd-header__select select{width:250px;color:#fff;padding:3px 10px 2px;border:none;background-color:#25292e;font-family:monospace}.et-qd-header__select label{padding:3px 10px;color:#25292e;font-size:12px;font-weight:700;color:#fff;border-bottom:1px solid gray}.et-qd-sub-header{background-color:#00b371;padding:12px;display:flex;gap:12px;flex-wrap:wrap}.et-qd-sub-header__divider{width:1px;background-color:#25292e}.et-qd-btn{background-color:#00ffa1;color:#25292e;border:none;padding:12px;cursor:pointer;font-size:14px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;width:100%;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-btn:hover{background-color:#00cc81}.et-qd-btn.et-qd-btn-secondary{background-color:#25292e;color:#00ffa1}.et-qd-btn.et-qd-btn-secondary:hover{background-color:#3c424a}.et-qd-chip{background-color:#00ffa1;color:#25292e;border:none;padding:4px 9px;cursor:pointer;font-size:12px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-chip:hover{background-color:#00cc81}.et-qd-chip.et-qd-chip-secondary{background-color:#25292e;color:#00ffa1}.et-qd-chip.et-qd-chip-secondary:hover{background-color:#3c424a}.et-qd-chip.et-qd-chip-bordered{border:1px solid rgb(0,255,161)}.et-qd-translucent-clickable{pointer-events:all}.et-qd-client{border-bottom:1px solid #3c424a;padding:12px}.et-qd-client__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-client__actions{display:flex;gap:12px;margin-top:12px}.et-qd-queries{padding:12px;display:grid;grid-template-rows:auto auto minmax(0,1fr)}.et-qd-queries__actions{display:flex;gap:12px;margin-top:12px;margin-bottom:16px}.et-qd-queries__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-queries__divider{width:1px;background-color:#3c424a}.et-qd-queries__browser{display:grid;grid-template-columns:1fr minmax(0,3fr);margin-left:-12px;margin-right:-12px;border-top:1px solid #3c424a;margin-bottom:-12px}.et-qd-queries__browser-list{border-right:1px solid #3c424a;list-style:none;padding:0;margin:0;display:grid;grid-auto-flow:row;grid-auto-rows:55px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-list li{margin:0}.et-qd-queries__browser-list li button{all:unset;font-family:monospace;box-sizing:border-box;width:100%;border:none;border-bottom:1px solid #3c424a;background-color:#25292e;color:#fff;text-align:left;padding:12px;height:100%;transition:all .3s ease-in-out;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px;display:block}.et-qd-queries__browser-list li button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.et-qd-queries__browser-list li button span:first-of-type{font-weight:700}.et-qd-queries__browser-list li button:hover,.et-qd-queries__browser-list li button.et-qd-query--active{background-color:#30363c}.et-qd-queries__browser-detail{padding:12px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-detail__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-auth-provider__viewer{border-top:1px solid #3c424a;margin-left:-12px;margin-right:-12px;margin-bottom:-12px;padding:12px;overflow-y:auto;overflow-x:hidden}.et-qd-list{display:grid;gap:12px}.et-qd-list-item{display:grid}.et-qd-list-item p{font-weight:700;margin:0;padding-bottom:8px}.et-qd-list-item p+p{margin-top:-8px}.et-qd-list-item div+pre{margin-top:8px}.et-qd-list-item pre{margin:0;padding:4px;background-color:#0e1012;border-radius:4px;max-height:450px;overflow:auto}\n"] }]
|
|
2651
|
+
}, imports: [AsyncPipe, JsonPipe, ReactiveFormsModule, NgClass, QueryShortNamePipe, QueryDirective], template: "@if (!isOpen()) {\n <button (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn et-qd-chip\">Query Devtools</button>\n}\n\n@if (isOpen()) {\n <div\n [class.et-query-devtools-container--transparent]=\"isTranslucent()\"\n class=\"et-query-devtools-container et-query-devtools-container--snap-{{ snapLayout() }}\"\n >\n <header class=\"et-qd-header\">\n <h3 class=\"et-qd-header__title\">Query Devtools</h3>\n\n <div class=\"et-qd-header__select\">\n <label for=\"et-query-client-instance\">Client instance</label>\n <select [formControl]=\"selectedClientIdCtrl\" id=\"et-query-client-instance\">\n @for (clientConfig of queryClientConfigs; track trackByClient(i, clientConfig); let i = $index) {\n <option [value]=\"i\">\n {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n </option>\n }\n </select>\n </div>\n\n <button (click)=\"toggleOpen()\" class=\"et-qd-btn et-qd-btn-secondary\">Close</button>\n </header>\n\n <div class=\"et-qd-sub-header\">\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !isTranslucent() }\"\n (click)=\"toggleTranslucent()\"\n class=\"et-qd-chip et-qd-translucent-clickable\"\n >\n Translucent\n </button>\n <div class=\"et-qd-sub-header__divider\"></div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'full' }\"\n (click)=\"selectSnapLayout('full')\"\n class=\"et-qd-chip\"\n >\n Fullscreen\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'top' }\"\n (click)=\"selectSnapLayout('top')\"\n class=\"et-qd-chip\"\n >\n Top\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'bottom' }\"\n (click)=\"selectSnapLayout('bottom')\"\n class=\"et-qd-chip\"\n >\n Bottom\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'left' }\"\n (click)=\"selectSnapLayout('left')\"\n class=\"et-qd-chip\"\n >\n Left\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'right' }\"\n (click)=\"selectSnapLayout('right')\"\n class=\"et-qd-chip\"\n >\n Right\n </button>\n </div>\n\n @if (selectedClientConfig(); as cfg) {\n <div class=\"et-qd-client\">\n <p class=\"et-qd-client__title\">{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n <div class=\"et-qd-client__actions\">\n <button (click)=\"cfg.client._store.refreshQueriesInUse()\" class=\"et-qd-chip\">Refresh all</button>\n <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\" class=\"et-qd-chip\">\n Refresh all (ignore caches)\n </button>\n <button\n (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\"\n class=\"et-qd-chip\"\n >\n Refresh all (ignore caches & purge unused)\n </button>\n </div>\n </div>\n }\n\n @if (selectedClientConfig(); as cfg) {\n <div class=\"et-qd-queries\">\n <p class=\"et-qd-queries__title\">Inspector</p>\n <div class=\"et-qd-queries__actions\">\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'live' || viewMode() !== 'query' }\"\n (click)=\"selectQueryListMode('live'); selectViewMode('query')\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Live Queries ({{ queries()?.length ?? 0 }})\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'history' || viewMode() !== 'query' }\"\n (click)=\"selectQueryListMode('history'); selectViewMode('query')\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Query History ({{ (queryHistory$ | async)?.length ?? 0 }}/50)\n </button>\n @if (queryListMode() === 'history' && viewMode() === 'query') {\n <div class=\"et-qd-queries__divider\"></div>\n <button (click)=\"clearQueryHistory()\" class=\"et-qd-chip et-qd-chip-bordered\">Clear history</button>\n }\n\n <div class=\"et-qd-queries__divider\"></div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': viewMode() !== 'authProvider' }\"\n (click)=\"selectViewMode('authProvider')\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Auth Provider\n </button>\n </div>\n\n @if (viewMode() === 'query') {\n <div class=\"et-qd-queries__browser\">\n @if (queryListMode() === 'live') {\n <ul class=\"et-qd-queries__browser-list\">\n @for (query of queries(); track trackByQuery($index, query)) {\n <li>\n <button\n [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\"\n (click)=\"selectQuery(query)\"\n >\n <span> {{ query._queryConfig.method }}</span>\n <span> {{ query | queryShortName }}</span>\n </button>\n </li>\n }\n </ul>\n }\n @if (queryListMode() === 'history') {\n <ul class=\"et-qd-queries__browser-list\">\n @for (query of queryHistory$ | async; track trackByQuery($index, query)) {\n <li>\n <button\n [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\"\n (click)=\"selectQuery(query)\"\n >\n <span> {{ query._queryConfig.method }}</span>\n <span> {{ query | queryShortName }}</span>\n </button>\n </li>\n }\n </ul>\n }\n <div class=\"et-qd-queries__browser-detail\">\n @if (selectedQuery(); as query) {\n <p class=\"et-qd-queries__browser-detail__title\">\n {{ query._queryConfig.method }} {{ query._routeWithParams }}\n </p>\n\n <div class=\"et-qd-queries__actions\">\n <button (click)=\"query.execute()\" class=\"et-qd-chip et-qd-chip-bordered\">Execute</button>\n <button (click)=\"query.execute({ skipCache: true })\" class=\"et-qd-chip et-qd-chip-bordered\">\n Execute (ignore cache)\n </button>\n\n <button (click)=\"query.abort()\" class=\"et-qd-chip et-qd-chip-bordered\">Abort</button>\n <div class=\"et-qd-queries__divider\"></div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !query.isPolling }\"\n (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Poll\n </button>\n\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': query.isPolling }\"\n (click)=\"query.stopPolling()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Stop polling\n </button>\n @if (query.isPolling || query._isPollingPaused) {\n <button (click)=\"query.pausePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n Pause polling\n </button>\n <button (click)=\"query.resumePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n Resume polling\n </button>\n }\n </div>\n\n <div class=\"et-qd-list\">\n <div class=\"et-qd-list-item\">\n <p>State type</p>\n <pre>{{ query.rawState.type }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Dependents</p>\n <pre>{{ query._dependents | json }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Is expired</p>\n <pre>{{ query.isExpired }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Is in use</p>\n <pre>{{ query.isInUse }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Subscriber count</p>\n <pre>{{ query._subscriberCount }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Is polling</p>\n <pre>{{ query.isPolling }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Is polling paused</p>\n <pre>{{ query._isPollingPaused }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Enable smart polling</p>\n <pre>{{ query._enableSmartPolling }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Query store key</p>\n <pre>{{ query._queryStoreKey }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Arguments</p>\n\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showArguments() }\"\n (click)=\"toggleShowArguments()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n @if (showArguments()) {\n <pre>{{ query._arguments | json }}</pre>\n }\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>State</p>\n <p><i> Warning, this will cause a subscription if shown!</i></p>\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showResponse() }\"\n (click)=\"toggleShowResponse()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n @if (showResponse()) {\n <pre>{{ query.state$ | async | json }}</pre>\n }\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Raw state</p>\n <p><i> The query state unaffected by entity stores</i></p>\n\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showRawResponse() }\"\n (click)=\"toggleShowRawResponse()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n @if (showRawResponse()) {\n <pre>{{ query.rawState | json }}</pre>\n }\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Query config</p>\n\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showQueryConfig() }\"\n (click)=\"toggleShowQueryConfig()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n @if (showQueryConfig()) {\n <pre>{{ stringifiedQueryConfig() | json }}</pre>\n }\n </div>\n\n @if (!!query._queryConfig.entity) {\n <div class=\"et-qd-list-item\">\n <p>Entity store value</p>\n\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showEntityStoreValue() }\"\n (click)=\"toggleShowEntityStoreValue()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n @if (showEntityStoreValue()) {\n <pre>{{ selectedQueryEntityStoreValue$ | async | json }}</pre>\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n } @else if (viewMode() === 'authProvider') {\n <div class=\"et-qd-auth-provider__viewer\">\n @if (authProviderDetails(); as details) {\n <div class=\"et-qd-list\">\n <div class=\"et-qd-list-item\">\n <p>Type</p>\n <pre>{{ details.type }}</pre>\n </div>\n <div class=\"et-qd-list-item\">\n <p>Header value</p>\n <pre>{{ details.header() | json }}</pre>\n </div>\n <div class=\"et-qd-list-item\">\n <p>Config</p>\n <pre>{{ details.config | json }}</pre>\n </div>\n\n @if (details.type === 'BearerAuthProvider') {\n <div class=\"et-qd-list-item\">\n <p>Tokens</p>\n <pre>{{ details.provider.tokens$ | async | json }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Should refresh on unauthorized response</p>\n <pre>{{ details.provider.shouldRefreshOnUnauthorizedResponse }}</pre>\n </div>\n\n <ng-container\n *etQuery=\"\n details.provider.currentRefreshQuery$ | async as response;\n loading as loading;\n error as error;\n query as query\n \"\n >\n <div class=\"et-qd-list-item\">\n <p>Refresh query response</p>\n\n <div>\n <button (click)=\"details.provider._refreshQuery()\" class=\"et-qd-chip et-qd-chip-bordered\">\n Refresh\n </button>\n </div>\n <pre>{{ response | json }}</pre>\n </div>\n <div class=\"et-qd-list-item\">\n <p>Refresh query loading</p>\n <pre>{{ loading }}</pre>\n </div>\n <div class=\"et-qd-list-item\">\n <p>Refresh query error</p>\n <pre>{{ error ?? 'null' }}</pre>\n </div>\n <div class=\"et-qd-list-item\">\n <p>State</p>\n <pre>{{ query?.state$ | async | json }}</pre>\n </div>\n </ng-container>\n }\n </div>\n } @else {\n <p>No auth provider set</p>\n }\n </div>\n }\n </div>\n }\n </div>\n}\n", styles: [":host{position:fixed;top:0;z-index:1000000;font-size:14px;color:#fff}.et-query-devtools-container{position:fixed;inset:0;background-color:#25292e;z-index:10000;overflow:auto;font-family:monospace;display:grid;grid-template-rows:auto auto auto minmax(0,1fr)}.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%;border-right:1px solid rgb(37,41,46)}.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%;border-left:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-top{inset-inline-start:0;inset-block-start:0;inset-inline-end:0;height:50%;border-bottom:1px solid rgb(37,41,46)}.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%;border-top:1px solid rgb(37,41,46)}button.et-query-devtools-open-btn{position:fixed;inset-inline-end:20px;inset-block-end:0;z-index:9999;font-family:monospace;border-radius:3px 3px 0 0;line-height:14px;font-size:12px}.et-qd-header{background-color:#00ffa1;padding:12px;display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center}.et-qd-header__title{color:#25292e;margin:0;font-size:22px}.et-qd-header__select{display:grid;background-color:#25292e;border-radius:10px;overflow:hidden}.et-qd-header__select select{width:250px;color:#fff;padding:3px 10px 2px;border:none;background-color:#25292e;font-family:monospace}.et-qd-header__select label{padding:3px 10px;color:#25292e;font-size:12px;font-weight:700;color:#fff;border-bottom:1px solid gray}.et-qd-sub-header{background-color:#00b371;padding:12px;display:flex;gap:12px;flex-wrap:wrap}.et-qd-sub-header__divider{width:1px;background-color:#25292e}.et-qd-btn{background-color:#00ffa1;color:#25292e;border:none;padding:12px;cursor:pointer;font-size:14px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;width:100%;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-btn:hover{background-color:#00cc81}.et-qd-btn.et-qd-btn-secondary{background-color:#25292e;color:#00ffa1}.et-qd-btn.et-qd-btn-secondary:hover{background-color:#3c424a}.et-qd-chip{background-color:#00ffa1;color:#25292e;border:none;padding:4px 9px;cursor:pointer;font-size:12px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-chip:hover{background-color:#00cc81}.et-qd-chip.et-qd-chip-secondary{background-color:#25292e;color:#00ffa1}.et-qd-chip.et-qd-chip-secondary:hover{background-color:#3c424a}.et-qd-chip.et-qd-chip-bordered{border:1px solid rgb(0,255,161)}.et-qd-translucent-clickable{pointer-events:all}.et-qd-client{border-bottom:1px solid rgb(59.734939759,66.1927710843,74.265060241);padding:12px}.et-qd-client__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-client__actions{display:flex;gap:12px;margin-top:12px}.et-qd-queries{padding:12px;display:grid;grid-template-rows:auto auto minmax(0,1fr)}.et-qd-queries__actions{display:flex;gap:12px;margin-top:12px;margin-bottom:16px}.et-qd-queries__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-queries__divider{width:1px;background-color:#3c424a}.et-qd-queries__browser{display:grid;grid-template-columns:1fr minmax(0,3fr);margin-left:-12px;margin-right:-12px;border-top:1px solid rgb(59.734939759,66.1927710843,74.265060241);margin-bottom:-12px}.et-qd-queries__browser-list{border-right:1px solid rgb(59.734939759,66.1927710843,74.265060241);list-style:none;padding:0;margin:0;display:grid;grid-auto-flow:row;grid-auto-rows:55px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-list li{margin:0}.et-qd-queries__browser-list li button{all:unset;font-family:monospace;box-sizing:border-box;width:100%;border:none;border-bottom:1px solid rgb(59.734939759,66.1927710843,74.265060241);background-color:#25292e;color:#fff;text-align:left;padding:12px;height:100%;transition:all .3s ease-in-out;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px;display:block}.et-qd-queries__browser-list li button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.et-qd-queries__browser-list li button span:first-of-type{font-weight:700}.et-qd-queries__browser-list li button:hover,.et-qd-queries__browser-list li button.et-qd-query--active{background-color:#30363c}.et-qd-queries__browser-detail{padding:12px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-detail__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-auth-provider__viewer{border-top:1px solid rgb(59.734939759,66.1927710843,74.265060241);margin-left:-12px;margin-right:-12px;margin-bottom:-12px;padding:12px;overflow-y:auto;overflow-x:hidden}.et-qd-list{display:grid;gap:12px}.et-qd-list-item{display:grid}.et-qd-list-item p{font-weight:700;margin:0;padding-bottom:8px}.et-qd-list-item p+p{margin-top:-8px}.et-qd-list-item div+pre{margin-top:8px}.et-qd-list-item pre{margin:0;padding:4px;background-color:#0e1012;border-radius:4px;max-height:450px;overflow:auto}\n"] }]
|
|
2659
2652
|
}], ctorParameters: () => [] });
|
|
2660
2653
|
|
|
2661
2654
|
class EntityStoreError extends Error {
|
|
@@ -2812,7 +2805,6 @@ const removeFrom = (store, { where, id }) => {
|
|
|
2812
2805
|
.subscribe();
|
|
2813
2806
|
};
|
|
2814
2807
|
|
|
2815
|
-
/* eslint-disable @typescript-eslint/no-empty-function */
|
|
2816
2808
|
const queryFeatureUsedMultipleTimes = (type) => {
|
|
2817
2809
|
return new RuntimeError(0 /* RuntimeErrorCode.QUERY_FEATURE_USED_MULTIPLE_TIMES */, `The query feature "${type}()" was used multiple times.`);
|
|
2818
2810
|
};
|
|
@@ -2871,8 +2863,16 @@ const uncacheableRequestHasCacheKeyParam = (key) => {
|
|
|
2871
2863
|
const uncacheableRequestHasSkipCacheParam = () => {
|
|
2872
2864
|
return new RuntimeError(301 /* RuntimeErrorCode.UNCACHEABLE_REQUEST_HAS_SKIP_CACHE_PARAM */, `This request is uncacheable, but skipCache is set to true. Please remove it.`);
|
|
2873
2865
|
};
|
|
2866
|
+
const pagedQueryPageBiggerThanTotalPages = (page, totalPages) => {
|
|
2867
|
+
return new RuntimeError(400 /* RuntimeErrorCode.PAGED_QUERY_PAGE_BIGGER_THAN_TOTAL_PAGES */, `The page "${page}" is bigger than the total pages "${totalPages}".`);
|
|
2868
|
+
};
|
|
2869
|
+
const pagedQueryNextPageCalledWithoutPreviousPage = () => {
|
|
2870
|
+
return new RuntimeError(401 /* RuntimeErrorCode.PAGED_QUERY_NEXT_PAGE_CALLED_WITHOUT_PREVIOUS_PAGE */, `fetchNextPage() has been called but the current page is not yet loaded. Please call it after the previous page has been loaded.`);
|
|
2871
|
+
};
|
|
2872
|
+
const pagedQueryPreviousPageCalledButAlreadyAtFirstPage = () => {
|
|
2873
|
+
return new RuntimeError(402 /* RuntimeErrorCode.PAGED_QUERY_PREVIOUS_PAGE_CALLED_BUT_ALREADY_AT_FIRST_PAGE */, `fetchPreviousPage() has been called but the current page is already the first page.`);
|
|
2874
|
+
};
|
|
2874
2875
|
|
|
2875
|
-
/* eslint-disable @typescript-eslint/no-empty-function */
|
|
2876
2876
|
const defaultResponseTransformer = (response) => {
|
|
2877
2877
|
if (!isObject(response)) {
|
|
2878
2878
|
throw defaultResponseTransformerResponseNotObject(typeof response);
|
|
@@ -3129,7 +3129,6 @@ const createBearerAuthProviderConfig = (options) => {
|
|
|
3129
3129
|
return bearerAuthProviderConfig;
|
|
3130
3130
|
};
|
|
3131
3131
|
|
|
3132
|
-
/* eslint-disable @typescript-eslint/no-empty-function */
|
|
3133
3132
|
/**
|
|
3134
3133
|
* Returning this inside e.g. a withComputedArgs feature will reset the query args to null.
|
|
3135
3134
|
* This will also pause polling and auto refresh until new args are set.
|
|
@@ -3301,7 +3300,6 @@ const createQueryObject = (options) => {
|
|
|
3301
3300
|
return query;
|
|
3302
3301
|
};
|
|
3303
3302
|
|
|
3304
|
-
/* eslint-disable @typescript-eslint/no-empty-function */
|
|
3305
3303
|
const SPEED_BUFFER_TIME_IN_MS = 2000;
|
|
3306
3304
|
const createHttpRequest = (options) => {
|
|
3307
3305
|
let currentStreamSubscription = Subscription.EMPTY;
|
|
@@ -3342,8 +3340,8 @@ const createHttpRequest = (options) => {
|
|
|
3342
3340
|
updateErrorState(e);
|
|
3343
3341
|
return throwError(() => e);
|
|
3344
3342
|
}));
|
|
3345
|
-
const execute = () => {
|
|
3346
|
-
if (loading() || !isStale()) {
|
|
3343
|
+
const execute = (options) => {
|
|
3344
|
+
if (loading() || (!isStale() && !options?.skipCache)) {
|
|
3347
3345
|
// Do not execute if there is already a request in progress or the request is not stale
|
|
3348
3346
|
return false;
|
|
3349
3347
|
}
|
|
@@ -3450,6 +3448,382 @@ const createHttpRequest = (options) => {
|
|
|
3450
3448
|
return httpRequest;
|
|
3451
3449
|
};
|
|
3452
3450
|
|
|
3451
|
+
const createQueryFeature = (config) => {
|
|
3452
|
+
return config;
|
|
3453
|
+
};
|
|
3454
|
+
const withArgs = (args) => {
|
|
3455
|
+
return createQueryFeature({
|
|
3456
|
+
type: "withArgs" /* QueryFeatureType.WithArgs */,
|
|
3457
|
+
fn: (context) => {
|
|
3458
|
+
const currArgs = computed(() => args());
|
|
3459
|
+
queryEffect(() => {
|
|
3460
|
+
const currArgsNow = currArgs();
|
|
3461
|
+
if (currArgsNow === null)
|
|
3462
|
+
return;
|
|
3463
|
+
untracked(() => {
|
|
3464
|
+
if (currArgsNow === QUERY_ARGS_RESET) {
|
|
3465
|
+
context.state.args.set(null);
|
|
3466
|
+
return;
|
|
3467
|
+
}
|
|
3468
|
+
context.state.args.set(currArgsNow);
|
|
3469
|
+
if (context.flags.shouldAutoExecute)
|
|
3470
|
+
context.execute({ args: currArgsNow });
|
|
3471
|
+
});
|
|
3472
|
+
}, QUERY_EFFECT_ERROR_MESSAGE, { injector: context.deps.injector });
|
|
3473
|
+
},
|
|
3474
|
+
});
|
|
3475
|
+
};
|
|
3476
|
+
const withPolling = (options) => {
|
|
3477
|
+
return createQueryFeature({
|
|
3478
|
+
type: "withPolling" /* QueryFeatureType.WithPolling */,
|
|
3479
|
+
fn: (context) => {
|
|
3480
|
+
if (!context.flags.shouldAutoExecuteMethod) {
|
|
3481
|
+
throw withPollingUsedOnUnsupportedHttpMethod(context.creatorInternals.method);
|
|
3482
|
+
}
|
|
3483
|
+
let intervalId = null;
|
|
3484
|
+
queryEffect(() => {
|
|
3485
|
+
const args = context.state.args();
|
|
3486
|
+
untracked(() => {
|
|
3487
|
+
if (intervalId !== null)
|
|
3488
|
+
clearInterval(intervalId);
|
|
3489
|
+
if (args === null)
|
|
3490
|
+
return;
|
|
3491
|
+
if (options.executeInitially) {
|
|
3492
|
+
context.execute({ args });
|
|
3493
|
+
}
|
|
3494
|
+
intervalId = window.setInterval(() => {
|
|
3495
|
+
context.execute({ args });
|
|
3496
|
+
}, options.interval);
|
|
3497
|
+
});
|
|
3498
|
+
}, QUERY_EFFECT_ERROR_MESSAGE, { injector: context.deps.injector });
|
|
3499
|
+
context.deps.destroyRef.onDestroy(() => intervalId !== null && clearInterval(intervalId));
|
|
3500
|
+
},
|
|
3501
|
+
});
|
|
3502
|
+
};
|
|
3503
|
+
const withLogging = (options) => {
|
|
3504
|
+
return createQueryFeature({
|
|
3505
|
+
type: "withLogging" /* QueryFeatureType.WithLogging */,
|
|
3506
|
+
fn: (context) => {
|
|
3507
|
+
effect(() => {
|
|
3508
|
+
const event = context.state.latestHttpEvent();
|
|
3509
|
+
if (event === null)
|
|
3510
|
+
return;
|
|
3511
|
+
untracked(() => {
|
|
3512
|
+
options.logFn(event);
|
|
3513
|
+
});
|
|
3514
|
+
}, { injector: context.deps.injector });
|
|
3515
|
+
},
|
|
3516
|
+
});
|
|
3517
|
+
};
|
|
3518
|
+
const withErrorHandling = (options) => {
|
|
3519
|
+
return createQueryFeature({
|
|
3520
|
+
type: "withErrorHandling" /* QueryFeatureType.WithErrorHandling */,
|
|
3521
|
+
fn: (context) => {
|
|
3522
|
+
effect(() => {
|
|
3523
|
+
const error = context.state.error();
|
|
3524
|
+
if (error === null)
|
|
3525
|
+
return;
|
|
3526
|
+
untracked(() => {
|
|
3527
|
+
options.handler(error);
|
|
3528
|
+
});
|
|
3529
|
+
}, { injector: context.deps.injector });
|
|
3530
|
+
},
|
|
3531
|
+
});
|
|
3532
|
+
};
|
|
3533
|
+
const withSuccessHandling = (options) => {
|
|
3534
|
+
return createQueryFeature({
|
|
3535
|
+
type: "withSuccessHandling" /* QueryFeatureType.WithSuccessHandling */,
|
|
3536
|
+
fn: (context) => {
|
|
3537
|
+
effect(() => {
|
|
3538
|
+
const response = context.state.response();
|
|
3539
|
+
if (response === null)
|
|
3540
|
+
return;
|
|
3541
|
+
untracked(() => {
|
|
3542
|
+
options.handler(response);
|
|
3543
|
+
});
|
|
3544
|
+
}, { injector: context.deps.injector });
|
|
3545
|
+
},
|
|
3546
|
+
});
|
|
3547
|
+
};
|
|
3548
|
+
const withAutoRefresh = (options) => {
|
|
3549
|
+
return createQueryFeature({
|
|
3550
|
+
type: "withAutoRefresh" /* QueryFeatureType.WithAutoRefresh */,
|
|
3551
|
+
fn: (context) => {
|
|
3552
|
+
if (!context.flags.shouldAutoExecuteMethod) {
|
|
3553
|
+
throw withAutoRefreshUsedOnUnsupportedHttpMethod(context.creatorInternals.method);
|
|
3554
|
+
}
|
|
3555
|
+
if (context.queryConfig.onlyManualExecution && !options.ignoreOnlyManualExecution) {
|
|
3556
|
+
throw withAutoRefreshUsedOnUnsupportedHttpMethod(context.creatorInternals.method);
|
|
3557
|
+
}
|
|
3558
|
+
queryEffect(() => {
|
|
3559
|
+
for (const signal of options.signalChanges) {
|
|
3560
|
+
signal();
|
|
3561
|
+
}
|
|
3562
|
+
untracked(() => {
|
|
3563
|
+
const args = context.state.args();
|
|
3564
|
+
if (args === null)
|
|
3565
|
+
return;
|
|
3566
|
+
context.execute({ args });
|
|
3567
|
+
});
|
|
3568
|
+
}, QUERY_EFFECT_ERROR_MESSAGE, { injector: context.deps.injector });
|
|
3569
|
+
},
|
|
3570
|
+
});
|
|
3571
|
+
};
|
|
3572
|
+
|
|
3573
|
+
const transformArrayResponse = (responses) => responses.filter((r) => !!r).flatMap((r) => r);
|
|
3574
|
+
const transformPaginatedResponse = (responses) => responses.filter((r) => !!r).flatMap((r) => r.items);
|
|
3575
|
+
const createQueryStack = (computation, options) => {
|
|
3576
|
+
const { append = false, appendFn = (oldQueries, newQueries) => {
|
|
3577
|
+
const queries = [...oldQueries, ...newQueries];
|
|
3578
|
+
const lastQuery = newQueries[newQueries.length - 1] ?? oldQueries[oldQueries.length - 1] ?? null;
|
|
3579
|
+
return { queries, lastQuery };
|
|
3580
|
+
}, transform, } = options ?? {};
|
|
3581
|
+
const injector = inject(Injector);
|
|
3582
|
+
const queries = signal([]);
|
|
3583
|
+
const lastQuery = signal(null);
|
|
3584
|
+
effect(() => {
|
|
3585
|
+
const newQueryOrQueries = runInInjectionContext(injector, () => computation());
|
|
3586
|
+
const newQueries = Array.isArray(newQueryOrQueries) ? newQueryOrQueries : [newQueryOrQueries].filter((q) => !!q);
|
|
3587
|
+
untracked(() => {
|
|
3588
|
+
const oldQueries = queries();
|
|
3589
|
+
if (append) {
|
|
3590
|
+
const { queries: appendedQueries, lastQuery: lastAppendedQuery } = appendFn(oldQueries, newQueries);
|
|
3591
|
+
queries.set(appendedQueries);
|
|
3592
|
+
lastQuery.set(lastAppendedQuery);
|
|
3593
|
+
}
|
|
3594
|
+
else {
|
|
3595
|
+
for (const oldQuery of oldQueries) {
|
|
3596
|
+
if (!newQueries.some((q) => q.id() === oldQuery.id())) {
|
|
3597
|
+
oldQuery.destroy();
|
|
3598
|
+
}
|
|
3599
|
+
}
|
|
3600
|
+
queries.set(newQueries);
|
|
3601
|
+
lastQuery.set(newQueries[newQueries.length - 1] ?? null);
|
|
3602
|
+
}
|
|
3603
|
+
});
|
|
3604
|
+
});
|
|
3605
|
+
const loading = computed(() => queries().some((q) => q.loading()));
|
|
3606
|
+
const error = computed(() => queries()
|
|
3607
|
+
.map((q) => q.error())
|
|
3608
|
+
.find((e) => e !== null) ?? null);
|
|
3609
|
+
const response = computed(() => {
|
|
3610
|
+
const responses = queries().map((q) => q.response());
|
|
3611
|
+
return transform?.(responses) ?? responses;
|
|
3612
|
+
});
|
|
3613
|
+
const execute = (options) => {
|
|
3614
|
+
for (const query of queries()) {
|
|
3615
|
+
query.execute({ options: { skipCache: options?.skipCache } });
|
|
3616
|
+
}
|
|
3617
|
+
};
|
|
3618
|
+
const clear = () => {
|
|
3619
|
+
for (const query of queries()) {
|
|
3620
|
+
query.destroy();
|
|
3621
|
+
}
|
|
3622
|
+
queries.set([]);
|
|
3623
|
+
lastQuery.set(null);
|
|
3624
|
+
};
|
|
3625
|
+
const stack = {
|
|
3626
|
+
queries: queries.asReadonly(),
|
|
3627
|
+
lastQuery: lastQuery.asReadonly(),
|
|
3628
|
+
loading,
|
|
3629
|
+
error,
|
|
3630
|
+
response,
|
|
3631
|
+
execute,
|
|
3632
|
+
clear,
|
|
3633
|
+
};
|
|
3634
|
+
return stack;
|
|
3635
|
+
};
|
|
3636
|
+
|
|
3637
|
+
const ethletePaginationAdapter = (response) => {
|
|
3638
|
+
const pagination = {
|
|
3639
|
+
items: response.items,
|
|
3640
|
+
totalPages: response.totalPageCount,
|
|
3641
|
+
currentPage: response.currentPage,
|
|
3642
|
+
itemsPerPage: response.itemsPerPage,
|
|
3643
|
+
totalHits: response.totalHits,
|
|
3644
|
+
};
|
|
3645
|
+
return pagination;
|
|
3646
|
+
};
|
|
3647
|
+
const ggLikePaginationAdapter = (response) => {
|
|
3648
|
+
const pagination = {
|
|
3649
|
+
items: response.items,
|
|
3650
|
+
totalPages: response.totalPageCount,
|
|
3651
|
+
currentPage: response.currentPage,
|
|
3652
|
+
itemsPerPage: response.itemsPerPage,
|
|
3653
|
+
totalHits: response.totalHits,
|
|
3654
|
+
};
|
|
3655
|
+
return pagination;
|
|
3656
|
+
};
|
|
3657
|
+
const dynLikePaginationAdapter = (response) => {
|
|
3658
|
+
const pagination = {
|
|
3659
|
+
items: response.items,
|
|
3660
|
+
totalPages: response.totalPages,
|
|
3661
|
+
currentPage: response.currentPage,
|
|
3662
|
+
itemsPerPage: response.limit,
|
|
3663
|
+
totalHits: response.totalHits,
|
|
3664
|
+
};
|
|
3665
|
+
return pagination;
|
|
3666
|
+
};
|
|
3667
|
+
const contentfulGqlLikePaginationAdapter = (response) => {
|
|
3668
|
+
const totalPages = Math.max(Math.ceil(response.total / response.limit), 1); // If there are no items, there is still one page
|
|
3669
|
+
const currentPage = Math.max(Math.ceil(response.skip / response.limit) + 1, 1);
|
|
3670
|
+
const pagination = {
|
|
3671
|
+
items: response.items,
|
|
3672
|
+
totalPages,
|
|
3673
|
+
currentPage,
|
|
3674
|
+
itemsPerPage: response.limit,
|
|
3675
|
+
totalHits: response.total,
|
|
3676
|
+
};
|
|
3677
|
+
return pagination;
|
|
3678
|
+
};
|
|
3679
|
+
const createPagedQuery = (options) => {
|
|
3680
|
+
const { responseNormalizer, queryCreator } = options;
|
|
3681
|
+
const currentPageArgs = signal(null);
|
|
3682
|
+
const initialPage = signal(options.initialPage ?? 1);
|
|
3683
|
+
const loadedMinPage = signal(initialPage());
|
|
3684
|
+
const loadedMaxPage = signal(initialPage());
|
|
3685
|
+
const lastResetTimestamp = signal(Date.now());
|
|
3686
|
+
const pageDirection = signal('next');
|
|
3687
|
+
const stack = createQueryStack(() => {
|
|
3688
|
+
const args = currentPageArgs();
|
|
3689
|
+
if (!args)
|
|
3690
|
+
return null;
|
|
3691
|
+
return queryCreator(withArgs(() => {
|
|
3692
|
+
return args;
|
|
3693
|
+
}));
|
|
3694
|
+
}, {
|
|
3695
|
+
append: true,
|
|
3696
|
+
appendFn: (oldQueries, newQueries) => {
|
|
3697
|
+
const newQuery = newQueries[0];
|
|
3698
|
+
const dir = pageDirection();
|
|
3699
|
+
if (!newQuery) {
|
|
3700
|
+
const lastQuery = oldQueries[oldQueries.length - 1] ?? null;
|
|
3701
|
+
return { queries: oldQueries, lastQuery };
|
|
3702
|
+
}
|
|
3703
|
+
else if (dir === 'previous') {
|
|
3704
|
+
return { queries: [newQuery, ...oldQueries], lastQuery: newQuery };
|
|
3705
|
+
}
|
|
3706
|
+
else {
|
|
3707
|
+
return { queries: [...oldQueries, newQuery], lastQuery: newQuery };
|
|
3708
|
+
}
|
|
3709
|
+
},
|
|
3710
|
+
transform: transformArrayResponse,
|
|
3711
|
+
});
|
|
3712
|
+
effect(() => {
|
|
3713
|
+
lastResetTimestamp();
|
|
3714
|
+
const args = options.args(initialPage());
|
|
3715
|
+
untracked(() => {
|
|
3716
|
+
stack.clear();
|
|
3717
|
+
currentPageArgs.set(args);
|
|
3718
|
+
loadedMinPage.set(initialPage());
|
|
3719
|
+
loadedMaxPage.set(initialPage());
|
|
3720
|
+
});
|
|
3721
|
+
});
|
|
3722
|
+
const pagination = computed(() => {
|
|
3723
|
+
const res = stack.lastQuery()?.response();
|
|
3724
|
+
if (!res)
|
|
3725
|
+
return null;
|
|
3726
|
+
return responseNormalizer(res);
|
|
3727
|
+
});
|
|
3728
|
+
const fetchPreviousPage = () => {
|
|
3729
|
+
const page = loadedMinPage() - 1;
|
|
3730
|
+
if (page < 1) {
|
|
3731
|
+
if (isDevMode()) {
|
|
3732
|
+
throw pagedQueryPreviousPageCalledButAlreadyAtFirstPage();
|
|
3733
|
+
}
|
|
3734
|
+
return;
|
|
3735
|
+
}
|
|
3736
|
+
currentPageArgs.set(options.args(page));
|
|
3737
|
+
loadedMinPage.set(page);
|
|
3738
|
+
pageDirection.set('previous');
|
|
3739
|
+
};
|
|
3740
|
+
const fetchNextPage = () => {
|
|
3741
|
+
const page = loadedMaxPage() + 1;
|
|
3742
|
+
const currentPagination = pagination();
|
|
3743
|
+
if (!currentPagination) {
|
|
3744
|
+
if (isDevMode()) {
|
|
3745
|
+
throw pagedQueryNextPageCalledWithoutPreviousPage();
|
|
3746
|
+
}
|
|
3747
|
+
return;
|
|
3748
|
+
}
|
|
3749
|
+
if (page > currentPagination.totalPages) {
|
|
3750
|
+
if (isDevMode()) {
|
|
3751
|
+
throw pagedQueryPageBiggerThanTotalPages(page, currentPagination.totalPages);
|
|
3752
|
+
}
|
|
3753
|
+
return;
|
|
3754
|
+
}
|
|
3755
|
+
currentPageArgs.set(options.args(page));
|
|
3756
|
+
loadedMaxPage.set(page);
|
|
3757
|
+
pageDirection.set('next');
|
|
3758
|
+
};
|
|
3759
|
+
const reset = (resetOptions) => {
|
|
3760
|
+
const page = resetOptions?.initialPage ?? initialPage();
|
|
3761
|
+
initialPage.set(page);
|
|
3762
|
+
pageDirection.set('next');
|
|
3763
|
+
lastResetTimestamp.set(Date.now());
|
|
3764
|
+
};
|
|
3765
|
+
const canFetchPreviousPage = computed(() => loadedMinPage() > 1);
|
|
3766
|
+
const canFetchNextPage = computed(() => {
|
|
3767
|
+
const currentPagination = pagination();
|
|
3768
|
+
return currentPagination ? loadedMaxPage() < currentPagination.totalPages : false;
|
|
3769
|
+
});
|
|
3770
|
+
const items = computed(() => {
|
|
3771
|
+
return stack
|
|
3772
|
+
.response()
|
|
3773
|
+
.map((r) => responseNormalizer(r).items)
|
|
3774
|
+
.flat();
|
|
3775
|
+
});
|
|
3776
|
+
const isFirstLoad = computed(() => {
|
|
3777
|
+
return stack.queries().length === 1 && !!stack.lastQuery()?.loading();
|
|
3778
|
+
});
|
|
3779
|
+
const execute = (options) => {
|
|
3780
|
+
if (options?.where) {
|
|
3781
|
+
const queriesToExecute = [];
|
|
3782
|
+
for (const [index, query] of stack.queries().entries()) {
|
|
3783
|
+
// TODO: Use the where condition here.
|
|
3784
|
+
if (query.response()) {
|
|
3785
|
+
queriesToExecute.push(query);
|
|
3786
|
+
if (index !== 0) {
|
|
3787
|
+
const prevQuery = stack.queries()[index - 1];
|
|
3788
|
+
if (prevQuery) {
|
|
3789
|
+
queriesToExecute.push(prevQuery);
|
|
3790
|
+
}
|
|
3791
|
+
}
|
|
3792
|
+
if (index !== stack.queries().length - 1) {
|
|
3793
|
+
const nextQuery = stack.queries()[index + 1];
|
|
3794
|
+
if (nextQuery) {
|
|
3795
|
+
queriesToExecute.push(nextQuery);
|
|
3796
|
+
}
|
|
3797
|
+
}
|
|
3798
|
+
}
|
|
3799
|
+
}
|
|
3800
|
+
for (const query of queriesToExecute) {
|
|
3801
|
+
query.execute({ options: { skipCache: options.skipCache } });
|
|
3802
|
+
}
|
|
3803
|
+
}
|
|
3804
|
+
else {
|
|
3805
|
+
stack.execute({ skipCache: options?.skipCache });
|
|
3806
|
+
}
|
|
3807
|
+
};
|
|
3808
|
+
const pagedQuery = {
|
|
3809
|
+
pagination,
|
|
3810
|
+
fetchPreviousPage,
|
|
3811
|
+
fetchNextPage,
|
|
3812
|
+
canFetchPreviousPage,
|
|
3813
|
+
canFetchNextPage,
|
|
3814
|
+
items,
|
|
3815
|
+
direction: pageDirection.asReadonly(),
|
|
3816
|
+
loading: stack.loading,
|
|
3817
|
+
error: stack.error,
|
|
3818
|
+
lastQuery: stack.lastQuery,
|
|
3819
|
+
isFirstLoad,
|
|
3820
|
+
queries: stack.queries(),
|
|
3821
|
+
reset,
|
|
3822
|
+
execute,
|
|
3823
|
+
};
|
|
3824
|
+
return pagedQuery;
|
|
3825
|
+
};
|
|
3826
|
+
|
|
3453
3827
|
const setupQueryDependencies = (options) => {
|
|
3454
3828
|
const environmentInjector = inject(EnvironmentInjector);
|
|
3455
3829
|
const queryEnvironmentInjector = createEnvironmentInjector([], environmentInjector);
|
|
@@ -3519,16 +3893,15 @@ const createExecuteFn = (executeOptions) => {
|
|
|
3519
3893
|
const executeState = setupQueryExecuteState();
|
|
3520
3894
|
const reset = () => resetExecuteState({ executeState, executeOptions });
|
|
3521
3895
|
const exec = (executeArgs) => {
|
|
3522
|
-
const { args = executeOptions.state.args() } = executeArgs ?? {};
|
|
3896
|
+
const { args = executeOptions.state.args(), options } = executeArgs ?? {};
|
|
3523
3897
|
cleanupPreviousExecute({ executeOptions, executeState });
|
|
3524
|
-
queryExecute({ executeOptions, executeState, args });
|
|
3898
|
+
queryExecute({ executeOptions, executeState, args, options });
|
|
3525
3899
|
};
|
|
3526
3900
|
exec['reset'] = reset;
|
|
3527
3901
|
exec['currentRepositoryKey'] = executeState.previousKey.asReadonly();
|
|
3528
3902
|
return exec;
|
|
3529
3903
|
};
|
|
3530
3904
|
|
|
3531
|
-
/* eslint-disable @typescript-eslint/no-empty-function */
|
|
3532
3905
|
const setupQueryState = (options) => {
|
|
3533
3906
|
const response = signal(null);
|
|
3534
3907
|
const args = signal(null);
|
|
@@ -3591,7 +3964,6 @@ const createQuerySnapshotFn = (options) => {
|
|
|
3591
3964
|
};
|
|
3592
3965
|
|
|
3593
3966
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
3594
|
-
/* eslint-disable @typescript-eslint/no-empty-function */
|
|
3595
3967
|
const createQuery = (options) => {
|
|
3596
3968
|
const deps = setupQueryDependencies({ clientConfig: options.creatorInternals.client });
|
|
3597
3969
|
const state = setupQueryState({});
|
|
@@ -3648,7 +4020,7 @@ const createQueryRepository = (config) => {
|
|
|
3648
4020
|
if (cacheEntry) {
|
|
3649
4021
|
bind(key, options.destroyRef, cacheEntry.request);
|
|
3650
4022
|
if (runQueryOptions?.skipCache || cacheEntry.request.isStale()) {
|
|
3651
|
-
cacheEntry.request.execute();
|
|
4023
|
+
cacheEntry.request.execute({ skipCache: runQueryOptions?.skipCache });
|
|
3652
4024
|
}
|
|
3653
4025
|
return { key, request: cacheEntry.request };
|
|
3654
4026
|
}
|
|
@@ -3705,7 +4077,6 @@ const createQueryRepository = (config) => {
|
|
|
3705
4077
|
return repository;
|
|
3706
4078
|
};
|
|
3707
4079
|
|
|
3708
|
-
/* eslint-disable @typescript-eslint/no-empty-function */
|
|
3709
4080
|
const createQueryClient = (config) => {
|
|
3710
4081
|
const repository = createQueryRepository(config);
|
|
3711
4082
|
const client = {
|
|
@@ -3720,7 +4091,6 @@ const provideQueryClient = (config) => {
|
|
|
3720
4091
|
};
|
|
3721
4092
|
};
|
|
3722
4093
|
|
|
3723
|
-
/* eslint-disable @typescript-eslint/no-empty-function */
|
|
3724
4094
|
const createQueryClientConfig = (options) => {
|
|
3725
4095
|
const token = new InjectionToken(`QueryClient_${options.name}`);
|
|
3726
4096
|
const clientConfig = {
|
|
@@ -3906,193 +4276,6 @@ const createSecurePatchQuery = (client, authProvider) => {
|
|
|
3906
4276
|
return (creatorOptions) => createSecureQueryCreator(creatorOptions, { method: 'PATCH', client, authProvider });
|
|
3907
4277
|
};
|
|
3908
4278
|
|
|
3909
|
-
/* eslint-disable @typescript-eslint/no-empty-function */
|
|
3910
|
-
const createQueryFeature = (config) => {
|
|
3911
|
-
return config;
|
|
3912
|
-
};
|
|
3913
|
-
const withArgs = (args) => {
|
|
3914
|
-
return createQueryFeature({
|
|
3915
|
-
type: "withArgs" /* QueryFeatureType.WithArgs */,
|
|
3916
|
-
fn: (context) => {
|
|
3917
|
-
const currArgs = computed(() => args());
|
|
3918
|
-
queryEffect(() => {
|
|
3919
|
-
const currArgsNow = currArgs();
|
|
3920
|
-
if (currArgsNow === null)
|
|
3921
|
-
return;
|
|
3922
|
-
untracked(() => {
|
|
3923
|
-
if (currArgsNow === QUERY_ARGS_RESET) {
|
|
3924
|
-
context.state.args.set(null);
|
|
3925
|
-
return;
|
|
3926
|
-
}
|
|
3927
|
-
context.state.args.set(currArgsNow);
|
|
3928
|
-
if (context.flags.shouldAutoExecute)
|
|
3929
|
-
context.execute({ args: currArgsNow });
|
|
3930
|
-
});
|
|
3931
|
-
}, QUERY_EFFECT_ERROR_MESSAGE, { injector: context.deps.injector });
|
|
3932
|
-
},
|
|
3933
|
-
});
|
|
3934
|
-
};
|
|
3935
|
-
const withPolling = (options) => {
|
|
3936
|
-
return createQueryFeature({
|
|
3937
|
-
type: "withPolling" /* QueryFeatureType.WithPolling */,
|
|
3938
|
-
fn: (context) => {
|
|
3939
|
-
if (!context.flags.shouldAutoExecuteMethod) {
|
|
3940
|
-
throw withPollingUsedOnUnsupportedHttpMethod(context.creatorInternals.method);
|
|
3941
|
-
}
|
|
3942
|
-
let intervalId = null;
|
|
3943
|
-
queryEffect(() => {
|
|
3944
|
-
const args = context.state.args();
|
|
3945
|
-
untracked(() => {
|
|
3946
|
-
if (intervalId !== null)
|
|
3947
|
-
clearInterval(intervalId);
|
|
3948
|
-
if (args === null)
|
|
3949
|
-
return;
|
|
3950
|
-
if (options.executeInitially) {
|
|
3951
|
-
context.execute({ args });
|
|
3952
|
-
}
|
|
3953
|
-
intervalId = window.setInterval(() => {
|
|
3954
|
-
context.execute({ args });
|
|
3955
|
-
}, options.interval);
|
|
3956
|
-
});
|
|
3957
|
-
}, QUERY_EFFECT_ERROR_MESSAGE, { injector: context.deps.injector });
|
|
3958
|
-
context.deps.destroyRef.onDestroy(() => intervalId !== null && clearInterval(intervalId));
|
|
3959
|
-
},
|
|
3960
|
-
});
|
|
3961
|
-
};
|
|
3962
|
-
const withLogging = (options) => {
|
|
3963
|
-
return createQueryFeature({
|
|
3964
|
-
type: "withLogging" /* QueryFeatureType.WithLogging */,
|
|
3965
|
-
fn: (context) => {
|
|
3966
|
-
effect(() => {
|
|
3967
|
-
const event = context.state.latestHttpEvent();
|
|
3968
|
-
if (event === null)
|
|
3969
|
-
return;
|
|
3970
|
-
untracked(() => {
|
|
3971
|
-
options.logFn(event);
|
|
3972
|
-
});
|
|
3973
|
-
}, { injector: context.deps.injector });
|
|
3974
|
-
},
|
|
3975
|
-
});
|
|
3976
|
-
};
|
|
3977
|
-
const withErrorHandling = (options) => {
|
|
3978
|
-
return createQueryFeature({
|
|
3979
|
-
type: "withErrorHandling" /* QueryFeatureType.WithErrorHandling */,
|
|
3980
|
-
fn: (context) => {
|
|
3981
|
-
effect(() => {
|
|
3982
|
-
const error = context.state.error();
|
|
3983
|
-
if (error === null)
|
|
3984
|
-
return;
|
|
3985
|
-
untracked(() => {
|
|
3986
|
-
options.handler(error);
|
|
3987
|
-
});
|
|
3988
|
-
}, { injector: context.deps.injector });
|
|
3989
|
-
},
|
|
3990
|
-
});
|
|
3991
|
-
};
|
|
3992
|
-
const withSuccessHandling = (options) => {
|
|
3993
|
-
return createQueryFeature({
|
|
3994
|
-
type: "withSuccessHandling" /* QueryFeatureType.WithSuccessHandling */,
|
|
3995
|
-
fn: (context) => {
|
|
3996
|
-
effect(() => {
|
|
3997
|
-
const response = context.state.response();
|
|
3998
|
-
if (response === null)
|
|
3999
|
-
return;
|
|
4000
|
-
untracked(() => {
|
|
4001
|
-
options.handler(response);
|
|
4002
|
-
});
|
|
4003
|
-
}, { injector: context.deps.injector });
|
|
4004
|
-
},
|
|
4005
|
-
});
|
|
4006
|
-
};
|
|
4007
|
-
const withAutoRefresh = (options) => {
|
|
4008
|
-
return createQueryFeature({
|
|
4009
|
-
type: "withAutoRefresh" /* QueryFeatureType.WithAutoRefresh */,
|
|
4010
|
-
fn: (context) => {
|
|
4011
|
-
if (!context.flags.shouldAutoExecuteMethod) {
|
|
4012
|
-
throw withAutoRefreshUsedOnUnsupportedHttpMethod(context.creatorInternals.method);
|
|
4013
|
-
}
|
|
4014
|
-
if (context.queryConfig.onlyManualExecution && !options.ignoreOnlyManualExecution) {
|
|
4015
|
-
throw withAutoRefreshUsedOnUnsupportedHttpMethod(context.creatorInternals.method);
|
|
4016
|
-
}
|
|
4017
|
-
queryEffect(() => {
|
|
4018
|
-
for (const signal of options.signalChanges) {
|
|
4019
|
-
signal();
|
|
4020
|
-
}
|
|
4021
|
-
untracked(() => {
|
|
4022
|
-
const args = context.state.args();
|
|
4023
|
-
if (args === null)
|
|
4024
|
-
return;
|
|
4025
|
-
context.execute({ args });
|
|
4026
|
-
});
|
|
4027
|
-
}, QUERY_EFFECT_ERROR_MESSAGE, { injector: context.deps.injector });
|
|
4028
|
-
},
|
|
4029
|
-
});
|
|
4030
|
-
};
|
|
4031
|
-
|
|
4032
|
-
const transformArrayResponse = (responses) => responses.filter((r) => !!r).flatMap((r) => r);
|
|
4033
|
-
const transformPaginatedResponse = (responses) => responses.filter((r) => !!r).flatMap((r) => r.items);
|
|
4034
|
-
const createQueryStack = (computation, options) => {
|
|
4035
|
-
const { append = false, appendFn = (oldQueries, newQueries) => {
|
|
4036
|
-
const queries = [...oldQueries, ...newQueries];
|
|
4037
|
-
const lastQuery = newQueries[newQueries.length - 1] ?? oldQueries[oldQueries.length - 1] ?? null;
|
|
4038
|
-
return { queries, lastQuery };
|
|
4039
|
-
}, transform, } = options ?? {};
|
|
4040
|
-
const injector = inject(Injector);
|
|
4041
|
-
const queries = signal([]);
|
|
4042
|
-
const lastQuery = signal(null);
|
|
4043
|
-
effect(() => {
|
|
4044
|
-
const newQueryOrQueries = runInInjectionContext(injector, () => computation());
|
|
4045
|
-
const newQueries = Array.isArray(newQueryOrQueries) ? newQueryOrQueries : [newQueryOrQueries];
|
|
4046
|
-
untracked(() => {
|
|
4047
|
-
const oldQueries = queries();
|
|
4048
|
-
if (append) {
|
|
4049
|
-
const { queries: appendedQueries, lastQuery: lastAppendedQuery } = appendFn(oldQueries, newQueries);
|
|
4050
|
-
queries.set(appendedQueries);
|
|
4051
|
-
lastQuery.set(lastAppendedQuery);
|
|
4052
|
-
}
|
|
4053
|
-
else {
|
|
4054
|
-
for (const oldQuery of oldQueries) {
|
|
4055
|
-
if (!newQueries.some((q) => q.id() === oldQuery.id())) {
|
|
4056
|
-
oldQuery.destroy();
|
|
4057
|
-
}
|
|
4058
|
-
}
|
|
4059
|
-
queries.set(newQueries);
|
|
4060
|
-
lastQuery.set(newQueries[newQueries.length - 1] ?? null);
|
|
4061
|
-
}
|
|
4062
|
-
});
|
|
4063
|
-
});
|
|
4064
|
-
const loading = computed(() => queries().some((q) => q.loading()));
|
|
4065
|
-
const error = computed(() => queries()
|
|
4066
|
-
.map((q) => q.error())
|
|
4067
|
-
.find((e) => e !== null) ?? null);
|
|
4068
|
-
const response = computed(() => {
|
|
4069
|
-
const responses = queries().map((q) => q.response());
|
|
4070
|
-
return transform?.(responses) ?? responses;
|
|
4071
|
-
});
|
|
4072
|
-
const execute = () => {
|
|
4073
|
-
for (const query of queries()) {
|
|
4074
|
-
query.execute();
|
|
4075
|
-
}
|
|
4076
|
-
};
|
|
4077
|
-
const clear = () => {
|
|
4078
|
-
for (const query of queries()) {
|
|
4079
|
-
query.destroy();
|
|
4080
|
-
}
|
|
4081
|
-
queries.set([]);
|
|
4082
|
-
lastQuery.set(null);
|
|
4083
|
-
};
|
|
4084
|
-
const stack = {
|
|
4085
|
-
queries: queries.asReadonly(),
|
|
4086
|
-
lastQuery: lastQuery.asReadonly(),
|
|
4087
|
-
loading,
|
|
4088
|
-
error,
|
|
4089
|
-
response,
|
|
4090
|
-
execute,
|
|
4091
|
-
clear,
|
|
4092
|
-
};
|
|
4093
|
-
return stack;
|
|
4094
|
-
};
|
|
4095
|
-
|
|
4096
4279
|
var index = /*#__PURE__*/Object.freeze({
|
|
4097
4280
|
__proto__: null,
|
|
4098
4281
|
QUERY_ARGS_RESET: QUERY_ARGS_RESET,
|
|
@@ -4101,6 +4284,7 @@ var index = /*#__PURE__*/Object.freeze({
|
|
|
4101
4284
|
applyQueryFeatures: applyQueryFeatures,
|
|
4102
4285
|
bearerExpiresInPropertyNotNumber: bearerExpiresInPropertyNotNumber,
|
|
4103
4286
|
cleanupPreviousExecute: cleanupPreviousExecute,
|
|
4287
|
+
contentfulGqlLikePaginationAdapter: contentfulGqlLikePaginationAdapter,
|
|
4104
4288
|
cookieLoginTriedButCookieDisabled: cookieLoginTriedButCookieDisabled,
|
|
4105
4289
|
createBearerAuthProvider: createBearerAuthProvider,
|
|
4106
4290
|
createBearerAuthProviderConfig: createBearerAuthProviderConfig,
|
|
@@ -4108,6 +4292,7 @@ var index = /*#__PURE__*/Object.freeze({
|
|
|
4108
4292
|
createExecuteFn: createExecuteFn,
|
|
4109
4293
|
createGetQuery: createGetQuery,
|
|
4110
4294
|
createHttpRequest: createHttpRequest,
|
|
4295
|
+
createPagedQuery: createPagedQuery,
|
|
4111
4296
|
createPatchQuery: createPatchQuery,
|
|
4112
4297
|
createPostQuery: createPostQuery,
|
|
4113
4298
|
createPutQuery: createPutQuery,
|
|
@@ -4131,12 +4316,18 @@ var index = /*#__PURE__*/Object.freeze({
|
|
|
4131
4316
|
defaultResponseTransformerResponseNotContainingRefreshToken: defaultResponseTransformerResponseNotContainingRefreshToken,
|
|
4132
4317
|
defaultResponseTransformerResponseNotObject: defaultResponseTransformerResponseNotObject,
|
|
4133
4318
|
disableCookieCalledWithoutCookieConfig: disableCookieCalledWithoutCookieConfig,
|
|
4319
|
+
dynLikePaginationAdapter: dynLikePaginationAdapter,
|
|
4134
4320
|
enableCookieCalledWithoutCookieConfig: enableCookieCalledWithoutCookieConfig,
|
|
4321
|
+
ethletePaginationAdapter: ethletePaginationAdapter,
|
|
4135
4322
|
extractExpiresInSeconds: extractExpiresInSeconds,
|
|
4136
4323
|
getQueryFeatureUsage: getQueryFeatureUsage,
|
|
4324
|
+
ggLikePaginationAdapter: ggLikePaginationAdapter,
|
|
4137
4325
|
loginCalledWithoutConfig: loginCalledWithoutConfig,
|
|
4138
4326
|
loginWithTokenCalledWithoutConfig: loginWithTokenCalledWithoutConfig,
|
|
4139
4327
|
maybeExecute: maybeExecute,
|
|
4328
|
+
pagedQueryNextPageCalledWithoutPreviousPage: pagedQueryNextPageCalledWithoutPreviousPage,
|
|
4329
|
+
pagedQueryPageBiggerThanTotalPages: pagedQueryPageBiggerThanTotalPages,
|
|
4330
|
+
pagedQueryPreviousPageCalledButAlreadyAtFirstPage: pagedQueryPreviousPageCalledButAlreadyAtFirstPage,
|
|
4140
4331
|
provideBearerAuthProvider: provideBearerAuthProvider,
|
|
4141
4332
|
provideQueryClient: provideQueryClient,
|
|
4142
4333
|
queryEffect: queryEffect,
|