@posiwise/smart-crm 0.0.20 → 0.0.21

package/src/lib/private/components/smart-crm-opportunities/smart-crm-board/smart-crm-board.component.scss

@@ -0,0 +1,223 @@
+@import 'variables';
+
+.card {
+    box-shadow: 2px 3px rgb(128 128 128);
+    padding-bottom: 0;
+}
+
+.main-div {
+    border: 1px solid rgb(175 175 175);
+    border-radius: 5px;
+    margin-right: 10px;
+}
+
+.opportunities-board-title {
+    background-color: rgb(250 250 250);
+
+    h4 {
+        color: rgb(255 255 255);
+    }
+}
+
+.edit-button {
+    cursor: pointer;
+}
+
+.items-container {
+    height: 500px;
+    overflow-y: scroll;
+}
+
+.list-container {
+    overflow: auto;
+    width: 100%;
+}
+
+.opportunities-container {
+    display: inline-block;
+    margin: 0 13px 13px 0;
+    max-width: 80%;
+    min-width: 280px;
+    vertical-align: top;
+}
+
+.opportunities-list {
+    background: rgb(255 255 255);
+    border: solid 1px rgb(204 204 204);
+    display: block;
+    min-height: 450px;
+}
+
+.footer-list {
+    background: rgb(255 255 255);
+    border: solid 1px rgb(204 204 204);
+    display: block;
+    min-height: 10px;
+}
+
+.opportunities-box {
+    align-items: center;
+    background: rgb(255 255 255);
+    border: solid 1px rgb(204 204 204);
+    box-sizing: border-box;
+    color: rgb(0 0 0 / 87%);
+    cursor: move;
+    display: block;
+    flex-direction: row;
+    font-size: 14px;
+    justify-content: space-between;
+    margin: 5px;
+    padding: 10px 20px;
+}
+
+.cdk-drag-preview {
+    border-radius: 4px;
+    box-shadow:
+        0 5px 5px -3px rgb(0 0 0 / 20%),
+        0 8px 10px 1px rgb(0 0 0 / 14%),
+        0 3px 14px 2px rgb(0 0 0 / 12%);
+    box-sizing: border-box;
+}
+
+.cdk-drag-placeholder {
+    opacity: 0;
+}
+
+.cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.opportunities-list.cdk-drop-list-dragging .opportunities-box:not(.cdk-drag-placeholder) {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.footer-list.cdk-drop-list-dragging .opportunities-box:not(.cdk-drag-placeholder) {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.add-opportunity-icon {
+    color: rgb(255 255 255);
+    font-size: 16px;
+}
+
+.collapse-column-toggle {
+    background: rgb(230 223 223);
+    border-radius: 2px;
+    cursor: pointer;
+    font-size: 16px;
+    margin-left: 10px;
+
+    i {
+        padding: 0 8px;
+    }
+}
+
+.dynamic-columns-wrapper {
+    min-width: 50px;
+    width: 50px !important;
+
+    .opportunities-list {
+        display: none;
+    }
+    .footer-list {
+        display: none;
+    }
+
+    .opportunities-board-title {
+        flex-direction: column;
+        height: 100%;
+        min-height: 450px;
+
+        .collapse-column-toggle {
+            margin-left: 0;
+        }
+
+        .stage-name {
+            padding-left: 0 !important;
+            writing-mode: vertical-lr;
+
+            .badge {
+                padding: 8px 4px !important;
+            }
+        }
+
+        .add-opportunity-icon {
+            margin: 0 auto !important;
+        }
+    }
+}
+
+.crm-board-success {
+    border-top: 3px solid map-get($success, base);
+
+    .stage-name {
+        .badge {
+            background-color: map-get($success, base);
+        }
+    }
+}
+
+.crm-board-info {
+    border-top: 3px solid map-get($info, base);
+
+    .stage-name {
+        .badge {
+            background-color: map-get($info, base);
+        }
+    }
+}
+
+.crm-board-danger {
+    border-top: 3px solid map-get($danger, base);
+
+    .stage-name {
+        .badge {
+            background-color: map-get($danger, base);
+        }
+    }
+}
+
+.crm-board-warning {
+    border-top: 3px solid map-get($warning, base);
+
+    .stage-name {
+        .badge {
+            background-color: map-get($warning, base);
+        }
+    }
+}
+.footer {
+    background-color: #f8f9fa;
+    padding: 10px;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    align-items: center;
+    border-radius: 8px;
+}
+
+.footer-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.footer-label {
+    font-weight: bold;
+    color: #6c757d;
+}
+
+.footer-value {
+    color: #212529;
+    font-size: 1.1em;
+}
+
+.crm-board-primary {
+    border-top: 3px solid var(--border-color, $tabs-bg);
+
+    .stage-name {
+        .badge {
+            background-color: var(--background-color, $tabs-bg);
+        }
+    }
+}

package/src/lib/private/components/smart-crm-opportunities/smart-crm-board/smart-crm-board.component.spec.ts

@@ -0,0 +1,184 @@
+import { TestBed } from '@angular/core/testing';
+import { CommonServicesModule, PermissionService, UserService } from '@posiwise/common-services';
+import { SharedModule } from '@posiwise/shared-module';
+import { CrmService } from '@posiwise/smart-crm-shared';
+import {
+    ContainerModel,
+    DEFAULT_USER,
+    DragDropEventFactory,
+    TestHelper
+} from '@posiwise/test-helpers';
+import { MockDirective, MockProvider } from 'ng-mocks';
+import { GooglePlaceDirective } from 'ngx-google-places-autocomplete';
+import { of } from 'rxjs';
+import { SmartCrmPrivateModule } from '../../../smart-crm-private.module';
+import { SmartCrmBoardComponent } from './smart-crm-board.component';
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
+
+class UserServiceMock {
+    getUserState() {
+        return of({ currentUser: DEFAULT_USER });
+    }
+}
+
+describe('SmartCrmBoardComponent', () => {
+    const dragDropEventFactory = new DragDropEventFactory<object>();
+
+    const data = {
+        id: 11,
+        title: 'test stage',
+        one_time_amount: 100,
+        win_chances: 10,
+        starting_at: '2021-11-22T00:00:00.000+00:00',
+        monthly_amount: 100,
+        crm_account_id: 8,
+        owner_id: 1,
+        crm_opportunity_stage_id: 16,
+        crm_opportunity_category_ids: [9],
+        crm_account: {
+            id: 8,
+            name: 'test'
+        },
+        crm_opportunity_stage: {
+            id: 16,
+            subscription_id: 20,
+            name: 'test',
+            previous_stage_id: null,
+            visible: true,
+            is_default: false,
+            crm_opportunity_category_ids: [10]
+        },
+        owner: [
+            {
+                id: 1,
+                first_name: 'Enrico_SuperAdmin',
+                last_name: 'PosiWise',
+                slug: 'enrico_superadmin-42201',
+                user_avatar: [
+                    {
+                        width: 50,
+                        height: 50,
+                        url: ''
+                    }
+                ]
+            }
+        ],
+        crm_opportunity_categories: [
+            {
+                id: 9,
+                subscription_id: 20,
+                name: 'testcategory222',
+                previous_category_id: null,
+                is_visible: true,
+                is_default: false
+            }
+        ]
+    };
+
+    const createComponent = TestHelper.createComponentFactory({
+        component: SmartCrmBoardComponent,
+        imports: [CommonServicesModule, SharedModule, SmartCrmPrivateModule],
+        declarations: [MockDirective(GooglePlaceDirective)],
+        providers: [
+            ...TestHelper.TEST_PROVIDERS,
+            MockProvider(PermissionService, {
+                evaluatePermissions: () => {
+                    return true;
+                }
+            }),
+            MockProvider(CrmService, {
+                updateOpportunities: () => of({}),
+                getAllOpportunities: () =>
+                    of({
+                        crm_opportunities: [data],
+                        object_count: 1,
+                        unfiltered_count: 1
+                    }),
+                deleteOpportunities: () => of({}),
+                getAvailableOpportunityStages: () =>
+                    of({
+                        available_crm_opportunity_stages: [
+                            {
+                                id: 16,
+                                subscription_id: 20,
+                                name: 'testoppor',
+                                previous_stage_id: null,
+                                visible: true,
+                                is_default: false,
+                                crm_opportunity_category_ids: [10]
+                            },
+                            {
+                                id: 17,
+                                subscription_id: 20,
+                                name: 'test2oppor',
+                                previous_stage_id: null,
+                                visible: true,
+                                is_default: false,
+                                crm_opportunity_category_ids: [10]
+                            }
+                        ]
+                    }),
+                getAllOpportunityCategories: () =>
+                    of({
+                        crm_opportunity_categories: [
+                            {
+                                id: 10,
+                                subscription_id: 20,
+                                name: 'test category2',
+                                previous_category_id: null,
+                                is_visible: true,
+                                is_default: false,
+                                previous_category: null
+                            }
+                        ],
+                        object_count: 1,
+                        unfiltered_count: 1
+                    })
+            }),
+            {
+                provide: UserService,
+                useClass: UserServiceMock
+            }
+        ]
+    });
+
+    beforeEach(() => {
+        TestHelper.setUpPermissionsAndUser();
+    });
+
+    it('should change category', async () => {
+        TestHelper.setActivatedRoute({
+            parent: { params: of({ slug: 'posiwise-263' }) }
+        });
+        const spectator = await createComponent();
+        expect(spectator.component).toBeTruthy();
+        spectator.component.onChangeCategory(1);
+        expect(spectator.component.totalCount).toEqual(0);
+        spectator.component.onChangeCategory(null);
+        expect(spectator.component.totalCount).toEqual(1);
+    });
+
+    it('should move item', async () => {
+        TestHelper.setActivatedRoute({
+            parent: { params: of({ slug: 'posiwise-263' }) }
+        });
+        const spectator = await createComponent();
+        expect(spectator.component).toBeTruthy();
+        const service = TestBed.inject(CrmService);
+        const spy = spyOn(service, 'updateOpportunities').and.callThrough();
+        const from: ContainerModel<object> = {
+            id: 'testoppor',
+            data: [data],
+            index: 0
+        };
+        const to: ContainerModel<object> = {
+            id: 'test2oppor',
+            data: [data],
+            index: 0
+        };
+        const dropevent: CdkDragDrop<object[], object[]> =
+            dragDropEventFactory.createCrossContainerEvent(from, to);
+        spectator.component.dropItem(dropevent);
+        expect(spy).toHaveBeenCalledTimes(1);
+    });
+});

package/src/lib/private/components/smart-crm-opportunities/smart-crm-board/smart-crm-board.component.ts

@@ -0,0 +1,268 @@
+import { Component, Injector, OnDestroy, OnInit } from '@angular/core';
+import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
+import { ROUTERS } from '../../../../shared/routers/routers';
+import { CrmService } from '@posiwise/smart-crm-shared';
+import { CrmOpportunity } from '../../../../shared/interface/crm-opportunity.interface';
+import { CrmStage } from '../../../../shared/interface/crm-stages.interface';
+import { AppBaseComponent } from '@posiwise/app-base-component';
+import { Subscription } from '@posiwise/common-utilities';
+import { HelperService } from '@posiwise/helper-service';
+
+@Component({
+    selector: 'pw-smart-crm-board',
+    templateUrl: './smart-crm-board.component.html',
+    styleUrls: ['./smart-crm-board.component.scss']
+})
+export class SmartCrmBoardComponent extends AppBaseComponent implements OnInit, OnDestroy {
+    private draggedOpportunity: CrmOpportunity;
+    stages: CrmStage[];
+    allOpportunities: CrmOpportunity[];
+    opportunitiesGroup = [];
+    private changedStage: number | string;
+    isLoaded = false;
+    categories = [];
+    private availableOpportunities = [];
+    subscription: Subscription;
+    totalCount: number;
+    routers = ROUTERS;
+    masterStages: CrmStage[] = [];
+    selectedCategoryId = 0;
+    private pageSize = 5; // Show 5 cards initially
+
+    constructor(
+        private crmService: CrmService,
+        injector: Injector
+    ) {
+        super(injector);
+    }
+
+    ngOnInit() {
+        this.getUserSubscription().subscribe(response => {
+            this.subscription = response;
+            if (this.subscription?.id) {
+                this.getAllOpportunityCategories();
+                this.getStages();
+            }
+        });
+    }
+
+    private getAllOpportunityCategories() {
+        this.crmService.getAllOpportunityCategories(this.subscription?.id).subscribe(response => {
+            this.categories = response?.crm_opportunity_categories || [];
+            if (this.categories.length > 0) {
+                this.selectedCategoryId = this.categories[0].id;
+            }
+        });
+    }
+
+    private getStages() {
+        this.crmService.getAvailableOpportunityStages(this.subscription?.id).subscribe(response => {
+            this.stages = response.available_crm_opportunity_stages;
+            this.masterStages = response.available_crm_opportunity_stages;
+            this.getAllOpportunities();
+        });
+    }
+
+    private getAllOpportunities() {
+        this.crmService
+            .getAllOpportunities(this.subscription?.id)
+            .subscribe(response => {
+                this.allOpportunities = response?.crm_opportunities || [];
+                this.availableOpportunities = response?.crm_opportunities || [];
+                this.totalCount = this.allOpportunities?.length;
+
+                if (this.selectedCategoryId) {
+                    this.allOpportunities = this.availableOpportunities.filter(opportunity =>
+                        opportunity?.crm_opportunity_category_ids?.includes(this.selectedCategoryId)
+                    );
+                    this.totalCount = this.allOpportunities?.length;
+                }
+
+                this.opportunitiesGroups(this.selectedCategoryId || null);
+            })
+            .add(() => {
+                this.isLoaded = true;
+            });
+    }
+
+    private treefy(list) {
+        const idAttr = 'id';
+        const parentAttr = 'previous_stage_id';
+        const childrenAttr = 'children';
+
+        const treeList = [];
+        const lookup = {};
+        list.forEach(obj => {
+            lookup[obj[idAttr]] = obj;
+            obj[childrenAttr] = [];
+        });
+        list.forEach(obj => {
+            if (obj[parentAttr] !== null) {
+                if (lookup[obj[parentAttr]] !== undefined) {
+                    lookup[obj[parentAttr]][childrenAttr].push(obj);
+                } else {
+                    treeList.push(obj);
+                }
+            } else {
+                treeList.push(obj);
+            }
+        });
+
+        return treeList;
+    }
+
+    private flatten(arr) {
+        return arr.reduce((result, current) => {
+            if (current.children) {
+                const children = this.flatten(current.children);
+                delete current.children;
+                result.push(current);
+                result.push(...children);
+            } else {
+                result.push(current);
+            }
+            return result;
+        }, []);
+    }
+
+    private opportunitiesGroups(val?: number) {
+        this.opportunitiesGroup = [];
+        this.stages = this.masterStages;
+        if (val !== undefined && val !== 0) {
+            this.stages = this.stages.filter(stage =>
+                stage.crm_opportunity_category_ids.includes(val)
+            );
+        }
+        this.stages = this.stages.sort((a, b) => (a.id > b.id ? 1 : b.id > a.id ? -1 : 0));
+        const temp = this.treefy(this.stages);
+        this.stages = this.flatten(temp);
+
+        this.stages.forEach(stage => {
+            const opportunities = {
+                stage: null,
+                opportunities: [],
+                totals: { oneTime: 0, mrr: 0, count: 0 },
+                isLoadingMore: false
+            };
+            const data = this.allOpportunities.filter(
+                opportunity => opportunity.crm_opportunity_stage_id === stage.id
+            );
+            opportunities.opportunities = data.slice(0, this.pageSize); // Load initial items
+            opportunities.stage = stage;
+            opportunities.totals.oneTime = data.reduce((sum, opp) => sum + opp.one_time_amount, 0);
+            opportunities.totals.mrr = data.reduce((sum, opp) => sum + opp.monthly_amount, 0);
+            opportunities.totals.count = data.length;
+            this.opportunitiesGroup.push(opportunities);
+        });
+    }
+
+    onChangeCategory(event) {
+        const categories = Number(event);
+        this.selectedCategoryId = categories;
+        if (categories) {
+            this.allOpportunities = this.availableOpportunities.filter(opportunity =>
+                opportunity?.crm_opportunity_category_ids?.includes(categories)
+            );
+            this.totalCount = this.allOpportunities?.length;
+            this.opportunitiesGroups(categories);
+        } else {
+            this.allOpportunities = this.availableOpportunities;
+            this.totalCount = this.allOpportunities?.length;
+            this.opportunitiesGroups();
+        }
+    }
+
+    onColumnScroll(columnIndex: number) {
+        const group = this.opportunitiesGroup[columnIndex];
+        if (group.isLoadingMore || group.opportunities.length >= group.totals.count) {
+            return;
+        }
+
+        group.isLoadingMore = true;
+
+        setTimeout(() => {
+            const currentLength = group.opportunities.length;
+            const moreOpportunities = this.allOpportunities
+                .filter(opportunity => opportunity.crm_opportunity_stage_id === group.stage.id)
+                .slice(currentLength, currentLength + this.pageSize);
+
+            group.opportunities = group.opportunities.concat(moreOpportunities);
+            group.isLoadingMore = false;
+        }, 2000); // Show loader for 2 seconds
+    }
+
+    dropItem(event: CdkDragDrop<object[]>) {
+        if (event.previousContainer === event.container) {
+            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+        } else {
+            transferArrayItem(
+                event.previousContainer.data,
+                event.container.data,
+                event.previousIndex,
+                event.currentIndex
+            );
+            this.draggedOpportunity = event?.item?.data;
+            this.changedStage = this.stages.find(stage => stage.name === event?.container?.id)?.id;
+            if (this.draggedOpportunity) {
+                const opportunitiesDetails = { ...this.draggedOpportunity };
+                opportunitiesDetails['crm_opportunity_stage_id'] = this.changedStage;
+                HelperService.deleteProps(opportunitiesDetails, [
+                    'crm_account',
+                    'crm_opportunity_stage',
+                    'crm_opportunity_categories',
+                    'crm_contact',
+                    'owner'
+                ]);
+                this.crmService
+                    .updateOpportunities(
+                        this.subscription?.id,
+                        opportunitiesDetails.id,
+                        opportunitiesDetails
+                    )
+                    .subscribe({
+                        next: () => {
+                            this.getAllOpportunities();
+                            this.toast.success(
+                                this.translation.translate(
+                                    'Crm.OpportunitiesMessage.UpdatedMessage'
+                                )
+                            );
+                        },
+                        error: () => {
+                            this.getAllOpportunities();
+                        }
+                    });
+                this.draggedOpportunity = null;
+                this.changedStage = '';
+            }
+        }
+    }
+
+    getConnectedList(): string[] {
+        return this.opportunitiesGroup.map(x => `${x.stage.name}`);
+    }
+
+    dropGroup(event: CdkDragDrop<string[]>) {
+        moveItemInArray(this.opportunitiesGroup, event.previousIndex, event.currentIndex);
+    }
+
+    toggleColumn(event, group) {
+        $(event.target).toggleClass('fa-angle-right fa-angle-down');
+        $(event.target).closest('.main-div').toggleClass('dynamic-columns-wrapper');
+        this.crmService
+            .editStage(this.subscription?.id, group.stage?.id, {
+                collapsed: !group.stage?.collapsed
+            })
+            .subscribe(() => {
+                this.getStages();
+            });
+    }
+
+    hasOpportunities(): boolean {
+        return this.opportunitiesGroup.some(group => group.opportunities.length > 0);
+    }
+
+    override ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}