-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loading status checks…
feat(Admin UI): step-wise setup wizard (#2280)
closes #2049 --------- This functionality has been developed for the project “codo”. codo is developed under the projects “Landungsbrücken – Patenschaften in Hamburg stärken” and “openTransfer Patenschaften”. It is funded through the program “Menschen stärken Menschen” by the German Federal Ministry of Family Affairs, Senior Citizens, Women and Youth. More information at https://github.com/codo-mentoring “Landungsbrücken – Patenschaften in Hamburg stärken” is a project of BürgerStiftung Hamburg in cooperation with the Mentor.Ring Hamburg. With a mix of networking opportunities, capacity building and financial support the project strengthens Hamburg’s scene of mentoring projects since its founding in 2016. The “Stiftung Bürgermut” foundation since 2007 supports the digital and real exchange of experiences and connections of active citizens. Within the federal program “Menschen stärken Menschen” the foundation as part of its program “openTransfer Patenschaften” offers support services for connecting, spreading and upskilling mentoring organisations across Germany. Diese Funktion wurde entwickelt für das Projekt codo. codo wird entwickelt im Rahmen der Projekte Landungsbrücken – Patenschaften in Hamburg stärken und openTransfer Patenschaften. Er ist gefördert durch das Bundesprogramm Menschen stärken Menschen des Bundesministeriums für Familie, Senioren, Frauen und Jugend. Mehr Informationen unter https://github.com/codo-mentoring “Landungsbrücken – Patenschaften in Hamburg stärken” ist ein Projekt der BürgerStiftung Hamburg in Kooperation mit dem Mentor.Ring Hamburg. Mit einer Mischung aus Vernetzungsangeboten, Qualifizierungsmaßnahmen und finanzieller Förderung stärkt das Projekt die Hamburger Szene der Patenschaftsprojekte seit der Gründung im Jahr 2016. Die Stiftung Bürgermut fördert seit 2007 den digitalen und realen Erfahrungsaustausch und die Vernetzung von engagierten Bürger:innen. Innerhalb des Bundesprogramms „Menschen stärken Menschen” bietet die Stiftung im Rahmen ihres Programms openTransfer Patenschaften Unterstützungsleistungen zur Vernetzung, Verbreitung und Qualifizierung von Patenschafts- und Mentoringorganisationen bundesweit. Co-authored-by: codo-mentoring <117934638+codo-mentoring@users.noreply.github.com>
- Loading branch information
1 parent
67b44b6
commit c8b7bd6
Showing
23 changed files
with
2,603 additions
and
633 deletions.
There are no files selected for viewing
6 changes: 6 additions & 0 deletions
6
.../core/admin/admin-entity-details/admin-entity-details/admin-entity-details.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 changes: 13 additions & 0 deletions
13
src/app/core/admin/setup-wizard/setup-wizard-button/setup-wizard-button.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
@if (showSetupWizard) { | ||
<button | ||
mat-flat-button | ||
routerLink="/admin/setup-wizard" | ||
class="button" | ||
color="accent" | ||
style="border-radius: 0" | ||
i18n | ||
> | ||
<fa-icon icon="person-digging"></fa-icon> | ||
Setup Wizard | ||
</button> | ||
} |
7 changes: 7 additions & 0 deletions
7
src/app/core/admin/setup-wizard/setup-wizard-button/setup-wizard-button.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
|
||
.button { | ||
border-top: solid 1px rgba(0, 0, 0, 0.12); | ||
border-radius: 0; | ||
overflow: hidden; | ||
width: 100%; | ||
} |
50 changes: 50 additions & 0 deletions
50
src/app/core/admin/setup-wizard/setup-wizard-button/setup-wizard-button.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
import { | ||
ComponentFixture, | ||
fakeAsync, | ||
TestBed, | ||
tick, | ||
} from "@angular/core/testing"; | ||
|
||
import { SetupWizardButtonComponent } from "./setup-wizard-button.component"; | ||
import { EntityMapperService } from "../../../entity/entity-mapper/entity-mapper.service"; | ||
import { mockEntityMapper } from "../../../entity/entity-mapper/mock-entity-mapper-service"; | ||
import { SetupWizardConfig } from "../setup-wizard-config"; | ||
import { Config } from "../../../config/config"; | ||
|
||
describe("SetupWizardButtonComponent", () => { | ||
let component: SetupWizardButtonComponent; | ||
let fixture: ComponentFixture<SetupWizardButtonComponent>; | ||
|
||
beforeEach(async () => { | ||
await TestBed.configureTestingModule({ | ||
imports: [SetupWizardButtonComponent], | ||
providers: [ | ||
{ provide: EntityMapperService, useValue: mockEntityMapper() }, | ||
], | ||
}).compileComponents(); | ||
|
||
fixture = TestBed.createComponent(SetupWizardButtonComponent); | ||
component = fixture.componentInstance; | ||
fixture.detectChanges(); | ||
}); | ||
|
||
it("should create", () => { | ||
expect(component).toBeTruthy(); | ||
}); | ||
|
||
it("should hide if SetupWizardConfig completed", fakeAsync(() => { | ||
const testWizardConfig: SetupWizardConfig = { | ||
steps: [], | ||
finished: true, | ||
}; | ||
spyOn(TestBed.inject(EntityMapperService), "load").and.resolveTo( | ||
new Config("", testWizardConfig), | ||
); | ||
|
||
// @ts-ignore | ||
component.init(); | ||
tick(); | ||
|
||
expect(component.showSetupWizard).toBeFalse(); | ||
})); | ||
}); |
53 changes: 53 additions & 0 deletions
53
src/app/core/admin/setup-wizard/setup-wizard-button/setup-wizard-button.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
import { Component } from "@angular/core"; | ||
import { FaIconComponent } from "@fortawesome/angular-fontawesome"; | ||
import { MatButton } from "@angular/material/button"; | ||
import { RouterLink } from "@angular/router"; | ||
import { EntityMapperService } from "../../../entity/entity-mapper/entity-mapper.service"; | ||
import { Config } from "../../../config/config"; | ||
import { | ||
CONFIG_SETUP_WIZARD_ID, | ||
SetupWizardConfig, | ||
} from "../setup-wizard-config"; | ||
import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy"; | ||
import { filter } from "rxjs/operators"; | ||
import { LoggingService } from "../../../logging/logging.service"; | ||
|
||
@UntilDestroy() | ||
@Component({ | ||
selector: "app-setup-wizard-button", | ||
standalone: true, | ||
imports: [FaIconComponent, MatButton, RouterLink], | ||
templateUrl: "./setup-wizard-button.component.html", | ||
styleUrls: ["./setup-wizard-button.component.scss"], | ||
}) | ||
export class SetupWizardButtonComponent { | ||
showSetupWizard: boolean; | ||
|
||
constructor( | ||
private entityMapper: EntityMapperService, | ||
private logger: LoggingService, | ||
) { | ||
this.init(); | ||
} | ||
|
||
private init() { | ||
this.entityMapper | ||
.load(Config, CONFIG_SETUP_WIZARD_ID) | ||
.then((r: Config<SetupWizardConfig>) => { | ||
this.updateStatus(r.data); | ||
}) | ||
.catch((e) => this.logger.debug("No Setup Wizard Config found")); | ||
|
||
this.entityMapper | ||
.receiveUpdates<Config<SetupWizardConfig>>(Config) | ||
.pipe( | ||
untilDestroyed(this), | ||
filter(({ entity }) => entity.getId() === CONFIG_SETUP_WIZARD_ID), | ||
) | ||
.subscribe((update) => this.updateStatus(update.entity.data)); | ||
} | ||
|
||
private updateStatus(config: SetupWizardConfig) { | ||
this.showSetupWizard = !config.finished; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,106 @@ | ||
import { MenuItem } from "../../ui/navigation/menu-item"; | ||
|
||
export const CONFIG_SETUP_WIZARD_ID = "Config:SetupWizard"; | ||
|
||
export interface SetupWizardConfig { | ||
/** index of the current (last visited) step, to be opened when user returns to the wizard **/ | ||
currentStep?: number; | ||
|
||
/** whether the wizard has been completed overall and should be hidden */ | ||
finished?: boolean; | ||
|
||
steps: SetupWizardStep[]; | ||
} | ||
|
||
export interface SetupWizardStep { | ||
title: string; | ||
text: string; | ||
actions?: MenuItem[]; | ||
|
||
/** whether the user(s) have completed this step yet */ | ||
completed?: boolean; | ||
} | ||
|
||
export const defaultSetupWizardConfig: SetupWizardConfig = { | ||
steps: [ | ||
{ | ||
title: $localize`:Setup Wizard Step Title:Welcome`, | ||
text: $localize`:Setup Wizard Step Text: | ||
# Welcome to Aam Digital! | ||
We are here to help you manage your participants' or beneficiaries' details | ||
and your team's interactions with them. | ||
The Aam Digital platform is very flexible and you can customize the structures and views | ||
to exactly fit your project needs. | ||
The following steps guide you through the most important configuration options for this. | ||
And you can start working with your data within a few minutes already. | ||
We also have some short video guides for you: [Aam Digital Video Guides (YouTube)](https://www.youtube.com/channel/UCZSFOX_MBa8zz5Mtfv_qlnA/videos) | ||
Feel free to leave this setup wizard in between to explore the existing system first. | ||
You can always come back to this view through the "Setup Wizard" button at the bottom of the main menu on the left. | ||
To dismiss and hide this wizard, go to the last step of the wizard and "finish" the setup process.`, | ||
}, | ||
{ | ||
title: $localize`:Setup Wizard Step Title:Profiles & Fields`, | ||
text: $localize`:Setup Wizard Step Text: | ||
The system already holds some basic structures for your case management. | ||
You can adapt the fields and how the details are displayed. | ||
If you have further requirements, don't hesitate to reach out to us at [support@aam-digital.com](mailto:support@aam-digital.com). | ||
_Please note that the setup wizard and form builder is still under active development ("beta" version). | ||
Some advanced configuration options are not available here yet for you to configure yourself and may need assistance from the tech support team. | ||
We are currently extending and optimizing the user interfaces for these steps._ | ||
`, | ||
actions: [ | ||
{ | ||
label: $localize`:Setup Wizard Step Action:Customize Child profile`, | ||
link: "/admin/entity/Child", | ||
}, | ||
{ | ||
label: $localize`:Setup Wizard Step Action:Customize School profile`, | ||
link: "/admin/entity/School", | ||
}, | ||
], | ||
}, | ||
{ | ||
title: $localize`:Setup Wizard Step Title:User Accounts`, | ||
text: $localize`:Setup Wizard Step Text: | ||
You can collaborate on Aam Digital as a team. | ||
Data is synced and all users have access to the latest information.`, | ||
actions: [ | ||
{ | ||
label: $localize`:Setup Wizard Step Action:Manage User Accounts`, | ||
link: "/user", | ||
}, | ||
], | ||
}, | ||
{ | ||
title: $localize`:Setup Wizard Step Title:Import Data`, | ||
text: $localize`:Setup Wizard Step Text: | ||
If you have exising data from a previous system, you can easily import it. | ||
Save the data in ".csv" format (e.g. from MS Excel). | ||
You do not need any specific column names in your file to be imported. | ||
The Import Module helps your map your spreadsheet data to the relevant fields in your Aam Digital profiles.`, | ||
actions: [ | ||
{ | ||
label: $localize`:Setup Wizard Step Action:Import Data`, | ||
link: "/import", | ||
}, | ||
], | ||
}, | ||
{ | ||
title: $localize`:Setup Wizard Step Title:Done!`, | ||
text: $localize`:Setup Wizard Step Text: | ||
That's it. You are ready to explore your system and start work! | ||
You can always adapt your setup further, after you started using it. | ||
We recommend to keep things simple in the beginning, | ||
start using it for some of your tasks | ||
and then add further fields and adjust your setup. | ||
Feel free to reach out to us with your questions or feedback: [support@aam-digital.com](mailto:support@aam-digital.com)`, | ||
}, | ||
], | ||
}; |
45 changes: 45 additions & 0 deletions
45
src/app/core/admin/setup-wizard/setup-wizard.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
<mat-stepper [(selectedIndex)]="currentStep"> | ||
<!-- overwrite icons to keep simple numbered steps --> | ||
<ng-template matStepperIcon="edit" let-index="index"> | ||
{{ index + 1 }} | ||
</ng-template> | ||
<ng-template matStepperIcon="done" let-index="index"> | ||
{{ index + 1 }} | ||
</ng-template> | ||
|
||
@for (step of config?.steps; track step; let last = $last) { | ||
<mat-step [label]="step.title" [completed]="step.completed"> | ||
<markdown>{{ step.text }}</markdown> | ||
|
||
<mat-action-list> | ||
@for (action of step.actions; track action.link) { | ||
<button mat-list-item [routerLink]="action.link"> | ||
{{ action.label }} | ||
</button> | ||
} | ||
</mat-action-list> | ||
|
||
@if (!last) { | ||
<button | ||
mat-stroked-button | ||
matStepperNext | ||
(click)="step.completed = true" | ||
i18n | ||
> | ||
Continue | ||
</button> | ||
} @else { | ||
<button | ||
mat-stroked-button | ||
routerLink="" | ||
(click)="step.completed = true; config.finished = true" | ||
matTooltip="We will hide the setup wizard from the main menu as you finish it here. You can still access it from the admin screen." | ||
i18n-matTooltip | ||
i18n | ||
> | ||
Finish | ||
</button> | ||
} | ||
</mat-step> | ||
} | ||
</mat-stepper> |
Empty file.
Oops, something went wrong.