mirror of https://github.com/Squidex/squidex.git
Browse Source
* Calendar view for contents. * More UI fixes. * Another UI fix. * Localization. * More UI fixes. * Fix ID query. * Title for schema name. * Show only references that can be read. * Test fixed * Reference dropdown fix and asset fix.pull/744/head
Sebastian Stehle
4 years ago
committed by
GitHub
GitHub
54 changed files with 696 additions and 141 deletions
@ -0,0 +1,51 @@ |
|||||
|
// ==========================================================================
|
||||
|
// Squidex Headless CMS
|
||||
|
// ==========================================================================
|
||||
|
// Copyright (c) Squidex UG (haftungsbeschraenkt)
|
||||
|
// All rights reserved. Licensed under the MIT license.
|
||||
|
// ==========================================================================
|
||||
|
|
||||
|
using Microsoft.AspNetCore.Mvc; |
||||
|
using NodaTime; |
||||
|
using Squidex.Domain.Apps.Entities; |
||||
|
using Squidex.Infrastructure.Translations; |
||||
|
using Squidex.Infrastructure.Validation; |
||||
|
|
||||
|
namespace Squidex.Areas.Api.Controllers.Contents.Models |
||||
|
{ |
||||
|
public sealed class AllContentsByGetDto |
||||
|
{ |
||||
|
/// <summary>
|
||||
|
/// The list of ids to query.
|
||||
|
/// </summary>
|
||||
|
[FromQuery(Name = "ids")] |
||||
|
public string? Ids { get; set; } |
||||
|
|
||||
|
/// <summary>
|
||||
|
/// The start of the schedule.
|
||||
|
/// </summary>
|
||||
|
[FromQuery] |
||||
|
public Instant? ScheduledFrom { get; set; } |
||||
|
|
||||
|
/// <summary>
|
||||
|
/// The end of the schedule.
|
||||
|
/// </summary>
|
||||
|
[FromQuery] |
||||
|
public Instant? ScheduledTo { get; set; } |
||||
|
|
||||
|
public Q ToQuery() |
||||
|
{ |
||||
|
if (!string.IsNullOrWhiteSpace(Ids)) |
||||
|
{ |
||||
|
return Q.Empty.WithIds(Ids); |
||||
|
} |
||||
|
|
||||
|
if (ScheduledFrom != null && ScheduledTo != null) |
||||
|
{ |
||||
|
return Q.Empty.WithSchedule(ScheduledFrom.Value, ScheduledTo.Value); |
||||
|
} |
||||
|
|
||||
|
throw new ValidationException(T.Get("contents.invalidAllQuery")); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,48 @@ |
|||||
|
// ==========================================================================
|
||||
|
// Squidex Headless CMS
|
||||
|
// ==========================================================================
|
||||
|
// Copyright (c) Squidex UG (haftungsbeschraenkt)
|
||||
|
// All rights reserved. Licensed under the MIT license.
|
||||
|
// ==========================================================================
|
||||
|
|
||||
|
using NodaTime; |
||||
|
using Squidex.Domain.Apps.Entities; |
||||
|
using Squidex.Infrastructure; |
||||
|
using Squidex.Infrastructure.Translations; |
||||
|
using Squidex.Infrastructure.Validation; |
||||
|
|
||||
|
namespace Squidex.Areas.Api.Controllers.Contents.Models |
||||
|
{ |
||||
|
public sealed class AllContentsByPostDto |
||||
|
{ |
||||
|
/// <summary>
|
||||
|
/// The list of ids to query.
|
||||
|
/// </summary>
|
||||
|
public DomainId[]? Ids { get; set; } |
||||
|
|
||||
|
/// <summary>
|
||||
|
/// The start of the schedule.
|
||||
|
/// </summary>
|
||||
|
public Instant? ScheduledFrom { get; set; } |
||||
|
|
||||
|
/// <summary>
|
||||
|
/// The end of the schedule.
|
||||
|
/// </summary>
|
||||
|
public Instant? ScheduledTo { get; set; } |
||||
|
|
||||
|
public Q ToQuery() |
||||
|
{ |
||||
|
if (Ids?.Length > 0) |
||||
|
{ |
||||
|
return Q.Empty.WithIds(Ids); |
||||
|
} |
||||
|
|
||||
|
if (ScheduledFrom != null && ScheduledTo != null) |
||||
|
{ |
||||
|
return Q.Empty.WithSchedule(ScheduledFrom.Value, ScheduledTo.Value); |
||||
|
} |
||||
|
|
||||
|
throw new ValidationException(T.Get("contents.invalidAllQuery")); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -1,22 +0,0 @@ |
|||||
// ==========================================================================
|
|
||||
// Squidex Headless CMS
|
|
||||
// ==========================================================================
|
|
||||
// Copyright (c) Squidex UG (haftungsbeschraenkt)
|
|
||||
// All rights reserved. Licensed under the MIT license.
|
|
||||
// ==========================================================================
|
|
||||
|
|
||||
using System.Collections.Generic; |
|
||||
using Squidex.Infrastructure; |
|
||||
using Squidex.Infrastructure.Validation; |
|
||||
|
|
||||
namespace Squidex.Areas.Api.Controllers.Contents.Models |
|
||||
{ |
|
||||
public sealed class ContentsIdsQueryDto |
|
||||
{ |
|
||||
/// <summary>
|
|
||||
/// The list of ids to query.
|
|
||||
/// </summary>
|
|
||||
[LocalizedRequired] |
|
||||
public List<DomainId> Ids { get; set; } |
|
||||
} |
|
||||
} |
|
||||
@ -0,0 +1,114 @@ |
|||||
|
<sqx-title message="i18n:contents.calendar"></sqx-title> |
||||
|
|
||||
|
<sqx-layout layout="main" titleText="i18n:contents.calendar" [hideSidebar]="true"> |
||||
|
<ng-container menu> |
||||
|
{{title}} |
||||
|
|
||||
|
<select class="form-select ms-4" [ngModel]="view" (ngModelChange)="changeView($event)" [disabled]="isLoading"> |
||||
|
<option ngValue="day">{{ 'common.daily' | sqxTranslate }}</option> |
||||
|
<option ngValue="week">{{ 'common.weekly' | sqxTranslate }}</option> |
||||
|
<option ngValue="month">{{ 'common.monthly' | sqxTranslate }}</option> |
||||
|
</select> |
||||
|
|
||||
|
<button type="button" class="btn btn-text-secondary btn-navigate ms-2" (click)="goPrev()" [disabled]="isLoading"> |
||||
|
<i class="icon-caret-left"></i> |
||||
|
</button> |
||||
|
<button type="button" class="btn btn-text-secondary btn-navigate ms-2" (click)="goNext()" [disabled]="isLoading"> |
||||
|
<i class="icon-caret-right"></i> |
||||
|
</button> |
||||
|
</ng-container> |
||||
|
|
||||
|
<ng-container content> |
||||
|
<div class="calendar" #calendarContainer></div> |
||||
|
</ng-container> |
||||
|
</sqx-layout> |
||||
|
|
||||
|
<ng-container *sqxModal="contentDialog"> |
||||
|
<sqx-modal-dialog (close)="contentDialog.hide()"> |
||||
|
<ng-container title> |
||||
|
{{ 'common.content' | sqxTranslate }} |
||||
|
</ng-container> |
||||
|
|
||||
|
<ng-container content> |
||||
|
<div *ngIf="content && content.scheduleJob"> |
||||
|
<div class="form-group row"> |
||||
|
<label class="col-4 col-form-label">{{ 'common.id' | sqxTranslate }}</label> |
||||
|
|
||||
|
<div class="col-8"> |
||||
|
<div class="input-group"> |
||||
|
<input readonly class="form-control" name="id" id="id" value="{{content.id}}" #inputId> |
||||
|
|
||||
|
<button type="button" class="btn btn-outline-secondary" [sqxCopy]="inputId"> |
||||
|
<i class="icon-copy"></i> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="form-group form-group-aligned row"> |
||||
|
<label class="col-4 col-form-label">{{ 'common.content' | sqxTranslate }}</label> |
||||
|
|
||||
|
<div class="col-8"> |
||||
|
<a class="truncate" [routerLink]="['../', content.schemaName, content.id]"> |
||||
|
{{createContentName(content)}} |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="form-group form-group-aligned row"> |
||||
|
<label class="col-4 col-form-label">{{ 'common.schema' | sqxTranslate }}</label> |
||||
|
|
||||
|
<div class="col-8"> |
||||
|
<a class="truncate" [routerLink]="['../', content.schemaName]"> |
||||
|
{{content.schemaDisplayName}} |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="form-group form-group-aligned row"> |
||||
|
<label class="col-4 col-form-label">{{ 'common.status' | sqxTranslate }}</label> |
||||
|
|
||||
|
<div class="col-8"> |
||||
|
<sqx-content-status |
||||
|
layout="text" |
||||
|
[status]="content.status" |
||||
|
[statusColor]="content.statusColor" |
||||
|
[small]="true"> |
||||
|
</sqx-content-status> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<hr /> |
||||
|
|
||||
|
<div class="form-group form-group-aligned row"> |
||||
|
<label class="col-4 col-form-label">{{ 'contents.scheduledToLabel' | sqxTranslate }}</label> |
||||
|
|
||||
|
<div class="col-8"> |
||||
|
<sqx-content-status |
||||
|
layout="text" |
||||
|
[status]="content.scheduleJob.status" |
||||
|
[statusColor]="content.scheduleJob.color" |
||||
|
[small]="true"> |
||||
|
</sqx-content-status> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="form-group form-group-aligned row"> |
||||
|
<label class="col-4 col-form-label">{{ 'contents.scheduledAt' | sqxTranslate }}</label> |
||||
|
|
||||
|
<div class="col-8"> |
||||
|
{{content.scheduleJob.dueTime | sqxFullDateTime}} |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="form-group form-group-aligned row"> |
||||
|
<label class="col-4 col-form-label">{{ 'contents.scheduledBy' | sqxTranslate }}</label> |
||||
|
|
||||
|
<div class="col-8"> |
||||
|
<img class="user-picture" [src]="content.scheduleJob.scheduledBy | sqxUserPictureRef"> {{content.scheduleJob.scheduledBy | sqxUserNameRef}} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
</sqx-modal-dialog> |
||||
|
</ng-container> |
||||
@ -0,0 +1,24 @@ |
|||||
|
:host ::ng-deep { |
||||
|
.tui-full-calendar-weekday-schedule-bullet { |
||||
|
top: 10px !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.calendar { |
||||
|
@include absolute(-1px, 0, 0, 0); |
||||
|
} |
||||
|
|
||||
|
.form-select { |
||||
|
display: inline-block; |
||||
|
white-space: normal; |
||||
|
width: auto; |
||||
|
} |
||||
|
|
||||
|
.form-group-aligned { |
||||
|
align-items: center; |
||||
|
|
||||
|
.col-form-label { |
||||
|
padding-bottom: 0; |
||||
|
padding-top: 0; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,210 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core'; |
||||
|
import { AppsState, ContentDto, ContentsService, DateTime, DialogModel, getContentValue, LanguageDto, LanguagesState, LocalizerService, ResourceLoaderService } from '@app/shared'; |
||||
|
|
||||
|
declare const tui: any; |
||||
|
|
||||
|
type ViewMode = 'day' | 'week' | 'month'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-calendar-page', |
||||
|
styleUrls: ['./calendar-page.component.scss'], |
||||
|
templateUrl: './calendar-page.component.html', |
||||
|
}) |
||||
|
export class CalendarPageComponent implements AfterViewInit, OnDestroy { |
||||
|
private calendar: any; |
||||
|
private language: LanguageDto; |
||||
|
|
||||
|
@ViewChild('calendarContainer', { static: false }) |
||||
|
public calendarContainer: ElementRef; |
||||
|
|
||||
|
public view: ViewMode = 'month'; |
||||
|
|
||||
|
public content?: ContentDto; |
||||
|
public contentDialog = new DialogModel(); |
||||
|
|
||||
|
public title: string; |
||||
|
|
||||
|
public isLoading: boolean; |
||||
|
|
||||
|
constructor( |
||||
|
private readonly appsState: AppsState, |
||||
|
private readonly changeDetector: ChangeDetectorRef, |
||||
|
private readonly contentsService: ContentsService, |
||||
|
private readonly resourceLoader: ResourceLoaderService, |
||||
|
private readonly languagesState: LanguagesState, |
||||
|
private readonly localizer: LocalizerService, |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
public ngOnDestroy() { |
||||
|
this.calendar?.destroy(); |
||||
|
} |
||||
|
|
||||
|
public ngOnInit() { |
||||
|
this.language = this.languagesState.snapshot.languages.find(x => x.language.isMaster)!.language; |
||||
|
} |
||||
|
|
||||
|
public ngAfterViewInit() { |
||||
|
Promise.all([ |
||||
|
this.resourceLoader.loadLocalStyle('dependencies/tui-calendar/tui-calendar.min.css'), |
||||
|
this.resourceLoader.loadLocalScript('dependencies/tui-calendar/tui-code-snippet.min.js'), |
||||
|
this.resourceLoader.loadLocalScript('dependencies/tui-calendar/tui-calendar.min.js'), |
||||
|
]).then(() => { |
||||
|
const Calendar = tui.Calendar; |
||||
|
|
||||
|
this.calendar = new Calendar(this.calendarContainer.nativeElement, { |
||||
|
taskView: false, |
||||
|
scheduleView: ['time'], |
||||
|
defaultView: 'month', |
||||
|
isReadOnly: true, |
||||
|
...getLocalizationSettings(), |
||||
|
}); |
||||
|
|
||||
|
this.calendar.on('clickSchedule', (event: any) => { |
||||
|
this.content = event.schedule.raw; |
||||
|
this.contentDialog.show(); |
||||
|
|
||||
|
this.changeDetector.detectChanges(); |
||||
|
}); |
||||
|
|
||||
|
this.load(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public changeView(view: ViewMode) { |
||||
|
this.view = view; |
||||
|
|
||||
|
this.calendar?.changeView(view); |
||||
|
|
||||
|
this.load(); |
||||
|
} |
||||
|
|
||||
|
public goPrev() { |
||||
|
this.calendar?.prev(); |
||||
|
|
||||
|
this.load(); |
||||
|
} |
||||
|
|
||||
|
public goNext() { |
||||
|
this.calendar?.next(); |
||||
|
|
||||
|
this.load(); |
||||
|
} |
||||
|
|
||||
|
private load() { |
||||
|
if (!this.calendar) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
const scheduledFrom = new DateTime(this.calendar.getDateRangeStart().toDate()); |
||||
|
const scheduledTo = new DateTime(this.calendar.getDateRangeEnd().toDate()); |
||||
|
|
||||
|
this.updateRange(scheduledFrom, scheduledTo); |
||||
|
|
||||
|
if (this.isLoading) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
this.isLoading = true; |
||||
|
|
||||
|
this.contentsService.getAllContents(this.appsState.appName, { |
||||
|
scheduledFrom: scheduledFrom.toISOString(), |
||||
|
scheduledTo: scheduledTo.toISOString(), |
||||
|
}).subscribe({ |
||||
|
next: contents => { |
||||
|
this.calendar.clear(); |
||||
|
this.calendar.createSchedules(contents.items.map(x => ({ |
||||
|
id: x.id, |
||||
|
borderColor: x.scheduleJob!.color, |
||||
|
color: x.scheduleJob?.color, |
||||
|
calendarId: '1', |
||||
|
category: 'time', |
||||
|
end: x.scheduleJob?.dueTime.toISOString(), |
||||
|
raw: x, |
||||
|
start: x.scheduleJob?.dueTime.toISOString(), |
||||
|
state: 'free', |
||||
|
title: `[${x.schemaDisplayName}] ${this.createContentName(x)}`, |
||||
|
}))); |
||||
|
}, |
||||
|
complete: () => { |
||||
|
this.isLoading = false; |
||||
|
}, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private updateRange(from: DateTime, to: DateTime) { |
||||
|
switch (this.view) { |
||||
|
case 'month': { |
||||
|
this.title = from.toStringFormat('LLLL yyyy'); |
||||
|
break; |
||||
|
} |
||||
|
case 'day': { |
||||
|
this.title = from.toStringFormat('PPPP'); |
||||
|
break; |
||||
|
} |
||||
|
case 'week': { |
||||
|
this.title = `${from.toStringFormat('PP')} - ${to.toStringFormat('PP')}`; |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public createContentName(content: ContentDto) { |
||||
|
const name = |
||||
|
content.referenceFields |
||||
|
.map(f => getContentValue(content, this.language, f, false)) |
||||
|
.map(v => v.formatted) |
||||
|
.filter(v => !!v) |
||||
|
.join(', ') |
||||
|
|| this.localizer.getOrKey('common.noValue'); |
||||
|
|
||||
|
return name; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
let localizedValues: any; |
||||
|
|
||||
|
function getLocalizationSettings() { |
||||
|
if (!localizedValues) { |
||||
|
localizedValues = { |
||||
|
month: { |
||||
|
daynames: [], |
||||
|
}, |
||||
|
week: { |
||||
|
daynames: [], |
||||
|
}, |
||||
|
template: { |
||||
|
timegridDisplayPrimaryTime: (time: any) => { |
||||
|
return new DateTime(new Date(2020, 1, 1, time.hour, time.minutes, 0)).toStringFormat('p'); |
||||
|
}, |
||||
|
timegridCurrentTime: (timezone: any) => { |
||||
|
const templates = []; |
||||
|
|
||||
|
if (timezone.dateDifference) { |
||||
|
templates.push(`[${timezone.dateDifferenceSign}${timezone.dateDifference}]<br>`); |
||||
|
} |
||||
|
|
||||
|
templates.push(new DateTime(timezone.hourmarker.toDate()).toStringFormat('p')); |
||||
|
|
||||
|
return templates.join(''); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
for (let i = 1; i <= 7; i++) { |
||||
|
const weekDay = new DateTime(new Date(2020, 10, i, 12, 0, 0)); |
||||
|
|
||||
|
localizedValues.month.daynames.push(weekDay.toStringFormat('EEE')); |
||||
|
localizedValues.week.daynames.push(weekDay.toStringFormat('EEE')); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return localizedValues; |
||||
|
} |
||||
Loading…
Reference in new issue