feat: make prd user stories export format consistent with prds export

.changeset/upset-hands-hang.md

@@ -0,0 +1,7 @@
+---
+"specif-ai": patch
+---
+
+make prd user story export format consistent with prds export format
+extract clipboard logic into a clipboard service
+removed CSV export option when exporting prd user stories

ui/src/app/constants/export.constants.ts

@@ -1,7 +1,19 @@
+import { REQUIREMENT_TYPE } from "./app.constants";
+
 export const EXPORT_FILE_FORMATS = {
   JSON: 'json',
   EXCEL: 'xlsx',
 } as const;
 
+export const SPREADSHEET_HEADER_ROW = {
+  [REQUIREMENT_TYPE.BRD]: ['Id', 'Title', 'Description'],
+  [REQUIREMENT_TYPE.PRD]: ['Id', 'Title', 'Description'],
+  [REQUIREMENT_TYPE.NFR]: ['Id', 'Title', 'Description'],
+  [REQUIREMENT_TYPE.UIR]: ['Id', 'Title', 'Description'],
+  [REQUIREMENT_TYPE.BP]: ['Id', 'Title', 'Description'],
+  [REQUIREMENT_TYPE.US]: ['Id', 'Parent Id', 'Name', 'Description'],
+  [REQUIREMENT_TYPE.TASK]: ['Id', 'Parent Id', 'Title', 'Acceptance Criteria'],
+}
+
 export type ExportFileFormat =
   (typeof EXPORT_FILE_FORMATS)[keyof typeof EXPORT_FILE_FORMATS];

ui/src/app/pages/tasks/task-list/task-list.component.ts

@@ -25,7 +25,7 @@ import { ButtonComponent } from '../../../components/core/button/button.componen
 import { NgIconComponent } from '@ng-icons/core';
 import { ListItemComponent } from '../../../components/core/list-item/list-item.component';
 import { BadgeComponent } from '../../../components/core/badge/badge.component';
-import { Clipboard } from '@angular/cdk/clipboard';
+import { ClipboardService } from '../../../services/clipboard.service';
 import { TOASTER_MESSAGES } from 'src/app/constants/app.constants';
 import { ToasterService } from 'src/app/services/toaster/toaster.service';
 import { SearchInputComponent } from '../../../components/core/search-input/search-input.component';
