Skip to content

Commit

Permalink
fix code smells (onecx#92)
Browse files Browse the repository at this point in the history 
* fix: code smells

* fix: code smells
  • Loading branch information
@HenryT-CG
HenryT-CG authored Mar 13, 2024
1 parent 80ef257 commit 5ec9487
Show file tree
Hide file tree
Showing 4 changed files with 58 additions and 42 deletions.
2 changes: 1 addition & 1 deletion src/app/shared/image-container/image-container.component.html
View file
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
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
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
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

0 comments on commit 5ec9487

Please sign in to comment.