Skip to content

Commit 2f87a50

Browse files
SebastianStehleSebastianStehle
authored
WIP: Form row (#1273)
* Improved mongo config. * Update dependencies. * Disable test in CI for now. * Temp * Temp * More form rows. * Fix label. * Form row improvements.
1 parent 0a22ecf commit 2f87a50

File tree

121 files changed

+1440
-1937
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

121 files changed

+1440
-1937
lines changed

‎frontend/src/app/features/administration/pages/users/user-page.component.html‎

Lines changed: 19 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -21,46 +21,34 @@ <h3>{{ "users.createTitle" | sqxTranslate }}</h3>
2121
</ng-container>
2222
<ng-container>
2323
<sqx-form-error [error]="userForm.error | async" />
24-
<div class="form-group">
25-
<label for="email">
26-
{{ "common.email" | sqxTranslate }} <small class="hint">({{ "common.requiredHint" | sqxTranslate }})</small>
27-
</label>
28-
<sqx-control-errors for="email" />
24+
<sqx-form-row for="email" label="common.email" required vertical>
2925
<input class="form-control" id="email" autocomplete="off" formControlName="email" maxlength="100" type="email" />
30-
</div>
26+
</sqx-form-row>
3127

32-
<div class="form-group">
33-
<label for="displayName">
34-
{{ "common.displayName" | sqxTranslate }} <small class="hint">({{ "common.requiredHint" | sqxTranslate }})</small>
35-
</label>
36-
<sqx-control-errors for="displayName" />
28+
<sqx-form-row for="displayName" label="common.displayName" required vertical>
3729
<input class="form-control" id="displayName" autocomplete="off" formControlName="displayName" maxlength="100" spellcheck="false" />
38-
</div>
30+
</sqx-form-row>
3931

40-
<div class="form-group form-group-section">
41-
<div class="form-group">
42-
<label for="password">{{ "common.password" | sqxTranslate }}</label>
43-
<sqx-control-errors for="password" />
32+
<div class="form-section">
33+
<sqx-form-row for="password" label="common.password" vertical>
4434
<input class="form-control" id="password" autocomplete="off" formControlName="password" maxlength="100" type="password" />
45-
</div>
35+
</sqx-form-row>
4636

47-
<div class="form-group">
48-
<label for="password">{{ "common.passwordConfirm" | sqxTranslate }}</label>
49-
<sqx-control-errors for="passwordConfirm" />
37+
<sqx-form-row for="passwordConfirm" label="common.passwordConfirm" vertical>
5038
<input class="form-control" id="passwordConfirm" autocomplete="off" formControlName="passwordConfirm" maxlength="100" type="password" />
51-
</div>
39+
</sqx-form-row>
5240
</div>
5341

54-
<div class="form-group form-group-section">
55-
<label for="permissions">{{ "common.permissions" | sqxTranslate }}</label>
56-
<sqx-control-errors for="permissions" />
57-
<textarea
58-
class="form-control"
59-
id="permissions"
60-
autocomplete="off"
61-
formControlName="permissions"
62-
placeholder="{{ 'common.separateByLine' | sqxTranslate }}"
63-
spellcheck="false"></textarea>
42+
<div class="form-section">
43+
<sqx-form-row for="permissions" label="common.permissions" vertical>
44+
<textarea
45+
class="form-control"
46+
id="permissions"
47+
autocomplete="off"
48+
formControlName="permissions"
49+
placeholder="{{ 'common.separateByLine' | sqxTranslate }}"
50+
spellcheck="false"></textarea>
51+
</sqx-form-row>
6452
</div>
6553
</ng-container>
6654
</sqx-layout>

‎frontend/src/app/features/administration/pages/users/user-page.component.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
@import 'mixins';
22
@import 'vars';
33

4-
.form-group-section {
4+
.form-section {
55
margin-top: 2rem;
6+
margin-bottom: 1.25rem;
67
}
78

89
textarea {

‎frontend/src/app/features/administration/pages/users/user-page.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { AsyncPipe } from '@angular/common';
99
import { Component, OnInit } from '@angular/core';
1010
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
1111
import { ActivatedRoute, Router } from '@angular/router';
12-
import { ControlErrorsComponent, FormErrorComponent, LayoutComponent, ShortcutDirective, Subscriptions, TitleComponent, TooltipDirective, TranslatePipe, UpdateUserDto } from '@app/shared';
12+
import { FormErrorComponent, FormRowComponent, LayoutComponent, ShortcutDirective, Subscriptions, TitleComponent, TooltipDirective, TranslatePipe, UpdateUserDto } from '@app/shared';
1313
import { UserDto, UserForm, UsersState } from '../../internal';
1414

1515
@Component({
@@ -18,8 +18,8 @@ import { UserDto, UserForm, UsersState } from '../../internal';
1818
templateUrl: './user-page.component.html',
1919
imports: [
2020
AsyncPipe,
21-
ControlErrorsComponent,
2221
FormErrorComponent,
22+
FormRowComponent,
2323
FormsModule,
2424
LayoutComponent,
2525
ReactiveFormsModule,

‎frontend/src/app/features/api/pages/graphql/graphql-page.component.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,15 @@
1010
<ng-container title> {{ "api.selectClient" | sqxTranslate }} </ng-container>
1111
<ng-container content>
1212
<sqx-form-hint> {{ "api.selectClientDescription" | sqxTranslate }} </sqx-form-hint>
13-
<div class="form-group">
14-
<label for="client">{{ "common.client" | sqxTranslate }}</label>
13+
<sqx-form-row for="client" label="common.client" vertical>
1514
<select class="form-control" id="client" [ngModel]="clientSelected" (ngModelChange)="selectClient($event)">
1615
<option [ngValue]="null">{{ "api.noClient" | sqxTranslate }}</option>
1716

1817
@for (client of clientsState.clients | async; track client) {
1918
<option [ngValue]="client">{{ client.id }}</option>
2019
}
2120
</select>
22-
</div>
21+
</sqx-form-row>
2322
</ng-container>
2423
<ng-container footer>
2524
<button class="btn btn-text-secondary" (click)="clientsDialog.hide()" type="button">{{ "common.close" | sqxTranslate }}</button>

‎frontend/src/app/features/api/pages/graphql/graphql-page.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { createGraphiQLFetcher } from '@graphiql/toolkit';
1212
import { GraphiQL } from 'graphiql';
1313
import * as React from 'react';
1414
import * as ReactDOM from 'react-dom/client';
15-
import { ApiUrlConfig, AppsState, AuthService, ClientDto, ClientsService, ClientsState, DialogModel, FormHintComponent, LayoutComponent, MessageBus, ModalDialogComponent, ModalDirective, QueryExecuted, TitleComponent, TooltipDirective, TourStepDirective, TranslatePipe, Types } from '@app/shared';
15+
import { ApiUrlConfig, AppsState, AuthService, ClientDto, ClientsService, ClientsState, DialogModel, FormHintComponent, FormRowComponent, LayoutComponent, MessageBus, ModalDialogComponent, ModalDirective, QueryExecuted, TitleComponent, TooltipDirective, TourStepDirective, TranslatePipe, Types } from '@app/shared';
1616

1717
@Component({
1818
selector: 'sqx-graphql-page',
@@ -22,6 +22,7 @@ import { ApiUrlConfig, AppsState, AuthService, ClientDto, ClientsService, Client
2222
AsyncPipe,
2323
FormHintComponent,
2424
FormsModule,
25+
FormRowComponent,
2526
LayoutComponent,
2627
ModalDialogComponent,
2728
ModalDirective,

‎frontend/src/app/features/apps/pages/onboarding-dialog.component.html‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,7 @@ <h2>{{ "tour.stepDataTitle" | sqxTranslate }}</h2>
3030

3131
<div [sqxMarkdown]="'tour.stepDataText' | sqxTranslate"></div>
3232

33-
<div class="form-group mt-4">
34-
<label for="role">{{ "tour.stepDataCompanyRole" | sqxTranslate }}</label>
33+
<sqx-form-row for="companyRole" label="tour.stepDataCompanyRole" class="mt-4">
3534
<select class="form-select" id="companyRole" formControlName="companyRole">
3635
<option [ngValue]="'RoleEmployee'">{{ "tour.roleEmployee" | sqxTranslate }}</option>
3736
<option [ngValue]="'RoleBusinessOwner'">{{ "tour.roleBusinessOwner" | sqxTranslate }}</option>
@@ -40,21 +39,19 @@ <h2>{{ "tour.stepDataTitle" | sqxTranslate }}</h2>
4039
<option [ngValue]="'RoleSoftwareDeveloper'">{{ "tour.roleSoftwareDeveloper" | sqxTranslate }}</option>
4140
<option [ngValue]="'RoleBusinessAnalyst'">{{ "tour.roleBusinessAnalyst" | sqxTranslate }}</option>
4241
</select>
43-
</div>
42+
</sqx-form-row>
4443

45-
<div class="form-group">
46-
<label for="companySize">{{ "tour.stepDataCompanySize" | sqxTranslate }}</label>
44+
<sqx-form-row for="companySize" label="tour.stepDataCompanySize">
4745
<select class="form-select" id="companySize" formControlName="companySize">
4846
<option [ngValue]="'SizeSingle'">{{ "tour.sizeSingle" | sqxTranslate }}</option>
4947
<option [ngValue]="'SizeSmall'">{{ "tour.sizeSmall" | sqxTranslate }}</option>
5048
<option [ngValue]="'SizeMedium'">{{ "tour.sizeMedium" | sqxTranslate }}</option>
5149
<option [ngValue]="'SizeLarge'">{{ "tour.sizeLarge" | sqxTranslate }}</option>
5250
<option [ngValue]="'SizeVeryLarge'">{{ "tour.sizeVeryLarge" | sqxTranslate }}</option>
5351
</select>
54-
</div>
52+
</sqx-form-row>
5553

56-
<div class="form-group">
57-
<label for="project">{{ "tour.stepDataProject" | sqxTranslate }}</label>
54+
<sqx-form-row for="project" label="tour.stepDataProject">
5855
<select class="form-select" id="project" formControlName="project">
5956
<option [ngValue]="'ProjectNewsMagazine'">{{ "tour.projectNewsMagazine" | sqxTranslate }}</option>
6057
<option [ngValue]="'ProjectPersonalBlog'">{{ "tour.projectPersonalBlog" | sqxTranslate }}</option>
@@ -64,7 +61,8 @@ <h2>{{ "tour.stepDataTitle" | sqxTranslate }}</h2>
6461
<option [ngValue]="'ProjectBackend'">{{ "tour.projectBackend" | sqxTranslate }}</option>
6562
<option [ngValue]="'ProjectLearning'">{{ "tour.projectLearning" | sqxTranslate }}</option>
6663
</select>
67-
</div>
64+
</sqx-form-row>
65+
6866
<button class="btn btn-success" type="submit">{{ "tour.stepDataNext" | sqxTranslate }}</button>
6967
</form>
7068
</div>

‎frontend/src/app/features/apps/pages/onboarding-dialog.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
import { Component, EventEmitter, Output } from '@angular/core';
1010
import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
11-
import { fadeAnimation, MarkdownDirective, ModalDialogComponent, slideAnimation, TourState, TranslatePipe, UsersService } from '@app/shared';
11+
import { fadeAnimation, FormRowComponent, MarkdownDirective, ModalDialogComponent, slideAnimation, TourState, TranslatePipe, UsersService } from '@app/shared';
1212

1313
@Component({
1414
selector: 'sqx-onboarding-dialog',
@@ -18,6 +18,7 @@ import { fadeAnimation, MarkdownDirective, ModalDialogComponent, slideAnimation,
1818
fadeAnimation, slideAnimation,
1919
],
2020
imports: [
21+
FormRowComponent,
2122
FormsModule,
2223
MarkdownDirective,
2324
ModalDialogComponent,

‎frontend/src/app/features/assets/pages/asset-tag-dialog.component.html‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,9 @@
33
<ng-container title> {{ "common.renameTag" | sqxTranslate }} </ng-container>
44
<ng-container content>
55
<sqx-form-error [error]="editForm.error | async" />
6-
<div class="form-group">
7-
<label for="tagName">
8-
{{ "common.name" | sqxTranslate }} <small class="hint">({{ "common.requiredHint" | sqxTranslate }})</small>
9-
</label>
10-
<sqx-control-errors for="tagName" />
6+
<sqx-form-row for="tagName" label="common.name" vertical required>
117
<input class="form-control" id="tagName" autocomplete="off" formControlName="tagName" sqxFocusOnInit />
12-
</div>
8+
</sqx-form-row>
139
</ng-container>
1410
<ng-container footer>
1511
<button class="btn btn-text-secondary" (click)="emitClose()" type="button">{{ "common.cancel" | sqxTranslate }}</button>

‎frontend/src/app/features/assets/pages/asset-tag-dialog.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,18 @@
88
import { AsyncPipe } from '@angular/common';
99
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
1010
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
11-
import { ControlErrorsComponent, FocusOnInitDirective, FormErrorComponent, ModalDialogComponent, TooltipDirective, TranslatePipe } from '@app/shared';
12-
import { AssetsState, RenameAssetTagForm } from '@app/shared/internal';
11+
import { FocusOnInitDirective, FormErrorComponent, ModalDialogComponent, TooltipDirective, TranslatePipe } from '@app/shared';
12+
import { AssetsState, FormRowComponent, RenameAssetTagForm } from '@app/shared/internal';
1313

1414
@Component({
1515
selector: 'sqx-asset-tag-dialog',
1616
styleUrls: ['./asset-tag-dialog.component.scss'],
1717
templateUrl: './asset-tag-dialog.component.html',
1818
imports: [
1919
AsyncPipe,
20-
ControlErrorsComponent,
2120
FocusOnInitDirective,
2221
FormErrorComponent,
22+
FormRowComponent,
2323
FormsModule,
2424
ModalDialogComponent,
2525
ReactiveFormsModule,

‎frontend/src/app/features/content/pages/calendar/calendar-page.component.html‎

Lines changed: 32 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -25,66 +25,47 @@
2525
<ng-container content>
2626
@if (contentSelected && contentSelected.scheduleJob) {
2727
<div>
28-
<div class="form-group row">
29-
<label class="col-4 col-form-label">{{ "common.id" | sqxTranslate }}</label>
30-
<div class="col-8">
31-
<div class="input-group">
32-
<input class="form-control" id="id" #inputId name="id" readonly value="{{ contentSelected.id }}" />
33-
<button class="btn btn-outline-secondary" [sqxCopy]="inputId" type="button">
34-
<i class="icon-copy"></i>
35-
</button>
36-
</div>
28+
<sqx-form-row for="id" hideError label="common.id" labelSize="lg">
29+
<div class="input-group">
30+
<input class="form-control" id="id" #inputId name="id" readonly value="{{ contentSelected.id }}" />
31+
<button class="btn btn-outline-secondary" [sqxCopy]="inputId" type="button">
32+
<i class="icon-copy"></i>
33+
</button>
3734
</div>
38-
</div>
35+
</sqx-form-row>
3936

40-
<div class="form-group form-group-aligned row">
41-
<label class="col-4 col-form-label">{{ "common.content" | sqxTranslate }}</label>
42-
<div class="col-8">
43-
<a class="truncate" [routerLink]="['../', contentSelected.schemaName, contentSelected.id]">
44-
{{ createContentName(contentSelected) }}
45-
</a>
46-
</div>
47-
</div>
37+
<sqx-form-row centered for="content" hideError label="common.content" labelSize="lg">
38+
<a class="truncate" [routerLink]="['../', contentSelected.schemaName, contentSelected.id]">
39+
{{ createContentName(contentSelected) }}
40+
</a>
41+
</sqx-form-row>
4842

49-
<div class="form-group form-group-aligned row">
50-
<label class="col-4 col-form-label">{{ "common.schema" | sqxTranslate }}</label>
51-
<div class="col-8">
52-
<a class="truncate" [routerLink]="['../', contentSelected.schemaName]"> {{ contentSelected.schemaDisplayName }} </a>
53-
</div>
54-
</div>
43+
<sqx-form-row centered for="schema" hideError label="common.schema" labelSize="lg">
44+
<a class="truncate" [routerLink]="['../', contentSelected.schemaName]"> {{ contentSelected.schemaDisplayName }} </a>
45+
</sqx-form-row>
5546

56-
<div class="form-group form-group-aligned row">
57-
<label class="col-4 col-form-label">{{ "common.status" | sqxTranslate }}</label>
58-
<div class="col-8">
59-
<sqx-content-status layout="text" small="true" [status]="contentSelected.status" [statusColor]="contentSelected.statusColor" />
60-
</div>
61-
</div>
47+
<sqx-form-row centered for="status" hideError label="common.status" labelSize="lg">
48+
<sqx-content-status layout="text" small="true" [status]="contentSelected.status" [statusColor]="contentSelected.statusColor" />
49+
</sqx-form-row>
6250

6351
<hr />
6452

65-
<div class="form-group form-group-aligned row">
66-
<label class="col-4 col-form-label">{{ "contents.scheduledToLabel" | sqxTranslate }}</label>
67-
<div class="col-8">
68-
<sqx-content-status
69-
layout="text"
70-
small="true"
71-
[status]="contentSelected.scheduleJob.status"
72-
[statusColor]="contentSelected.scheduleJob.color" />
73-
</div>
74-
</div>
53+
<sqx-form-row centered for="scheduledTo" hideError label="contents.scheduledToLabel" labelSize="lg">
54+
<sqx-content-status
55+
layout="text"
56+
small="true"
57+
[status]="contentSelected.scheduleJob.status"
58+
[statusColor]="contentSelected.scheduleJob.color" />
59+
</sqx-form-row>
7560

76-
<div class="form-group form-group-aligned row">
77-
<label class="col-4 col-form-label">{{ "contents.scheduledAt" | sqxTranslate }}</label>
78-
<div class="col-8">{{ contentSelected.scheduleJob.dueTime | sqxFullDateTime }}</div>
79-
</div>
61+
<sqx-form-row centered for="scheduledAt" hideError label="contents.scheduledAt" labelSize="lg">
62+
{{ contentSelected.scheduleJob.dueTime | sqxFullDateTime }}
63+
</sqx-form-row>
8064

81-
<div class="form-group form-group-aligned row">
82-
<label class="col-4 col-form-label">{{ "contents.scheduledBy" | sqxTranslate }}</label>
83-
<div class="col-8">
84-
<img class="user-picture" [src]="contentSelected.scheduleJob.scheduledBy | sqxUserPictureRef" />
85-
{{ contentSelected.scheduleJob.scheduledBy | sqxUserNameRef }}
86-
</div>
87-
</div>
65+
<sqx-form-row centered for="scheduledBy" hideError label="contents.scheduledBy" labelSize="lg">
66+
<img class="user-picture" [src]="contentSelected.scheduleJob.scheduledBy | sqxUserPictureRef" />
67+
{{ contentSelected.scheduleJob.scheduledBy | sqxUserNameRef }}
68+
</sqx-form-row>
8869

8970
@if (contentSelected.canCancelStatus) {
9071
<hr />

0 commit comments

Comments
 (0)