@posiwise/smart-crm 0.0.20 → 0.0.21

package/src/lib/private/components/smart-crm-accounts/smart-crm-account-details/smart-crm-account-details.component.ts

@@ -0,0 +1,238 @@
+import { Component, Injector, OnDestroy, OnInit } from '@angular/core';
+import { UntypedFormGroup } from '@angular/forms';
+import { AppSmartCrm } from '../../../../shared/models/smart-crm.model';
+import { ROUTERS } from '../../../../shared/routers/routers';
+import { CrmService } from '@posiwise/smart-crm-shared';
+import { Observable } from 'rxjs';
+
+import { PAGE_SIZE, User, Subscription, Country } from '@posiwise/common-utilities';
+import { CrmAccount } from '../../../../shared/interface/crm-account.interface';
+import { AppBaseComponent } from '@posiwise/app-base-component';
+import { CommonService, GeoService, SubscriptionService } from '@posiwise/common-services';
+import {
+    OrganizationIndustry,
+    OrganizationSize,
+    OrganizationType,
+    SubscriptionMember
+} from 'libs/smart-crm/src/lib/shared/interface/smart-crm-module.interface';
+
+@Component({
+    selector: 'pw-company-details',
+    templateUrl: './smart-crm-account-details.component.html'
+})
+export class SmartCrmCompanyDetailsComponent extends AppBaseComponent implements OnInit, OnDestroy {
+    form: UntypedFormGroup;
+
+    user: User;
+
+    id: number;
+
+    submitted = false;
+    buttonBusy = false;
+
+    data: CrmAccount;
+    isLoading = true;
+
+    onEdit = false;
+
+    subscriptionMembers: [] = [];
+
+    organizationSizes$: Observable<OrganizationSize[]>;
+
+    organizationTypes$: Observable<OrganizationType[]>;
+
+    organizationIndustries$: Observable<OrganizationIndustry[]>;
+
+    private countries$: Observable<Country[]>;
+
+    allSubscriptionMembers: SubscriptionMember[];
+
+    subscriptionId: number;
+
+    hasAccess: boolean;
+
+    filteredOwners: SubscriptionMember[];
+
+    subscription: Subscription;
+
+    status = [];
+
+    priority = [];
+
+    source = [];
+
+    private countryNames = [];
+
+    filteredCountries: Country[];
+
+    constructor(
+        injector: Injector,
+        private subscriptionService: SubscriptionService,
+        private crmService: CrmService,
+        private commonService: CommonService,
+        private geoService: GeoService
+    ) {
+        super(injector);
+        this.form = AppSmartCrm.getAccountsForm();
+    }
+
+    onSearchOwner(event) {
+        let values = [];
+        if (event.query) {
+            values = this.allSubscriptionMembers.filter((x: SubscriptionMember) => {
+                return x.first_name.toLowerCase().includes(event.query.toLowerCase());
+            });
+        } else {
+            this.allSubscriptionMembers.forEach(item => {
+                values.push(item);
+            });
+        }
+        this.filteredOwners = values;
+    }
+
+    ngOnInit() {
+        this.organizationTypes$ = this.commonService.getOrganizationTypes();
+        this.organizationSizes$ = this.commonService.getOrganizationSizes();
+        this.organizationIndustries$ = this.commonService.getOrganizationIndustries();
+        this.countries$ = this.geoService.getCountries();
+        this.countries$.subscribe(res => {
+            this.countryNames = res;
+        });
+        this.route.params.subscribe(data => {
+            if (Number(data['id'])) {
+                this.id = Number(data['id']);
+            } else {
+                this.isLoading = false;
+            }
+        });
+        this.getUserSubscription().subscribe(response => {
+            this.subscription = response;
+            if (this.subscription?.id) {
+                this.hasAccess = this.hasAdminAccess(this.subscription?.id);
+                this.getUserInfo(this.subscription?.id, this.hasAccess);
+                this.accountDefaultValues(this.subscription?.id);
+                this.form.get('subscription_id').setValue(this.subscription?.id);
+            }
+        });
+    }
+
+    /** Function to call account default values */
+    private accountDefaultValues(id: number) {
+        this.crmService.getCrmAccountDefaultValues(id).subscribe(response => {
+            this.status = response.status;
+            this.priority = response.priority;
+            this.source = response.source;
+        });
+    }
+
+    /** Function to get subscription members */
+    private getAllSubscriptionMembers(id: number) {
+        this.subscriptionService
+            .getEnrolledSubscription(id, { page_size: PAGE_SIZE })
+            .subscribe(response => {
+                this.allSubscriptionMembers = response.members;
+                if (this.id) {
+                    this.onEdit = true;
+                    this.getAccountDetail();
+                } else {
+                    this.onEdit = false;
+                }
+                if (this.id === 0) {
+                    const currentUser = this.allSubscriptionMembers.find(
+                        x => x.id === this.user.id
+                    );
+                    this.form.get('owner_id').setValue(currentUser);
+                }
+            });
+    }
+
+    // /** Function to get user info */
+    private getUserInfo(subscriptionId: number, hasAccess: boolean) {
+        this.userStore().subscribe(user => {
+            this.user = user;
+            if (hasAccess) {
+                this.form.get('owner_id').setValue(user);
+                this.getAllSubscriptionMembers(subscriptionId);
+            } else {
+                this.form.get('owner_id').setValue(user);
+            }
+        });
+    }
+
+    /** Function to get form controls */
+    get f() {
+        return this.form.controls;
+    }
+
+    /** Function to execute on form submit */
+    onSave() {
+        this.buttonBusy = true;
+        this.submitted = true;
+        if (this.form.valid) {
+            this.form.get('owner_id').setValue(this.form.get('owner_id').value.id);
+            this.form.get('country').setValue(this.form.get('country').value.code);
+            const sub$ = this.id
+                ? this.crmService.updateAccount(this.subscription?.id, this.id, this.form.value)
+                : this.crmService.postAccount(this.form.value, this.subscription?.id);
+            sub$.subscribe(response => {
+                this.toast.success(this.translation.translate('Crm.AccountMessage.UpdatedMessage'));
+                this.router.navigate([
+                    `/${this.subscription?.slug}${ROUTERS.accountInfo}${response.id}`
+                ]);
+            }).add(() => {
+                this.buttonBusy = false;
+            });
+        }
+    }
+
+    /** Function to execute on location select */
+    handleAddressChange(event) {
+        this.form.get('location').setValue(event.formatted_address);
+    }
+
+    /** Function to get account detail on edit form */
+    private getAccountDetail() {
+        this.isLoading = true;
+        this.crmService.getAccountDetail(this.subscription?.id, this.id).subscribe(res => {
+            this.form.patchValue(res);
+            this.data = res;
+            this.allSubscriptionMembers.forEach(member => {
+                if (this.data.owner_id === member.id) {
+                    this.form.get('owner_id').patchValue(member);
+                }
+            });
+            this.countryNames.forEach(x => {
+                if (x['code'] === res['country']) {
+                    this.form.get('country').patchValue(x);
+                }
+            });
+            this.isLoading = false;
+            this.subscriptionService
+                .getEnrolledSubscription(this.subscription?.id, { page_size: PAGE_SIZE })
+                .subscribe({
+                    next: response => {
+                        this.subscriptionMembers = response.members;
+                    },
+                    error: error => this.toast.showToast(error)
+                });
+        });
+    }
+
+    onSearchCountry(event) {
+        let values = [];
+        if (event.query) {
+            values = this.countryNames.filter((x: Country) => {
+                return x.name.toLowerCase().includes(event.query.toLowerCase());
+            });
+        }
+
+        this.countryNames.forEach(item => {
+            values.push(item);
+        });
+        this.filteredCountries = values;
+    }
+
+    override ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}

