feat(admin-ui): Update dashboard styles

packages/admin-ui/src/lib/core/src/shared/components/card/card.component.html

@@ -1,5 +1,10 @@
 <div class="card-container" [class.padding-x]="paddingX">
-    <div *ngIf="title" class="title">{{ title }}</div>
+    <div *ngIf="title || controlsTemplate" class="title-row">
+        <span class="title">{{ title }}</span>
+        <div class="controls" *ngIf="controlsTemplate">
+            <ng-container *ngTemplateOutlet="controlsTemplate"></ng-container>
+        </div>
+    </div>
     <div class="contents">
         <ng-content></ng-content>
     </div>

packages/admin-ui/src/lib/core/src/shared/components/card/card.component.scss

@@ -20,9 +20,14 @@
     }
 }
 
+.title-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--card-padding);
+}
 .title {
     font-size: var(--font-size-base);
-    margin-bottom: var(--card-padding);
     padding: 0 var(--card-padding);
 }
 .padding-x .title {

packages/admin-ui/src/lib/core/src/shared/components/card/card.component.ts

@@ -1,4 +1,16 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    ContentChild,
+    Directive,
+    Input,
+    TemplateRef,
+} from '@angular/core';
+
+@Directive({
+    selector: '[vdrCardControls]',
+})
+export class CardControlsDirective {}
 
 @Component({
     selector: 'vdr-card',
@@ -9,4 +21,5 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 export class CardComponent {
     @Input() title: string;
     @Input() paddingX = true;
+    @ContentChild(CardControlsDirective, { read: TemplateRef }) controlsTemplate: TemplateRef<any>;
 }

packages/admin-ui/src/lib/core/src/shared/shared.module.ts

@@ -164,7 +164,7 @@ import { StateI18nTokenPipe } from './pipes/state-i18n-token.pipe';
 import { StringToColorPipe } from './pipes/string-to-color.pipe';
 import { TimeAgoPipe } from './pipes/time-ago.pipe';
 import { CanDeactivateDetailGuard } from './providers/routing/can-deactivate-detail-guard';
-import { CardComponent } from './components/card/card.component';
+import { CardComponent, CardControlsDirective } from './components/card/card.component';
 import { ZoneSelectorComponent } from './components/zone-selector/zone-selector.component';
 
 const IMPORTS = [
@@ -302,6 +302,7 @@ const DECLARATIONS = [
     PageDetailLayoutComponent,
     PageDetailSidebarComponent,
     CardComponent,
+    CardControlsDirective,
     ZoneSelectorComponent,
 ];
 

packages/admin-ui/src/lib/dashboard/src/components/dashboard-widget/dashboard-widget.component.html

@@ -1,13 +1,8 @@
-<div class="card">
-    <div class="card-header">
-        <div class="title">
-            <ng-container *ngIf="widgetConfig.title as title">{{ title | translate }}</ng-container>
-        </div>
-        <div class="controls">
-            <ng-content></ng-content>
-        </div>
-    </div>
-    <div class="card-block">
+<vdr-card [title]="widgetConfig.title ?? '' | translate">
+    <ng-template vdrCardControls>
+        <ng-content></ng-content>
+    </ng-template>
+    <div class="card-span">
         <ng-template #portal></ng-template>
     </div>
-</div>
+</vdr-card>

packages/admin-ui/src/lib/dashboard/src/components/dashboard/dashboard.component.html

@@ -1,69 +1,69 @@
-<div class="widget-header">
-    <vdr-dropdown>
-        <button class="btn btn-secondary btn-sm" vdrDropdownTrigger>
-            <clr-icon shape="plus"></clr-icon>
-            {{ 'dashboard.add-widget' | translate }}
-        </button>
-        <vdr-dropdown-menu vdrPosition="bottom-right">
-            <button
-                class="button"
-                vdrDropdownItem
-                *ngFor="let id of availableWidgetIds$ | async"
-                (click)="addWidget(id)"
-            >
-                {{ id }}
+<vdr-page-block>
+    <div class="widget-header">
+        <vdr-dropdown>
+            <button class="btn btn-secondary btn-sm" vdrDropdownTrigger>
+                <clr-icon shape="plus"></clr-icon>
+                {{ 'dashboard.add-widget' | translate }}
             </button>
-        </vdr-dropdown-menu>
-    </vdr-dropdown>
-</div>
-<div cdkDropListGroup>
-    <div
-        class="clr-row dashboard-row"
-        *ngFor="let row of widgetLayout; index as rowIndex; trackBy: trackRow"
-        cdkDropList
-        (cdkDropListDropped)="drop($event)"
-        cdkDropListOrientation="horizontal"
-        [cdkDropListData]="{ index: rowIndex }"
-    >
+            <vdr-dropdown-menu vdrPosition="bottom-right">
+                <button
+                    vdrDropdownItem
+                    *ngFor="let id of availableWidgetIds$ | async"
+                    (click)="addWidget(id)"
+                >
+                    {{ id }}
+                </button>
+            </vdr-dropdown-menu>
+        </vdr-dropdown>
+    </div>
+    <div cdkDropListGroup>
         <div
-            *ngFor="let widget of row; trackBy: trackRowItem"
-            class="dashboard-item"
-            [ngClass]="getClassForWidth(widget.width)"
-            cdkDrag
-            [cdkDragData]="widget"
+            class="clr-row dashboard-row"
+            *ngFor="let row of widgetLayout; index as rowIndex; trackBy: trackRow"
+            cdkDropList
+            (cdkDropListDropped)="drop($event)"
+            cdkDropListOrientation="horizontal"
+            [cdkDropListData]="{ index: rowIndex }"
         >
-            <vdr-dashboard-widget
-                *vdrIfPermissions="widget.config.requiresPermissions || null"
-                [widgetConfig]="widget.config"
+            <div
+                *ngFor="let widget of row; trackBy: trackRowItem"
+                class="dashboard-item"
+                [ngClass]="getClassForWidth(widget.width)"
+                cdkDrag
+                [cdkDragData]="widget"
             >
-                <div class="flex">
-                    <div class="drag-handle" cdkDragHandle>
-                        <clr-icon shape="drag-handle" size="24"></clr-icon>
-                    </div>
-                    <vdr-dropdown>
-                        <button class="icon-button" vdrDropdownTrigger>
-                            <clr-icon shape="ellipsis-vertical"></clr-icon>
-                        </button>
-                        <vdr-dropdown-menu vdrPosition="bottom-right">
-                            <h4 class="dropdown-header">{{ 'dashboard.widget-resize' | translate }}</h4>
-                            <button
-                                class="button"
-                                vdrDropdownItem
-                                [disabled]="width === widget.width"
-                                *ngFor="let width of getSupportedWidths(widget.config)"
-                                (click)="setWidgetWidth(widget, width)"
-                            >
-                                {{ 'dashboard.widget-width' | translate: { width: width } }}
+                <vdr-dashboard-widget
+                    *vdrIfPermissions="widget.config.requiresPermissions || null"
+                    [widgetConfig]="widget.config"
+                >
+                    <div class="flex">
+                        <div class="drag-handle" cdkDragHandle>
+                            <clr-icon shape="drag-handle" size="24"></clr-icon>
+                        </div>
+                        <vdr-dropdown>
+                            <button class="icon-button" vdrDropdownTrigger>
+                                <clr-icon shape="ellipsis-vertical"></clr-icon>
                             </button>
-                            <div class="dropdown-divider" role="separator"></div>
-                            <button class="button" vdrDropdownItem (click)="removeWidget(widget)">
-                                <clr-icon shape="trash" class="is-danger"></clr-icon>
-                                {{ 'dashboard.remove-widget' | translate }}
-                            </button>
-                        </vdr-dropdown-menu>
-                    </vdr-dropdown>
-                </div>
-            </vdr-dashboard-widget>
+                            <vdr-dropdown-menu vdrPosition="bottom-right">
+                                <h4 class="dropdown-header">{{ 'dashboard.widget-resize' | translate }}</h4>
+                                <button
+                                    vdrDropdownItem
+                                    [disabled]="width === widget.width"
+                                    *ngFor="let width of getSupportedWidths(widget.config)"
+                                    (click)="setWidgetWidth(widget, width)"
+                                >
+                                    {{ 'dashboard.widget-width' | translate : { width: width } }}
+                                </button>
+                                <div class="dropdown-divider" role="separator"></div>
+                                <button vdrDropdownItem (click)="removeWidget(widget)">
+                                    <clr-icon shape="trash" class="is-danger"></clr-icon>
+                                    {{ 'dashboard.remove-widget' | translate }}
+                                </button>
+                            </vdr-dropdown-menu>
+                        </vdr-dropdown>
+                    </div>
+                </vdr-dashboard-widget>
+            </div>
         </div>
     </div>
-</div>
+</vdr-page-block>

packages/admin-ui/src/lib/dashboard/src/components/dashboard/dashboard.component.scss

@@ -1,11 +1,5 @@
 @import 'variables';
 
-:host {
-    display: block;
-    max-width: 1200px;
-    margin: auto;
-}
-
 .widget-header {
     display: flex;
     justify-content: flex-end;
@@ -28,6 +22,10 @@ vdr-dashboard-widget {
     margin-bottom: 24px;
 }
 
+.drag-handle {
+    cursor: move;
+}
+
 .cdk-drag-preview {
     box-sizing: border-box;
     border-radius: 4px;
@@ -49,7 +47,8 @@ vdr-dashboard-widget {
 }
 
 .dashboard-row.cdk-drop-list-dragging, .dashboard-row.cdk-drop-list-receiving  {
-    border: 1px dashed var(--color-component-border-200);
+    border: 2px dashed var(--color-component-border-200);
+    border-radius: var(--border-radius);
     padding: 6px;
 }
 .dashboard-row.cdk-drop-list-dragging .dashboard-item:not(.cdk-drag-placeholder) {

packages/admin-ui/src/lib/dashboard/src/widgets/latest-orders-widget/latest-orders-widget.component.html

@@ -1,20 +1,30 @@
-<vdr-data-table [items]="latestOrders$ | async">
-    <ng-template let-order="item">
-        <td class="left align-middle">
-            {{ order.code }}
+<vdr-data-table-2 [items]="latestOrders$ | async" id="latest-orders-widget-list">
+    <vdr-dt2-column [heading]="'common.code' | translate">
+        <ng-template let-order="item">
+            <a class="button-ghost" [routerLink]="['/orders/', order.id]"
+                ><span>{{ order.code }}</span>
+                <clr-icon shape="arrow right"></clr-icon>
+            </a>
+        </ng-template>
+    </vdr-dt2-column>
+    <vdr-dt2-column [heading]="'order.state' | translate" [hiddenByDefault]="true">
+        <ng-template let-order="item">
             <vdr-order-state-label [state]="order.state"></vdr-order-state-label>
-        </td>
-        <td class="left align-middle">
+        </ng-template>
+    </vdr-dt2-column>
+    <vdr-dt2-column [heading]="'customer.customer' | translate" [hiddenByDefault]="true">
+        <ng-template let-order="item">
             <vdr-customer-label [customer]="order.customer"></vdr-customer-label>
-        </td>
-        <td class="left align-middle">{{ order.total | localeCurrency: order.currencyCode }}</td>
-        <td class="left align-middle">{{ order.orderPlacedAt | timeAgo }}</td>
-        <td class="right align-middle">
-            <vdr-table-row-action
-                iconShape="shopping-cart"
-                [label]="'common.open' | translate"
-                [linkTo]="['/orders/', order.id]"
-            ></vdr-table-row-action>
-        </td>
-    </ng-template>
-</vdr-data-table>
+        </ng-template>
+    </vdr-dt2-column>
+    <vdr-dt2-column [heading]="'order.total' | translate">
+        <ng-template let-order="item">
+            {{ order.totalWithTax | localeCurrency : order.currencyCode }}
+        </ng-template>
+    </vdr-dt2-column>
+    <vdr-dt2-column [heading]="'order.placed-at' | translate">
+        <ng-template let-order="item">
+            {{ order.orderPlacedAt | timeAgo }}
+        </ng-template>
+    </vdr-dt2-column>
+</vdr-data-table-2>

packages/admin-ui/src/lib/dashboard/src/widgets/latest-orders-widget/latest-orders-widget.component.scss

@@ -6,3 +6,8 @@ vdr-data-table {
         }
     }
 }
+
+vdr-order-state-label {
+    display: inline-block;
+    margin-top: 2px;
+}

packages/admin-ui/src/lib/dashboard/src/widgets/latest-orders-widget/latest-orders-widget.component.ts

@@ -25,7 +25,7 @@ export class LatestOrdersWidgetComponent implements OnInit {
                 take: 10,
                 filter: {
                     active: { eq: false },
-                    state: { notEq: 'Cancelled' },
+                    state: { notIn: ['Cancelled', 'Draft'] },
                 },
                 sort: {
                     orderPlacedAt: SortOrder.DESC,

packages/admin-ui/src/lib/dashboard/src/widgets/welcome-widget/welcome-widget.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="administrator$ | async as administrator">
-    <h4 class="h4">
+    <h4 class="">
         Welcome, {{ administrator.firstName }} {{ administrator.lastName }}<br />
         <small class="p5">Last login: {{ administrator.user.lastLogin | timeAgo }}</small>
     </h4>