Skip to content

Commit

Permalink
Merge pull request #1142 from DSD-DBS/project-creation-ui-improvements
Browse files Browse the repository at this point in the history 
feat: Improve project creation UI
  • Loading branch information
@MoritzWeber0
MoritzWeber0 authored Nov 2, 2023
2 parents 83d28d7 + 6c3c3bc commit 7e7c7c9
Show file tree
Hide file tree
Showing 18 changed files with 494 additions and 448 deletions.
7 changes: 1 addition & 6 deletions docs/docs/user/projects/models/create.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,12 +99,7 @@ the TeamForCapella instance and the TeamForCapella repository. With `project`,
you can specify the name of the model in Capella. We recommend using the same
name for the repository and project.

## Step 4: Choose Initialisation

Please choose `Create empty model`. This has no effect on the existing
TeamForCapella content. More options will follow in the future.

## Step 5: Metadata
## Step 4: Metadata

This is an important step. Here, you can select the version and the model
nature of your tool. If you don't select any version, the functionality will be
Expand Down
176 changes: 98 additions & 78 deletions frontend/src/app/projects/create-project/create-project.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,22 @@
~ SPDX-License-Identifier: Apache-2.0
-->

<div class="wrapper">
<mat-horizontal-stepper linear #stepper>
<mat-step completed="false" label="General information">
<div class="flex-center">
<mat-card class="section-card">
<div class="wrapper flex justify-center">
<mat-horizontal-stepper
class="flex max-w-[360px] rounded-md shadow-md sm:max-w-[710px]"
linear
#stepper
>
<mat-step completed="false">
<ng-template matStepLabel>
<div class="hidden sm:inline">Create new project</div>
</ng-template>
<h3 class="flex justify-center sm:hidden">Create new project</h3>
<div class="flex justify-center">
<mat-card class="w-[350px] sm:min-w-[420px]">
<form [formGroup]="form">
<fieldset>
<mat-form-field appearance="fill">
<div>
<mat-form-field appearance="fill" class="form-field-default">
<mat-label>Name</mat-label>
<input
matInput
Expand All @@ -26,77 +34,75 @@
A project name is required.
</mat-error>
</mat-form-field>
</fieldset>
<fieldset>
<mat-form-field appearance="fill">
</div>
<div>
<mat-form-field appearance="fill" class="form-field-default">
<mat-label>Description</mat-label>
<textarea
matInput
formControlName="description"
data-testId="textarea-description"
></textarea>
</mat-form-field>
</fieldset>
</div>
<fieldset>
<fieldset>
<div class="flex flex-col">
<h3>Project visibility</h3>
<mat-radio-group
formControlName="visibility"
class="flex flex-col"
<div class="flex flex-col">
<legend>Project visibility</legend>
<mat-radio-group
formControlName="visibility"
class="flex flex-col"
>
<mat-radio-button
*ngFor="
let visibility of projectService.getAvailableVisibilities()
"
[value]="visibility"
>
<mat-radio-button
*ngFor="
let visibility of projectService.getAvailableVisibilities()
"
[value]="visibility"
>
{{
projectService.getProjectVisibilityDescription(
visibility
)
}}
</mat-radio-button>
</mat-radio-group>
</div>
</fieldset>
{{
projectService.getProjectVisibilityDescription(visibility)
}}
</mat-radio-button>
</mat-radio-group>
</div>
</fieldset>
<div class="flex justify-between">
<a
routerLink="/projects"
mat-button
matStepperPrevious
data-testId="a-cancel"
>
<mat-icon class="mat-icon-position left">arrow_back</mat-icon
>Cancel</a
>
<button
mat-flat-button
color="primary"
[disabled]="!form.valid"
(click)="createProject(stepper)"
data-testId="button-create-project"
>
Create project
<mat-icon class="mat-icon-position right"
>arrow_forward</mat-icon
<div></div>
<div class="mt-[10px] flex justify-between">
<div></div>
<div>
<button
mat-flat-button
color="primary"
[disabled]="!form.valid"
(click)="createProject(stepper)"
data-testId="button-create-project"
>
</button>
Create project
<mat-icon class="mat-icon-position right"
>navigate_next</mat-icon
>
</button>
</div>
</div>
</form>
</mat-card>
</div>
</mat-step>

<mat-step label="Add team members">
<div *ngIf="projectService.project$ | async" class="flex-center">
<div>
<app-project-user-settings></app-project-user-settings>
<mat-card>
<div class="flex justify-between">
<button
mat-flat-button
<mat-step>
<ng-template matStepLabel>
<div class="hidden sm:inline">(Optional) Add team members</div>
</ng-template>
<h3 class="flex justify-center sm:hidden">(Optional) Add team members</h3>
<div *ngIf="projectService.project$ | async" class="flex justify-center">
<app-project-user-settings></app-project-user-settings>
</div>
<div *ngIf="projectService.project$ | async">
<div class="flex justify-between">
<div></div>
<div>
<div class="flex w-[312px] justify-end sm:w-[420px]">
<a
mat-button
color="primary"
(click)="stepper.next()"
data-testId="button-skipAddMembers"
Expand All @@ -106,28 +112,41 @@ <h3>Project visibility</h3>
projectUserService.nonAdminProjectUsers$ | async as users
"
>
{{ !users || users.length === 0 ? "skip" : "continue" }}
{{
!users || users.length === 0 ? "Skip for now" : "Continue"
}}
</ng-container>
<mat-icon class="mat-icon-position right"
>arrow_forward</mat-icon
>navigate_next</mat-icon
>
</button>
</a>
</div>
</mat-card>
</div>
<div></div>
</div>
</div>
</mat-step>
<mat-step label="Add models">
<app-create-model
(currentStep)="modelCreationStep = $event"
[redirectAfterCompletion]="false"
#model_creator
></app-create-model>
<div class="flex-center">
<mat-card class="section-card">
<div class="flex-center">

