squidex/src/Squidex/app/features/content/pages/contents/contents-page.component.html

<sqx-title message="{app} | {schema} | Contents" parameter1="app" parameter2="schema" [value1]="ctx.appName" [value2]="schema?.name"></sqx-title>

<sqx-panel [desiredWidth]="isReadOnly ? '40rem' : '60rem'">
    <div class="panel-header">
        <div class="panel-title-row">
            <div class="float-right">
                <button class="btn btn-link btn-decent" (click)="load(true)" title="Refresh Contents (CTRL + SHIFT + R)">
                    <i class="icon-reset"></i> Refresh
                </button>

                <sqx-shortcut keys="ctrl+shift+r" (trigger)="load(true)"></sqx-shortcut>
                <sqx-shortcut keys="ctrl+shift+f" (trigger)="inputFind.focus()"></sqx-shortcut>
                <sqx-shortcut keys="ctrl+shift+g" (trigger)="newButton.click()" *ngIf="!isReadOnly"></sqx-shortcut>

                <form class="form-inline" (ngSubmit)="search()">
                    <input class="form-control form-control-expandable" #inputFind [formControl]="contentsFilter" placeholder="Search for content" />

                    <a class="expand-search" (click)="searchModal.toggle()" #archive>
                        <i class="icon-caret-down"></i>
                    </a>
                </form>

                <sqx-onboarding-tooltip id="contentArchive" [for]="archive" position="bottomRight" after="60000">
                    Click this icon to show the advanced search menu and to show the archive!
                </sqx-onboarding-tooltip>

                <sqx-onboarding-tooltip id="contentFind" [for]="inputFind" position="bottomRight" after="120000">
                    Search for content using full text search over all fields and languages!
                </sqx-onboarding-tooltip>
                
                <div class="dropdown-menu" *sqxModalView="searchModal" closeAlways="true" [sqxModalTarget]="inputFind">
                    <sqx-search-form
                        [canArchive]="!isReadOnly"
                        (queryChanged)="contentsFilter.setValue($event, { emitEvent: false })" 
                        [query]="contentsFilter.value"
                        (archivedChanged)="updateArchive($event)"
                        [archived]="isArchive">
                    </sqx-search-form>
                </div>
                
                <span *ngIf="!isReadOnly && languages.length > 1">
                    <sqx-language-selector class="languages-buttons" (selectedLanguageChanged)="selectLanguage($event)" [languages]="languages"></sqx-language-selector>
                </span>

                <button *ngIf="!isReadOnly" class="btn btn-success" #newButton routerLink="new" title="New Content (CTRL + SHIFT + G)">
                    <i class="icon-plus"></i> New
                </button>
            </div>

            <h3 class="panel-title" *ngIf="!isReadOnly && !isArchive">
                Contents
            </h3>
            
            <h3 class="panel-title" *ngIf="isArchive">
                Archive
            </h3>

            <h3 class="panel-title" *ngIf="isReadOnly">
                Refs
            </h3>
        </div>

        <a class="panel-close" sqxParentLink>
            <i class="icon-close"></i>
        </a>
    </div>

    <div class="panel-main">
        <div class="panel-content grid">
            <div class="grid-header">
                <table class="table table-items table-fixed" *ngIf="contentItems">
                    <thead>
                        <tr>
                            <th class="cell-select" *ngIf="!isReadOnly">
                                <input type="checkbox" class="form-control" [ngModel]="isAllSelected" (ngModelChange)="selectAll($event)" />
                            </th>
                            <th class="cell-auto" *ngFor="let field of contentFields">
                                <span class="field">{{field | sqxDisplayName:'properties.label':'name'}}</span>
                            </th>
                            <th class="cell-time">
                                Updated
                            </th>
                            <th class="cell-user">
                                By
                            </th>
                            <th class="cell-actions" *ngIf="!isReadOnly">
                                Actions
                            </th>
                        </tr>
                    </thead>
                </table>
            </div>

            <div class="selection" *ngIf="selectionCount > 0">
                {{selectionCount}} items selected:

                <button class="btn btn-link btn-default" (click)="publishSelected()" *ngIf="canPublish">
                    Publish
                </button>
                
                <button class="btn btn-link btn-default" (click)="unpublishSelected()" *ngIf="canUnpublish">
                    Unublish
                </button>
                
                <button class="btn btn-link btn-default" (click)="archiveSelected()" *ngIf="!isArchive">
                    Archive
                </button>
                
                <button class="btn btn-link btn-default" (click)="restoreSelected()" *ngIf="isArchive">
                    Restore
                </button>
                
                <button class="btn btn-link btn-danger"
                    (sqxConfirmClick)="deleteSelected()"
                    confirmTitle="Delete content" 
                    confirmText="Do you really want to delete the selected content items?">
                    Delete
                </button>
            </div>

            <div class="grid-content">
                <div sqxIgnoreScrollbar>
                    <table class="table table-items table-fixed" *ngIf="contentItems" >
                        <tbody *ngIf="!isReadOnly">
                            <ng-template ngFor let-content [ngForOf]="contentItems">
                                <tr [sqxContent]="content" [routerLink]="[content.id]" routerLinkActive="active"
                                    [languageCode]="languageSelected.iso2Code"
                                    [schemaFields]="contentFields"
                                    [schema]="schema"
                                    [selected]="isItemSelected(content)"
                                    (selectedChange)="selectItem(content, $event)"
                                    (unpublishing)="unpublishContent(content)"
                                    (publishing)="publishContent(content)"
                                    (archiving)="archiveContent(content)"
                                    (restoring)="restoreContent(content)"
                                    (deleting)="deleteContent(content)"></tr>
                                <tr class="spacer"></tr>
                            </ng-template>
                        </tbody>

                        <tbody *ngIf="isReadOnly">
                            <ng-template ngFor let-content [ngForOf]="contentItems">
                                <tr [sqxContent]="content" dnd-draggable [dragData]="dropData(content)"
                                    [languageCode]="languageSelected.iso2Code"
                                    [schemaFields]="contentFields"
                                    [schema]="schema" 
                                    isReadOnly="true"></tr>
                                <tr class="spacer"></tr>
                            </ng-template>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="grid-footer clearfix" *ngIf="contentsPager.numberOfItems > 0">
                <div class="float-right pagination">
                    <span class="pagination-text">{{contentsPager.itemFirst}}-{{contentsPager.itemLast}} of {{contentsPager.numberOfItems}}</span>

                    <button class="btn btn-link btn-decent pagination-button" [disabled]="!contentsPager.canGoPrev" (click)="goPrev()">
                        <i class="icon-angle-left"></i>
                    </button>
                    <button class="btn btn-link btn-decent pagination-button" [disabled]="!contentsPager.canGoNext" (click)="goNext()">
                        <i class="icon-angle-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</sqx-panel>

<router-outlet></router-outlet>