feat(workflows): list workflows

javascript/apps/taiga/src/app/modules/project/data-access/+state/actions/project.actions.ts

@@ -6,7 +6,12 @@
  * Copyright (c) 2023-present Kaleidos INC
  */
 
-import { createAction, createActionGroup, props } from '@ngrx/store';
+import {
+  createAction,
+  createActionGroup,
+  emptyProps,
+  props,
+} from '@ngrx/store';
 import {
   Attachment,
   Membership,
@@ -16,6 +21,7 @@ import {
   StoryDetail,
   User,
   UserComment,
+  Workflow,
 } from '@taiga/data';
 import { DropCandidate } from '@taiga/ui/drag/drag.model';
 
@@ -67,6 +73,21 @@ export const updateStoryShowView = createAction(
   }>()
 );
 
+export const createWorkflow = createAction(
+  '[Project] create workflow',
+  props<{
+    name: Workflow['name'];
+  }>()
+);
+
+export const updateWorkflow = createAction(
+  '[Project] update workflow',
+  props<{
+    name: Workflow['name'];
+    slug: Workflow['slug'];
+  }>()
+);
+
 export const newProjectMembers = createAction(
   '[Project][ws] New Project Members'
 );
@@ -104,6 +125,20 @@ export const deleteProjectSuccess = createAction(
   }>()
 );
 
