Added pages to see, create, modify & delete redeemable actions. User card top right with disconnect & log out. Code clean up.

src/app/actions/action-list/action-list.component.html

@@ -0,0 +1,11 @@
+<main>
+  @for (action of actions; track $index) {
+  <button type="button" class="container" (click)="modify(action)">
+    <span class="title">{{action.name}}</span>
+    <span class="subtitle">{{action.type}}</span>
+  </button>
+  }
+  <button type="button" class="container" (click)="create()">
+    <mat-icon>add</mat-icon>
+  </button>
+</main>

src/app/actions/action-list/action-list.component.scss

@@ -0,0 +1,56 @@
+main {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+
+  @media (min-width:1200px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (min-width:1650px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  @media (min-width:2200px) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  grid-auto-flow: row dense;
+  grid-gap: 1rem;
+  justify-content: center;
+  text-align: center;
+  background-color: #fafafa;
+  width: 80%;
+  justify-self: center;
+
+  & .container {
+    border-color: grey;
+    border-radius: 20px;
+    border: 1px solid grey;
+    padding: 1em;
+    cursor: pointer;
+    background-color: white;
+
+    & span {
+      display: block;
+    }
+
+    & .title {
+      font-size: medium;
+    }
+
+    & .subtitle {
+      font-size: smaller;
+      color: lightgrey;
+    }
+  }
+}
+
+.item {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  & article:first-child {
+    flex: 1;
+  }
+}

src/app/actions/action-list/action-list.component.spec.ts

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

src/app/actions/action-list/action-list.component.ts

@@ -0,0 +1,66 @@
+import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
+import { MatListModule } from '@angular/material/list';
+import RedeemableAction from '../../shared/models/redeemable_action';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDialog } from '@angular/material/dialog';
+import { ActionItemEditComponent } from '../action-item-edit/action-item-edit.component';
+import { HermesClientService } from '../../hermes-client.service';
+
+@Component({
+  selector: 'action-list',
+  standalone: true,
+  imports: [MatButtonModule, MatFormFieldModule, MatIconModule, MatListModule],
+  templateUrl: './action-list.component.html',
+  styleUrl: './action-list.component.scss'
+})
+export class ActionListComponent {
+  @Input() actions: RedeemableAction[] = []
+  @Output() actionsChange = new EventEmitter<RedeemableAction>();
+  readonly dialog = inject(MatDialog);
+  readonly client = inject(HermesClientService);
+  opened = false;
+
+  create(): void {
+    this.openDialog({ user_id: '', name: '', type: '', data: {} });
+  }
+
+  modify(action: RedeemableAction): void {
+    this.openDialog(action);
+  }
+
+  private openDialog(action: RedeemableAction): void {
+    if (this.opened)
+      return;
+
+    this.opened = true;
+
+    const dialogRef = this.dialog.open(ActionItemEditComponent, {
+      data: { action: {user_id: action.user_id, name: action.name, type: action.type, data: action.data }, actions: this.actions },
+    });
+    const isNewAction = action.name.length <= 0;
+    const requestType = isNewAction ? 'create_redeemable_action' : 'update_redeemable_action';
+
+    dialogRef.afterClosed().subscribe((result: RedeemableAction) => {
+      this.opened = false;
+      if (!result)
+        return;
+
+      this.client.first((d: any) => d.op == 4 && d.d.request.type == requestType && d.d.data.name == result.name)
+        ?.subscribe(_ => {
+          if (isNewAction) {
+            this.actionsChange.emit(result);
+          } else {
+            action.type = result.type;
+            action.data = result.data;
+          }
+        });
+
+      if (isNewAction)
+        this.client.createRedeemableAction(result.name, result.type, result.data);
+      else
+        this.client.updateRedeemableAction(result.name, result.type, result.data);
+    });
+  }
+}