From a04456806850c62aa2d84b6d18cd7d087fbb23f4 Mon Sep 17 00:00:00 2001 From: Bastian Jakobi Date: Fri, 7 Jun 2024 11:39:21 +0200 Subject: [PATCH 1/9] feat: allow specification of valueTooltip and labelTooltip --- .../lib/components/page-header/page-header.component.html | 4 ++-- .../src/lib/components/page-header/page-header.component.ts | 5 +++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html index 94c9afea..3025ef87 100644 --- a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html +++ b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html @@ -97,14 +97,14 @@

{{ subheader }}

class="object-info flex flex-row md:flex-column align-items-baseline md:align-items-center justify-content-between" *ngFor="let item of objectDetails" > - diff --git a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts index ee4440a9..eca9cdbb 100644 --- a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts +++ b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts @@ -46,7 +46,12 @@ export interface Action { export interface ObjectDetailItem { label: string value?: string + /** + * @deprecated Use `valueTooltip` instead + */ tooltip?: string + labelTooltip?: string + valueTooltip?: string icon?: PrimeIcon labelPipe?: Type valuePipe?: Type From a880ddbd9262ac49c4baecd5844a6e5aee807ec6 Mon Sep 17 00:00:00 2001 From: Bastian Jakobi Date: Fri, 7 Jun 2024 11:58:19 +0200 Subject: [PATCH 2/9] feat: allow adding action button to header detail item --- .../page-header/page-header.component.html | 13 ++++++++++--- .../page-header/page-header.component.stories.ts | 5 +++++ .../components/page-header/page-header.component.ts | 3 +++ 3 files changed, 18 insertions(+), 3 deletions(-) diff --git a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html index 3025ef87..3fb140c3 100644 --- a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html +++ b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html @@ -102,14 +102,21 @@

{{ subheader }}

> - {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}} + {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}} + +
diff --git a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.stories.ts b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.stories.ts index c600fb8e..78f3d9a2 100644 --- a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.stories.ts +++ b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.stories.ts @@ -105,6 +105,11 @@ const demoFields: ObjectDetailItem[] = [ { label: 'Venue', value: 'AIE Munich ', + tooltip: 'AIE Munich', + labelTooltip: 'Label Tooltip', + actionItemIcon: PrimeIcons.COPY, + actionItemTooltip: 'Copy to clipboard', + actionItemCallback: () => {console.log('Copy to clipboard')} }, { label: 'Status', diff --git a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts index eca9cdbb..d4ca0de9 100644 --- a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts +++ b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts @@ -57,6 +57,9 @@ export interface ObjectDetailItem { valuePipe?: Type valuePipeArgs?: string valueCssClass?: string + actionItemIcon?: PrimeIcon + actionItemCallback?: () => void + actionItemTooltip?: string } export interface HomeItem { From e9b1c38b0f417bdf9bb1acc9d7d90ac11bae95af Mon Sep 17 00:00:00 2001 From: Bastian Jakobi Date: Wed, 12 Jun 2024 15:45:01 +0200 Subject: [PATCH 3/9] feat: add improved grid layout capabilities to page header --- .../page-header/page-header.component.html | 19 +++--- .../page-header/page-header.component.scss | 13 +++- .../page-header.component.stories.ts | 59 ++++++++++++++++++- .../page-header/page-header.component.ts | 42 ++++++++++++- 4 files changed, 120 insertions(+), 13 deletions(-) diff --git a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html index 3fb140c3..3cea622b 100644 --- a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html +++ b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html @@ -88,21 +88,24 @@

{{ subheader }}

- {{ item.label | dynamicPipe:item.labelPipe }} {{ subheader }} diff --git a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.scss b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.scss index 27d1dee6..18795602 100644 --- a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.scss +++ b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.scss @@ -84,7 +84,6 @@ .object-panel { border-top: 1px solid #cdd0d3; padding: 1rem; - display: flex; &:empty { display: none; @@ -103,3 +102,15 @@ .scale { transform: scale(2); } + +.object-info-grid-label { + flex: 1 +} + +.object-info-grid-value { + flex: 3; +} + +.min-w-120 { + min-width: 120px !important; +} \ No newline at end of file diff --git a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.stories.ts b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.stories.ts index 78f3d9a2..92226e86 100644 --- a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.stories.ts +++ b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.stories.ts @@ -3,7 +3,6 @@ import { importProvidersFrom } from '@angular/core' import { BrowserModule } from '@angular/platform-browser' import { BrowserAnimationsModule } from '@angular/platform-browser/animations' import { RouterModule } from '@angular/router' -import { TranslatePipe } from '@ngx-translate/core' import { action } from '@storybook/addon-actions' import { Meta, StoryFn, applicationConfig, moduleMetadata } from '@storybook/angular' import { PrimeIcons } from 'primeng/api' @@ -109,21 +108,23 @@ const demoFields: ObjectDetailItem[] = [ labelTooltip: 'Label Tooltip', actionItemIcon: PrimeIcons.COPY, actionItemTooltip: 'Copy to clipboard', - actionItemCallback: () => {console.log('Copy to clipboard')} + actionItemCallback: () => {console.log('Copy to clipboard')}, }, { label: 'Status', - labelPipe: TranslatePipe, value: 'Confirmed', + icon: PrimeIcons.CHECK_CIRCLE }, { label: 'Start Date', value: '14.3.2022', + icon: PrimeIcons.CALENDAR }, { label: 'End Date', value: new Date().toISOString(), valuePipe: DatePipe, + icon: PrimeIcons.CALENDAR }, ] @@ -347,3 +348,55 @@ export const WithObjectDetailsAndIcons = { showBreadcrumbs: false, }, } + +export const DefaultLayout = { + render: Template, + + args: { + header: 'My title', + subheader: 'My subtitle', + loading: false, + objectDetails: demoFields, + showBreadcrumbs: false, + }, +} + +export const ForcedColumnLayout = { + render: Template, + + args: { + header: 'My title', + subheader: 'My subtitle', + loading: false, + objectDetails: demoFields, + showBreadcrumbs: false, + enableGridView: false + }, +} + +export const ForcedGridLayout = { + render: Template, + + args: { + header: 'My title', + subheader: 'My subtitle', + loading: false, + objectDetails: demoFields, + showBreadcrumbs: false, + enableGridView: true + }, +} + +export const ForcedGridLayoutWithColumnAmount = { + render: Template, + + args: { + header: 'My title', + subheader: 'My subtitle', + loading: false, + objectDetails: demoFields, + showBreadcrumbs: false, + enableGridView: true, + gridLayoutDesktopColumns: 4, + }, +} diff --git a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts index d4ca0de9..10bd12e1 100644 --- a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts +++ b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts @@ -67,6 +67,8 @@ export interface HomeItem { page?: string } +export type GridColumnOptions = 1 | 2 | 3 | 4 | 6 | 12 + @Component({ selector: 'ocx-page-header', templateUrl: './page-header.component.html', @@ -116,6 +118,12 @@ export class PageHeaderComponent implements OnInit, OnChanges { @Input() manualBreadcrumbs = false + @Input() + enableGridView: undefined | boolean + + @Input() + gridLayoutDesktopColumns: undefined | GridColumnOptions + @Output() save = new EventEmitter() @@ -132,7 +140,17 @@ export class PageHeaderComponent implements OnInit, OnChanges { home$!: Observable - figureImageLoadError = false; + figureImageLoadError = false + + objectPanelGridLayoutClasses = 'grid row-gap-2 m-0' + objectPanelColumnLayoutClasses = 'flex flex-row justify-content-between overflow-x-auto' + + objectPanelDefaultLayoutClasses = 'flex flex-column row-gap-2 md:flex-row md:justify-content-between' + + objectInfoGridLayoutClasses = 'col-12 flex gap-4 md:col-6 align-items-center p-0' + objectInfoColumnLayoutClasses = 'flex flex-column align-items-center gap-2 min-w-120' + + objectInfoDefaultLayoutClasses = 'flex flex-row md:flex-column md:align-items-center md:gap-2' protected breadcrumbs: BreadcrumbService @@ -194,6 +212,28 @@ export class PageHeaderComponent implements OnInit, OnChanges { return style } + public getObjectPanelLayoutClasses() { + if (this.enableGridView) { + return this.objectPanelGridLayoutClasses + } + if (this.enableGridView === false) { + return this.objectPanelColumnLayoutClasses + } + return this.objectPanelDefaultLayoutClasses + } + + public getObjectInfoLayoutClasses() { + if (this.enableGridView) { + return `${this.objectInfoGridLayoutClasses} lg:col-${ + this.gridLayoutDesktopColumns ? 12 / this.gridLayoutDesktopColumns : 4 + }` + } + if (this.enableGridView === false) { + return this.objectInfoColumnLayoutClasses + } + return this.objectInfoDefaultLayoutClasses + } + /** * Generates a list of actions that should be rendered in an overflow menu */ From a137532785058d2b63ab30a5e28bad359a19ad98 Mon Sep 17 00:00:00 2001 From: Bastian Jakobi Date: Thu, 13 Jun 2024 10:04:16 +0200 Subject: [PATCH 4/9] fix: fix GitHub workflow config for SB deploys --- .github/workflows/storybook.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml index 4cec7e3c..e49019e6 100644 --- a/.github/workflows/storybook.yml +++ b/.github/workflows/storybook.yml @@ -3,7 +3,7 @@ on: push: branches: - '**' - pull_request_target: + pull_request: branches: - 'main' jobs: From 01cb07d01a275e26c5b3a471b35b055eaf6067c3 Mon Sep 17 00:00:00 2001 From: Bastian Jakobi Date: Thu, 13 Jun 2024 11:25:20 +0200 Subject: [PATCH 5/9] fix: implement chromatic secret check --- .github/workflows/storybook.yml | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml index e49019e6..f7533564 100644 --- a/.github/workflows/storybook.yml +++ b/.github/workflows/storybook.yml @@ -1,4 +1,4 @@ -name: Deploy Storybook +name: Build and deploy Storybook on: push: branches: @@ -6,6 +6,9 @@ on: pull_request: branches: - 'main' +env: + PIA_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN_PIA }} + AA_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN_AA }} jobs: deploy-storybooks: runs-on: ubuntu-latest @@ -18,17 +21,25 @@ jobs: run: npm ci - name: Build PIA Storybook run: npx nx run portal-integration-angular:build-storybook + - name: Check PIA Chromatic token + if: env.PIA_TOKEN == null + run: echo "PIA_TOKEN missing. Skipping Chromatic deployment for Portal Integration Angular." + - name: Check Angular Accelerator Chromatic token + if: env.AA_TOKEN == null + run: echo "AA_TOKEN missing. Skipping Chromatic deployment for Angular Accelerator." - name: Publish to PIA Chromatic uses: chromaui/action@latest + if: env.PIA_TOKEN != null with: - projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN_PIA }} + projectToken: ${{ env.PIA_TOKEN }} storybookBuildDir: dist/storybook/portal-integration-angular skip: 'dependabot/**' - name: Build AA Storybook run: npx nx run angular-accelerator:build-storybook - name: Publish to AA Chromatic uses: chromaui/action@latest + if: env.AA_TOKEN != null with: - projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN_AA }} + projectToken: ${{ env.AA_TOKEN }} storybookBuildDir: dist/storybook/angular-accelerator skip: 'dependabot/**' From b51ddad5435e06660503e310c5f3432def7de8a8 Mon Sep 17 00:00:00 2001 From: Bastian Jakobi Date: Thu, 13 Jun 2024 11:26:07 +0200 Subject: [PATCH 6/9] fix: fix step name --- .github/workflows/storybook.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml index f7533564..9889a9d9 100644 --- a/.github/workflows/storybook.yml +++ b/.github/workflows/storybook.yml @@ -21,7 +21,7 @@ jobs: run: npm ci - name: Build PIA Storybook run: npx nx run portal-integration-angular:build-storybook - - name: Check PIA Chromatic token + - name: Check Portal Integration Angular Chromatic token if: env.PIA_TOKEN == null run: echo "PIA_TOKEN missing. Skipping Chromatic deployment for Portal Integration Angular." - name: Check Angular Accelerator Chromatic token From 5a1e2a1bb55331bbf3cd4bd491a60c533463fb78 Mon Sep 17 00:00:00 2001 From: Bastian Jakobi Date: Thu, 13 Jun 2024 11:48:42 +0200 Subject: [PATCH 7/9] fix: improve storybook CI --- .github/workflows/storybook-fork.yml | 42 ++++++++++++++++++++++++++++ .github/workflows/storybook.yml | 18 ++---------- 2 files changed, 44 insertions(+), 16 deletions(-) create mode 100644 .github/workflows/storybook-fork.yml diff --git a/.github/workflows/storybook-fork.yml b/.github/workflows/storybook-fork.yml new file mode 100644 index 00000000..3ca074bf --- /dev/null +++ b/.github/workflows/storybook-fork.yml @@ -0,0 +1,42 @@ +name: Build and deploy Storybook (Fork) +on: + pull_request: + branches: + - 'main' +env: + PIA_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN_PIA }} + AA_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN_AA }} +jobs: + deploy-storybooks: + runs-on: ubuntu-latest + steps: + - name: Checkout code + uses: actions/checkout@v2 + with: + fetch-depth: 0 + - name: Install dependencies + run: npm ci + - name: Build PIA Storybook + run: npx nx run portal-integration-angular:build-storybook + - name: Check Portal Integration Angular Chromatic token + if: env.PIA_TOKEN == null + run: echo "PIA_TOKEN missing. Skipping Chromatic deployment for Portal Integration Angular." + - name: Check Angular Accelerator Chromatic token + if: env.AA_TOKEN == null + run: echo "AA_TOKEN missing. Skipping Chromatic deployment for Angular Accelerator." + - name: Publish to PIA Chromatic + uses: chromaui/action@latest + if: env.PIA_TOKEN != null + with: + projectToken: ${{ env.PIA_TOKEN }} + storybookBuildDir: dist/storybook/portal-integration-angular + skip: 'dependabot/**' + - name: Build AA Storybook + run: npx nx run angular-accelerator:build-storybook + - name: Publish to AA Chromatic + uses: chromaui/action@latest + if: env.AA_TOKEN != null + with: + projectToken: ${{ env.AA_TOKEN }} + storybookBuildDir: dist/storybook/angular-accelerator + skip: 'dependabot/**' diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml index 9889a9d9..70a8c1f5 100644 --- a/.github/workflows/storybook.yml +++ b/.github/workflows/storybook.yml @@ -3,12 +3,6 @@ on: push: branches: - '**' - pull_request: - branches: - - 'main' -env: - PIA_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN_PIA }} - AA_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN_AA }} jobs: deploy-storybooks: runs-on: ubuntu-latest @@ -21,25 +15,17 @@ jobs: run: npm ci - name: Build PIA Storybook run: npx nx run portal-integration-angular:build-storybook - - name: Check Portal Integration Angular Chromatic token - if: env.PIA_TOKEN == null - run: echo "PIA_TOKEN missing. Skipping Chromatic deployment for Portal Integration Angular." - - name: Check Angular Accelerator Chromatic token - if: env.AA_TOKEN == null - run: echo "AA_TOKEN missing. Skipping Chromatic deployment for Angular Accelerator." - name: Publish to PIA Chromatic uses: chromaui/action@latest - if: env.PIA_TOKEN != null with: - projectToken: ${{ env.PIA_TOKEN }} + projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN_PIA }} storybookBuildDir: dist/storybook/portal-integration-angular skip: 'dependabot/**' - name: Build AA Storybook run: npx nx run angular-accelerator:build-storybook - name: Publish to AA Chromatic uses: chromaui/action@latest - if: env.AA_TOKEN != null with: - projectToken: ${{ env.AA_TOKEN }} + projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN_AA }} storybookBuildDir: dist/storybook/angular-accelerator skip: 'dependabot/**' From 586aea7724702ee51793a03f06072181dd37e2f2 Mon Sep 17 00:00:00 2001 From: Bastian Jakobi Date: Thu, 13 Jun 2024 13:31:37 +0200 Subject: [PATCH 8/9] fix: improve storybook CI --- .github/workflows/storybook-fork.yml | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/.github/workflows/storybook-fork.yml b/.github/workflows/storybook-fork.yml index 3ca074bf..ad246f9d 100644 --- a/.github/workflows/storybook-fork.yml +++ b/.github/workflows/storybook-fork.yml @@ -3,11 +3,13 @@ on: pull_request: branches: - 'main' -env: - PIA_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN_PIA }} - AA_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN_AA }} jobs: deploy-storybooks: + # TODO: Move this to deployment only + environment: Storybook + env: + PIA_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN_PIA }} + AA_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN_AA }} runs-on: ubuntu-latest steps: - name: Checkout code @@ -18,12 +20,6 @@ jobs: run: npm ci - name: Build PIA Storybook run: npx nx run portal-integration-angular:build-storybook - - name: Check Portal Integration Angular Chromatic token - if: env.PIA_TOKEN == null - run: echo "PIA_TOKEN missing. Skipping Chromatic deployment for Portal Integration Angular." - - name: Check Angular Accelerator Chromatic token - if: env.AA_TOKEN == null - run: echo "AA_TOKEN missing. Skipping Chromatic deployment for Angular Accelerator." - name: Publish to PIA Chromatic uses: chromaui/action@latest if: env.PIA_TOKEN != null From c7e6d0319b60032cb66bcc59dac32fb0621bbbd9 Mon Sep 17 00:00:00 2001 From: Bastian Jakobi Date: Thu, 13 Jun 2024 15:58:12 +0200 Subject: [PATCH 9/9] fix: remove redundant file --- .github/workflows/storybook-fork.yml | 38 ---------------------------- 1 file changed, 38 deletions(-) delete mode 100644 .github/workflows/storybook-fork.yml diff --git a/.github/workflows/storybook-fork.yml b/.github/workflows/storybook-fork.yml deleted file mode 100644 index ad246f9d..00000000 --- a/.github/workflows/storybook-fork.yml +++ /dev/null @@ -1,38 +0,0 @@ -name: Build and deploy Storybook (Fork) -on: - pull_request: - branches: - - 'main' -jobs: - deploy-storybooks: - # TODO: Move this to deployment only - environment: Storybook - env: - PIA_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN_PIA }} - AA_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN_AA }} - runs-on: ubuntu-latest - steps: - - name: Checkout code - uses: actions/checkout@v2 - with: - fetch-depth: 0 - - name: Install dependencies - run: npm ci - - name: Build PIA Storybook - run: npx nx run portal-integration-angular:build-storybook - - name: Publish to PIA Chromatic - uses: chromaui/action@latest - if: env.PIA_TOKEN != null - with: - projectToken: ${{ env.PIA_TOKEN }} - storybookBuildDir: dist/storybook/portal-integration-angular - skip: 'dependabot/**' - - name: Build AA Storybook - run: npx nx run angular-accelerator:build-storybook - - name: Publish to AA Chromatic - uses: chromaui/action@latest - if: env.AA_TOKEN != null - with: - projectToken: ${{ env.AA_TOKEN }} - storybookBuildDir: dist/storybook/angular-accelerator - skip: 'dependabot/**'