package/src/lib/private/components/smart-crm-accounts/smart-crm-account-files/smart-crm-account-files.component.html

@@ -0,0 +1,200 @@
+<div class="row d-none">
+  <div class="col-12 mb-3">
+    <h2>Account Files</h2>
+  </div>
+</div>
+<div class="row">
+  <div class="col-12 mb-3">
+    <a class="btn btn-sm btn-outline-primary float-end"
+      data-cy="add-file"
+      (click)="openModal(content)">
+      <i class="fa fa-plus-circle" aria-hidden="true"></i> {{ 'Add File' | transloco }}
+    </a>
+  </div>
+</div>
+<div class="w-100 text-center mt-3"
+  *ngIf="!isLoaded">
+  <p-progressSpinner strokeWidth="2"> </p-progressSpinner>
+</div>
+<div class="primeng-datatable-container table-responsive"
+  [class.hideTable]="totalRecordsUnFiltered === 0">
+  <p-table #dt
+    [value]="allFiles"
+    [paginator]="totalRecords !== 0"
+    [lazy]="true"
+    [rows]="PAGE_SIZE"
+    [totalRecords]="totalRecords"
+    [loading]="loading"
+    (onLazyLoad)="onLazyLoad($event)"
+    [customSort]="true">
+    <ng-template pTemplate="caption">
+      <div class="text-end">
+        <i class="fa fa-search mt-2 me-2" aria-hidden="true"></i>
+        <input type="text"
+          [(ngModel)]="searchText"
+          pInputText
+          size="50"
+          placeholder="Search Files..."
+          (input)="dt.filterGlobal($event.target.value, 'contains')"
+          class="mw-90" />
+      </div>
+    </ng-template>
+    <ng-template pTemplate="header">
+      <tr>
+        <th scope="true"
+          pSortableColumn="owner_id">
+          {{ 'Crm.AccountFilesMessage.Owner' | transloco }}
+          <p-sortIcon field="owner_id"></p-sortIcon>
+        </th>
+        <th scope="true"
+          pSortableColumn="crm_account_id">
+          {{ 'Crm.AccountFilesMessage.Account' | transloco }}
+          <p-sortIcon field="crm_account_id"></p-sortIcon>
+        </th>
+        <th scope="true"
+          pSortableColumn="crm_contact_id">
+          {{ 'Crm.AccountFilesMessage.Contact' | transloco }}
+          <p-sortIcon field="crm_contact_id"></p-sortIcon>
+        </th>
+        <th scope="true"
+          pSortableColumn="crm_opportunity_id">
+          {{ 'Crm.AccountFilesMessage.Opportunity' | transloco }}
+          <p-sortIcon field="crm_opportunity_id"></p-sortIcon>
+        </th>
+        <th scope="true"
+          pSortableColumn="file">
+          {{ 'Crm.AccountFilesMessage.File' | transloco }}
+          <p-sortIcon field="file"></p-sortIcon>
+        </th>
+        <th scope="true">{{ 'Label.Actions' | transloco }}</th>
+      </tr>
+    </ng-template>
+    <ng-template pTemplate="body"
+      let-file>
+      <tr>
+        <td data-head="Owner">{{ file.owner?.first_name }} {{ file.owner?.last_name }}</td>
+        <td data-head="Account">
+          <a *ngIf="file.crm_account_id"
+            [routerLink]="[
+                            '/' + subscription?.slug + routers.accountInfo,
+                            file.crm_account_id
+                        ]">{{ file.crm_account?.name }}</a>
+        </td>
+        <td data-head="Contact">
+          <a *ngIf="file.crm_contact_id"
+            [routerLink]="[
+                            '/' + subscription?.slug + routers.contactInfo,
+                            file.crm_contact_id
+                        ]">{{ file.crm_contact | ifNameNullShowEmail }}</a>
+        </td>
+        <td data-head="Opportunities">{{ file?.crm_opportunity?.title }}</td>
+        <td data-head="Files">
+          <a href="{{ file.file?.url }}"
+            target="blank">{{
+                        file.file.url.split('?')[0].split('/')[
+                            file.file.url.split('?')[0].split('/').length - 1
+                        ]
+                    }}</a>
+        </td>
+        <td data-head="Action">
+          <ul class="list-unstyled list-inline">
+            <ng-container *ngIf="hasAccess || file.owner_id === userId">
+              <li ngbTooltip="Delete"
+                class="me-2 me-sm-3">
+                <i
+                                    class="fa fa-trash delete-icon"
+                                    (click)="onDelete(file.id)"
+                                    aria-hidden="true"
+                                ></i>
+              </li>
+            </ng-container>
+          </ul>
+        </td>
+      </tr>
+    </ng-template>
+  </p-table>
+  <div *ngIf="totalRecords === 0 && totalRecordsUnFiltered !== 0">
+    <pw-no-data [withImage]="true" [message]="'Search.NoDataMessage'| transloco" [description]="'Search.NoDataDescription' | transloco" >
+    </pw-no-data>
+  </div>
+  <span class="total-records-count" *ngIf="totalRecords !== 0">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>
+</div>
+<div *ngIf="totalRecordsUnFiltered === 0 && isLoaded">
+  <pw-no-data [withImage]="true" [message]="'Crm.AccountFilesMessage.NoDataMessage' | transloco"> </pw-no-data>
+</div>
+
+<ng-template #content
+  let-modal>
+  <div class="modal-header">
+    <h3 class="modal-title mb-0 p-0">{{ 'Upload File' | transloco }}</h3>
+    <button type="button"
+      class="btn-close float-end"
+      aria-label="Close"
+      (click)="modal.dismiss()">
+
+    </button>
+  </div>
+  <div class="modal-body">
+    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>
+    <div class="row p-2">
+      <div class="col-12">
+        <div class="upload-box">
+          <div class="upload-box-content">
+            <div class="drop-container"
+              ngFileDrop
+              [options]="options"
+              (uploadOutput)="onUploadOutput($event)"
+              [uploadInput]="uploadInput">
+              <p>
+                Drag files here or
+                <label class="upload-button">
+                  <input type="file"
+                    ngFileSelect
+                    [options]="options"
+                    (uploadOutput)="onUploadOutput($event)"
+                    [uploadInput]="uploadInput"
+                    multiple />
+                  browse
+                </label>
+                to upload.
+              </p>
+            </div>
+            <div class="upload-item"
+              *ngFor="let f of files; let i = index">
+              <div class="upload-item-content">
+                <div class="filename">
+                  <div class="filename-left">
+                    <i class="ionicon ion-ios-copy" aria-hidden="true"></i>
+                    <span>{{ f.name }}</span>
+                  </div>
+                </div>
+                <div class="progress-content">
+                  <div class="progress">
+                    <span class="bar"
+                      [style.width]="f?.progress?.data?.percentage + '%'"
+                      [class.is-done]="f['uploaded']"></span>
+                  </div>
+                </div>
+                <div class="progress-text-content">
+                  <span class="progress-text"
+                    [class.is-done]="f['uploaded']">
+                    <span *ngIf="!f['uploaded']">{{ f.progress?.data?.percentage - 1 }}%
+                    </span>
+                    <span *ngIf="f['uploaded']">100 %</span>
+                    <span *ngIf="!f['uploaded']">Uploading...</span>
+                    <span *ngIf="f['uploaded']">Done</span>
+                  </span>
+                  <span class="speed-and-eta-text"
+                    *ngIf="f.progress?.data?.percentage !== 0 && !f['uploaded']">
+                    <span>{{ f.progress?.data?.speedHuman }} </span>
+                    <span>ETA {{ f.progress?.data?.etaHuman }}</span>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</ng-template>

