mirror of https://github.com/Squidex/squidex.git
Browse Source
* Temp * Temp * Indexes UI. * UI for indexes finalized. * Revert text * More formatting.pull/1146/head
Sebastian Stehle
2 years ago
committed by
GitHub
GitHub
102 changed files with 5090 additions and 4216 deletions
File diff suppressed because it is too large
@ -0,0 +1,73 @@ |
|||||
|
<form (ngSubmit)="createSchema()"> |
||||
|
<sqx-modal-dialog (dialogClose)="dialogClose.emit()" size="md"> |
||||
|
<ng-container title> |
||||
|
{{ "schemas.indexes.addTitle" | sqxTranslate }} |
||||
|
</ng-container> |
||||
|
|
||||
|
<ng-container content> |
||||
|
<sqx-form-hint> |
||||
|
<span inline="true" [sqxMarkdown]="'schemas.indexes.hint' | sqxTranslate" trusted="true"></span> |
||||
|
</sqx-form-hint> |
||||
|
|
||||
|
@for (form of createForm.controls; track form; let i = $index) { |
||||
|
<div class="form-group row gx-2" attr.data-testid="pattern_{{ form.get('name')?.value }}" [formGroup]="form"> |
||||
|
<div class="col"> |
||||
|
<sqx-control-errors for="name"></sqx-control-errors> |
||||
|
<select class="form-select" formControlName="name"> |
||||
|
@for (fieldName of fieldNames; track fieldName) { |
||||
|
<option [ngValue]="fieldName">{{ fieldName }}</option> |
||||
|
} |
||||
|
</select> |
||||
|
</div> |
||||
|
<div class="col-4"> |
||||
|
<sqx-control-errors for="order"></sqx-control-errors> |
||||
|
<select class="form-select" formControlName="order"> |
||||
|
<option [ngValue]="'Ascending'">Ascending</option> |
||||
|
<option [ngValue]="'Descending'">Descending</option> |
||||
|
</select> |
||||
|
</div> |
||||
|
<div class="col-auto"> |
||||
|
<button |
||||
|
class="btn btn-text-danger" |
||||
|
attr.aria-label="{{ 'common.delete' | sqxTranslate }}" |
||||
|
confirmRememberKey="deleteIndexField" |
||||
|
confirmText="i18n:schemas.indexes.deleteFieldConfirmText" |
||||
|
confirmTitle="i18n:schemas.indexes.deleteFieldConfirmTitle" |
||||
|
(sqxConfirmClick)="createForm.form.removeAt(i)" |
||||
|
type="button"> |
||||
|
<i class="icon-bin2"></i> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
} |
||||
|
|
||||
|
<div class="form-group row gx-2"> |
||||
|
<div class="col"> |
||||
|
<div class="form-control preview">{{ "common.name" | sqxTranslate }}</div> |
||||
|
</div> |
||||
|
<div class="col-4"> |
||||
|
<div class="form-control preview">{{ "common.order" | sqxTranslate }}</div> |
||||
|
</div> |
||||
|
<div class="col-auto"> |
||||
|
<button |
||||
|
class="btn btn-success" |
||||
|
attr.aria-label="{{ 'common.add' | sqxTranslate }}" |
||||
|
(click)="createForm.form.add()" |
||||
|
type="button"> |
||||
|
<i class="icon-add"></i> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
|
||||
|
<ng-container footer> |
||||
|
<button class="btn btn-text-secondary" (click)="dialogClose.emit()" type="button"> |
||||
|
{{ "common.cancel" | sqxTranslate }} |
||||
|
</button> |
||||
|
|
||||
|
<button class="btn btn-success" type="submit"> |
||||
|
{{ "common.create" | sqxTranslate }} |
||||
|
</button> |
||||
|
</ng-container> |
||||
|
</sqx-modal-dialog> |
||||
|
</form> |
||||
@ -0,0 +1,2 @@ |
|||||
|
@import 'mixins'; |
||||
|
@import 'vars'; |
||||
@ -0,0 +1,100 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { Component, EventEmitter, Input, Output } from '@angular/core'; |
||||
|
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; |
||||
|
import { AppLanguageDto, ConfirmClickDirective, ControlErrorsComponent, CreateIndexForm, FormHintComponent, IndexesState, MarkdownDirective, ModalDialogComponent, SchemaDto, TranslatePipe } from '@app/shared'; |
||||
|
|
||||
|
|
||||
|
@Component({ |
||||
|
standalone: true, |
||||
|
selector: 'sqx-index-form', |
||||
|
styleUrls: ['./index-form.component.scss'], |
||||
|
templateUrl: './index-form.component.html', |
||||
|
imports: [ |
||||
|
ConfirmClickDirective, |
||||
|
ControlErrorsComponent, |
||||
|
FormHintComponent, |
||||
|
FormsModule, |
||||
|
MarkdownDirective, |
||||
|
ModalDialogComponent, |
||||
|
ReactiveFormsModule, |
||||
|
TranslatePipe, |
||||
|
], |
||||
|
}) |
||||
|
export class IndexFormComponent { |
||||
|
@Output() |
||||
|
public create = new EventEmitter(); |
||||
|
|
||||
|
@Output() |
||||
|
public dialogClose = new EventEmitter(); |
||||
|
|
||||
|
@Input({ required: true }) |
||||
|
public schema!: SchemaDto; |
||||
|
|
||||
|
@Input({ required: true }) |
||||
|
public languages!: AppLanguageDto[]; |
||||
|
|
||||
|
public createForm = new CreateIndexForm(); |
||||
|
public fieldNames: string[] = []; |
||||
|
|
||||
|
constructor( |
||||
|
private readonly indexesState: IndexesState, |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
public ngOnInit() { |
||||
|
const metaFields: string[] = [ |
||||
|
'created', |
||||
|
'createdBy', |
||||
|
'lastModified', |
||||
|
'lastModifiedBy', |
||||
|
'newStatus', |
||||
|
'status', |
||||
|
'version', |
||||
|
]; |
||||
|
|
||||
|
const dataFields: string[] = []; |
||||
|
for (const field of this.schema.fields) { |
||||
|
if (field.properties.isContentField) { |
||||
|
if (field.isLocalizable) { |
||||
|
for (const language of this.languages) { |
||||
|
dataFields.push(`data.${field.name}.${language.iso2Code}`); |
||||
|
} |
||||
|
} else { |
||||
|
dataFields.push(`data.${field.name}.iv`); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
this.fieldNames = [...metaFields, ...dataFields.sort()]; |
||||
|
} |
||||
|
|
||||
|
public emitCreate() { |
||||
|
this.create.emit(); |
||||
|
} |
||||
|
|
||||
|
public emitClose() { |
||||
|
this.dialogClose.emit(); |
||||
|
} |
||||
|
|
||||
|
public createSchema() { |
||||
|
const fields = this.createForm.submit(); |
||||
|
|
||||
|
if (fields) { |
||||
|
this.indexesState.create({ fields }) |
||||
|
.subscribe({ |
||||
|
next: () => { |
||||
|
this.emitCreate(); |
||||
|
}, |
||||
|
error: error => { |
||||
|
this.createForm.submitFailed(error); |
||||
|
}, |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,57 @@ |
|||||
|
<div class="table-items-row table-items-row-expandable"> |
||||
|
<div class="table-items-row-summary row gx-2 align-items-center"> |
||||
|
<div class="col"> |
||||
|
<span class="truncate">{{ index.name }}</span> |
||||
|
</div> |
||||
|
<div class="col-auto"> |
||||
|
<div class="float-end"> |
||||
|
<button |
||||
|
class="btn btn-outline-secondary btn-expand me-1" |
||||
|
attr.aria-label="{{ 'common.options' | sqxTranslate }}" |
||||
|
[class.expanded]="isExpanded" |
||||
|
(click)="toggleExpanded()" |
||||
|
type="button"> |
||||
|
<span class="hidden">{{ "common.settings" | sqxTranslate }}</span> |
||||
|
<i class="icon-settings"></i> |
||||
|
</button> |
||||
|
|
||||
|
<button |
||||
|
class="btn btn-text-danger" |
||||
|
attr.aria-label="{{ 'common.delete' | sqxTranslate }}" |
||||
|
confirmRememberKey="deleteIndex" |
||||
|
confirmText="i18n:schemas.indexes.deleteConfirmText" |
||||
|
confirmTitle="i18n:schemas.indexes.deleteConfirmTitle" |
||||
|
[disabled]="!index.canDelete" |
||||
|
(sqxConfirmClick)="delete()" |
||||
|
type="button"> |
||||
|
<i class="icon-bin2"></i> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
@if (isExpanded) { |
||||
|
<div class="table-items-row-details"> |
||||
|
<table class="table table-sm table-fixed mb-0"> |
||||
|
<colgroup> |
||||
|
<col /> |
||||
|
<col style="width: 300px" /> |
||||
|
</colgroup> |
||||
|
<thead> |
||||
|
<tr> |
||||
|
<th>{{ "common.field" | sqxTranslate }}</th> |
||||
|
<th>{{ "common.order" | sqxTranslate }}</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
@for (field of index.fields; track field.name) { |
||||
|
<tr> |
||||
|
<td>{{ field.name }}</td> |
||||
|
<td>{{ field.order }}</td> |
||||
|
</tr> |
||||
|
} |
||||
|
</tbody> |
||||
|
</table> |
||||
|
</div> |
||||
|
} |
||||
|
</div> |
||||
@ -0,0 +1,12 @@ |
|||||
|
@import 'mixins'; |
||||
|
@import 'vars'; |
||||
|
|
||||
|
th { |
||||
|
padding-left: 1rem !important; |
||||
|
padding-right: 1rem; |
||||
|
background: $color-border-light !important; |
||||
|
} |
||||
|
|
||||
|
td { |
||||
|
padding-left: 1rem; |
||||
|
} |
||||
@ -0,0 +1,39 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { Component, Input } from '@angular/core'; |
||||
|
import { ConfirmClickDirective, IndexDto, IndexesState, TranslatePipe } from '@app/shared'; |
||||
|
|
||||
|
@Component({ |
||||
|
standalone: true, |
||||
|
selector: 'sqx-index', |
||||
|
styleUrls: ['./index.component.scss'], |
||||
|
templateUrl: './index.component.html', |
||||
|
imports: [ |
||||
|
ConfirmClickDirective, |
||||
|
TranslatePipe, |
||||
|
], |
||||
|
}) |
||||
|
export class IndexComponent { |
||||
|
@Input({ required: true }) |
||||
|
public index!: IndexDto; |
||||
|
|
||||
|
public isExpanded?: boolean | null; |
||||
|
|
||||
|
constructor( |
||||
|
private readonly indexesState: IndexesState, |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
public toggleExpanded() { |
||||
|
this.isExpanded = !this.isExpanded; |
||||
|
} |
||||
|
|
||||
|
public delete() { |
||||
|
this.indexesState.delete(this.index); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,55 @@ |
|||||
|
<sqx-list-view innerWidth="50rem"> |
||||
|
@if (canCreateIndexes) { |
||||
|
<div class="mt-2"> |
||||
|
@if ((indexesState.isLoaded | async) && (indexesState.indexes | async); as indexes) { |
||||
|
@if (indexes.length === 0) { |
||||
|
<div class="table-items-row table-items-row-summary table-items-row-empty"> |
||||
|
{{ "schemas.indexes.empty" | sqxTranslate }} |
||||
|
|
||||
|
<button class="btn btn-success btn-sm ms-2" (click)="addIndexDialog.show()" sqxTourStep="addField" type="button"> |
||||
|
<i class="icon icon-plus"></i> |
||||
|
{{ "schemas.indexes.addIndex" | sqxTranslate }} |
||||
|
</button> |
||||
|
</div> |
||||
|
} |
||||
|
@for (index of indexes; track index.name) { |
||||
|
<sqx-index [index]="index"></sqx-index> |
||||
|
} |
||||
|
} |
||||
|
</div> |
||||
|
} @else { |
||||
|
<div class="table-items-row table-items-row-summary table-items-row-empty text-sm"> |
||||
|
{{ "schemas.indexes.empty" | sqxTranslate }} |
||||
|
|
||||
|
<div class="section"> |
||||
|
<span [sqxMarkdown]="'schemas.indexes.notEnableHint1' | sqxTranslate" trusted="true"></span> |
||||
|
|
||||
|
<sqx-code>CONTENTS__OPTIMIZEFORSELFHOSTING=true</sqx-code> |
||||
|
</div> |
||||
|
|
||||
|
<div class="section"> |
||||
|
<span [sqxMarkdown]="'schemas.indexes.notEnableHint2' | sqxTranslate" trusted="true"></span> |
||||
|
|
||||
|
<sqx-code>REBUILD__CONTENTS=true</sqx-code> |
||||
|
</div> |
||||
|
</div> |
||||
|
} |
||||
|
</sqx-list-view> |
||||
|
|
||||
|
@if (canCreateIndexes) { |
||||
|
@if (indexesState.canCreate | async) { |
||||
|
<button class="btn btn-success index-button" (click)="addIndexDialog.show()" type="button"> |
||||
|
<i class="icon icon-plus index-button-icon"></i> |
||||
|
<div class="index-button-text">{{ "schemas.indexes.addIndexButton" | sqxTranslate }}</div> |
||||
|
</button> |
||||
|
} |
||||
|
|
||||
|
@if (languagesState.isoLanguages | async; as languages) { |
||||
|
<sqx-index-form |
||||
|
(create)="addIndexDialog.hide()" |
||||
|
(dialogClose)="addIndexDialog.hide()" |
||||
|
[languages]="languages" |
||||
|
[schema]="schema" |
||||
|
*sqxModal="addIndexDialog"></sqx-index-form> |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,22 @@ |
|||||
|
@import 'mixins'; |
||||
|
@import 'vars'; |
||||
|
|
||||
|
.index-button { |
||||
|
@include circle(5.25rem); |
||||
|
@include box-shadow-outer(0, 8px, 16px, .3); |
||||
|
@include absolute(auto, 6rem, 1rem, auto); |
||||
|
|
||||
|
&-icon { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
&-text { |
||||
|
font-size: $font-small; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.section { |
||||
|
font-size: $font-small; |
||||
|
font-weight: normal; |
||||
|
margin-top: 1rem; |
||||
|
} |
||||
@ -0,0 +1,57 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
import { AsyncPipe } from '@angular/common'; |
||||
|
import { Component, inject, Input, OnInit } from '@angular/core'; |
||||
|
import { switchMap, timer } from 'rxjs'; |
||||
|
import { CodeComponent, DialogModel, IndexesState, LanguagesState, ListViewComponent, MarkdownDirective, ModalDirective, SchemaDto, Subscriptions, TranslatePipe, UIOptions } from '@app/shared'; |
||||
|
import { IndexFormComponent } from './index-form.component'; |
||||
|
import { IndexComponent } from './index.component'; |
||||
|
|
||||
|
@Component({ |
||||
|
standalone: true, |
||||
|
selector: 'sqx-schema-indexes', |
||||
|
styleUrls: ['./schema-indexes.component.scss'], |
||||
|
templateUrl: './schema-indexes.component.html', |
||||
|
imports: [ |
||||
|
AsyncPipe, |
||||
|
CodeComponent, |
||||
|
IndexFormComponent, |
||||
|
IndexComponent, |
||||
|
MarkdownDirective, |
||||
|
ModalDirective, |
||||
|
ListViewComponent, |
||||
|
TranslatePipe, |
||||
|
], |
||||
|
}) |
||||
|
export class SchemaIndexesComponent implements OnInit { |
||||
|
private readonly subscriptions = new Subscriptions(); |
||||
|
|
||||
|
public readonly canCreateIndexes = inject(UIOptions).value.canCreateIndexes; |
||||
|
|
||||
|
@Input({ required: true }) |
||||
|
public schema!: SchemaDto; |
||||
|
|
||||
|
public addIndexDialog = new DialogModel(); |
||||
|
|
||||
|
constructor( |
||||
|
public readonly indexesState: IndexesState, |
||||
|
public readonly languagesState: LanguagesState, |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
public ngOnInit() { |
||||
|
this.indexesState.load(); |
||||
|
|
||||
|
this.subscriptions.add( |
||||
|
timer(3000, 3000).pipe( |
||||
|
switchMap(() => this.indexesState.load(false, true)))); |
||||
|
|
||||
|
this.languagesState.load(); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,116 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; |
||||
|
import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing'; |
||||
|
import { inject, TestBed } from '@angular/core/testing'; |
||||
|
import { ApiUrlConfig, IndexDto, IndexesDto, IndexesService, Resource, ResourceLinks } from '@app/shared/internal'; |
||||
|
|
||||
|
describe('IndexesService', () => { |
||||
|
beforeEach(() => { |
||||
|
TestBed.configureTestingModule({ |
||||
|
imports: [], |
||||
|
providers: [ |
||||
|
provideHttpClient(withInterceptorsFromDi()), |
||||
|
provideHttpClientTesting(), |
||||
|
IndexesService, |
||||
|
{ provide: ApiUrlConfig, useValue: new ApiUrlConfig('http://service/p/') }, |
||||
|
], |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
afterEach(inject([HttpTestingController], (httpMock: HttpTestingController) => { |
||||
|
httpMock.verify(); |
||||
|
})); |
||||
|
|
||||
|
it('should make get request to get indexes', |
||||
|
inject([IndexesService, HttpTestingController], (indexesService: IndexesService, httpMock: HttpTestingController) => { |
||||
|
let indexes: IndexesDto; |
||||
|
|
||||
|
indexesService.getIndexes('my-app', 'my-schema').subscribe(result => { |
||||
|
indexes = result; |
||||
|
}); |
||||
|
|
||||
|
const req = httpMock.expectOne('http://service/p/api/apps/my-app/schemas/my-schema/indexes'); |
||||
|
|
||||
|
expect(req.request.method).toEqual('GET'); |
||||
|
expect(req.request.headers.get('If-Match')).toBeNull(); |
||||
|
|
||||
|
req.flush({ |
||||
|
items: [ |
||||
|
indexResponse(12), |
||||
|
indexResponse(13), |
||||
|
], |
||||
|
}); |
||||
|
|
||||
|
expect(indexes!).toEqual({ |
||||
|
items: [ |
||||
|
createIndex(12), |
||||
|
createIndex(13), |
||||
|
], |
||||
|
canCreate: false, |
||||
|
}); |
||||
|
})); |
||||
|
|
||||
|
it('should make post request to create index', |
||||
|
inject([IndexesService, HttpTestingController], (indexesService: IndexesService, httpMock: HttpTestingController) => { |
||||
|
const request = { fields: [] }; |
||||
|
|
||||
|
indexesService.postIndex('my-app', 'my-schema', request).subscribe(); |
||||
|
|
||||
|
const req = httpMock.expectOne('http://service/p/api/apps/my-app/schemas/my-schema/indexes'); |
||||
|
|
||||
|
expect(req.request.method).toEqual('POST'); |
||||
|
expect(req.request.headers.get('If-Match')).toBeNull(); |
||||
|
|
||||
|
req.flush({}); |
||||
|
})); |
||||
|
|
||||
|
it('should make delete request to remove index', |
||||
|
inject([IndexesService, HttpTestingController], (indexesService: IndexesService, httpMock: HttpTestingController) => { |
||||
|
const resource: Resource = { |
||||
|
_links: { |
||||
|
delete: { method: 'DELETE', href: '/api/apps/my-app/schemas/my-schema/indexes/my-index' }, |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
indexesService.deleteIndex('my-app', resource).subscribe(); |
||||
|
|
||||
|
const req = httpMock.expectOne('http://service/p/api/apps/my-app/schemas/my-schema/indexes/my-index'); |
||||
|
|
||||
|
expect(req.request.method).toEqual('DELETE'); |
||||
|
expect(req.request.headers.get('If-Match')).toBeNull(); |
||||
|
|
||||
|
req.flush({}); |
||||
|
})); |
||||
|
|
||||
|
function indexResponse(id: number) { |
||||
|
return { |
||||
|
name: `index${id}`, |
||||
|
fields: [ |
||||
|
{ name: `field${id}_asc`, order: 'Ascending' }, |
||||
|
{ name: `field${id}_desc`, order: 'Descending' }, |
||||
|
], |
||||
|
_links: { |
||||
|
download: { method: 'GET', href: '/api/indexes/1' }, |
||||
|
}, |
||||
|
}; |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
export function createIndex(id: number) { |
||||
|
const links: ResourceLinks = { |
||||
|
download: { method: 'GET', href: '/api/indexes/1' }, |
||||
|
}; |
||||
|
|
||||
|
return new IndexDto(links, |
||||
|
`index${id}`, |
||||
|
[ |
||||
|
{ name: `field${id}_asc`, order: 'Ascending' }, |
||||
|
{ name: `field${id}_desc`, order: 'Descending' }, |
||||
|
]); |
||||
|
} |
||||
@ -0,0 +1,93 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { HttpClient } from '@angular/common/http'; |
||||
|
import { Injectable } from '@angular/core'; |
||||
|
import { map, Observable } from 'rxjs'; |
||||
|
import { ApiUrlConfig, hasAnyLink, pretifyError, Resource, ResourceLinks } from '@app/framework'; |
||||
|
|
||||
|
export type IndexField = { name: string; order: 'Ascending' | 'Descending' }; |
||||
|
|
||||
|
export class IndexDto { |
||||
|
public readonly _links: ResourceLinks; |
||||
|
|
||||
|
public readonly canDelete: boolean; |
||||
|
|
||||
|
constructor(links: ResourceLinks, |
||||
|
public readonly name: string, |
||||
|
public readonly fields: ReadonlyArray<IndexField>, |
||||
|
) { |
||||
|
this._links = links; |
||||
|
|
||||
|
this.canDelete = hasAnyLink(links, 'delete'); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export type IndexesDto = Readonly<{ |
||||
|
// The indexes.
|
||||
|
items: ReadonlyArray<IndexDto>; |
||||
|
|
||||
|
// The if the user can create a new index.
|
||||
|
canCreate?: boolean; |
||||
|
}>; |
||||
|
|
||||
|
export type CreateIndexDto = Readonly<{ |
||||
|
// The index fields.
|
||||
|
fields: IndexField[]; |
||||
|
}>; |
||||
|
|
||||
|
@Injectable({ |
||||
|
providedIn: 'root', |
||||
|
}) |
||||
|
export class IndexesService { |
||||
|
constructor( |
||||
|
private readonly http: HttpClient, |
||||
|
private readonly apiUrl: ApiUrlConfig, |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
public getIndexes(appName: string, schemaName: string): Observable<IndexesDto> { |
||||
|
const url = this.apiUrl.buildUrl(`api/apps/${appName}/schemas/${schemaName}/indexes`); |
||||
|
|
||||
|
return this.http.get(url).pipe( |
||||
|
map(body => { |
||||
|
return parseIndexes(body as any); |
||||
|
}), |
||||
|
pretifyError('i18n:schemas.indexes.loadFailed')); |
||||
|
} |
||||
|
|
||||
|
public postIndex(appName: string, schemaName: string, dto: CreateIndexDto): Observable<any> { |
||||
|
const url = this.apiUrl.buildUrl(`api/apps/${appName}/schemas/${schemaName}/indexes`); |
||||
|
|
||||
|
return this.http.post(url, dto).pipe( |
||||
|
pretifyError('i18n:schemas.indexes.createFailed')); |
||||
|
} |
||||
|
|
||||
|
public deleteIndex(appName: string, resource: Resource): Observable<any> { |
||||
|
const link = resource._links['delete']; |
||||
|
|
||||
|
const url = this.apiUrl.buildUrl(link.href); |
||||
|
|
||||
|
return this.http.request(link.method, url).pipe( |
||||
|
pretifyError('i18n:schemas.indexes.deleteFailed')); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function parseIndexes(response: { items: any[] } & Resource): IndexesDto { |
||||
|
const { items: list, _links } = response; |
||||
|
const items = list.map(parseIndex); |
||||
|
|
||||
|
const canCreate = hasAnyLink(_links, 'create'); |
||||
|
|
||||
|
return { items, canCreate }; |
||||
|
} |
||||
|
|
||||
|
function parseIndex(response: any) { |
||||
|
return new IndexDto(response._links, |
||||
|
response.name, |
||||
|
response.fields); |
||||
|
} |
||||
@ -0,0 +1,36 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
import { UntypedFormControl, Validators } from '@angular/forms'; |
||||
|
import { ExtendedFormGroup, Form, TemplatedFormArray } from '@app/framework'; |
||||
|
import { IndexDto, IndexField } from '@app/shared/internal'; |
||||
|
|
||||
|
export class CreateIndexForm extends Form<TemplatedFormArray, IndexField[], IndexDto> { |
||||
|
public get controls(): ReadonlyArray<ExtendedFormGroup> { |
||||
|
return this.form.controls as any; |
||||
|
} |
||||
|
|
||||
|
constructor() { |
||||
|
super(new TemplatedFormArray(FieldTemplate.INSTANCE)); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
class FieldTemplate { |
||||
|
public static readonly INSTANCE = new FieldTemplate(); |
||||
|
|
||||
|
public createControl() { |
||||
|
return new ExtendedFormGroup({ |
||||
|
name: new UntypedFormControl('', |
||||
|
Validators.required, |
||||
|
), |
||||
|
order: new UntypedFormControl('', |
||||
|
Validators.required, |
||||
|
), |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,132 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { of, onErrorResumeNextWith, throwError } from 'rxjs'; |
||||
|
import { IMock, It, Mock, Times } from 'typemoq'; |
||||
|
import { CreateIndexDto, DialogService, IndexesService, IndexesState, SchemasState } from '@app/shared/internal'; |
||||
|
import { createIndex } from '../services/indexes.service.spec'; |
||||
|
import { TestValues } from './_test-helpers'; |
||||
|
|
||||
|
describe('IndexesState', () => { |
||||
|
const { |
||||
|
app, |
||||
|
appsState, |
||||
|
} = TestValues; |
||||
|
|
||||
|
const index1 = createIndex(12); |
||||
|
const index2 = createIndex(13); |
||||
|
const schema = 'my-schema'; |
||||
|
|
||||
|
let dialogs: IMock<DialogService>; |
||||
|
let schemasState: IMock<SchemasState>; |
||||
|
let indexesService: IMock<IndexesService>; |
||||
|
let indexesState: IndexesState; |
||||
|
|
||||
|
beforeEach(() => { |
||||
|
dialogs = Mock.ofType<DialogService>(); |
||||
|
|
||||
|
schemasState = Mock.ofType<SchemasState>(); |
||||
|
schemasState.setup(x => x.schemaName).returns(() => schema); |
||||
|
|
||||
|
indexesService = Mock.ofType<IndexesService>(); |
||||
|
indexesState = new IndexesState(appsState.object, schemasState.object, indexesService.object, dialogs.object); |
||||
|
}); |
||||
|
|
||||
|
afterEach(() => { |
||||
|
indexesService.verifyAll(); |
||||
|
}); |
||||
|
|
||||
|
describe('Loading', () => { |
||||
|
it('should load indexes', () => { |
||||
|
indexesService.setup(x => x.getIndexes(app, schema)) |
||||
|
.returns(() => of({ items: [index1, index2] } as any)).verifiable(); |
||||
|
|
||||
|
indexesState.load().subscribe(); |
||||
|
|
||||
|
expect(indexesState.snapshot.indexes).toEqual([index1, index2]); |
||||
|
expect(indexesState.snapshot.isLoaded).toBeTruthy(); |
||||
|
expect(indexesState.snapshot.isLoading).toBeFalsy(); |
||||
|
|
||||
|
dialogs.verify(x => x.notifyInfo(It.isAnyString()), Times.never()); |
||||
|
}); |
||||
|
|
||||
|
it('should reset loading state if loading failed', () => { |
||||
|
indexesService.setup(x => x.getIndexes(app, schema)) |
||||
|
.returns(() => throwError(() => 'Service Error')); |
||||
|
|
||||
|
indexesState.load().pipe(onErrorResumeNextWith()).subscribe(); |
||||
|
|
||||
|
expect(indexesState.snapshot.isLoading).toBeFalsy(); |
||||
|
}); |
||||
|
|
||||
|
it('should show notification on load if reload is true', () => { |
||||
|
indexesService.setup(x => x.getIndexes(app, schema)) |
||||
|
.returns(() => of({ items: [index1, index2] } as any)).verifiable(); |
||||
|
|
||||
|
indexesState.load(true, false).subscribe(); |
||||
|
|
||||
|
expect().nothing(); |
||||
|
|
||||
|
dialogs.verify(x => x.notifyInfo(It.isAnyString()), Times.once()); |
||||
|
}); |
||||
|
|
||||
|
it('should show notification on load error if silent is false', () => { |
||||
|
indexesService.setup(x => x.getIndexes(app, schema)) |
||||
|
.returns(() => throwError(() => 'Service Error')); |
||||
|
|
||||
|
indexesState.load(true, false).pipe(onErrorResumeNextWith()).subscribe(); |
||||
|
|
||||
|
expect().nothing(); |
||||
|
|
||||
|
dialogs.verify(x => x.notifyError(It.isAny()), Times.once()); |
||||
|
}); |
||||
|
|
||||
|
it('should not show notification on load error if silent is true', () => { |
||||
|
indexesService.setup(x => x.getIndexes(app, schema)) |
||||
|
.returns(() => throwError(() => 'Service Error')); |
||||
|
|
||||
|
indexesState.load(true, true).pipe(onErrorResumeNextWith()).subscribe(); |
||||
|
|
||||
|
expect().nothing(); |
||||
|
|
||||
|
dialogs.verify(x => x.notifyError(It.isAny()), Times.never()); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
describe('Updates', () => { |
||||
|
beforeEach(() => { |
||||
|
indexesService.setup(x => x.getIndexes(app, schema)) |
||||
|
.returns(() => of({ items: [index1, index2] } as any)).verifiable(); |
||||
|
|
||||
|
indexesState.load().subscribe(); |
||||
|
}); |
||||
|
|
||||
|
it('should not add index to snapshot', () => { |
||||
|
const request: CreateIndexDto = { fields: [{ name: 'field1', order: 'Ascending' }] }; |
||||
|
|
||||
|
indexesService.setup(x => x.postIndex(app, schema, request)) |
||||
|
.returns(() => of({})).verifiable(); |
||||
|
|
||||
|
indexesState.create(request).subscribe(); |
||||
|
|
||||
|
expect(indexesState.snapshot.indexes.length).toBe(2); |
||||
|
|
||||
|
dialogs.verify(x => x.notifyInfo(It.isAnyString()), Times.once()); |
||||
|
}); |
||||
|
|
||||
|
it('should not remove index from snapshot', () => { |
||||
|
indexesService.setup(x => x.deleteIndex(app, index1)) |
||||
|
.returns(() => of({})).verifiable(); |
||||
|
|
||||
|
indexesState.delete(index1).subscribe(); |
||||
|
|
||||
|
expect(indexesState.snapshot.indexes.length).toBe(2); |
||||
|
|
||||
|
dialogs.verify(x => x.notifyInfo(It.isAnyString()), Times.once()); |
||||
|
}); |
||||
|
}); |
||||
|
}); |
||||
@ -0,0 +1,114 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { Injectable } from '@angular/core'; |
||||
|
import { Observable } from 'rxjs'; |
||||
|
import { finalize, tap } from 'rxjs/operators'; |
||||
|
import { debug, DialogService, LoadingState, shareSubscribed, State } from '@app/framework'; |
||||
|
import { CreateIndexDto, IndexDto, IndexesService } from '../services/indexes.service'; |
||||
|
import { AppsState } from './apps.state'; |
||||
|
import { SchemasState } from './schemas.state'; |
||||
|
|
||||
|
interface Snapshot extends LoadingState { |
||||
|
// The current indexes.
|
||||
|
indexes: ReadonlyArray<IndexDto>; |
||||
|
|
||||
|
// Indicates if the user can add an index.
|
||||
|
canCreate?: boolean; |
||||
|
} |
||||
|
|
||||
|
@Injectable({ |
||||
|
providedIn: 'root', |
||||
|
}) |
||||
|
export class IndexesState extends State<Snapshot> { |
||||
|
public indexes = |
||||
|
this.project(x => x.indexes); |
||||
|
|
||||
|
public isLoaded = |
||||
|
this.project(x => x.isLoaded === true); |
||||
|
|
||||
|
public isLoading = |
||||
|
this.project(x => x.isLoading === true); |
||||
|
|
||||
|
public canCreate = |
||||
|
this.project(x => x.canCreate === true); |
||||
|
|
||||
|
public get appId() { |
||||
|
return this.appsState.appId; |
||||
|
} |
||||
|
|
||||
|
public get appName() { |
||||
|
return this.appsState.appName; |
||||
|
} |
||||
|
|
||||
|
public get schemaId() { |
||||
|
return this.schemasState.schemaId; |
||||
|
} |
||||
|
|
||||
|
public get schemaName() { |
||||
|
return this.schemasState.schemaName; |
||||
|
} |
||||
|
|
||||
|
constructor( |
||||
|
private readonly appsState: AppsState, |
||||
|
private readonly schemasState: SchemasState, |
||||
|
private readonly indexesService: IndexesService, |
||||
|
private readonly dialogs: DialogService, |
||||
|
) { |
||||
|
super({ indexes: [] }); |
||||
|
|
||||
|
debug(this, 'indexes'); |
||||
|
} |
||||
|
|
||||
|
public load(isReload = false, silent = false): Observable<any> { |
||||
|
if (isReload && !silent) { |
||||
|
this.resetState('Loading Initial'); |
||||
|
} |
||||
|
|
||||
|
return this.loadInternal(isReload, silent); |
||||
|
} |
||||
|
|
||||
|
private loadInternal(isReload: boolean, silent: boolean): Observable<any> { |
||||
|
this.next({ isLoading: true }, 'Loading Success'); |
||||
|
|
||||
|
return this.indexesService.getIndexes(this.appName, this.schemasState.schemaName).pipe( |
||||
|
tap(payload => { |
||||
|
if (isReload && !silent) { |
||||
|
this.dialogs.notifyInfo('i18n:schemas.indexes.reloaded'); |
||||
|
} |
||||
|
|
||||
|
const { canCreate, items: indexes } = payload; |
||||
|
|
||||
|
this.next({ |
||||
|
canCreate, |
||||
|
isLoaded: true, |
||||
|
isLoading: false, |
||||
|
indexes, |
||||
|
}, 'Loading Success / Updated'); |
||||
|
}), |
||||
|
finalize(() => { |
||||
|
this.next({ isLoading: false }, 'Loading Done'); |
||||
|
}), |
||||
|
shareSubscribed(this.dialogs, { silent })); |
||||
|
} |
||||
|
|
||||
|
public create(request: CreateIndexDto): Observable<any> { |
||||
|
return this.indexesService.postIndex(this.appName, this.schemaName, request).pipe( |
||||
|
tap(() => { |
||||
|
this.dialogs.notifyInfo('i18n:schemas.indexes.created'); |
||||
|
}), |
||||
|
shareSubscribed(this.dialogs)); |
||||
|
} |
||||
|
|
||||
|
public delete(index: IndexDto): Observable<any> { |
||||
|
return this.indexesService.deleteIndex(this.appName, index).pipe( |
||||
|
tap(() => { |
||||
|
this.dialogs.notifyInfo('i18n:schemas.indexes.deleted'); |
||||
|
}), |
||||
|
shareSubscribed(this.dialogs)); |
||||
|
} |
||||
|
} |
||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue