Skip to content

Commit

Permalink
Removal of storing the default image URL (#66)
Browse files Browse the repository at this point in the history 
* fix: remove the use of the default image url as logo url

* fix: simplify code

* fix: moved operator displaying to internal tab

* fix: detect unique constraint violations

* fix: detect unique constraint violations

* fix: separate upload button
  • Loading branch information
@HenryT-CG
HenryT-CG authored Mar 4, 2024
1 parent 95c9216 commit c097560
Show file tree
Hide file tree
Showing 13 changed files with 144 additions and 152 deletions.
19 changes: 19 additions & 0 deletions src/app/product-store/product-detail/product-intern/product-intern.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,25 @@
</div>
</div>

<div class="flex flex-wrap row-gap-4">
<div class="w-12 sm:w-6 px-3">
<span class="p-float-label">
<input
pInputText
type="text"
readonly
id="portal_detail_internal_field_operator"
class="w-full pt-3 pb-2"
[value]="(product?.operator ? 'PRODUCT.OPERATOR.DEPLOYMENT' : 'PRODUCT.OPERATOR.MANUAL') | translate"
[pTooltip]="'PRODUCT.TOOLTIPS.OPERATOR' | translate"
tooltipPosition="top"
tooltipEvent="focus"
/>
<label for="portal_detail_internal_field_operator"> {{ 'PRODUCT.OPERATOR' | translate }}</label>
</span>
</div>
</div>

<div class="flex flex-wrap row-gap-4">
<div class="w-12 px-3">
<span class="p-float-label">
Expand Down
80 changes: 32 additions & 48 deletions src/app/product-store/product-detail/product-props/product-props.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,59 +45,44 @@
</span>
</div>

<div class="w-full sm:w-10 md:w-9 lg:w-6 px-3">
<div class="w-full sm:w-12 md:w-9 lg:w-12 px-3">
<div class="flex flex-wrap sm:flex-nowrap align-items-center row-gap-2 column-gap-4">
<input hidden type="file" accept="image/*" #selectedFileInputLogo (change)="onFileUpload($event, 'logo')" />
<app-image-container
*ngIf="fetchingLogoUrl"
[id]="'product_detail_item_logo_image'"
[imageUrl]="fetchingLogoUrl"
[small]="true"
[title]="'LOGO.TOOLTIPS.' + (fetchingLogoUrl ? 'IMAGE' : 'PLACEHOLDER') | translate"
></app-image-container>
<div class="flex flex-column w-full">
<div class="p-inputgroup mb-1" controlErrorAnchor>
<span class="p-float-label" [title]="'PRODUCT.TOOLTIPS.IMAGE_URL' | translate">
<input
pInputText
type="text"
id="product_detail_item_imageUrl"
formControlName="imageUrl"
(input)="inputChange($event)"
/>
<label for="product_detail_item_imageUrl">{{ 'PRODUCT.IMAGE_URL' | translate }}</label>
</span>
<span
id="product_detail_item_upload_logo2"
class="p-inputgroup-addon bg-primary pseudo-button"
[ngClass]="
changeMode === 'VIEW' ||
this.formGroup.controls['name'].value === '' ||
this.formGroup.controls['name'].value === null
? 'p-disabled'
: 'cursor-pointer'
"
[title]="'LOGO.TOOLTIPS.UPLOAD' | translate"
(click)="changeMode !== 'VIEW' ? selectedFileInputLogo.click() : null"
>
<span class="pi pi-upload"></span>
</span>
</div>
</div>
<input hidden type="file" accept="image/*" #selectedFileInputLogo (change)="onFileUpload($event, 'logo')" />
<button
pButton
id="product_detail_item_upload_logo2"
icon="pi pi-upload"
class="action-button p-button-icon-only"
[ngClass]="
changeMode === 'VIEW' ||
this.formGroup.controls['name'].value === '' ||
this.formGroup.controls['name'].value === null
? 'p-disabled'
: 'cursor-pointer'
"
[title]="'LOGO.TOOLTIPS.UPLOAD' | translate"
(click)="changeMode !== 'VIEW' ? selectedFileInputLogo.click() : null"
></button>
<span class="p-float-label w-full" [title]="'PRODUCT.TOOLTIPS.IMAGE_URL' | translate">
<input
pInputText
type="text"
class="w-full"
id="product_detail_item_image_url"
formControlName="imageUrl"
(input)="inputChange($event)"
/>
<label for="product_detail_item_image_url">{{ 'PRODUCT.IMAGE_URL' | translate }}</label>
</span>
</div>
</div>
<div class="w-full sm:w-10 md:w-9 lg:w-6 px-3">
<span class="p-float-label" [title]="'PRODUCT.TOOLTIPS.CLASSIFICATIONS' | translate">
<input
pInputText
type="text"
class="w-full"
id="product_detail_item_classifications"
formControlName="classifications"
/>
<label for="product_detail_item_classifications">{{ 'PRODUCT.CLASSIFICATIONS' | translate }}</label>
</span>
</div>

<div class="w-full sm:w-10 md:w-9 lg:w-6 px-3">
<span class="p-float-label" controlErrorAnchor>
Expand All @@ -124,16 +109,15 @@
</span>
</div>
<div class="w-full sm:w-10 md:w-9 lg:w-6 px-3">
<span class="p-float-label" [title]="'PRODUCT.TOOLTIPS.OPERATOR' | translate" controlErrorAnchor>
<span class="p-float-label" [title]="'PRODUCT.TOOLTIPS.CLASSIFICATIONS' | translate">
<input
readonly
pInputText
type="text"
class="w-full"
id="product_detail_item_operator"
[value]="'PRODUCT.OPERATOR.' + (product?.operator ? 'DEPLOYMENT' : 'MANUAL') | translate"
id="product_detail_item_classifications"
formControlName="classifications"
/>
<label for="product_detail_item_operator">{{ 'PRODUCT.OPERATOR' | translate }}</label>
<label for="product_detail_item_classifications">{{ 'PRODUCT.CLASSIFICATIONS' | translate }}</label>
</span>
</div>

Expand Down
66 changes: 55 additions & 11 deletions src/app/product-store/product-detail/product-props/product-props.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ const mockForm = new FormGroup<ProductDetailForm>({
Validators.maxLength(255),
productNameValidator()
]),
operator: new FormControl<boolean | null>(null),
version: new FormControl<string | null>(null, [Validators.required, Validators.maxLength(255)]),
description: new FormControl<string | null>(null, [Validators.maxLength(255)]),
imageUrl: new FormControl<string | null>(null, [Validators.maxLength(255)]),
Expand Down Expand Up @@ -157,7 +156,6 @@ describe('ProductPropertyComponent', () => {
const formGroup = new FormGroup<ProductDetailForm>({
id: new FormControl<string | null>('id'),
name: new FormControl<string | null>('name'),
operator: new FormControl<boolean | null>(null),
version: new FormControl<string | null>('version'),
description: new FormControl<string | null>(null),
imageUrl: new FormControl<string | null>(null),
Expand All @@ -180,7 +178,6 @@ describe('ProductPropertyComponent', () => {
const formGroup = new FormGroup<ProductDetailForm>({
id: new FormControl<string | null>('id'),
name: new FormControl<string | null>('name'),
operator: new FormControl<boolean | null>(null),
version: new FormControl<string | null>('version'),
description: new FormControl<string | null>(null),
imageUrl: new FormControl<string | null>(null),
Expand All @@ -203,7 +200,6 @@ describe('ProductPropertyComponent', () => {
const formGroup = new FormGroup<ProductDetailForm>({
id: new FormControl<string | null>('id'),
name: new FormControl<string | null>('name'),
operator: new FormControl<boolean | null>(null),
version: new FormControl<string | null>('version'),
description: new FormControl<string | null>(null),
imageUrl: new FormControl<string | null>(null),
Expand All @@ -224,17 +220,26 @@ describe('ProductPropertyComponent', () => {
})
})

it('should display unique constraint error if error code points to it', () => {
it('should display unique constraint error if name already exists', () => {
const error = {
error: {
errorCode: 'PERSIST_ENTITY_FAILED'
errorCode: 'PERSIST_ENTITY_FAILED',
detail:
"could not execute statement [ERROR: duplicate key value violates unique constraint 'ui_product_name' ...",
params: [
{
key: 'constraint',
value:
"could not execute statement [ERROR: duplicate key value violates unique constraint 'ui_product_name' ..."
},
{ key: 'constraintName', value: 'ui_product_name' }
]
}
}
apiServiceSpy.updateProduct.and.returnValue(throwError(() => error))
const formGroup = new FormGroup<ProductDetailForm>({
id: new FormControl<string | null>('id'),
name: new FormControl<string | null>('name'),
operator: new FormControl<boolean | null>(null),
version: new FormControl<string | null>('version'),
description: new FormControl<string | null>(null),
imageUrl: new FormControl<string | null>(null),
Expand All @@ -244,15 +249,56 @@ describe('ProductPropertyComponent', () => {
classifications: new FormControl<string[] | null>(null)
})
component.formGroup = formGroup as FormGroup<ProductDetailForm>
component.changeMode = 'EDIT'
component.formGroup.controls['name'].setValue('')

component.onSave()

expect(component.formGroup.valid).toBeTrue()
expect(msgServiceSpy.error).toHaveBeenCalledWith({
summaryKey: 'ACTIONS.EDIT.PRODUCT.NOK',
detailKey: 'VALIDATION.PRODUCT.UNIQUE_CONSTRAINT.NAME'
})
})

it('should display unique constraint error if basepath already exists', () => {
const error = {
error: {
errorCode: 'PERSIST_ENTITY_FAILED',
detail:
"could not execute statement [ERROR: duplicate key value violates unique constraint 'ui_product_base_path' ...",
params: [
{
key: 'constraint',
value:
"could not execute statement [ERROR: duplicate key value violates unique constraint 'ui_product_base_path' ..."
},
{ key: 'constraintName', value: 'ui_product_base_path' }
]
}
}
apiServiceSpy.updateProduct.and.returnValue(throwError(() => error))
const formGroup = new FormGroup<ProductDetailForm>({
id: new FormControl<string | null>('id'),
name: new FormControl<string | null>('name'),
version: new FormControl<string | null>('version'),
description: new FormControl<string | null>(null),
imageUrl: new FormControl<string | null>(null),
basePath: new FormControl<string | null>('path'),
displayName: new FormControl<string | null>('display'),
iconName: new FormControl<string | null>('icon'),
classifications: new FormControl<string[] | null>(null)
})
component.formGroup = formGroup as FormGroup<ProductDetailForm>
component.changeMode = 'EDIT'
component.formGroup.controls['basePath'].setValue('')

component.onSave()

expect(component.formGroup.valid).toBeTrue()
expect(msgServiceSpy.error).toHaveBeenCalledWith({
summaryKey: 'ACTIONS.EDIT.PRODUCT.NOK',
detailKey: 'VALIDATION.PRODUCT.UNIQUE_CONSTRAINT'
detailKey: 'VALIDATION.PRODUCT.UNIQUE_CONSTRAINT.BASEPATH'
})
})

Expand All @@ -274,7 +320,6 @@ describe('ProductPropertyComponent', () => {
const formGroup = new FormGroup<ProductDetailForm>({
id: new FormControl<string | null>('id'),
name: new FormControl<string | null>('name'),
operator: new FormControl<boolean | null>(null),
version: new FormControl<string | null>('version'),
description: new FormControl<string | null>(null),
imageUrl: new FormControl<string | null>(null),
Expand All @@ -298,7 +343,6 @@ describe('ProductPropertyComponent', () => {
const formGroup = new FormGroup<ProductDetailForm>({
id: new FormControl<string | null>(null, Validators.required),
name: new FormControl<string | null>('name'),
operator: new FormControl<boolean | null>(null),
version: new FormControl<string | null>('version'),
description: new FormControl<string | null>(null),
imageUrl: new FormControl<string | null>(null),
Expand Down Expand Up @@ -416,7 +460,7 @@ describe('ProductPropertyComponent', () => {
it('should return an image url', () => {
component.formGroup.controls['imageUrl'].setValue('url')

const result = component.getImageUrl()
const result = component.prepareImageUrl()

expect(result).toEqual('url')
})
Expand Down
38 changes: 10 additions & 28 deletions src/app/product-store/product-detail/product-props/product-props.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import { ChangeMode } from '../product-detail.component'
export interface ProductDetailForm {
id: FormControl<string | null>
name: FormControl<string | null>
operator: FormControl<boolean | null>
version: FormControl<string | null>
description: FormControl<string | null>
imageUrl: FormControl<string | null>
Expand Down Expand Up @@ -74,7 +73,6 @@ export class ProductPropertyComponent implements OnChanges, OnInit {
productNameValidator()
]),
displayName: new FormControl(null, [Validators.required, Validators.minLength(2), Validators.maxLength(255)]),
operator: new FormControl(null),
version: new FormControl(null, [Validators.required, Validators.maxLength(255)]),
description: new FormControl(null, [Validators.maxLength(255)]),
imageUrl: new FormControl(null, [Validators.maxLength(255)]),
Expand All @@ -88,29 +86,19 @@ export class ProductPropertyComponent implements OnChanges, OnInit {

ngOnInit(): void {
let productName = this.formGroup.controls['name'].value!
let requestParametersGet: GetImageRequestParams = {
refId: productName,
refType: RefType.Logo
}
if (
requestParametersGet.refId === undefined ||
requestParametersGet.refId === '' ||
requestParametersGet.refId === null
) {
if (!productName) {
this.logoImageWasUploaded = false
} else {
this.imageApi.getImage(requestParametersGet).subscribe(() => {
this.imageApi.getImage({ refId: productName, refType: RefType.Logo }).subscribe(() => {
this.logoImageWasUploaded = true
})
}
this.fetchingLogoUrl = this.getImageUrl()
this.fetchingLogoUrl = this.prepareImageUrl()
}

ngOnChanges(): void {
if (this.product) {
this.formGroup.patchValue({
...this.product
})
this.formGroup.patchValue({ ...this.product })
this.productId = this.changeMode !== 'COPY' ? this.product.id : undefined
this.productName = this.product.name // business key => manage the change!
} else {
Expand All @@ -135,17 +123,13 @@ export class ProductPropertyComponent implements OnChanges, OnInit {
}

private createProduct() {
let imgUrl = this.formGroup.controls['imageUrl'].value
if ((imgUrl == '' || imgUrl == null) && !this.logoImageWasUploaded) {
imgUrl = 'http://pragmaticscrum.info/wp-content/uploads/2016/06/t1.jpg'
}
this.productApi
.createProduct({
createProductRequest: {
name: this.formGroup.value['name'],
version: this.formGroup.value['version'],
description: this.formGroup.value['description'],
imageUrl: imgUrl,
imageUrl: this.formGroup.controls['imageUrl'].value,
basePath: this.formGroup.value['basePath'],
displayName: this.formGroup.value['displayName'],
iconName: this.formGroup.value['iconName'],
Expand All @@ -162,18 +146,14 @@ export class ProductPropertyComponent implements OnChanges, OnInit {
}

private updateProduct() {
let imgUrl = this.formGroup.controls['imageUrl'].value
if ((imgUrl == '' || imgUrl == null) && !this.logoImageWasUploaded) {
imgUrl = 'http://pragmaticscrum.info/wp-content/uploads/2016/06/t1.jpg'
}
this.productApi
.updateProduct({
id: this.productId!,
updateProductRequest: {
name: this.formGroup.value['name'],
version: this.formGroup.value['version'],
description: this.formGroup.value['description'],
imageUrl: imgUrl,
imageUrl: this.formGroup.controls['imageUrl'].value,
basePath: this.formGroup.value['basePath'],
displayName: this.formGroup.value['displayName'],
iconName: this.formGroup.value['iconName'],
Expand All @@ -193,7 +173,9 @@ export class ProductPropertyComponent implements OnChanges, OnInit {
if (err.error?.errorCode === 'PERSIST_ENTITY_FAILED') {
this.msgService.error({
summaryKey: 'ACTIONS.' + this.changeMode + '.PRODUCT.NOK',
detailKey: 'VALIDATION.PRODUCT.UNIQUE_CONSTRAINT'
detailKey:
'VALIDATION.PRODUCT.UNIQUE_CONSTRAINT.' +
(err.error?.detail.indexOf('ui_product_base_path') > 0 ? 'BASEPATH' : 'NAME')
})
} else {
this.msgService.error({ summaryKey: 'ACTIONS.' + this.changeMode + '.PRODUCT.NOK' })
Expand Down Expand Up @@ -259,7 +241,7 @@ export class ProductPropertyComponent implements OnChanges, OnInit {
}
}

getImageUrl(): string {
prepareImageUrl(): string {
let imgUrl = this.formGroup.controls['imageUrl'].value
if (imgUrl == '' || imgUrl == null) {
return this.imageApi.configuration.basePath + '/images/' + this.formGroup.controls['name'].value + '/logo'
Expand Down
Loading

0 comments on commit c097560

Please sign in to comment.