mirror of https://github.com/Squidex/squidex.git
Sebastian
8 years ago
14 changed files with 356 additions and 92 deletions
@ -0,0 +1,40 @@ |
|||||
|
<div dnd-droppable class="droppable category" [allowDrop]="allowDrop" (onDropSuccess)="changeCategory($event.dragData)"> |
||||
|
<div class="drop-indicator"></div> |
||||
|
|
||||
|
<div class="header clearfix"> |
||||
|
<a class="btn btn-sm btn-link" (click)="toggle()"> |
||||
|
<i [class.icon-caret-right]="isOpen" [class.icon-caret-down]="!isOpen"></i> |
||||
|
</a> |
||||
|
|
||||
|
<h3>{{displayName}} ({{schemasForCategory.length}})</h3> |
||||
|
|
||||
|
|
||||
|
<a class="btn btn-sm btn-link float-right" *ngIf="schemasForCategory.length === 0 && !isReadonly" (click)="removing.emit()"> |
||||
|
<i class="icon-bin"></i> |
||||
|
</a> |
||||
|
</div> |
||||
|
|
||||
|
<ul class="nav nav-panel nav-dark nav-dark-bordered flex-column" *ngIf="isOpen" @fade> |
||||
|
<li class="nav-item" *ngFor="let schema of schemasFiltered; trackBy: trackBySchema" dnd-draggable [dragEnabled]="!isReadonly" [dragData]="schema"> |
||||
|
<a class="nav-link" [routerLink]="[schema.name]" routerLinkActive="active"> |
||||
|
<div class="row" *ngIf="!isReadonly"> |
||||
|
<div class="col col-4"> |
||||
|
<span class="schema-name schema-name-accent">{{schema.displayName}}</span> |
||||
|
</div> |
||||
|
<div class="col col-4"> |
||||
|
<span class="schema-user"> |
||||
|
<i class="icon-user"></i> {{schema.lastModifiedBy | sqxUserNameRef}} |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="col col-4 schema-modified"> |
||||
|
<small class="item-modified">{{schema.lastModified | sqxFromNow}}</small> |
||||
|
|
||||
|
<span class="item-published" [class.unpublished]="!schema.isPublished"></span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<span class="schema-name" *ngIf="isReadonly">{{schema.displayName}}</span> |
||||
|
</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
@ -0,0 +1,85 @@ |
|||||
|
@import '_mixins'; |
||||
|
@import '_vars'; |
||||
|
|
||||
|
$drag-margin: -8px; |
||||
|
|
||||
|
h3 { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
width: 2rem; |
||||
|
} |
||||
|
|
||||
|
.category { |
||||
|
margin-bottom: 1rem; |
||||
|
} |
||||
|
|
||||
|
.dnd-drag-start { |
||||
|
border: 0; |
||||
|
} |
||||
|
|
||||
|
.droppable { |
||||
|
& { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
&.dnd-drag-over, |
||||
|
&.dnd-drag-enter { |
||||
|
& { |
||||
|
border: 0; |
||||
|
} |
||||
|
|
||||
|
.drop-indicator { |
||||
|
display: block; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.drop-indicator { |
||||
|
@include absolute($drag-margin, $drag-margin, $drag-margin, $drag-margin); |
||||
|
border: 2px dashed $color-dark-black; |
||||
|
background: none; |
||||
|
display: none; |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.header { |
||||
|
margin-left: -1rem; |
||||
|
} |
||||
|
|
||||
|
.nav-link { |
||||
|
padding-top: .75rem; |
||||
|
padding-bottom: .75rem; |
||||
|
} |
||||
|
|
||||
|
.schema { |
||||
|
&-name { |
||||
|
@include truncate; |
||||
|
} |
||||
|
|
||||
|
&-name-accent { |
||||
|
color: $color-dark-foreground; |
||||
|
} |
||||
|
|
||||
|
&-modified { |
||||
|
text-align: right; |
||||
|
width: auto; |
||||
|
white-space: nowrap; |
||||
|
padding-left: 0; |
||||
|
} |
||||
|
|
||||
|
&-user { |
||||
|
@include border-radius(1px); |
||||
|
@include truncate; |
||||
|
display: inline-block; |
||||
|
background: $color-dark2-control; |
||||
|
padding: .1rem .25rem; |
||||
|
font-size: .8rem; |
||||
|
font-weight: normal; |
||||
|
margin-left: 10px; |
||||
|
margin-bottom: 2px; |
||||
|
max-width: 100%; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,99 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; |
||||
|
|
||||
|
import { |
||||
|
fadeAnimation, |
||||
|
ImmutableArray, |
||||
|
LocalStoreService, |
||||
|
SchemaDetailsDto, |
||||
|
SchemaDto, |
||||
|
SchemasState, |
||||
|
Types |
||||
|
} from '@app/shared/internal'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-schema-category', |
||||
|
styleUrls: ['./schema-category.component.scss'], |
||||
|
templateUrl: './schema-category.component.html', |
||||
|
animations: [ |
||||
|
fadeAnimation |
||||
|
] |
||||
|
}) |
||||
|
export class SchemaCategoryComponent implements OnInit, OnChanges { |
||||
|
@Output() |
||||
|
public removing = new EventEmitter(); |
||||
|
|
||||
|
@Input() |
||||
|
public name: string; |
||||
|
|
||||
|
@Input() |
||||
|
public isReadonly: boolean; |
||||
|
|
||||
|
@Input() |
||||
|
public schemasFilter: string; |
||||
|
|
||||
|
@Input() |
||||
|
public schemas: ImmutableArray<SchemaDto>; |
||||
|
|
||||
|
public displayName: string; |
||||
|
|
||||
|
public schemasFiltered: ImmutableArray<SchemaDto>; |
||||
|
public schemasForCategory: ImmutableArray<SchemaDto>; |
||||
|
|
||||
|
public isOpen = true; |
||||
|
|
||||
|
public allowDrop = (schema: any) => { |
||||
|
return (Types.is(schema, SchemaDto) || Types.is(schema, SchemaDetailsDto)) && !this.isSameCategory(schema); |
||||
|
} |
||||
|
|
||||
|
constructor( |
||||
|
private readonly localStore: LocalStoreService, |
||||
|
private readonly schemasState: SchemasState |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
public ngOnInit() { |
||||
|
this.isOpen = this.localStore.get(`schema-category.${name}`) !== 'false'; |
||||
|
} |
||||
|
|
||||
|
public toggle() { |
||||
|
this.isOpen = !this.isOpen; |
||||
|
|
||||
|
this.localStore.set(`schema-category.${name}`, this.isOpen + ''); |
||||
|
} |
||||
|
|
||||
|
public ngOnChanges(changes: SimpleChanges): void { |
||||
|
if (changes['schemas'] || changes['schemasFilter']) { |
||||
|
const query = this.schemasFilter; |
||||
|
|
||||
|
this.schemasForCategory = this.schemas.filter(x => this.isSameCategory(x)); |
||||
|
this.schemasFiltered = this.schemasForCategory.filter(x => !query || x.name.indexOf(query) >= 0); |
||||
|
} |
||||
|
|
||||
|
if (changes['name']) { |
||||
|
if (!this.name || this.name.length === 0) { |
||||
|
this.displayName = 'All Schemas'; |
||||
|
} else { |
||||
|
this.displayName = this.name; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private isSameCategory(schema: SchemaDto): boolean { |
||||
|
return (!this.name && !schema.category) || schema.category === this.name; |
||||
|
} |
||||
|
|
||||
|
public changeCategory(schema: SchemaDto) { |
||||
|
this.schemasState.changeCategory(schema, this.name).onErrorResumeNext().subscribe(); |
||||
|
} |
||||
|
|
||||
|
public trackBySchema(index: number, schema: SchemaDto) { |
||||
|
return schema.id; |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue