Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix code smells #92

Merged
merged 2 commits into from
Mar 13, 2024
Merged

fix code smells #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9db4503
fix: code smells
HenryT-CG Mar 13, 2024
6c2c653
fix: code smells
HenryT-CG Mar 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/app/shared/image-container/image-container.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
[class]="'image-object image-' + (small ? 'sm' : 'lg') + ' sm:image-lg'"
[src]="imageUrl"
(error)="onImageError()"
alt="Image"
alt="logo"
/>
<svg
[id]="id"
Expand Down
52 changes: 36 additions & 16 deletions src/app/theme/theme-designer/theme-designer.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@
[title]="'THEME.DETAIL.AUTO_APPLY.TOOLTIP' | translate"
>
<p-inputSwitch
id="autoApplyToggle"
id="theme_designer_header_is_current_theme"
name="autoApplyToggle"
[disabled]="themeIsCurrentUsedTheme"
[(ngModel)]="autoApply || themeIsCurrentUsedTheme"
></p-inputSwitch>
<label for="autoApplyToggle">{{ 'THEME.DETAIL.AUTO_APPLY' | translate }}</label>
<label for="theme_designer_header_is_current_theme">{{ 'THEME.DETAIL.AUTO_APPLY' | translate }}</label>
</div>
<span
*ngIf="themeIsCurrentUsedTheme"
Expand All @@ -31,6 +31,7 @@
<span class="p-float-label">
<p-dropdown
#themeTemplate
id="theme_designer_fields_selected_theme"
[options]="themeTemplates"
styleClass="w-full"
[(ngModel)]="themeTemplateSelectedId"
Expand All @@ -39,7 +40,9 @@
[autoDisplayFirst]="false"
[title]="'THEME.TEMPLATE.SELECTOR.TOOLTIP' | translate"
></p-dropdown>
<label for="themeSelector" class="white-space-nowrap">{{ 'THEME.TEMPLATE.SELECTOR' | translate }}</label>
<label for="theme_designer_fields_selected_theme" class="white-space-nowrap">
{{ 'THEME.TEMPLATE.SELECTOR' | translate }}</label
>
</span>
</div>
</div>
Expand All @@ -52,14 +55,14 @@
<div [formGroup]="basicForm" class="grid grid-nogutter formgrid p-fluid mx-1">
<div class="field col-12 mb-4">
<span class="p-float-label" controlErrorAnchor>
<input pInputText type="text" id="name" formControlName="name" />
<label class="ocx-required-label" for="name">Name</label>
<input pInputText type="text" id="theme_designer_field_name" formControlName="name" />
<label class="ocx-required-label" for="theme_designer_field_name">Name</label>
</span>
</div>
<div class="field col-12 mb-4">
<span class="p-float-label">
<input pInputText type="text" id="description" formControlName="description" />
<label for="theme_detail_item_description">{{ 'THEME.DESCRIPTION' | translate }}</label>
<input pInputText type="text" id="theme_designer_field_description" formControlName="description" />
<label for="theme_designer_field_description">{{ 'THEME.DESCRIPTION' | translate }}</label>
</span>
</div>
<!-- helper inputs because p-fileupload does not work inside inputgroup -->
Expand Down Expand Up @@ -116,7 +119,7 @@
<i class="pi pi-upload"></i>
</span>
</div>
<label *ngIf="displayFileTypeErrorLogo" class="control-error">
<label *ngIf="displayFileTypeErrorLogo" for="theme_detail_upload_logo" class="control-error">
{{ 'VALIDATION.ERRORS.FILETYPE_PATTERN_ERROR' | translate }}
</label>
</div>
Expand Down Expand Up @@ -144,10 +147,11 @@
pInputText
type="text"
id="favicon"
id="theme_detail_upload_favicon"
formControlName="faviconUrl"
(input)="inputChange(theme, 'favicon')"
/>
<label for="favicon">Favicon</label>
<label for="theme_detail_upload_favicon">Favicon</label>
</span>
<div class="flex flex-column">
<span
Expand All @@ -160,7 +164,11 @@
</span>
</div>
</div>
<label *ngIf="this.displayFileTypeErrorFavicon" class="control-error">
<label
*ngIf="this.displayFileTypeErrorFavicon"
for="theme_detail_upload_favicon"
class="control-error"
>
{{ 'VALIDATION.ERRORS.FILETYPE_PATTERN_ERROR' | translate }}
</label>
</div>
Expand All @@ -177,16 +185,28 @@
<div class="col-12 sm:col-9 md:col-9 lg:col-9 xl:9">
<div class="p-inputgroup px-3">
<span class="p-float-label">
<input pInputText type="text" id="font-family" formControlName="font-family" class="w-full" />
<label for="font-family">font-family</label>
<input
pInputText
type="text"
id="theme_detail_font-family"
formControlName="font-family"
class="w-full"
/>
<label for="theme_detail_font-family">font-family</label>
</span>
</div>
</div>
<div class="col-12 sm:col-3 md:col-3 lg:col-3 xl:3">
<div class="p-inputgroup px-3">
<span class="p-float-label">
<input pInputText type="text" id="font-size" formControlName="font-size" class="w-full" />
<label for="font-size">font-size</label>
<input
pInputText
type="text"
id="theme_detail_font-size"
formControlName="font-size"
class="w-full"
/>
<label for="theme_detail_font-size">font-size</label>
</span>
</div>
</div>
Expand All @@ -203,11 +223,11 @@
<span class="p-float-label">
<input
pInputText
id="color-{{ item }}"
id="theme_detail_item_color-{{ item }}"
[formControlName]="item"
[value]="group.formGroup.value[item]"
/>
<label for="color-{{ item }}">{{ item }}</label>
<label for="theme_detail_item_color-{{ item }}">{{ item }}</label>
</span>
<p-overlayPanel #op>
<ng-template pTemplate>
Expand Down
8 changes: 4 additions & 4 deletions src/app/theme/theme-designer/theme-designer.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,22 +177,22 @@ describe('ThemeDesignerComponent', () => {

component.autoApply = true

const fontFormControlEl = fixture.debugElement.query(By.css('#font-family'))
const fontFormControlEl = fixture.debugElement.query(By.css('#theme_detail_font-family'))
expect(fontFormControlEl).toBeDefined()
fontFormControlEl.nativeElement.value = 'newFamily'
fontFormControlEl.nativeElement.dispatchEvent(new Event('input'))

const generalFormControlEl = fixture.debugElement.query(By.css('#color-primary-color'))
const generalFormControlEl = fixture.debugElement.query(By.css('#theme_detail_item_color-primary-color'))
expect(generalFormControlEl).toBeDefined()
generalFormControlEl.nativeElement.value = 'rgba(0, 0, 0, 0.87)'
generalFormControlEl.nativeElement.dispatchEvent(new Event('input'))

const topbarFormControlEl = fixture.debugElement.query(By.css('#color-topbar-bg-color'))
const topbarFormControlEl = fixture.debugElement.query(By.css('#theme_detail_item_color-topbar-bg-color'))
expect(topbarFormControlEl).toBeDefined()
topbarFormControlEl.nativeElement.value = '#000000'
topbarFormControlEl.nativeElement.dispatchEvent(new Event('input'))

const sidebarFormControlEl = fixture.debugElement.query(By.css('#color-menu-text-color'))
const sidebarFormControlEl = fixture.debugElement.query(By.css('#theme_detail_item_color-menu-text-color'))
expect(sidebarFormControlEl).toBeDefined()
sidebarFormControlEl.nativeElement.value = '#102030'
sidebarFormControlEl.nativeElement.dispatchEvent(new Event('input'))
Expand Down
38 changes: 17 additions & 21 deletions src/app/theme/theme-designer/theme-designer.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -419,7 +419,7 @@ export class ThemeDesignerComponent implements OnInit {

// Image Files
public onFileUpload(ev: Event, fieldType: 'logo' | 'favicon'): void {
var currThemeName = this.basicForm.controls['name'].value
let currThemeName = this.basicForm.controls['name'].value
this.displayFileTypeErrorLogo = false
this.displayFileTypeErrorFavicon = false
if (ev.target && (ev.target as HTMLInputElement).files) {
Expand All @@ -437,34 +437,33 @@ export class ThemeDesignerComponent implements OnInit {

saveImage(currThemeName: string, fieldType: string, files: FileList) {
// Set request parameter
var requestParameters: UploadImageRequestParams
let requestParameters: UploadImageRequestParams
const blob = new Blob([files[0]], { type: files[0].type })
var imageType: RefType
let imageType: RefType = RefType.Logo
if (fieldType === 'logo') {
this.fetchingLogoUrl = undefined
imageType = RefType.Logo
} else {
this.fetchingFaviconUrl = undefined
imageType = RefType.Favicon
}
requestParameters = {
contentLength: files.length,
refId: currThemeName!,
refId: currThemeName,
refType: imageType,
body: blob
}

var requestParametersGet: GetImageRequestParams
let requestParametersGet: GetImageRequestParams
requestParametersGet = {
refId: currThemeName!,
refId: currThemeName,
refType: imageType
}

this.imageApi.getImage(requestParametersGet).subscribe(
(res) => {
if (files[0].name.match(/^.*.(jpg|jpeg|png)$/)) {
this.imageApi.updateImage(requestParameters).subscribe((data) => {
if (fieldType == 'logo') {
if (fieldType === 'logo') {
this.imageLogoExists = true
this.fetchingLogoUrl = this.imageApi.configuration.basePath + '/images/' + currThemeName + '/' + fieldType
} else {
Expand All @@ -481,7 +480,7 @@ export class ThemeDesignerComponent implements OnInit {
if (files[0].name.match(/^.*.(jpg|jpeg|png)$/)) {
Array.from(files).forEach((file) => {
this.imageApi.uploadImage(requestParameters).subscribe((data) => {
if (fieldType == 'logo') {
if (fieldType === 'logo') {
this.imageLogoExists = true
this.fetchingLogoUrl =
this.imageApi.configuration.basePath + '/images/' + currThemeName + '/' + fieldType
Expand All @@ -503,8 +502,8 @@ export class ThemeDesignerComponent implements OnInit {
}

constraintUpload(): boolean {
var currThemeName = this.basicForm.controls['name'].value
if (currThemeName == null || currThemeName == '') {
const currThemeName = this.basicForm.controls['name'].value
if (currThemeName === null || currThemeName === '') {
return false
}
return true
Expand All @@ -514,38 +513,35 @@ export class ThemeDesignerComponent implements OnInit {
if (!theme) {
return undefined
}
if (imageType == 'logo') {
if (theme.logoUrl != null && theme.logoUrl != '') {
if (imageType === 'logo') {
if (theme.logoUrl !== null && theme.logoUrl != '') {
return theme.logoUrl
}
return this.imageApi.configuration.basePath + '/images/' + theme.name + '/logo'
} else {
if (theme.faviconUrl != null && theme.faviconUrl != '') {
if (theme.faviconUrl !== null && theme.faviconUrl !== '') {
return theme.faviconUrl
}
return this.imageApi.configuration.basePath + '/images/' + theme.name + '/favicon'
}
}

urlExists(url: string | undefined): boolean {
if (url == undefined || url === '') {
return true
}
return false
return !url || url === ''
}

inputChange(theme: Theme | undefined, fieldType: string) {
setTimeout(() => {
if (fieldType == 'logo') {
if (fieldType === 'logo') {
this.fetchingLogoUrl = this.basicForm.controls['logoUrl'].value
} else {
this.fetchingFaviconUrl = this.basicForm.controls['faviconUrl'].value
}

if (this.imageLogoExists && this.basicForm.controls['logoUrl'].value == '') {
if (this.imageLogoExists && this.basicForm.controls['logoUrl'].value === '') {
this.fetchingLogoUrl = this.imageApi.configuration.basePath + '/images/' + theme?.name + '/logo'
}
if (this.imageFaviconExists && this.basicForm.controls['faviconUrl'].value == '') {
if (this.imageFaviconExists && this.basicForm.controls['faviconUrl'].value === '') {
this.fetchingFaviconUrl = this.imageApi.configuration.basePath + '/images/' + theme?.name + '/favicon'
}
}, 1000)
Expand Down
Loading