feat(workflow): Move story to other workflow

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

@@ -10,15 +10,15 @@ import { createFeature, createSelector, on } from '@ngrx/store';
 import { Status, Story, Workflow } from '@taiga/data';
 import { DropCandidate } from '@taiga/ui/drag/drag.model';
 import {
-  projectEventActions,
   projectApiActions,
+  projectEventActions,
 } from '~/app/modules/project/data-access/+state/actions/project.actions';
 import {
   KanbanStory,
   KanbanStoryA11y,
   PartialStory,
 } from '~/app/modules/project/feature-kanban/kanban.model';
-import { StoryDetailActions } from '~/app/modules/project/story-detail/data-access/+state/actions/story-detail.actions';
+import { StoryDetailActions, StoryDetailApiActions } from '~/app/modules/project/story-detail/data-access/+state/actions/story-detail.actions';
 import { moveItemArray } from '~/app/shared/utils/move-item-array';
 import { pick } from '~/app/shared/utils/pick';
 import { createImmerReducer } from '~/app/shared/utils/store';
@@ -627,6 +627,11 @@ export const reducer = createImmerReducer(
       return state;
     }
   ),
+  on(StoryDetailApiActions.updateStoryWorkflowSuccess, (state, { story }): KanbanState => {
+    state = removeStory(state, (it) => it.ref === story.ref);
+
+    return state
+  }),
   on(
     KanbanActions.deleteStory,
     StoryDetailActions.deleteStory,

javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-workflow/story-detail-workflow.component.css

@@ -47,6 +47,8 @@ Copyright (c) 2023-present Kaleidos INC
 }
 
 .workflow-name {
+  @mixin ellipsis;
+
   &:hover {
     color: var(--color-secondary80);
     background: var(--color-gray20);

javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-workflow/story-detail-workflow.component.html

@@ -38,7 +38,10 @@
           <hr class="separator" />
           <tui-opt-group>
             <button
-              *ngFor="let workflow of workflows; trackBy: trackByWorkflowId"
+              *ngFor="
+                let workflow of filteredWorkflows;
+                trackBy: trackByWorkflowId
+              "
               class="workflow-btn"
               tuiOption
               type="button"

javascript/apps/taiga/src/app/modules/project/story-detail/components/story-detail-workflow/story-detail-workflow.component.ts

@@ -9,7 +9,10 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  EventEmitter,
   Input,
+  OnInit,
+  Output,
   ViewChild,
 } from '@angular/core';
 
@@ -41,7 +44,7 @@ import { BreadcrumbComponent } from '@taiga/ui/breadcrumb/breadcrumb.component';
     TuiSvgModule,
   ],
 })
