Add Post Logo Text

functions/package.json

@@ -19,14 +19,14 @@
   },
   "main": "lib/index.js",
   "dependencies": {
-    "@google-cloud/translate": "^8.3.0",
+    "@google-cloud/translate": "^8.4.0",
     "compressing": "^1.10.1",
     "cors": "^2.8.5",
     "express": "^4.19.2",
-    "firebase-admin": "^12.2.0",
+    "firebase-admin": "^12.3.1",
     "firebase-functions": "^5.0.1",
     "sharp": "^0.33.4",
-    "stripe": "^16.2.0",
+    "stripe": "^16.7.0",
     "uuid": "^10.0.0",
     "zod": "^3.23.8"
   },

package.json

@@ -39,10 +39,10 @@
     "@angular/platform-browser": "^18.1.1",
     "@angular/platform-browser-dynamic": "^18.1.1",
     "@angular/router": "^18.1.1",
-    "@ngrx/operators": "^18.0.1",
-    "@ngrx/signals": "^18.0.0-rc.2",
-    "@ngrx/store-devtools": "^18.0.1",
-    "@stoplight/elements": "^8.3.3",
+    "@ngrx/operators": "^18.0.2",
+    "@ngrx/signals": "^18.0.2",
+    "@ngrx/store-devtools": "^18.0.2",
+    "@stoplight/elements": "^8.4.0",
     "browser-detect": "^0.2.28",
     "file-saver-es": "^2.0.5",
     "marked": "^12.0.2",
@@ -69,7 +69,7 @@
     "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^7.12.0",
     "@typescript-eslint/parser": "^7.12.0",
-    "autoprefixer": "^10.4.19",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
@@ -81,10 +81,10 @@
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
     "ng-openapi-gen": "^0.51.0",
-    "postcss": "^8.4.39",
+    "postcss": "^8.4.41",
     "prettier": "^3.3.3",
     "prettier-eslint": "^16.3.0",
-    "tailwindcss": "^3.4.6",
+    "tailwindcss": "^3.4.10",
     "typescript": "~5.4.5",
     "webpack-bundle-analyzer": "^4.10.2"
   }

