Headless CMS and Content Managment Hub
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

99 lines
5.1 KiB

<sqx-modal-dialog (close)="emitComplete()" size="lg" [fullHeight]="true" [flexBody]="true" [hasTabs]="false">
<ng-container title>
<div class="row">
<div class="col-selector">
<select class="form-select" [ngModel]="schema" (ngModelChange)="selectSchema($event)">
<option *ngFor="let schema of schemas" [ngValue]="schema">
{{ 'contents.referencesSelectSchema' | sqxTranslate: { schema: schema.displayName } }}
</option>
</select>
</div>
</div>
</ng-container>
<ng-container tabs>
<div class="row gx-2 mt-3 mb-3">
<ng-container *ngIf="schema">
<div class="col-auto">
<button type="button" class="btn btn-text-secondary" (click)="reload()">
<i class="icon-reset"></i>
</button>
</div>
<div class="col">
<sqx-search-form formClass="form" placeholder="{{ 'contents.searchPlaceholder' | sqxTranslate }}"
[query]="contentsState.query | async"
[queryModel]="queryModel"
(queryChange)="search($event)">
</sqx-search-form>
</div>
<div class="col-auto" *ngIf="languages.length > 1">
<sqx-language-selector class="languages-buttons" [(selectedLanguage)]="language" [languages]="languages"></sqx-language-selector>
</div>
</ng-container>
</div>
</ng-container>
<ng-container content>
<ng-container *ngIf="schema">
<sqx-list-view [isLoading]="contentsState.isLoading | async" [syncedHeader]="true" [table]="true">
<ng-container header>
<table class="table table-items table-fixed" [style.minWidth]="schema.defaultReferenceFields | sqxContentListWidth" #header>
<thead>
<tr>
<th class="cell-select">
<input type="checkbox" class="form-check"
[ngModel]="selectedAll"
(ngModelChange)="selectAll($event)">
</th>
<th sqxContentListCell="meta.lastModifiedBy.avatar">
<sqx-content-list-header field="meta.lastModifiedBy.avatar"></sqx-content-list-header>
</th>
<th *ngFor="let field of schema.defaultReferenceFields" [sqxContentListCell]="field">
<sqx-content-list-header
[field]="field"
[query]="(contentsState.query | async)!"
(queryChange)="search($event)"
[language]="language">
</sqx-content-list-header>
</th>
<th sqxContentListCell="meta.status.color">
<sqx-content-list-header field="meta.status.color"></sqx-content-list-header>
</th>
</tr>
</thead>
</table>
</ng-container>
<ng-container content>
<div class="table-container">
<table class="table table-items table-fixed" [style.minWidth]="schema.defaultReferenceFields | sqxContentListWidth" *ngIf="contentsState.contents | async; let contents" [sqxSyncWidth]="header">
<tbody *ngFor="let content of contents; trackBy: trackByContent"
[sqxContentSelectorItem]="content"
[language]="language"
[schema]="schema"
[selectable]="!isItemAlreadySelected(content)"
[selected]="isItemSelected(content)"
(selectedChange)="selectContent(content)">
</tbody>
</table>
</div>
</ng-container>
<ng-container footer>
<sqx-pager [paging]="contentsState.paging | async" (pagingChange)="contentsState.page($event)"></sqx-pager>
</ng-container>
</sqx-list-view>
</ng-container>
</ng-container>
<ng-container footer>
<button type="button" class="btn btn-text-secondary" (click)="emitComplete()">
{{ 'common.cancel' | sqxTranslate }}
</button>
<button type="submit" class="btn btn-success" (click)="emitSelect()" [disabled]="selectionCount === 0">
{{ 'contents.referencesLink' | sqxTranslate: { count: selectionCount} }})
</button>
</ng-container>
</sqx-modal-dialog>