From cf604aae26b521718385785a507c8c14011ffc97 Mon Sep 17 00:00:00 2001 From: Michael Bromley Date: Fri, 4 Oct 2019 20:52:11 +0200 Subject: [PATCH] feat(admin-ui): Add entity info to detail views Closes #179 --- .../collection-detail.component.html | 1 + .../facet-detail/facet-detail.component.html | 15 ++++-- .../product-detail.component.html | 21 ++++---- .../product-detail.component.scss | 2 +- .../product-variants-list.component.html | 1 + .../providers/routing/collection-resolver.ts | 2 + .../providers/routing/facet-resolver.ts | 3 +- .../providers/routing/product-resolver.ts | 2 + .../routing/product-variants-resolver.ts | 2 + .../src/app/common/generated-types.ts | 54 ++++++++++--------- .../utilities/flatten-facet-values.spec.ts | 16 +++++- .../address-card/address-card.component.html | 1 + .../customer-detail.component.html | 5 +- .../providers/routing/customer-resolver.ts | 2 + .../definitions/administrator-definitions.ts | 4 ++ .../definitions/collection-definitions.ts | 2 + .../data/definitions/customer-definitions.ts | 4 ++ .../app/data/definitions/facet-definitions.ts | 5 ++ .../data/definitions/product-definitions.ts | 45 ++++++++++++++++ .../data/definitions/settings-definitions.ts | 10 ++++ .../promotion-detail.component.html | 21 ++++---- .../order-detail/order-detail.component.html | 7 +-- .../order-detail/order-detail.component.scss | 5 -- .../admin-detail/admin-detail.component.html | 4 +- .../channel-detail.component.html | 4 +- .../country-detail.component.html | 1 + .../payment-method-detail.component.html | 4 +- .../role-detail/role-detail.component.html | 4 +- .../shipping-method-detail.component.html | 4 +- .../tax-category-detail.component.html | 4 +- .../tax-rate-detail.component.html | 4 +- .../routing/administrator-resolver.ts | 2 + .../providers/routing/channel-resolver.ts | 2 + .../providers/routing/country-resolver.ts | 2 + .../routing/payment-method-resolver.ts | 2 + .../providers/routing/role-resolver.ts | 2 + .../routing/tax-category-resolver.ts | 2 + .../providers/routing/tax-rate-resolver.ts | 2 + .../asset-gallery.component.html | 9 +++- .../asset-gallery.component.scss | 4 ++ .../asset-gallery/asset-gallery.component.ts | 5 ++ .../entity-info/entity-info.component.html | 18 +++++++ .../entity-info/entity-info.component.scss | 8 +++ .../entity-info/entity-info.component.ts | 12 +++++ .../src/app/shared/shared-declarations.ts | 1 + .../admin-ui/src/app/shared/shared.module.ts | 2 + .../admin-ui/src/styles/theme/_theme.scss | 4 ++ 47 files changed, 266 insertions(+), 70 deletions(-) create mode 100644 packages/admin-ui/src/app/shared/components/entity-info/entity-info.component.html create mode 100644 packages/admin-ui/src/app/shared/components/entity-info/entity-info.component.scss create mode 100644 packages/admin-ui/src/app/shared/components/entity-info/entity-info.component.ts diff --git a/packages/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.html b/packages/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.html index 7590706501..2f725e5286 100644 --- a/packages/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.html +++ b/packages/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.html @@ -1,5 +1,6 @@ + + + {{ 'common.name' | translate }} {{ 'common.code' | translate }} @@ -103,10 +105,13 @@ - + + + + - + - + - + diff --git a/packages/admin-ui/src/app/customer/components/customer-detail/customer-detail.component.html b/packages/admin-ui/src/app/customer/components/customer-detail/customer-detail.component.html index 4b625495e4..f5e1ce7010 100644 --- a/packages/admin-ui/src/app/customer/components/customer-detail/customer-detail.component.html +++ b/packages/admin-ui/src/app/customer/components/customer-detail/customer-detail.component.html @@ -1,6 +1,9 @@ - +
+ + +
diff --git a/packages/admin-ui/src/app/customer/providers/routing/customer-resolver.ts b/packages/admin-ui/src/app/customer/providers/routing/customer-resolver.ts index 8d20d87663..61c0b1e94e 100644 --- a/packages/admin-ui/src/app/customer/providers/routing/customer-resolver.ts +++ b/packages/admin-ui/src/app/customer/providers/routing/customer-resolver.ts @@ -11,6 +11,8 @@ export class CustomerResolver extends BaseEntityResolver { { __typename: 'Customer', id: '', + createdAt: '', + updatedAt: '', title: '', firstName: '', lastName: '', diff --git a/packages/admin-ui/src/app/data/definitions/administrator-definitions.ts b/packages/admin-ui/src/app/data/definitions/administrator-definitions.ts index d7dd427d0a..d39b50e436 100644 --- a/packages/admin-ui/src/app/data/definitions/administrator-definitions.ts +++ b/packages/admin-ui/src/app/data/definitions/administrator-definitions.ts @@ -3,6 +3,8 @@ import gql from 'graphql-tag'; export const ADMINISTRATOR_FRAGMENT = gql` fragment Administrator on Administrator { id + createdAt + updatedAt firstName lastName emailAddress @@ -23,6 +25,8 @@ export const ADMINISTRATOR_FRAGMENT = gql` export const ROLE_FRAGMENT = gql` fragment Role on Role { id + createdAt + updatedAt code description permissions diff --git a/packages/admin-ui/src/app/data/definitions/collection-definitions.ts b/packages/admin-ui/src/app/data/definitions/collection-definitions.ts index 130fb4fc35..83d63c890b 100644 --- a/packages/admin-ui/src/app/data/definitions/collection-definitions.ts +++ b/packages/admin-ui/src/app/data/definitions/collection-definitions.ts @@ -15,6 +15,8 @@ export const GET_COLLECTION_FILTERS = gql` export const COLLECTION_FRAGMENT = gql` fragment Collection on Collection { id + createdAt + updatedAt name description isPrivate diff --git a/packages/admin-ui/src/app/data/definitions/customer-definitions.ts b/packages/admin-ui/src/app/data/definitions/customer-definitions.ts index 7f3e6cceee..cac3a2c4ce 100644 --- a/packages/admin-ui/src/app/data/definitions/customer-definitions.ts +++ b/packages/admin-ui/src/app/data/definitions/customer-definitions.ts @@ -3,6 +3,8 @@ import gql from 'graphql-tag'; export const ADDRESS_FRAGMENT = gql` fragment Address on Address { id + createdAt + updatedAt fullName company streetLine1 @@ -24,6 +26,8 @@ export const ADDRESS_FRAGMENT = gql` export const CUSTOMER_FRAGMENT = gql` fragment Customer on Customer { id + createdAt + updatedAt title firstName lastName diff --git a/packages/admin-ui/src/app/data/definitions/facet-definitions.ts b/packages/admin-ui/src/app/data/definitions/facet-definitions.ts index 1d3f910bbf..cf7a383dae 100644 --- a/packages/admin-ui/src/app/data/definitions/facet-definitions.ts +++ b/packages/admin-ui/src/app/data/definitions/facet-definitions.ts @@ -3,6 +3,8 @@ import gql from 'graphql-tag'; export const FACET_VALUE_FRAGMENT = gql` fragment FacetValue on FacetValue { id + createdAt + updatedAt languageCode code name @@ -13,6 +15,8 @@ export const FACET_VALUE_FRAGMENT = gql` } facet { id + createdAt + updatedAt name } } @@ -21,6 +25,7 @@ export const FACET_VALUE_FRAGMENT = gql` export const FACET_WITH_VALUES_FRAGMENT = gql` fragment FacetWithValues on Facet { id + createdAt updatedAt languageCode isPrivate diff --git a/packages/admin-ui/src/app/data/definitions/product-definitions.ts b/packages/admin-ui/src/app/data/definitions/product-definitions.ts index 5d8191e0eb..e7dfe2d742 100644 --- a/packages/admin-ui/src/app/data/definitions/product-definitions.ts +++ b/packages/admin-ui/src/app/data/definitions/product-definitions.ts @@ -4,6 +4,7 @@ export const ASSET_FRAGMENT = gql` fragment Asset on Asset { id createdAt + updatedAt name fileSize mimeType @@ -16,6 +17,8 @@ export const ASSET_FRAGMENT = gql` export const PRODUCT_VARIANT_FRAGMENT = gql` fragment ProductVariant on ProductVariant { id + createdAt + updatedAt enabled languageCode name @@ -74,6 +77,8 @@ export const PRODUCT_VARIANT_FRAGMENT = gql` export const PRODUCT_WITH_VARIANTS_FRAGMENT = gql` fragment ProductWithVariants on Product { id + createdAt + updatedAt enabled languageCode name @@ -86,6 +91,7 @@ export const PRODUCT_WITH_VARIANTS_FRAGMENT = gql` ...Asset } translations { + id languageCode name slug @@ -117,10 +123,13 @@ export const PRODUCT_WITH_VARIANTS_FRAGMENT = gql` export const PRODUCT_OPTION_GROUP_FRAGMENT = gql` fragment ProductOptionGroup on ProductOptionGroup { id + createdAt + updatedAt languageCode code name translations { + id name } options { @@ -202,6 +211,8 @@ export const ADD_OPTION_TO_GROUP = gql` mutation AddOptionToGroup($input: CreateProductOptionInput!) { createProductOption(input: $input) { id + createdAt + updatedAt name code groupId @@ -213,11 +224,17 @@ export const ADD_OPTION_GROUP_TO_PRODUCT = gql` mutation AddOptionGroupToProduct($productId: ID!, $optionGroupId: ID!) { addOptionGroupToProduct(productId: $productId, optionGroupId: $optionGroupId) { id + createdAt + updatedAt optionGroups { id + createdAt + updatedAt code options { id + createdAt + updatedAt code } } @@ -229,11 +246,17 @@ export const REMOVE_OPTION_GROUP_FROM_PRODUCT = gql` mutation RemoveOptionGroupFromProduct($productId: ID!, $optionGroupId: ID!) { removeOptionGroupFromProduct(productId: $productId, optionGroupId: $optionGroupId) { id + createdAt + updatedAt optionGroups { id + createdAt + updatedAt code options { id + createdAt + updatedAt code } } @@ -255,12 +278,16 @@ export const GET_PRODUCT_LIST = gql` products(options: $options) { items { id + createdAt + updatedAt enabled languageCode name slug featuredAsset { id + createdAt + updatedAt preview } } @@ -273,11 +300,15 @@ export const GET_PRODUCT_OPTION_GROUPS = gql` query GetProductOptionGroups($filterTerm: String) { productOptionGroups(filterTerm: $filterTerm) { id + createdAt + updatedAt languageCode code name options { id + createdAt + updatedAt languageCode code name @@ -325,9 +356,13 @@ export const SEARCH_PRODUCTS = gql` count facetValue { id + createdAt + updatedAt name facet { id + createdAt + updatedAt name } } @@ -340,6 +375,8 @@ export const UPDATE_PRODUCT_OPTION = gql` mutation UpdateProductOption($input: UpdateProductOptionInput!) { updateProductOption(input: $input) { id + createdAt + updatedAt code name } @@ -359,6 +396,8 @@ export const GET_PRODUCT_VARIANT_OPTIONS = gql` query GetProductVariantOptions($id: ID!) { product(id: $id) { id + createdAt + updatedAt name optionGroups { id @@ -366,12 +405,16 @@ export const GET_PRODUCT_VARIANT_OPTIONS = gql` code options { id + createdAt + updatedAt name code } } variants { id + createdAt + updatedAt enabled name sku @@ -380,6 +423,8 @@ export const GET_PRODUCT_VARIANT_OPTIONS = gql` enabled options { id + createdAt + updatedAt name code groupId diff --git a/packages/admin-ui/src/app/data/definitions/settings-definitions.ts b/packages/admin-ui/src/app/data/definitions/settings-definitions.ts index 630106c300..82baaeccdb 100644 --- a/packages/admin-ui/src/app/data/definitions/settings-definitions.ts +++ b/packages/admin-ui/src/app/data/definitions/settings-definitions.ts @@ -3,6 +3,8 @@ import gql from 'graphql-tag'; export const COUNTRY_FRAGMENT = gql` fragment Country on Country { id + createdAt + updatedAt code name enabled @@ -150,6 +152,8 @@ export const REMOVE_MEMBERS_FROM_ZONE = gql` export const TAX_CATEGORY_FRAGMENT = gql` fragment TaxCategory on TaxCategory { id + createdAt + updatedAt name } `; @@ -193,6 +197,8 @@ export const UPDATE_TAX_CATEGORY = gql` export const TAX_RATE_FRAGMENT = gql` fragment TaxRate on TaxRate { id + createdAt + updatedAt name enabled value @@ -253,6 +259,8 @@ export const UPDATE_TAX_RATE = gql` export const CHANNEL_FRAGMENT = gql` fragment Channel on Channel { id + createdAt + updatedAt code token pricesIncludeTax @@ -317,6 +325,8 @@ export const UPDATE_CHANNEL = gql` export const PAYMENT_METHOD_FRAGMENT = gql` fragment PaymentMethod on PaymentMethod { id + createdAt + updatedAt code enabled configArgs { diff --git a/packages/admin-ui/src/app/marketing/components/promotion-detail/promotion-detail.component.html b/packages/admin-ui/src/app/marketing/components/promotion-detail/promotion-detail.component.html index 4d395e61f2..710dcf4adc 100644 --- a/packages/admin-ui/src/app/marketing/components/promotion-detail/promotion-detail.component.html +++ b/packages/admin-ui/src/app/marketing/components/promotion-detail/promotion-detail.component.html @@ -1,14 +1,17 @@ - - - - +
+ + + + + +
diff --git a/packages/admin-ui/src/app/order/components/order-detail/order-detail.component.html b/packages/admin-ui/src/app/order/components/order-detail/order-detail.component.html index a724403d26..a114f554a9 100644 --- a/packages/admin-ui/src/app/order/components/order-detail/order-detail.component.html +++ b/packages/admin-ui/src/app/order/components/order-detail/order-detail.component.html @@ -1,11 +1,8 @@ -
+
+ -
- {{ 'common.updated' | translate }}: - {{ order.updatedAt | date: 'medium' }} -
diff --git a/packages/admin-ui/src/app/order/components/order-detail/order-detail.component.scss b/packages/admin-ui/src/app/order/components/order-detail/order-detail.component.scss index 5b88ed8d1c..b349d6c72a 100644 --- a/packages/admin-ui/src/app/order/components/order-detail/order-detail.component.scss +++ b/packages/admin-ui/src/app/order/components/order-detail/order-detail.component.scss @@ -1,11 +1,6 @@ @import "variables"; @import "mixins"; -.date-detail { - color: $color-grey-500; - padding-left: 6px; -} - .shipping-address { list-style-type: none; line-height: 1.3em; diff --git a/packages/admin-ui/src/app/settings/components/admin-detail/admin-detail.component.html b/packages/admin-ui/src/app/settings/components/admin-detail/admin-detail.component.html index 4133c17929..a0d37c87e5 100644 --- a/packages/admin-ui/src/app/settings/components/admin-detail/admin-detail.component.html +++ b/packages/admin-ui/src/app/settings/components/admin-detail/admin-detail.component.html @@ -1,5 +1,7 @@ - + + +
-
{{ asset.name }}
+
+ + {{ asset.name }} +
diff --git a/packages/admin-ui/src/app/shared/components/asset-gallery/asset-gallery.component.scss b/packages/admin-ui/src/app/shared/components/asset-gallery/asset-gallery.component.scss index bb9ba1520d..13430db602 100644 --- a/packages/admin-ui/src/app/shared/components/asset-gallery/asset-gallery.component.scss +++ b/packages/admin-ui/src/app/shared/components/asset-gallery/asset-gallery.component.scss @@ -25,6 +25,7 @@ .card { margin-top: 0; + position: relative; } .selected-checkbox { @@ -54,6 +55,9 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + vdr-entity-info { + height: 16px; + } } .info-bar { diff --git a/packages/admin-ui/src/app/shared/components/asset-gallery/asset-gallery.component.ts b/packages/admin-ui/src/app/shared/components/asset-gallery/asset-gallery.component.ts index c8f3c7c303..dcdf79375b 100644 --- a/packages/admin-ui/src/app/shared/components/asset-gallery/asset-gallery.component.ts +++ b/packages/admin-ui/src/app/shared/components/asset-gallery/asset-gallery.component.ts @@ -59,4 +59,9 @@ export class AssetGalleryComponent { }) .subscribe(); } + + entityInfoClick(event: MouseEvent) { + event.preventDefault(); + event.stopPropagation(); + } } diff --git a/packages/admin-ui/src/app/shared/components/entity-info/entity-info.component.html b/packages/admin-ui/src/app/shared/components/entity-info/entity-info.component.html new file mode 100644 index 0000000000..6c0b19fee0 --- /dev/null +++ b/packages/admin-ui/src/app/shared/components/entity-info/entity-info.component.html @@ -0,0 +1,18 @@ + + + +
+ + {{ entity.id }} + + + {{ entity.createdAt | date: 'medium' }} + + + {{ entity.updatedAt | date: 'medium' }} + +
+ + diff --git a/packages/admin-ui/src/app/shared/components/entity-info/entity-info.component.scss b/packages/admin-ui/src/app/shared/components/entity-info/entity-info.component.scss new file mode 100644 index 0000000000..1e19e21595 --- /dev/null +++ b/packages/admin-ui/src/app/shared/components/entity-info/entity-info.component.scss @@ -0,0 +1,8 @@ +@import "variables"; + +.info-button { + color: $color-grey-500; +} +.entity-info { + margin: 0 12px; +} diff --git a/packages/admin-ui/src/app/shared/components/entity-info/entity-info.component.ts b/packages/admin-ui/src/app/shared/components/entity-info/entity-info.component.ts new file mode 100644 index 0000000000..f4b6021b45 --- /dev/null +++ b/packages/admin-ui/src/app/shared/components/entity-info/entity-info.component.ts @@ -0,0 +1,12 @@ +import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; + +@Component({ + selector: 'vdr-entity-info', + templateUrl: './entity-info.component.html', + styleUrls: ['./entity-info.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class EntityInfoComponent { + @Input() small = false; + @Input() entity: { id: string; createdAt?: string; updatedAt?: string }; +} diff --git a/packages/admin-ui/src/app/shared/shared-declarations.ts b/packages/admin-ui/src/app/shared/shared-declarations.ts index f1bd078553..80d810bdbb 100644 --- a/packages/admin-ui/src/app/shared/shared-declarations.ts +++ b/packages/admin-ui/src/app/shared/shared-declarations.ts @@ -46,6 +46,7 @@ export { SelectToggleComponent } from './components/select-toggle/select-toggle. export { SimpleDialogComponent } from './components/simple-dialog/simple-dialog.component'; export { TableRowActionComponent } from './components/table-row-action/table-row-action.component'; export { TitleInputComponent } from './components/title-input/title-input.component'; +export { EntityInfoComponent } from './components/entity-info/entity-info.component'; export { CurrencyNamePipe } from './pipes/currency-name.pipe'; export { FileSizePipe } from './pipes/file-size.pipe'; export { SentenceCasePipe } from './pipes/sentence-case.pipe'; diff --git a/packages/admin-ui/src/app/shared/shared.module.ts b/packages/admin-ui/src/app/shared/shared.module.ts index 4dcace5ae5..ebe2e3b6de 100644 --- a/packages/admin-ui/src/app/shared/shared.module.ts +++ b/packages/admin-ui/src/app/shared/shared.module.ts @@ -39,6 +39,7 @@ import { DropdownItemDirective, DropdownMenuComponent, DropdownTriggerDirective, + EntityInfoComponent, FacetValueChipComponent, FacetValueSelectorComponent, FileSizePipe, @@ -126,6 +127,7 @@ const DECLARATIONS = [ AssetFileInputComponent, AssetGalleryComponent, AssetPickerDialogComponent, + EntityInfoComponent, ]; @NgModule({ diff --git a/packages/admin-ui/src/styles/theme/_theme.scss b/packages/admin-ui/src/styles/theme/_theme.scss index 33938427a6..16217686b2 100644 --- a/packages/admin-ui/src/styles/theme/_theme.scss +++ b/packages/admin-ui/src/styles/theme/_theme.scss @@ -13,6 +13,10 @@ a:focus, button:focus { outline-color: $color-primary-400; } +.flex { + display: flex; +} + .flex-spacer { flex: 1; }