src/app/features/admin/settings/settings-routing.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { SettingsComponent } from './settings.component';
+import { UiComponent } from './ui/ui.component';
+
+const routes: Routes = [
+  { path: '', redirectTo: 'ui', pathMatch: 'full' },
+  {
+    path: '',
+    component: SettingsComponent,
+    children: [
+      {
+        path: 'ui',
+        component: UiComponent,
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class SettingsRoutingModule {}

src/app/features/admin/settings/settings.component.ts

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { activate } from '@angular/fire/remote-config';
+
+interface TabItem {
+  icon: string;
+  link: string;
+  label: string;
+}
+
+@Component({
+  selector: 'll-admin-settings',
+  templateUrl: './settings.component.html',
+  styleUrls: ['./settings.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SettingsComponent {
+  activeTab = 'ui';
+  tabItems: TabItem[] = [{ icon: 'palette', label: 'UI', link: 'ui' }];
+
+  constructor(
+    private readonly route: ActivatedRoute,
+    private readonly router: Router,
+    private readonly cd: ChangeDetectorRef,
+  ) {
+    const idx = router.url.lastIndexOf('/');
+    this.activeTab = router.url.substring(idx + 1);
+  }
+
+  protected readonly activate = activate;
+}

src/app/features/admin/settings/settings.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+
+import { SharedModule } from '@shared/shared.module';
+import { SettingsComponent } from './settings.component';
+import { SettingsRoutingModule } from './settings-routing.module';
+import { UiComponent } from './ui/ui.component';
+import { SettingsService } from '@shared/services/settings.service';
+
+@NgModule({
+  declarations: [SettingsComponent, UiComponent],
+  imports: [SharedModule, SettingsRoutingModule],
+  providers: [SettingsService],
+})
+export class SettingsModule {}

src/app/features/admin/settings/ui/ui.component.html

@@ -0,0 +1,40 @@
+<mat-toolbar class="border-b !bg-transparent">
+  <mat-toolbar-row>
+    User Interface
+    <span class="spacer"></span>
+    <button mat-stroked-button color="primary" [disabled]="!form.valid" (click)="save()">
+      <mat-icon>save</mat-icon>
+      Save
+    </button>
+  </mat-toolbar-row>
+</mat-toolbar>
+
+@if (isLoading()) {
+  <mat-progress-bar mode="query" />
+}
+
+<div class="my-3">
+  <form [formGroup]="form">
+    <mat-form-field>
+      <mat-label>Color</mat-label>
+      <mat-select formControlName="color">
+        <mat-option value="primary">Primary</mat-option>
+        <mat-option value="secondary">Secondary</mat-option>
+        <mat-option value="tertiary">Tertiary</mat-option>
+        <mat-option value="error">Error</mat-option>
+      </mat-select>
+      @if (form.controls['color'].errors; as errors) {
+        <mat-error>{{ fe.errors(errors) }}</mat-error>
+      }
+    </mat-form-field>
+    <br />
+    <mat-form-field>
+      <mat-label>Text</mat-label>
+      <input matInput type="text" formControlName="text" maxlength="10" autocomplete="off" />
+      <mat-hint align="end">{{ form.controls['text'].value?.length || 0 }}/10</mat-hint>
+      @if (form.controls['text'].errors; as errors) {
+        <mat-error>{{ fe.errors(errors) }}</mat-error>
+      }
+    </mat-form-field>
+  </form>
+</div>

src/app/features/admin/settings/ui/ui.component.ts

@@ -0,0 +1,60 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, signal } from '@angular/core';
+import { NotificationService } from '@shared/services/notification.service';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormErrorHandlerService } from '@core/error-handler/form-error-handler.service';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { AppUiColor } from '@shared/models/settings.model';
+import { SettingsValidator } from '@shared/validators/settings.validator';
+import { SettingsService } from '@shared/services/settings.service';
+
+@Component({
+  selector: 'll-admin-settings-ui',
+  templateUrl: './ui.component.html',
+  styleUrls: ['./ui.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UiComponent {
+  private destroyRef = inject(DestroyRef);
+
+  isLoading = signal(true);
+
+  // Form
+  form: FormGroup = this.fb.group({
+    text: this.fb.control<string | undefined>(undefined, SettingsValidator.UI_TEXT),
+    color: this.fb.control<AppUiColor | undefined>(undefined, SettingsValidator.UI_COLOR),
+  });
+
+  constructor(
+    private readonly fb: FormBuilder,
+    readonly fe: FormErrorHandlerService,
+    private readonly settingService: SettingsService,
+    private readonly cd: ChangeDetectorRef,
+    private readonly notificationService: NotificationService,
+  ) {
+    this.settingService
+      .find()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: settings => {
+          console.log(settings);
+          if (settings?.ui) {
+            this.form.patchValue(settings.ui);
+          }
+          this.isLoading.set(false);
+          this.cd.markForCheck();
+        },
+      });
+  }
+
+  save(): void {
+    this.settingService.updateUi(this.form.value).subscribe({
+      next: () => {
+        this.notificationService.success('Settings UI has been updated.');
+      },
+      error: (err: unknown) => {
+        console.error(err);
+        this.notificationService.error('Settings UI can not be updated.');
+      },
+    });
+  }
+}

src/app/features/users/user-dialog/user-dialog.component.html → src/app/features/admin/users/user-dialog/user-dialog.component.html

@@ -26,6 +26,10 @@ <h2 mat-dialog-title>User</h2>
           <span matListItemTitle>Space Management</span>
           <span matListItemLine>Create, Update and Delete. </span>
         </mat-list-option>
+        <mat-list-option value="SETTINGS_MANAGEMENT">
+          <span matListItemTitle>Settings Management</span>
+          <span matListItemLine>Change system settings. </span>
+        </mat-list-option>
 
         <mat-divider></mat-divider>
         <div mat-subheader>Translation</div>

src/app/features/users/user-dialog/user-dialog.component.ts → src/app/features/admin/users/user-dialog/user-dialog.component.ts

@@ -3,7 +3,7 @@ import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { UserDialogModel } from './user-dialog.model';
 import { FormErrorHandlerService } from '@core/error-handler/form-error-handler.service';
-import { SettingsStore } from '@shared/store/settings.store';
+import { LocalSettingsStore } from '@shared/store/local-settings.store';
 
 @Component({
   selector: 'll-user-dialog',
@@ -17,7 +17,7 @@ export class UserDialogComponent implements OnInit {
     permissions: this.fb.control<string[] | undefined>(undefined),
   });
 
-  settingsStore = inject(SettingsStore);
+  settingsStore = inject(LocalSettingsStore);
 
   constructor(
     private readonly fb: FormBuilder,

src/app/features/users/user-invite-dialog/user-invite-dialog.component.html → src/app/features/admin/users/user-invite-dialog/user-invite-dialog.component.html

@@ -41,6 +41,10 @@ <h2 mat-dialog-title>User Invite</h2>
           <span matListItemTitle>Space Management</span>
           <span matListItemLine>Create, Update and Delete. </span>
         </mat-list-option>
+        <mat-list-option value="SETTINGS_MANAGEMENT">
+          <span matListItemTitle>Settings Management</span>
+          <span matListItemLine>Change system settings. </span>
+        </mat-list-option>
 
         <mat-divider></mat-divider>
         <div mat-subheader>Translation</div>

src/app/features/users/user-invite-dialog/user-invite-dialog.component.ts → src/app/features/admin/users/user-invite-dialog/user-invite-dialog.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { FormErrorHandlerService } from '@core/error-handler/form-error-handler.service';
-import { SettingsStore } from '@shared/store/settings.store';
+import { LocalSettingsStore } from '@shared/store/local-settings.store';
 
 @Component({
   selector: 'll-user-invite-dialog',
@@ -18,7 +18,7 @@ export class UserInviteDialogComponent {
     permissions: this.fb.control(undefined),
   });
 
-  settingsStore = inject(SettingsStore);
+  settingsStore = inject(LocalSettingsStore);
 
   constructor(
     private readonly fb: FormBuilder,