squidex/src/Squidex/app/features/content/shared/content-item.component.html

<td class="cell-select" *ngIf="!isReference" (click)="shouldStop($event)">
    <input type="checkbox" class="form-control"
        [ngModel]="selected" 
        (ngModelChange)="selectedChange.emit($event);"
        (click)="$event.stopPropagation()" />
</td>

<td class="cell-auto" *ngFor="let field of schema.listFields; let i = index" (click)="shouldStop($event)">
    <div *ngIf="field.properties['inlineEditable'] && !isReadOnly" [formGroup]="patchForm.form" (click)="$event.stopPropagation()">
        <div [ngSwitch]="field.properties.fieldType">
            <div *ngSwitchCase="'Number'">
                <div [ngSwitch]="field.properties['editor']">
                    <div *ngSwitchCase="'Input'">
                        <input class="form-control" type="number" [formControlName]="field.name" [placeholder]="field.displayPlaceholder" />
                    </div>
                    <div *ngSwitchCase="'Dropdown'">
                        <select class="form-control" [formControlName]="field.name">
                            <option [ngValue]="null"></option>
                            <option *ngFor="let value of field.properties['allowedValues']" [ngValue]="value">{{value}}</option>
                        </select>
                    </div>
                </div>
            </div>
            <div *ngSwitchCase="'String'">
                <div [ngSwitch]="field.properties['editor']">
                    <div *ngSwitchCase="'Input'">
                        <input class="form-control" type="text" [formControlName]="field.name" [placeholder]="field.displayPlaceholder" />
                    </div>
                    <div *ngSwitchCase="'Slug'">
                        <input class="form-control" type="text" [formControlName]="field.name" [placeholder]="field.displayPlaceholder" sqxSlugifyInput />
                    </div>
                    <div *ngSwitchCase="'Dropdown'">
                        <select class="form-control" [formControlName]="field.name">
                            <option [ngValue]="null"></option>
                            <option *ngFor="let value of field.properties['allowedValues']" [ngValue]="value">{{value}}</option>
                        </select>
                    </div>
                </div>
            </div>
            <div *ngSwitchCase="'Boolean'">
                <div [ngSwitch]="field.properties['editor']">
                    <div *ngSwitchCase="'Toggle'">
                        <sqx-toggle [formControlName]="field.name"></sqx-toggle>
                    </div>
                    <div *ngSwitchCase="'Checkbox'">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" [formControlName]="field.name" sqxIndeterminateValue />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div *ngIf="!field.properties['inlineEditable'] || isReadOnly" class="truncate">
        {{values[i]}}
    </div>
</td>
<td class="cell-time" (click)="shouldStop($event)">
    <ng-container *ngIf="!content.scheduledTo">
        <span class="content-status content-status-{{content.status | lowercase}}" #statusIcon>
            <i class="icon-circle"></i>
        </span>
    
        <sqx-tooltip [target]="statusIcon">{{content.status}}</sqx-tooltip>
    </ng-container>

    <ng-container *ngIf="content.scheduledTo">
        <span class="content-status content-status-{{content.scheduledTo | lowercase}}" #statusIcon>
            <i class="icon-clock"></i>
        </span>
    
        <sqx-tooltip [target]="statusIcon">Will be set to '{{content.scheduledTo}}' at {{content.scheduledAt | sqxFullDateTime}}</sqx-tooltip>
    </ng-container>
    
    <small class="item-modified">{{content.lastModified | sqxFromNow}}</small>
</td>

<td class="cell-user" *ngIf="patchForm.form.dirty" (click)="shouldStop($event)">
    <button type="button" class="btn btn-success" (click)="save(); $event.stopPropagation()">
        <i class="icon-checkmark"></i>
    </button>
</td>
<td class="cell-actions" *ngIf="patchForm.form.dirty" (click)="shouldStop($event)">
    <button type="button" class="btn btn-link btn-secondary btn-cancel" (click)="save(); $event.stopPropagation()">
        <i class="icon-close"></i>
    </button>
</td>

<td class="cell-user" *ngIf="patchForm.form.pristine" (click)="shouldStop($event)">
    <img class="user-picture" [attr.title]="content.lastModifiedBy | sqxUserNameRef" [attr.src]="content.lastModifiedBy | sqxUserPictureRef" />
</td>

<td class="cell-actions" *ngIf="!isReadOnly && patchForm.form.pristine" (click)="shouldStop($event)">
    <div class="dropdown dropdown-options" *ngIf="content">
        <button type="button" class="btn btn-link btn-secondary" (click)="dropdown.toggle(); $event.stopPropagation()" [class.active]="dropdown.isOpen | async" #optionsButton>
            <i class="icon-dots"></i>
        </button>
        <div class="dropdown-menu" *sqxModalView="dropdown" [sqxModalTarget]="optionsButton" @fade>
            <a class="dropdown-item" (click)="publishing.emit(); $event.stopPropagation()" *ngIf="content.status === 'Draft'">
                Publish
            </a>
            <a class="dropdown-item" (click)="unpublishing.emit(); $event.stopPropagation()" *ngIf="content.status === 'Published'">
                Unpublish
            </a>
            <a class="dropdown-item" (click)="archiving.emit(); $event.stopPropagation()" *ngIf="content.status !== 'Archived'">
                Archive
            </a>
            <a class="dropdown-item" (click)="restoring.emit(); $event.stopPropagation()" *ngIf="content.status === 'Archived'">
                Restore
            </a>
            <a class="dropdown-item dropdown-item-delete"
                (sqxConfirmClick)="deleting.emit()"
                confirmTitle="Delete content" 
                confirmText="Do you really want to delete the content?">
                Delete
            </a>
        </div>
    </div>
</td>
<td class="cell-actions" *ngIf="isReference" (click)="shouldStop($event)">
    <button type="button" class="btn btn-link btn-secondary" (click)="deleting.emit(); $event.stopPropagation()">
        <i class="icon-close"></i>
    </button>
</td>