Merge branch 'develop' of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend into develop

libs/core/process/src/index.ts

@@ -1,3 +1,5 @@
-export * from './lib/core-process/process';
-export * from './lib/core-process/process.service';
-export * from './lib/core-process/process.resolver-fn';
+export * from './lib/process';
+export * from './lib/process.injector';
+export * from './lib/process.resolver-fn';
+export * from './lib/process.schemas';
+export * from './lib/process.service';

libs/core/process/src/lib/process.injector.ts

@@ -0,0 +1,10 @@
+import { inject } from '@angular/core';
+import { ProcessService } from './process.service';
+
+export function injectActivatedProcess() {
+  return inject(ProcessService).activatedProcess;
+}
+
+export function injectActivatedProcessId() {
+  return inject(ProcessService).activatedProcessId;
+}

libs/core/process/src/lib/process.resolver-fn.ts

@@ -5,12 +5,13 @@ import { inject } from '@angular/core';
 
 export const processResolverFn: ResolveFn<Process> = (route) => {
   const id = parseInt(route.params['processId']);
+  const processService = inject(ProcessService);
+  let process = processService.entityMap()[id];
 
-  const process = inject(ProcessService).entityMap()[id];
-
-  if (process) {
-    return process;
+  if (!process) {
+    process = processService.addProcess({ name: 'New Process' });
   }
 
-  return inject(ProcessService).addProcess({ name: 'New Process' });
+  processService.activateProcess(process.id);
+  return process;
 };

libs/core/process/src/lib/process.service.ts

@@ -1,4 +1,11 @@
-import { patchState, signalStore, withComputed, withHooks, withMethods } from '@ngrx/signals';
+import {
+  patchState,
+  signalStore,
+  withComputed,
+  withHooks,
+  withMethods,
+  withState,
+} from '@ngrx/signals';
 import {
   addEntities,
   addEntity,
@@ -13,9 +20,17 @@ import { computed, effect } from '@angular/core';
 
 export const ProcessService = signalStore(
   { providedIn: 'root' },
+  withState<{ activatedProcessId: number | null }>({ activatedProcessId: null }),
   withEntities<Process>(),
   withComputed((store) => ({
     nextId: computed(() => Math.max(0, ...store.entities().map((e) => e.id)) + 1),
+    activatedProcess: computed<Process | null>(() => {
+      const activeProcessId = store.activatedProcessId();
+      if (activeProcessId === null) {
+        return null;
+      }
+      return store.entities().find((e) => e.id === activeProcessId) ?? null;
+    }),
   })),
   withMethods((store) => ({
     addProcess(add: z.infer<typeof AddProcessSchema>) {
@@ -27,8 +42,11 @@ export const ProcessService = signalStore(
       patchState(store, addEntity(process));
       return process;
     },
-    activatedProcess(id: number) {
-      patchState(store, updateEntity({ id, changes: { activatedAt: Date.now() } }));
+    activateProcess(id: number) {
+      patchState(store, {
+        ...updateEntity({ id, changes: { activatedAt: Date.now() } }),
+        activatedProcessId: id,
+      });
     },
     patchProcess(id: number, changes: z.infer<typeof PatchProcessSchema>) {
       patchState(store, updateEntity({ id, changes: PatchProcessSchema.parse(changes) }));

libs/ui/buttons/src/index.ts

@@ -1 +1,2 @@
-export * from './lib/ui-buttons/ui-buttons.component';
+export * from './lib/button.component';
+export * from './lib/types';

libs/ui/buttons/src/lib/button.component.html

@@ -0,0 +1,5 @@
+@if (!pending()) {
+  <ng-content></ng-content>
+} @else {
+  <ng-icon class="animate-spin" name="isaActionChevron"></ng-icon>
+}

libs/ui/buttons/src/lib/button.component.scss

@@ -0,0 +1,56 @@
+.ui-button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+}
+
+.ui-button__small {
+  min-width: 10rem;
+  padding: 0.375rem 0.75rem;
+
+  font-size: 0.875rem;
+  line-height: 1.25rem; /* 142.857% */
+}
+
+.ui-button__medium {
+  height: 2.5rem;
+  min-width: 10rem;
+  padding: 0.5rem 1.25rem;
+  flex-shrink: 0;
+
+  font-size: 0.875rem;
+  line-height: 1.25rem; /* 142.857% */
+}
+
+.ui-button__large {
+  min-width: 10rem;
+  padding: 0.75rem 1.5rem;
+
+  font-size: 1rem;
+  line-height: 1.5rem; /* 150% */
+}
+
+.ui-button__primary {
+  @apply bg-isa-secondary-600 text-isa-white;
+}
+
+.ui-button__primary:hover {
+  @apply bg-isa-secondary-700;
+}
+
+.ui-button__primary:active,
+.ui-button.active {
+  @apply bg-isa-secondary-800;
+}
+
+.ui-button__primary:disabled {
+  @apply bg-isa-neutral-400;
+}
+
+.ui-button__secondary {
+  @apply border border-solid border-isa-secondary-600 text-isa-secondary-600;
+}

libs/ui/buttons/src/lib/button.component.ts

@@ -0,0 +1,29 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { ButtonColor, ButtonSize } from './types';
+import { isaActionChevron } from '@isa/icons';
+
+@Component({
+  selector: 'ui-button, [uiButton]',
+  templateUrl: './button.component.html',
+  styleUrls: ['./button.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [NgIconComponent],
+  // TODO: Gegen loader icon ersetzen
+  providers: [provideIcons({ isaActionChevron })],
+  host: {
+    '[class]': '["ui-button", sizeClass(), colorClass()]',
+  },
+})
+export class NameComponent {
+  size = input<ButtonSize>('medium');
+
+  sizeClass = computed(() => `ui-button__${this.size()}`);
+
+  color = input<ButtonColor>('primary');
+
+  colorClass = computed(() => `ui-button__${this.color()}`);
+
+  pending = input<boolean>(false);
+}

libs/ui/buttons/src/lib/types.ts

@@ -0,0 +1,16 @@
+export const ButtonSize = {
+  Small: 'small',
+  Medium: 'medium',
+  Large: 'large',
+} as const;
+
+export type ButtonSize = (typeof ButtonSize)[keyof typeof ButtonSize];
+
+export const ButtonColor = {
+  Primary: 'primary',
+  Secondary: 'secondary',
+  Brand: 'brand',
+  Tertiary: 'tertiary',
+} as const;
+
+export type ButtonColor = (typeof ButtonColor)[keyof typeof ButtonColor];

libs/ui/buttons/src/lib/ui-buttons/ui-buttons.component.html

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

libs/ui/buttons/src/lib/ui-buttons/ui-buttons.component.spec.ts

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

libs/ui/buttons/src/lib/ui-buttons/ui-buttons.component.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-@Component({
-  selector: 'ui-ui-buttons',
-  imports: [CommonModule],
-  templateUrl: './ui-buttons.component.html',
-  styleUrl: './ui-buttons.component.css',
-})
-export class UiButtonsComponent {}