+export const projectApiActions = createActionGroup({
+  source: 'Project Api',
+  events: {
+    'Create Workflow Success': props<{
+      workflow: Workflow;
+    }>(),
+    'create Workflow Error': emptyProps(),
+    'Update Workflow Success': props<{
+      workflow: Workflow;
+      oldSlug: Workflow['slug'];
+    }>(),
+  },
+});
+
 export const projectEventActions = createActionGroup({
   source: 'Project ws',
   events: {
@@ -133,6 +168,7 @@ export const projectEventActions = createActionGroup({
     }>(),
     'Remove Member': props<{ membership: Membership; workspace: string }>(),
     'Update Member': props<{ membership: Membership }>(),
+    'Create Workflow': props<{ workflow: Workflow }>(),
     'Create comment': props<{ storyRef: Story['ref']; comment: UserComment }>(),
     'Status reorder': props<{
       id: Status['id'];

javascript/apps/taiga/src/app/modules/project/data-access/+state/effects/project.effects.ts

@@ -6,12 +6,13 @@
  * Copyright (c) 2023-present Kaleidos INC
  */
 
+import { Location } from '@angular/common';
 import { HttpErrorResponse } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 import { Actions, concatLatestFrom, createEffect, ofType } from '@ngrx/effects';
-import { Store } from '@ngrx/store';
 import { fetch, pessimisticUpdate } from '@ngrx/router-store/data-persistence';
+import { Store } from '@ngrx/store';
 import { TuiNotification } from '@taiga-ui/core';
 import { ProjectApiService } from '@taiga/api';
 import { EMPTY, of } from 'rxjs';
@@ -23,7 +24,9 @@ import {
   switchMap,
   tap,
 } from 'rxjs/operators';
+import { selectUser } from '~/app/modules/auth/data-access/+state/selectors/auth.selectors';
 import * as ProjectOverviewActions from '~/app/modules/project/feature-overview/data-access/+state/actions/project-overview.actions';
+import { selectUrl } from '~/app/router-selectors';
 import { AppService } from '~/app/services/app.service';
 import { RevokeInvitationService } from '~/app/services/revoke-invitation.service';
 import { invitationProjectActions } from '~/app/shared/invite-user-modal/data-access/+state/actions/invitation.action';
@@ -35,8 +38,6 @@ import {
   selectCurrentProject,
   selectMembers,
 } from '../selectors/project.selectors';
-import { selectUser } from '~/app/modules/auth/data-access/+state/selectors/auth.selectors';
-import { selectUrl } from '~/app/router-selectors';
 @Injectable()
 export class ProjectEffects {
   public loadProject$ = createEffect(() => {
@@ -169,6 +170,81 @@ export class ProjectEffects {
     { dispatch: false }
   );
 
+  public createWorkflow$ = createEffect(() => {
+    return this.actions$.pipe(
+      ofType(ProjectActions.createWorkflow),
+      concatLatestFrom(() => [
+        this.store.select(selectCurrentProject).pipe(filterNil()),
+      ]),
+      pessimisticUpdate({
+        run: (action, project) => {
+          return this.projectApiService
+            .createWorkflow(action.name, project.id)
+            .pipe(
+              map((newWorkflow) => {
+                void this.router.navigate([
+                  '/project',
+                  project.id,
+                  project.slug,
+                  'kanban',
+                  newWorkflow.slug,
+                ]);
+                return ProjectActions.projectApiActions.createWorkflowSuccess({
+                  workflow: newWorkflow,
+                });
+              })
+            );
+        },
+        onError: (_, httpResponse: HttpErrorResponse) => {
+          if (httpResponse.status === 400) {
+            this.appService.toastNotification({
+              message: 'create_workflow.max_workflow_created',
+              status: TuiNotification.Error,
+              scope: 'kanban',
+              closeOnNavigation: false,
+            });
+            return ProjectActions.projectApiActions.createWorkflowError();
+          } else {
+            return this.appService.errorManagement(httpResponse);
+          }
+        },
+      })
+    );
+  });
+
+  public updateWorkflow$ = createEffect(() => {
+    return this.actions$.pipe(
+      ofType(ProjectActions.updateWorkflow),
+      concatLatestFrom(() => [
+        this.store.select(selectCurrentProject).pipe(filterNil()),
+      ]),
+      pessimisticUpdate({
+        run: (action, project) => {
+          return this.projectApiService
+            .updateWorkflow(action.name, action.slug, project.id)
+            .pipe(
+              map((updatedWorkflow) => {
+                // void this.router.navigate(
+                //   [`project/${project.id}/${project.slug}/kanban/${updatedWorkflow.slug}`],
+                //   { replaceUrl: true }
+                // );
+                this.location.go(
+                  `project/${project.id}/${project.slug}/kanban/${updatedWorkflow.slug}`
+                );
+                return ProjectActions.projectApiActions.updateWorkflowSuccess({
+                  workflow: updatedWorkflow,
+                  oldSlug: action.slug,
+                });
+              })
+            );
+        },
+        onError: (_, httpResponse: HttpErrorResponse) => {
+          return this.appService.errorManagement(httpResponse);
+        },
+      })
+    );
+  });
+
   public initAssignUser$ = createEffect(() => {
     return this.actions$.pipe(
       ofType(ProjectActions.initAssignUser),
@@ -421,6 +497,7 @@ export class ProjectEffects {
     private appService: AppService,
     private router: Router,
     private revokeInvitationService: RevokeInvitationService,
-    private store: Store
+    private store: Store,
+    private location: Location
   ) {}
 }

javascript/apps/taiga/src/app/modules/project/data-access/+state/reducers/project.reducer.ts

@@ -16,7 +16,6 @@ import * as RolesPermissionsActions from '~/app/modules/project/settings/feature
 import { invitationProjectActions } from '~/app/shared/invite-user-modal/data-access/+state/actions/invitation.action';
 import { createImmerReducer } from '~/app/shared/utils/store';
 import * as ProjectActions from '../actions/project.actions';
-import { projectEventActions } from '../actions/project.actions';
 
 export const projectFeatureKey = 'project';
 
@@ -102,6 +101,29 @@ export const reducer = createImmerReducer(
 
     return state;
   }),
+  on(
+    ProjectActions.projectApiActions.createWorkflowSuccess,
+    ProjectActions.projectEventActions.createWorkflow,
+    (state, { workflow }): ProjectState => {
+      if (state.currentProjectId) {
+        state.projects[state.currentProjectId].workflows.push(workflow);
+      }
+
+      return state;
+    }
+  ),
+  on(
+    ProjectActions.projectApiActions.updateWorkflowSuccess,
+    (state, { workflow, oldSlug }): ProjectState => {
+      if (state.currentProjectId) {
+        const workflows = state.projects[state.currentProjectId].workflows;
+        const workflowIndex = workflows.findIndex((it) => it.slug === oldSlug);
+        workflows[workflowIndex].name = workflow.name;
+        workflows[workflowIndex].slug = workflow.slug;
+      }
+      return state;
+    }
+  ),
   on(
     ProjectActions.permissionsUpdateSuccess,
     (state, { project }): ProjectState => {
@@ -135,7 +157,7 @@ export const reducer = createImmerReducer(
     }
   ),
   on(
-    projectEventActions.removeMember,
+    ProjectActions.projectEventActions.removeMember,
     (state, { membership }): ProjectState => {
       state.members = state.members.filter(
         (members) => members.user.username !== membership.user.username
@@ -145,7 +167,7 @@ export const reducer = createImmerReducer(
     }
   ),
   on(
-    projectEventActions.updateMember,
+    ProjectActions.projectEventActions.updateMember,
     (state, { membership }): ProjectState => {
       state.members = state.members.map((member) => {
         if (member.user.username === membership.user.username) {

javascript/apps/taiga/src/app/modules/project/feature-kanban/components/create-status/kanban-create-status.component.ts

@@ -6,24 +6,24 @@
  * Copyright (c) 2023-present Kaleidos INC
  */
 
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
   ElementRef,
   EventEmitter,
-  Output,
   Input,
   OnInit,
+  Output,
 } from '@angular/core';
+import { TranslocoDirective } from '@ngneat/transloco';
 import { Store } from '@ngrx/store';
+import { TuiButtonModule } from '@taiga-ui/core';
 import { KanbanActions } from '~/app/modules/project/feature-kanban/data-access/+state/actions/kanban.actions';
-import { selectCurrentWorkflow } from '~/app/modules/project/feature-kanban/data-access/+state/selectors/kanban.selectors';
+import { selectWorkflow } from '~/app/modules/project/feature-kanban/data-access/+state/selectors/kanban.selectors';
 import { EditStatus } from '~/app/modules/project/feature-kanban/models/edit-status.model';
-import { TuiButtonModule } from '@taiga-ui/core';
-import { EditStatusComponent } from '../edit-status/edit-status.component';
-import { CommonModule } from '@angular/common';
-import { TranslocoDirective } from '@ngneat/transloco';
 import { RestoreFocusTargetDirective } from '~/app/shared/directives/restore-focus/restore-focus-target.directive';
+import { EditStatusComponent } from '../edit-status/edit-status.component';
 
 @Component({
   selector: 'tg-kanban-create-status',
@@ -49,7 +49,7 @@ export class KanbanCreateStatusComponent implements OnInit {
   @Output()
   public closeForm = new EventEmitter<void>();
 
-  public workflow = this.store.selectSignal(selectCurrentWorkflow);
+  public workflow = this.store.selectSignal(selectWorkflow);
 
   public showAddForm = false;
   public columnSize = 292;

javascript/apps/taiga/src/app/modules/project/feature-kanban/components/delete-status/delete-status.component.ts

@@ -27,7 +27,7 @@ import { Status } from '@taiga/data';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { Observable, map } from 'rxjs';
-import { toSignal } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { ContextNotificationComponent } from '@taiga/ui/context-notification/context-notification.component';
 import { InputsModule } from '@taiga/ui/inputs';
 import { ModalComponent } from '@taiga/ui/modal/components';
@@ -90,6 +90,7 @@ export class DeleteStatusComponent implements OnInit {
       });
 
       const valueContent$ = this.form.get('status')?.valueChanges.pipe(
+        takeUntilDestroyed(),
         map((value) => {
           return this.statusesList().find((it) => it.id === value)?.name ?? '';
         })

javascript/apps/taiga/src/app/modules/project/feature-kanban/components/delete-workflow/delete-workflow.component.css

@@ -0,0 +1,69 @@
+/*
+This Source Code Form is subject to the terms of the Mozilla Public
+License, v. 2.0. If a copy of the MPL was not distributed with this
+file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+Copyright (c) 2023-present Kaleidos INC
+*/
+
+@import url("tools/typography.css");
+
+.actions {
+  display: flex;
+  gap: 2rem;
+  justify-content: flex-end;
+  margin-block-start: var(--spacing-24);
+}
+
+.title {
+  @mixin font-heading-3;
+
+  margin-block: 0 var(--spacing-24);
+}
+
+.project-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-24);
+}
+
+.confirm-close-description {
+  margin-block-end: var(--spacing-32);
+}
+
+.warning-notification {
+  display: block;
+
+  &::ng-deep .wrapper {
+    inline-size: 100%;
+  }
+
+  &::ng-deep .bold {
+    font-weight: var(--font-weight-medium);
+  }
+}
+
+.text {
+  @mixin font-paragraph;
+
+  color: var(--color-gray80);
+  margin-block-end: 0;
+  padding-block: var(--spacing-24);
+  padding-block-end: var(--spacing-16);
+  padding-inline: 0;
+
+  &.is-last-workflow {
+    padding-block-end: 0;
+  }
+}
+
+.select-workflow {
+  margin-block: var(--spacing-8);
+  margin-inline-start: var(--spacing-24);
+}
+
+.select-info {
+  display: flex;
+  margin-block-end: var(--spacing-24);
+  margin-inline-start: var(--spacing-24);
+}