feat(admin-ui): Vertically center list component tables

admin-ui/src/app/catalog/components/facet-list/facet-list.component.html

@@ -15,16 +15,14 @@
     (pageChange)="setPageNumber($event)"
     (itemsPerPageChange)="setItemsPerPage($event)"
 >
-    <vdr-dt-column>{{ 'common.ID' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'catalog.values' | translate }}</vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
     <ng-template let-facet="item">
-        <td class="left">{{ facet.id }}</td>
-        <td class="left">{{ facet.code }}</td>
-        <td class="left">{{ facet.name }}</td>
-        <td class="left">
+        <td class="left align-middle">{{ facet.code }}</td>
+        <td class="left align-middle">{{ facet.name }}</td>
+        <td class="left align-middle">
             <vdr-facet-value-chip
                 *ngFor="let value of facet.values"
                 [facetValue]="value"
@@ -32,7 +30,7 @@
                 [displayFacetName]="false"
             ></vdr-facet-value-chip>
         </td>
-        <td class="right">
+        <td class="right align-middle">
             <vdr-table-row-action
                 iconShape="edit"
                 [label]="'common.edit' | translate"

admin-ui/src/app/catalog/components/product-list/product-list.component.html

@@ -40,7 +40,7 @@
     <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
     <ng-template let-result="item">
-        <td class="left">
+        <td class="left align-middle">
             <div class="image-placeholder">
                 <img
                     [src]="
@@ -51,8 +51,10 @@
                 />
             </div>
         </td>
-        <td class="left">{{ groupByProduct ? result.productName : result.productVariantName }}</td>
-        <td class="right">
+        <td class="left align-middle">
+            {{ groupByProduct ? result.productName : result.productVariantName }}
+        </td>
+        <td class="right align-middle">
             <vdr-table-row-action
                 iconShape="edit"
                 [label]="'common.edit' | translate"

admin-ui/src/app/customer/components/customer-list/customer-list.component.html

@@ -21,11 +21,15 @@
     <vdr-dt-column>{{ 'customer.customer-type' | translate }}</vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
     <ng-template let-customer="item">
-        <td class="left">{{ customer.id }}</td>
-        <td class="left">{{ customer.title }} {{ customer.firstName }} {{ customer.lastName }}</td>
-        <td class="left">{{ customer.emailAddress }}</td>
-        <td class="left"><vdr-customer-status-label [customer]="customer"></vdr-customer-status-label></td>
-        <td class="right">
+        <td class="left align-middle">{{ customer.id }}</td>
+        <td class="left align-middle">
+            {{ customer.title }} {{ customer.firstName }} {{ customer.lastName }}
+        </td>
+        <td class="left align-middle">{{ customer.emailAddress }}</td>
+        <td class="left align-middle">
+            <vdr-customer-status-label [customer]="customer"></vdr-customer-status-label>
+        </td>
+        <td class="right align-middle">
             <vdr-table-row-action
                 iconShape="edit"
                 [label]="'common.edit' | translate"

admin-ui/src/app/settings/components/administrator-list/administrator-list.component.html

@@ -21,11 +21,11 @@
     <vdr-dt-column>{{ 'settings.email-address' | translate }}</vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
     <ng-template let-administrator="item">
-        <td class="left">{{ administrator.id }}</td>
-        <td class="left">{{ administrator.firstName }}</td>
-        <td class="left">{{ administrator.lastName }}</td>
-        <td class="left">{{ administrator.emailAddress }}</td>
-        <td class="right">
+        <td class="left align-middle">{{ administrator.id }}</td>
+        <td class="left align-middle">{{ administrator.firstName }}</td>
+        <td class="left align-middle">{{ administrator.lastName }}</td>
+        <td class="left align-middle">{{ administrator.emailAddress }}</td>
+        <td class="right align-middle">
             <vdr-table-row-action
                 iconShape="edit"
                 [label]="'common.edit' | translate"

admin-ui/src/app/settings/components/channel-list/channel-list.component.html

@@ -12,9 +12,9 @@
     <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
     <ng-template let-channel="item">
-        <td class="left">{{ channel.id }}</td>
-        <td class="left">{{ channel.code }}</td>
-        <td class="right">
+        <td class="left align-middle">{{ channel.id }}</td>
+        <td class="left align-middle">{{ channel.code }}</td>
+        <td class="right align-middle">
             <vdr-table-row-action
                 iconShape="edit"
                 [label]="'common.edit' | translate"

admin-ui/src/app/settings/components/country-list/country-list.component.html

@@ -31,18 +31,18 @@
     <vdr-dt-column>{{ 'common.enabled' | translate }}</vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
     <ng-template let-country="item">
