Improve String Representation for Content Lists. #12

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'">

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;
     }
 }
 

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;