@@ -53,7 +53,7 @@ export class TaskListComponent implements OnInit, OnDestroy {
   store = inject(Store);
   logger = inject(NGXLogger);
   router = inject(Router);
-  clipboard = inject(Clipboard);
+  clipboardService = inject(ClipboardService);
   searchService = inject(SearchService);
   userStoryId: string | null = '';
   userStories: IUserStory[] = [];
@@ -226,10 +226,16 @@ export class TaskListComponent implements OnInit, OnDestroy {
   copyTaskContent(event: Event, task: any) {
     event.stopPropagation();
     const taskContent = `${task.id}: ${task.list}\n${task.acceptance || ''}`;
-    this.clipboard.copy(taskContent);
-    this.toastService.showSuccess(
-      TOASTER_MESSAGES.ENTITY.COPY.SUCCESS(this.entityType, task.id),
-    );
+    const success = this.clipboardService.copyToClipboard(taskContent);
+    if (success) {
+      this.toastService.showSuccess(
+        TOASTER_MESSAGES.ENTITY.COPY.SUCCESS(this.entityType, task.id),
+      );
+    } else {
+      this.toastService.showError(
+        TOASTER_MESSAGES.ENTITY.COPY.FAILURE(this.entityType, task.id),
+      );
+    }
   }
 
   ngOnInit() {

ui/src/app/pages/user-stories/user-stories.component.html

@@ -46,14 +46,14 @@ <h2 class="text-md font-semibold text-gray-600">User Stories</h2>
             <button
               mat-menu-item
               class="rounded px-2 py-1 text-xs font-semibold text-indigo-600 shadow-sm hover:bg-indigo-100 mr-2"
-              (click)="copyToClipboard()"
+              (click)="exportUserStories('json')"
             >
               Copy JSON to Clipboard
             </button>
             <button
               mat-menu-item
               class="rounded px-2 py-1 text-xs font-semibold text-indigo-600 shadow-sm hover:bg-indigo-100 mr-2"
-              (click)="exportToExcel()"
+              (click)="exportUserStories('xlsx')"
             >
               Download as Excel(.xlsx)
             </button>
@@ -64,13 +64,6 @@ <h2 class="text-md font-semibold text-gray-600">User Stories</h2>
             >
               Sync with Jira
             </button>
-            <button
-              mat-menu-item
-              class="rounded px-2 py-1 text-xs font-semibold text-indigo-600 shadow-sm hover:bg-indigo-100 mr-2"
-              (click)="exportToCSV()"
-            >
-              Download as CSV(.csv)
-            </button>
           </mat-menu>
           <app-button
             buttonContent="Add New"

ui/src/app/pages/user-stories/user-stories.component.ts

@@ -5,6 +5,7 @@ import { Store } from '@ngxs/store';
 import { UserStoriesState } from '../../store/user-stories/user-stories.state';
 import {
   EditUserStory,
+  ExportUserStories,
   GetUserStories,
   SetCurrentConfig,
   SetSelectedProject,
@@ -20,8 +21,7 @@ import {
   ReadFile,
   UpdateFile,
 } from '../../store/projects/projects.actions';
-import { SpreadSheetService } from '../../services/spreadsheet.service';
-import { Clipboard } from '@angular/cdk/clipboard';
+import { ClipboardService } from '../../services/clipboard.service';
 import { ITaskRequest, ITasksResponse } from '../../model/interfaces/ITask';
 import { AddBreadcrumb } from '../../store/breadcrumb/breadcrumb.actions';
 import { LoadingService } from '../../services/loading.service';
@@ -48,6 +48,7 @@ import { CONFIRMATION_DIALOG, TOASTER_MESSAGES } from '../../constants/app.const
 import { SearchInputComponent } from '../../components/core/search-input/search-input.component';
 import { SearchService } from '../../services/search/search.service';
 import { BehaviorSubject } from 'rxjs';
+import { ExportFileFormat } from 'src/app/constants/export.constants';
 
 @Component({
   selector: 'app-user-stories',
@@ -81,8 +82,6 @@ export class UserStoriesComponent implements OnInit {
   searchService = inject(SearchService);
   requirementFile: any = [];
   userStories: IUserStory[] = [];
-  exportData: any = [];
-  jsonOutput: any = {};
 
   isTokenAvailable: boolean = true;
   navigation: {
@@ -120,8 +119,7 @@ export class UserStoriesComponent implements OnInit {
 
   constructor(
     private featureService: FeatureService,
-    private spreadSheetService: SpreadSheetService,
-    private clipboard: Clipboard,
+    private clipboardService: ClipboardService,
     private loadingService: LoadingService,
     private jiraService: JiraService,
     private electronService: ElectronService,
@@ -329,69 +327,28 @@ export class UserStoriesComponent implements OnInit {
         `${this.currentProject}/${this.navigation.folderName}/${this.newFileName}`,
       ),
     );
-
-    this.userStories$.subscribe((res) => {
-      this.exportData = this.prepareExportData(res);
-      this.jsonOutput = {
-        userStories: res.map((userStory) => ({
-          name: userStory.name,
-          description: userStory.description,
-          tasks:
-            userStory.tasks?.map((task) => ({
-              list: task.list,
-              acceptanceCriteria: task.acceptance,
-            })) || [],
-        })),
-      };
-    });
-  }
-
-  private prepareExportData(stories: any): any {
-    const worksheetData = [
-      ['User Story', 'Description', 'Task', 'Acceptance Criteria'],
-    ];
-
-    stories.forEach((userStory: any) => {
-      userStory.tasks.forEach((task: any) => {
-        worksheetData.push([
-          userStory.name,
-          userStory.description,
-          task.list,
-          task.acceptance,
-        ]);
-      });
-    });
-    return worksheetData;
   }
 
   copyUserStoryContent(event: Event, userStory: IUserStory) {
     event.stopPropagation();
     const userStoryContent = `${userStory.id}: ${userStory.name}\n${userStory.description || ''}`;
-    this.clipboard.copy(userStoryContent);
-    this.toast.showSuccess(
-      TOASTER_MESSAGES.ENTITY.COPY.SUCCESS(this.entityType, userStory.id),
-    );
-  }
-
-  copyToClipboard() {
-    this.clipboard.copy(JSON.stringify(this.jsonOutput));
-  }
-
-  exportToExcel() {
-    this.spreadSheetService.exportToExcel(
-      [
-        {
-          data: this.exportData,
-        },
-      ],
-      `${this.navigation.data.name}_${this.navigation.fileName.split('-')[0]}`,
-    );
+    const success = this.clipboardService.copyToClipboard(userStoryContent);
+    if (success) {
+      this.toast.showSuccess(
+        TOASTER_MESSAGES.ENTITY.COPY.SUCCESS(this.entityType, userStory.id),
+      );
+    } else {
+      this.toast.showError(
+        TOASTER_MESSAGES.ENTITY.COPY.FAILURE(this.entityType, userStory.id),
+      );
+    }
   }
 
-  exportToCSV() {
-    this.spreadSheetService.exportToCsv(
-      this.exportData,
-      `${this.navigation.data.name}_${this.navigation.fileName.split('-')[0]}`,
+  exportUserStories(exportType: ExportFileFormat) {
+    this.store.dispatch(
+      new ExportUserStories({
+        type: exportType,
+      }),
     );
   }
 

ui/src/app/services/clipboard.service.ts

@@ -0,0 +1,31 @@
+import { Clipboard } from '@angular/cdk/clipboard';
+import { Injectable } from '@angular/core';
+import { NGXLogger } from 'ngx-logger';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ClipboardService {
+  constructor(private logger: NGXLogger, private clipboard: Clipboard) {}
+
+  public copyToClipboard(data: string | object): boolean {
+    if (data === null || data === undefined) {
+      return false;
+    }
+
+    try {
+      let contentToCopy: string;
+
+      if (typeof data === 'object') {
+        contentToCopy = JSON.stringify(data);
+      } else {
+        contentToCopy = data;
+      }
+
+      return this.clipboard.copy(contentToCopy);
+    } catch (error) {
+      this.logger.error('Failed to copy to clipboard:', error);
+      return false;
+    }
+  }
+}

ui/src/app/services/export/requirement-export-strategy.manager.ts

@@ -1,4 +1,3 @@
-import { Clipboard } from '@angular/cdk/clipboard';
 import { Injectable } from '@angular/core';
 import { NGXLogger } from 'ngx-logger';
 import { REQUIREMENT_TYPE } from 'src/app/constants/app.constants';
@@ -10,6 +9,8 @@ import { NFRExportStrategy } from './strategies/nfr-export.strategy';
 import { PRDExportStrategy } from './strategies/prd-export.strategy';
 import { UIRExportStrategy } from './strategies/uir-export.strategy';
 import { AppSystemService } from '../app-system/app-system.service';
+import { ClipboardService } from '../clipboard.service';
+import { UserStoriesExportStrategy } from './strategies/user-stories-export.strategy';
 
 @Injectable({
   providedIn: 'root',
@@ -21,7 +22,7 @@ export class RequirementExportStrategyManager {
     private logger: NGXLogger,
     private exportService: SpreadSheetService,
     private appSystemService: AppSystemService,
-    private clipboard: Clipboard,
+    private clipboardService: ClipboardService,
   ) {}
 
   initializeStrategy(requirementType: string) {
@@ -31,35 +32,42 @@ export class RequirementExportStrategyManager {
           this.exportService,
           this.appSystemService,
           this.logger,
-          this.clipboard,
+          this.clipboardService,
         );
       }
       case REQUIREMENT_TYPE.BRD: {
         return new BRDExportStrategy(
           this.exportService,
           this.logger,
-          this.clipboard,
+          this.clipboardService,
         );
       }
       case REQUIREMENT_TYPE.BP: {
         return new BPExportStrategy(
           this.exportService,
           this.logger,
-          this.clipboard,
+          this.clipboardService,
         );
       }
       case REQUIREMENT_TYPE.NFR: {
         return new NFRExportStrategy(
           this.exportService,
           this.logger,
-          this.clipboard,
+          this.clipboardService,
         );
       }
       case REQUIREMENT_TYPE.UIR: {
         return new UIRExportStrategy(
           this.exportService,
           this.logger,
-          this.clipboard,
+          this.clipboardService,
+        );
+      }
+      case REQUIREMENT_TYPE.US: {
+        return new UserStoriesExportStrategy(
+          this.exportService,
+          this.logger,
+          this.clipboardService,
         );
       }
       default: {

ui/src/app/services/export/requirement-export.service.ts

@@ -7,6 +7,18 @@ import {
   REQUIREMENT_DISPLAY_NAME_MAP,
   RequirementType,
 } from 'src/app/constants/app.constants';
+import { IUserStory } from 'src/app/model/interfaces/IUserStory';
+import { IList } from 'src/app/model/interfaces/IList';
+
+// types
+
+type RequirementExportInputData = {
+  prdId:string;
+  userStories: Array<IUserStory>;
+} | Array<IList>;
+
+// types
+
 
 @Injectable({
   providedIn: 'root',
@@ -19,14 +31,14 @@ export class RequirementExportService {
   ) {}
 
   public async exportRequirementData(
-    files: any[],
+    data: RequirementExportInputData,
     options: ExportRequirementDataOptions & { projectName: string },
     requirementType: string,
   ): Promise<void> {
     try {
       const strategy = this.strategyManager.getStrategy(requirementType);
 
-      const result = await strategy.export(files, {
+      const result = await strategy.export(data, {
         format: options.type,
         projectName: options.projectName,
       });