<mat-step>
<ng-template matStepLabel>
<div class="hidden sm:inline">(Optional) Add model</div>
</ng-template>
<h3 class="flex justify-center pb-[5px] sm:hidden sm:pb-0">
(Optional) Add model
</h3>
<div class="flex justify-center">
<app-create-model
(currentStep)="modelCreationStep = $event"
[redirectAfterCompletion]="false"
#model_creator
></app-create-model>
</div>
<div class="flex justify-between">
<div class="flex"></div>
<div class="flex">
<div class="mt-[-23px] flex w-[295px] justify-end sm:w-[420px]">
<a
mat-flat-button
mat-button
[routerLink]="[
'/project',
(projectService.project$ | async)?.slug
Expand All @@ -136,23 +155,24 @@ <h3>Project visibility</h3>
data-testId="a-skipModelAndFinishProjectCreation"
>
<span *ngIf="modelCreationStep === 'create-model'">
Skip model creation and finish project creation
Abort model creation and finish
</span>
<span
*ngIf="
modelCreationStep !== 'create-model' &&
modelCreationStep !== 'complete'
"
>
Abort model initialization and finish project creation
Abort model creation and finish
</span>
<span *ngIf="modelCreationStep === 'complete'">
Finish project creation
</span>
<mat-icon class="mat-icon-position right">check</mat-icon>
</a>
</div>
</mat-card>
</div>
<div class="flex"></div>
</div>
</mat-step>
</mat-horizontal-stepper>
Expand Down
11 changes: 1 addition & 10 deletions frontend/src/app/projects/create-project/create-project.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,14 @@ import {
} from 'src/../tests/spec-helper/element.spec-helper';

import { ToastService } from '../../helpers/toast/toast.service';
import { ProjectUserService } from '../project-detail/project-users/service/project-user.service';
import {
PatchProject,
Project,
ProjectService,
ProjectVisibility,
} from '../service/project.service';
import { CreateProjectComponent } from './create-project.component';
import { ProjectUserService } from '../project-detail/project-users/service/project-user.service';

const mockProjects: Project[] = [
{
Expand Down Expand Up @@ -237,15 +237,6 @@ describe('CreateProjectComponent', () => {
expect(appCreateModelComponent).toBeTruthy();
});

it('renders routerLink to /projects', () => {
const cancelEl: HTMLElement = findElByTestId(
fixture,
'a-cancel',
).nativeElement;

expect(cancelEl.getAttribute('href')).toEqual('/projects');
});

it('gets redirected to project/:projectName after clicking on finish', () => {
setFieldValue(fixture, 'input-name', testProjectName);
click(fixture, 'button-create-project');
Expand Down
1 change: 0 additions & 1 deletion frontend/src/app/projects/create-project/create-project.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,6 @@ export class CreateProjectComponent implements OnInit, OnDestroy {

getColorByModelCreationStep(): string {
switch (this.modelCreationStep) {
case 'create-model':
case 'complete':
return 'primary';
default:
Expand Down
29 changes: 16 additions & 13 deletions frontend/src/app/projects/models/create-model-base/create-model-base.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,14 @@
~ SPDX-License-Identifier: Apache-2.0
-->

<div class="flex-center">
<mat-card *ngIf="projectService.project$ | async">
<div class="flex justify-center">
<mat-card
class="w-[350px] md:min-w-[420px]"
*ngIf="projectService.project$ | async"
>
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<fieldset class="flex flex-wrap">
<mat-form-field appearance="fill">
<div class="m-0 flex w-auto items-center px-0">
<mat-form-field class="w-full" appearance="fill">
<mat-label>Model name</mat-label>
<input matInput formControlName="name" />
<mat-error *ngIf="form.controls.name.errors?.required">
Expand All @@ -19,15 +22,15 @@
}}” already exists.
</mat-error>
</mat-form-field>
</fieldset>
<fieldset>
<mat-form-field appearance="fill">
</div>
<div class="m-0 flex w-auto items-center px-0">
<mat-form-field class="w-full" appearance="fill">
<mat-label>Model description</mat-label>
<textarea rows="3" matInput formControlName="description"> </textarea>
</mat-form-field>
</fieldset>
<fieldset>
<mat-form-field appearance="fill">
</div>
<div class="m-0 flex w-auto items-center px-0">
<mat-form-field class="w-full" appearance="fill">
<mat-label>Model tool</mat-label>
<mat-select matInput formControlName="toolID">
<mat-option
Expand All @@ -44,16 +47,16 @@
Please select a valid tool.
</mat-error>
</mat-form-field>
</fieldset>
<div class="flex justify-between">
</div>
<div class="flex justify-end">
<button
mat-raised-button
color="primary"
type="submit"
[disabled]="!form.valid"
>
Create model
<mat-icon class="mat-icon-position right">arrow_forward</mat-icon>
<mat-icon class="mat-icon-position right">navigate_next</mat-icon>
</button>
</div>
</form>
Expand Down
Loading

0 comments on commit 7e7c7c9

Please sign in to comment.