import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; import { AngularSvgIconModule } from 'angular-svg-icon'; import { CommonModule } from '@angular/common'; import { HttpClientModule } from '@angular/common/http'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgbModule, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'; // DragnDrop library import { CdkDrag, CdkDragPlaceholder, CdkDropList, } from '@angular/cdk/drag-drop'; // services import { AppModalService } from '../ca-comment/services'; import { FileService } from './services'; // pipes import { ByteConvertPipe, FileNamePipe, UrlExtensionPipe, } from '../ca-upload-files/components/ca-upload-file/pipes'; // models import { ToDoCardConfig } from './models'; import { ProgressExpiration } from '../ca-progress-expiration/models'; import { CommentConfig, SaveCommentData } from '../ca-comment/models'; // interfaces import { IFileOptionConfig, IReviewFileConfig, ISlider, IUploadFilesConfig, } from '../ca-upload-files/interfaces'; import { IFileConfig } from '../ca-upload-files/components/ca-upload-dropzone/interfaces/file-config.interface'; import { IFilesCarouselConfig } from '../ca-upload-files/components/ca-upload-files-carousel/interfaces'; // components import { CaTodoComponent } from './ca-todo.component'; // enums import { eFileSize, eReviewState } from '../ca-upload-files/enums'; import { eTemplateType } from '../../../../../ca-components/src/public-api'; export default { title: 'Example/TodoDragandDrop', component: CaTodoComponent, decorators: [ moduleMetadata({ declarations: [], imports: [ AngularSvgIconModule.forRoot(), CommonModule, HttpClientModule, BrowserAnimationsModule, NgbTooltip, CdkDrag, CdkDragPlaceholder, CdkDropList, NgbModule, ], providers: [ AppModalService, FileService, UrlExtensionPipe, FileNamePipe, ByteConvertPipe, ], }), ], tags: ['autodocs'], argTypes: { config: { control: 'object', }, configProgress: { control: 'object', }, commentConfig: { control: 'object', }, files: { control: 'object', }, slider: { control: 'object', }, review: { control: 'object', }, configFile: { control: 'object', }, carouselConfig: { control: 'object', }, onSave: { action: 'onSave' }, onUpdate: { action: 'onUpdate' }, onDelete: { action: 'onDelete' }, }, } as Meta; type Story = StoryObj; export const TodoDragAndDrop: Story = { args: { todoConfigs: [ { id: 1, uploadFilesConfig: { // Files files: [ { url: 'https://www.orimi.com/pdf-test.pdf', incorrect: false, lastHovered: false, fileSize: 1200, fileName: 'Sample File.pdf', } as IFileConfig, { url: 'https://www.orimi.com/pdf-test.pdf', incorrect: false, lastHovered: false, fileSize: 1200, fileName: 'Sample File.pdf', } as IFileConfig, { url: 'https://www.orimi.com/pdf-test.pdf', incorrect: false, lastHovered: false, fileSize: 1200, fileName: 'Sample File.pdf', } as IFileConfig, { url: 'https://www.orimi.com/pdf-test.pdf', incorrect: false, lastHovered: false, fileSize: 1200, fileName: 'Sample File.pdf', } as IFileConfig, ], // Carousel slider: { dontUseSlider: false, hasCarouselBottomTabs: true, } as ISlider, carouselConfig: { files: [ { url: 'https://www.orimi.com/pdf-test.pdf', incorrect: false, lastHovered: false, fileSize: 1200, fileName: 'Sample File.pdf', } as IFileConfig, { url: 'https://www.orimi.com/pdf-test.pdf', incorrect: false, lastHovered: false, fileSize: 1200, fileName: 'Sample File.pdf', } as IFileConfig, { url: 'https://www.orimi.com/pdf-test.pdf', incorrect: false, lastHovered: false, fileSize: 1200, fileName: 'Sample File.pdf', } as IFileConfig, { url: 'https://www.orimi.com/pdf-test.pdf', incorrect: false, lastHovered: false, fileSize: 1200, fileName: 'Sample File.pdf', } as IFileConfig, ], customClass: 'medium', customDetailsPageClass: 'todo-details', hasCarouselBottomTabs: false, } as IFilesCarouselConfig, hasCrop: false, isRoundCrop: false, hasBlobUrl: false, dropZoneConfig: { template: eTemplateType.DOCUMENTS, }, dropzoneCustomWidth: '', isVisibleCropAndDrop: false, initialCropperPosition: { x1: 0, y1: 0, x2: 184, y2: 184, }, containWithinAspectRatio: true, aspectRatio: [1, 1], // Review review: { isReview: false, reviewMode: eReviewState.REVIEW_MODE, feedbackText: 'Sample feedback text', categoryTag: 'General', } as IReviewFileConfig, fileOptionsConfig: { id: 111, customClassName: 'todo-details', file: { url: 'https://www.orimi.com/pdf-test.pdf', incorrect: false, lastHovered: false, fileSize: 1200, fileName: '', }, hasTagsDropdown: true, hasNumberOfPages: true, activePage: 1, type: 'todo', hasLandscapeOption: false, tagsOptions: [ { tagName: 'HOS Agreement', checked: false }, { tagName: 'Unsafe Driving AGT', checked: false }, ], } as IFileOptionConfig, size: eFileSize.MEDIUM, slideWidth: 180, } as IUploadFilesConfig, config: { title: 'Monitor Hours of Service (HOS) Compliance', department: 'IT', assigment: ['Assigment', 'Safety'], description: 'Inspect the securement of cargo to prevent shifting or falling during transit. Ensure that load bars, straps, chains, and other securing devices are properly fastened and adjusted according to regulations.', link: 'https://twitter.com/css/status/1026274687989571586', imageProfiles: [ { indx: 0, textShortName: 'MD', avatarColor: { background: '#DFC2F9', color: '#9E47EC66', }, }, { indx: 1, textShortName: 'AB', avatarColor: { background: '#FFC2F9', color: '#FF47EC66', }, }, { indx: 2, textShortName: 'JK', avatarColor: { background: '#AFC2F9', color: '#9E47FF66', }, }, ], configDropzone: { maxFileSize: 1024 * 1024, acceptedFileTypes: ['application/pdf', 'image/png'], }, } as ToDoCardConfig, configProgress: [ { template: 'todo-list', expireDate: new Date('2024-08-05'), type: 'small', theme: 'light', } as ProgressExpiration, ], commentConfig: [ { id: 1, user: { avatarImage: 'https://gravatar.com/avatar/27205e5c51cb03f862138b22bcb5dc20f94a342e744ff6df1b8dc8af3c865109', name: 'Angelo Trotter', }, owner: false, createdAt: new Date(), updatedAt: new Date(), content: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.', } as CommentConfig, { id: 357, user: { avatarImage: 'https://gravatar.com/avatar/27205e5c51cb03f862138b22bcb5dc20f94a342e744ff6df1b8dc8af3c865109', name: 'John Doe', }, owner: true, createdAt: new Date(), updatedAt: new Date('2024-08-20'), content: 'This comment is editable.', } as CommentConfig, ], newCommentConfig: [ { user: { avatarImage: 'https://gravatar.com/avatar/27205e5c51cb03f862138b22bcb5dc20f94a342e744ff6df1b8dc8af3c865109', name: 'Angelo Trotter', }, owner: true, content: '', onSave: (data: SaveCommentData) => console.log('saved data: ', data), } as CommentConfig, ], }, { id: 2, uploadFilesConfig: { // Files files: [], // Carousel slider: { dontUseSlider: false, hasCarouselBottomTabs: false, }, carouselConfig: { files: [], customClass: 'my-carousel', customDetailsPageClass: undefined, hasCarouselBottomTabs: undefined, size: undefined, }, hasCrop: false, isRoundCrop: false, hasBlobUrl: false, dropZoneConfig: { template: eTemplateType.DOCUMENTS, }, dropzoneCustomWidth: '', isVisibleCropAndDrop: false, initialCropperPosition: { x1: 0, y1: 0, x2: 184, y2: 184, }, containWithinAspectRatio: true, aspectRatio: [1, 1], // Review review: { isReview: true, reviewMode: undefined, feedbackText: '', categoryTag: undefined, isFooterHidden: false, isActionsHidden: true, }, fileOptionsConfig: { id: 1, file: { url: '', }, customClassName: undefined, url: undefined, hasTagsDropdown: true, hasNumberOfPages: undefined, activePage: 1, type: undefined, hasLandscapeOption: false, tagsOptions: [], tags: undefined, }, size: eFileSize.MEDIUM, slideWidth: 180, } as IUploadFilesConfig, config: { title: 'Prepare Financial Statements', department: 'IT', assigment: ['Assigment', 'Safety'], description: 'Inspect the securement of cargo to prevent shifting or falling during transit. Ensure that load bars, straps, chains, and other securing devices are properly fastened and adjusted according to regulations.', link: '', imageProfiles: [], } as ToDoCardConfig, commentConfig: [], newCommentConfig: [ { user: { avatarImage: 'https://gravatar.com/avatar/27205e5c51cb03f862138b22bcb5dc20f94a342e744ff6df1b8dc8af3c865109', name: 'Angelo Trotter', }, owner: true, content: '', onSave: (data: SaveCommentData) => console.log('saved data: ', data), } as CommentConfig, ], }, ], inProgressConfigs: [ { id: 3, uploadFilesConfig: { files: [], slider: { dontUseSlider: false, hasCarouselBottomTabs: false, }, carouselConfig: { files: [], customClass: 'my-carousel', customDetailsPageClass: undefined, hasCarouselBottomTabs: undefined, size: undefined, }, hasCrop: false, isRoundCrop: false, hasBlobUrl: false, dropZoneConfig: { template: eTemplateType.DOCUMENTS, }, dropzoneCustomWidth: '', isVisibleCropAndDrop: false, initialCropperPosition: { x1: 0, y1: 0, x2: 184, y2: 184, }, containWithinAspectRatio: false, aspectRatio: [1, 1], review: { isReview: true, reviewMode: undefined, feedbackText: '', categoryTag: undefined, isFooterHidden: false, isActionsHidden: true, }, fileOptionsConfig: { id: 1, file: { url: '', }, customClassName: undefined, url: undefined, hasTagsDropdown: true, hasNumberOfPages: undefined, activePage: 1, type: undefined, hasLandscapeOption: false, tagsOptions: [], tags: undefined, }, size: eFileSize.MEDIUM, slideWidth: 180, } as IUploadFilesConfig, config: { title: 'Hello Financial Statements', department: 'IT', assigment: ['Assigment', 'Safety'], description: 'Inspect the securement of cargo to prevent shifting or falling during transit. Ensure that load bars, straps, chains, and other securing devices are properly fastened and adjusted according to regulations.', link: '', imageProfiles: [], } as ToDoCardConfig, commentConfig: [], newCommentConfig: [ { user: { avatarImage: 'https://gravatar.com/avatar/27205e5c51cb03f862138b22bcb5dc20f94a342e744ff6df1b8dc8af3c865109', name: 'Angelo Trotter', }, owner: true, content: '', onSave: (data: SaveCommentData) => console.log('saved data: ', data), } as CommentConfig, ], }, { id: 3, uploadFilesConfig: { // Files files: [], // Carousel slider: { dontUseSlider: false, hasCarouselBottomTabs: false, }, carouselConfig: { files: [], customClass: 'my-carousel', customDetailsPageClass: undefined, hasCarouselBottomTabs: undefined, size: undefined, }, hasCrop: false, isRoundCrop: false, hasBlobUrl: false, dropZoneConfig: { template: eTemplateType.DOCUMENTS, }, dropzoneCustomWidth: '', isVisibleCropAndDrop: false, initialCropperPosition: { x1: 0, y1: 0, x2: 184, y2: 184, }, containWithinAspectRatio: false, aspectRatio: [1, 1], // Review review: { isReview: true, reviewMode: undefined, feedbackText: '', categoryTag: undefined, isFooterHidden: false, isActionsHidden: true, }, fileOptionsConfig: { id: 1, file: { url: '', }, customClassName: undefined, url: undefined, hasTagsDropdown: true, hasNumberOfPages: undefined, activePage: 1, type: undefined, hasLandscapeOption: false, tagsOptions: [], tags: undefined, }, size: eFileSize.MEDIUM, slideWidth: 180, } as IUploadFilesConfig, config: { title: 'Get Financial Statements', department: 'IT', assigment: ['Assigment', 'Safety'], description: 'Inspect the securement of cargo to prevent shifting or falling during transit. Ensure that load bars, straps, chains, and other securing devices are properly fastened and adjusted according to regulations.', link: '', imageProfiles: [], } as ToDoCardConfig, commentConfig: [], newCommentConfig: [ { user: { avatarImage: 'https://gravatar.com/avatar/27205e5c51cb03f862138b22bcb5dc20f94a342e744ff6df1b8dc8af3c865109', name: 'Angelo Trotter', }, owner: true, content: '', onSave: (data: SaveCommentData) => console.log('saved data: ', data), } as CommentConfig, ], }, ], completedConfigs: [ { id: 4, uploadFilesConfig: { // Files files: [], // Carousel slider: { dontUseSlider: false, hasCarouselBottomTabs: false, }, carouselConfig: { files: [], customClass: 'my-carousel', customDetailsPageClass: undefined, hasCarouselBottomTabs: undefined, size: undefined, }, hasCrop: false, isRoundCrop: false, hasBlobUrl: false, dropZoneConfig: { template: eTemplateType.DOCUMENTS, }, dropzoneCustomWidth: '', isVisibleCropAndDrop: false, initialCropperPosition: { x1: 0, y1: 0, x2: 184, y2: 184, }, containWithinAspectRatio: false, aspectRatio: [1, 1], // Review review: { isReview: true, reviewMode: undefined, feedbackText: '', categoryTag: undefined, isFooterHidden: false, isActionsHidden: true, }, fileOptionsConfig: { id: 1, file: { url: '', }, customClassName: undefined, url: undefined, hasTagsDropdown: true, hasNumberOfPages: undefined, activePage: 1, type: undefined, hasLandscapeOption: false, tagsOptions: [], tags: undefined, }, size: eFileSize.MEDIUM, slideWidth: 180, } as IUploadFilesConfig, config: { title: 'Tr Financial Statements', department: 'IT', assigment: ['Assigment', 'Safety'], description: 'Inspect the securement of cargo to prevent shifting or falling during transit. Ensure that load bars, straps, chains, and other securing devices are properly fastened and adjusted according to regulations.', link: '', imageProfiles: [], } as ToDoCardConfig, configProgress: [ { template: 'todo-list', expireDate: new Date('2024-08-05'), type: 'small', theme: 'light', } as ProgressExpiration, ], commentConfig: [], newCommentConfig: [ { user: { avatarImage: 'https://gravatar.com/avatar/27205e5c51cb03f862138b22bcb5dc20f94a342e744ff6df1b8dc8af3c865109', name: 'Angelo Trotter', }, owner: true, content: '', onSave: (data: SaveCommentData) => console.log('saved data: ', data), } as CommentConfig, ], }, ], }, };