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,18 @@ 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';
@@ -35,7 +38,6 @@ import {
   replaceStory,
   setIntialPosition,
 } from './kanban.reducer.helpers';
-import { StoryDetailApiActions } from '~/app/modules/project/story-detail/data-access/+state/actions/story-detail.actions';
 
 export interface KanbanState {
   loadingWorkflow: boolean;
@@ -632,6 +634,18 @@ export const reducer = createImmerReducer(
       return state;
     }
   ),
+  on(
+    StoryDetailApiActions.updateStoryWorkflowSuccess,
+    (state, { story }): KanbanState => {
+      if (state.currentWorkflowSlug !== story.workflow.slug) {
+        state = removeStory(state, (it) => it.ref === story.ref);
+      } else {
+        state = addStory(state, story, undefined, 'top', story.status);
+      }
+
+      return state;
+    }
+  ),
   on(
     KanbanActions.deleteStory,
     StoryDetailActions.deleteStory,

javascript/apps/taiga/src/app/modules/project/feature-view-setter/project-feature-view-setter.component.ts

@@ -18,13 +18,13 @@ import {
 } from '@angular/core';
 import { Store } from '@ngrx/store';
 import {
+  combineLatest,
   distinctUntilChanged,
   filter,
   map,
+  of,
   pairwise,
   startWith,
-  combineLatest,
-  of,
 } from 'rxjs';
 import { RouteHistoryService } from '~/app/shared/route-history/route-history.service';
 import { StoryDetailActions } from '../story-detail/data-access/+state/actions/story-detail.actions';
@@ -33,18 +33,18 @@ import {
   selectStoryView,
 } from '../story-detail/data-access/+state/selectors/story-detail.selectors';
 
-import { ProjectFeatureStoryWrapperFullViewModule } from '../feature-story-wrapper-full-view/project-feature-story-wrapper-full-view.module';
-import { filterNil } from '~/app/shared/utils/operators';
+import { CommonModule } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
   ActivatedRoute,
   ActivatedRouteSnapshot,
   Router,
 } from '@angular/router';
 import { RxState } from '@rx-angular/state';
