From 6b0b5c0e9ca4032984d1af5cc776c85b93fc2bd0 Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Sun, 16 Apr 2017 14:26:30 +0200
Subject: [PATCH] Improve String Representation for Content Lists. #12

---
 .../content/content-field.component.html      | 18 +++++-----
 .../pages/contents/content-item.component.ts  | 35 +++++++++++++++++--
 src/Squidex/app/theme/_lists.scss             |  4 +++
 3 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/src/Squidex/app/features/content/pages/content/content-field.component.html b/src/Squidex/app/features/content/pages/content/content-field.component.html
index 815d5f232..19855dc0b 100644
--- a/src/Squidex/app/features/content/pages/content/content-field.component.html
+++ b/src/Squidex/app/features/content/pages/content/content-field.component.html
@@ -46,6 +46,12 @@
                             <div *ngSwitchCase="'Textarea'">
                                 <textarea class="form-control" [formControlName]="language"></textarea>
                             </div>
+                            <div *ngSwitchCase="'RichText'">
+                                <sqx-rich-editor [formControlName]="language"></sqx-rich-editor>
+                            </div>
+                            <div *ngSwitchCase="'Markdown'">
+                                <sqx-markdown-editor [formControlName]="language"></sqx-markdown-editor>
+                            </div>
                             <div *ngSwitchCase="'Dropdown'">
                                 <select class="form-control" [formControlName]="language">
                                     <option *ngFor="let value of field.properties.allowedValues" [ngValue]="value">{{value}}</option>
@@ -58,16 +64,13 @@
                                     </label>
                                 </div>
                             </div>
-                            <div *ngSwitchCase="'RichText'">
-                                <sqx-rich-editor [formControlName]="language"></sqx-rich-editor>
-                            </div>
-                            <div *ngSwitchCase="'Markdown'">
-                                <sqx-markdown-editor [formControlName]="language"></sqx-markdown-editor>
-                            </div>
                         </div>
                     </div>
                     <div *ngSwitchCase="'Boolean'">
                         <div [ngSwitch]="field.properties.editor">
+                            <div *ngSwitchCase="'Toggle'">
+                                <sqx-toggle [formControlName]="language"></sqx-toggle>
+                            </div>
                             <div *ngSwitchCase="'Checkbox'">
                                 <div class="form-check form-check-inline">
                                     <label class="form-check-label">
@@ -75,9 +78,6 @@
                                     </label>
                                 </div>
                             </div>
-                            <div *ngSwitchCase="'Toggle'">
-                                <sqx-toggle [formControlName]="language"></sqx-toggle>
-                            </div>
                         </div>
                     </div>
                     <div *ngSwitchCase="'DateTime'">
diff --git a/src/Squidex/app/features/content/pages/contents/content-item.component.ts b/src/Squidex/app/features/content/pages/contents/content-item.component.ts
index 6c1a2db46..b38eaf408 100644
--- a/src/Squidex/app/features/content/pages/contents/content-item.component.ts
+++ b/src/Squidex/app/features/content/pages/contents/content-item.component.ts
@@ -12,6 +12,7 @@ import {
     AppLanguageDto,
     AppsStoreService,
     ContentDto,
+    DateTime,
     fadeAnimation,
     FieldDto,
     ModalView,
@@ -82,11 +83,39 @@ export class ContentItemComponent extends AppComponentBase implements OnInit, On
             return '';
         }
 
-        if (field.properties.isLocalizable) {
-            return contentField[this.language.iso2Code];
+        const properties = field.properties;
+
+        let value: any;
+
+        if (properties.isLocalizable) {
+            value = contentField[this.language.iso2Code];
         } else {
-            return contentField['iv'];
+            value = contentField['iv'];
         }
+
+        if (value) {
+            if (properties.fieldType === 'Json') {
+                value = 'Json';
+            } else if (properties.fieldType === 'Geolocation') {
+                value = `${value.longitude}, ${value.latitude}`;
+            } else if (properties.fieldType === 'Boolean') {
+                value = value ? '✔' : '-';
+            } else if (properties.fieldType === 'DateTime') {
+                try {
+                    const parsed = DateTime.parseISO_UTC(value);
+
+                    if (properties['editor'] === 'Date') {
+                        value = parsed.toStringFormat('YYYY-MM-DD');
+                    } else {
+                        value = parsed.toStringFormat('YYYY-MM-DD hh:mm:ss');
+                    }
+                } catch (ex) {
+                    value = value;
+                }
+            }
+        }
+
+        return value;
     }
 }
 
diff --git a/src/Squidex/app/theme/_lists.scss b/src/Squidex/app/theme/_lists.scss
index ef6b7d53e..2cb1a81d5 100644
--- a/src/Squidex/app/theme/_lists.scss
+++ b/src/Squidex/app/theme/_lists.scss
@@ -55,6 +55,10 @@
                 background: darken($color-table, 1%);
             }
 
+            &:focus {
+                outline: none;
+            }
+
             &.active {
                 background: $color-theme-blue;
                 border-color: $color-theme-blue;