feat: name in paths instead of id (#58)

Co-authored-by: Henry Täschner <[email protected]>
onecx · Jan 31, 2024 · 7af04be · 7af04be
1 parent 4384703
commit 7af04be
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 49 deletions.
diff --git a/src/app/theme/theme-designer/theme-designer.component.spec.ts b/src/app/theme/theme-designer/theme-designer.component.spec.ts
@@ -44,7 +44,8 @@ describe('ThemeDesignerComponent', () => {
     'getThemes',
     'updateTheme',
     'createTheme',
-    'getThemeById'
+    'getThemeById',
+    'getThemeByName'
   ])
 
   beforeEach(waitForAsync(() => {
@@ -79,6 +80,7 @@ describe('ThemeDesignerComponent', () => {
     msgServiceSpy.error.calls.reset()
     msgServiceSpy.info.calls.reset()
     themeApiSpy.getThemeById.calls.reset()
+    themeApiSpy.getThemeByName.calls.reset()
     themeApiSpy.updateTheme.calls.reset()
     themeApiSpy.createTheme.calls.reset()
     themeApiSpy.getThemes.calls.reset()
@@ -88,6 +90,7 @@ describe('ThemeDesignerComponent', () => {
     themeApiSpy.updateTheme.and.returnValue(of({}) as any)
     themeApiSpy.createTheme.and.returnValue(of({}) as any)
     themeApiSpy.getThemeById.and.returnValue(of({}) as any)
+    themeApiSpy.getThemeByName.and.returnValue(of({}) as any)
   }))
 
   describe('when constructing', () => {
@@ -117,13 +120,13 @@ describe('ThemeDesignerComponent', () => {
 
     it('should populate state and create forms', () => {
       const activatedRoute = TestBed.inject(ActivatedRoute)
-      spyOn(activatedRoute.snapshot.paramMap, 'get').and.returnValue('themeId')
+      spyOn(activatedRoute.snapshot.paramMap, 'get').and.returnValue('themeName')
 
       fixture = TestBed.createComponent(ThemeDesignerComponent)
       component = fixture.componentInstance
       fixture.detectChanges()
 
-      expect(component.themeId).toBe('themeId')
+      expect(component.themeName).toBe('themeName')
       expect(component.themeIsCurrentUsedTheme).toBeFalse()
       expect(Object.keys(component.fontForm.controls).length).toBe(themeVariables.font.length)
       expect(Object.keys(component.generalForm.controls).length).toBe(themeVariables.general.length)
@@ -239,20 +242,21 @@ describe('ThemeDesignerComponent', () => {
       const themeResponse = {
         resource: themeData
       }
-      themeApiSpy.getThemeById.and.returnValue(of(themeResponse) as any)
+      themeApiSpy.getThemeByName.and.returnValue(of(themeResponse) as any)
       component.mode = 'EDIT'
-      component.themeId = 'themeId'
+      component.themeName = 'themeName'
 
       component.ngOnInit()
 
       expect(component.theme).toBe(themeData)
-      expect(themeApiSpy.getThemeById).toHaveBeenCalledOnceWith({ id: 'themeId' })
+      expect(themeApiSpy.getThemeByName).toHaveBeenCalledOnceWith({ name: 'themeName' })
       expect(component.basicForm.controls['name'].value).toBe(themeData.name)
       expect(component.basicForm.controls['description'].value).toBe(themeData.description)
       expect(component.basicForm.controls['logoUrl'].value).toBe(themeData.logoUrl)
       expect(component.basicForm.controls['faviconUrl'].value).toBe(themeData.faviconUrl)
       expect(component.fontForm.controls['font-family'].value).toBe('myFont')
       expect(component.generalForm.controls['primary-color'].value).toBe('rgb(0,0,0)')
+      expect(component.themeId).toBe('id')
     })
 
     it('should fetch logo and favicon from backend on edit mode when no http[s] present', () => {
@@ -264,9 +268,9 @@ describe('ThemeDesignerComponent', () => {
       const themeResponse = {
         resource: themeData
       }
-      themeApiSpy.getThemeById.and.returnValue(of(themeResponse) as any)
+      themeApiSpy.getThemeByName.and.returnValue(of(themeResponse) as any)
       component.mode = 'EDIT'
-      component.themeId = 'themeId'
+      component.themeName = 'themeName'
 
       component.ngOnInit()
 
@@ -282,9 +286,9 @@ describe('ThemeDesignerComponent', () => {
       const themeResponse = {
         resource: themeData
       }
-      themeApiSpy.getThemeById.and.returnValue(of(themeResponse) as any)
+      themeApiSpy.getThemeByName.and.returnValue(of(themeResponse) as any)
       component.mode = 'EDIT'
-      component.themeId = 'themeId'
+      component.themeName = 'themeName'
 
       component.ngOnInit()
 
@@ -376,7 +380,7 @@ describe('ThemeDesignerComponent', () => {
       const themeResponse = {
         resource: themeData
       }
-      themeApiSpy.getThemeById.and.returnValue(of(themeResponse) as any)
+      themeApiSpy.getThemeByName.and.returnValue(of(themeResponse) as any)
       themeApiSpy.updateTheme.and.returnValue(throwError(() => new Error()))
 
       component.actions$?.subscribe((actions) => {
@@ -408,7 +412,7 @@ describe('ThemeDesignerComponent', () => {
       const themeResponse = {
         resource: themeData
       }
-      themeApiSpy.getThemeById.and.returnValue(of(themeResponse) as any)
+      themeApiSpy.getThemeByName.and.returnValue(of(themeResponse) as any)
 
       component.fontForm.patchValue({
         'font-family': 'updatedFont'
@@ -471,7 +475,7 @@ describe('ThemeDesignerComponent', () => {
       const themeResponse = {
         resource: themeData
       }
-      themeApiSpy.getThemeById.and.returnValue(of(themeResponse) as any)
+      themeApiSpy.getThemeByName.and.returnValue(of(themeResponse) as any)
 
       const updateThemeData = {
         resource: {
@@ -552,7 +556,7 @@ describe('ThemeDesignerComponent', () => {
       themeApiSpy.createTheme.and.returnValue(
         of({
           resource: {
-            id: 'myThemeId'
+            name: 'myTheme'
           }
         }) as any
       )
@@ -578,7 +582,7 @@ describe('ThemeDesignerComponent', () => {
         })
       )
       expect(router.navigate).toHaveBeenCalledOnceWith(
-        [`../../myThemeId`],
+        [`../../myTheme`],
         jasmine.objectContaining({ relativeTo: route })
       )
     })
@@ -605,18 +609,15 @@ describe('ThemeDesignerComponent', () => {
       themeApiSpy.createTheme.and.returnValue(
         of({
           resource: {
-            id: 'myThemeId'
+            name: 'myTheme'
           }
         }) as any
       )
       component.mode = 'NEW'
 
       component.saveTheme('myTheme')
 
-      expect(router.navigate).toHaveBeenCalledOnceWith(
-        [`../myThemeId`],
-        jasmine.objectContaining({ relativeTo: route })
-      )
+      expect(router.navigate).toHaveBeenCalledOnceWith([`../myTheme`], jasmine.objectContaining({ relativeTo: route }))
     })
 
     it('should display save as new popup on save as click', (done: DoneFn) => {

diff --git a/src/app/theme/theme-designer/theme-designer.component.ts b/src/app/theme/theme-designer/theme-designer.component.ts
@@ -24,7 +24,8 @@ export class ThemeDesignerComponent implements OnInit {
   public actions$: Observable<Action[]> | undefined
   public themes: Theme[] = []
   public theme: Theme | undefined
-  public themeId: string | null
+  public themeId: string | undefined
+  public themeName: string | null
   public themeVars = themeVariables
   public themeTemplates!: SelectItem[]
   public themeTemplateSelectedId = ''
@@ -62,9 +63,8 @@ export class ThemeDesignerComponent implements OnInit {
     private confirmation: ConfirmationService,
     private msgService: PortalMessageService
   ) {
-    this.mode = route.snapshot.paramMap.has('id') ? 'EDIT' : 'NEW'
-    this.themeId = route.snapshot.paramMap.get('id')
-    this.themeIsCurrentUsedTheme = this.themeId === this.appStateService.currentPortal$.getValue()?.themeId
+    this.mode = route.snapshot.paramMap.has('name') ? 'EDIT' : 'NEW'
+    this.themeName = route.snapshot.paramMap.get('name')
     this.prepareActionButtons()
 
     this.fontForm = new FormGroup({})
@@ -138,14 +138,16 @@ export class ThemeDesignerComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    if (this.mode === 'EDIT' && this.themeId) {
-      this.getThemeById(this.themeId).subscribe((data) => {
+    if (this.mode === 'EDIT' && this.themeName) {
+      this.themeApi.getThemeByName({ name: this.themeName }).subscribe((data) => {
         this.theme = data.resource
         this.basicForm.patchValue(data.resource)
         this.propertiesForm.reset()
         this.propertiesForm.patchValue(data.resource.properties || {})
         this.fetchingLogoUrl = prepareUrl(this.basicForm.value.logoUrl)
         this.fetchingFaviconUrl = prepareUrl(this.basicForm.value.faviconUrl)
+        this.themeId = data.resource.id
+        this.themeIsCurrentUsedTheme = this.themeId === this.appStateService.currentPortal$.getValue()?.themeId
       })
     } else {
       const currentVars: { [key: string]: { [key: string]: string } } = {}
@@ -286,7 +288,8 @@ export class ThemeDesignerComponent implements OnInit {
       this.msgService.error({ summaryKey: 'ACTIONS.EDIT.MESSAGE.CHANGE_NOK' })
     } else {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      this.getThemeById(this.themeId!)
+      this.themeApi
+        .getThemeByName({ name: this.themeName! })
         .pipe(
           switchMap((data) => {
             data.resource.properties = this.propertiesForm.value
@@ -322,11 +325,11 @@ export class ThemeDesignerComponent implements OnInit {
     this.themeApi.createTheme({ createThemeRequest: { resource: newTheme } }).subscribe({
       next: (data) => {
         if (this.mode === 'EDIT') {
-          this.router.navigate([`../../${data.resource.id}`], {
+          this.router.navigate([`../../${data.resource.name}`], {
             relativeTo: this.route
           })
         } else {
-          this.router.navigate([`../${data.resource.id}`], { relativeTo: this.route })
+          this.router.navigate([`../${data.resource.name}`], { relativeTo: this.route })
         }
         this.msgService.success({ summaryKey: 'ACTIONS.CREATE.MESSAGE.CREATE_OK' })
       },

diff --git a/src/app/theme/theme-detail/theme-detail.component.spec.ts b/src/app/theme/theme-detail/theme-detail.component.spec.ts
@@ -32,7 +32,7 @@ describe('ThemeDetailComponent', () => {
     })
   }
   const themesApiSpy = jasmine.createSpyObj<ThemesAPIService>('ThemesAPIService', [
-    'getThemeById',
+    'getThemeByName',
     'deleteTheme',
     'exportThemes'
   ])
@@ -58,8 +58,8 @@ describe('ThemeDetailComponent', () => {
     }).compileComponents()
     msgServiceSpy.success.calls.reset()
     msgServiceSpy.error.calls.reset()
-    themesApiSpy.getThemeById.and.returnValue(of({}) as any)
-    themesApiSpy.getThemeById.calls.reset()
+    themesApiSpy.getThemeByName.and.returnValue(of({}) as any)
+    themesApiSpy.getThemeByName.calls.reset()
     themesApiSpy.exportThemes.and.returnValue(of({}) as any)
     themesApiSpy.exportThemes.calls.reset()
   }))
@@ -76,23 +76,23 @@ describe('ThemeDetailComponent', () => {
   })
 
   it('should create with provided id and get theme', async () => {
-    const id = 'themeId'
+    const name = 'themeName'
     const route = TestBed.inject(ActivatedRoute)
-    spyOn(route.snapshot.paramMap, 'get').and.returnValue(id)
+    spyOn(route.snapshot.paramMap, 'get').and.returnValue(name)
     translateService.use('de')
 
     // recreate component to test constructor
     fixture = TestBed.createComponent(ThemeDetailComponent)
     component = fixture.componentInstance
     fixture.detectChanges()
 
-    themesApiSpy.getThemeById.calls.reset()
+    themesApiSpy.getThemeByName.calls.reset()
     component.loading = true
 
     await component.ngOnInit()
-    expect(component.themeId).toBe(id)
+    expect(component.themeName).toBe(name)
     expect(component.dateFormat).toBe('medium')
-    expect(themesApiSpy.getThemeById).toHaveBeenCalledOnceWith({ id: id })
+    expect(themesApiSpy.getThemeByName).toHaveBeenCalledOnceWith({ name: name })
     expect(component.loading).toBe(false)
   })
 
@@ -117,7 +117,7 @@ describe('ThemeDetailComponent', () => {
         }
       ]
     }
-    themesApiSpy.getThemeById.and.returnValue(of(themeResponse) as any)
+    themesApiSpy.getThemeByName.and.returnValue(of(themeResponse) as any)
 
     const translateService = TestBed.inject(TranslateService)
     const actionsTranslations = {
@@ -195,7 +195,7 @@ describe('ThemeDetailComponent', () => {
         }
       ]
     }
-    themesApiSpy.getThemeById.and.returnValue(of(themeResponse) as any)
+    themesApiSpy.getThemeByName.and.returnValue(of(themeResponse) as any)
 
     const translateService = TestBed.inject(TranslateService)
     const actionsTranslations = {
@@ -241,7 +241,7 @@ describe('ThemeDetailComponent', () => {
 
   it('should display not found error and close page on theme fetch failure', () => {
     spyOn(component, 'close')
-    themesApiSpy.getThemeById.and.returnValue(
+    themesApiSpy.getThemeByName.and.returnValue(
       throwError(
         () =>
           new HttpErrorResponse({
@@ -261,7 +261,7 @@ describe('ThemeDetailComponent', () => {
 
   it('should display catched error and close page on theme fetch failure', () => {
     spyOn(component, 'close')
-    themesApiSpy.getThemeById.and.returnValue(
+    themesApiSpy.getThemeByName.and.returnValue(
       throwError(
         () =>
           new HttpErrorResponse({
@@ -303,7 +303,7 @@ describe('ThemeDetailComponent', () => {
       },
       workspaces: []
     }
-    themesApiSpy.getThemeById.and.returnValue(of(themeResponse) as any)
+    themesApiSpy.getThemeByName.and.returnValue(of(themeResponse) as any)
 
     await component.ngOnInit()
 
@@ -319,7 +319,7 @@ describe('ThemeDetailComponent', () => {
       },
       workspaces: []
     }
-    themesApiSpy.getThemeById.and.returnValue(of(themeResponse) as any)
+    themesApiSpy.getThemeByName.and.returnValue(of(themeResponse) as any)
     await component.ngOnInit()
     expect(component.headerImageUrl).toBe(url)
   })

diff --git a/src/app/theme/theme-detail/theme-detail.component.ts b/src/app/theme/theme-detail/theme-detail.component.ts
@@ -17,6 +17,7 @@ import { ExportThemeRequest, Theme, ThemesAPIService, Workspace } from 'src/app/
 export class ThemeDetailComponent implements OnInit {
   theme: Theme | undefined
   usedInWorkspace: Workspace[] | undefined
+  themeName!: string
   themeId!: string
   themeDeleteVisible = false
   themeDeleteMessage = ''
@@ -36,13 +37,13 @@ export class ThemeDetailComponent implements OnInit {
     private msgService: PortalMessageService,
     private translate: TranslateService
   ) {
-    this.themeId = this.route.snapshot.paramMap.get('id') || ''
+    this.themeName = this.route.snapshot.paramMap.get('name') || ''
     this.dateFormat = this.user.lang$.getValue() === 'de' ? 'dd.MM.yyyy HH:mm:ss' : 'medium'
   }
 
   ngOnInit(): void {
     this.themeApi
-      .getThemeById({ id: this.themeId })
+      .getThemeByName({ name: this.themeName })
       .pipe(
         finalize(() => {
           this.loading = false

diff --git a/src/app/theme/theme-search/theme-search.component.html b/src/app/theme/theme-search/theme-search.component.html
@@ -44,7 +44,7 @@
         <ng-template let-theme pTemplate="listItem">
           <div
             class="col-12 grid grid-nogutter align-items-center row-gap-1 listview-row p-1 hover:bg-gray-200 cursor-pointer"
-            [routerLink]="['./', theme.id]"
+            [routerLink]="['./', theme.name]"
           >
             <div class="col-12 md:col-2 lg:col-2 xl:col-2 text-center">
               <div class="flex flex-column justify-content-center align-items-center gap-1 md:gap-2 h-full">
@@ -69,7 +69,7 @@
           </div>
         </ng-template>
         <ng-template let-theme pTemplate="gridItem">
-          <div class="col-12 sm:col-6 md:col-4 lg:col-4 xl:col-3 p-3" [routerLink]="['./', theme.id]">
+          <div class="col-12 sm:col-6 md:col-4 lg:col-4 xl:col-3 p-3" [routerLink]="['./', theme.name]">
             <div class="card p-2 flex flex-column justify-content-center hover:bg-gray-200 cursor-pointer">
               <div
                 class="h-3rem md:h-5rem lg:h-6rem flex flex-column justify-content-center align-items-center text-center"

diff --git a/src/app/theme/theme.module.ts b/src/app/theme/theme.module.ts
@@ -33,7 +33,7 @@ const routes: Routes = [
     resolve: { labeli18n: LabelResolver }
   },
   {
-    path: ':id',
+    path: ':name',
     component: ThemeDetailComponent,
     data: {
       breadcrumb: 'BREADCRUMBS.DETAIL',
@@ -42,7 +42,7 @@ const routes: Routes = [
     resolve: { labeli18n: LabelResolver }
   },
   {
-    path: ':id/edit',
+    path: ':name/edit',
     component: ThemeDesignerComponent,
     data: {
       breadcrumb: 'BREADCRUMBS.EDIT',