chore(settings): setup settings

src/app/app.routes.ts

@@ -57,6 +57,13 @@ export const routes: Routes = [
  (mod) => mod.PrivacyPolicyComponent,
  ),
  },
+ {
+ path: 'settings',
+ loadChildren: () =>
+ import('./features/settings/settings.routes').then(
+ (mod) => mod.settingsRoutes,
+ ),
+ },
  ],
  },
 ];

src/app/core/components/breadcrumb/breadcrumb.component.html

@@ -0,0 +1,8 @@
+<div class="breadcrumbs">
+ @for (url of parsedUrl(); track url; let l = $last) {
+ {{ url }}
+ @if (!l) {
+ /
+ }
+ }
+</div>

src/app/core/components/breadcrumb/breadcrumb.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BreadcrumbComponent } from './breadcrumb.component';
+
+describe('BreadcrumbComponent', () => {
+ let component: BreadcrumbComponent;
+ let fixture: ComponentFixture<BreadcrumbComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [BreadcrumbComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(BreadcrumbComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});

src/app/core/components/breadcrumb/breadcrumb.component.ts

@@ -0,0 +1,16 @@
+import { Component, computed, inject, signal } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+ selector: 'osf-breadcrumb',
+ imports: [],
+ templateUrl: './breadcrumb.component.html',
+ styleUrl: './breadcrumb.component.scss',
+})
+export class BreadcrumbComponent {
+ #router = inject(Router);
+ protected readonly url = signal(this.#router.url);
+ protected readonly parsedUrl = computed(() => {
+ return this.url().split('/').filter(Boolean);
+ });
+}

src/app/core/components/settings-header/settings-header.component.html

@@ -0,0 +1 @@
+<osf-breadcrumb />

src/app/core/components/settings-header/settings-header.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsHeaderComponent } from './settings-header.component';
+
+describe('SettingsHeaderComponent', () => {
+ let component: SettingsHeaderComponent;
+ let fixture: ComponentFixture<SettingsHeaderComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [SettingsHeaderComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(SettingsHeaderComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});

src/app/core/components/settings-header/settings-header.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { BreadcrumbComponent } from '@core/components/breadcrumb/breadcrumb.component';
+
+@Component({
+ selector: 'osf-settings-header',
+ imports: [BreadcrumbComponent],
+ templateUrl: './settings-header.component.html',
+ styleUrl: './settings-header.component.scss',
+})
+export class SettingsHeaderComponent {}

src/app/features/settings/account-settings/account-settings.component.html

@@ -0,0 +1 @@
+<p>account-settings works!</p>

src/app/features/settings/account-settings/account-settings.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountSettingsComponent } from './account-settings.component';
+
+describe('AccountSettingsComponent', () => {
+ let component: AccountSettingsComponent;
+ let fixture: ComponentFixture<AccountSettingsComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [AccountSettingsComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(AccountSettingsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});

src/app/features/settings/account-settings/account-settings.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'osf-account-settings',
+ imports: [],
+ templateUrl: './account-settings.component.html',
+ styleUrl: './account-settings.component.scss',
+})
+export class AccountSettingsComponent {}

src/app/features/settings/account-settings/account-settings.route.ts

@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const accountSettingsRoute: Routes[] = [];

src/app/features/settings/index.ts

@@ -0,0 +1,4 @@
+export * from './account-settings/account-settings.route';
+export * from './account-settings/account-settings.component';
+
+export * from './profile-settings/profile-settings.component';

src/app/features/settings/profile-settings/profile-settings.component.html

@@ -0,0 +1 @@
+<p>profile-settings works!</p>

src/app/features/settings/profile-settings/profile-settings.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProfileSettingsComponent } from './profile-settings.component';
+
+describe('ProfileSettingsComponent', () => {
+ let component: ProfileSettingsComponent;
+ let fixture: ComponentFixture<ProfileSettingsComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [ProfileSettingsComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(ProfileSettingsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});

src/app/features/settings/profile-settings/profile-settings.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'osf-profile-settings',
+ imports: [],
+ templateUrl: './profile-settings.component.html',
+ styleUrl: './profile-settings.component.scss',
+})
+export class ProfileSettingsComponent {}

src/app/features/settings/settings-container.component.html

@@ -0,0 +1,3 @@
+<osf-settings-header />
+
+<router-outlet />

src/app/features/settings/settings-container.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsContainerComponent } from './settings-container.component';
+
+describe('SettingsContainerComponent', () => {
+ let component: SettingsContainerComponent;
+ let fixture: ComponentFixture<SettingsContainerComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [SettingsContainerComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(SettingsContainerComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});

src/app/features/settings/settings-container.component.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { SettingsHeaderComponent } from '@core/components/settings-header/settings-header.component';
+
+@Component({
+ selector: 'osf-settings-container',
+ imports: [RouterOutlet, SettingsHeaderComponent],
+ templateUrl: './settings-container.component.html',
+ styleUrl: './settings-container.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SettingsContainerComponent {}

src/app/features/settings/settings.routes.ts

@@ -0,0 +1,25 @@
+import { Routes } from '@angular/router';
+import { SettingsContainerComponent } from '@osf/features/settings/settings-container.component';
+
+export const settingsRoutes: Routes = [
+ {
+ path: '',
+ component: SettingsContainerComponent,
+ children: [
+ {
+ path: 'profile-settings',
+ loadComponent: () =>
+ import('./profile-settings/profile-settings.component').then(
+ (c) => c.ProfileSettingsComponent,
+ ),
+ },
+ {
+ path: 'account-settings',
+ loadComponent: () =>
+ import('./account-settings/account-settings.component').then(
+ (c) => c.AccountSettingsComponent,
+ ),
+ },
+ ],
+ },
+];