-        <td class="left">{{ country.code }}</td>
-        <td class="left">{{ country.name }}</td>
-        <td class="left">
+        <td class="left align-middle">{{ country.code }}</td>
+        <td class="left align-middle">{{ country.name }}</td>
+        <td class="left align-middle">
             <vdr-chip *ngFor="let zone of country.zones" [colorFrom]="zone.id">{{ zone.name }}</vdr-chip>
         </td>
-        <td class="left">
+        <td class="left align-middle">
             <clr-icon
                 [class.enabled]="country.enabled"
                 [attr.shape]="country.enabled ? 'check' : 'times'"
             ></clr-icon>
         </td>
-        <td class="right">
+        <td class="right align-middle">
             <vdr-table-row-action
                 iconShape="edit"
                 [label]="'common.edit' | translate"

admin-ui/src/app/settings/components/payment-method-list/payment-method-list.component.html

@@ -12,9 +12,9 @@
     <vdr-dt-column>{{ 'common.enabled' | translate }}</vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
     <ng-template let-paymentMethod="item">
-        <td class="left">{{ paymentMethod.code }}</td>
-        <td class="left">{{ paymentMethod.enabled }}</td>
-        <td class="right">
+        <td class="left align-middle">{{ paymentMethod.code }}</td>
+        <td class="left align-middle">{{ paymentMethod.enabled }}</td>
+        <td class="right align-middle">
             <vdr-table-row-action
                 iconShape="edit"
                 [label]="'common.edit' | translate"

admin-ui/src/app/settings/components/role-list/role-list.component.html

@@ -21,15 +21,15 @@
     <vdr-dt-column>{{ 'settings.permissions' | translate }}</vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
     <ng-template let-role="item">
-        <td class="left">{{ role.id }}</td>
-        <td class="left">{{ role.code }}</td>
-        <td class="left">{{ role.description }}</td>
-        <td class="left">
+        <td class="left align-middle">{{ role.id }}</td>
+        <td class="left align-middle">{{ role.code }}</td>
+        <td class="left align-middle">{{ role.description }}</td>
+        <td class="left align-middle">
             <ng-container *ngIf="!isDefaultRole(role)">
                 <vdr-chip *ngFor="let permission of role.permissions">{{ permission }}</vdr-chip>
             </ng-container>
         </td>
-        <td class="right">
+        <td class="right align-middle">
             <vdr-table-row-action
                 [disabled]="isDefaultRole(role)"
                 iconShape="edit"

admin-ui/src/app/settings/components/shipping-method-list/shipping-method-list.component.html

@@ -19,9 +19,9 @@
     <vdr-dt-column>{{ 'common.description' | translate }}</vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
     <ng-template let-shippingMethod="item">
-        <td class="left">{{ shippingMethod.code }}</td>
-        <td class="left">{{ shippingMethod.description }}</td>
-        <td class="right">
+        <td class="left align-middle">{{ shippingMethod.code }}</td>
+        <td class="left align-middle">{{ shippingMethod.description }}</td>
+        <td class="right align-middle">
             <vdr-table-row-action
                 iconShape="edit"
                 [label]="'common.edit' | translate"

admin-ui/src/app/settings/components/tax-category-list/tax-category-list.component.html

@@ -12,9 +12,9 @@
     <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
     <ng-template let-taxCategory="item">
-        <td class="left">{{ taxCategory.id }}</td>
-        <td class="left">{{ taxCategory.name }}</td>
-        <td class="right">
+        <td class="left align-middle">{{ taxCategory.id }}</td>
+        <td class="left align-middle">{{ taxCategory.name }}</td>
+        <td class="right align-middle">
             <vdr-table-row-action
                 iconShape="edit"
                 [label]="'common.edit' | translate"

admin-ui/src/app/settings/components/tax-rate-list/tax-rate-list.component.html

@@ -22,12 +22,12 @@
     <vdr-dt-column>{{ 'settings.tax-rate' | translate }}</vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
     <ng-template let-taxRate="item">
-        <td class="left">{{ taxRate.id }}</td>
-        <td class="left">{{ taxRate.name }}</td>
-        <td class="left">{{ taxRate.category.name }}</td>
-        <td class="left">{{ taxRate.zone.name }}</td>
-        <td class="left">{{ taxRate.value }}%</td>
-        <td class="right">
+        <td class="left align-middle">{{ taxRate.id }}</td>
+        <td class="left align-middle">{{ taxRate.name }}</td>
+        <td class="left align-middle">{{ taxRate.category.name }}</td>
+        <td class="left align-middle">{{ taxRate.zone.name }}</td>
+        <td class="left align-middle">{{ taxRate.value }}%</td>
+        <td class="right align-middle">
             <vdr-table-row-action
                 iconShape="edit"
                 [label]="'common.edit' | translate"