Skip to content

Commit

Permalink
Merge branch 'main' into feature/dev-3315-cardinality-for-comments-on…
Browse files Browse the repository at this point in the history
…-regions-set-to-optional

* main:
  chore: add sentry error tracker (#1507)
  feat: watermark with radios and inputs (DEV-3313) (#1506)
  fix: resource class item autocomplete refresh and loading (DEV-3371) (#1504)
  feat: watermark with radios and inputs (DEV-3313) (#1502)
  refactor: type chip list input component (#1501)
  refactor: type common input (#1500)
  • Loading branch information
irmastnt committed Mar 7, 2024
2 parents 08e3b61 + bbcd255 commit ec38b93
Show file tree
Hide file tree
Showing 54 changed files with 2,647 additions and 232 deletions.
3 changes: 3 additions & 0 deletions .github/workflows/main.yml
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,9 @@ jobs:
echo "//npm.pkg.github.com/:_authToken=${{ secrets.ORG_GITHUB_PACKAGES_PAT }}" > ~/.npmrc
echo "registry=https://npm.pkg.github.com/dasch-swiss" >> ~/.npmrc
- run: make docker-publish
- run: npm run sentry:sourcemaps
env:
SECRET_VARIABLE: ${{ secrets.SENTRY_AUTH_TOKEN }}

trigger-dev-deployment:
name: Trigger deployment to DEV
Expand Down
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -60,3 +60,6 @@ Thumbs.db
#E2E
/.nx
apps/dsp-app/cypress/screenshots

# Sentry Config File
.sentryclirc
18 changes: 17 additions & 1 deletion apps/dsp-app/src/app/app.module.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { ClipboardModule } from '@angular/cdk/clipboard';
import { CommonModule } from '@angular/common';
import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule } from '@angular/common/http';
import { ErrorHandler, NgModule, NgZone } from '@angular/core';
import { APP_INITIALIZER, ErrorHandler, NgModule, NgZone } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Router } from '@angular/router';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
import { MatJDNConvertibleCalendarDateAdapterModule } from '@dasch-swiss/jdnconvertiblecalendardateadapter';
import { AdvancedSearchComponent } from '@dasch-swiss/vre/advanced-search';
Expand Down Expand Up @@ -35,6 +36,8 @@ import {
} from '@dasch-swiss/vre/shared/app-string-literal';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import * as Sentry from '@sentry/angular-ivy';
import { IMaskModule } from 'angular-imask';
import { AngularSplitModule } from 'angular-split';
import { PdfViewerModule } from 'ng2-pdf-viewer';
import { ColorPickerModule } from 'ngx-color-picker';
Expand Down Expand Up @@ -81,6 +84,7 @@ import { CreateProjectFormPageComponent } from './project/create-project-form-pa
import { DataModelsComponent } from './project/data-models/data-models.component';
import { DescriptionComponent } from './project/description/description.component';
import { EditProjectFormPageComponent } from './project/edit-project-form-page/edit-project-form-page.component';
import { ImageDisplayAbsoluteComponent } from './project/image-settings/image-display-absolute.component';
import { ImageDisplayRatioComponent } from './project/image-settings/image-display-ratio.component';
import { ImageSettingsComponent } from './project/image-settings/image-settings.component';
import { ActionBubbleComponent } from './project/list/action-bubble/action-bubble.component';
Expand Down Expand Up @@ -327,6 +331,7 @@ export function httpLoaderFactory(httpClient: HttpClient) {
DataModelsComponent,
IsFalsyPipe,
CreateListItemDialogComponent,
ImageDisplayAbsoluteComponent,
],
imports: [
AngularSplitModule,
Expand All @@ -342,6 +347,7 @@ export function httpLoaderFactory(httpClient: HttpClient) {
CommonModule,
FormsModule,
HttpClientModule,
IMaskModule,
MaterialModule,
MatJDNConvertibleCalendarDateAdapterModule,
NgxSkeletonLoaderModule,
Expand Down Expand Up @@ -404,6 +410,16 @@ export function httpLoaderFactory(httpClient: HttpClient) {
useClass: IiifWithCredentialsInterceptor,
multi: true,
},
{
provide: Sentry.TraceService,
deps: [Router],
},
{
provide: APP_INITIALIZER,
useFactory: () => () => {},
deps: [Sentry.TraceService],
multi: true,
},
],
bootstrap: [AppComponent],
})
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Location } from '@angular/common';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { UntypedFormBuilder, Validators } from '@angular/forms';
import { FormBuilder, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { NotificationService } from '@dasch-swiss/vre/shared/app-notification';
import { AuthService } from '@dasch-swiss/vre/shared/app-session';
Expand All @@ -12,19 +12,18 @@ import { finalize, takeLast, tap } from 'rxjs/operators';
template: `
<form [formGroup]="form" (ngSubmit)="login()" class="login-form">
<app-common-input
[formGroup]="form"
controlName="username"
[control]="form.controls.username"
placeholder="Username"
data-cy="username-input"></app-common-input>
<mat-form-field data-cy="password-input">
<input
placeholder="Password"
autocomplete="current-password"
formControlName="password"
[formControl]="form.controls.password"
matInput
type="password" />
<mat-error *ngIf="form.get('password').errors as errors">
<mat-error *ngIf="form.controls.password.errors as errors">
{{ errors | humanReadableError }}
</mat-error>
</mat-form-field>
Expand Down Expand Up @@ -63,7 +62,7 @@ export class LoginFormComponent implements OnInit, OnDestroy {
private subscription: Subscription;

constructor(
private _fb: UntypedFormBuilder,
private _fb: FormBuilder,
private router: Router,
private _authService: AuthService,
private route: ActivatedRoute,
Expand Down
12 changes: 12 additions & 0 deletions apps/dsp-app/src/app/main/directive/input-masks.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { IMask } from 'angular-imask';

export class InputMasks {
public static minMaxInputMask(min: number, max: number) {
return {
mask: IMask.MaskedNumber,
min,
max,
autofix: true,
};
}
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { COMMA, ENTER } from '@angular/cdk/keycodes';
import { Component, Input } from '@angular/core';
import { FormArray, FormBuilder, FormGroup, ValidationErrors, ValidatorFn } from '@angular/forms';
import { FormArray, FormBuilder, FormControl, ValidationErrors, ValidatorFn } from '@angular/forms';
import { MatChipInputEvent } from '@angular/material/chips';

@Component({
Expand Down Expand Up @@ -28,8 +28,7 @@ import { MatChipInputEvent } from '@angular/material/chips';
`,
})
export class ChipListInputComponent {
@Input() formGroup: FormGroup;
@Input() controlName: string;
@Input() formArray: FormArray<FormControl<string>>;
@Input() chipsRequired = true;
@Input() validators: ValidatorFn[];

Expand All @@ -38,10 +37,6 @@ export class ChipListInputComponent {

constructor(private _fb: FormBuilder) {}

get formArray() {
return this.formGroup.controls[this.controlName] as FormArray;
}

addKeyword(event: MatChipInputEvent): void {
this.addChipFormError = null;
const input = event.chipInput.inputElement;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,29 +1,22 @@
import { Component, Input } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { FormControl } from '@angular/forms';

@Component({
selector: 'app-common-input',
template: `
<mat-form-field style="width: 100%">
<mat-icon matIconPrefix *ngIf="prefixIcon">{{ prefixIcon }}</mat-icon>
<input matInput [placeholder]="placeholder" [formControl]="formControl" />
<mat-error *ngIf="formControl.errors as errors">
<input matInput [placeholder]="placeholder" [formControl]="control" />
<mat-error *ngIf="control.errors as errors">
{{ errors | humanReadableError: validatorErrors }}
</mat-error>
</mat-form-field>
`,
styles: [':host { display: block;}'],
})
export class CommonInputComponent {
@Input() formGroup: FormGroup;
@Input() controlName: string;
@Input() control: FormControl<string>;
@Input() placeholder: string;
@Input() prefixIcon: string | null = null;
@Input() validatorErrors: { errorKey: string; message: string }[] | null = null;

get formControl() {
return this.formGroup.controls[this.controlName] as FormControl;
}

protected readonly FormGroup = FormGroup;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import { Component, Input } from '@angular/core';

@Component({
selector: 'app-image-display-absolute',
template: ` <div class="frame">
<div class="text">Example image with width: {{ bigWidth }}px</div>
<div
[ngStyle]="{ width: (widthPx / bigWidth) * 300 + 'px', height: (widthPx / bigWidth) * 200 + 'px' }"
class="back-rectangle">
<div class="arrow left-arrow"></div>
<div class="arrow right-arrow"></div>
<div class="helper">
{{ widthPx }}
px
</div>
</div>
</div>`,
styles: [
`
.frame {
background: gray;
width: 300px;
height: 200px;
position: relative;
}
.text {
width: 100%;
text-align: center;
position: absolute;
top: 20px;
}
.back-rectangle {
background: darkgray;
bottom: 0;
right: 0;
position: absolute;
}
.helper {
position: absolute;
bottom: -40px;
right: 0;
text-align: center;
width: 100%;
min-width: 100px;
}
.arrow {
position: absolute;
height: 1px; /* Adjust the height of the stick */
background-color: red; /* Adjust the color of the stick */
right: 0;
bottom: -20px;
width: 100%;
}
.left-arrow::before,
.right-arrow::before {
content: '';
position: absolute;
top: -5px;
width: 0;
height: 0;
border-top: 5px solid transparent; /* Adjust the height of the arrow */
border-bottom: 5px solid transparent; /* Adjust the height of the arrow */
}
.left-arrow::before {
right: 0;
border-left: 10px solid red; /* Adjust the width and color of the arrow */
}
.right-arrow::before {
left: 0;
border-right: 10px solid red; /* Adjust the width and color of the arrow */
}
`,
],
})
export class ImageDisplayAbsoluteComponent {
@Input() widthPx: number;
readonly bigWidth = 2048;
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,24 @@ import { Component, Input } from '@angular/core';

@Component({
selector: 'app-image-display-ratio',
template: `
<div class="frame">
<div
[ngStyle]="{
width: ratio * 330 + 'px',
height: ratio * 390 + 'px'
}"
[style.filter]="!isWatermark ? 'blur(' + Math.ceil((1 - ratio) * 4) + 'px)' : null"
class="back-rectangle"></div>
template: ` <div class="frame">
<div [ngStyle]="{ width: ratio * 300 + 'px', height: ratio * 200 + 'px' }" class="back-rectangle">
<div class="arrow left-arrow"></div>
<div class="arrow right-arrow"></div>
<div class="helper">Ratio: {{ Math.ceil(ratio * 100) }}%</div>
<div class="watermark" *ngIf="isWatermark"></div>
</div>
`,
</div>`,
styles: [
`
.frame {
background: gray;
width: 330px;
height: 390px;
width: 300px;
height: 200px;
position: relative;
}
.back-rectangle {
background: no-repeat center/100% url('../../../assets/images/image-settings.jpg');
background: darkgray;
bottom: 0;
right: 0;
position: absolute;
Expand All @@ -40,20 +34,41 @@ import { Component, Input } from '@angular/core';
width: 100%;
}
.watermark {
.arrow {
position: absolute;
top: 0;
background: no-repeat center/100% url('../../../assets/images/image-settings-watermark.png');
background-repeat: repeat-y;
opacity: 0.5;
width: 100%;
height: 100%;
height: 1px; /* Adjust the height of the stick */
background-color: red; /* Adjust the color of the stick */
right: 0;
bottom: 0px;
width: 119%;
transform: rotate(33deg);
transform-origin: bottom right;
}
.left-arrow::before,
.right-arrow::before {
content: '';
position: absolute;
top: -5px;
width: 0;
height: 0;
border-top: 5px solid transparent; /* Adjust the height of the arrow */
border-bottom: 5px solid transparent; /* Adjust the height of the arrow */
}
.left-arrow::before {
right: 0;
border-left: 10px solid red; /* Adjust the width and color of the arrow */
}
.right-arrow::before {
left: 0;
border-right: 10px solid red; /* Adjust the width and color of the arrow */
}
`,
],
})
export class ImageDisplayRatioComponent {
@Input() ratio: number;
@Input() isWatermark: boolean = false;
protected readonly Math = Math;
}

0 comments on commit ec38b93

Please sign in to comment.