-export class StoryDetailWorkflowComponent {
+export class StoryDetailWorkflowComponent implements OnInit {
   @Input({ required: true })
   public story!: StoryDetail;
 
@@ -51,7 +54,17 @@ export class StoryDetailWorkflowComponent {
   @ViewChild(TuiHostedDropdownComponent)
   component?: TuiHostedDropdownComponent;
 
+  @Output()
+  public toWorkflow = new EventEmitter<Workflow>();
+
   public openWorkflowList = false;
+  public filteredWorkflows: Workflow[] = [];
+
+  public ngOnInit(): void {
+    this.filteredWorkflows = this.workflows.filter(
+      (workflow) => workflow.slug !== this.story.workflow.slug
+    );
+  }
 
   public trackByWorkflowId(_index: number, workflow: Workflow) {
     return workflow.id;
@@ -60,6 +73,6 @@ export class StoryDetailWorkflowComponent {
   public moveToWorkflow(workflow: Workflow) {
     this.openWorkflowList = false;
     this.component?.nativeFocusableElement?.focus();
-    console.log('move to workflow', workflow);
+    this.toWorkflow.emit(workflow);
   }
 }

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

@@ -34,6 +34,10 @@ export const StoryDetailActions = createActionGroup({
       story: StoryUpdate;
       projectId: Project['id'];
     }>(),
+    'Update story workflow': props<{
+      story: StoryUpdate;
+      projectId: Project['id'];
+    }>(),
     'Delete story': props<{
       ref: Story['ref'];
       project: Project;
@@ -104,6 +108,7 @@ export const StoryDetailApiActions = createActionGroup({
     'Fetch Story Success': props<{ story: StoryDetail }>(),
     'Fetch Workflow Success': props<{ workflow: Workflow }>(),
     'Update Story Success': props<{ story: StoryDetail }>(),
+    'Update Story Workflow Success': props<{ story: StoryDetail }>(),
     'Delete Story Success': props<{
       project: Project;
       ref: Story['ref'];

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

@@ -54,7 +54,10 @@ export class StoryDetailEffects {
 
   public loadWorkflow$ = createEffect(() => {
     return this.actions$.pipe(
-      ofType(StoryDetailApiActions.fetchStorySuccess),
+      ofType(
+        StoryDetailApiActions.fetchStorySuccess,
+        StoryDetailApiActions.updateStoryWorkflowSuccess
+      ),
       concatLatestFrom(() => [
         this.store.select(selectWorkflow),
         this.store.select(selectCurrentProject).pipe(filterNil()),
@@ -152,6 +155,35 @@ export class StoryDetailEffects {
     );
   });
 
+  public updateStoryWorkflow$ = createEffect(() => {
+    return this.actions$.pipe(
+      ofType(StoryDetailActions.updateStoryWorkflow),
+      pessimisticUpdate({
+        run: (action) => {
+          return this.projectApiService
+            .updateStory(action.projectId, action.story)
+            .pipe(
+              map((story) =>
+                StoryDetailApiActions.updateStoryWorkflowSuccess({ story })
+              )
+            );
+        },
+        onError: (action, httpResponse: HttpErrorResponse) => {
+          this.appService.errorManagement(httpResponse, {
+            any: {
+              type: 'toast',
+              options: {
+                label: 'errors.save_changes',
+                message: 'errors.please_refresh',
+                status: TuiNotification.Error,
+              },
+            },
+          });
+        },
+      })
+    );
+  });
+
   public deleteStory$ = createEffect(() => {
     return this.actions$.pipe(
       ofType(StoryDetailActions.deleteStory),

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

@@ -158,12 +158,14 @@ export const reducer = createImmerReducer(
   ),
   on(
     StoryDetailApiActions.updateStorySuccess,
+    StoryDetailApiActions.updateStoryWorkflowSuccess,
     (state, { story }): StoryDetailState => {
       state.story = story;
 
       return state;
     }
   ),
+
   on(StoryDetailActions.updateStory, (state, { story }): StoryDetailState => {
     if (state.story) {
       if (story.title) {

javascript/apps/taiga/src/app/modules/project/story-detail/story-detail.component.html

@@ -126,9 +126,9 @@
                       <tg-story-detail-workflow
                         *ngIf="vm.story"
                         [story]="vm.story"
-                        [workflows]="
-                          vm.project.workflows
-                        "></tg-story-detail-workflow>
+                        [workflows]="vm.project.workflows"
+                        (toWorkflow)="moveStoryToWorkflow($event)">
+                      </tg-story-detail-workflow>
                     </ng-container>
 
                     <tg-story-detail-status

javascript/apps/taiga/src/app/modules/project/story-detail/story-detail.component.ts

@@ -477,6 +477,18 @@ export class StoryDetailComponent {
     );
   }
 
+  public moveStoryToWorkflow(workflow: Workflow) {
+    const story = this.getStoryUpdate();
+    story.workflow = workflow.slug;
+
+    this.store.dispatch(
+      StoryDetailActions.updateStoryWorkflow({
+        projectId: this.state.get('project').id,
+        story,
+      })
+    );
+  }
+
   public fieldFocus(focus: boolean) {
     this.state.set({ fieldFocus: focus });
   }

javascript/libs/data/src/lib/story.model.ts

@@ -44,6 +44,7 @@ export interface StoryUpdate {
   status?: Story['status']['id'];
   title?: Story['title'];
   description?: Story['description'];
+  workflow?: Workflow['slug'];
 }
 
 export interface createdBy {