Closes #188

src/Squidex.Infrastructure/States/StateFactory.cs

@@ -16,7 +16,7 @@ namespace Squidex.Infrastructure.States
 {
     public sealed class StateFactory : DisposableObjectBase, IExternalSystem, IStateFactory
     {
-        private static readonly TimeSpan CacheDuration = TimeSpan.FromMinutes(10);
+        private static readonly TimeSpan CacheDuration = TimeSpan.FromMinutes(1);
         private readonly IPubSub pubSub;
         private readonly IStateStore store;
         private readonly IMemoryCache statesCache;

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

@@ -41,6 +41,13 @@
 
         <div class="panel-main">
             <div class="panel-content panel-content-scroll">
+                <div class="panel-alert panel-alert-danger" *ngIf="contentOld">
+                    <div class="float-right">
+                        <a class="force" (click)="showLatest()">View latest</a>
+                    </div>
+                    Viewing <strong>{{content.lastModifiedBy | sqxUserNameRef:null}}'s</strong> changes of {{content.lastModified | sqxShortDate}}.
+                </div>
+
                 <div *ngFor="let field of schema.fields">
                     <sqx-content-field [field]="field" [fieldForm]="contentForm.controls[field.name]" [languages]="languages" [contentFormSubmitted]="contentFormSubmitted"></sqx-content-field>
                 </div>

src/Squidex/app/features/content/pages/content/content-page.component.ts

@@ -43,6 +43,7 @@ export class ContentPageComponent implements CanComponentDeactivate, OnDestroy,
     private contentUnpublishedSubscription: Subscription;
     private contentDeletedSubscription: Subscription;
     private contentVersionSelectedSubscription: Subscription;
+    private contentOld: ContentDto;
 
     public schema: SchemaDetailsDto;
 
@@ -68,7 +69,6 @@ export class ContentPageComponent implements CanComponentDeactivate, OnDestroy,
     }
 
     public ngOnInit() {
-
         this.contentVersionSelectedSubscription =
             this.ctx.bus.of(ContentVersionSelected)
                 .subscribe(message => {
@@ -121,6 +121,14 @@ export class ContentPageComponent implements CanComponentDeactivate, OnDestroy,
         }
     }
 
+    public showLatest() {
+        this.content = this.contentOld;
+        this.contentOld = null;
+
+        this.emitContentUpdated(this.content);
+        this.populateContentForm();
+    }
+
     public saveAndPublish() {
         this.saveContent(true);
     }
@@ -176,6 +184,12 @@ export class ContentPageComponent implements CanComponentDeactivate, OnDestroy,
         if (!this.isNewMode && this.content) {
            this.contentsService.getVersionData(this.ctx.appName, this.schema.name, this.content.id, new Version(version.toString()))
                 .subscribe(dto => {
+                    if (this.content.version.value !== version.toString()) {
+                        this.contentOld = this.content;
+                    } else {
+                        this.contentOld = null;
+                    }
+
                     this.content = this.content.setData(dto);
 
                     this.ctx.notifyInfo('Content version loaded successfully.');

src/Squidex/app/framework/angular/date-time.pipes.spec.ts

@@ -8,6 +8,7 @@
 import { DateTime, Duration } from './../';
 
 import {
+    DatePipe,
     DayOfWeekPipe,
     DayPipe,
     DurationPipe,
@@ -76,6 +77,17 @@ describe('DayOfWeekPipe', () => {
     });
 });
 
+describe('DatePipe', () => {
+    it('should format to two digit day number and short month name and year', () => {
+        const pipe = new DatePipe();
+
+        const actual = pipe.transform(dateTime);
+        const expected = '03. Oct 2013';
+
+        expect(actual).toBe(expected);
+    });
+});
+
 describe('ShortDatePipe', () => {
     it('should format to two digit day number and short month name', () => {
         const pipe = new ShortDatePipe();

src/Squidex/app/framework/angular/date-time.pipes.ts

@@ -20,6 +20,16 @@ export class ShortDatePipe implements PipeTransform {
     }
 }
 
+@Pipe({
+    name: 'sqxDate',
+    pure: true
+})
+export class DatePipe implements PipeTransform {
+    public transform(value: DateTime): any {
+        return value.toStringFormat('DD. MMM YYYY');
+    }
+}
+
 @Pipe({
     name: 'sqxMonth',
     pure: true

src/Squidex/app/framework/module.ts

@@ -19,6 +19,7 @@ import {
     ConfirmClickDirective,
     ControlErrorsComponent,
     CopyDirective,
+    DatePipe,
     DateTimeEditorComponent,
     DayOfWeekPipe,
     DayPipe,
@@ -87,6 +88,7 @@ import {
         ControlErrorsComponent,
         CopyDirective,
         DateTimeEditorComponent,
+        DatePipe,
         DayOfWeekPipe,
         DayPipe,
         DialogRendererComponent,
@@ -135,6 +137,7 @@ import {
         ConfirmClickDirective,
         ControlErrorsComponent,
         CopyDirective,
+        DatePipe,
         DateTimeEditorComponent,
         DayOfWeekPipe,
         DayPipe,

src/Squidex/app/shared/services/users-provider.service.ts

@@ -40,7 +40,7 @@ export class UsersProviderService {
 
         return result
             .map(dto => {
-                if (this.authService.user && dto.id === this.authService.user.id) {
+                if (me && this.authService.user && dto.id === this.authService.user.id) {
                     dto = new UserDto(dto.id, dto.email, me, dto.pictureUrl, dto.isLocked);
                 }
                 return dto;

src/Squidex/app/theme/_bootstrap.scss

@@ -77,6 +77,14 @@ a {
             color: inherit;
         }
     }
+
+    &.force {
+        &:hover {
+            text-decoration: underline !important;
+            cursor: pointer;
+            color: inherit;
+        }
+    }
 }
 
 //

src/Squidex/app/theme/_common.scss

@@ -20,11 +20,6 @@ body {
     color: $color-theme-blue-dark;
 }
 
-// Marker ref for history panel. Must be placed here, because element is created dynamically.
-.marker-ref {
-    color: $color-theme-blue-dark;
-}
-
 // Common style for user email.
 .user-email {
     font-style: italic;

src/Squidex/app/theme/_panels.scss

@@ -120,12 +120,12 @@
 
         a {
             color: $color-dark-foreground;
-        }
 
-        a,
-        a:hover {
+            &,
+            &:hover {
                 text-decoration: underline;
             }
+        }
 
         &-success {
             background: $color-theme-green-dark;