package/src/lib/private/components/smart-crm-accounts/smart-crm-account-files/smart-crm-account-files.component.spec.ts

@@ -0,0 +1,109 @@
+import { TestBed } from '@angular/core/testing';
+import { CommonServicesModule, PermissionService, UserService } from '@posiwise/common-services';
+import { CrmService } from '@posiwise/smart-crm-shared';
+import { DEFAULT_USER, TestHelper } from '@posiwise/test-helpers';
+import { MockProvider } from 'ng-mocks';
+import { SharedModule } from '@posiwise/shared-module';
+import { of } from 'rxjs';
+import Swal from 'sweetalert2';
+import { SmartCrmPrivateModule } from '../../../smart-crm-private.module';
+import { SmartCrmCompanyFilesComponent } from './smart-crm-account-files.component';
+
+class UserServiceMock {
+    getUserState() {
+        return of({ currentUser: DEFAULT_USER });
+    }
+}
+describe('SmartCrmCompanyFilesComponent', () => {
+    const file = {
+        id: '1',
+        fileIndex: 1,
+        lastModifiedDate: new Date(),
+        name: 'test-file.xlsx',
+        size: 1,
+        type: 'xlsx',
+        form: new FormData(),
+        progress: { status: 2 }
+    };
+    const createComponent = TestHelper.createComponentFactory({
+        component: SmartCrmCompanyFilesComponent,
+        imports: [SharedModule, SmartCrmPrivateModule, CommonServicesModule],
+        providers: [
+            ...TestHelper.TEST_PROVIDERS,
+            MockProvider(PermissionService, {
+                evaluatePermissions: () => {
+                    return true;
+                }
+            }),
+            MockProvider(CrmService, {
+                getAllAccountFiles: () =>
+                    of({
+                        crm_account_files: [
+                            {
+                                owner: {
+                                    first_name: 'test',
+                                    last_name: 'test'
+                                },
+                                crm_account_id: 1,
+                                crm_contact_id: 1,
+                                owner_id: 1,
+                                file: {
+                                    url: ''
+                                }
+                            }
+                        ],
+                        object_count: 1,
+                        unfiltered_count: 1
+                    }),
+                deleteAccountFiles: () => of({})
+            }),
+            {
+                provide: UserService,
+                useClass: UserServiceMock
+            }
+        ]
+    });
+
+    beforeEach(() => {
+        TestHelper.setUpPermissionsAndUser();
+    });
+
+    it('should create', async () => {
+        TestHelper.setActivatedRoute({
+            params: { id: 1 },
+            parent: { params: of({ slug: 'posiwise-263' }) }
+        });
+        const spectator = await createComponent();
+        expect(spectator.component).toBeTruthy();
+    });
+
+    it('should delete file ', async () => {
+        TestHelper.setActivatedRoute({
+            params: { id: 1 },
+            parent: { params: of({ slug: 'posiwise-263' }) }
+        });
+        const spectator = await createComponent();
+        const service = TestBed.inject(CrmService);
+        const spy = spyOn(service, 'deleteAccountFiles').and.callThrough();
+        spectator.click('tbody tr:first-child .fa-trash');
+        expect(Swal.isVisible()).toBeTruthy();
+        Swal.clickConfirm();
+        await TestHelper.stabilize(spectator);
+        expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    it('should upload', async () => {
+        TestHelper.setActivatedRoute({
+            params: { id: 1 },
+            parent: { params: of({ slug: 'posiwise-263' }) }
+        });
+        const spectator = await createComponent();
+        expect(spectator.component).toBeTruthy();
+        spyOn(spectator.component.uploadInput, 'emit').and.stub();
+        spectator.component.files = [file];
+        spectator.component.onUploadOutput({ type: 'allAddedToQueue', file });
+        spectator.component.onUploadOutput({ type: 'addedToQueue', file });
+        spectator.component.onUploadOutput({ type: 'uploading', file });
+        spectator.component.onUploadOutput({ type: 'removed', file });
+    });
+});