-import { CommonModule } from '@angular/common';
-import { StoryDetail, StoryView, Project, Story, Workflow } from '@taiga/data';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { selectCurrentWorkflowSlug } from '~/app/modules/project/feature-kanban/data-access/+state/selectors/kanban.selectors';
+import { Project, Story, StoryDetail, StoryView, Workflow } from '@taiga/data';
+import { filterNil } from '~/app/shared/utils/operators';
+import { selectCurrentWorkflowSlug } from '../feature-kanban/data-access/+state/selectors/kanban.selectors';
+import { ProjectFeatureStoryWrapperFullViewModule } from '../feature-story-wrapper-full-view/project-feature-story-wrapper-full-view.module';
 
 interface ProjectFeatureViewSetterComponentState {
   storyView: StoryView;

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

@@ -0,0 +1,56 @@
+/*
+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");
+@import url("shared/option-list.css");
+
+:host {
+  display: block;
+}
+
+.workflow-selector-wrapper {
+  inline-size: 245px;
+}
+
+.workflow-list-header {
+  @mixin font-small;
+
+  color: var(--color-gray100);
+  padding-block: var(--spacing-4) var(--spacing-8);
+  padding-inline: var(--spacing-4);
+  text-transform: uppercase;
+}
+
+.separator {
+  @mixin separator;
+
+  margin-inline: 0;
+}
+
+.workflow-btn {
+  @mixin font-inline;
+
+  align-items: center;
+  color: var(--color-gray90);
+  display: flex;
+  gap: var(--spacing-8);
+  justify-content: flex-start;
+}
+
+.workflow-icon {
+  color: var(--color-gray40);
+}
+
+.workflow-name {
+  @mixin ellipsis;
+
+  &:hover {
+    background: var(--color-gray20);
+    color: var(--color-secondary80);
+  }
+}

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

@@ -0,0 +1,62 @@
+<!--
+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
+-->
+
+<ng-container *transloco="let t">
+  <tg-ui-breadcrumb
+    class="story-breadcrumb"
+    [collapsable]="true"
+    [crumbs]="[t('kanban.workflow'), story.workflow.name]">
+    <tui-hosted-dropdown
+      *ngIf="canEdit"
+      data-slot="workflow-action"
+      class="status-options-menu"
+      tuiDropdownAlign="left"
+      [content]="workflowListDropdown"
+      [(open)]="openWorkflowList">
+      <button
+        aria-haspopup="true"
+        [attr.aria-expanded]="openWorkflowList"
+        data-slot="workflow-action"
+        [attr.aria-label]="'move story'"
+        icon="change"
+        appearance="tertiary"
+        class="move-story-to-workflow-button"
+        tuiIconButton
+        [pseudoActive]="openWorkflowList || null"
+        type="button"></button>
+    </tui-hosted-dropdown>
+    <ng-template #workflowListDropdown>
+      <div class="workflow-selector-wrapper">
+        <tui-data-list>
+          <div class="workflow-list-header">
+            {{ t('kanban.move_to_workflow') }}
+          </div>
+          <hr class="separator" />
+          <tui-opt-group>
+            <button
+              *ngFor="
+                let workflow of filteredWorkflows;
+                trackBy: trackByWorkflowId
+              "
+              class="workflow-btn"
+              tuiOption
+              type="button"
+              (click)="moveToWorkflow(workflow)">
+              <tui-svg
+                src="kanban"
+                class="workflow-icon"></tui-svg>
+              <span class="workflow-name">
+                {{ workflow.name }}
+              </span>
+            </button>
+          </tui-opt-group>
+        </tui-data-list>
+      </div>
+    </ng-template>
+  </tg-ui-breadcrumb>
+</ng-container>

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

@@ -0,0 +1,81 @@
+/**
+ * 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 {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  ViewChild,
+} from '@angular/core';
+
+import { CommonModule } from '@angular/common';
+import { TranslocoDirective } from '@ngneat/transloco';
+import {
+  TuiButtonModule,
+  TuiDataListModule,
+  TuiHostedDropdownComponent,
+  TuiHostedDropdownModule,
+  TuiSvgModule,
+} from '@taiga-ui/core';
+import { StoryDetail, Workflow } from '@taiga/data';
+import { BreadcrumbComponent } from '@taiga/ui/breadcrumb/breadcrumb.component';
+
+@Component({
+  selector: 'tg-story-detail-workflow',
+  templateUrl: './story-detail-workflow.component.html',
+  styleUrls: ['./story-detail-workflow.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    TranslocoDirective,
+    BreadcrumbComponent,
+    TuiButtonModule,
+    TuiHostedDropdownModule,
+    TuiDataListModule,
+    TuiSvgModule,
+  ],
+})
+export class StoryDetailWorkflowComponent implements OnChanges {
+  @Input({ required: true })
+  public story!: StoryDetail;
+
+  @Input({ required: true })
+  public workflows!: Workflow[];
+
+  @Input()
+  public canEdit = false;
+
+  @ViewChild(TuiHostedDropdownComponent)
+  public component?: TuiHostedDropdownComponent;
+
+  @Output()
+  public toWorkflow = new EventEmitter<Workflow>();
+
+  public openWorkflowList = false;
+  public filteredWorkflows: Workflow[] = [];
+
+  public ngOnChanges(): void {
+    this.filteredWorkflows = this.workflows.filter(
+      (workflow) => workflow.slug !== this.story.workflow.slug
+    );
+  }
+
+  public trackByWorkflowId(_index: number, workflow: Workflow) {
+    return workflow.id;
+  }
+
+  public moveToWorkflow(workflow: Workflow) {
+    this.openWorkflowList = false;
+    this.component?.nativeFocusableElement?.focus();
+    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()),
@@ -157,6 +160,46 @@ 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) => {
+          if (httpResponse.status === 400) {
+            this.appService.toastNotification({
+              message: 'move.error',
+              paramsMessage: { workflow: action.story.workflow },
+              status: TuiNotification.Error,
+              scope: 'story',
+              autoClose: true,
+              closeOnNavigation: false,
+            });
+          } else {
+            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) {