@posiwise/smart-crm 0.0.60 → 0.0.62
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1275,11 +1275,11 @@ class SmartCrmCompanyInfoComponent extends AppBaseComponent {
|
|
|
1275
1275
|
super.ngOnDestroy();
|
|
1276
1276
|
}
|
|
1277
1277
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SmartCrmCompanyInfoComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i2.SubscriptionService }, { token: i2.GeoService }, { token: i2.CommonService }, { token: i2$2.NgbModal }, { token: i2.AuthService }, { token: i0.ChangeDetectorRef }, { token: i2.LogoCacheService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1278
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: SmartCrmCompanyInfoComponent, isStandalone: false, selector: "pw-smart-crm-company-info", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-0\">\n <div class=\"me-auto mb-0\">\n <h2 class=\"mb-0\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"back()\"\n class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n Account Info\n </h2>\n </div>\n <a class=\"btn btn-sm btn-outline-primary float-end mb-3\"\n data-cy=\"add-opportunities\"\n (click)=\"navigateToAddOpportunities()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n </div>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isDataLoaded\">\n <p-progressSpinner> </p-progressSpinner>\n </div>\n <div *ngIf=\"isDataLoaded\">\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"user-info p-3 card pb-0 h-auto\">\n <div class=\"mb-2 text-center\">\n <a class=\"profile-image\">\n <img alt=\"Profile Logo\"\n width=\"100\"\n height=\"100\"\n [src]=\"getAccountLogo(data?.company_url)\"\n class=\"img-fluid company-logo\"\n (error)=\"handleImageError($event, 'assets/img/icons/company.png')\" />\n </a>\n </div>\n <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n <h4 class=\"d-inline-block name-block\">\n About <span *ngIf=\"data?.id\">{{ data.name }}</span>\n </h4>\n <a href=\"javascript:void(0);\"\n *ngIf=\"isFormEdit && (userId === data?.owner?.id || hasAccess)\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"isFormEdit = !isFormEdit; this.getAllSubscriptionMembers()\">{{ 'Button.Edit' | transloco }}</a>\n </div>\n <form [formGroup]=\"aboutControls\"\n [class.isDisabled]=\"isFormEdit\">\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"name\">{{ 'Crm.AccountMessage.Name' | transloco }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"Location\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</label>\n <input ngx-gp-autocomplete\n class=\"form-control rounded-0 ps-1 user-value\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n (onAddressChange)=\"handleAddressChange($event)\"\n [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"countries$ | async as countries\">\n <label for=\"country\">{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </label>\n <p-dropdown\n [options]=\"countries\"\n formControlName=\"country\"\n [ngClass]=\"{ 'is-invalid': submitted && f['country'].errors }\"\n [placeholder]=\"'Select Country'\"\n optionValue=\"code\"\n optionLabel=\"name\">\n </p-dropdown>\n </div>\n <div class=\"mb-3 ui-fluid skills-modal\">\n <label class=\"label mb-2\" for=\"Message\">{{ 'Crm.AccountMessage.Owner' | transloco }}</label>\n <p class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.owner_id\">\n {{ data?.owner?.first_name }} {{ data?.owner?.last_name }}\n </p>\n <p-autoComplete *ngIf=\"!isFormEdit || !data?.owner_id\"\n [suggestions]=\"filteredOwner\"\n formControlName=\"owner_id\"\n dataKey=\"id\"\n field=\"displayName\"\n [dropdown]=\"true\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n placeholder=\"Search owner\"\n [multiple]=\"false\">\n </p-autoComplete>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"CompanyUrl\">{{\n 'Crm.AccountMessage.CompanyUrl' | transloco\n }}</label>\n <a [href]=\"data?.company_url\"\n target=\"blank\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.company_url\">{{ data?.company_url }}</a>\n <input *ngIf=\"!isFormEdit || !data?.company_url\"\n type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"company_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"data?.tel\">\n <label class=\"label mb-0\" for=\"AccountMessage\">{{ 'Crm.AccountMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"tel\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationTypes$ | async as types\">\n <label for=\"organizationType\">{{ 'Organization.OrganizationType' | transloco }}</label>\n <p-dropdown\n [options]=\"types['organization_types']\"\n formControlName=\"organization_type_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_type_id'].errors }\"\n [placeholder]=\"'Select Organization Type'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-dropdown>\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationIndustries$ | async as industries\">\n <label for=\"file\">{{ 'Organization.OrganizationIndustry' | transloco }}</label>\n <p-dropdown\n [options]=\"industries['organization_industries']\"\n formControlName=\"organization_industry_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_industry_id'].errors }\"\n [placeholder]=\"'Select Industry'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-dropdown>\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationSizes$ | async as sizes\">\n <label for=\"size\">{{ 'Crm.AccountMessage.Size' | transloco }}</label>\n <p-dropdown\n [options]=\"sizes['organization_sizes']\"\n formControlName=\"organization_size_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_size_id'].errors }\"\n [placeholder]=\"'Select Size'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-dropdown>\n </div>\n <div class=\"mb-3\">\n <label for=\"status\">{{ 'Crm.AccountMessage.Status' | transloco }}</label>\n <p-dropdown\n [options]=\"status\"\n formControlName=\"status\"\n [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\"\n [placeholder]=\"'Select Status'\">\n </p-dropdown>\n </div>\n <div class=\"mb-3\">\n <label for=\"priority\">{{ 'Crm.AccountMessage.Priority' | transloco }}</label>\n <p-dropdown\n [options]=\"priority\"\n formControlName=\"priority\"\n [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\"\n [placeholder]=\"'Select Priority'\">\n </p-dropdown>\n </div>\n <div class=\"mb-3\">\n <label for=\"message\">{{ 'Crm.AccountMessage.Source' | transloco }}</label>\n <p-dropdown\n [options]=\"source\"\n formControlName=\"crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\"\n [placeholder]=\"'Select Source'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-dropdown>\n </div>\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Crm.AccountMessage.Description' | transloco\"\n name=\"description\">\n <textarea rows=\"5\"\n type=\"text\"\n class=\"form-control\"\n formControlName=\"description\"\n id=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\"></textarea>\n </pw-input-container>\n </div>\n <div *ngIf=\"!isFormEdit\"\n class=\"text-end form-action-buttons\">\n <input type=\"button\"\n class=\"btn btn-outline-primary\"\n (click)=\"isFormEdit = !isFormEdit; getAccountDetails()\"\n value=\"Cancel\" />\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary ms-3\"\n (click)=\"updateAccountInfo()\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </form>\n </div>\n </div>\n <div class=\"col-12 col-md-8\">\n <ul ngbNav\n #nav=\"ngbNav\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Notes</a>\n <ng-template ngbNavContent>\n <form [formGroup]=\"actionControls\"\n (ngSubmit)=\"onSave()\">\n <textarea class=\"form-control\"\n formControlName=\"comment\"\n rows=\"6\"></textarea>\n <p class=\"text-danger\"\n *ngIf=\"\n actionControls.get('comment').touched &&\n actionControls.get('comment').invalid\n \">\n Note Required\n </p>\n <div *ngIf=\"actions?.length\"\n class=\"d-block clear-both pt-3\">\n <ng-container *ngFor=\"let action of actions; index as i\">\n <button *ngIf=\"action.visible\"\n type=\"button\"\n [class.active]=\"\"\n class=\"btn btn-sm me-2 btn-outline-primary mb-2 action-btn\"\n (click)=\"showDatePicker($event, action.id); d.toggle()\">\n {{ action.name }}\n </button>\n </ng-container>\n <div class=\"text-danger\"\n *ngIf=\"submitAction && actionControls.get('crm_action_id').invalid\">\n Please select an action\n </div>\n <div class=\"row mt-3\">\n <div class=\"col-12 col-sm-4\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (click)=\"d.toggle()\" />\n </div>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4 ps-0\">\n <p-autoComplete [suggestions]=\"filteredContact\"\n formControlName=\"crm_contact_id\"\n dataKey=\"id\"\n field=\"displayName\"\n [dropdown]=\"true\"\n (completeMethod)=\"searchContact($event)\"\n (onSelect)=\"selectContact($event)\"\n (onBlur)=\"OnContactBlur()\"\n styleClass=\"w-100\"\n placeholder=\"Search contact\"\n [multiple]=\"false\"\n (onDropdownClick)=\"onDropdownClick()\">\n </p-autoComplete>\n </div>\n <div class=\"col-sm-4 pe-0 completed-toggle\">\n <div class=\"mb-3\">\n <ui-switch checkedLabel=\"completed\"\n uncheckedLabel=\"open\"\n formControlName=\"completed\"\n name=\"completed\">\n </ui-switch>\n </div>\n </div>\n </div>\n </div>\n <div class=\"float-end\">\n <a class=\"btn btn-outline-primary me-0 me-sm-2\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n [disabled]=\"buttonDisable\"\n class=\"btn btn-primary mt-2 mb-2\">Submit Note</button>\n </div>\n <div *ngIf=\"buttonDisable\"\n class=\"no-actions pt-4\">\n <pw-no-data [withImage]=\"true\" [message]=\"\n 'Crm.AccountMessage.NoActionsInAccountInfoMessage' | transloco\n \">\n </pw-no-data>\n </div>\n </form>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div *ngIf=\"!accountComments?.length && isLoaded\"\n class=\"no-actions pt-2\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoActionsMessage' | transloco\">\n </pw-no-data>\n </div>\n <div *ngIf=\"accountComments?.length\">\n <div id=\"timeline\"\n class=\"pt-3 clear-both timeline-center timeline-wrapper timeline-container\"\n infiniteScroll\n [infiniteScrollDistance]=\"2\"\n [infiniteScrollThrottle]=\"50\"\n [infiniteScrollContainer]=\"selector\"\n [fromRoot]=\"true\"\n (scrolled)=\"onScrollTimeline()\">\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n </ul>\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd || last }\"\n *ngFor=\"\n let item of accountComments;\n index as i;\n let odd = odd;\n let even = even;\n let last = last;\n let first = first\n \">\n <div class=\"timeline-badge\">\n <span class=\"bg-red bg-lighten-1\">\n <span class=\"timeline-year\">\n <span class=\"d-block date-year\">{{\n item.when | date: 'medium' | slice: 0:3\n }}</span>\n <span>{{ item.year }}</span></span>\n </span>\n </div>\n <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n <div class=\"card-header py-4\">\n <div class=\"mb-0 clearfix\">\n <textarea type=\"text\"\n name=\"comment\"\n class=\"comment-field form-control p-0\"\n [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n <div class=\"auto-complete mb-3 ui-fluid skills-modal\">\n <p-autoComplete [(ngModel)]=\"item.crm_contact\"\n [suggestions]=\"filteredContactComment\"\n dataKey=\"id\"\n field=\"first_name\"\n dropdown=\" true \"\n (completeMethod)=\"\n searchContactInComment($event)\n \"\n (onSelect)=\"selectCommentContact($event)\"\n (onBlur)=\"OnContactBlur()\"\n styleClass=\" w-100 \"\n placeholder=\" Search contact \"\n [multiple]=\"false\"\n (onDropdownClick)=\"onDropdownClick()\">\n </p-autoComplete>\n </div>\n <p class=\"float-start mb-0\"\n *ngIf=\"\n !showFullComment || item.id !== commentId\n \">\n {{ item.comment | slice: 0:170\n }}<a *ngIf=\"item.comment.length > 170\"\n class=\"text-secondary\"\n (click)=\"\n showFullComment = true;\n commentId = item.id\n \">...show more\n </a>\n </p>\n <p class=\"float-start mb-0\"\n *ngIf=\"showFullComment && item.id === commentId\">\n {{ item.comment }}\n <a *ngIf=\"\n item.comment.length > 170 &&\n showFullComment\n \"\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n </p>\n <button class=\"btn btn-md edit-btn float-end py-0\"\n (click)=\"showEditControls($event, item)\"\n *ngIf=\"userId === item.owner_id || hasAccess\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <div class=\"card-subtitle text-muted my-0 clearfix\">\n <div class=\"float-start\">\n <span *ngIf=\"!updating || actionId !== item.id\"\n class=\"font-small-3\">\n {{ item.when }}</span>\n <input *ngIf=\"updating && actionId === item.id\"\n placeholder=\"dd-mmm-yyyy\"\n value=\"{{ item.when }}\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\" />\n </div>\n <button type=\" button\"\n class=\"btn btn-sm float-end when-btn py-0\"\n *ngIf=\"userId === item.owner_id || hasAccess\"\n (click)=\"showDatePickerUpdate(item.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <p [class.text-danger]=\"!item.color\"\n *ngIf=\"!item.cancelled && !item.completed\"\n class=\"mb-0\">\n {{ item.due }}\n </p>\n <a class=\"text-secondary action-owner\"\n *ngIf=\"item.crm_contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n item.crm_contact.id\n ]\">{{ item.crm_contact.first_name }}\n {{ item.crm_contact.last_name || '' }}</a>\n <p>\n By\n {{\n item.owner.first_name +\n ' ' +\n item.owner.last_name\n }}\n </p>\n <span class=\"badge bg-primary\">{{\n item?.crm_action?.name\n }}</span>\n <span *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n class=\"badge bg-success ms-2\">Open</span>\n <a *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as completed\"\n aria-label=\"Set as completed\"\n class=\"me-3 ms-3\"\n href=\"javascript:void(0);\"\n (click)=\"\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \">\n <i\n class=\"fa fa-tasks completed\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <a *ngIf=\"\n !item.cancelled &&\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as cancelled\"\n aria-label=\"Set as cancelled\"\n href=\"javascript:void(0);\"\n (click)=\"setAsCancelled(item.id, item)\">\n <i\n class=\"fa fa-times delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <a *ngIf=\"\n item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as UnCompleted\"\n aria-label=\"Set as UnCompleted\"\n href=\"javascript:void(0);\"\n (click)=\"\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \"\n class=\"ms-2\">\n <i\n class=\"far fa-window-close\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <div class=\"control-btns mt-3 text-end form-action-buttons\">\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-default me-2\"\n (click)=\"showEditControls(undefined, '')\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button class=\"btn btn-sm btn-primary\"\n type=\"button\"\n (click)=\"updateComment(item)\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\" *ngIf=\"canViewContactsTab()\">\n <a ngbNavLink>Contacts</a>\n <ng-template ngbNavContent>\n <div class=\"row\">\n <div class=\"col-12 mb-3\">\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactAdd,\n accountId\n ]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n </div>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <p-table class=\"table\"\n #dt\n [value]=\"contacts\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [lazy]=\"true\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input type=\"text\"\n [(ngModel)]=\"searchText\"\n pInputText\n size=\"50\"\n placeholder=\"Search contact...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"mw-90\" />\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Label.Name' | transloco }}\n <p-sortIcon field=\"first_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"owner_id\">\n {{ 'Crm.ContactMessage.ContactOwner' | transloco }}\n <p-sortIcon field=\"owner_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"headline\">\n {{ 'Crm.ContactMessage.Headline' | transloco }}\n <p-sortIcon field=\"headline\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_logged_in_at\">\n Last Seen At\n <p-sortIcon field=\"last_logged_in_at\"></p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-contact>\n <tr>\n <td data-head=\"Name\"\n class=\"contactname\">\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n contact.id\n ]\"> {{ (contact.first_name || '') + ' ' + (contact.last_name || '') | textTruncate: 20 }}</a>\n </td>\n <td data-head=\"OwnerName\">\n {{ contact.owner | ifNameNullShowEmail }}\n </td>\n <td data-head=\"Headline\"\n class=\"headline-content\">\n {{ contact?.headline | textTruncate: 20 }}\n </td>\n <td data-head=\"LastSeenAt\">\n <ng-container *ngIf=\"contact?.last_logged_in_at\">\n <span [ngClass]=\"lastSeenAtTextClass(contact?.last_logged_in_at)\">\n {{ contact?.last_logged_in_at | dateFormat }}\n </span>\n </ng-container>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Show\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n contact.id\n ]\">\n <i\n class=\"fa fa-eye see-icon\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Add opportunity\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' +\n subscription?.slug +\n routers.opportunityAdd\n ]\"\n [queryParams]=\"{ contact_id: contact.id }\">\n <i\n class=\"fa fa-plus-circle add-icon\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' +\n subscription?.slug +\n routers.contactDetails,\n contact.id\n ]\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (keydown.enter)=\"onDeleteContact(contact.id)\"\n (keydown.space)=\"onDeleteContact(contact.id)\"\n (click)=\"onDeleteContact(contact.id)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <div *ngIf=\"totalRecords === 0 && totalRecordsUnFiltered !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n </div>\n <div *ngIf=\"totalRecordsUnFiltered === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\">\n </pw-no-data>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\" *ngIf=\"hasAccess\">\n <a ngbNavLink>Versioning</a>\n <ng-template ngbNavContent>\n <div *ngFor=\"let versioning of accountVersioning\">\n <p>\n <strong>Event: </strong>{{ versioning.event }} |\n <strong>Author: </strong><a *ngIf=\"versioning?.author\"\n [routerLink]=\"['/members', versioning?.author?.slug]\">{{ versioning?.author | ifNameNullShowEmail }}</a>\n | <strong>Created at: </strong>{{ versioning.created_at | dateFormat: 'datetime' }}<br />\n <strong>Object: </strong>{{ versioning.object | json }}\n </p>\n <hr />\n </div>\n <div *ngIf=\"accountVersioning?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoVersionsMessage' | transloco\">\n </pw-no-data>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"4\">\n <a ngbNavLink>Files</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-company-files [accountId]=\"accountId\"></pw-smart-crm-company-files>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"5\" *ngIf=\"hasAccess\">\n <a ngbNavLink>Invoices</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-account-invoices [accountId]=\"accountId\"/>\n </ng-template>\n </li>\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n </div>\n </div>\n</div>\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <div class=\"row p-2\">\n <div class=\"col-12\">\n <div class=\"upload-box\">\n <div class=\"upload-box-content\">\n <div class=\"drop-container\"\n ngFileDrop\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\">\n <p>\n Drag files here or\n <label class=\"upload-button\">\n <input type=\"file\"\n ngFileSelect\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\"\n multiple />\n browse\n </label>\n to upload.\n </p>\n </div>\n <div class=\"upload-item\"\n *ngFor=\"let f of files; let i = index\">\n <div class=\"upload-item-content\">\n <div class=\"filename\">\n <div class=\"filename-left\">\n <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n <span>{{ f.name }}</span>\n </div>\n </div>\n <div class=\"progress-content\">\n <div class=\"progress\">\n <span class=\"bar\"\n [style.width]=\"f?.progress?.data?.percentage + '%'\"\n [class.is-done]=\"f['uploaded']\"></span>\n </div>\n </div>\n <div class=\"progress-text-content\">\n <span class=\"progress-text\"\n [class.is-done]=\"f['uploaded']\">\n <span *ngIf=\"!f['uploaded']\">{{ f.progress?.data?.percentage - 1 }}%\n </span>\n <span *ngIf=\"f['uploaded']\">100 %</span>\n <span *ngIf=\"!f['uploaded']\">Uploading...</span>\n <span *ngIf=\"f['uploaded']\">Done</span>\n </span>\n <span class=\"speed-and-eta-text\"\n *ngIf=\"f.progress?.data?.percentage !== 0 && !f['uploaded']\">\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}::ng-deep .p-overlay{width:100%!important;min-width:100%!important;max-width:100%!important;left:0!important}::ng-deep .p-autocomplete-items li{white-space:nowrap!important;overflow:auto!important;text-overflow:ellipsis!important}::ng-deep .p-autocomplete-items li:hover{text-overflow:clip!important}.name-block{width:85%}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.auto-complete{display:none;margin-top:10px}.show-controls .comment-field,.show-controls .auto-complete,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn,.show-controls .action-owner{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled input,.isDisabled textarea,.isDisabled p-dropdown,.isDisabled select{pointer-events:none}.isDisabled select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none!important}.timeline-card.card{min-height:auto}@media (max-width: 768px){.completed-toggle{padding-top:10px}}.when-btn:focus{border:0;box-shadow:none}.no-actions{clear:both}.timeline-container{height:700px;overflow-y:scroll}.action-btn.active{color:#fff!important;background-color:var(--first)}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i5.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: i8.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i9.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i8.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i10.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i11$1.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i12.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i12.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i18.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: SmartCrmCompanyFilesComponent, selector: "pw-smart-crm-company-files", inputs: ["accountId", "contactId", "opportunityId"] }, { kind: "component", type: SmartCrmCompanyAccountInvoiceComponent, selector: "pw-smart-crm-account-invoices", inputs: ["accountId"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.JsonPipe, name: "json" }, { kind: "pipe", type: i2$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i15.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i15.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i11$2.TranslocoPipe, name: "transloco" }] }); }
|
|
1278
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: SmartCrmCompanyInfoComponent, isStandalone: false, selector: "pw-smart-crm-company-info", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-0\">\n <div class=\"me-auto mb-0\">\n <h2 class=\"mb-0\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"back()\"\n class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n Account Info\n </h2>\n </div>\n <a class=\"btn btn-sm btn-outline-primary float-end mb-3\"\n data-cy=\"add-opportunities\"\n (click)=\"navigateToAddOpportunities()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n </div>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isDataLoaded\">\n <p-progressSpinner> </p-progressSpinner>\n </div>\n <div *ngIf=\"isDataLoaded\">\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"user-info p-3 card pb-0 h-auto\">\n <div class=\"mb-2 text-center\">\n <a class=\"profile-image\">\n <img alt=\"Profile Logo\"\n width=\"100\"\n height=\"100\"\n [src]=\"getAccountLogo(data?.company_url)\"\n class=\"img-fluid company-logo\"\n (error)=\"handleImageError($event, 'assets/img/icons/company.png')\" />\n </a>\n </div>\n <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n <h4 class=\"d-inline-block name-block\">\n About <span *ngIf=\"data?.id\">{{ data.name }}</span>\n </h4>\n <a href=\"#\"\n *ngIf=\"isFormEdit && (userId === data?.owner?.id || hasAccess)\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"$event.preventDefault(); isFormEdit = !isFormEdit; this.getAllSubscriptionMembers()\">{{ 'Button.Edit' | transloco }}</a>\n </div>\n <form [formGroup]=\"aboutControls\"\n [class.isDisabled]=\"isFormEdit\">\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"name\">{{ 'Crm.AccountMessage.Name' | transloco }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"Location\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</label>\n <input ngx-gp-autocomplete\n class=\"form-control rounded-0 ps-1 user-value\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n (onAddressChange)=\"handleAddressChange($event)\"\n [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"countries$ | async as countries\">\n <label for=\"country\">{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </label>\n <p-dropdown\n [options]=\"countries\"\n formControlName=\"country\"\n [ngClass]=\"{ 'is-invalid': submitted && f['country'].errors }\"\n [placeholder]=\"'Select Country'\"\n optionValue=\"code\"\n optionLabel=\"name\">\n </p-dropdown>\n </div>\n <div class=\"mb-3 ui-fluid skills-modal\">\n <label class=\"label mb-2\" for=\"Message\">{{ 'Crm.AccountMessage.Owner' | transloco }}</label>\n <p class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.owner_id\">\n {{ data?.owner?.first_name }} {{ data?.owner?.last_name }}\n </p>\n <p-autoComplete *ngIf=\"!isFormEdit || !data?.owner_id\"\n [suggestions]=\"filteredOwner\"\n formControlName=\"owner_id\"\n dataKey=\"id\"\n field=\"displayName\"\n [dropdown]=\"true\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n placeholder=\"Search owner\"\n [multiple]=\"false\">\n </p-autoComplete>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"CompanyUrl\">{{\n 'Crm.AccountMessage.CompanyUrl' | transloco\n }}</label>\n <a [href]=\"data?.company_url\"\n target=\"blank\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.company_url\">{{ data?.company_url }}</a>\n <input *ngIf=\"!isFormEdit || !data?.company_url\"\n type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"company_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"data?.tel\">\n <label class=\"label mb-0\" for=\"AccountMessage\">{{ 'Crm.AccountMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"tel\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationTypes$ | async as types\">\n <label for=\"organizationType\">{{ 'Organization.OrganizationType' | transloco }}</label>\n <p-dropdown\n [options]=\"types['organization_types']\"\n formControlName=\"organization_type_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_type_id'].errors }\"\n [placeholder]=\"'Select Organization Type'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-dropdown>\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationIndustries$ | async as industries\">\n <label for=\"file\">{{ 'Organization.OrganizationIndustry' | transloco }}</label>\n <p-dropdown\n [options]=\"industries['organization_industries']\"\n formControlName=\"organization_industry_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_industry_id'].errors }\"\n [placeholder]=\"'Select Industry'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-dropdown>\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationSizes$ | async as sizes\">\n <label for=\"size\">{{ 'Crm.AccountMessage.Size' | transloco }}</label>\n <p-dropdown\n [options]=\"sizes['organization_sizes']\"\n formControlName=\"organization_size_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_size_id'].errors }\"\n [placeholder]=\"'Select Size'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-dropdown>\n </div>\n <div class=\"mb-3\">\n <label for=\"status\">{{ 'Crm.AccountMessage.Status' | transloco }}</label>\n <p-dropdown\n [options]=\"status\"\n formControlName=\"status\"\n [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\"\n [placeholder]=\"'Select Status'\">\n </p-dropdown>\n </div>\n <div class=\"mb-3\">\n <label for=\"priority\">{{ 'Crm.AccountMessage.Priority' | transloco }}</label>\n <p-dropdown\n [options]=\"priority\"\n formControlName=\"priority\"\n [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\"\n [placeholder]=\"'Select Priority'\">\n </p-dropdown>\n </div>\n <div class=\"mb-3\">\n <label for=\"message\">{{ 'Crm.AccountMessage.Source' | transloco }}</label>\n <p-dropdown\n [options]=\"source\"\n formControlName=\"crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\"\n [placeholder]=\"'Select Source'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-dropdown>\n </div>\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Crm.AccountMessage.Description' | transloco\"\n name=\"description\">\n <textarea rows=\"5\"\n type=\"text\"\n class=\"form-control\"\n formControlName=\"description\"\n id=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\"></textarea>\n </pw-input-container>\n </div>\n <div *ngIf=\"!isFormEdit\"\n class=\"text-end form-action-buttons\">\n <input type=\"button\"\n class=\"btn btn-outline-primary\"\n (click)=\"isFormEdit = !isFormEdit; getAccountDetails()\"\n value=\"Cancel\" />\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary ms-3\"\n (click)=\"updateAccountInfo()\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </form>\n </div>\n </div>\n <div class=\"col-12 col-md-8\">\n <ul ngbNav\n #nav=\"ngbNav\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Notes</a>\n <ng-template ngbNavContent>\n <form [formGroup]=\"actionControls\"\n (ngSubmit)=\"onSave()\">\n <textarea class=\"form-control\"\n formControlName=\"comment\"\n rows=\"6\"></textarea>\n <p class=\"text-danger\"\n *ngIf=\"\n actionControls.get('comment').touched &&\n actionControls.get('comment').invalid\n \">\n Note Required\n </p>\n <div *ngIf=\"actions?.length\"\n class=\"d-block clear-both pt-3\">\n <ng-container *ngFor=\"let action of actions; index as i\">\n <button *ngIf=\"action.visible\"\n type=\"button\"\n [class.active]=\"\"\n class=\"btn btn-sm me-2 btn-outline-primary mb-2 action-btn\"\n (click)=\"showDatePicker($event, action.id); d.toggle()\">\n {{ action.name }}\n </button>\n </ng-container>\n <div class=\"text-danger\"\n *ngIf=\"submitAction && actionControls.get('crm_action_id').invalid\">\n Please select an action\n </div>\n <div class=\"row mt-3\">\n <div class=\"col-12 col-sm-4\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (click)=\"d.toggle()\" />\n </div>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4 ps-0\">\n <p-autoComplete [suggestions]=\"filteredContact\"\n formControlName=\"crm_contact_id\"\n dataKey=\"id\"\n field=\"displayName\"\n [dropdown]=\"true\"\n (completeMethod)=\"searchContact($event)\"\n (onSelect)=\"selectContact($event)\"\n (onBlur)=\"OnContactBlur()\"\n styleClass=\"w-100\"\n placeholder=\"Search contact\"\n [multiple]=\"false\"\n (onDropdownClick)=\"onDropdownClick()\">\n </p-autoComplete>\n </div>\n <div class=\"col-sm-4 pe-0 completed-toggle\">\n <div class=\"mb-3\">\n <ui-switch checkedLabel=\"completed\"\n uncheckedLabel=\"open\"\n formControlName=\"completed\"\n name=\"completed\">\n </ui-switch>\n </div>\n </div>\n </div>\n </div>\n <div class=\"float-end\">\n <a class=\"btn btn-outline-primary me-0 me-sm-2\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n [disabled]=\"buttonDisable\"\n class=\"btn btn-primary mt-2 mb-2\">Submit Note</button>\n </div>\n <div *ngIf=\"buttonDisable\"\n class=\"no-actions pt-4\">\n <pw-no-data [withImage]=\"true\" [message]=\"\n 'Crm.AccountMessage.NoActionsInAccountInfoMessage' | transloco\n \">\n </pw-no-data>\n </div>\n </form>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div *ngIf=\"!accountComments?.length && isLoaded\"\n class=\"no-actions pt-2\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoActionsMessage' | transloco\">\n </pw-no-data>\n </div>\n <div *ngIf=\"accountComments?.length\">\n <div id=\"timeline\"\n class=\"pt-3 clear-both timeline-center timeline-wrapper timeline-container\"\n infiniteScroll\n [infiniteScrollDistance]=\"2\"\n [infiniteScrollThrottle]=\"50\"\n [infiniteScrollContainer]=\"selector\"\n [fromRoot]=\"true\"\n (scrolled)=\"onScrollTimeline()\">\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n </ul>\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd || last }\"\n *ngFor=\"\n let item of accountComments;\n index as i;\n let odd = odd;\n let even = even;\n let last = last;\n let first = first\n \">\n <div class=\"timeline-badge\">\n <span class=\"bg-red bg-lighten-1\">\n <span class=\"timeline-year\">\n <span class=\"d-block date-year\">{{\n item.when | date: 'medium' | slice: 0:3\n }}</span>\n <span>{{ item.year }}</span></span>\n </span>\n </div>\n <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n <div class=\"card-header py-4\">\n <div class=\"mb-0 clearfix\">\n <textarea type=\"text\"\n name=\"comment\"\n class=\"comment-field form-control p-0\"\n [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n <div class=\"auto-complete mb-3 ui-fluid skills-modal\">\n <p-autoComplete [(ngModel)]=\"item.crm_contact\"\n [suggestions]=\"filteredContactComment\"\n dataKey=\"id\"\n field=\"first_name\"\n dropdown=\" true \"\n (completeMethod)=\"\n searchContactInComment($event)\n \"\n (onSelect)=\"selectCommentContact($event)\"\n (onBlur)=\"OnContactBlur()\"\n styleClass=\" w-100 \"\n placeholder=\" Search contact \"\n [multiple]=\"false\"\n (onDropdownClick)=\"onDropdownClick()\">\n </p-autoComplete>\n </div>\n <p class=\"float-start mb-0\"\n *ngIf=\"\n !showFullComment || item.id !== commentId\n \">\n {{ item.comment | slice: 0:170\n }}<a *ngIf=\"item.comment.length > 170\"\n class=\"text-secondary\"\n (click)=\"\n showFullComment = true;\n commentId = item.id\n \">...show more\n </a>\n </p>\n <p class=\"float-start mb-0\"\n *ngIf=\"showFullComment && item.id === commentId\">\n {{ item.comment }}\n <a *ngIf=\"\n item.comment.length > 170 &&\n showFullComment\n \"\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n </p>\n <button class=\"btn btn-md edit-btn float-end py-0\"\n (click)=\"showEditControls($event, item)\"\n *ngIf=\"userId === item.owner_id || hasAccess\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <div class=\"card-subtitle text-muted my-0 clearfix\">\n <div class=\"float-start\">\n <span *ngIf=\"!updating || actionId !== item.id\"\n class=\"font-small-3\">\n {{ item.when }}</span>\n <input *ngIf=\"updating && actionId === item.id\"\n placeholder=\"dd-mmm-yyyy\"\n value=\"{{ item.when }}\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\" />\n </div>\n <button type=\" button\"\n class=\"btn btn-sm float-end when-btn py-0\"\n *ngIf=\"userId === item.owner_id || hasAccess\"\n (click)=\"showDatePickerUpdate(item.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <p [class.text-danger]=\"!item.color\"\n *ngIf=\"!item.cancelled && !item.completed\"\n class=\"mb-0\">\n {{ item.due }}\n </p>\n <a class=\"text-secondary action-owner\"\n *ngIf=\"item.crm_contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n item.crm_contact.id\n ]\">{{ item.crm_contact.first_name }}\n {{ item.crm_contact.last_name || '' }}</a>\n <p>\n By\n {{\n item.owner.first_name +\n ' ' +\n item.owner.last_name\n }}\n </p>\n <span class=\"badge bg-primary\">{{\n item?.crm_action?.name\n }}</span>\n <span *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n class=\"badge bg-success ms-2\">Open</span>\n <a *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as completed\"\n aria-label=\"Set as completed\"\n class=\"me-3 ms-3\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \">\n <i\n class=\"fa fa-tasks completed\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <a *ngIf=\"\n !item.cancelled &&\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as cancelled\"\n aria-label=\"Set as cancelled\"\n href=\"#\"\n (click)=\"$event.preventDefault(); setAsCancelled(item.id, item)\">\n <i\n class=\"fa fa-times delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <a *ngIf=\"\n item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as UnCompleted\"\n aria-label=\"Set as UnCompleted\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \"\n class=\"ms-2\">\n <i\n class=\"far fa-window-close\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <div class=\"control-btns mt-3 text-end form-action-buttons\">\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-default me-2\"\n (click)=\"showEditControls(undefined, '')\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button class=\"btn btn-sm btn-primary\"\n type=\"button\"\n (click)=\"updateComment(item)\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\" *ngIf=\"canViewContactsTab()\">\n <a ngbNavLink>Contacts</a>\n <ng-template ngbNavContent>\n <div class=\"row\">\n <div class=\"col-12 mb-3\">\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactAdd,\n accountId\n ]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n </div>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <p-table class=\"table\"\n #dt\n [value]=\"contacts\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [lazy]=\"true\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input type=\"text\"\n [(ngModel)]=\"searchText\"\n pInputText\n size=\"50\"\n placeholder=\"Search contact...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"mw-90\" />\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Label.Name' | transloco }}\n <p-sortIcon field=\"first_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"owner_id\">\n {{ 'Crm.ContactMessage.ContactOwner' | transloco }}\n <p-sortIcon field=\"owner_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"headline\">\n {{ 'Crm.ContactMessage.Headline' | transloco }}\n <p-sortIcon field=\"headline\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_logged_in_at\">\n Last Seen At\n <p-sortIcon field=\"last_logged_in_at\"></p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-contact>\n <tr>\n <td data-head=\"Name\"\n class=\"contactname\">\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n contact.id\n ]\"> {{ (contact.first_name || '') + ' ' + (contact.last_name || '') | textTruncate: 20 }}</a>\n </td>\n <td data-head=\"OwnerName\">\n {{ contact.owner | ifNameNullShowEmail }}\n </td>\n <td data-head=\"Headline\"\n class=\"headline-content\">\n {{ contact?.headline | textTruncate: 20 }}\n </td>\n <td data-head=\"LastSeenAt\">\n <ng-container *ngIf=\"contact?.last_logged_in_at\">\n <span [ngClass]=\"lastSeenAtTextClass(contact?.last_logged_in_at)\">\n {{ contact?.last_logged_in_at | dateFormat }}\n </span>\n </ng-container>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Show\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n contact.id\n ]\">\n <i\n class=\"fa fa-eye see-icon\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Add opportunity\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' +\n subscription?.slug +\n routers.opportunityAdd\n ]\"\n [queryParams]=\"{ contact_id: contact.id }\">\n <i\n class=\"fa fa-plus-circle add-icon\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' +\n subscription?.slug +\n routers.contactDetails,\n contact.id\n ]\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (keydown.enter)=\"onDeleteContact(contact.id)\"\n (keydown.space)=\"onDeleteContact(contact.id)\"\n (click)=\"onDeleteContact(contact.id)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <div *ngIf=\"totalRecords === 0 && totalRecordsUnFiltered !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n </div>\n <div *ngIf=\"totalRecordsUnFiltered === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\">\n </pw-no-data>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\" *ngIf=\"hasAccess\">\n <a ngbNavLink>Versioning</a>\n <ng-template ngbNavContent>\n <div *ngFor=\"let versioning of accountVersioning\">\n <p>\n <strong>Event: </strong>{{ versioning.event }} |\n <strong>Author: </strong><a *ngIf=\"versioning?.author\"\n [routerLink]=\"['/members', versioning?.author?.slug]\">{{ versioning?.author | ifNameNullShowEmail }}</a>\n | <strong>Created at: </strong>{{ versioning.created_at | dateFormat: 'datetime' }}<br />\n <strong>Object: </strong>{{ versioning.object | json }}\n </p>\n <hr />\n </div>\n <div *ngIf=\"accountVersioning?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoVersionsMessage' | transloco\">\n </pw-no-data>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"4\">\n <a ngbNavLink>Files</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-company-files [accountId]=\"accountId\"></pw-smart-crm-company-files>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"5\" *ngIf=\"hasAccess\">\n <a ngbNavLink>Invoices</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-account-invoices [accountId]=\"accountId\"/>\n </ng-template>\n </li>\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n </div>\n </div>\n</div>\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <div class=\"row p-2\">\n <div class=\"col-12\">\n <div class=\"upload-box\">\n <div class=\"upload-box-content\">\n <div class=\"drop-container\"\n ngFileDrop\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\">\n <p>\n Drag files here or\n <label class=\"upload-button\">\n <input type=\"file\"\n ngFileSelect\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\"\n multiple />\n browse\n </label>\n to upload.\n </p>\n </div>\n <div class=\"upload-item\"\n *ngFor=\"let f of files; let i = index\">\n <div class=\"upload-item-content\">\n <div class=\"filename\">\n <div class=\"filename-left\">\n <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n <span>{{ f.name }}</span>\n </div>\n </div>\n <div class=\"progress-content\">\n <div class=\"progress\">\n <span class=\"bar\"\n [style.width]=\"f?.progress?.data?.percentage + '%'\"\n [class.is-done]=\"f['uploaded']\"></span>\n </div>\n </div>\n <div class=\"progress-text-content\">\n <span class=\"progress-text\"\n [class.is-done]=\"f['uploaded']\">\n <span *ngIf=\"!f['uploaded']\">{{ f.progress?.data?.percentage - 1 }}%\n </span>\n <span *ngIf=\"f['uploaded']\">100 %</span>\n <span *ngIf=\"!f['uploaded']\">Uploading...</span>\n <span *ngIf=\"f['uploaded']\">Done</span>\n </span>\n <span class=\"speed-and-eta-text\"\n *ngIf=\"f.progress?.data?.percentage !== 0 && !f['uploaded']\">\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}::ng-deep .p-overlay{width:100%!important;min-width:100%!important;max-width:100%!important;left:0!important}::ng-deep .p-autocomplete-items li{white-space:nowrap!important;overflow:auto!important;text-overflow:ellipsis!important}::ng-deep .p-autocomplete-items li:hover{text-overflow:clip!important}.name-block{width:85%}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.auto-complete{display:none;margin-top:10px}.show-controls .comment-field,.show-controls .auto-complete,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn,.show-controls .action-owner{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled input,.isDisabled textarea,.isDisabled p-dropdown,.isDisabled select{pointer-events:none}.isDisabled select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none!important}.timeline-card.card{min-height:auto}@media (max-width: 768px){.completed-toggle{padding-top:10px}}.when-btn:focus{border:0;box-shadow:none}.no-actions{clear:both}.timeline-container{height:700px;overflow-y:scroll}.action-btn.active{color:#fff!important;background-color:var(--first)}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i5.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: i8.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i9.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i8.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i10.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i11$1.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i12.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i12.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i18.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: SmartCrmCompanyFilesComponent, selector: "pw-smart-crm-company-files", inputs: ["accountId", "contactId", "opportunityId"] }, { kind: "component", type: SmartCrmCompanyAccountInvoiceComponent, selector: "pw-smart-crm-account-invoices", inputs: ["accountId"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.JsonPipe, name: "json" }, { kind: "pipe", type: i2$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i15.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i15.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i11$2.TranslocoPipe, name: "transloco" }] }); }
|
|
1279
1279
|
}
|
|
1280
1280
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SmartCrmCompanyInfoComponent, decorators: [{
|
|
1281
1281
|
type: Component,
|
|
1282
|
-
args: [{ selector: 'pw-smart-crm-company-info', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 mb-0\">\n <div class=\"me-auto mb-0\">\n <h2 class=\"mb-0\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"back()\"\n class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n Account Info\n </h2>\n </div>\n <a class=\"btn btn-sm btn-outline-primary float-end mb-3\"\n data-cy=\"add-opportunities\"\n (click)=\"navigateToAddOpportunities()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n </div>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isDataLoaded\">\n <p-progressSpinner> </p-progressSpinner>\n </div>\n <div *ngIf=\"isDataLoaded\">\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"user-info p-3 card pb-0 h-auto\">\n <div class=\"mb-2 text-center\">\n <a class=\"profile-image\">\n <img alt=\"Profile Logo\"\n width=\"100\"\n height=\"100\"\n [src]=\"getAccountLogo(data?.company_url)\"\n class=\"img-fluid company-logo\"\n (error)=\"handleImageError($event, 'assets/img/icons/company.png')\" />\n </a>\n </div>\n <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n <h4 class=\"d-inline-block name-block\">\n About <span *ngIf=\"data?.id\">{{ data.name }}</span>\n </h4>\n <a href=\"javascript:void(0);\"\n *ngIf=\"isFormEdit && (userId === data?.owner?.id || hasAccess)\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"isFormEdit = !isFormEdit; this.getAllSubscriptionMembers()\">{{ 'Button.Edit' | transloco }}</a>\n </div>\n <form [formGroup]=\"aboutControls\"\n [class.isDisabled]=\"isFormEdit\">\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"name\">{{ 'Crm.AccountMessage.Name' | transloco }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"Location\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</label>\n <input ngx-gp-autocomplete\n class=\"form-control rounded-0 ps-1 user-value\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n (onAddressChange)=\"handleAddressChange($event)\"\n [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"countries$ | async as countries\">\n <label for=\"country\">{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </label>\n <p-dropdown\n [options]=\"countries\"\n formControlName=\"country\"\n [ngClass]=\"{ 'is-invalid': submitted && f['country'].errors }\"\n [placeholder]=\"'Select Country'\"\n optionValue=\"code\"\n optionLabel=\"name\">\n </p-dropdown>\n </div>\n <div class=\"mb-3 ui-fluid skills-modal\">\n <label class=\"label mb-2\" for=\"Message\">{{ 'Crm.AccountMessage.Owner' | transloco }}</label>\n <p class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.owner_id\">\n {{ data?.owner?.first_name }} {{ data?.owner?.last_name }}\n </p>\n <p-autoComplete *ngIf=\"!isFormEdit || !data?.owner_id\"\n [suggestions]=\"filteredOwner\"\n formControlName=\"owner_id\"\n dataKey=\"id\"\n field=\"displayName\"\n [dropdown]=\"true\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n placeholder=\"Search owner\"\n [multiple]=\"false\">\n </p-autoComplete>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"CompanyUrl\">{{\n 'Crm.AccountMessage.CompanyUrl' | transloco\n }}</label>\n <a [href]=\"data?.company_url\"\n target=\"blank\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.company_url\">{{ data?.company_url }}</a>\n <input *ngIf=\"!isFormEdit || !data?.company_url\"\n type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"company_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"data?.tel\">\n <label class=\"label mb-0\" for=\"AccountMessage\">{{ 'Crm.AccountMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"tel\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationTypes$ | async as types\">\n <label for=\"organizationType\">{{ 'Organization.OrganizationType' | transloco }}</label>\n <p-dropdown\n [options]=\"types['organization_types']\"\n formControlName=\"organization_type_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_type_id'].errors }\"\n [placeholder]=\"'Select Organization Type'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-dropdown>\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationIndustries$ | async as industries\">\n <label for=\"file\">{{ 'Organization.OrganizationIndustry' | transloco }}</label>\n <p-dropdown\n [options]=\"industries['organization_industries']\"\n formControlName=\"organization_industry_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_industry_id'].errors }\"\n [placeholder]=\"'Select Industry'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-dropdown>\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationSizes$ | async as sizes\">\n <label for=\"size\">{{ 'Crm.AccountMessage.Size' | transloco }}</label>\n <p-dropdown\n [options]=\"sizes['organization_sizes']\"\n formControlName=\"organization_size_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_size_id'].errors }\"\n [placeholder]=\"'Select Size'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-dropdown>\n </div>\n <div class=\"mb-3\">\n <label for=\"status\">{{ 'Crm.AccountMessage.Status' | transloco }}</label>\n <p-dropdown\n [options]=\"status\"\n formControlName=\"status\"\n [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\"\n [placeholder]=\"'Select Status'\">\n </p-dropdown>\n </div>\n <div class=\"mb-3\">\n <label for=\"priority\">{{ 'Crm.AccountMessage.Priority' | transloco }}</label>\n <p-dropdown\n [options]=\"priority\"\n formControlName=\"priority\"\n [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\"\n [placeholder]=\"'Select Priority'\">\n </p-dropdown>\n </div>\n <div class=\"mb-3\">\n <label for=\"message\">{{ 'Crm.AccountMessage.Source' | transloco }}</label>\n <p-dropdown\n [options]=\"source\"\n formControlName=\"crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\"\n [placeholder]=\"'Select Source'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-dropdown>\n </div>\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Crm.AccountMessage.Description' | transloco\"\n name=\"description\">\n <textarea rows=\"5\"\n type=\"text\"\n class=\"form-control\"\n formControlName=\"description\"\n id=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\"></textarea>\n </pw-input-container>\n </div>\n <div *ngIf=\"!isFormEdit\"\n class=\"text-end form-action-buttons\">\n <input type=\"button\"\n class=\"btn btn-outline-primary\"\n (click)=\"isFormEdit = !isFormEdit; getAccountDetails()\"\n value=\"Cancel\" />\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary ms-3\"\n (click)=\"updateAccountInfo()\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </form>\n </div>\n </div>\n <div class=\"col-12 col-md-8\">\n <ul ngbNav\n #nav=\"ngbNav\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Notes</a>\n <ng-template ngbNavContent>\n <form [formGroup]=\"actionControls\"\n (ngSubmit)=\"onSave()\">\n <textarea class=\"form-control\"\n formControlName=\"comment\"\n rows=\"6\"></textarea>\n <p class=\"text-danger\"\n *ngIf=\"\n actionControls.get('comment').touched &&\n actionControls.get('comment').invalid\n \">\n Note Required\n </p>\n <div *ngIf=\"actions?.length\"\n class=\"d-block clear-both pt-3\">\n <ng-container *ngFor=\"let action of actions; index as i\">\n <button *ngIf=\"action.visible\"\n type=\"button\"\n [class.active]=\"\"\n class=\"btn btn-sm me-2 btn-outline-primary mb-2 action-btn\"\n (click)=\"showDatePicker($event, action.id); d.toggle()\">\n {{ action.name }}\n </button>\n </ng-container>\n <div class=\"text-danger\"\n *ngIf=\"submitAction && actionControls.get('crm_action_id').invalid\">\n Please select an action\n </div>\n <div class=\"row mt-3\">\n <div class=\"col-12 col-sm-4\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (click)=\"d.toggle()\" />\n </div>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4 ps-0\">\n <p-autoComplete [suggestions]=\"filteredContact\"\n formControlName=\"crm_contact_id\"\n dataKey=\"id\"\n field=\"displayName\"\n [dropdown]=\"true\"\n (completeMethod)=\"searchContact($event)\"\n (onSelect)=\"selectContact($event)\"\n (onBlur)=\"OnContactBlur()\"\n styleClass=\"w-100\"\n placeholder=\"Search contact\"\n [multiple]=\"false\"\n (onDropdownClick)=\"onDropdownClick()\">\n </p-autoComplete>\n </div>\n <div class=\"col-sm-4 pe-0 completed-toggle\">\n <div class=\"mb-3\">\n <ui-switch checkedLabel=\"completed\"\n uncheckedLabel=\"open\"\n formControlName=\"completed\"\n name=\"completed\">\n </ui-switch>\n </div>\n </div>\n </div>\n </div>\n <div class=\"float-end\">\n <a class=\"btn btn-outline-primary me-0 me-sm-2\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n [disabled]=\"buttonDisable\"\n class=\"btn btn-primary mt-2 mb-2\">Submit Note</button>\n </div>\n <div *ngIf=\"buttonDisable\"\n class=\"no-actions pt-4\">\n <pw-no-data [withImage]=\"true\" [message]=\"\n 'Crm.AccountMessage.NoActionsInAccountInfoMessage' | transloco\n \">\n </pw-no-data>\n </div>\n </form>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div *ngIf=\"!accountComments?.length && isLoaded\"\n class=\"no-actions pt-2\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoActionsMessage' | transloco\">\n </pw-no-data>\n </div>\n <div *ngIf=\"accountComments?.length\">\n <div id=\"timeline\"\n class=\"pt-3 clear-both timeline-center timeline-wrapper timeline-container\"\n infiniteScroll\n [infiniteScrollDistance]=\"2\"\n [infiniteScrollThrottle]=\"50\"\n [infiniteScrollContainer]=\"selector\"\n [fromRoot]=\"true\"\n (scrolled)=\"onScrollTimeline()\">\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n </ul>\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd || last }\"\n *ngFor=\"\n let item of accountComments;\n index as i;\n let odd = odd;\n let even = even;\n let last = last;\n let first = first\n \">\n <div class=\"timeline-badge\">\n <span class=\"bg-red bg-lighten-1\">\n <span class=\"timeline-year\">\n <span class=\"d-block date-year\">{{\n item.when | date: 'medium' | slice: 0:3\n }}</span>\n <span>{{ item.year }}</span></span>\n </span>\n </div>\n <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n <div class=\"card-header py-4\">\n <div class=\"mb-0 clearfix\">\n <textarea type=\"text\"\n name=\"comment\"\n class=\"comment-field form-control p-0\"\n [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n <div class=\"auto-complete mb-3 ui-fluid skills-modal\">\n <p-autoComplete [(ngModel)]=\"item.crm_contact\"\n [suggestions]=\"filteredContactComment\"\n dataKey=\"id\"\n field=\"first_name\"\n dropdown=\" true \"\n (completeMethod)=\"\n searchContactInComment($event)\n \"\n (onSelect)=\"selectCommentContact($event)\"\n (onBlur)=\"OnContactBlur()\"\n styleClass=\" w-100 \"\n placeholder=\" Search contact \"\n [multiple]=\"false\"\n (onDropdownClick)=\"onDropdownClick()\">\n </p-autoComplete>\n </div>\n <p class=\"float-start mb-0\"\n *ngIf=\"\n !showFullComment || item.id !== commentId\n \">\n {{ item.comment | slice: 0:170\n }}<a *ngIf=\"item.comment.length > 170\"\n class=\"text-secondary\"\n (click)=\"\n showFullComment = true;\n commentId = item.id\n \">...show more\n </a>\n </p>\n <p class=\"float-start mb-0\"\n *ngIf=\"showFullComment && item.id === commentId\">\n {{ item.comment }}\n <a *ngIf=\"\n item.comment.length > 170 &&\n showFullComment\n \"\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n </p>\n <button class=\"btn btn-md edit-btn float-end py-0\"\n (click)=\"showEditControls($event, item)\"\n *ngIf=\"userId === item.owner_id || hasAccess\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <div class=\"card-subtitle text-muted my-0 clearfix\">\n <div class=\"float-start\">\n <span *ngIf=\"!updating || actionId !== item.id\"\n class=\"font-small-3\">\n {{ item.when }}</span>\n <input *ngIf=\"updating && actionId === item.id\"\n placeholder=\"dd-mmm-yyyy\"\n value=\"{{ item.when }}\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\" />\n </div>\n <button type=\" button\"\n class=\"btn btn-sm float-end when-btn py-0\"\n *ngIf=\"userId === item.owner_id || hasAccess\"\n (click)=\"showDatePickerUpdate(item.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <p [class.text-danger]=\"!item.color\"\n *ngIf=\"!item.cancelled && !item.completed\"\n class=\"mb-0\">\n {{ item.due }}\n </p>\n <a class=\"text-secondary action-owner\"\n *ngIf=\"item.crm_contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n item.crm_contact.id\n ]\">{{ item.crm_contact.first_name }}\n {{ item.crm_contact.last_name || '' }}</a>\n <p>\n By\n {{\n item.owner.first_name +\n ' ' +\n item.owner.last_name\n }}\n </p>\n <span class=\"badge bg-primary\">{{\n item?.crm_action?.name\n }}</span>\n <span *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n class=\"badge bg-success ms-2\">Open</span>\n <a *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as completed\"\n aria-label=\"Set as completed\"\n class=\"me-3 ms-3\"\n href=\"javascript:void(0);\"\n (click)=\"\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \">\n <i\n class=\"fa fa-tasks completed\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <a *ngIf=\"\n !item.cancelled &&\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as cancelled\"\n aria-label=\"Set as cancelled\"\n href=\"javascript:void(0);\"\n (click)=\"setAsCancelled(item.id, item)\">\n <i\n class=\"fa fa-times delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <a *ngIf=\"\n item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as UnCompleted\"\n aria-label=\"Set as UnCompleted\"\n href=\"javascript:void(0);\"\n (click)=\"\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \"\n class=\"ms-2\">\n <i\n class=\"far fa-window-close\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <div class=\"control-btns mt-3 text-end form-action-buttons\">\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-default me-2\"\n (click)=\"showEditControls(undefined, '')\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button class=\"btn btn-sm btn-primary\"\n type=\"button\"\n (click)=\"updateComment(item)\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\" *ngIf=\"canViewContactsTab()\">\n <a ngbNavLink>Contacts</a>\n <ng-template ngbNavContent>\n <div class=\"row\">\n <div class=\"col-12 mb-3\">\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactAdd,\n accountId\n ]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n </div>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <p-table class=\"table\"\n #dt\n [value]=\"contacts\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [lazy]=\"true\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input type=\"text\"\n [(ngModel)]=\"searchText\"\n pInputText\n size=\"50\"\n placeholder=\"Search contact...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"mw-90\" />\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Label.Name' | transloco }}\n <p-sortIcon field=\"first_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"owner_id\">\n {{ 'Crm.ContactMessage.ContactOwner' | transloco }}\n <p-sortIcon field=\"owner_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"headline\">\n {{ 'Crm.ContactMessage.Headline' | transloco }}\n <p-sortIcon field=\"headline\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_logged_in_at\">\n Last Seen At\n <p-sortIcon field=\"last_logged_in_at\"></p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-contact>\n <tr>\n <td data-head=\"Name\"\n class=\"contactname\">\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n contact.id\n ]\"> {{ (contact.first_name || '') + ' ' + (contact.last_name || '') | textTruncate: 20 }}</a>\n </td>\n <td data-head=\"OwnerName\">\n {{ contact.owner | ifNameNullShowEmail }}\n </td>\n <td data-head=\"Headline\"\n class=\"headline-content\">\n {{ contact?.headline | textTruncate: 20 }}\n </td>\n <td data-head=\"LastSeenAt\">\n <ng-container *ngIf=\"contact?.last_logged_in_at\">\n <span [ngClass]=\"lastSeenAtTextClass(contact?.last_logged_in_at)\">\n {{ contact?.last_logged_in_at | dateFormat }}\n </span>\n </ng-container>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Show\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n contact.id\n ]\">\n <i\n class=\"fa fa-eye see-icon\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Add opportunity\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' +\n subscription?.slug +\n routers.opportunityAdd\n ]\"\n [queryParams]=\"{ contact_id: contact.id }\">\n <i\n class=\"fa fa-plus-circle add-icon\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' +\n subscription?.slug +\n routers.contactDetails,\n contact.id\n ]\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (keydown.enter)=\"onDeleteContact(contact.id)\"\n (keydown.space)=\"onDeleteContact(contact.id)\"\n (click)=\"onDeleteContact(contact.id)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <div *ngIf=\"totalRecords === 0 && totalRecordsUnFiltered !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n </div>\n <div *ngIf=\"totalRecordsUnFiltered === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\">\n </pw-no-data>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\" *ngIf=\"hasAccess\">\n <a ngbNavLink>Versioning</a>\n <ng-template ngbNavContent>\n <div *ngFor=\"let versioning of accountVersioning\">\n <p>\n <strong>Event: </strong>{{ versioning.event }} |\n <strong>Author: </strong><a *ngIf=\"versioning?.author\"\n [routerLink]=\"['/members', versioning?.author?.slug]\">{{ versioning?.author | ifNameNullShowEmail }}</a>\n | <strong>Created at: </strong>{{ versioning.created_at | dateFormat: 'datetime' }}<br />\n <strong>Object: </strong>{{ versioning.object | json }}\n </p>\n <hr />\n </div>\n <div *ngIf=\"accountVersioning?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoVersionsMessage' | transloco\">\n </pw-no-data>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"4\">\n <a ngbNavLink>Files</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-company-files [accountId]=\"accountId\"></pw-smart-crm-company-files>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"5\" *ngIf=\"hasAccess\">\n <a ngbNavLink>Invoices</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-account-invoices [accountId]=\"accountId\"/>\n </ng-template>\n </li>\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n </div>\n </div>\n</div>\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <div class=\"row p-2\">\n <div class=\"col-12\">\n <div class=\"upload-box\">\n <div class=\"upload-box-content\">\n <div class=\"drop-container\"\n ngFileDrop\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\">\n <p>\n Drag files here or\n <label class=\"upload-button\">\n <input type=\"file\"\n ngFileSelect\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\"\n multiple />\n browse\n </label>\n to upload.\n </p>\n </div>\n <div class=\"upload-item\"\n *ngFor=\"let f of files; let i = index\">\n <div class=\"upload-item-content\">\n <div class=\"filename\">\n <div class=\"filename-left\">\n <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n <span>{{ f.name }}</span>\n </div>\n </div>\n <div class=\"progress-content\">\n <div class=\"progress\">\n <span class=\"bar\"\n [style.width]=\"f?.progress?.data?.percentage + '%'\"\n [class.is-done]=\"f['uploaded']\"></span>\n </div>\n </div>\n <div class=\"progress-text-content\">\n <span class=\"progress-text\"\n [class.is-done]=\"f['uploaded']\">\n <span *ngIf=\"!f['uploaded']\">{{ f.progress?.data?.percentage - 1 }}%\n </span>\n <span *ngIf=\"f['uploaded']\">100 %</span>\n <span *ngIf=\"!f['uploaded']\">Uploading...</span>\n <span *ngIf=\"f['uploaded']\">Done</span>\n </span>\n <span class=\"speed-and-eta-text\"\n *ngIf=\"f.progress?.data?.percentage !== 0 && !f['uploaded']\">\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}::ng-deep .p-overlay{width:100%!important;min-width:100%!important;max-width:100%!important;left:0!important}::ng-deep .p-autocomplete-items li{white-space:nowrap!important;overflow:auto!important;text-overflow:ellipsis!important}::ng-deep .p-autocomplete-items li:hover{text-overflow:clip!important}.name-block{width:85%}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.auto-complete{display:none;margin-top:10px}.show-controls .comment-field,.show-controls .auto-complete,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn,.show-controls .action-owner{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled input,.isDisabled textarea,.isDisabled p-dropdown,.isDisabled select{pointer-events:none}.isDisabled select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none!important}.timeline-card.card{min-height:auto}@media (max-width: 768px){.completed-toggle{padding-top:10px}}.when-btn:focus{border:0;box-shadow:none}.no-actions{clear:both}.timeline-container{height:700px;overflow-y:scroll}.action-btn.active{color:#fff!important;background-color:var(--first)}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"] }]
|
|
1282
|
+
args: [{ selector: 'pw-smart-crm-company-info', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 mb-0\">\n <div class=\"me-auto mb-0\">\n <h2 class=\"mb-0\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"back()\"\n class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n Account Info\n </h2>\n </div>\n <a class=\"btn btn-sm btn-outline-primary float-end mb-3\"\n data-cy=\"add-opportunities\"\n (click)=\"navigateToAddOpportunities()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n </div>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isDataLoaded\">\n <p-progressSpinner> </p-progressSpinner>\n </div>\n <div *ngIf=\"isDataLoaded\">\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"user-info p-3 card pb-0 h-auto\">\n <div class=\"mb-2 text-center\">\n <a class=\"profile-image\">\n <img alt=\"Profile Logo\"\n width=\"100\"\n height=\"100\"\n [src]=\"getAccountLogo(data?.company_url)\"\n class=\"img-fluid company-logo\"\n (error)=\"handleImageError($event, 'assets/img/icons/company.png')\" />\n </a>\n </div>\n <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n <h4 class=\"d-inline-block name-block\">\n About <span *ngIf=\"data?.id\">{{ data.name }}</span>\n </h4>\n <a href=\"#\"\n *ngIf=\"isFormEdit && (userId === data?.owner?.id || hasAccess)\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"$event.preventDefault(); isFormEdit = !isFormEdit; this.getAllSubscriptionMembers()\">{{ 'Button.Edit' | transloco }}</a>\n </div>\n <form [formGroup]=\"aboutControls\"\n [class.isDisabled]=\"isFormEdit\">\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"name\">{{ 'Crm.AccountMessage.Name' | transloco }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"Location\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</label>\n <input ngx-gp-autocomplete\n class=\"form-control rounded-0 ps-1 user-value\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n (onAddressChange)=\"handleAddressChange($event)\"\n [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"countries$ | async as countries\">\n <label for=\"country\">{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </label>\n <p-dropdown\n [options]=\"countries\"\n formControlName=\"country\"\n [ngClass]=\"{ 'is-invalid': submitted && f['country'].errors }\"\n [placeholder]=\"'Select Country'\"\n optionValue=\"code\"\n optionLabel=\"name\">\n </p-dropdown>\n </div>\n <div class=\"mb-3 ui-fluid skills-modal\">\n <label class=\"label mb-2\" for=\"Message\">{{ 'Crm.AccountMessage.Owner' | transloco }}</label>\n <p class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.owner_id\">\n {{ data?.owner?.first_name }} {{ data?.owner?.last_name }}\n </p>\n <p-autoComplete *ngIf=\"!isFormEdit || !data?.owner_id\"\n [suggestions]=\"filteredOwner\"\n formControlName=\"owner_id\"\n dataKey=\"id\"\n field=\"displayName\"\n [dropdown]=\"true\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n placeholder=\"Search owner\"\n [multiple]=\"false\">\n </p-autoComplete>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"CompanyUrl\">{{\n 'Crm.AccountMessage.CompanyUrl' | transloco\n }}</label>\n <a [href]=\"data?.company_url\"\n target=\"blank\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.company_url\">{{ data?.company_url }}</a>\n <input *ngIf=\"!isFormEdit || !data?.company_url\"\n type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"company_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"data?.tel\">\n <label class=\"label mb-0\" for=\"AccountMessage\">{{ 'Crm.AccountMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"tel\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationTypes$ | async as types\">\n <label for=\"organizationType\">{{ 'Organization.OrganizationType' | transloco }}</label>\n <p-dropdown\n [options]=\"types['organization_types']\"\n formControlName=\"organization_type_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_type_id'].errors }\"\n [placeholder]=\"'Select Organization Type'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-dropdown>\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationIndustries$ | async as industries\">\n <label for=\"file\">{{ 'Organization.OrganizationIndustry' | transloco }}</label>\n <p-dropdown\n [options]=\"industries['organization_industries']\"\n formControlName=\"organization_industry_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_industry_id'].errors }\"\n [placeholder]=\"'Select Industry'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-dropdown>\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationSizes$ | async as sizes\">\n <label for=\"size\">{{ 'Crm.AccountMessage.Size' | transloco }}</label>\n <p-dropdown\n [options]=\"sizes['organization_sizes']\"\n formControlName=\"organization_size_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_size_id'].errors }\"\n [placeholder]=\"'Select Size'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-dropdown>\n </div>\n <div class=\"mb-3\">\n <label for=\"status\">{{ 'Crm.AccountMessage.Status' | transloco }}</label>\n <p-dropdown\n [options]=\"status\"\n formControlName=\"status\"\n [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\"\n [placeholder]=\"'Select Status'\">\n </p-dropdown>\n </div>\n <div class=\"mb-3\">\n <label for=\"priority\">{{ 'Crm.AccountMessage.Priority' | transloco }}</label>\n <p-dropdown\n [options]=\"priority\"\n formControlName=\"priority\"\n [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\"\n [placeholder]=\"'Select Priority'\">\n </p-dropdown>\n </div>\n <div class=\"mb-3\">\n <label for=\"message\">{{ 'Crm.AccountMessage.Source' | transloco }}</label>\n <p-dropdown\n [options]=\"source\"\n formControlName=\"crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\"\n [placeholder]=\"'Select Source'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-dropdown>\n </div>\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Crm.AccountMessage.Description' | transloco\"\n name=\"description\">\n <textarea rows=\"5\"\n type=\"text\"\n class=\"form-control\"\n formControlName=\"description\"\n id=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\"></textarea>\n </pw-input-container>\n </div>\n <div *ngIf=\"!isFormEdit\"\n class=\"text-end form-action-buttons\">\n <input type=\"button\"\n class=\"btn btn-outline-primary\"\n (click)=\"isFormEdit = !isFormEdit; getAccountDetails()\"\n value=\"Cancel\" />\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary ms-3\"\n (click)=\"updateAccountInfo()\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </form>\n </div>\n </div>\n <div class=\"col-12 col-md-8\">\n <ul ngbNav\n #nav=\"ngbNav\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Notes</a>\n <ng-template ngbNavContent>\n <form [formGroup]=\"actionControls\"\n (ngSubmit)=\"onSave()\">\n <textarea class=\"form-control\"\n formControlName=\"comment\"\n rows=\"6\"></textarea>\n <p class=\"text-danger\"\n *ngIf=\"\n actionControls.get('comment').touched &&\n actionControls.get('comment').invalid\n \">\n Note Required\n </p>\n <div *ngIf=\"actions?.length\"\n class=\"d-block clear-both pt-3\">\n <ng-container *ngFor=\"let action of actions; index as i\">\n <button *ngIf=\"action.visible\"\n type=\"button\"\n [class.active]=\"\"\n class=\"btn btn-sm me-2 btn-outline-primary mb-2 action-btn\"\n (click)=\"showDatePicker($event, action.id); d.toggle()\">\n {{ action.name }}\n </button>\n </ng-container>\n <div class=\"text-danger\"\n *ngIf=\"submitAction && actionControls.get('crm_action_id').invalid\">\n Please select an action\n </div>\n <div class=\"row mt-3\">\n <div class=\"col-12 col-sm-4\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (click)=\"d.toggle()\" />\n </div>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4 ps-0\">\n <p-autoComplete [suggestions]=\"filteredContact\"\n formControlName=\"crm_contact_id\"\n dataKey=\"id\"\n field=\"displayName\"\n [dropdown]=\"true\"\n (completeMethod)=\"searchContact($event)\"\n (onSelect)=\"selectContact($event)\"\n (onBlur)=\"OnContactBlur()\"\n styleClass=\"w-100\"\n placeholder=\"Search contact\"\n [multiple]=\"false\"\n (onDropdownClick)=\"onDropdownClick()\">\n </p-autoComplete>\n </div>\n <div class=\"col-sm-4 pe-0 completed-toggle\">\n <div class=\"mb-3\">\n <ui-switch checkedLabel=\"completed\"\n uncheckedLabel=\"open\"\n formControlName=\"completed\"\n name=\"completed\">\n </ui-switch>\n </div>\n </div>\n </div>\n </div>\n <div class=\"float-end\">\n <a class=\"btn btn-outline-primary me-0 me-sm-2\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n [disabled]=\"buttonDisable\"\n class=\"btn btn-primary mt-2 mb-2\">Submit Note</button>\n </div>\n <div *ngIf=\"buttonDisable\"\n class=\"no-actions pt-4\">\n <pw-no-data [withImage]=\"true\" [message]=\"\n 'Crm.AccountMessage.NoActionsInAccountInfoMessage' | transloco\n \">\n </pw-no-data>\n </div>\n </form>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div *ngIf=\"!accountComments?.length && isLoaded\"\n class=\"no-actions pt-2\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoActionsMessage' | transloco\">\n </pw-no-data>\n </div>\n <div *ngIf=\"accountComments?.length\">\n <div id=\"timeline\"\n class=\"pt-3 clear-both timeline-center timeline-wrapper timeline-container\"\n infiniteScroll\n [infiniteScrollDistance]=\"2\"\n [infiniteScrollThrottle]=\"50\"\n [infiniteScrollContainer]=\"selector\"\n [fromRoot]=\"true\"\n (scrolled)=\"onScrollTimeline()\">\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n </ul>\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd || last }\"\n *ngFor=\"\n let item of accountComments;\n index as i;\n let odd = odd;\n let even = even;\n let last = last;\n let first = first\n \">\n <div class=\"timeline-badge\">\n <span class=\"bg-red bg-lighten-1\">\n <span class=\"timeline-year\">\n <span class=\"d-block date-year\">{{\n item.when | date: 'medium' | slice: 0:3\n }}</span>\n <span>{{ item.year }}</span></span>\n </span>\n </div>\n <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n <div class=\"card-header py-4\">\n <div class=\"mb-0 clearfix\">\n <textarea type=\"text\"\n name=\"comment\"\n class=\"comment-field form-control p-0\"\n [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n <div class=\"auto-complete mb-3 ui-fluid skills-modal\">\n <p-autoComplete [(ngModel)]=\"item.crm_contact\"\n [suggestions]=\"filteredContactComment\"\n dataKey=\"id\"\n field=\"first_name\"\n dropdown=\" true \"\n (completeMethod)=\"\n searchContactInComment($event)\n \"\n (onSelect)=\"selectCommentContact($event)\"\n (onBlur)=\"OnContactBlur()\"\n styleClass=\" w-100 \"\n placeholder=\" Search contact \"\n [multiple]=\"false\"\n (onDropdownClick)=\"onDropdownClick()\">\n </p-autoComplete>\n </div>\n <p class=\"float-start mb-0\"\n *ngIf=\"\n !showFullComment || item.id !== commentId\n \">\n {{ item.comment | slice: 0:170\n }}<a *ngIf=\"item.comment.length > 170\"\n class=\"text-secondary\"\n (click)=\"\n showFullComment = true;\n commentId = item.id\n \">...show more\n </a>\n </p>\n <p class=\"float-start mb-0\"\n *ngIf=\"showFullComment && item.id === commentId\">\n {{ item.comment }}\n <a *ngIf=\"\n item.comment.length > 170 &&\n showFullComment\n \"\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n </p>\n <button class=\"btn btn-md edit-btn float-end py-0\"\n (click)=\"showEditControls($event, item)\"\n *ngIf=\"userId === item.owner_id || hasAccess\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <div class=\"card-subtitle text-muted my-0 clearfix\">\n <div class=\"float-start\">\n <span *ngIf=\"!updating || actionId !== item.id\"\n class=\"font-small-3\">\n {{ item.when }}</span>\n <input *ngIf=\"updating && actionId === item.id\"\n placeholder=\"dd-mmm-yyyy\"\n value=\"{{ item.when }}\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\" />\n </div>\n <button type=\" button\"\n class=\"btn btn-sm float-end when-btn py-0\"\n *ngIf=\"userId === item.owner_id || hasAccess\"\n (click)=\"showDatePickerUpdate(item.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <p [class.text-danger]=\"!item.color\"\n *ngIf=\"!item.cancelled && !item.completed\"\n class=\"mb-0\">\n {{ item.due }}\n </p>\n <a class=\"text-secondary action-owner\"\n *ngIf=\"item.crm_contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n item.crm_contact.id\n ]\">{{ item.crm_contact.first_name }}\n {{ item.crm_contact.last_name || '' }}</a>\n <p>\n By\n {{\n item.owner.first_name +\n ' ' +\n item.owner.last_name\n }}\n </p>\n <span class=\"badge bg-primary\">{{\n item?.crm_action?.name\n }}</span>\n <span *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n class=\"badge bg-success ms-2\">Open</span>\n <a *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as completed\"\n aria-label=\"Set as completed\"\n class=\"me-3 ms-3\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \">\n <i\n class=\"fa fa-tasks completed\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <a *ngIf=\"\n !item.cancelled &&\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as cancelled\"\n aria-label=\"Set as cancelled\"\n href=\"#\"\n (click)=\"$event.preventDefault(); setAsCancelled(item.id, item)\">\n <i\n class=\"fa fa-times delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <a *ngIf=\"\n item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as UnCompleted\"\n aria-label=\"Set as UnCompleted\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \"\n class=\"ms-2\">\n <i\n class=\"far fa-window-close\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <div class=\"control-btns mt-3 text-end form-action-buttons\">\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-default me-2\"\n (click)=\"showEditControls(undefined, '')\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button class=\"btn btn-sm btn-primary\"\n type=\"button\"\n (click)=\"updateComment(item)\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\" *ngIf=\"canViewContactsTab()\">\n <a ngbNavLink>Contacts</a>\n <ng-template ngbNavContent>\n <div class=\"row\">\n <div class=\"col-12 mb-3\">\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactAdd,\n accountId\n ]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n </div>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <p-table class=\"table\"\n #dt\n [value]=\"contacts\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [lazy]=\"true\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input type=\"text\"\n [(ngModel)]=\"searchText\"\n pInputText\n size=\"50\"\n placeholder=\"Search contact...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"mw-90\" />\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Label.Name' | transloco }}\n <p-sortIcon field=\"first_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"owner_id\">\n {{ 'Crm.ContactMessage.ContactOwner' | transloco }}\n <p-sortIcon field=\"owner_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"headline\">\n {{ 'Crm.ContactMessage.Headline' | transloco }}\n <p-sortIcon field=\"headline\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_logged_in_at\">\n Last Seen At\n <p-sortIcon field=\"last_logged_in_at\"></p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-contact>\n <tr>\n <td data-head=\"Name\"\n class=\"contactname\">\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n contact.id\n ]\"> {{ (contact.first_name || '') + ' ' + (contact.last_name || '') | textTruncate: 20 }}</a>\n </td>\n <td data-head=\"OwnerName\">\n {{ contact.owner | ifNameNullShowEmail }}\n </td>\n <td data-head=\"Headline\"\n class=\"headline-content\">\n {{ contact?.headline | textTruncate: 20 }}\n </td>\n <td data-head=\"LastSeenAt\">\n <ng-container *ngIf=\"contact?.last_logged_in_at\">\n <span [ngClass]=\"lastSeenAtTextClass(contact?.last_logged_in_at)\">\n {{ contact?.last_logged_in_at | dateFormat }}\n </span>\n </ng-container>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Show\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n contact.id\n ]\">\n <i\n class=\"fa fa-eye see-icon\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Add opportunity\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' +\n subscription?.slug +\n routers.opportunityAdd\n ]\"\n [queryParams]=\"{ contact_id: contact.id }\">\n <i\n class=\"fa fa-plus-circle add-icon\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' +\n subscription?.slug +\n routers.contactDetails,\n contact.id\n ]\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (keydown.enter)=\"onDeleteContact(contact.id)\"\n (keydown.space)=\"onDeleteContact(contact.id)\"\n (click)=\"onDeleteContact(contact.id)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <div *ngIf=\"totalRecords === 0 && totalRecordsUnFiltered !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n </div>\n <div *ngIf=\"totalRecordsUnFiltered === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\">\n </pw-no-data>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\" *ngIf=\"hasAccess\">\n <a ngbNavLink>Versioning</a>\n <ng-template ngbNavContent>\n <div *ngFor=\"let versioning of accountVersioning\">\n <p>\n <strong>Event: </strong>{{ versioning.event }} |\n <strong>Author: </strong><a *ngIf=\"versioning?.author\"\n [routerLink]=\"['/members', versioning?.author?.slug]\">{{ versioning?.author | ifNameNullShowEmail }}</a>\n | <strong>Created at: </strong>{{ versioning.created_at | dateFormat: 'datetime' }}<br />\n <strong>Object: </strong>{{ versioning.object | json }}\n </p>\n <hr />\n </div>\n <div *ngIf=\"accountVersioning?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoVersionsMessage' | transloco\">\n </pw-no-data>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"4\">\n <a ngbNavLink>Files</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-company-files [accountId]=\"accountId\"></pw-smart-crm-company-files>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"5\" *ngIf=\"hasAccess\">\n <a ngbNavLink>Invoices</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-account-invoices [accountId]=\"accountId\"/>\n </ng-template>\n </li>\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n </div>\n </div>\n</div>\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <div class=\"row p-2\">\n <div class=\"col-12\">\n <div class=\"upload-box\">\n <div class=\"upload-box-content\">\n <div class=\"drop-container\"\n ngFileDrop\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\">\n <p>\n Drag files here or\n <label class=\"upload-button\">\n <input type=\"file\"\n ngFileSelect\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\"\n multiple />\n browse\n </label>\n to upload.\n </p>\n </div>\n <div class=\"upload-item\"\n *ngFor=\"let f of files; let i = index\">\n <div class=\"upload-item-content\">\n <div class=\"filename\">\n <div class=\"filename-left\">\n <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n <span>{{ f.name }}</span>\n </div>\n </div>\n <div class=\"progress-content\">\n <div class=\"progress\">\n <span class=\"bar\"\n [style.width]=\"f?.progress?.data?.percentage + '%'\"\n [class.is-done]=\"f['uploaded']\"></span>\n </div>\n </div>\n <div class=\"progress-text-content\">\n <span class=\"progress-text\"\n [class.is-done]=\"f['uploaded']\">\n <span *ngIf=\"!f['uploaded']\">{{ f.progress?.data?.percentage - 1 }}%\n </span>\n <span *ngIf=\"f['uploaded']\">100 %</span>\n <span *ngIf=\"!f['uploaded']\">Uploading...</span>\n <span *ngIf=\"f['uploaded']\">Done</span>\n </span>\n <span class=\"speed-and-eta-text\"\n *ngIf=\"f.progress?.data?.percentage !== 0 && !f['uploaded']\">\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}::ng-deep .p-overlay{width:100%!important;min-width:100%!important;max-width:100%!important;left:0!important}::ng-deep .p-autocomplete-items li{white-space:nowrap!important;overflow:auto!important;text-overflow:ellipsis!important}::ng-deep .p-autocomplete-items li:hover{text-overflow:clip!important}.name-block{width:85%}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.auto-complete{display:none;margin-top:10px}.show-controls .comment-field,.show-controls .auto-complete,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn,.show-controls .action-owner{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled input,.isDisabled textarea,.isDisabled p-dropdown,.isDisabled select{pointer-events:none}.isDisabled select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none!important}.timeline-card.card{min-height:auto}@media (max-width: 768px){.completed-toggle{padding-top:10px}}.when-btn:focus{border:0;box-shadow:none}.no-actions{clear:both}.timeline-container{height:700px;overflow-y:scroll}.action-btn.active{color:#fff!important;background-color:var(--first)}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"] }]
|
|
1283
1283
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i2.SubscriptionService }, { type: i2.GeoService }, { type: i2.CommonService }, { type: i2$2.NgbModal }, { type: i2.AuthService }, { type: i0.ChangeDetectorRef }, { type: i2.LogoCacheService }, { type: Document, decorators: [{
|
|
1284
1284
|
type: Inject,
|
|
1285
1285
|
args: [DOCUMENT]
|
|
@@ -1618,11 +1618,11 @@ class SmartCrmCompaniesComponent extends AppBaseComponent {
|
|
|
1618
1618
|
super.ngOnDestroy();
|
|
1619
1619
|
}
|
|
1620
1620
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SmartCrmCompaniesComponent, deps: [{ token: i1.CrmService }, { token: i2.CommonService }, { token: i2.LogoCacheService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1621
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: SmartCrmCompaniesComponent, isStandalone: false, selector: "pw-smart-crm-companies", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <h2>Accounts</h2>\n <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Crm.AccountMessage.AddAccount' | transloco }} </a>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt [value]=\"data.accounts\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\" [loading]=\"loading\" [filterDelay]=\"1000\" (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row m-0\">\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Industry\" [options]=\"searchOptions\" [(ngModel)]=\"filterByIndustries\"\n (onChange)=\"onSearchOptionChange($event, 'industry')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Size\" [options]=\"organizationSizes\" [(ngModel)]=\"filterBySizeId\"\n (onChange)=\"onSearchOptionChange($event, 'size')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Status\" [options]=\"status\" [(ngModel)]=\"filterByStatus\"\n (onChange)=\"onSearchOptionChange($event, 'status')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Priority\" [options]=\"priority\" [(ngModel)]=\"filterByPriority\"\n (onChange)=\"onSearchOptionChange($event, 'priority')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Source\" [options]=\"source\" [(ngModel)]=\"filterBySource\"\n (onChange)=\"onSearchOptionChange($event, 'source')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4 mb-2\">\n <input ngx-gp-autocomplete class=\"form-control location\" #places=\"ngx-places\" [(ngModel)]=\"searchLocationText\"\n placeholder=\"Search location...\" (keyup)=\"locationSearch($event)\"\n (onAddressChange)=\"handleAddressChange($event)\" />\n </div>\n </div>\n <div class=\"search-filter\">\n <a class=\"mt-3 ms-3 text-start btn-filter-primary\" (click)=\"clearFilters()\">Clear all filters</a>\n <div class=\"text-end mt-0 mt-sm-3\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input type=\"text\" [(ngModel)]=\"searchText\" pInputText size=\"50\" placeholder=\"Search accounts...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"mw-90\" />\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\" pSortableColumn=\"name\"> {{ 'Crm.AccountMessage.Name' | transloco }} <p-sortIcon field=\"name\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"location\"> {{ 'Crm.AccountMessage.Location' | transloco }} <p-sortIcon\n field=\"location\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"owner_id\"> {{ 'Crm.AccountMessage.Owner' | transloco }} <p-sortIcon\n field=\"owner_id\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"organization_size_id\"> {{ 'Crm.AccountMessage.Size' | transloco }} <p-sortIcon\n field=\"organization_size_id\"></p-sortIcon>\n </th>\n <th *ngIf=\"canViewMrr || userId\" scope=\"true\" pSortableColumn=\"expected_mrr\" class=\"mrr-header\"> {{ 'Crm.AccountMessage.MRR' | transloco }} <p-sortIcon field=\"expected_mrr\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"signed_up_at\"> {{ 'Crm.AccountMessage.SignUpAt' | transloco }} <p-sortIcon field=\"signed_up_at\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"last_logged_in_at\"> Last Seen At <p-sortIcon field=\"last_logged_in_at\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"sessions_last_quarter\"> {{ 'Crm.AccountMessage.Quarter' | transloco }} <p-sortIcon field=\"sessions_last_quarter\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"sessions_last_month\"> {{ 'Crm.AccountMessage.Month' | transloco }} <p-sortIcon field=\"sessions_last_month\">\n </p-sortIcon>\n <th scope=\"true\" pSortableColumn=\"status\"> {{ 'Crm.AccountMessage.Status' | transloco }} <p-sortIcon field=\"status\">\n </p-sortIcon>\n <th scope=\"true\" pSortableColumn=\"priority\"> {{ 'Crm.AccountMessage.Priority' | transloco }} <p-sortIcon field=\"priority\">\n </p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-account let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) - show before first data row -->\n <ng-container *ngIf=\"i === 0 && data?.accounts?.length\">\n <tr class=\"totals-row \">\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n <td *ngIf=\"canViewMrr\" class=\"fw-bold expected-mrr\">\n <strong>{{ totals?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n <td></td>\n <td></td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_quarter }}</strong>\n </td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_month }}</strong>\n </td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n </ng-container>\n <!-- Regular data row -->\n <tr>\n <td data-head=\"Name\" class=\"name-column\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.id]\" class=\"name-link\">\n <pw-clearbit-icon [src]=\"account.company_url\" altText=\"Company Logo\"></pw-clearbit-icon>\n <span [ngbTooltip]=\"account.name\" class=\"account-name\" [title]=\"account.name\">{{ account.name | textTruncate:30 }}</span>\n <i [ngClass]=\"getUserAccountInfo(account).iconClass\" [ngbTooltip]=\"getUserAccountInfo(account).message\"\n class=\"info-icon\"></i>\n <i class=\"fas fa-exclamation-circle text-danger info-icon\"\n *ngIf=\"account?.reason_to_cancel\"\n [pTooltip]=\"account.reason_to_cancel\"\n tooltipPosition=\"top\"></i>\n </a>\n </td>\n <td data-head=\"Location\" class=\"no-wrap\"><span [ngbTooltip]=\"account.location\">{{ getCountryFromLocation(account.location) }}</span></td>\n <td data-head=\"Owner\">\n <a [routerLink]=\"['/members', account?.owner?.slug]\"> {{ account.owner.first_name.charAt(0) }}. {{account.owner.last_name}}</a>\n </td>\n <td data-head=\"Size\" class=\"no-wrap\">{{ account?.organisation_size?.name !== 'Not available' ? account?.organisation_size?.name : '' }}\n</td>\n<td *ngIf=\"canViewMrr || account.owner_id === userId\" data-head=\"MRR\" class=\"no-wrap fw-bold expected-mrr\" >\n <span *ngIf=\"account.expected_mrr && (canViewMrr || account.owner_id === userId)\">\n {{ account.expected_mrr / 100 | currency: account.main_currency }}\n </span>\n</td>\n <td data-head=\"Signed Up\">{{ account.signed_up_at | date: 'dd-MMM-YYYY' }}</td>\n <td data-head=\"Last Seen At\">\n <ng-container *ngIf=\"account?.last_logged_in_at\">\n <span [ngClass]=\"lastSeenAtTextClass(account?.last_logged_in_at)\">\n {{ account?.last_logged_in_at | dateFormat }}\n </span>\n </ng-container>\n </td>\n <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 5}\">{{ account.sessions_last_month }}</td>\n <td data-head=\"Status\">\n <span *ngIf=\"account.status === 'Prospect'\" class=\"badge bg-primary\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Trial - Active'\" class=\"badge bg-success\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Trial - Inactive'\" class=\"badge bg-secondary\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - New'\" class=\"badge bg-info\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - Active'\" class=\"badge bg-success\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - Inactive'\" class=\"badge bg-warning\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - Old'\" class=\"badge bg-dark\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Dead'\" class=\"badge bg-danger\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Competitor'\" class=\"badge bg-danger\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Vendor'\" class=\"badge bg-blue-grey\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Supplier'\" class=\"badge bg-blue-grey\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Other'\" class=\"badge bg-teal\">{{account.status}}</span>\n </td>\n\n <td data-head=\"Priority\">\n <span *ngIf=\"account.priority === 'A - Ideal Fit'\" class=\"badge bg-success\">{{account.priority}}</span>\n <span *ngIf=\"account.priority === 'B - High Potential'\" class=\"badge bg-primary\">{{account.priority}}</span>\n <span *ngIf=\"account.priority === 'C - Low Potential'\" class=\"badge bg-warning\">{{account.priority}}</span>\n <span *ngIf=\"account.priority === 'D - Out of market'\" class=\"badge bg-secondary\">{{account.priority}}</span>\n </td>\n\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"See contacts\" class=\"me-2 me-sm-3 see-icon\"\n [routerLink]=\"['/' + subscription?.slug + routers.accountContacts, account.id]\">\n <i class=\"fa fa-eye\" aria-hidden=\"true\"></i>\n </li>\n <ng-container *ngIf=\"hasAccess || account.owner_id === userId\">\n <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" [routerLink]=\"[\n '/' + subscription?.slug + routers.accounts,\n account.id\n ]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n <i class=\"fa fa-trash delete-icon\" (keydown.enter)=\"onDelete(account.id, subscription.id)\"\n (keydown.space)=\"onDelete(account.id, subscription.id)\"\n (click)=\"onDelete(account.id, subscription.id)\"\n aria-hidden=\"true\"></i>\n </li>\n </ng-container>\n </ul>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"footer\">\n <tr *ngIf=\"data?.accounts?.length\">\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n <td *ngIf=\"canViewMrr\" class=\"expected-mrr\">\n <strong>{{ totals?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n <td></td>\n <td></td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_quarter }}</strong>\n </td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_month }}</strong>\n </td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n </ng-template>\n </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n</div>\n <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoAccountMessage' | transloco\"> </pw-no-data>\n</div>\n<ng-container>\n <div class=\"row mt-5\" *ngIf=\"data.unfiltered_count !== 0 && isLoaded\">\n <!-- Last Activities -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Latest Activities</h5>\n <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountActivities?.length\">\n <p-table class=\"table\" #dt [value]=\"accountActivities\" [paginator]=\"accountInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"accountActivities.length\" [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Action' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.When' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-activities>\n <tr>\n <td data-head=\"Owner\"> {{ activities.owner?.first_name.charAt(0) }}. {{ activities.owner?.last_name }} </td>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, activities.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"activities.crm_account?.name\">{{ activities.crm_account?.name }}</span>\n </a>\n </td>\n <td data-head=\"Contact\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, activities.crm_contact_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"activities.crm_contact ? activities.crm_contact.first_name + ' ' + activities.crm_contact.last_name : ''\">{{ (activities.crm_contact?.first_name + ' ' + activities.crm_contact?.last_name) | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Action\">\n <span [ngbTooltip]=\"activities.comment\" [appDynamicBadge]=\"{\n itemsArray: actionNames,\n item: activities.crm_action?.name\n }\"\n color=\"blue-grey\"\n class=\"badge\">{{ activities.crm_action?.name }}</span>\n </td>\n <td data-head=\"When\">{{ activities.when | date:'dd-MMM-YYYY' }}</td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"accountInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountActivities.length }}</span>\n </div>\n <div *ngIf=\"accountActivities?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Accounts Location</h5>\n <div>\n <ng-template [ngIf]=\"accountGeography\">\n <plotly-plot [data]=\"accountGeography?.data\" [layout]=\"accountGeography?.layout\" [config]=\"accountGeography?.config\" [useResizeHandler]=\"accountGeography ? true : false\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"!accountGeography\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.location{background-color:#fff}.company-logo{height:20px;width:20px}::ng-deep .ui-multiselect{display:inline-block}::ng-deep body .ui-multiselect .ui-multiselect-label{font-weight:700}.name-column{text-align:left}.account-name{margin-right:5px}.info-icon{vertical-align:middle;margin-left:5px}.account-link-icon{color:gray}.money-icon{color:green;font-size:.85em;background-color:#90ee90;border-radius:50%;padding:5px;width:18.5px;box-shadow:0 0 10px #00800080}.icon-ul{width:111px}.no-wrap{word-break:keep-all;white-space:pre-line}.totals-row{background-color:#f8f9fa;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i7.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i8.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i9.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i8.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i10.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11$1.ClearBitIconComponent, selector: "pw-clearbit-icon", inputs: ["src", "altText", "dummyPath"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i16.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i15.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i11$2.TranslocoPipe, name: "transloco" }] }); }
|
|
1621
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: SmartCrmCompaniesComponent, isStandalone: false, selector: "pw-smart-crm-companies", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <h2>Accounts</h2>\n <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Crm.AccountMessage.AddAccount' | transloco }} </a>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt [value]=\"data.accounts\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\" [loading]=\"loading\" [filterDelay]=\"1000\" (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row m-0\">\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Industry\" [options]=\"searchOptions\" [(ngModel)]=\"filterByIndustries\"\n (onChange)=\"onSearchOptionChange($event, 'industry')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Size\" [options]=\"organizationSizes\" [(ngModel)]=\"filterBySizeId\"\n (onChange)=\"onSearchOptionChange($event, 'size')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Status\" [options]=\"status\" [(ngModel)]=\"filterByStatus\"\n (onChange)=\"onSearchOptionChange($event, 'status')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Priority\" [options]=\"priority\" [(ngModel)]=\"filterByPriority\"\n (onChange)=\"onSearchOptionChange($event, 'priority')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Source\" [options]=\"source\" [(ngModel)]=\"filterBySource\"\n (onChange)=\"onSearchOptionChange($event, 'source')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4 mb-2\">\n <input ngx-gp-autocomplete class=\"form-control location\" #places=\"ngx-places\" [(ngModel)]=\"searchLocationText\"\n placeholder=\"Search location...\" (keyup)=\"locationSearch($event)\"\n (onAddressChange)=\"handleAddressChange($event)\" />\n </div>\n </div>\n <div class=\"search-filter\">\n <a class=\"mt-3 ms-3 text-start btn-filter-primary\" (click)=\"clearFilters()\">Clear all filters</a>\n <div class=\"text-end mt-0 mt-sm-3\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input type=\"text\" [(ngModel)]=\"searchText\" pInputText size=\"50\" placeholder=\"Search accounts...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"mw-90\" />\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\" pSortableColumn=\"name\"> {{ 'Crm.AccountMessage.Name' | transloco }} <p-sortIcon field=\"name\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"location\"> {{ 'Crm.AccountMessage.Location' | transloco }} <p-sortIcon\n field=\"location\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"owner_id\"> {{ 'Crm.AccountMessage.Owner' | transloco }} <p-sortIcon\n field=\"owner_id\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"organization_size_id\"> {{ 'Crm.AccountMessage.Size' | transloco }} <p-sortIcon\n field=\"organization_size_id\"></p-sortIcon>\n </th>\n <th *ngIf=\"canViewMrr || userId\" scope=\"true\" pSortableColumn=\"expected_mrr\" class=\"mrr-header\"> {{ 'Crm.AccountMessage.MRR' | transloco }} <p-sortIcon field=\"expected_mrr\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"signed_up_at\"> {{ 'Crm.AccountMessage.SignUpAt' | transloco }} <p-sortIcon field=\"signed_up_at\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"last_logged_in_at\"> Last Seen At <p-sortIcon field=\"last_logged_in_at\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"sessions_last_quarter\"> {{ 'Crm.AccountMessage.Quarter' | transloco }} <p-sortIcon field=\"sessions_last_quarter\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"sessions_last_month\"> {{ 'Crm.AccountMessage.Month' | transloco }} <p-sortIcon field=\"sessions_last_month\">\n </p-sortIcon>\n <th scope=\"true\" pSortableColumn=\"status\"> {{ 'Crm.AccountMessage.Status' | transloco }} <p-sortIcon field=\"status\">\n </p-sortIcon>\n <th scope=\"true\" pSortableColumn=\"priority\"> {{ 'Crm.AccountMessage.Priority' | transloco }} <p-sortIcon field=\"priority\">\n </p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-account let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) - show before first data row -->\n <ng-container *ngIf=\"i === 0 && data?.accounts?.length\">\n <tr class=\"totals-row \">\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n <td *ngIf=\"canViewMrr\" class=\"fw-bold expected-mrr\">\n <strong>{{ totals?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n <td></td>\n <td></td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_quarter }}</strong>\n </td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_month }}</strong>\n </td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n </ng-container>\n <!-- Regular data row -->\n <tr>\n <td data-head=\"Name\" class=\"name-column\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.id]\" class=\"name-link\">\n <pw-clearbit-icon [src]=\"account.company_url\" altText=\"Company Logo\"></pw-clearbit-icon>\n <span [ngbTooltip]=\"account.name\" class=\"account-name\" [title]=\"account.name\">{{ account.name | textTruncate:30 }}</span>\n <i [ngClass]=\"getUserAccountInfo(account).iconClass\" [ngbTooltip]=\"getUserAccountInfo(account).message\"\n class=\"info-icon\"></i>\n <i class=\"fas fa-exclamation-circle text-danger info-icon\"\n *ngIf=\"account?.reason_to_cancel\"\n [pTooltip]=\"account.reason_to_cancel\"\n tooltipPosition=\"top\"></i>\n </a>\n </td>\n <td data-head=\"Location\" class=\"no-wrap\"><span [ngbTooltip]=\"account.location\">{{ getCountryFromLocation(account.location) }}</span></td>\n <td data-head=\"Owner\">\n <a [routerLink]=\"['/members', account?.owner?.slug]\"> {{ account.owner.first_name.charAt(0) }}. {{account.owner.last_name}}</a>\n </td>\n <td data-head=\"Size\" class=\"no-wrap\">{{ account?.organisation_size?.name !== 'Not available' ? account?.organisation_size?.name : '' }}\n</td>\n<td *ngIf=\"canViewMrr || account.owner_id === userId\" data-head=\"MRR\" class=\"no-wrap fw-bold expected-mrr\" >\n <span *ngIf=\"account.expected_mrr && (canViewMrr || account.owner_id === userId)\">\n {{ account.expected_mrr / 100 | currency: account.main_currency }}\n </span>\n</td>\n <td data-head=\"Signed Up\">{{ account.signed_up_at | date: 'dd-MMM-YYYY' }}</td>\n <td data-head=\"Last Seen At\">\n <ng-container *ngIf=\"account?.last_logged_in_at\">\n <span [ngClass]=\"lastSeenAtTextClass(account?.last_logged_in_at)\">\n {{ account?.last_logged_in_at | dateFormat }}\n </span>\n </ng-container>\n </td>\n <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 5}\">{{ account.sessions_last_month }}</td>\n <td data-head=\"Status\">\n <span *ngIf=\"account.status === 'Prospect'\" class=\"badge bg-primary\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Trial - Active'\" class=\"badge bg-success\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Trial - Inactive'\" class=\"badge bg-secondary\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - New'\" class=\"badge bg-info\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - Active'\" class=\"badge bg-success\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - Inactive'\" class=\"badge bg-warning\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - Old'\" class=\"badge bg-dark\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Dead'\" class=\"badge bg-danger\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Competitor'\" class=\"badge bg-danger\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Vendor'\" class=\"badge bg-blue-grey\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Supplier'\" class=\"badge bg-blue-grey\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Other'\" class=\"badge bg-teal\">{{account.status}}</span>\n </td>\n\n <td data-head=\"Priority\">\n <span *ngIf=\"account.priority === 'A - Ideal Fit'\" class=\"badge bg-success\">{{account.priority}}</span>\n <span *ngIf=\"account.priority === 'B - High Potential'\" class=\"badge bg-primary\">{{account.priority}}</span>\n <span *ngIf=\"account.priority === 'C - Low Potential'\" class=\"badge bg-warning\">{{account.priority}}</span>\n <span *ngIf=\"account.priority === 'D - Out of market'\" class=\"badge bg-secondary\">{{account.priority}}</span>\n </td>\n\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"See contacts\" class=\"me-2 me-sm-3 see-icon\"\n [routerLink]=\"['/' + subscription?.slug + routers.accountContacts, account.id]\">\n <i class=\"fa fa-eye\" aria-hidden=\"true\"></i>\n </li>\n <ng-container *ngIf=\"hasAccess || account.owner_id === userId\">\n <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" [routerLink]=\"[\n '/' + subscription?.slug + routers.accounts,\n account.id\n ]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n <i class=\"fa fa-trash delete-icon\" (keydown.enter)=\"onDelete(account.id, subscription.id)\"\n (keydown.space)=\"onDelete(account.id, subscription.id)\"\n (click)=\"onDelete(account.id, subscription.id)\"\n aria-hidden=\"true\"></i>\n </li>\n </ng-container>\n </ul>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"footer\">\n <tr *ngIf=\"data?.accounts?.length\">\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n <td *ngIf=\"canViewMrr\" class=\"expected-mrr\">\n <strong>{{ totals?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n <td></td>\n <td></td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_quarter }}</strong>\n </td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_month }}</strong>\n </td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n </ng-template>\n </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n</div>\n <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoAccountMessage' | transloco\"> </pw-no-data>\n</div>\n<ng-container>\n <div class=\"row mt-5\" *ngIf=\"data.unfiltered_count !== 0 && isLoaded\">\n <!-- Last Activities -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Latest Activities</h5>\n <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountActivities?.length\">\n <p-table class=\"table\" #dt [value]=\"accountActivities\" [paginator]=\"accountInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"accountActivities.length\" [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Action' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.When' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-activities>\n <tr>\n <td data-head=\"Owner\"> {{ activities.owner?.first_name.charAt(0) }}. {{ activities.owner?.last_name }} </td>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, activities.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"activities.crm_account?.name\">{{ activities.crm_account?.name }}</span>\n </a>\n </td>\n <td data-head=\"Contact\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, activities.crm_contact_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"activities.crm_contact ? activities.crm_contact.first_name + ' ' + activities.crm_contact.last_name : ''\">{{ (activities.crm_contact?.first_name + ' ' + activities.crm_contact?.last_name) | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Action\">\n <span [ngbTooltip]=\"activities.comment\" [appDynamicBadge]=\"{\n itemsArray: actionNames,\n item: activities.crm_action?.name\n }\"\n color=\"blue-grey\"\n class=\"badge\">{{ activities.crm_action?.name }}</span>\n </td>\n <td data-head=\"When\">{{ activities.when | date:'dd-MMM-YYYY' }}</td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"accountInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountActivities.length }}</span>\n </div>\n <div *ngIf=\"accountActivities?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Accounts Location</h5>\n <div>\n <ng-template [ngIf]=\"accountGeography\">\n <plotly-plot [data]=\"accountGeography?.data\" [layout]=\"accountGeography?.layout\" [config]=\"accountGeography?.config\" [useResizeHandler]=\"accountGeography ? true : false\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"!accountGeography\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.location{background-color:#fff}.company-logo{height:20px;width:20px}::ng-deep .ui-multiselect{display:inline-block}::ng-deep body .ui-multiselect .ui-multiselect-label{font-weight:700}.name-column{text-align:left;word-break:keep-all;white-space:nowrap}.account-name{margin-right:5px}.info-icon{vertical-align:middle;margin-left:5px}.account-link-icon{color:gray}.money-icon{color:green;font-size:.85em;background-color:#90ee90;border-radius:50%;padding:5px;width:18.5px;box-shadow:0 0 10px #00800080}.icon-ul{width:111px}.no-wrap,.expected-mrr{word-break:keep-all;white-space:nowrap}.totals-row{background-color:#f8f9fa;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i7.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i8.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i9.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i8.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i10.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11$1.ClearBitIconComponent, selector: "pw-clearbit-icon", inputs: ["src", "altText", "dummyPath"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i16.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i15.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i11$2.TranslocoPipe, name: "transloco" }] }); }
|
|
1622
1622
|
}
|
|
1623
1623
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SmartCrmCompaniesComponent, decorators: [{
|
|
1624
1624
|
type: Component,
|
|
1625
|
-
args: [{ selector: 'pw-smart-crm-companies', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <h2>Accounts</h2>\n <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Crm.AccountMessage.AddAccount' | transloco }} </a>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt [value]=\"data.accounts\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\" [loading]=\"loading\" [filterDelay]=\"1000\" (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row m-0\">\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Industry\" [options]=\"searchOptions\" [(ngModel)]=\"filterByIndustries\"\n (onChange)=\"onSearchOptionChange($event, 'industry')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Size\" [options]=\"organizationSizes\" [(ngModel)]=\"filterBySizeId\"\n (onChange)=\"onSearchOptionChange($event, 'size')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Status\" [options]=\"status\" [(ngModel)]=\"filterByStatus\"\n (onChange)=\"onSearchOptionChange($event, 'status')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Priority\" [options]=\"priority\" [(ngModel)]=\"filterByPriority\"\n (onChange)=\"onSearchOptionChange($event, 'priority')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Source\" [options]=\"source\" [(ngModel)]=\"filterBySource\"\n (onChange)=\"onSearchOptionChange($event, 'source')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4 mb-2\">\n <input ngx-gp-autocomplete class=\"form-control location\" #places=\"ngx-places\" [(ngModel)]=\"searchLocationText\"\n placeholder=\"Search location...\" (keyup)=\"locationSearch($event)\"\n (onAddressChange)=\"handleAddressChange($event)\" />\n </div>\n </div>\n <div class=\"search-filter\">\n <a class=\"mt-3 ms-3 text-start btn-filter-primary\" (click)=\"clearFilters()\">Clear all filters</a>\n <div class=\"text-end mt-0 mt-sm-3\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input type=\"text\" [(ngModel)]=\"searchText\" pInputText size=\"50\" placeholder=\"Search accounts...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"mw-90\" />\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\" pSortableColumn=\"name\"> {{ 'Crm.AccountMessage.Name' | transloco }} <p-sortIcon field=\"name\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"location\"> {{ 'Crm.AccountMessage.Location' | transloco }} <p-sortIcon\n field=\"location\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"owner_id\"> {{ 'Crm.AccountMessage.Owner' | transloco }} <p-sortIcon\n field=\"owner_id\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"organization_size_id\"> {{ 'Crm.AccountMessage.Size' | transloco }} <p-sortIcon\n field=\"organization_size_id\"></p-sortIcon>\n </th>\n <th *ngIf=\"canViewMrr || userId\" scope=\"true\" pSortableColumn=\"expected_mrr\" class=\"mrr-header\"> {{ 'Crm.AccountMessage.MRR' | transloco }} <p-sortIcon field=\"expected_mrr\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"signed_up_at\"> {{ 'Crm.AccountMessage.SignUpAt' | transloco }} <p-sortIcon field=\"signed_up_at\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"last_logged_in_at\"> Last Seen At <p-sortIcon field=\"last_logged_in_at\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"sessions_last_quarter\"> {{ 'Crm.AccountMessage.Quarter' | transloco }} <p-sortIcon field=\"sessions_last_quarter\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"sessions_last_month\"> {{ 'Crm.AccountMessage.Month' | transloco }} <p-sortIcon field=\"sessions_last_month\">\n </p-sortIcon>\n <th scope=\"true\" pSortableColumn=\"status\"> {{ 'Crm.AccountMessage.Status' | transloco }} <p-sortIcon field=\"status\">\n </p-sortIcon>\n <th scope=\"true\" pSortableColumn=\"priority\"> {{ 'Crm.AccountMessage.Priority' | transloco }} <p-sortIcon field=\"priority\">\n </p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-account let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) - show before first data row -->\n <ng-container *ngIf=\"i === 0 && data?.accounts?.length\">\n <tr class=\"totals-row \">\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n <td *ngIf=\"canViewMrr\" class=\"fw-bold expected-mrr\">\n <strong>{{ totals?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n <td></td>\n <td></td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_quarter }}</strong>\n </td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_month }}</strong>\n </td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n </ng-container>\n <!-- Regular data row -->\n <tr>\n <td data-head=\"Name\" class=\"name-column\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.id]\" class=\"name-link\">\n <pw-clearbit-icon [src]=\"account.company_url\" altText=\"Company Logo\"></pw-clearbit-icon>\n <span [ngbTooltip]=\"account.name\" class=\"account-name\" [title]=\"account.name\">{{ account.name | textTruncate:30 }}</span>\n <i [ngClass]=\"getUserAccountInfo(account).iconClass\" [ngbTooltip]=\"getUserAccountInfo(account).message\"\n class=\"info-icon\"></i>\n <i class=\"fas fa-exclamation-circle text-danger info-icon\"\n *ngIf=\"account?.reason_to_cancel\"\n [pTooltip]=\"account.reason_to_cancel\"\n tooltipPosition=\"top\"></i>\n </a>\n </td>\n <td data-head=\"Location\" class=\"no-wrap\"><span [ngbTooltip]=\"account.location\">{{ getCountryFromLocation(account.location) }}</span></td>\n <td data-head=\"Owner\">\n <a [routerLink]=\"['/members', account?.owner?.slug]\"> {{ account.owner.first_name.charAt(0) }}. {{account.owner.last_name}}</a>\n </td>\n <td data-head=\"Size\" class=\"no-wrap\">{{ account?.organisation_size?.name !== 'Not available' ? account?.organisation_size?.name : '' }}\n</td>\n<td *ngIf=\"canViewMrr || account.owner_id === userId\" data-head=\"MRR\" class=\"no-wrap fw-bold expected-mrr\" >\n <span *ngIf=\"account.expected_mrr && (canViewMrr || account.owner_id === userId)\">\n {{ account.expected_mrr / 100 | currency: account.main_currency }}\n </span>\n</td>\n <td data-head=\"Signed Up\">{{ account.signed_up_at | date: 'dd-MMM-YYYY' }}</td>\n <td data-head=\"Last Seen At\">\n <ng-container *ngIf=\"account?.last_logged_in_at\">\n <span [ngClass]=\"lastSeenAtTextClass(account?.last_logged_in_at)\">\n {{ account?.last_logged_in_at | dateFormat }}\n </span>\n </ng-container>\n </td>\n <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 5}\">{{ account.sessions_last_month }}</td>\n <td data-head=\"Status\">\n <span *ngIf=\"account.status === 'Prospect'\" class=\"badge bg-primary\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Trial - Active'\" class=\"badge bg-success\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Trial - Inactive'\" class=\"badge bg-secondary\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - New'\" class=\"badge bg-info\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - Active'\" class=\"badge bg-success\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - Inactive'\" class=\"badge bg-warning\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - Old'\" class=\"badge bg-dark\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Dead'\" class=\"badge bg-danger\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Competitor'\" class=\"badge bg-danger\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Vendor'\" class=\"badge bg-blue-grey\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Supplier'\" class=\"badge bg-blue-grey\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Other'\" class=\"badge bg-teal\">{{account.status}}</span>\n </td>\n\n <td data-head=\"Priority\">\n <span *ngIf=\"account.priority === 'A - Ideal Fit'\" class=\"badge bg-success\">{{account.priority}}</span>\n <span *ngIf=\"account.priority === 'B - High Potential'\" class=\"badge bg-primary\">{{account.priority}}</span>\n <span *ngIf=\"account.priority === 'C - Low Potential'\" class=\"badge bg-warning\">{{account.priority}}</span>\n <span *ngIf=\"account.priority === 'D - Out of market'\" class=\"badge bg-secondary\">{{account.priority}}</span>\n </td>\n\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"See contacts\" class=\"me-2 me-sm-3 see-icon\"\n [routerLink]=\"['/' + subscription?.slug + routers.accountContacts, account.id]\">\n <i class=\"fa fa-eye\" aria-hidden=\"true\"></i>\n </li>\n <ng-container *ngIf=\"hasAccess || account.owner_id === userId\">\n <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" [routerLink]=\"[\n '/' + subscription?.slug + routers.accounts,\n account.id\n ]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n <i class=\"fa fa-trash delete-icon\" (keydown.enter)=\"onDelete(account.id, subscription.id)\"\n (keydown.space)=\"onDelete(account.id, subscription.id)\"\n (click)=\"onDelete(account.id, subscription.id)\"\n aria-hidden=\"true\"></i>\n </li>\n </ng-container>\n </ul>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"footer\">\n <tr *ngIf=\"data?.accounts?.length\">\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n <td *ngIf=\"canViewMrr\" class=\"expected-mrr\">\n <strong>{{ totals?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n <td></td>\n <td></td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_quarter }}</strong>\n </td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_month }}</strong>\n </td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n </ng-template>\n </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n</div>\n <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoAccountMessage' | transloco\"> </pw-no-data>\n</div>\n<ng-container>\n <div class=\"row mt-5\" *ngIf=\"data.unfiltered_count !== 0 && isLoaded\">\n <!-- Last Activities -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Latest Activities</h5>\n <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountActivities?.length\">\n <p-table class=\"table\" #dt [value]=\"accountActivities\" [paginator]=\"accountInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"accountActivities.length\" [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Action' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.When' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-activities>\n <tr>\n <td data-head=\"Owner\"> {{ activities.owner?.first_name.charAt(0) }}. {{ activities.owner?.last_name }} </td>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, activities.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"activities.crm_account?.name\">{{ activities.crm_account?.name }}</span>\n </a>\n </td>\n <td data-head=\"Contact\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, activities.crm_contact_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"activities.crm_contact ? activities.crm_contact.first_name + ' ' + activities.crm_contact.last_name : ''\">{{ (activities.crm_contact?.first_name + ' ' + activities.crm_contact?.last_name) | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Action\">\n <span [ngbTooltip]=\"activities.comment\" [appDynamicBadge]=\"{\n itemsArray: actionNames,\n item: activities.crm_action?.name\n }\"\n color=\"blue-grey\"\n class=\"badge\">{{ activities.crm_action?.name }}</span>\n </td>\n <td data-head=\"When\">{{ activities.when | date:'dd-MMM-YYYY' }}</td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"accountInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountActivities.length }}</span>\n </div>\n <div *ngIf=\"accountActivities?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Accounts Location</h5>\n <div>\n <ng-template [ngIf]=\"accountGeography\">\n <plotly-plot [data]=\"accountGeography?.data\" [layout]=\"accountGeography?.layout\" [config]=\"accountGeography?.config\" [useResizeHandler]=\"accountGeography ? true : false\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"!accountGeography\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.location{background-color:#fff}.company-logo{height:20px;width:20px}::ng-deep .ui-multiselect{display:inline-block}::ng-deep body .ui-multiselect .ui-multiselect-label{font-weight:700}.name-column{text-align:left}.account-name{margin-right:5px}.info-icon{vertical-align:middle;margin-left:5px}.account-link-icon{color:gray}.money-icon{color:green;font-size:.85em;background-color:#90ee90;border-radius:50%;padding:5px;width:18.5px;box-shadow:0 0 10px #00800080}.icon-ul{width:111px}.no-wrap{word-break:keep-all;white-space:pre-line}.totals-row{background-color:#f8f9fa;font-weight:700}\n"] }]
|
|
1625
|
+
args: [{ selector: 'pw-smart-crm-companies', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <h2>Accounts</h2>\n <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Crm.AccountMessage.AddAccount' | transloco }} </a>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt [value]=\"data.accounts\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\" [loading]=\"loading\" [filterDelay]=\"1000\" (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row m-0\">\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Industry\" [options]=\"searchOptions\" [(ngModel)]=\"filterByIndustries\"\n (onChange)=\"onSearchOptionChange($event, 'industry')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Size\" [options]=\"organizationSizes\" [(ngModel)]=\"filterBySizeId\"\n (onChange)=\"onSearchOptionChange($event, 'size')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Status\" [options]=\"status\" [(ngModel)]=\"filterByStatus\"\n (onChange)=\"onSearchOptionChange($event, 'status')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Priority\" [options]=\"priority\" [(ngModel)]=\"filterByPriority\"\n (onChange)=\"onSearchOptionChange($event, 'priority')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Source\" [options]=\"source\" [(ngModel)]=\"filterBySource\"\n (onChange)=\"onSearchOptionChange($event, 'source')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4 mb-2\">\n <input ngx-gp-autocomplete class=\"form-control location\" #places=\"ngx-places\" [(ngModel)]=\"searchLocationText\"\n placeholder=\"Search location...\" (keyup)=\"locationSearch($event)\"\n (onAddressChange)=\"handleAddressChange($event)\" />\n </div>\n </div>\n <div class=\"search-filter\">\n <a class=\"mt-3 ms-3 text-start btn-filter-primary\" (click)=\"clearFilters()\">Clear all filters</a>\n <div class=\"text-end mt-0 mt-sm-3\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input type=\"text\" [(ngModel)]=\"searchText\" pInputText size=\"50\" placeholder=\"Search accounts...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"mw-90\" />\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\" pSortableColumn=\"name\"> {{ 'Crm.AccountMessage.Name' | transloco }} <p-sortIcon field=\"name\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"location\"> {{ 'Crm.AccountMessage.Location' | transloco }} <p-sortIcon\n field=\"location\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"owner_id\"> {{ 'Crm.AccountMessage.Owner' | transloco }} <p-sortIcon\n field=\"owner_id\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"organization_size_id\"> {{ 'Crm.AccountMessage.Size' | transloco }} <p-sortIcon\n field=\"organization_size_id\"></p-sortIcon>\n </th>\n <th *ngIf=\"canViewMrr || userId\" scope=\"true\" pSortableColumn=\"expected_mrr\" class=\"mrr-header\"> {{ 'Crm.AccountMessage.MRR' | transloco }} <p-sortIcon field=\"expected_mrr\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"signed_up_at\"> {{ 'Crm.AccountMessage.SignUpAt' | transloco }} <p-sortIcon field=\"signed_up_at\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"last_logged_in_at\"> Last Seen At <p-sortIcon field=\"last_logged_in_at\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"sessions_last_quarter\"> {{ 'Crm.AccountMessage.Quarter' | transloco }} <p-sortIcon field=\"sessions_last_quarter\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"sessions_last_month\"> {{ 'Crm.AccountMessage.Month' | transloco }} <p-sortIcon field=\"sessions_last_month\">\n </p-sortIcon>\n <th scope=\"true\" pSortableColumn=\"status\"> {{ 'Crm.AccountMessage.Status' | transloco }} <p-sortIcon field=\"status\">\n </p-sortIcon>\n <th scope=\"true\" pSortableColumn=\"priority\"> {{ 'Crm.AccountMessage.Priority' | transloco }} <p-sortIcon field=\"priority\">\n </p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-account let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) - show before first data row -->\n <ng-container *ngIf=\"i === 0 && data?.accounts?.length\">\n <tr class=\"totals-row \">\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n <td *ngIf=\"canViewMrr\" class=\"fw-bold expected-mrr\">\n <strong>{{ totals?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n <td></td>\n <td></td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_quarter }}</strong>\n </td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_month }}</strong>\n </td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n </ng-container>\n <!-- Regular data row -->\n <tr>\n <td data-head=\"Name\" class=\"name-column\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.id]\" class=\"name-link\">\n <pw-clearbit-icon [src]=\"account.company_url\" altText=\"Company Logo\"></pw-clearbit-icon>\n <span [ngbTooltip]=\"account.name\" class=\"account-name\" [title]=\"account.name\">{{ account.name | textTruncate:30 }}</span>\n <i [ngClass]=\"getUserAccountInfo(account).iconClass\" [ngbTooltip]=\"getUserAccountInfo(account).message\"\n class=\"info-icon\"></i>\n <i class=\"fas fa-exclamation-circle text-danger info-icon\"\n *ngIf=\"account?.reason_to_cancel\"\n [pTooltip]=\"account.reason_to_cancel\"\n tooltipPosition=\"top\"></i>\n </a>\n </td>\n <td data-head=\"Location\" class=\"no-wrap\"><span [ngbTooltip]=\"account.location\">{{ getCountryFromLocation(account.location) }}</span></td>\n <td data-head=\"Owner\">\n <a [routerLink]=\"['/members', account?.owner?.slug]\"> {{ account.owner.first_name.charAt(0) }}. {{account.owner.last_name}}</a>\n </td>\n <td data-head=\"Size\" class=\"no-wrap\">{{ account?.organisation_size?.name !== 'Not available' ? account?.organisation_size?.name : '' }}\n</td>\n<td *ngIf=\"canViewMrr || account.owner_id === userId\" data-head=\"MRR\" class=\"no-wrap fw-bold expected-mrr\" >\n <span *ngIf=\"account.expected_mrr && (canViewMrr || account.owner_id === userId)\">\n {{ account.expected_mrr / 100 | currency: account.main_currency }}\n </span>\n</td>\n <td data-head=\"Signed Up\">{{ account.signed_up_at | date: 'dd-MMM-YYYY' }}</td>\n <td data-head=\"Last Seen At\">\n <ng-container *ngIf=\"account?.last_logged_in_at\">\n <span [ngClass]=\"lastSeenAtTextClass(account?.last_logged_in_at)\">\n {{ account?.last_logged_in_at | dateFormat }}\n </span>\n </ng-container>\n </td>\n <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 5}\">{{ account.sessions_last_month }}</td>\n <td data-head=\"Status\">\n <span *ngIf=\"account.status === 'Prospect'\" class=\"badge bg-primary\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Trial - Active'\" class=\"badge bg-success\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Trial - Inactive'\" class=\"badge bg-secondary\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - New'\" class=\"badge bg-info\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - Active'\" class=\"badge bg-success\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - Inactive'\" class=\"badge bg-warning\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - Old'\" class=\"badge bg-dark\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Dead'\" class=\"badge bg-danger\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Competitor'\" class=\"badge bg-danger\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Vendor'\" class=\"badge bg-blue-grey\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Supplier'\" class=\"badge bg-blue-grey\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Other'\" class=\"badge bg-teal\">{{account.status}}</span>\n </td>\n\n <td data-head=\"Priority\">\n <span *ngIf=\"account.priority === 'A - Ideal Fit'\" class=\"badge bg-success\">{{account.priority}}</span>\n <span *ngIf=\"account.priority === 'B - High Potential'\" class=\"badge bg-primary\">{{account.priority}}</span>\n <span *ngIf=\"account.priority === 'C - Low Potential'\" class=\"badge bg-warning\">{{account.priority}}</span>\n <span *ngIf=\"account.priority === 'D - Out of market'\" class=\"badge bg-secondary\">{{account.priority}}</span>\n </td>\n\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"See contacts\" class=\"me-2 me-sm-3 see-icon\"\n [routerLink]=\"['/' + subscription?.slug + routers.accountContacts, account.id]\">\n <i class=\"fa fa-eye\" aria-hidden=\"true\"></i>\n </li>\n <ng-container *ngIf=\"hasAccess || account.owner_id === userId\">\n <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" [routerLink]=\"[\n '/' + subscription?.slug + routers.accounts,\n account.id\n ]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n <i class=\"fa fa-trash delete-icon\" (keydown.enter)=\"onDelete(account.id, subscription.id)\"\n (keydown.space)=\"onDelete(account.id, subscription.id)\"\n (click)=\"onDelete(account.id, subscription.id)\"\n aria-hidden=\"true\"></i>\n </li>\n </ng-container>\n </ul>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"footer\">\n <tr *ngIf=\"data?.accounts?.length\">\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n <td *ngIf=\"canViewMrr\" class=\"expected-mrr\">\n <strong>{{ totals?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n <td></td>\n <td></td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_quarter }}</strong>\n </td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_month }}</strong>\n </td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n </ng-template>\n </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n</div>\n <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoAccountMessage' | transloco\"> </pw-no-data>\n</div>\n<ng-container>\n <div class=\"row mt-5\" *ngIf=\"data.unfiltered_count !== 0 && isLoaded\">\n <!-- Last Activities -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Latest Activities</h5>\n <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountActivities?.length\">\n <p-table class=\"table\" #dt [value]=\"accountActivities\" [paginator]=\"accountInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"accountActivities.length\" [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Action' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.When' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-activities>\n <tr>\n <td data-head=\"Owner\"> {{ activities.owner?.first_name.charAt(0) }}. {{ activities.owner?.last_name }} </td>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, activities.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"activities.crm_account?.name\">{{ activities.crm_account?.name }}</span>\n </a>\n </td>\n <td data-head=\"Contact\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, activities.crm_contact_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"activities.crm_contact ? activities.crm_contact.first_name + ' ' + activities.crm_contact.last_name : ''\">{{ (activities.crm_contact?.first_name + ' ' + activities.crm_contact?.last_name) | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Action\">\n <span [ngbTooltip]=\"activities.comment\" [appDynamicBadge]=\"{\n itemsArray: actionNames,\n item: activities.crm_action?.name\n }\"\n color=\"blue-grey\"\n class=\"badge\">{{ activities.crm_action?.name }}</span>\n </td>\n <td data-head=\"When\">{{ activities.when | date:'dd-MMM-YYYY' }}</td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"accountInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountActivities.length }}</span>\n </div>\n <div *ngIf=\"accountActivities?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Accounts Location</h5>\n <div>\n <ng-template [ngIf]=\"accountGeography\">\n <plotly-plot [data]=\"accountGeography?.data\" [layout]=\"accountGeography?.layout\" [config]=\"accountGeography?.config\" [useResizeHandler]=\"accountGeography ? true : false\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"!accountGeography\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.location{background-color:#fff}.company-logo{height:20px;width:20px}::ng-deep .ui-multiselect{display:inline-block}::ng-deep body .ui-multiselect .ui-multiselect-label{font-weight:700}.name-column{text-align:left;word-break:keep-all;white-space:nowrap}.account-name{margin-right:5px}.info-icon{vertical-align:middle;margin-left:5px}.account-link-icon{color:gray}.money-icon{color:green;font-size:.85em;background-color:#90ee90;border-radius:50%;padding:5px;width:18.5px;box-shadow:0 0 10px #00800080}.icon-ul{width:111px}.no-wrap,.expected-mrr{word-break:keep-all;white-space:nowrap}.totals-row{background-color:#f8f9fa;font-weight:700}\n"] }]
|
|
1626
1626
|
}], ctorParameters: () => [{ type: i1.CrmService }, { type: i2.CommonService }, { type: i2.LogoCacheService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
|
|
1627
1627
|
|
|
1628
1628
|
class SmartCrmCompetitionComponent {
|
|
@@ -3198,17 +3198,20 @@ class SmartCrmContactInfoComponent extends AppBaseComponent {
|
|
|
3198
3198
|
super.ngOnDestroy();
|
|
3199
3199
|
}
|
|
3200
3200
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SmartCrmContactInfoComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i2$2.NgbCalendar }, { token: i2$2.NgbModal }, { token: i2.AuthService }, { token: i2.GeoService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3201
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: SmartCrmContactInfoComponent, isStandalone: false, selector: "pw-smart-crm-contact-info", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-0\">\n <div class=\"me-auto mb-0\">\n <h2 class=\"mb-0\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"back()\"\n class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n Contact Info\n </h2>\n </div>\n <a class=\"btn btn-sm btn-outline-primary float-end mb-3\"\n data-cy=\"add-opportunities\"\n (click)=\"navigateToOpportunities()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n </div>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isDataLoaded\">\n <p-progressSpinner> </p-progressSpinner>\n </div>\n <div *ngIf=\"isDataLoaded\">\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"user-info p-3 card pb-0 h-auto\">\n <div class=\"mb-2 text-center\">\n <a class=\"profile-image\">\n <img width=\"100\"\n height=\"100\"\n class=\"rounded-circle img-border width-100\"\n alt=\"user\"\n src=\"assets/img/icons/male.png\" />\n </a>\n </div>\n <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n <h4 class=\"d-inline-block\">\n About <span *ngIf=\"data?.id\">{{ data | ifNameNullShowEmail }}</span>\n </h4>\n <a href=\"javascript:void(0);\"\n *ngIf=\"isFormEdit\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"isFormEdit = !isFormEdit\">Edit</a>\n </div>\n <form [formGroup]=\"aboutControls\"\n [class.isDisabled]=\"isFormEdit\">\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"firstName\">{{\n 'Crm.ContactMessage.FirstName' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"first_name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"lastName\">{{\n 'Crm.ContactMessage.LastName' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"last_name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"Location\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</label>\n <input ngx-gp-autocomplete\n class=\"form-control rounded-0 ps-1 user-value\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n (onAddressChange)=\"handleAddressChange($event)\"\n [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"countries$ | async as countries\">\n <label for=\"country\">{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </label>\n <p-dropdown\n [options]=\"countries\"\n formControlName=\"country\"\n [ngClass]=\"{ 'is-invalid': submitted && f['country'].errors }\"\n [placeholder]=\"'Select Country'\"\n optionValue=\"code\"\n optionLabel=\"name\">\n </p-dropdown>\n </div>\n <div class=\"mb-3 ui-fluid skills-modal\">\n <label class=\"label mb-2\" for=\"Account\">{{ 'Crm.ContactMessage.Account' | transloco }}\n </label>\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n data.crm_account_id\n ]\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n [class.is-invalid]=\"\n (f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors\n \"\n *ngIf=\"isFormEdit\"\n [class.disableFormControl]=\"!data?.crm_account_id\">{{ f['crm_account_id'].value?.name }}</a>\n <p-autoComplete *ngIf=\"!isFormEdit\"\n [suggestions]=\"filteredAccounts\"\n formControlName=\"crm_account_id\"\n dataKey=\"id\"\n field=\"name\"\n [dropdown]=\"true\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n [inputStyleClass]=\"\n (f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors\n ? 'invalid-field'\n : ''\n \"\n placeholder=\"Search accounts\"\n [multiple]=\"false\">\n </p-autoComplete>\n <span *ngIf=\"(f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors\"\n class=\"text-danger\">account is required</span>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"email\">{{ 'Crm.ContactMessage.Email' | transloco }}</label>\n <a href=\"mailTo:{{ data.email }}\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data.email\">{{ data.email }}</a>\n <input type=\"text\"\n *ngIf=\"!isFormEdit || !data.email\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"email\"\n [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"linkedinUrl\">{{\n 'Crm.ContactMessage.LinkedInUrl' | transloco\n }}</label>\n <a [href]=\"data.linkedin_url\"\n target=\"blank\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data.linkedin_url\">{{ data.linkedin_url }}</a>\n <input *ngIf=\"!isFormEdit || !data.linkedin_url\"\n type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"linkedin_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['linkedin_url'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"Headline\">{{\n 'Crm.ContactMessage.Headline' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"headline\"\n [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"data.tel\">\n <label class=\"label mb-0\" for=\"Tel\">{{ 'Crm.ContactMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"tel\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"Potential\">{{\n 'Crm.ContactMessage.Potential' | transloco\n }}</label>\n <p-dropdown\n formControlName=\"potential\"\n [options]=\"potentials\"\n [placeholder]=\"'Select Potential'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['potential'].errors }\">\n </p-dropdown>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\"for=\"Labels\">{{ 'Crm.ContactMessage.Labels' | transloco }} </label>\n <p-multiSelect [options]=\"labels\"\n [class.disableFormControl]=\"isFormEdit\"\n formControlName=\"labels\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div *ngIf=\"!isFormEdit\"\n class=\"text-end form-action-buttons\">\n <input type=\"button\"\n class=\"btn btn-outline-primary\"\n (click)=\"isFormEdit = !isFormEdit; getUserInfo()\"\n value=\"Cancel\" />\n <input type=\"button\"\n class=\"btn btn-primary ms-3\"\n value=\"Submit\"\n (click)=\"updateContactInfo()\" />\n </div>\n </form>\n </div>\n </div>\n <div class=\"col-12 col-md-8\">\n <ul ngbNav\n #nav=\"ngbNav\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Notes</a>\n <ng-template ngbNavContent>\n <form [formGroup]=\"actionControls\"\n (ngSubmit)=\"onSave()\">\n <textarea class=\"form-control\"\n formControlName=\"comment\"\n rows=\"6\"></textarea>\n <p class=\"text-danger\"\n *ngIf=\"\n actionControls.get('comment').touched &&\n actionControls.get('comment').invalid\n \">\n Note Required\n </p>\n <div *ngIf=\"actions.length\"\n class=\"d-block clear-both pt-3\">\n <ng-container *ngFor=\"let action of actions; index as i\">\n <button *ngIf=\"action.visible\"\n type=\"button\"\n [class.active]=\"\"\n class=\"btn btn-sm me-2 btn-outline-primary mb-2 action-btn\"\n (click)=\"showDatePicker($event, action.id); d.toggle()\">\n {{ action.name }}\n </button>\n </ng-container>\n <div class=\"text-danger\"\n *ngIf=\"submitAction && actionFormControls['crm_action_id'].invalid\">\n Please select an action\n </div>\n <div class=\"row mt-3\">\n <div class=\"col-12 col-sm-4\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (click)=\"d.toggle()\" />\n </div>\n </div>\n <div class=\"col-sm-4 pe-0 completed-toggle\">\n <div class=\"mb-3\">\n <ui-switch checkedLabel=\"completed\"\n uncheckedLabel=\"open\"\n formControlName=\"completed\"\n name=\"completed\">\n </ui-switch>\n </div>\n </div>\n </div>\n </div>\n <div class=\"float-end\">\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n [disabled]=\"buttonDisable\"\n class=\"btn btn-primary mt-2 mb-2 float-end\">Submit Note</button>\n <a class=\"btn btn-outline-primary mt-2 mb-2 me-0 me-sm-2 float-end\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n </div>\n <div *ngIf=\"buttonDisable\"\n class=\"no-actions pt-4\">\n <pw-no-data [withImage]=\"true\" [message]=\"\n 'Crm.ContactMessage.NoActionsInContactInfoMessage' | transloco\n \">\n <span><a [routerLink]=\"[\n '/' +\n subscription?.slug +\n routers.configurations +\n 'actions'\n ]\">Take me to the actions configuration section.</a></span>\n </pw-no-data>\n </div>\n </form>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div *ngIf=\"!contactComments?.length && isLoaded\"\n class=\"no-actions pt-3\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoActionsMessage' | transloco\">\n </pw-no-data>\n </div>\n <div *ngIf=\"contactComments.length\"\n id=\"timeline\"\n class=\"pt-3 clear-both timeline-center timeline-wrapper\">\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n </ul>\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd }\"\n *ngFor=\"\n let item of contactComments;\n index as i;\n let odd = odd;\n let even = even\n \">\n <div class=\"timeline-badge\">\n <span class=\"bg-red bg-lighten-1\">\n <span class=\"timeline-year\">\n <span class=\"d-block date-year\">{{\n item.when | date: 'medium' | slice: 0:3\n }}</span>\n <span>{{ item.year }}</span></span>\n </span>\n </div>\n <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n <div class=\"card-header py-4\">\n <div class=\"mb-0 clearfix\">\n <textarea type=\"text\"\n name=\"comment\"\n class=\"comment-field form-control p-0\"\n [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n <p class=\"float-start mb-0\"\n *ngIf=\"!showFullComment || item.id !== commentId\">\n {{ item.comment | slice: 0:170\n }}<a *ngIf=\"item.comment.length > 170\"\n class=\"text-secondary\"\n (click)=\"\n showFullComment = true; commentId = item.id\n \">...show more</a>\n </p>\n <p class=\"float-start mb-0\"\n *ngIf=\"showFullComment && item.id === commentId\">\n {{ item.comment }}\n <a *ngIf=\"\n item.comment.length > 170 && showFullComment\n \"\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n </p>\n <button class=\"btn btn-md edit-btn float-end py-0\"\n (click)=\"showEditControls($event)\"\n *ngIf=\"userId === item.owner_id || hasAccess\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <div class=\"card-subtitle text-muted my-0 clearfix\">\n <div class=\"float-start\">\n <span *ngIf=\"!updating || actionId !== item.id\"\n class=\"font-small-3\">\n {{ item.when }}</span>\n <input *ngIf=\"updating && actionId === item.id\"\n placeholder=\"dd-mmm-yyyy\"\n [value]=\"item.when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\" />\n </div>\n <button type=\" button\"\n class=\"btn btn-sm float-end when-btn py-0\"\n *ngIf=\"userId === item.owner_id || hasAccess\"\n (click)=\"showDatePickerUpdate(item.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <p [class.text-danger]=\"!item.color\"\n *ngIf=\"!item.cancelled && !item.completed\"\n class=\"mb-0\">\n {{ item.due }}\n </p>\n <p>\n {{ item.owner.first_name + ' ' + item.owner.last_name }}\n </p>\n <span class=\"badge bg-primary\">{{\n item?.crm_action?.name\n }}</span>\n <span *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n class=\"badge bg-success ms-2\">Open</span>\n <a *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as completed\"\n aria-label=\"Set as completed\"\n class=\"me-3 ms-3\"\n href=\"javascript:void(0);\"\n (click)=\"\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \">\n <i class=\"fa fa-tasks completed\" aria-hidden=\"true\"></i>\n </a>\n <a *ngIf=\"\n !item.cancelled &&\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as cancelled\"\n aria-label=\"Set as cancelled\"\n href=\"javascript:void(0);\"\n (click)=\"setAsCancelled(item.id, item)\">\n <i\n class=\"fa fa-times delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <a *ngIf=\"\n item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as UnCompleted\"\n aria-label=\"Set as UnCompleted\"\n href=\"javascript:void(0);\"\n (click)=\"\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \"\n class=\"ms-2\">\n <i class=\"far fa-window-close\" aria-hidden=\"true\"></i>\n </a>\n <div class=\"control-btns mt-3 text-end\">\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-default me-2\"\n (click)=\"showEditControls(undefined)\">\n Cancel\n </button>\n <button class=\"btn btn-sm btn-primary\"\n type=\"button\"\n (click)=\"updateComment(item)\">\n Submit\n </button>\n </div>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Versioning</a>\n <ng-template ngbNavContent>\n <div *ngFor=\"let version of contactVersioning\">\n <p>\n <strong>Event: </strong>{{ version.event }} | <strong>Author: </strong><a *ngIf=\"version?.author\"\n [routerLink]=\"['/members', version?.author?.slug]\">{{ version?.author | ifNameNullShowEmail }}</a>\n | <strong>Created at: </strong>{{ version.created_at | dateFormat: 'datetime' }}<br />\n <strong>Object: </strong>{{ version.object | json }}\n </p>\n <hr />\n </div>\n <div *ngIf=\"contactVersioning?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoVersionsMessage' | transloco\">\n </pw-no-data>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Files</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-company-files [contactId]=\"contactId\"\n [accountId]=\"accountId\">\n </pw-smart-crm-company-files>\n </ng-template>\n </li>\n </ul>\n\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <div class=\"row p-2\">\n <div class=\"col-12\">\n <div class=\"upload-box\">\n <div class=\"upload-box-content\">\n <div class=\"drop-container\"\n ngFileDrop\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\">\n <p>\n Drag files here or\n <label class=\"upload-button\">\n <input type=\"file\"\n ngFileSelect\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\"\n multiple />\n browse\n </label>\n to upload.\n </p>\n </div>\n <div class=\"upload-item\"\n *ngFor=\"let f of files; let i = index\">\n <div class=\"upload-item-content\">\n <div class=\"filename\">\n <div class=\"filename-left\">\n <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n <span>{{ f.name }}</span>\n </div>\n </div>\n <div class=\"progress-content\">\n <div class=\"progress\">\n <span class=\"bar\"\n [style.width]=\"f?.progress?.data?.percentage + '%'\"\n [class.is-done]=\"f['uploaded']\"></span>\n </div>\n </div>\n <div class=\"progress-text-content\">\n <span class=\"progress-text\"\n [class.is-done]=\"f['uploaded']\">\n <span *ngIf=\"!f['uploaded']\">{{ f.progress?.data?.percentage - 1 }}%\n </span>\n <span *ngIf=\"f['uploaded']\">100 %</span>\n <span *ngIf=\"!f['uploaded']\">Uploading...</span>\n <span *ngIf=\"f['uploaded']\">Done</span>\n </span>\n <span class=\"speed-and-eta-text\"\n *ngIf=\"f.progress?.data?.percentage !== 0 && !f['uploaded']\">\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.show-controls .comment-field,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled input,.isDisabled textarea,.isDisabled p-dropdown,.isDisabled select{pointer-events:none}.timeline-card.card{min-height:auto}@media (max-width: 768px){.completed-toggle{padding-top:10px}}.when-btn:focus{border:0;box-shadow:none}.no-actions{clear:both}::ng-deep body .invalid-field{border:1px solid rgb(255,88,107)!important}.action-btn.active{color:#fff!important;background-color:var(--first)}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i5.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: i6.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i10.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i12.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i12.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: SmartCrmCompanyFilesComponent, selector: "pw-smart-crm-company-files", inputs: ["accountId", "contactId", "opportunityId"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.JsonPipe, name: "json" }, { kind: "pipe", type: i2$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i15.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i11$2.TranslocoPipe, name: "transloco" }] }); }
|
|
3201
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: SmartCrmContactInfoComponent, isStandalone: false, selector: "pw-smart-crm-contact-info", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-0\">\n <div class=\"me-auto mb-0\">\n <h2 class=\"mb-0\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"back()\"\n class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n Contact Info\n </h2>\n </div>\n <a class=\"btn btn-sm btn-outline-primary float-end mb-3\"\n data-cy=\"add-opportunities\"\n (click)=\"navigateToOpportunities()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n </div>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isDataLoaded\">\n <p-progressSpinner> </p-progressSpinner>\n </div>\n <div *ngIf=\"isDataLoaded\">\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"user-info p-3 card pb-0 h-auto\">\n <div class=\"mb-2 text-center\">\n <a class=\"profile-image\">\n <img width=\"100\"\n height=\"100\"\n class=\"rounded-circle img-border width-100\"\n alt=\"user\"\n src=\"assets/img/icons/male.png\" />\n </a>\n </div>\n <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n <h4 class=\"d-inline-block\">\n About <span *ngIf=\"data?.id\">{{ data | ifNameNullShowEmail }}</span>\n </h4>\n <a href=\"#\"\n *ngIf=\"isFormEdit\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"$event.preventDefault(); isFormEdit = !isFormEdit\">Edit</a>\n </div>\n <form [formGroup]=\"aboutControls\"\n [class.isDisabled]=\"isFormEdit\">\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"firstName\">{{\n 'Crm.ContactMessage.FirstName' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"first_name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"lastName\">{{\n 'Crm.ContactMessage.LastName' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"last_name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"Location\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</label>\n <input ngx-gp-autocomplete\n class=\"form-control rounded-0 ps-1 user-value\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n (onAddressChange)=\"handleAddressChange($event)\"\n [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"countries$ | async as countries\">\n <label for=\"country\">{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </label>\n <p-dropdown\n [options]=\"countries\"\n formControlName=\"country\"\n [ngClass]=\"{ 'is-invalid': submitted && f['country'].errors }\"\n [placeholder]=\"'Select Country'\"\n optionValue=\"code\"\n optionLabel=\"name\">\n </p-dropdown>\n </div>\n <div class=\"mb-3 ui-fluid skills-modal\">\n <label class=\"label mb-2\" for=\"Account\">{{ 'Crm.ContactMessage.Account' | transloco }}\n </label>\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n data.crm_account_id\n ]\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n [class.is-invalid]=\"\n (f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors\n \"\n *ngIf=\"isFormEdit\"\n [class.disableFormControl]=\"!data?.crm_account_id\">{{ f['crm_account_id'].value?.name }}</a>\n <p-autoComplete *ngIf=\"!isFormEdit\"\n [suggestions]=\"filteredAccounts\"\n formControlName=\"crm_account_id\"\n dataKey=\"id\"\n field=\"name\"\n [dropdown]=\"true\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n [inputStyleClass]=\"\n (f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors\n ? 'invalid-field'\n : ''\n \"\n placeholder=\"Search accounts\"\n [multiple]=\"false\">\n </p-autoComplete>\n <span *ngIf=\"(f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors\"\n class=\"text-danger\">account is required</span>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"email\">{{ 'Crm.ContactMessage.Email' | transloco }}</label>\n <a href=\"mailTo:{{ data.email }}\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data.email\">{{ data.email }}</a>\n <input type=\"text\"\n *ngIf=\"!isFormEdit || !data.email\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"email\"\n [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"linkedinUrl\">{{\n 'Crm.ContactMessage.LinkedInUrl' | transloco\n }}</label>\n <a [href]=\"data.linkedin_url\"\n target=\"blank\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data.linkedin_url\">{{ data.linkedin_url }}</a>\n <input *ngIf=\"!isFormEdit || !data.linkedin_url\"\n type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"linkedin_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['linkedin_url'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"Headline\">{{\n 'Crm.ContactMessage.Headline' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"headline\"\n [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"data.tel\">\n <label class=\"label mb-0\" for=\"Tel\">{{ 'Crm.ContactMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"tel\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"Potential\">{{\n 'Crm.ContactMessage.Potential' | transloco\n }}</label>\n <p-dropdown\n formControlName=\"potential\"\n [options]=\"potentials\"\n [placeholder]=\"'Select Potential'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['potential'].errors }\">\n </p-dropdown>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\"for=\"Labels\">{{ 'Crm.ContactMessage.Labels' | transloco }} </label>\n <p-multiSelect [options]=\"labels\"\n [class.disableFormControl]=\"isFormEdit\"\n formControlName=\"labels\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div *ngIf=\"!isFormEdit\"\n class=\"text-end form-action-buttons\">\n <input type=\"button\"\n class=\"btn btn-outline-primary\"\n (click)=\"isFormEdit = !isFormEdit; getUserInfo()\"\n value=\"Cancel\" />\n <input type=\"button\"\n class=\"btn btn-primary ms-3\"\n value=\"Submit\"\n (click)=\"updateContactInfo()\" />\n </div>\n </form>\n </div>\n </div>\n <div class=\"col-12 col-md-8\">\n <ul ngbNav\n #nav=\"ngbNav\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Notes</a>\n <ng-template ngbNavContent>\n <form [formGroup]=\"actionControls\"\n (ngSubmit)=\"onSave()\">\n <textarea class=\"form-control\"\n formControlName=\"comment\"\n rows=\"6\"></textarea>\n <p class=\"text-danger\"\n *ngIf=\"\n actionControls.get('comment').touched &&\n actionControls.get('comment').invalid\n \">\n Note Required\n </p>\n <div *ngIf=\"actions.length\"\n class=\"d-block clear-both pt-3\">\n <ng-container *ngFor=\"let action of actions; index as i\">\n <button *ngIf=\"action.visible\"\n type=\"button\"\n [class.active]=\"\"\n class=\"btn btn-sm me-2 btn-outline-primary mb-2 action-btn\"\n (click)=\"showDatePicker($event, action.id); d.toggle()\">\n {{ action.name }}\n </button>\n </ng-container>\n <div class=\"text-danger\"\n *ngIf=\"submitAction && actionFormControls['crm_action_id'].invalid\">\n Please select an action\n </div>\n <div class=\"row mt-3\">\n <div class=\"col-12 col-sm-4\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (click)=\"d.toggle()\" />\n </div>\n </div>\n <div class=\"col-sm-4 pe-0 completed-toggle\">\n <div class=\"mb-3\">\n <ui-switch checkedLabel=\"completed\"\n uncheckedLabel=\"open\"\n formControlName=\"completed\"\n name=\"completed\">\n </ui-switch>\n </div>\n </div>\n </div>\n </div>\n <div class=\"float-end\">\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n [disabled]=\"buttonDisable\"\n class=\"btn btn-primary mt-2 mb-2 float-end\">Submit Note</button>\n <a class=\"btn btn-outline-primary mt-2 mb-2 me-0 me-sm-2 float-end\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n </div>\n <div *ngIf=\"buttonDisable\"\n class=\"no-actions pt-4\">\n <pw-no-data [withImage]=\"true\" [message]=\"\n 'Crm.ContactMessage.NoActionsInContactInfoMessage' | transloco\n \">\n <span><a [routerLink]=\"[\n '/' +\n subscription?.slug +\n routers.configurations +\n 'actions'\n ]\">Take me to the actions configuration section.</a></span>\n </pw-no-data>\n </div>\n </form>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div *ngIf=\"!contactComments?.length && isLoaded\"\n class=\"no-actions pt-3\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoActionsMessage' | transloco\">\n </pw-no-data>\n </div>\n <div *ngIf=\"contactComments.length\"\n id=\"timeline\"\n class=\"pt-3 clear-both timeline-center timeline-wrapper\">\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n </ul>\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd }\"\n *ngFor=\"\n let item of contactComments;\n index as i;\n let odd = odd;\n let even = even\n \">\n <div class=\"timeline-badge\">\n <span class=\"bg-red bg-lighten-1\">\n <span class=\"timeline-year\">\n <span class=\"d-block date-year\">{{\n item.when | date: 'medium' | slice: 0:3\n }}</span>\n <span>{{ item.year }}</span></span>\n </span>\n </div>\n <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n <div class=\"card-header py-4\">\n <div class=\"mb-0 clearfix\">\n <textarea type=\"text\"\n name=\"comment\"\n class=\"comment-field form-control p-0\"\n [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n <p class=\"float-start mb-0\"\n *ngIf=\"!showFullComment || item.id !== commentId\">\n {{ item.comment | slice: 0:170\n }}<a *ngIf=\"item.comment.length > 170\"\n class=\"text-secondary\"\n (click)=\"\n showFullComment = true; commentId = item.id\n \">...show more</a>\n </p>\n <p class=\"float-start mb-0\"\n *ngIf=\"showFullComment && item.id === commentId\">\n {{ item.comment }}\n <a *ngIf=\"\n item.comment.length > 170 && showFullComment\n \"\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n </p>\n <button class=\"btn btn-md edit-btn float-end py-0\"\n (click)=\"showEditControls($event)\"\n *ngIf=\"userId === item.owner_id || hasAccess\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <div class=\"card-subtitle text-muted my-0 clearfix\">\n <div class=\"float-start\">\n <span *ngIf=\"!updating || actionId !== item.id\"\n class=\"font-small-3\">\n {{ item.when }}</span>\n <input *ngIf=\"updating && actionId === item.id\"\n placeholder=\"dd-mmm-yyyy\"\n [value]=\"item.when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\" />\n </div>\n <button type=\" button\"\n class=\"btn btn-sm float-end when-btn py-0\"\n *ngIf=\"userId === item.owner_id || hasAccess\"\n (click)=\"showDatePickerUpdate(item.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <p [class.text-danger]=\"!item.color\"\n *ngIf=\"!item.cancelled && !item.completed\"\n class=\"mb-0\">\n {{ item.due }}\n </p>\n <p>\n {{ item.owner.first_name + ' ' + item.owner.last_name }}\n </p>\n <span class=\"badge bg-primary\">{{\n item?.crm_action?.name\n }}</span>\n <span *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n class=\"badge bg-success ms-2\">Open</span>\n <a *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as completed\"\n aria-label=\"Set as completed\"\n class=\"me-3 ms-3\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \">\n <i class=\"fa fa-tasks completed\" aria-hidden=\"true\"></i>\n </a>\n <a *ngIf=\"\n !item.cancelled &&\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as cancelled\"\n aria-label=\"Set as cancelled\"\n href=\"#\"\n (click)=\"$event.preventDefault(); setAsCancelled(item.id, item)\">\n <i\n class=\"fa fa-times delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <a *ngIf=\"\n item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as UnCompleted\"\n aria-label=\"Set as UnCompleted\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \"\n class=\"ms-2\">\n <i class=\"far fa-window-close\" aria-hidden=\"true\"></i>\n </a>\n <div class=\"control-btns mt-3 text-end\">\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-default me-2\"\n (click)=\"showEditControls(undefined)\">\n Cancel\n </button>\n <button class=\"btn btn-sm btn-primary\"\n type=\"button\"\n (click)=\"updateComment(item)\">\n Submit\n </button>\n </div>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Versioning</a>\n <ng-template ngbNavContent>\n <div *ngFor=\"let version of contactVersioning\">\n <p>\n <strong>Event: </strong>{{ version.event }} | <strong>Author: </strong><a *ngIf=\"version?.author\"\n [routerLink]=\"['/members', version?.author?.slug]\">{{ version?.author | ifNameNullShowEmail }}</a>\n | <strong>Created at: </strong>{{ version.created_at | dateFormat: 'datetime' }}<br />\n <strong>Object: </strong>{{ version.object | json }}\n </p>\n <hr />\n </div>\n <div *ngIf=\"contactVersioning?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoVersionsMessage' | transloco\">\n </pw-no-data>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Files</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-company-files [contactId]=\"contactId\"\n [accountId]=\"accountId\">\n </pw-smart-crm-company-files>\n </ng-template>\n </li>\n </ul>\n\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <div class=\"row p-2\">\n <div class=\"col-12\">\n <div class=\"upload-box\">\n <div class=\"upload-box-content\">\n <div class=\"drop-container\"\n ngFileDrop\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\">\n <p>\n Drag files here or\n <label class=\"upload-button\">\n <input type=\"file\"\n ngFileSelect\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\"\n multiple />\n browse\n </label>\n to upload.\n </p>\n </div>\n <div class=\"upload-item\"\n *ngFor=\"let f of files; let i = index\">\n <div class=\"upload-item-content\">\n <div class=\"filename\">\n <div class=\"filename-left\">\n <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n <span>{{ f.name }}</span>\n </div>\n </div>\n <div class=\"progress-content\">\n <div class=\"progress\">\n <span class=\"bar\"\n [style.width]=\"f?.progress?.data?.percentage + '%'\"\n [class.is-done]=\"f['uploaded']\"></span>\n </div>\n </div>\n <div class=\"progress-text-content\">\n <span class=\"progress-text\"\n [class.is-done]=\"f['uploaded']\">\n <span *ngIf=\"!f['uploaded']\">{{ f.progress?.data?.percentage - 1 }}%\n </span>\n <span *ngIf=\"f['uploaded']\">100 %</span>\n <span *ngIf=\"!f['uploaded']\">Uploading...</span>\n <span *ngIf=\"f['uploaded']\">Done</span>\n </span>\n <span class=\"speed-and-eta-text\"\n *ngIf=\"f.progress?.data?.percentage !== 0 && !f['uploaded']\">\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.show-controls .comment-field,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled input,.isDisabled textarea,.isDisabled p-dropdown,.isDisabled select{pointer-events:none}.timeline-card.card{min-height:auto}@media (max-width: 768px){.completed-toggle{padding-top:10px}}.when-btn:focus{border:0;box-shadow:none}.no-actions{clear:both}::ng-deep body .invalid-field{border:1px solid rgb(255,88,107)!important}.action-btn.active{color:#fff!important;background-color:var(--first)}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i5.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: i6.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i10.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i12.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i12.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: SmartCrmCompanyFilesComponent, selector: "pw-smart-crm-company-files", inputs: ["accountId", "contactId", "opportunityId"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.JsonPipe, name: "json" }, { kind: "pipe", type: i2$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i15.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i11$2.TranslocoPipe, name: "transloco" }] }); }
|
|
3202
3202
|
}
|
|
3203
3203
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SmartCrmContactInfoComponent, decorators: [{
|
|
3204
3204
|
type: Component,
|
|
3205
|
-
args: [{ selector: 'pw-smart-crm-contact-info', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 mb-0\">\n <div class=\"me-auto mb-0\">\n <h2 class=\"mb-0\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"back()\"\n class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n Contact Info\n </h2>\n </div>\n <a class=\"btn btn-sm btn-outline-primary float-end mb-3\"\n data-cy=\"add-opportunities\"\n (click)=\"navigateToOpportunities()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n </div>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isDataLoaded\">\n <p-progressSpinner> </p-progressSpinner>\n </div>\n <div *ngIf=\"isDataLoaded\">\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"user-info p-3 card pb-0 h-auto\">\n <div class=\"mb-2 text-center\">\n <a class=\"profile-image\">\n <img width=\"100\"\n height=\"100\"\n class=\"rounded-circle img-border width-100\"\n alt=\"user\"\n src=\"assets/img/icons/male.png\" />\n </a>\n </div>\n <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n <h4 class=\"d-inline-block\">\n About <span *ngIf=\"data?.id\">{{ data | ifNameNullShowEmail }}</span>\n </h4>\n <a href=\"javascript:void(0);\"\n *ngIf=\"isFormEdit\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"isFormEdit = !isFormEdit\">Edit</a>\n </div>\n <form [formGroup]=\"aboutControls\"\n [class.isDisabled]=\"isFormEdit\">\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"firstName\">{{\n 'Crm.ContactMessage.FirstName' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"first_name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"lastName\">{{\n 'Crm.ContactMessage.LastName' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"last_name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"Location\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</label>\n <input ngx-gp-autocomplete\n class=\"form-control rounded-0 ps-1 user-value\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n (onAddressChange)=\"handleAddressChange($event)\"\n [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"countries$ | async as countries\">\n <label for=\"country\">{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </label>\n <p-dropdown\n [options]=\"countries\"\n formControlName=\"country\"\n [ngClass]=\"{ 'is-invalid': submitted && f['country'].errors }\"\n [placeholder]=\"'Select Country'\"\n optionValue=\"code\"\n optionLabel=\"name\">\n </p-dropdown>\n </div>\n <div class=\"mb-3 ui-fluid skills-modal\">\n <label class=\"label mb-2\" for=\"Account\">{{ 'Crm.ContactMessage.Account' | transloco }}\n </label>\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n data.crm_account_id\n ]\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n [class.is-invalid]=\"\n (f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors\n \"\n *ngIf=\"isFormEdit\"\n [class.disableFormControl]=\"!data?.crm_account_id\">{{ f['crm_account_id'].value?.name }}</a>\n <p-autoComplete *ngIf=\"!isFormEdit\"\n [suggestions]=\"filteredAccounts\"\n formControlName=\"crm_account_id\"\n dataKey=\"id\"\n field=\"name\"\n [dropdown]=\"true\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n [inputStyleClass]=\"\n (f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors\n ? 'invalid-field'\n : ''\n \"\n placeholder=\"Search accounts\"\n [multiple]=\"false\">\n </p-autoComplete>\n <span *ngIf=\"(f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors\"\n class=\"text-danger\">account is required</span>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"email\">{{ 'Crm.ContactMessage.Email' | transloco }}</label>\n <a href=\"mailTo:{{ data.email }}\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data.email\">{{ data.email }}</a>\n <input type=\"text\"\n *ngIf=\"!isFormEdit || !data.email\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"email\"\n [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"linkedinUrl\">{{\n 'Crm.ContactMessage.LinkedInUrl' | transloco\n }}</label>\n <a [href]=\"data.linkedin_url\"\n target=\"blank\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data.linkedin_url\">{{ data.linkedin_url }}</a>\n <input *ngIf=\"!isFormEdit || !data.linkedin_url\"\n type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"linkedin_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['linkedin_url'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"Headline\">{{\n 'Crm.ContactMessage.Headline' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"headline\"\n [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"data.tel\">\n <label class=\"label mb-0\" for=\"Tel\">{{ 'Crm.ContactMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"tel\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"Potential\">{{\n 'Crm.ContactMessage.Potential' | transloco\n }}</label>\n <p-dropdown\n formControlName=\"potential\"\n [options]=\"potentials\"\n [placeholder]=\"'Select Potential'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['potential'].errors }\">\n </p-dropdown>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\"for=\"Labels\">{{ 'Crm.ContactMessage.Labels' | transloco }} </label>\n <p-multiSelect [options]=\"labels\"\n [class.disableFormControl]=\"isFormEdit\"\n formControlName=\"labels\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div *ngIf=\"!isFormEdit\"\n class=\"text-end form-action-buttons\">\n <input type=\"button\"\n class=\"btn btn-outline-primary\"\n (click)=\"isFormEdit = !isFormEdit; getUserInfo()\"\n value=\"Cancel\" />\n <input type=\"button\"\n class=\"btn btn-primary ms-3\"\n value=\"Submit\"\n (click)=\"updateContactInfo()\" />\n </div>\n </form>\n </div>\n </div>\n <div class=\"col-12 col-md-8\">\n <ul ngbNav\n #nav=\"ngbNav\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Notes</a>\n <ng-template ngbNavContent>\n <form [formGroup]=\"actionControls\"\n (ngSubmit)=\"onSave()\">\n <textarea class=\"form-control\"\n formControlName=\"comment\"\n rows=\"6\"></textarea>\n <p class=\"text-danger\"\n *ngIf=\"\n actionControls.get('comment').touched &&\n actionControls.get('comment').invalid\n \">\n Note Required\n </p>\n <div *ngIf=\"actions.length\"\n class=\"d-block clear-both pt-3\">\n <ng-container *ngFor=\"let action of actions; index as i\">\n <button *ngIf=\"action.visible\"\n type=\"button\"\n [class.active]=\"\"\n class=\"btn btn-sm me-2 btn-outline-primary mb-2 action-btn\"\n (click)=\"showDatePicker($event, action.id); d.toggle()\">\n {{ action.name }}\n </button>\n </ng-container>\n <div class=\"text-danger\"\n *ngIf=\"submitAction && actionFormControls['crm_action_id'].invalid\">\n Please select an action\n </div>\n <div class=\"row mt-3\">\n <div class=\"col-12 col-sm-4\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (click)=\"d.toggle()\" />\n </div>\n </div>\n <div class=\"col-sm-4 pe-0 completed-toggle\">\n <div class=\"mb-3\">\n <ui-switch checkedLabel=\"completed\"\n uncheckedLabel=\"open\"\n formControlName=\"completed\"\n name=\"completed\">\n </ui-switch>\n </div>\n </div>\n </div>\n </div>\n <div class=\"float-end\">\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n [disabled]=\"buttonDisable\"\n class=\"btn btn-primary mt-2 mb-2 float-end\">Submit Note</button>\n <a class=\"btn btn-outline-primary mt-2 mb-2 me-0 me-sm-2 float-end\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n </div>\n <div *ngIf=\"buttonDisable\"\n class=\"no-actions pt-4\">\n <pw-no-data [withImage]=\"true\" [message]=\"\n 'Crm.ContactMessage.NoActionsInContactInfoMessage' | transloco\n \">\n <span><a [routerLink]=\"[\n '/' +\n subscription?.slug +\n routers.configurations +\n 'actions'\n ]\">Take me to the actions configuration section.</a></span>\n </pw-no-data>\n </div>\n </form>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div *ngIf=\"!contactComments?.length && isLoaded\"\n class=\"no-actions pt-3\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoActionsMessage' | transloco\">\n </pw-no-data>\n </div>\n <div *ngIf=\"contactComments.length\"\n id=\"timeline\"\n class=\"pt-3 clear-both timeline-center timeline-wrapper\">\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n </ul>\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd }\"\n *ngFor=\"\n let item of contactComments;\n index as i;\n let odd = odd;\n let even = even\n \">\n <div class=\"timeline-badge\">\n <span class=\"bg-red bg-lighten-1\">\n <span class=\"timeline-year\">\n <span class=\"d-block date-year\">{{\n item.when | date: 'medium' | slice: 0:3\n }}</span>\n <span>{{ item.year }}</span></span>\n </span>\n </div>\n <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n <div class=\"card-header py-4\">\n <div class=\"mb-0 clearfix\">\n <textarea type=\"text\"\n name=\"comment\"\n class=\"comment-field form-control p-0\"\n [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n <p class=\"float-start mb-0\"\n *ngIf=\"!showFullComment || item.id !== commentId\">\n {{ item.comment | slice: 0:170\n }}<a *ngIf=\"item.comment.length > 170\"\n class=\"text-secondary\"\n (click)=\"\n showFullComment = true; commentId = item.id\n \">...show more</a>\n </p>\n <p class=\"float-start mb-0\"\n *ngIf=\"showFullComment && item.id === commentId\">\n {{ item.comment }}\n <a *ngIf=\"\n item.comment.length > 170 && showFullComment\n \"\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n </p>\n <button class=\"btn btn-md edit-btn float-end py-0\"\n (click)=\"showEditControls($event)\"\n *ngIf=\"userId === item.owner_id || hasAccess\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <div class=\"card-subtitle text-muted my-0 clearfix\">\n <div class=\"float-start\">\n <span *ngIf=\"!updating || actionId !== item.id\"\n class=\"font-small-3\">\n {{ item.when }}</span>\n <input *ngIf=\"updating && actionId === item.id\"\n placeholder=\"dd-mmm-yyyy\"\n [value]=\"item.when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\" />\n </div>\n <button type=\" button\"\n class=\"btn btn-sm float-end when-btn py-0\"\n *ngIf=\"userId === item.owner_id || hasAccess\"\n (click)=\"showDatePickerUpdate(item.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <p [class.text-danger]=\"!item.color\"\n *ngIf=\"!item.cancelled && !item.completed\"\n class=\"mb-0\">\n {{ item.due }}\n </p>\n <p>\n {{ item.owner.first_name + ' ' + item.owner.last_name }}\n </p>\n <span class=\"badge bg-primary\">{{\n item?.crm_action?.name\n }}</span>\n <span *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n class=\"badge bg-success ms-2\">Open</span>\n <a *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as completed\"\n aria-label=\"Set as completed\"\n class=\"me-3 ms-3\"\n href=\"javascript:void(0);\"\n (click)=\"\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \">\n <i class=\"fa fa-tasks completed\" aria-hidden=\"true\"></i>\n </a>\n <a *ngIf=\"\n !item.cancelled &&\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as cancelled\"\n aria-label=\"Set as cancelled\"\n href=\"javascript:void(0);\"\n (click)=\"setAsCancelled(item.id, item)\">\n <i\n class=\"fa fa-times delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <a *ngIf=\"\n item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as UnCompleted\"\n aria-label=\"Set as UnCompleted\"\n href=\"javascript:void(0);\"\n (click)=\"\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \"\n class=\"ms-2\">\n <i class=\"far fa-window-close\" aria-hidden=\"true\"></i>\n </a>\n <div class=\"control-btns mt-3 text-end\">\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-default me-2\"\n (click)=\"showEditControls(undefined)\">\n Cancel\n </button>\n <button class=\"btn btn-sm btn-primary\"\n type=\"button\"\n (click)=\"updateComment(item)\">\n Submit\n </button>\n </div>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Versioning</a>\n <ng-template ngbNavContent>\n <div *ngFor=\"let version of contactVersioning\">\n <p>\n <strong>Event: </strong>{{ version.event }} | <strong>Author: </strong><a *ngIf=\"version?.author\"\n [routerLink]=\"['/members', version?.author?.slug]\">{{ version?.author | ifNameNullShowEmail }}</a>\n | <strong>Created at: </strong>{{ version.created_at | dateFormat: 'datetime' }}<br />\n <strong>Object: </strong>{{ version.object | json }}\n </p>\n <hr />\n </div>\n <div *ngIf=\"contactVersioning?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoVersionsMessage' | transloco\">\n </pw-no-data>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Files</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-company-files [contactId]=\"contactId\"\n [accountId]=\"accountId\">\n </pw-smart-crm-company-files>\n </ng-template>\n </li>\n </ul>\n\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <div class=\"row p-2\">\n <div class=\"col-12\">\n <div class=\"upload-box\">\n <div class=\"upload-box-content\">\n <div class=\"drop-container\"\n ngFileDrop\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\">\n <p>\n Drag files here or\n <label class=\"upload-button\">\n <input type=\"file\"\n ngFileSelect\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\"\n multiple />\n browse\n </label>\n to upload.\n </p>\n </div>\n <div class=\"upload-item\"\n *ngFor=\"let f of files; let i = index\">\n <div class=\"upload-item-content\">\n <div class=\"filename\">\n <div class=\"filename-left\">\n <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n <span>{{ f.name }}</span>\n </div>\n </div>\n <div class=\"progress-content\">\n <div class=\"progress\">\n <span class=\"bar\"\n [style.width]=\"f?.progress?.data?.percentage + '%'\"\n [class.is-done]=\"f['uploaded']\"></span>\n </div>\n </div>\n <div class=\"progress-text-content\">\n <span class=\"progress-text\"\n [class.is-done]=\"f['uploaded']\">\n <span *ngIf=\"!f['uploaded']\">{{ f.progress?.data?.percentage - 1 }}%\n </span>\n <span *ngIf=\"f['uploaded']\">100 %</span>\n <span *ngIf=\"!f['uploaded']\">Uploading...</span>\n <span *ngIf=\"f['uploaded']\">Done</span>\n </span>\n <span class=\"speed-and-eta-text\"\n *ngIf=\"f.progress?.data?.percentage !== 0 && !f['uploaded']\">\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.show-controls .comment-field,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled input,.isDisabled textarea,.isDisabled p-dropdown,.isDisabled select{pointer-events:none}.timeline-card.card{min-height:auto}@media (max-width: 768px){.completed-toggle{padding-top:10px}}.when-btn:focus{border:0;box-shadow:none}.no-actions{clear:both}::ng-deep body .invalid-field{border:1px solid rgb(255,88,107)!important}.action-btn.active{color:#fff!important;background-color:var(--first)}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"] }]
|
|
3205
|
+
args: [{ selector: 'pw-smart-crm-contact-info', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 mb-0\">\n <div class=\"me-auto mb-0\">\n <h2 class=\"mb-0\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"back()\"\n class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n Contact Info\n </h2>\n </div>\n <a class=\"btn btn-sm btn-outline-primary float-end mb-3\"\n data-cy=\"add-opportunities\"\n (click)=\"navigateToOpportunities()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n </div>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isDataLoaded\">\n <p-progressSpinner> </p-progressSpinner>\n </div>\n <div *ngIf=\"isDataLoaded\">\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"user-info p-3 card pb-0 h-auto\">\n <div class=\"mb-2 text-center\">\n <a class=\"profile-image\">\n <img width=\"100\"\n height=\"100\"\n class=\"rounded-circle img-border width-100\"\n alt=\"user\"\n src=\"assets/img/icons/male.png\" />\n </a>\n </div>\n <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n <h4 class=\"d-inline-block\">\n About <span *ngIf=\"data?.id\">{{ data | ifNameNullShowEmail }}</span>\n </h4>\n <a href=\"#\"\n *ngIf=\"isFormEdit\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"$event.preventDefault(); isFormEdit = !isFormEdit\">Edit</a>\n </div>\n <form [formGroup]=\"aboutControls\"\n [class.isDisabled]=\"isFormEdit\">\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"firstName\">{{\n 'Crm.ContactMessage.FirstName' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"first_name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"lastName\">{{\n 'Crm.ContactMessage.LastName' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"last_name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"Location\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</label>\n <input ngx-gp-autocomplete\n class=\"form-control rounded-0 ps-1 user-value\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n (onAddressChange)=\"handleAddressChange($event)\"\n [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"countries$ | async as countries\">\n <label for=\"country\">{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </label>\n <p-dropdown\n [options]=\"countries\"\n formControlName=\"country\"\n [ngClass]=\"{ 'is-invalid': submitted && f['country'].errors }\"\n [placeholder]=\"'Select Country'\"\n optionValue=\"code\"\n optionLabel=\"name\">\n </p-dropdown>\n </div>\n <div class=\"mb-3 ui-fluid skills-modal\">\n <label class=\"label mb-2\" for=\"Account\">{{ 'Crm.ContactMessage.Account' | transloco }}\n </label>\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n data.crm_account_id\n ]\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n [class.is-invalid]=\"\n (f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors\n \"\n *ngIf=\"isFormEdit\"\n [class.disableFormControl]=\"!data?.crm_account_id\">{{ f['crm_account_id'].value?.name }}</a>\n <p-autoComplete *ngIf=\"!isFormEdit\"\n [suggestions]=\"filteredAccounts\"\n formControlName=\"crm_account_id\"\n dataKey=\"id\"\n field=\"name\"\n [dropdown]=\"true\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n [inputStyleClass]=\"\n (f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors\n ? 'invalid-field'\n : ''\n \"\n placeholder=\"Search accounts\"\n [multiple]=\"false\">\n </p-autoComplete>\n <span *ngIf=\"(f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors\"\n class=\"text-danger\">account is required</span>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"email\">{{ 'Crm.ContactMessage.Email' | transloco }}</label>\n <a href=\"mailTo:{{ data.email }}\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data.email\">{{ data.email }}</a>\n <input type=\"text\"\n *ngIf=\"!isFormEdit || !data.email\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"email\"\n [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"linkedinUrl\">{{\n 'Crm.ContactMessage.LinkedInUrl' | transloco\n }}</label>\n <a [href]=\"data.linkedin_url\"\n target=\"blank\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data.linkedin_url\">{{ data.linkedin_url }}</a>\n <input *ngIf=\"!isFormEdit || !data.linkedin_url\"\n type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"linkedin_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['linkedin_url'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"Headline\">{{\n 'Crm.ContactMessage.Headline' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"headline\"\n [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"data.tel\">\n <label class=\"label mb-0\" for=\"Tel\">{{ 'Crm.ContactMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"tel\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"Potential\">{{\n 'Crm.ContactMessage.Potential' | transloco\n }}</label>\n <p-dropdown\n formControlName=\"potential\"\n [options]=\"potentials\"\n [placeholder]=\"'Select Potential'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['potential'].errors }\">\n </p-dropdown>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\"for=\"Labels\">{{ 'Crm.ContactMessage.Labels' | transloco }} </label>\n <p-multiSelect [options]=\"labels\"\n [class.disableFormControl]=\"isFormEdit\"\n formControlName=\"labels\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div *ngIf=\"!isFormEdit\"\n class=\"text-end form-action-buttons\">\n <input type=\"button\"\n class=\"btn btn-outline-primary\"\n (click)=\"isFormEdit = !isFormEdit; getUserInfo()\"\n value=\"Cancel\" />\n <input type=\"button\"\n class=\"btn btn-primary ms-3\"\n value=\"Submit\"\n (click)=\"updateContactInfo()\" />\n </div>\n </form>\n </div>\n </div>\n <div class=\"col-12 col-md-8\">\n <ul ngbNav\n #nav=\"ngbNav\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Notes</a>\n <ng-template ngbNavContent>\n <form [formGroup]=\"actionControls\"\n (ngSubmit)=\"onSave()\">\n <textarea class=\"form-control\"\n formControlName=\"comment\"\n rows=\"6\"></textarea>\n <p class=\"text-danger\"\n *ngIf=\"\n actionControls.get('comment').touched &&\n actionControls.get('comment').invalid\n \">\n Note Required\n </p>\n <div *ngIf=\"actions.length\"\n class=\"d-block clear-both pt-3\">\n <ng-container *ngFor=\"let action of actions; index as i\">\n <button *ngIf=\"action.visible\"\n type=\"button\"\n [class.active]=\"\"\n class=\"btn btn-sm me-2 btn-outline-primary mb-2 action-btn\"\n (click)=\"showDatePicker($event, action.id); d.toggle()\">\n {{ action.name }}\n </button>\n </ng-container>\n <div class=\"text-danger\"\n *ngIf=\"submitAction && actionFormControls['crm_action_id'].invalid\">\n Please select an action\n </div>\n <div class=\"row mt-3\">\n <div class=\"col-12 col-sm-4\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (click)=\"d.toggle()\" />\n </div>\n </div>\n <div class=\"col-sm-4 pe-0 completed-toggle\">\n <div class=\"mb-3\">\n <ui-switch checkedLabel=\"completed\"\n uncheckedLabel=\"open\"\n formControlName=\"completed\"\n name=\"completed\">\n </ui-switch>\n </div>\n </div>\n </div>\n </div>\n <div class=\"float-end\">\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n [disabled]=\"buttonDisable\"\n class=\"btn btn-primary mt-2 mb-2 float-end\">Submit Note</button>\n <a class=\"btn btn-outline-primary mt-2 mb-2 me-0 me-sm-2 float-end\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n </div>\n <div *ngIf=\"buttonDisable\"\n class=\"no-actions pt-4\">\n <pw-no-data [withImage]=\"true\" [message]=\"\n 'Crm.ContactMessage.NoActionsInContactInfoMessage' | transloco\n \">\n <span><a [routerLink]=\"[\n '/' +\n subscription?.slug +\n routers.configurations +\n 'actions'\n ]\">Take me to the actions configuration section.</a></span>\n </pw-no-data>\n </div>\n </form>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div *ngIf=\"!contactComments?.length && isLoaded\"\n class=\"no-actions pt-3\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoActionsMessage' | transloco\">\n </pw-no-data>\n </div>\n <div *ngIf=\"contactComments.length\"\n id=\"timeline\"\n class=\"pt-3 clear-both timeline-center timeline-wrapper\">\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n </ul>\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd }\"\n *ngFor=\"\n let item of contactComments;\n index as i;\n let odd = odd;\n let even = even\n \">\n <div class=\"timeline-badge\">\n <span class=\"bg-red bg-lighten-1\">\n <span class=\"timeline-year\">\n <span class=\"d-block date-year\">{{\n item.when | date: 'medium' | slice: 0:3\n }}</span>\n <span>{{ item.year }}</span></span>\n </span>\n </div>\n <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n <div class=\"card-header py-4\">\n <div class=\"mb-0 clearfix\">\n <textarea type=\"text\"\n name=\"comment\"\n class=\"comment-field form-control p-0\"\n [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n <p class=\"float-start mb-0\"\n *ngIf=\"!showFullComment || item.id !== commentId\">\n {{ item.comment | slice: 0:170\n }}<a *ngIf=\"item.comment.length > 170\"\n class=\"text-secondary\"\n (click)=\"\n showFullComment = true; commentId = item.id\n \">...show more</a>\n </p>\n <p class=\"float-start mb-0\"\n *ngIf=\"showFullComment && item.id === commentId\">\n {{ item.comment }}\n <a *ngIf=\"\n item.comment.length > 170 && showFullComment\n \"\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n </p>\n <button class=\"btn btn-md edit-btn float-end py-0\"\n (click)=\"showEditControls($event)\"\n *ngIf=\"userId === item.owner_id || hasAccess\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <div class=\"card-subtitle text-muted my-0 clearfix\">\n <div class=\"float-start\">\n <span *ngIf=\"!updating || actionId !== item.id\"\n class=\"font-small-3\">\n {{ item.when }}</span>\n <input *ngIf=\"updating && actionId === item.id\"\n placeholder=\"dd-mmm-yyyy\"\n [value]=\"item.when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\" />\n </div>\n <button type=\" button\"\n class=\"btn btn-sm float-end when-btn py-0\"\n *ngIf=\"userId === item.owner_id || hasAccess\"\n (click)=\"showDatePickerUpdate(item.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <p [class.text-danger]=\"!item.color\"\n *ngIf=\"!item.cancelled && !item.completed\"\n class=\"mb-0\">\n {{ item.due }}\n </p>\n <p>\n {{ item.owner.first_name + ' ' + item.owner.last_name }}\n </p>\n <span class=\"badge bg-primary\">{{\n item?.crm_action?.name\n }}</span>\n <span *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n class=\"badge bg-success ms-2\">Open</span>\n <a *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as completed\"\n aria-label=\"Set as completed\"\n class=\"me-3 ms-3\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \">\n <i class=\"fa fa-tasks completed\" aria-hidden=\"true\"></i>\n </a>\n <a *ngIf=\"\n !item.cancelled &&\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as cancelled\"\n aria-label=\"Set as cancelled\"\n href=\"#\"\n (click)=\"$event.preventDefault(); setAsCancelled(item.id, item)\">\n <i\n class=\"fa fa-times delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <a *ngIf=\"\n item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as UnCompleted\"\n aria-label=\"Set as UnCompleted\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \"\n class=\"ms-2\">\n <i class=\"far fa-window-close\" aria-hidden=\"true\"></i>\n </a>\n <div class=\"control-btns mt-3 text-end\">\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-default me-2\"\n (click)=\"showEditControls(undefined)\">\n Cancel\n </button>\n <button class=\"btn btn-sm btn-primary\"\n type=\"button\"\n (click)=\"updateComment(item)\">\n Submit\n </button>\n </div>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Versioning</a>\n <ng-template ngbNavContent>\n <div *ngFor=\"let version of contactVersioning\">\n <p>\n <strong>Event: </strong>{{ version.event }} | <strong>Author: </strong><a *ngIf=\"version?.author\"\n [routerLink]=\"['/members', version?.author?.slug]\">{{ version?.author | ifNameNullShowEmail }}</a>\n | <strong>Created at: </strong>{{ version.created_at | dateFormat: 'datetime' }}<br />\n <strong>Object: </strong>{{ version.object | json }}\n </p>\n <hr />\n </div>\n <div *ngIf=\"contactVersioning?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoVersionsMessage' | transloco\">\n </pw-no-data>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Files</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-company-files [contactId]=\"contactId\"\n [accountId]=\"accountId\">\n </pw-smart-crm-company-files>\n </ng-template>\n </li>\n </ul>\n\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <div class=\"row p-2\">\n <div class=\"col-12\">\n <div class=\"upload-box\">\n <div class=\"upload-box-content\">\n <div class=\"drop-container\"\n ngFileDrop\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\">\n <p>\n Drag files here or\n <label class=\"upload-button\">\n <input type=\"file\"\n ngFileSelect\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\"\n multiple />\n browse\n </label>\n to upload.\n </p>\n </div>\n <div class=\"upload-item\"\n *ngFor=\"let f of files; let i = index\">\n <div class=\"upload-item-content\">\n <div class=\"filename\">\n <div class=\"filename-left\">\n <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n <span>{{ f.name }}</span>\n </div>\n </div>\n <div class=\"progress-content\">\n <div class=\"progress\">\n <span class=\"bar\"\n [style.width]=\"f?.progress?.data?.percentage + '%'\"\n [class.is-done]=\"f['uploaded']\"></span>\n </div>\n </div>\n <div class=\"progress-text-content\">\n <span class=\"progress-text\"\n [class.is-done]=\"f['uploaded']\">\n <span *ngIf=\"!f['uploaded']\">{{ f.progress?.data?.percentage - 1 }}%\n </span>\n <span *ngIf=\"f['uploaded']\">100 %</span>\n <span *ngIf=\"!f['uploaded']\">Uploading...</span>\n <span *ngIf=\"f['uploaded']\">Done</span>\n </span>\n <span class=\"speed-and-eta-text\"\n *ngIf=\"f.progress?.data?.percentage !== 0 && !f['uploaded']\">\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.show-controls .comment-field,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled input,.isDisabled textarea,.isDisabled p-dropdown,.isDisabled select{pointer-events:none}.timeline-card.card{min-height:auto}@media (max-width: 768px){.completed-toggle{padding-top:10px}}.when-btn:focus{border:0;box-shadow:none}.no-actions{clear:both}::ng-deep body .invalid-field{border:1px solid rgb(255,88,107)!important}.action-btn.active{color:#fff!important;background-color:var(--first)}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"] }]
|
|
3206
3206
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i2$2.NgbCalendar }, { type: i2$2.NgbModal }, { type: i2.AuthService }, { type: i2.GeoService }, { type: Document, decorators: [{
|
|
3207
3207
|
type: Inject,
|
|
3208
3208
|
args: [DOCUMENT]
|
|
3209
3209
|
}] }] });
|
|
3210
3210
|
|
|
3211
3211
|
class SmartCrmContactComponent extends AppBaseComponent {
|
|
3212
|
+
lastSeenAtTextClass(value) {
|
|
3213
|
+
return HelperService.lastSeenAtTextClass(value);
|
|
3214
|
+
}
|
|
3212
3215
|
constructor(crmService, injector, cdr) {
|
|
3213
3216
|
super(injector);
|
|
3214
3217
|
this.crmService = crmService;
|
|
@@ -3476,11 +3479,11 @@ class SmartCrmContactComponent extends AppBaseComponent {
|
|
|
3476
3479
|
super.ngOnDestroy();
|
|
3477
3480
|
}
|
|
3478
3481
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SmartCrmContactComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3479
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: SmartCrmContactComponent, isStandalone: false, selector: "pw-crm-contacts", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <h2 *ngIf=\"!accountData?.name\">Contacts</h2>\n <h3 *ngIf=\"accountData?.name\"\n class=\"mb-2\">\n {{ accountData.name }}\n <span *ngIf=\"hasAccess || accountData.owner_id === userId\" [routerLink]=\"['/' + subscription?.slug + routers.accounts, accountData.id]\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></span>\n </h3>\n <h4 *ngIf=\"accountData?.location\"\n class=\"mb-1\">Location: {{ accountData.location }}</h4>\n <h4 *ngIf=\"accountData?.tel\">Tel: {{ accountData.tel }}</h4>\n <h4 *ngIf=\"accountData?.company_url\">\n URL:\n <a href=\"{{ accountData.company_url }}\"\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n {{ accountData.company_url }}\n </a>\n </h4>\n <a class=\"btn btn-sm btn-outline-primary float-end mb-3 ms-2\"\n data-cy=\"add-opportunities\"\n (click)=\"navigateToOpportunities()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.contactAdd, accountId]\"\n *ngIf=\"accountData?.name\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n *ngIf=\"!accountData?.name\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary me-3 float-end\"\n data-cy=\"list-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.contacts]\"\n *ngIf=\"accountData?.name\">\n <i class=\"fa fa-plus-list\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.ShowAllContacts' | transloco }}\n </a>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table class=\"table\"\n #dt\n [value]=\"data.contacts\"\n [paginator]=\"data.object_count !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [lazy]=\"true\"\n [filterDelay]=\"1000\"\n stateStorage=\"local\"\n stateKey=\"smart-crm-contacts\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row\">\n <div class=\"col-sm-3 col-6 mb-sm-0 mb-0\">\n <p-dropdown\n [options]=\"potential\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [(ngModel)]=\"filterByPotentials\"\n [placeholder]=\"'Select Priority'\"\n (onChange)=\"filterByPotential($event.value)\">\n </p-dropdown>\n </div>\n <div class=\"col-sm-3 col-6\">\n <p-multiSelect [(ngModel)]=\"selectedLabels\" placeholder=\"Select Label\" [options]=\"labels\" [filter]=\"true\"\n [showHeader]=\"true\" [showToggleAll]=\"true\" (onChange)=\"onLabelChange($event)\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <!-- multiple select account drop down -->\n <div class=\"col-sm-3 col-6\">\n <p-multiSelect [(ngModel)]=\"selectedAccount\" placeholder=\"Select Account\" [options]=\"accountDropDown\" [filter]=\"true\"\n [showHeader]=\"true\" [showToggleAll]=\"true\" optionLabel=\"name\" (onChange)=\"onSelectAccount()\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-3 col-md-4 col-lg-3\">\n <div class=\"d-flex\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input type=\"text\" [(ngModel)]=\"searchText\" pInputText placeholder=\"Search contact...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"form-control\" />\n </div>\n </div>\n\n </div>\n\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Crm.ContactMessage.Name' | transloco }}\n <p-sortIcon field=\"first_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"owner_id\">\n {{ 'Crm.ContactMessage.ContactOwner' | transloco }}\n <p-sortIcon field=\"owner_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_account_id\">\n {{ 'Crm.ContactMessage.AccountOwner' | transloco }}\n <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"labels\">\n {{ 'Crm.ContactMessage.Labels' | transloco }}\n <p-sortIcon field=\"labels\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"potential\">\n {{ 'Crm.ContactMessage.Potential' | transloco }}\n <p-sortIcon field=\"potential\"></p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-contact>\n <tr>\n <td data-head=\"Name\"\n class=\"contactname\">\n <a ngbTooltip=\"{{contact.headline ? contact.headline : 'No headline for this contact'}}\"\n [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, contact.id]\">{{ (contact?.first_name || '') + ' ' + (contact?.last_name || '') | textTruncate: 20 }}\n </a>\n </td>\n <td data-head=\"OwnerName\">{{ contact.owner | ifNameNullShowEmail }}</td>\n <td data-head=\"Account Name\">\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n contact.crm_account.id\n ]\" ngbTooltip=\"{{contact?.crm_account.name}}\">{{ contact?.crm_account.name | textTruncate: 20 }}</a>\n </td>\n <td data-head=\"Labels\">\n <span class=\"badge bg-info m-1\"\n *ngFor=\"let item of contact.labels\">{{\n item\n }}</span>\n </td>\n <td data-head=\"Potential\">\n <span [appDynamicBadge]=\"{ itemsArray: potential, item: contact.potential }\"\n color=\"warning\"\n class=\"badge\">{{ contact.potential }}</span>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Show\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' + subscription?.slug + '/crm/contacts/info',\n contact.id\n ]\">\n <i class=\"fa fa-eye see-icon\" aria-hidden=\"true\"></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Add opportunity\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\"\n [queryParams]=\"{ contact_id: contact.id }\">\n <i class=\"fa fa-plus-circle add-icon\" aria-hidden=\"true\"></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactDetails,\n contact.id\n ]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (keydown.enter)=\"onDelete(contact.id)\"\n (keydown.space)=\"onDelete(contact.id)\"\n (click)=\"onDelete(contact.id)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n</div>\n <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\"> </pw-no-data>\n</div>\n\n<ng-container>\n <div class=\"row mt-5\"\n *ngIf=\"isLoaded && !accountData?.name\">\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Watch Closely</h5>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"contactInsight?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"contactInsight\"\n [paginator]=\"contactInsight?.length !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"contactInsight.length\"\n [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Contact' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.ContactMessage.Reason' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-insight>\n <tr>\n <td data-head=\"Contact\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, insight.crm_contact_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Headline\">\n <span\n [ngbTooltip]=\"insight?.headline\"\n container=\"body\"\n tooltipClass=\"custom-tooltip\"\n placement=\"bottom\"\n >\n {{ insight?.headline | textTruncate: 20 }}\n </span>\n </td>\n <td data-head=\"Reason\">\n {{ insight.reason }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"contactInsight?.length !== 0\">Total: {{ contactInsight.length }}</span>\n </div>\n <div *ngIf=\"!contactInsight?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Contacts Location</h5>\n <div>\n <ng-template [ngIf]=\"contactGeography\">\n <plotly-plot [data]=\"contactGeography?.data\"\n [config]=\"contactGeography?.config\"\n [layout]=\"contactGeography?.layout\" [useResizeHandler]=\"contactGeography ? true : false\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"!contactGeography\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.table tr{vertical-align:baseline}@media (min-width: 640px){.list-inline{width:150px}}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i8.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i9.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i8.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i10.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i15.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i11$2.TranslocoPipe, name: "transloco" }] }); }
|
|
3482
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: SmartCrmContactComponent, isStandalone: false, selector: "pw-crm-contacts", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <h2 *ngIf=\"!accountData?.name\">Contacts</h2>\n <h3 *ngIf=\"accountData?.name\"\n class=\"mb-2\">\n {{ accountData.name }}\n <span *ngIf=\"hasAccess || accountData.owner_id === userId\" [routerLink]=\"['/' + subscription?.slug + routers.accounts, accountData.id]\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></span>\n </h3>\n <h4 *ngIf=\"accountData?.location\"\n class=\"mb-1\">Location: {{ accountData.location }}</h4>\n <h4 *ngIf=\"accountData?.tel\">Tel: {{ accountData.tel }}</h4>\n <h4 *ngIf=\"accountData?.company_url\">\n URL:\n <a href=\"{{ accountData.company_url }}\"\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n {{ accountData.company_url }}\n </a>\n </h4>\n <a class=\"btn btn-sm btn-outline-primary float-end mb-3 ms-2\"\n data-cy=\"add-opportunities\"\n (click)=\"navigateToOpportunities()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.contactAdd, accountId]\"\n *ngIf=\"accountData?.name\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n *ngIf=\"!accountData?.name\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary me-3 float-end\"\n data-cy=\"list-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.contacts]\"\n *ngIf=\"accountData?.name\">\n <i class=\"fa fa-plus-list\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.ShowAllContacts' | transloco }}\n </a>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table class=\"table\"\n #dt\n [value]=\"data.contacts\"\n [paginator]=\"data.object_count !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [lazy]=\"true\"\n [filterDelay]=\"1000\"\n stateStorage=\"local\"\n stateKey=\"smart-crm-contacts\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row\">\n <div class=\"col-sm-3 col-6 mb-sm-0 mb-0\">\n <p-dropdown\n [options]=\"potential\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [(ngModel)]=\"filterByPotentials\"\n [placeholder]=\"'Select Priority'\"\n (onChange)=\"filterByPotential($event.value)\">\n </p-dropdown>\n </div>\n <div class=\"col-sm-3 col-6\">\n <p-multiSelect [(ngModel)]=\"selectedLabels\" placeholder=\"Select Label\" [options]=\"labels\" [filter]=\"true\"\n [showHeader]=\"true\" [showToggleAll]=\"true\" (onChange)=\"onLabelChange($event)\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <!-- multiple select account drop down -->\n <div class=\"col-sm-3 col-6\">\n <p-multiSelect [(ngModel)]=\"selectedAccount\" placeholder=\"Select Account\" [options]=\"accountDropDown\" [filter]=\"true\"\n [showHeader]=\"true\" [showToggleAll]=\"true\" optionLabel=\"name\" (onChange)=\"onSelectAccount()\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-3 col-md-4 col-lg-3\">\n <div class=\"d-flex\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input type=\"text\" [(ngModel)]=\"searchText\" pInputText placeholder=\"Search contact...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"form-control\" />\n </div>\n </div>\n\n </div>\n\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Crm.ContactMessage.Name' | transloco }}\n <p-sortIcon field=\"first_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"owner_id\">\n {{ 'Crm.ContactMessage.ContactOwner' | transloco }}\n <p-sortIcon field=\"owner_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_account_id\">\n {{ 'Crm.ContactMessage.AccountOwner' | transloco }}\n <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"labels\">\n {{ 'Crm.ContactMessage.Labels' | transloco }}\n <p-sortIcon field=\"labels\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"potential\">\n {{ 'Crm.ContactMessage.Potential' | transloco }}\n <p-sortIcon field=\"potential\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_logged_in_at\">\n Last Seen At\n <p-sortIcon field=\"last_logged_in_at\"></p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-contact>\n <tr>\n <td data-head=\"Name\"\n class=\"contactname\">\n <a ngbTooltip=\"{{contact.headline ? contact.headline : 'No headline for this contact'}}\"\n [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, contact.id]\">{{ (contact?.first_name || '') + ' ' + (contact?.last_name || '') | textTruncate: 20 }}\n </a>\n </td>\n <td data-head=\"OwnerName\">{{ contact.owner | ifNameNullShowEmail }}</td>\n <td data-head=\"Account Name\">\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n contact.crm_account.id\n ]\" ngbTooltip=\"{{contact?.crm_account.name}}\">{{ contact?.crm_account.name | textTruncate: 20 }}</a>\n </td>\n <td data-head=\"Labels\">\n <span class=\"badge bg-info m-1\"\n *ngFor=\"let item of contact.labels\">{{\n item\n }}</span>\n </td>\n <td data-head=\"Potential\">\n <span [appDynamicBadge]=\"{ itemsArray: potential, item: contact.potential }\"\n color=\"warning\"\n class=\"badge\">{{ contact.potential }}</span>\n </td>\n <td data-head=\"Last Seen At\">\n <ng-container *ngIf=\"contact?.last_logged_in_at\">\n <span [ngClass]=\"lastSeenAtTextClass(contact?.last_logged_in_at)\">\n {{ contact?.last_logged_in_at | dateFormat }}\n </span>\n </ng-container>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Show\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' + subscription?.slug + '/crm/contacts/info',\n contact.id\n ]\">\n <i class=\"fa fa-eye see-icon\" aria-hidden=\"true\"></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Add opportunity\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\"\n [queryParams]=\"{ contact_id: contact.id }\">\n <i class=\"fa fa-plus-circle add-icon\" aria-hidden=\"true\"></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactDetails,\n contact.id\n ]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (keydown.enter)=\"onDelete(contact.id)\"\n (keydown.space)=\"onDelete(contact.id)\"\n (click)=\"onDelete(contact.id)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n</div>\n <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\"> </pw-no-data>\n</div>\n\n<ng-container>\n <div class=\"row mt-5\"\n *ngIf=\"isLoaded && !accountData?.name\">\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Watch Closely</h5>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"contactInsight?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"contactInsight\"\n [paginator]=\"contactInsight?.length !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"contactInsight.length\"\n [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Contact' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.ContactMessage.Reason' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-insight>\n <tr>\n <td data-head=\"Contact\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, insight.crm_contact_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Headline\">\n <span\n [ngbTooltip]=\"insight?.headline\"\n container=\"body\"\n tooltipClass=\"custom-tooltip\"\n placement=\"bottom\"\n >\n {{ insight?.headline | textTruncate: 20 }}\n </span>\n </td>\n <td data-head=\"Reason\">\n {{ insight.reason }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"contactInsight?.length !== 0\">Total: {{ contactInsight.length }}</span>\n </div>\n <div *ngIf=\"!contactInsight?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Contacts Location</h5>\n <div>\n <ng-template [ngIf]=\"contactGeography\">\n <plotly-plot [data]=\"contactGeography?.data\"\n [config]=\"contactGeography?.config\"\n [layout]=\"contactGeography?.layout\" [useResizeHandler]=\"contactGeography ? true : false\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"!contactGeography\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.table tr{vertical-align:baseline}@media (min-width: 640px){.list-inline{width:150px}}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i8.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i9.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i8.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i10.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i15.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i15.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i11$2.TranslocoPipe, name: "transloco" }] }); }
|
|
3480
3483
|
}
|
|
3481
3484
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SmartCrmContactComponent, decorators: [{
|
|
3482
3485
|
type: Component,
|
|
3483
|
-
args: [{ selector: 'pw-crm-contacts', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <h2 *ngIf=\"!accountData?.name\">Contacts</h2>\n <h3 *ngIf=\"accountData?.name\"\n class=\"mb-2\">\n {{ accountData.name }}\n <span *ngIf=\"hasAccess || accountData.owner_id === userId\" [routerLink]=\"['/' + subscription?.slug + routers.accounts, accountData.id]\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></span>\n </h3>\n <h4 *ngIf=\"accountData?.location\"\n class=\"mb-1\">Location: {{ accountData.location }}</h4>\n <h4 *ngIf=\"accountData?.tel\">Tel: {{ accountData.tel }}</h4>\n <h4 *ngIf=\"accountData?.company_url\">\n URL:\n <a href=\"{{ accountData.company_url }}\"\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n {{ accountData.company_url }}\n </a>\n </h4>\n <a class=\"btn btn-sm btn-outline-primary float-end mb-3 ms-2\"\n data-cy=\"add-opportunities\"\n (click)=\"navigateToOpportunities()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.contactAdd, accountId]\"\n *ngIf=\"accountData?.name\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n *ngIf=\"!accountData?.name\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary me-3 float-end\"\n data-cy=\"list-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.contacts]\"\n *ngIf=\"accountData?.name\">\n <i class=\"fa fa-plus-list\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.ShowAllContacts' | transloco }}\n </a>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table class=\"table\"\n #dt\n [value]=\"data.contacts\"\n [paginator]=\"data.object_count !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [lazy]=\"true\"\n [filterDelay]=\"1000\"\n stateStorage=\"local\"\n stateKey=\"smart-crm-contacts\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row\">\n <div class=\"col-sm-3 col-6 mb-sm-0 mb-0\">\n <p-dropdown\n [options]=\"potential\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [(ngModel)]=\"filterByPotentials\"\n [placeholder]=\"'Select Priority'\"\n (onChange)=\"filterByPotential($event.value)\">\n </p-dropdown>\n </div>\n <div class=\"col-sm-3 col-6\">\n <p-multiSelect [(ngModel)]=\"selectedLabels\" placeholder=\"Select Label\" [options]=\"labels\" [filter]=\"true\"\n [showHeader]=\"true\" [showToggleAll]=\"true\" (onChange)=\"onLabelChange($event)\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <!-- multiple select account drop down -->\n <div class=\"col-sm-3 col-6\">\n <p-multiSelect [(ngModel)]=\"selectedAccount\" placeholder=\"Select Account\" [options]=\"accountDropDown\" [filter]=\"true\"\n [showHeader]=\"true\" [showToggleAll]=\"true\" optionLabel=\"name\" (onChange)=\"onSelectAccount()\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-3 col-md-4 col-lg-3\">\n <div class=\"d-flex\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input type=\"text\" [(ngModel)]=\"searchText\" pInputText placeholder=\"Search contact...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"form-control\" />\n </div>\n </div>\n\n </div>\n\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Crm.ContactMessage.Name' | transloco }}\n <p-sortIcon field=\"first_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"owner_id\">\n {{ 'Crm.ContactMessage.ContactOwner' | transloco }}\n <p-sortIcon field=\"owner_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_account_id\">\n {{ 'Crm.ContactMessage.AccountOwner' | transloco }}\n <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"labels\">\n {{ 'Crm.ContactMessage.Labels' | transloco }}\n <p-sortIcon field=\"labels\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"potential\">\n {{ 'Crm.ContactMessage.Potential' | transloco }}\n <p-sortIcon field=\"potential\"></p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-contact>\n <tr>\n <td data-head=\"Name\"\n class=\"contactname\">\n <a ngbTooltip=\"{{contact.headline ? contact.headline : 'No headline for this contact'}}\"\n [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, contact.id]\">{{ (contact?.first_name || '') + ' ' + (contact?.last_name || '') | textTruncate: 20 }}\n </a>\n </td>\n <td data-head=\"OwnerName\">{{ contact.owner | ifNameNullShowEmail }}</td>\n <td data-head=\"Account Name\">\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n contact.crm_account.id\n ]\" ngbTooltip=\"{{contact?.crm_account.name}}\">{{ contact?.crm_account.name | textTruncate: 20 }}</a>\n </td>\n <td data-head=\"Labels\">\n <span class=\"badge bg-info m-1\"\n *ngFor=\"let item of contact.labels\">{{\n item\n }}</span>\n </td>\n <td data-head=\"Potential\">\n <span [appDynamicBadge]=\"{ itemsArray: potential, item: contact.potential }\"\n color=\"warning\"\n class=\"badge\">{{ contact.potential }}</span>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Show\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' + subscription?.slug + '/crm/contacts/info',\n contact.id\n ]\">\n <i class=\"fa fa-eye see-icon\" aria-hidden=\"true\"></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Add opportunity\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\"\n [queryParams]=\"{ contact_id: contact.id }\">\n <i class=\"fa fa-plus-circle add-icon\" aria-hidden=\"true\"></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactDetails,\n contact.id\n ]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (keydown.enter)=\"onDelete(contact.id)\"\n (keydown.space)=\"onDelete(contact.id)\"\n (click)=\"onDelete(contact.id)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n</div>\n <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\"> </pw-no-data>\n</div>\n\n<ng-container>\n <div class=\"row mt-5\"\n *ngIf=\"isLoaded && !accountData?.name\">\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Watch Closely</h5>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"contactInsight?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"contactInsight\"\n [paginator]=\"contactInsight?.length !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"contactInsight.length\"\n [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Contact' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.ContactMessage.Reason' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-insight>\n <tr>\n <td data-head=\"Contact\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, insight.crm_contact_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Headline\">\n <span\n [ngbTooltip]=\"insight?.headline\"\n container=\"body\"\n tooltipClass=\"custom-tooltip\"\n placement=\"bottom\"\n >\n {{ insight?.headline | textTruncate: 20 }}\n </span>\n </td>\n <td data-head=\"Reason\">\n {{ insight.reason }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"contactInsight?.length !== 0\">Total: {{ contactInsight.length }}</span>\n </div>\n <div *ngIf=\"!contactInsight?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Contacts Location</h5>\n <div>\n <ng-template [ngIf]=\"contactGeography\">\n <plotly-plot [data]=\"contactGeography?.data\"\n [config]=\"contactGeography?.config\"\n [layout]=\"contactGeography?.layout\" [useResizeHandler]=\"contactGeography ? true : false\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"!contactGeography\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.table tr{vertical-align:baseline}@media (min-width: 640px){.list-inline{width:150px}}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}\n"] }]
|
|
3486
|
+
args: [{ selector: 'pw-crm-contacts', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <h2 *ngIf=\"!accountData?.name\">Contacts</h2>\n <h3 *ngIf=\"accountData?.name\"\n class=\"mb-2\">\n {{ accountData.name }}\n <span *ngIf=\"hasAccess || accountData.owner_id === userId\" [routerLink]=\"['/' + subscription?.slug + routers.accounts, accountData.id]\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></span>\n </h3>\n <h4 *ngIf=\"accountData?.location\"\n class=\"mb-1\">Location: {{ accountData.location }}</h4>\n <h4 *ngIf=\"accountData?.tel\">Tel: {{ accountData.tel }}</h4>\n <h4 *ngIf=\"accountData?.company_url\">\n URL:\n <a href=\"{{ accountData.company_url }}\"\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n {{ accountData.company_url }}\n </a>\n </h4>\n <a class=\"btn btn-sm btn-outline-primary float-end mb-3 ms-2\"\n data-cy=\"add-opportunities\"\n (click)=\"navigateToOpportunities()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.contactAdd, accountId]\"\n *ngIf=\"accountData?.name\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n *ngIf=\"!accountData?.name\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary me-3 float-end\"\n data-cy=\"list-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.contacts]\"\n *ngIf=\"accountData?.name\">\n <i class=\"fa fa-plus-list\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.ShowAllContacts' | transloco }}\n </a>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table class=\"table\"\n #dt\n [value]=\"data.contacts\"\n [paginator]=\"data.object_count !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [lazy]=\"true\"\n [filterDelay]=\"1000\"\n stateStorage=\"local\"\n stateKey=\"smart-crm-contacts\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row\">\n <div class=\"col-sm-3 col-6 mb-sm-0 mb-0\">\n <p-dropdown\n [options]=\"potential\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [(ngModel)]=\"filterByPotentials\"\n [placeholder]=\"'Select Priority'\"\n (onChange)=\"filterByPotential($event.value)\">\n </p-dropdown>\n </div>\n <div class=\"col-sm-3 col-6\">\n <p-multiSelect [(ngModel)]=\"selectedLabels\" placeholder=\"Select Label\" [options]=\"labels\" [filter]=\"true\"\n [showHeader]=\"true\" [showToggleAll]=\"true\" (onChange)=\"onLabelChange($event)\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <!-- multiple select account drop down -->\n <div class=\"col-sm-3 col-6\">\n <p-multiSelect [(ngModel)]=\"selectedAccount\" placeholder=\"Select Account\" [options]=\"accountDropDown\" [filter]=\"true\"\n [showHeader]=\"true\" [showToggleAll]=\"true\" optionLabel=\"name\" (onChange)=\"onSelectAccount()\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-3 col-md-4 col-lg-3\">\n <div class=\"d-flex\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input type=\"text\" [(ngModel)]=\"searchText\" pInputText placeholder=\"Search contact...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"form-control\" />\n </div>\n </div>\n\n </div>\n\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Crm.ContactMessage.Name' | transloco }}\n <p-sortIcon field=\"first_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"owner_id\">\n {{ 'Crm.ContactMessage.ContactOwner' | transloco }}\n <p-sortIcon field=\"owner_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_account_id\">\n {{ 'Crm.ContactMessage.AccountOwner' | transloco }}\n <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"labels\">\n {{ 'Crm.ContactMessage.Labels' | transloco }}\n <p-sortIcon field=\"labels\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"potential\">\n {{ 'Crm.ContactMessage.Potential' | transloco }}\n <p-sortIcon field=\"potential\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_logged_in_at\">\n Last Seen At\n <p-sortIcon field=\"last_logged_in_at\"></p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-contact>\n <tr>\n <td data-head=\"Name\"\n class=\"contactname\">\n <a ngbTooltip=\"{{contact.headline ? contact.headline : 'No headline for this contact'}}\"\n [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, contact.id]\">{{ (contact?.first_name || '') + ' ' + (contact?.last_name || '') | textTruncate: 20 }}\n </a>\n </td>\n <td data-head=\"OwnerName\">{{ contact.owner | ifNameNullShowEmail }}</td>\n <td data-head=\"Account Name\">\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n contact.crm_account.id\n ]\" ngbTooltip=\"{{contact?.crm_account.name}}\">{{ contact?.crm_account.name | textTruncate: 20 }}</a>\n </td>\n <td data-head=\"Labels\">\n <span class=\"badge bg-info m-1\"\n *ngFor=\"let item of contact.labels\">{{\n item\n }}</span>\n </td>\n <td data-head=\"Potential\">\n <span [appDynamicBadge]=\"{ itemsArray: potential, item: contact.potential }\"\n color=\"warning\"\n class=\"badge\">{{ contact.potential }}</span>\n </td>\n <td data-head=\"Last Seen At\">\n <ng-container *ngIf=\"contact?.last_logged_in_at\">\n <span [ngClass]=\"lastSeenAtTextClass(contact?.last_logged_in_at)\">\n {{ contact?.last_logged_in_at | dateFormat }}\n </span>\n </ng-container>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Show\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' + subscription?.slug + '/crm/contacts/info',\n contact.id\n ]\">\n <i class=\"fa fa-eye see-icon\" aria-hidden=\"true\"></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Add opportunity\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\"\n [queryParams]=\"{ contact_id: contact.id }\">\n <i class=\"fa fa-plus-circle add-icon\" aria-hidden=\"true\"></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactDetails,\n contact.id\n ]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (keydown.enter)=\"onDelete(contact.id)\"\n (keydown.space)=\"onDelete(contact.id)\"\n (click)=\"onDelete(contact.id)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n</div>\n <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\"> </pw-no-data>\n</div>\n\n<ng-container>\n <div class=\"row mt-5\"\n *ngIf=\"isLoaded && !accountData?.name\">\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Watch Closely</h5>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"contactInsight?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"contactInsight\"\n [paginator]=\"contactInsight?.length !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"contactInsight.length\"\n [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Contact' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.ContactMessage.Reason' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-insight>\n <tr>\n <td data-head=\"Contact\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, insight.crm_contact_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Headline\">\n <span\n [ngbTooltip]=\"insight?.headline\"\n container=\"body\"\n tooltipClass=\"custom-tooltip\"\n placement=\"bottom\"\n >\n {{ insight?.headline | textTruncate: 20 }}\n </span>\n </td>\n <td data-head=\"Reason\">\n {{ insight.reason }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"contactInsight?.length !== 0\">Total: {{ contactInsight.length }}</span>\n </div>\n <div *ngIf=\"!contactInsight?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Contacts Location</h5>\n <div>\n <ng-template [ngIf]=\"contactGeography\">\n <plotly-plot [data]=\"contactGeography?.data\"\n [config]=\"contactGeography?.config\"\n [layout]=\"contactGeography?.layout\" [useResizeHandler]=\"contactGeography ? true : false\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"!contactGeography\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.table tr{vertical-align:baseline}@media (min-width: 640px){.list-inline{width:150px}}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}\n"] }]
|
|
3484
3487
|
}], ctorParameters: () => [{ type: i1.CrmService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
|
|
3485
3488
|
|
|
3486
3489
|
class SmartCrmCustomerSuccessComponent {
|
|
@@ -6034,7 +6037,7 @@ class SmartCrmOpportunitiesInfoComponent extends AppBaseComponent {
|
|
|
6034
6037
|
super.ngOnDestroy();
|
|
6035
6038
|
}
|
|
6036
6039
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SmartCrmOpportunitiesInfoComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i2$2.NgbModal }, { token: i2.AuthService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6037
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: SmartCrmOpportunitiesInfoComponent, isStandalone: false, selector: "pw-smart-crm-opportunities-info", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-0\">\n <div class=\"me-auto mb-0\">\n <h2 class=\"mb-0\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"back()\"\n class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n Opportunity Info\n </h2>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"user-info p-3 card pb-0 h-auto\">\n <div class=\"mb-2 text-center\">\n <a class=\"profile-image\">\n <img width=\"100\"\n height=\"100\"\n class=\"rounded-circle img-border width-100\"\n alt=\"user\"\n src=\"assets/img/icons/male.png\" />\n </a>\n </div>\n <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n <h4 class=\"d-inline-block\">\n About <span *ngIf=\"data?.id\">{{ data.title }}</span>\n </h4>\n <a href=\"javascript:void(0);\"\n *ngIf=\"isFormEdit\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"\n isFormEdit = !isFormEdit; getAccountsBySubscription(); getAllContacts()\n \">Edit</a>\n </div>\n <form [formGroup]=\"aboutControls\"\n [class.isDisabled]=\"isFormEdit\">\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"Title\">{{\n 'Crm.OpportunitiesMessage.Title' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"title\"\n [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n </div>\n <div class=\"mb-3 ui-fluid skills-modal\"\n *ngIf=\"data?.crm_contact_id\">\n <label class=\"label mb-2\" for=\"Contact\">{{\n 'Crm.OpportunitiesMessage.Contact' | transloco\n }}</label>\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n data.crm_contact_id\n ]\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.crm_contact_id\">{{ data?.crm_contact?.first_name }} {{ data?.crm_contact?.last_name }}</a>\n <p-autoComplete *ngIf=\"!isFormEdit || !data?.crm_contact_id\"\n [suggestions]=\"filteredContacts\"\n formControlName=\"crm_contact_id\"\n dataKey=\"id\"\n field=\"displayName\"\n [dropdown]=\"true\"\n (completeMethod)=\"onContactSearch($event)\"\n styleClass=\"w-100\"\n placeholder=\"Search contacts\"\n [multiple]=\"false\">\n </p-autoComplete>\n </div>\n <div class=\"mb-3 ui-fluid skills-modal\">\n <label class=\"label mb-2\" for=\"Account\">{{\n 'Crm.OpportunitiesMessage.Account' | transloco\n }}</label>\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n data.crm_account_id\n ]\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.crm_account_id\">{{ data?.crm_account?.name }}</a>\n <p-autoComplete *ngIf=\"!isFormEdit || !data?.crm_account_id\"\n [suggestions]=\"filteredAccounts\"\n formControlName=\"crm_account_id\"\n dataKey=\"id\"\n field=\"name\"\n [dropdown]=\"true\"\n (completeMethod)=\"accountSearch($event)\"\n styleClass=\"w-100\"\n placeholder=\"Search accounts\"\n [multiple]=\"false\">\n </p-autoComplete>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"OneTimeAmount\">{{\n 'Crm.OpportunitiesMessage.OneTimeAmount' | transloco\n }}</label>\n <span class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.one_time_amount\">{{ data?.one_time_amount | currency }}</span>\n <input *ngIf=\"!isFormEdit || !data?.one_time_amount\"\n type=\"number\"\n numbersOnly\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"one_time_amount\"\n id=\"one_time_amount\"\n [ngClass]=\"{ 'is-invalid': submitted && f['one_time_amount'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"monthlyAmount\">{{\n 'Crm.OpportunitiesMessage.MonthlyAmount' | transloco\n }}</label>\n <span class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.monthly_amount\">{{ data?.monthly_amount | currency }}</span>\n <input *ngIf=\"!isFormEdit || !data?.monthly_amount\"\n type=\"number\"\n numbersOnly\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"monthly_amount\"\n id=\"monthly_amount\"\n [ngClass]=\"{ 'is-invalid': submitted && f['monthly_amount'].errors }\" />\n </div>\n <div *ngIf=\"!isFormEdit\"\n class=\"text-end form-action-buttons\">\n <input type=\"button\"\n class=\"btn btn-outline-primary\"\n (click)=\"isFormEdit = !isFormEdit; getOpportunityDetails()\"\n value=\"Cancel\" />\n <input type=\"button\"\n class=\"btn btn-primary ms-3\"\n value=\"Submit\"\n (click)=\"updateOpportunities()\" />\n </div>\n </form>\n </div>\n </div>\n <div class=\"col-12 col-md-8\">\n <ul ngbNav\n #nav=\"ngbNav\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Notes</a>\n <ng-template ngbNavContent>\n <form [formGroup]=\"actionControls\"\n (ngSubmit)=\"onCommentSave()\">\n <textarea class=\"form-control\"\n formControlName=\"comment\"\n rows=\"6\"></textarea>\n <p class=\"text-danger\"\n *ngIf=\"\n actionControls.get('comment').touched &&\n actionControls.get('comment').invalid\n \">\n Note Required\n </p>\n <div *ngIf=\"actions?.length\"\n class=\"d-block clear-both pt-3\">\n <ng-container *ngFor=\"let action of actions; index as i\">\n <button *ngIf=\"action.visible\"\n type=\"button\"\n [class.active]=\"\"\n class=\"btn btn-sm me-2 btn-outline-primary mb-2 action-btn\"\n (click)=\"showDatePicker($event, action.id); d.toggle()\">\n {{ action.name }}\n </button>\n </ng-container>\n <div class=\"text-danger\"\n *ngIf=\"submitAction && actionFormControls.crm_action_id.invalid\">\n Please select an action\n </div>\n <div class=\"row mt-3\">\n <div class=\"col-12 col-sm-4\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (click)=\"d.toggle()\" />\n </div>\n </div>\n <div class=\"col-sm-4 pe-0 completed-toggle\">\n <div class=\"mb-3\">\n <ui-switch checkedLabel=\"completed\"\n uncheckedLabel=\"open\"\n formControlName=\"completed\"\n name=\"completed\">\n </ui-switch>\n </div>\n </div>\n </div>\n </div>\n <div class=\"float-end\">\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n [disabled]=\"buttonDisable\"\n class=\"btn btn-primary mt-2 mb-2 float-end\"\n >Submit Note</button>\n <a class=\"btn btn-outline-primary mt-2 mb-2 me-0 me-sm-2 float-end\"\n (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n </div>\n <div *ngIf=\"buttonDisable\"\n class=\"no-actions pt-4\">\n <pw-no-data [withImage]=\"true\" [message]=\"\n 'Crm.OpportunitiesMessage.NoActionsInOpportunitiesInfoMessage'\n | transloco\n \">\n </pw-no-data>\n </div>\n </form>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div *ngIf=\"!opportunitiesComments?.length && isLoaded\"\n class=\"no-actions pt-3\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoActionsMessage' | transloco\">\n </pw-no-data>\n </div>\n <div *ngIf=\"opportunitiesComments?.length\"\n id=\"timeline\"\n class=\"pt-3 clear-both timeline-center timeline-wrapper\">\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n </ul>\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd }\"\n *ngFor=\"\n let item of opportunitiesComments;\n index as i;\n let odd = odd;\n let even = even\n \">\n <div class=\"timeline-badge\">\n <span class=\"bg-red bg-lighten-1\">\n <span class=\"timeline-year\">\n <span class=\"d-block date-year\">{{\n item.when | date: 'medium' | slice: 0:3\n }}</span>\n <span>{{ item.year }}</span>\n </span>\n </span>\n </div>\n <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n <div class=\"card-header py-4\">\n <div class=\"mb-0 clearfix\">\n <textarea type=\"text\"\n name=\"comment\"\n class=\"comment-field form-control p-0\"\n [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n <p class=\"float-start mb-0\"\n *ngIf=\"!showFullComment || item.id !== commentId\">\n {{ item.comment | slice: 0:170\n }}<a *ngIf=\"item.comment.length > 170\"\n class=\"text-secondary\"\n (click)=\"\n showFullComment = true; commentId = item.id\n \">...show more</a>\n </p>\n <p class=\"float-start mb-0\"\n *ngIf=\"showFullComment && item.id === commentId\">\n {{ item.comment }}\n <a *ngIf=\"\n item.comment.length > 170 && showFullComment\n \"\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n </p>\n <button class=\"btn btn-md edit-btn float-end py-0\"\n (click)=\"showEditControls($event)\"\n *ngIf=\"userId === item.owner_id || hasAccess\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <div class=\"card-subtitle text-muted my-0 clearfix\">\n <div class=\"float-start\">\n <span *ngIf=\"!updating || actionId !== item.id\"\n class=\"font-small-3\">\n {{ item.when }}</span>\n <input *ngIf=\"updating && actionId === item.id\"\n placeholder=\"dd-mmm-yyyy\"\n value=\"{{ item.when }}\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\" />\n </div>\n <button type=\" button\"\n class=\"btn btn-sm float-end when-btn py-0\"\n *ngIf=\"userId === item.owner_id || hasAccess\"\n (click)=\"showDatePickerUpdate(item.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <p [class.text-danger]=\"!item.color\"\n *ngIf=\"!item.cancelled && !item.completed\"\n class=\"mb-0\">\n {{ item.due }}\n </p>\n <p>\n {{\n item?.owner?.first_name +\n ' ' +\n item?.owner?.last_name\n }}\n </p>\n <span class=\"badge bg-primary\">{{\n item?.crm_action?.name\n }}</span>\n <span *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n class=\"badge bg-success ms-2\">Open</span>\n <a *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as completed\"\n aria-label=\"Set as completed\"\n class=\"me-3 ms-3\"\n href=\"javascript:void(0);\"\n (click)=\"\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \">\n <i class=\"fa fa-tasks completed\" aria-hidden=\"true\"></i>\n </a>\n <a *ngIf=\"\n !item.cancelled &&\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as cancelled\"\n aria-label=\"Set as cancelled\"\n href=\"javascript:void(0);\"\n (click)=\"setAsCancelled(item.id, item)\">\n <i\n class=\"fa fa-times delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <a *ngIf=\"\n item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as UnCompleted\"\n aria-label=\"Set as UnCompleted\"\n href=\"javascript:void(0);\"\n (click)=\"\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \"\n class=\"ms-2\">\n <i class=\"far fa-window-close\" aria-hidden=\"true\"></i>\n </a>\n <div class=\"control-btns mt-3 text-end\">\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-default me-2\"\n (click)=\"showEditControls(undefined)\">\n Cancel\n </button>\n <button class=\"btn btn-sm btn-primary\"\n type=\"button\"\n (click)=\"updateComment(item)\">\n Submit\n </button>\n </div>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Versioning</a>\n <ng-template ngbNavContent>\n <div *ngFor=\"let version of opportunitiesVersioning\">\n <p>\n <strong>Event: </strong>{{ version.event }} | <strong>Author: </strong><a *ngIf=\"version?.author\"\n [routerLink]=\"['/members', version?.author?.slug]\">{{ version?.author | ifNameNullShowEmail }}</a>\n | <strong>Created at: </strong>{{ version.created_at }}<br />\n <strong>Object: </strong>{{ version.object | json }}\n </p>\n <hr />\n </div>\n <div *ngIf=\"opportunitiesVersioning?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoVersionsMessage' | transloco\">\n </pw-no-data>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Files</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-company-files [contactId]=\"contactId\"\n [accountId]=\"accountId\"\n [opportunityId]=\"opportunitiesId\">\n </pw-smart-crm-company-files>\n </ng-template>\n </li>\n </ul>\n\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n</div>\n\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <div class=\"row p-2\">\n <div class=\"col-12\">\n <div class=\"upload-box\">\n <div class=\"upload-box-content\">\n <div class=\"drop-container\"\n ngFileDrop\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\">\n <p>\n Drag files here or\n <label class=\"upload-button\">\n <input type=\"file\"\n ngFileSelect\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\"\n multiple />\n browse\n </label>\n to upload.\n </p>\n </div>\n <div class=\"upload-item\"\n *ngFor=\"let f of files; let i = index\">\n <div class=\"upload-item-content\">\n <div class=\"filename\">\n <div class=\"filename-left\">\n <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n <span>{{ f.name }}</span>\n </div>\n </div>\n <div class=\"progress-content\">\n <div class=\"progress\">\n <span class=\"bar\"\n [style.width]=\"f?.progress?.data?.percentage + '%'\"\n [class.is-done]=\"f['uploaded']\"></span>\n </div>\n </div>\n <div class=\"progress-text-content\">\n <span class=\"progress-text\"\n [class.is-done]=\"f['uploaded']\">\n <span *ngIf=\"!f['uploaded']\">{{ f.progress?.data?.percentage - 1 }}%\n </span>\n <span *ngIf=\"f['uploaded']\">100 %</span>\n <span *ngIf=\"!f['uploaded']\">Uploading...</span>\n <span *ngIf=\"f['uploaded']\">Done</span>\n </span>\n <span class=\"speed-and-eta-text\"\n *ngIf=\"f.progress?.data?.percentage !== 0 && !f['uploaded']\">\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.action-btn.active{color:#fff!important;background-color:var(--first)}.control-btns{display:none}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.show-controls .comment-field,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled select{pointer-events:none}.timeline-card.card{min-height:auto}@media (max-width: 768px){.completed-toggle{padding-top:10px}}.when-btn:focus{border:0;box-shadow:none}.no-actions{clear:both}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i5.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i5.NumberDirective, selector: "input[numbersOnly]" }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: i10.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i12.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i12.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: SmartCrmCompanyFilesComponent, selector: "pw-smart-crm-company-files", inputs: ["accountId", "contactId", "opportunityId"] }, { kind: "pipe", type: i2$1.JsonPipe, name: "json" }, { kind: "pipe", type: i2$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i15.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i11$2.TranslocoPipe, name: "transloco" }] }); }
|
|
6040
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: SmartCrmOpportunitiesInfoComponent, isStandalone: false, selector: "pw-smart-crm-opportunities-info", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-0\">\n <div class=\"me-auto mb-0\">\n <h2 class=\"mb-0\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"back()\"\n class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n Opportunity Info\n </h2>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"user-info p-3 card pb-0 h-auto\">\n <div class=\"mb-2 text-center\">\n <a class=\"profile-image\">\n <img width=\"100\"\n height=\"100\"\n class=\"rounded-circle img-border width-100\"\n alt=\"user\"\n src=\"assets/img/icons/male.png\" />\n </a>\n </div>\n <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n <h4 class=\"d-inline-block\">\n About <span *ngIf=\"data?.id\">{{ data.title }}</span>\n </h4>\n <a href=\"#\"\n *ngIf=\"isFormEdit\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"\n $event.preventDefault();\n isFormEdit = !isFormEdit; getAccountsBySubscription(); getAllContacts()\n \">Edit</a>\n </div>\n <form [formGroup]=\"aboutControls\"\n [class.isDisabled]=\"isFormEdit\">\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"Title\">{{\n 'Crm.OpportunitiesMessage.Title' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"title\"\n [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n </div>\n <div class=\"mb-3 ui-fluid skills-modal\"\n *ngIf=\"data?.crm_contact_id\">\n <label class=\"label mb-2\" for=\"Contact\">{{\n 'Crm.OpportunitiesMessage.Contact' | transloco\n }}</label>\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n data.crm_contact_id\n ]\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.crm_contact_id\">{{ data?.crm_contact?.first_name }} {{ data?.crm_contact?.last_name }}</a>\n <p-autoComplete *ngIf=\"!isFormEdit || !data?.crm_contact_id\"\n [suggestions]=\"filteredContacts\"\n formControlName=\"crm_contact_id\"\n dataKey=\"id\"\n field=\"displayName\"\n [dropdown]=\"true\"\n (completeMethod)=\"onContactSearch($event)\"\n styleClass=\"w-100\"\n placeholder=\"Search contacts\"\n [multiple]=\"false\">\n </p-autoComplete>\n </div>\n <div class=\"mb-3 ui-fluid skills-modal\">\n <label class=\"label mb-2\" for=\"Account\">{{\n 'Crm.OpportunitiesMessage.Account' | transloco\n }}</label>\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n data.crm_account_id\n ]\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.crm_account_id\">{{ data?.crm_account?.name }}</a>\n <p-autoComplete *ngIf=\"!isFormEdit || !data?.crm_account_id\"\n [suggestions]=\"filteredAccounts\"\n formControlName=\"crm_account_id\"\n dataKey=\"id\"\n field=\"name\"\n [dropdown]=\"true\"\n (completeMethod)=\"accountSearch($event)\"\n styleClass=\"w-100\"\n placeholder=\"Search accounts\"\n [multiple]=\"false\">\n </p-autoComplete>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"OneTimeAmount\">{{\n 'Crm.OpportunitiesMessage.OneTimeAmount' | transloco\n }}</label>\n <span class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.one_time_amount\">{{ data?.one_time_amount | currency }}</span>\n <input *ngIf=\"!isFormEdit || !data?.one_time_amount\"\n type=\"number\"\n numbersOnly\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"one_time_amount\"\n id=\"one_time_amount\"\n [ngClass]=\"{ 'is-invalid': submitted && f['one_time_amount'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"monthlyAmount\">{{\n 'Crm.OpportunitiesMessage.MonthlyAmount' | transloco\n }}</label>\n <span class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.monthly_amount\">{{ data?.monthly_amount | currency }}</span>\n <input *ngIf=\"!isFormEdit || !data?.monthly_amount\"\n type=\"number\"\n numbersOnly\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"monthly_amount\"\n id=\"monthly_amount\"\n [ngClass]=\"{ 'is-invalid': submitted && f['monthly_amount'].errors }\" />\n </div>\n <div *ngIf=\"!isFormEdit\"\n class=\"text-end form-action-buttons\">\n <input type=\"button\"\n class=\"btn btn-outline-primary\"\n (click)=\"isFormEdit = !isFormEdit; getOpportunityDetails()\"\n value=\"Cancel\" />\n <input type=\"button\"\n class=\"btn btn-primary ms-3\"\n value=\"Submit\"\n (click)=\"updateOpportunities()\" />\n </div>\n </form>\n </div>\n </div>\n <div class=\"col-12 col-md-8\">\n <ul ngbNav\n #nav=\"ngbNav\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Notes</a>\n <ng-template ngbNavContent>\n <form [formGroup]=\"actionControls\"\n (ngSubmit)=\"onCommentSave()\">\n <textarea class=\"form-control\"\n formControlName=\"comment\"\n rows=\"6\"></textarea>\n <p class=\"text-danger\"\n *ngIf=\"\n actionControls.get('comment').touched &&\n actionControls.get('comment').invalid\n \">\n Note Required\n </p>\n <div *ngIf=\"actions?.length\"\n class=\"d-block clear-both pt-3\">\n <ng-container *ngFor=\"let action of actions; index as i\">\n <button *ngIf=\"action.visible\"\n type=\"button\"\n [class.active]=\"\"\n class=\"btn btn-sm me-2 btn-outline-primary mb-2 action-btn\"\n (click)=\"showDatePicker($event, action.id); d.toggle()\">\n {{ action.name }}\n </button>\n </ng-container>\n <div class=\"text-danger\"\n *ngIf=\"submitAction && actionFormControls.crm_action_id.invalid\">\n Please select an action\n </div>\n <div class=\"row mt-3\">\n <div class=\"col-12 col-sm-4\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (click)=\"d.toggle()\" />\n </div>\n </div>\n <div class=\"col-sm-4 pe-0 completed-toggle\">\n <div class=\"mb-3\">\n <ui-switch checkedLabel=\"completed\"\n uncheckedLabel=\"open\"\n formControlName=\"completed\"\n name=\"completed\">\n </ui-switch>\n </div>\n </div>\n </div>\n </div>\n <div class=\"float-end\">\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n [disabled]=\"buttonDisable\"\n class=\"btn btn-primary mt-2 mb-2 float-end\"\n >Submit Note</button>\n <a class=\"btn btn-outline-primary mt-2 mb-2 me-0 me-sm-2 float-end\"\n (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n </div>\n <div *ngIf=\"buttonDisable\"\n class=\"no-actions pt-4\">\n <pw-no-data [withImage]=\"true\" [message]=\"\n 'Crm.OpportunitiesMessage.NoActionsInOpportunitiesInfoMessage'\n | transloco\n \">\n </pw-no-data>\n </div>\n </form>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div *ngIf=\"!opportunitiesComments?.length && isLoaded\"\n class=\"no-actions pt-3\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoActionsMessage' | transloco\">\n </pw-no-data>\n </div>\n <div *ngIf=\"opportunitiesComments?.length\"\n id=\"timeline\"\n class=\"pt-3 clear-both timeline-center timeline-wrapper\">\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n </ul>\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd }\"\n *ngFor=\"\n let item of opportunitiesComments;\n index as i;\n let odd = odd;\n let even = even\n \">\n <div class=\"timeline-badge\">\n <span class=\"bg-red bg-lighten-1\">\n <span class=\"timeline-year\">\n <span class=\"d-block date-year\">{{\n item.when | date: 'medium' | slice: 0:3\n }}</span>\n <span>{{ item.year }}</span>\n </span>\n </span>\n </div>\n <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n <div class=\"card-header py-4\">\n <div class=\"mb-0 clearfix\">\n <textarea type=\"text\"\n name=\"comment\"\n class=\"comment-field form-control p-0\"\n [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n <p class=\"float-start mb-0\"\n *ngIf=\"!showFullComment || item.id !== commentId\">\n {{ item.comment | slice: 0:170\n }}<a *ngIf=\"item.comment.length > 170\"\n class=\"text-secondary\"\n (click)=\"\n showFullComment = true; commentId = item.id\n \">...show more</a>\n </p>\n <p class=\"float-start mb-0\"\n *ngIf=\"showFullComment && item.id === commentId\">\n {{ item.comment }}\n <a *ngIf=\"\n item.comment.length > 170 && showFullComment\n \"\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n </p>\n <button class=\"btn btn-md edit-btn float-end py-0\"\n (click)=\"showEditControls($event)\"\n *ngIf=\"userId === item.owner_id || hasAccess\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <div class=\"card-subtitle text-muted my-0 clearfix\">\n <div class=\"float-start\">\n <span *ngIf=\"!updating || actionId !== item.id\"\n class=\"font-small-3\">\n {{ item.when }}</span>\n <input *ngIf=\"updating && actionId === item.id\"\n placeholder=\"dd-mmm-yyyy\"\n value=\"{{ item.when }}\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\" />\n </div>\n <button type=\" button\"\n class=\"btn btn-sm float-end when-btn py-0\"\n *ngIf=\"userId === item.owner_id || hasAccess\"\n (click)=\"showDatePickerUpdate(item.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <p [class.text-danger]=\"!item.color\"\n *ngIf=\"!item.cancelled && !item.completed\"\n class=\"mb-0\">\n {{ item.due }}\n </p>\n <p>\n {{\n item?.owner?.first_name +\n ' ' +\n item?.owner?.last_name\n }}\n </p>\n <span class=\"badge bg-primary\">{{\n item?.crm_action?.name\n }}</span>\n <span *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n class=\"badge bg-success ms-2\">Open</span>\n <a *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as completed\"\n aria-label=\"Set as completed\"\n class=\"me-3 ms-3\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \">\n <i class=\"fa fa-tasks completed\" aria-hidden=\"true\"></i>\n </a>\n <a *ngIf=\"\n !item.cancelled &&\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as cancelled\"\n aria-label=\"Set as cancelled\"\n href=\"#\"\n (click)=\"$event.preventDefault(); setAsCancelled(item.id, item)\">\n <i\n class=\"fa fa-times delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <a *ngIf=\"\n item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as UnCompleted\"\n aria-label=\"Set as UnCompleted\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \"\n class=\"ms-2\">\n <i class=\"far fa-window-close\" aria-hidden=\"true\"></i>\n </a>\n <div class=\"control-btns mt-3 text-end\">\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-default me-2\"\n (click)=\"showEditControls(undefined)\">\n Cancel\n </button>\n <button class=\"btn btn-sm btn-primary\"\n type=\"button\"\n (click)=\"updateComment(item)\">\n Submit\n </button>\n </div>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Versioning</a>\n <ng-template ngbNavContent>\n <div *ngFor=\"let version of opportunitiesVersioning\">\n <p>\n <strong>Event: </strong>{{ version.event }} | <strong>Author: </strong><a *ngIf=\"version?.author\"\n [routerLink]=\"['/members', version?.author?.slug]\">{{ version?.author | ifNameNullShowEmail }}</a>\n | <strong>Created at: </strong>{{ version.created_at }}<br />\n <strong>Object: </strong>{{ version.object | json }}\n </p>\n <hr />\n </div>\n <div *ngIf=\"opportunitiesVersioning?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoVersionsMessage' | transloco\">\n </pw-no-data>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Files</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-company-files [contactId]=\"contactId\"\n [accountId]=\"accountId\"\n [opportunityId]=\"opportunitiesId\">\n </pw-smart-crm-company-files>\n </ng-template>\n </li>\n </ul>\n\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n</div>\n\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <div class=\"row p-2\">\n <div class=\"col-12\">\n <div class=\"upload-box\">\n <div class=\"upload-box-content\">\n <div class=\"drop-container\"\n ngFileDrop\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\">\n <p>\n Drag files here or\n <label class=\"upload-button\">\n <input type=\"file\"\n ngFileSelect\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\"\n multiple />\n browse\n </label>\n to upload.\n </p>\n </div>\n <div class=\"upload-item\"\n *ngFor=\"let f of files; let i = index\">\n <div class=\"upload-item-content\">\n <div class=\"filename\">\n <div class=\"filename-left\">\n <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n <span>{{ f.name }}</span>\n </div>\n </div>\n <div class=\"progress-content\">\n <div class=\"progress\">\n <span class=\"bar\"\n [style.width]=\"f?.progress?.data?.percentage + '%'\"\n [class.is-done]=\"f['uploaded']\"></span>\n </div>\n </div>\n <div class=\"progress-text-content\">\n <span class=\"progress-text\"\n [class.is-done]=\"f['uploaded']\">\n <span *ngIf=\"!f['uploaded']\">{{ f.progress?.data?.percentage - 1 }}%\n </span>\n <span *ngIf=\"f['uploaded']\">100 %</span>\n <span *ngIf=\"!f['uploaded']\">Uploading...</span>\n <span *ngIf=\"f['uploaded']\">Done</span>\n </span>\n <span class=\"speed-and-eta-text\"\n *ngIf=\"f.progress?.data?.percentage !== 0 && !f['uploaded']\">\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.action-btn.active{color:#fff!important;background-color:var(--first)}.control-btns{display:none}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.show-controls .comment-field,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled select{pointer-events:none}.timeline-card.card{min-height:auto}@media (max-width: 768px){.completed-toggle{padding-top:10px}}.when-btn:focus{border:0;box-shadow:none}.no-actions{clear:both}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i5.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i5.NumberDirective, selector: "input[numbersOnly]" }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: i10.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i12.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i12.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: SmartCrmCompanyFilesComponent, selector: "pw-smart-crm-company-files", inputs: ["accountId", "contactId", "opportunityId"] }, { kind: "pipe", type: i2$1.JsonPipe, name: "json" }, { kind: "pipe", type: i2$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i15.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i11$2.TranslocoPipe, name: "transloco" }] }); }
|
|
6038
6041
|
}
|
|
6039
6042
|
__decorate([
|
|
6040
6043
|
ValidateForm('actionControls'),
|
|
@@ -6044,7 +6047,7 @@ __decorate([
|
|
|
6044
6047
|
], SmartCrmOpportunitiesInfoComponent.prototype, "onCommentSave", null);
|
|
6045
6048
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SmartCrmOpportunitiesInfoComponent, decorators: [{
|
|
6046
6049
|
type: Component,
|
|
6047
|
-
args: [{ selector: 'pw-smart-crm-opportunities-info', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 mb-0\">\n <div class=\"me-auto mb-0\">\n <h2 class=\"mb-0\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"back()\"\n class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n Opportunity Info\n </h2>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"user-info p-3 card pb-0 h-auto\">\n <div class=\"mb-2 text-center\">\n <a class=\"profile-image\">\n <img width=\"100\"\n height=\"100\"\n class=\"rounded-circle img-border width-100\"\n alt=\"user\"\n src=\"assets/img/icons/male.png\" />\n </a>\n </div>\n <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n <h4 class=\"d-inline-block\">\n About <span *ngIf=\"data?.id\">{{ data.title }}</span>\n </h4>\n <a href=\"javascript:void(0);\"\n *ngIf=\"isFormEdit\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"\n isFormEdit = !isFormEdit; getAccountsBySubscription(); getAllContacts()\n \">Edit</a>\n </div>\n <form [formGroup]=\"aboutControls\"\n [class.isDisabled]=\"isFormEdit\">\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"Title\">{{\n 'Crm.OpportunitiesMessage.Title' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"title\"\n [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n </div>\n <div class=\"mb-3 ui-fluid skills-modal\"\n *ngIf=\"data?.crm_contact_id\">\n <label class=\"label mb-2\" for=\"Contact\">{{\n 'Crm.OpportunitiesMessage.Contact' | transloco\n }}</label>\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n data.crm_contact_id\n ]\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.crm_contact_id\">{{ data?.crm_contact?.first_name }} {{ data?.crm_contact?.last_name }}</a>\n <p-autoComplete *ngIf=\"!isFormEdit || !data?.crm_contact_id\"\n [suggestions]=\"filteredContacts\"\n formControlName=\"crm_contact_id\"\n dataKey=\"id\"\n field=\"displayName\"\n [dropdown]=\"true\"\n (completeMethod)=\"onContactSearch($event)\"\n styleClass=\"w-100\"\n placeholder=\"Search contacts\"\n [multiple]=\"false\">\n </p-autoComplete>\n </div>\n <div class=\"mb-3 ui-fluid skills-modal\">\n <label class=\"label mb-2\" for=\"Account\">{{\n 'Crm.OpportunitiesMessage.Account' | transloco\n }}</label>\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n data.crm_account_id\n ]\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.crm_account_id\">{{ data?.crm_account?.name }}</a>\n <p-autoComplete *ngIf=\"!isFormEdit || !data?.crm_account_id\"\n [suggestions]=\"filteredAccounts\"\n formControlName=\"crm_account_id\"\n dataKey=\"id\"\n field=\"name\"\n [dropdown]=\"true\"\n (completeMethod)=\"accountSearch($event)\"\n styleClass=\"w-100\"\n placeholder=\"Search accounts\"\n [multiple]=\"false\">\n </p-autoComplete>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"OneTimeAmount\">{{\n 'Crm.OpportunitiesMessage.OneTimeAmount' | transloco\n }}</label>\n <span class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.one_time_amount\">{{ data?.one_time_amount | currency }}</span>\n <input *ngIf=\"!isFormEdit || !data?.one_time_amount\"\n type=\"number\"\n numbersOnly\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"one_time_amount\"\n id=\"one_time_amount\"\n [ngClass]=\"{ 'is-invalid': submitted && f['one_time_amount'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"monthlyAmount\">{{\n 'Crm.OpportunitiesMessage.MonthlyAmount' | transloco\n }}</label>\n <span class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.monthly_amount\">{{ data?.monthly_amount | currency }}</span>\n <input *ngIf=\"!isFormEdit || !data?.monthly_amount\"\n type=\"number\"\n numbersOnly\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"monthly_amount\"\n id=\"monthly_amount\"\n [ngClass]=\"{ 'is-invalid': submitted && f['monthly_amount'].errors }\" />\n </div>\n <div *ngIf=\"!isFormEdit\"\n class=\"text-end form-action-buttons\">\n <input type=\"button\"\n class=\"btn btn-outline-primary\"\n (click)=\"isFormEdit = !isFormEdit; getOpportunityDetails()\"\n value=\"Cancel\" />\n <input type=\"button\"\n class=\"btn btn-primary ms-3\"\n value=\"Submit\"\n (click)=\"updateOpportunities()\" />\n </div>\n </form>\n </div>\n </div>\n <div class=\"col-12 col-md-8\">\n <ul ngbNav\n #nav=\"ngbNav\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Notes</a>\n <ng-template ngbNavContent>\n <form [formGroup]=\"actionControls\"\n (ngSubmit)=\"onCommentSave()\">\n <textarea class=\"form-control\"\n formControlName=\"comment\"\n rows=\"6\"></textarea>\n <p class=\"text-danger\"\n *ngIf=\"\n actionControls.get('comment').touched &&\n actionControls.get('comment').invalid\n \">\n Note Required\n </p>\n <div *ngIf=\"actions?.length\"\n class=\"d-block clear-both pt-3\">\n <ng-container *ngFor=\"let action of actions; index as i\">\n <button *ngIf=\"action.visible\"\n type=\"button\"\n [class.active]=\"\"\n class=\"btn btn-sm me-2 btn-outline-primary mb-2 action-btn\"\n (click)=\"showDatePicker($event, action.id); d.toggle()\">\n {{ action.name }}\n </button>\n </ng-container>\n <div class=\"text-danger\"\n *ngIf=\"submitAction && actionFormControls.crm_action_id.invalid\">\n Please select an action\n </div>\n <div class=\"row mt-3\">\n <div class=\"col-12 col-sm-4\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (click)=\"d.toggle()\" />\n </div>\n </div>\n <div class=\"col-sm-4 pe-0 completed-toggle\">\n <div class=\"mb-3\">\n <ui-switch checkedLabel=\"completed\"\n uncheckedLabel=\"open\"\n formControlName=\"completed\"\n name=\"completed\">\n </ui-switch>\n </div>\n </div>\n </div>\n </div>\n <div class=\"float-end\">\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n [disabled]=\"buttonDisable\"\n class=\"btn btn-primary mt-2 mb-2 float-end\"\n >Submit Note</button>\n <a class=\"btn btn-outline-primary mt-2 mb-2 me-0 me-sm-2 float-end\"\n (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n </div>\n <div *ngIf=\"buttonDisable\"\n class=\"no-actions pt-4\">\n <pw-no-data [withImage]=\"true\" [message]=\"\n 'Crm.OpportunitiesMessage.NoActionsInOpportunitiesInfoMessage'\n | transloco\n \">\n </pw-no-data>\n </div>\n </form>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div *ngIf=\"!opportunitiesComments?.length && isLoaded\"\n class=\"no-actions pt-3\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoActionsMessage' | transloco\">\n </pw-no-data>\n </div>\n <div *ngIf=\"opportunitiesComments?.length\"\n id=\"timeline\"\n class=\"pt-3 clear-both timeline-center timeline-wrapper\">\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n </ul>\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd }\"\n *ngFor=\"\n let item of opportunitiesComments;\n index as i;\n let odd = odd;\n let even = even\n \">\n <div class=\"timeline-badge\">\n <span class=\"bg-red bg-lighten-1\">\n <span class=\"timeline-year\">\n <span class=\"d-block date-year\">{{\n item.when | date: 'medium' | slice: 0:3\n }}</span>\n <span>{{ item.year }}</span>\n </span>\n </span>\n </div>\n <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n <div class=\"card-header py-4\">\n <div class=\"mb-0 clearfix\">\n <textarea type=\"text\"\n name=\"comment\"\n class=\"comment-field form-control p-0\"\n [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n <p class=\"float-start mb-0\"\n *ngIf=\"!showFullComment || item.id !== commentId\">\n {{ item.comment | slice: 0:170\n }}<a *ngIf=\"item.comment.length > 170\"\n class=\"text-secondary\"\n (click)=\"\n showFullComment = true; commentId = item.id\n \">...show more</a>\n </p>\n <p class=\"float-start mb-0\"\n *ngIf=\"showFullComment && item.id === commentId\">\n {{ item.comment }}\n <a *ngIf=\"\n item.comment.length > 170 && showFullComment\n \"\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n </p>\n <button class=\"btn btn-md edit-btn float-end py-0\"\n (click)=\"showEditControls($event)\"\n *ngIf=\"userId === item.owner_id || hasAccess\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <div class=\"card-subtitle text-muted my-0 clearfix\">\n <div class=\"float-start\">\n <span *ngIf=\"!updating || actionId !== item.id\"\n class=\"font-small-3\">\n {{ item.when }}</span>\n <input *ngIf=\"updating && actionId === item.id\"\n placeholder=\"dd-mmm-yyyy\"\n value=\"{{ item.when }}\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\" />\n </div>\n <button type=\" button\"\n class=\"btn btn-sm float-end when-btn py-0\"\n *ngIf=\"userId === item.owner_id || hasAccess\"\n (click)=\"showDatePickerUpdate(item.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <p [class.text-danger]=\"!item.color\"\n *ngIf=\"!item.cancelled && !item.completed\"\n class=\"mb-0\">\n {{ item.due }}\n </p>\n <p>\n {{\n item?.owner?.first_name +\n ' ' +\n item?.owner?.last_name\n }}\n </p>\n <span class=\"badge bg-primary\">{{\n item?.crm_action?.name\n }}</span>\n <span *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n class=\"badge bg-success ms-2\">Open</span>\n <a *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as completed\"\n aria-label=\"Set as completed\"\n class=\"me-3 ms-3\"\n href=\"javascript:void(0);\"\n (click)=\"\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \">\n <i class=\"fa fa-tasks completed\" aria-hidden=\"true\"></i>\n </a>\n <a *ngIf=\"\n !item.cancelled &&\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as cancelled\"\n aria-label=\"Set as cancelled\"\n href=\"javascript:void(0);\"\n (click)=\"setAsCancelled(item.id, item)\">\n <i\n class=\"fa fa-times delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <a *ngIf=\"\n item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as UnCompleted\"\n aria-label=\"Set as UnCompleted\"\n href=\"javascript:void(0);\"\n (click)=\"\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \"\n class=\"ms-2\">\n <i class=\"far fa-window-close\" aria-hidden=\"true\"></i>\n </a>\n <div class=\"control-btns mt-3 text-end\">\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-default me-2\"\n (click)=\"showEditControls(undefined)\">\n Cancel\n </button>\n <button class=\"btn btn-sm btn-primary\"\n type=\"button\"\n (click)=\"updateComment(item)\">\n Submit\n </button>\n </div>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Versioning</a>\n <ng-template ngbNavContent>\n <div *ngFor=\"let version of opportunitiesVersioning\">\n <p>\n <strong>Event: </strong>{{ version.event }} | <strong>Author: </strong><a *ngIf=\"version?.author\"\n [routerLink]=\"['/members', version?.author?.slug]\">{{ version?.author | ifNameNullShowEmail }}</a>\n | <strong>Created at: </strong>{{ version.created_at }}<br />\n <strong>Object: </strong>{{ version.object | json }}\n </p>\n <hr />\n </div>\n <div *ngIf=\"opportunitiesVersioning?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoVersionsMessage' | transloco\">\n </pw-no-data>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Files</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-company-files [contactId]=\"contactId\"\n [accountId]=\"accountId\"\n [opportunityId]=\"opportunitiesId\">\n </pw-smart-crm-company-files>\n </ng-template>\n </li>\n </ul>\n\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n</div>\n\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <div class=\"row p-2\">\n <div class=\"col-12\">\n <div class=\"upload-box\">\n <div class=\"upload-box-content\">\n <div class=\"drop-container\"\n ngFileDrop\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\">\n <p>\n Drag files here or\n <label class=\"upload-button\">\n <input type=\"file\"\n ngFileSelect\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\"\n multiple />\n browse\n </label>\n to upload.\n </p>\n </div>\n <div class=\"upload-item\"\n *ngFor=\"let f of files; let i = index\">\n <div class=\"upload-item-content\">\n <div class=\"filename\">\n <div class=\"filename-left\">\n <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n <span>{{ f.name }}</span>\n </div>\n </div>\n <div class=\"progress-content\">\n <div class=\"progress\">\n <span class=\"bar\"\n [style.width]=\"f?.progress?.data?.percentage + '%'\"\n [class.is-done]=\"f['uploaded']\"></span>\n </div>\n </div>\n <div class=\"progress-text-content\">\n <span class=\"progress-text\"\n [class.is-done]=\"f['uploaded']\">\n <span *ngIf=\"!f['uploaded']\">{{ f.progress?.data?.percentage - 1 }}%\n </span>\n <span *ngIf=\"f['uploaded']\">100 %</span>\n <span *ngIf=\"!f['uploaded']\">Uploading...</span>\n <span *ngIf=\"f['uploaded']\">Done</span>\n </span>\n <span class=\"speed-and-eta-text\"\n *ngIf=\"f.progress?.data?.percentage !== 0 && !f['uploaded']\">\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.action-btn.active{color:#fff!important;background-color:var(--first)}.control-btns{display:none}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.show-controls .comment-field,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled select{pointer-events:none}.timeline-card.card{min-height:auto}@media (max-width: 768px){.completed-toggle{padding-top:10px}}.when-btn:focus{border:0;box-shadow:none}.no-actions{clear:both}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"] }]
|
|
6050
|
+
args: [{ selector: 'pw-smart-crm-opportunities-info', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 mb-0\">\n <div class=\"me-auto mb-0\">\n <h2 class=\"mb-0\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"back()\"\n class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n Opportunity Info\n </h2>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"user-info p-3 card pb-0 h-auto\">\n <div class=\"mb-2 text-center\">\n <a class=\"profile-image\">\n <img width=\"100\"\n height=\"100\"\n class=\"rounded-circle img-border width-100\"\n alt=\"user\"\n src=\"assets/img/icons/male.png\" />\n </a>\n </div>\n <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n <h4 class=\"d-inline-block\">\n About <span *ngIf=\"data?.id\">{{ data.title }}</span>\n </h4>\n <a href=\"#\"\n *ngIf=\"isFormEdit\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"\n $event.preventDefault();\n isFormEdit = !isFormEdit; getAccountsBySubscription(); getAllContacts()\n \">Edit</a>\n </div>\n <form [formGroup]=\"aboutControls\"\n [class.isDisabled]=\"isFormEdit\">\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"Title\">{{\n 'Crm.OpportunitiesMessage.Title' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"title\"\n [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n </div>\n <div class=\"mb-3 ui-fluid skills-modal\"\n *ngIf=\"data?.crm_contact_id\">\n <label class=\"label mb-2\" for=\"Contact\">{{\n 'Crm.OpportunitiesMessage.Contact' | transloco\n }}</label>\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n data.crm_contact_id\n ]\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.crm_contact_id\">{{ data?.crm_contact?.first_name }} {{ data?.crm_contact?.last_name }}</a>\n <p-autoComplete *ngIf=\"!isFormEdit || !data?.crm_contact_id\"\n [suggestions]=\"filteredContacts\"\n formControlName=\"crm_contact_id\"\n dataKey=\"id\"\n field=\"displayName\"\n [dropdown]=\"true\"\n (completeMethod)=\"onContactSearch($event)\"\n styleClass=\"w-100\"\n placeholder=\"Search contacts\"\n [multiple]=\"false\">\n </p-autoComplete>\n </div>\n <div class=\"mb-3 ui-fluid skills-modal\">\n <label class=\"label mb-2\" for=\"Account\">{{\n 'Crm.OpportunitiesMessage.Account' | transloco\n }}</label>\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n data.crm_account_id\n ]\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.crm_account_id\">{{ data?.crm_account?.name }}</a>\n <p-autoComplete *ngIf=\"!isFormEdit || !data?.crm_account_id\"\n [suggestions]=\"filteredAccounts\"\n formControlName=\"crm_account_id\"\n dataKey=\"id\"\n field=\"name\"\n [dropdown]=\"true\"\n (completeMethod)=\"accountSearch($event)\"\n styleClass=\"w-100\"\n placeholder=\"Search accounts\"\n [multiple]=\"false\">\n </p-autoComplete>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"OneTimeAmount\">{{\n 'Crm.OpportunitiesMessage.OneTimeAmount' | transloco\n }}</label>\n <span class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.one_time_amount\">{{ data?.one_time_amount | currency }}</span>\n <input *ngIf=\"!isFormEdit || !data?.one_time_amount\"\n type=\"number\"\n numbersOnly\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"one_time_amount\"\n id=\"one_time_amount\"\n [ngClass]=\"{ 'is-invalid': submitted && f['one_time_amount'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"monthlyAmount\">{{\n 'Crm.OpportunitiesMessage.MonthlyAmount' | transloco\n }}</label>\n <span class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.monthly_amount\">{{ data?.monthly_amount | currency }}</span>\n <input *ngIf=\"!isFormEdit || !data?.monthly_amount\"\n type=\"number\"\n numbersOnly\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"monthly_amount\"\n id=\"monthly_amount\"\n [ngClass]=\"{ 'is-invalid': submitted && f['monthly_amount'].errors }\" />\n </div>\n <div *ngIf=\"!isFormEdit\"\n class=\"text-end form-action-buttons\">\n <input type=\"button\"\n class=\"btn btn-outline-primary\"\n (click)=\"isFormEdit = !isFormEdit; getOpportunityDetails()\"\n value=\"Cancel\" />\n <input type=\"button\"\n class=\"btn btn-primary ms-3\"\n value=\"Submit\"\n (click)=\"updateOpportunities()\" />\n </div>\n </form>\n </div>\n </div>\n <div class=\"col-12 col-md-8\">\n <ul ngbNav\n #nav=\"ngbNav\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Notes</a>\n <ng-template ngbNavContent>\n <form [formGroup]=\"actionControls\"\n (ngSubmit)=\"onCommentSave()\">\n <textarea class=\"form-control\"\n formControlName=\"comment\"\n rows=\"6\"></textarea>\n <p class=\"text-danger\"\n *ngIf=\"\n actionControls.get('comment').touched &&\n actionControls.get('comment').invalid\n \">\n Note Required\n </p>\n <div *ngIf=\"actions?.length\"\n class=\"d-block clear-both pt-3\">\n <ng-container *ngFor=\"let action of actions; index as i\">\n <button *ngIf=\"action.visible\"\n type=\"button\"\n [class.active]=\"\"\n class=\"btn btn-sm me-2 btn-outline-primary mb-2 action-btn\"\n (click)=\"showDatePicker($event, action.id); d.toggle()\">\n {{ action.name }}\n </button>\n </ng-container>\n <div class=\"text-danger\"\n *ngIf=\"submitAction && actionFormControls.crm_action_id.invalid\">\n Please select an action\n </div>\n <div class=\"row mt-3\">\n <div class=\"col-12 col-sm-4\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (click)=\"d.toggle()\" />\n </div>\n </div>\n <div class=\"col-sm-4 pe-0 completed-toggle\">\n <div class=\"mb-3\">\n <ui-switch checkedLabel=\"completed\"\n uncheckedLabel=\"open\"\n formControlName=\"completed\"\n name=\"completed\">\n </ui-switch>\n </div>\n </div>\n </div>\n </div>\n <div class=\"float-end\">\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n [disabled]=\"buttonDisable\"\n class=\"btn btn-primary mt-2 mb-2 float-end\"\n >Submit Note</button>\n <a class=\"btn btn-outline-primary mt-2 mb-2 me-0 me-sm-2 float-end\"\n (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n </div>\n <div *ngIf=\"buttonDisable\"\n class=\"no-actions pt-4\">\n <pw-no-data [withImage]=\"true\" [message]=\"\n 'Crm.OpportunitiesMessage.NoActionsInOpportunitiesInfoMessage'\n | transloco\n \">\n </pw-no-data>\n </div>\n </form>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div *ngIf=\"!opportunitiesComments?.length && isLoaded\"\n class=\"no-actions pt-3\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoActionsMessage' | transloco\">\n </pw-no-data>\n </div>\n <div *ngIf=\"opportunitiesComments?.length\"\n id=\"timeline\"\n class=\"pt-3 clear-both timeline-center timeline-wrapper\">\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n </ul>\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd }\"\n *ngFor=\"\n let item of opportunitiesComments;\n index as i;\n let odd = odd;\n let even = even\n \">\n <div class=\"timeline-badge\">\n <span class=\"bg-red bg-lighten-1\">\n <span class=\"timeline-year\">\n <span class=\"d-block date-year\">{{\n item.when | date: 'medium' | slice: 0:3\n }}</span>\n <span>{{ item.year }}</span>\n </span>\n </span>\n </div>\n <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n <div class=\"card-header py-4\">\n <div class=\"mb-0 clearfix\">\n <textarea type=\"text\"\n name=\"comment\"\n class=\"comment-field form-control p-0\"\n [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n <p class=\"float-start mb-0\"\n *ngIf=\"!showFullComment || item.id !== commentId\">\n {{ item.comment | slice: 0:170\n }}<a *ngIf=\"item.comment.length > 170\"\n class=\"text-secondary\"\n (click)=\"\n showFullComment = true; commentId = item.id\n \">...show more</a>\n </p>\n <p class=\"float-start mb-0\"\n *ngIf=\"showFullComment && item.id === commentId\">\n {{ item.comment }}\n <a *ngIf=\"\n item.comment.length > 170 && showFullComment\n \"\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n </p>\n <button class=\"btn btn-md edit-btn float-end py-0\"\n (click)=\"showEditControls($event)\"\n *ngIf=\"userId === item.owner_id || hasAccess\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <div class=\"card-subtitle text-muted my-0 clearfix\">\n <div class=\"float-start\">\n <span *ngIf=\"!updating || actionId !== item.id\"\n class=\"font-small-3\">\n {{ item.when }}</span>\n <input *ngIf=\"updating && actionId === item.id\"\n placeholder=\"dd-mmm-yyyy\"\n value=\"{{ item.when }}\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\" />\n </div>\n <button type=\" button\"\n class=\"btn btn-sm float-end when-btn py-0\"\n *ngIf=\"userId === item.owner_id || hasAccess\"\n (click)=\"showDatePickerUpdate(item.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <p [class.text-danger]=\"!item.color\"\n *ngIf=\"!item.cancelled && !item.completed\"\n class=\"mb-0\">\n {{ item.due }}\n </p>\n <p>\n {{\n item?.owner?.first_name +\n ' ' +\n item?.owner?.last_name\n }}\n </p>\n <span class=\"badge bg-primary\">{{\n item?.crm_action?.name\n }}</span>\n <span *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n class=\"badge bg-success ms-2\">Open</span>\n <a *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as completed\"\n aria-label=\"Set as completed\"\n class=\"me-3 ms-3\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \">\n <i class=\"fa fa-tasks completed\" aria-hidden=\"true\"></i>\n </a>\n <a *ngIf=\"\n !item.cancelled &&\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as cancelled\"\n aria-label=\"Set as cancelled\"\n href=\"#\"\n (click)=\"$event.preventDefault(); setAsCancelled(item.id, item)\">\n <i\n class=\"fa fa-times delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <a *ngIf=\"\n item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as UnCompleted\"\n aria-label=\"Set as UnCompleted\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \"\n class=\"ms-2\">\n <i class=\"far fa-window-close\" aria-hidden=\"true\"></i>\n </a>\n <div class=\"control-btns mt-3 text-end\">\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-default me-2\"\n (click)=\"showEditControls(undefined)\">\n Cancel\n </button>\n <button class=\"btn btn-sm btn-primary\"\n type=\"button\"\n (click)=\"updateComment(item)\">\n Submit\n </button>\n </div>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Versioning</a>\n <ng-template ngbNavContent>\n <div *ngFor=\"let version of opportunitiesVersioning\">\n <p>\n <strong>Event: </strong>{{ version.event }} | <strong>Author: </strong><a *ngIf=\"version?.author\"\n [routerLink]=\"['/members', version?.author?.slug]\">{{ version?.author | ifNameNullShowEmail }}</a>\n | <strong>Created at: </strong>{{ version.created_at }}<br />\n <strong>Object: </strong>{{ version.object | json }}\n </p>\n <hr />\n </div>\n <div *ngIf=\"opportunitiesVersioning?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoVersionsMessage' | transloco\">\n </pw-no-data>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Files</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-company-files [contactId]=\"contactId\"\n [accountId]=\"accountId\"\n [opportunityId]=\"opportunitiesId\">\n </pw-smart-crm-company-files>\n </ng-template>\n </li>\n </ul>\n\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n</div>\n\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <div class=\"row p-2\">\n <div class=\"col-12\">\n <div class=\"upload-box\">\n <div class=\"upload-box-content\">\n <div class=\"drop-container\"\n ngFileDrop\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\">\n <p>\n Drag files here or\n <label class=\"upload-button\">\n <input type=\"file\"\n ngFileSelect\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\"\n multiple />\n browse\n </label>\n to upload.\n </p>\n </div>\n <div class=\"upload-item\"\n *ngFor=\"let f of files; let i = index\">\n <div class=\"upload-item-content\">\n <div class=\"filename\">\n <div class=\"filename-left\">\n <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n <span>{{ f.name }}</span>\n </div>\n </div>\n <div class=\"progress-content\">\n <div class=\"progress\">\n <span class=\"bar\"\n [style.width]=\"f?.progress?.data?.percentage + '%'\"\n [class.is-done]=\"f['uploaded']\"></span>\n </div>\n </div>\n <div class=\"progress-text-content\">\n <span class=\"progress-text\"\n [class.is-done]=\"f['uploaded']\">\n <span *ngIf=\"!f['uploaded']\">{{ f.progress?.data?.percentage - 1 }}%\n </span>\n <span *ngIf=\"f['uploaded']\">100 %</span>\n <span *ngIf=\"!f['uploaded']\">Uploading...</span>\n <span *ngIf=\"f['uploaded']\">Done</span>\n </span>\n <span class=\"speed-and-eta-text\"\n *ngIf=\"f.progress?.data?.percentage !== 0 && !f['uploaded']\">\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.action-btn.active{color:#fff!important;background-color:var(--first)}.control-btns{display:none}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.show-controls .comment-field,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled select{pointer-events:none}.timeline-card.card{min-height:auto}@media (max-width: 768px){.completed-toggle{padding-top:10px}}.when-btn:focus{border:0;box-shadow:none}.no-actions{clear:both}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"] }]
|
|
6048
6051
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i2$2.NgbModal }, { type: i2.AuthService }, { type: Document, decorators: [{
|
|
6049
6052
|
type: Inject,
|
|
6050
6053
|
args: [DOCUMENT]
|
|
@@ -6525,11 +6528,11 @@ class CrmActionsComponent extends AppBaseComponent {
|
|
|
6525
6528
|
super.ngOnDestroy();
|
|
6526
6529
|
}
|
|
6527
6530
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CrmActionsComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6528
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: CrmActionsComponent, isStandalone: false, selector: "pw-crm-actions", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-4\">\n <div class=\"col-12 mb-0\">\n <h2>{{ 'Crm.Actions.Title' | transloco }}</h2>\n </div>\n <div class=\"col-12 col-sm-3 float-start mb-2\"\n *ngIf=\"showFilter\">\n <p-dropdown\n [options]=\"allSubscriptionMembers\"\n optionLabel=\"first_name\"\n optionValue=\"id\"\n [ngModel]=\"0\"\n (onChange)=\"filterByUser($event.value)\">\n\n <ng-template pTemplate=\"selectedItem\" let-selected>\n <span *ngIf=\"selected\">\n {{ selected.first_name }} {{ selected.last_name }}\n </span>\n </ng-template>\n\n <ng-template pTemplate=\"item\" let-option>\n {{ option.first_name }} {{ option.last_name }}\n </ng-template>\n</p-dropdown>\n </div>\n <div>\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-opportunities\"\n [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary float-end me-3\"\n data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.AccountMessage.AddAccount' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary float-end me-3\"\n [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n data-cy=\"add-action\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n </div>\n </div>\n <!-- Pending Actions -->\n <div class=\"col-12 col-md-6 mb-3\">\n <h5 class=\"accordion-heading\">Pending Actions</h5>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div *ngIf=\"contactActions?.length === 0 && isLoaded\"\n class=\"px-2\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Actions.ActionMessage' | transloco\"> </pw-no-data>\n </div>\n <!-- wrapper for infinite scroll -->\n <div #selector class=\"pending-actions-wrapper\"\n infiniteScroll\n [infiniteScrollDistance]=\"2\"\n [infiniteScrollThrottle]=\"50\"\n [infiniteScrollContainer]=\"selector\"\n [fromRoot]=\"true\"\n (scrolled)=\"onScrollPendingActions()\">\n <div class=\"mb-4 action-card bg-white\"\n *ngFor=\"let action of contactActions; let i = index\">\n <div class=\"p-2\">\n <ul class=\"list-inline\">\n <li class=\"list-inline-item me-2\">\n <h6 *ngIf=\"!updating || actionId !== action.id\">\n {{ action.when_short_date }}\n </h6>\n <input *ngIf=\"updating && actionId === action.id\"\n placeholder=\"dd-mmm-yyyy\"\n [value]=\"action.when_short_date\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, action)\" />\n </li>\n <li>\n <button type=\"button\"\n class=\"btn btn-sm when-btn\"\n (click)=\"showDatePicker(action?.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n ngbTooltip=\"Click to Edit\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </li>\n <li class=\"list-inline-item\">\n <span class=\"badge bg-primary action-name\">{{ action.crm_action?.name }}</span>\n </li>\n <li>\n <ng-container *ngIf=\"action.owner?.user_avatar?.length > 0; else noProfileImg\">\n <ng-container *ngFor=\"let owner_image of action.owner?.user_avatar\">\n <div class=\"text-center my-2\" *ngIf=\"owner_image.width === 50\" [ngbTooltip]=\"action.owner.first_name + ' ' +action.owner.last_name\">\n <div class=\"avatar avatar-image\">\n <img\n class=\"img-fluid\"\n [src]=\"owner_image.url\"\n alt=\"Male Icon\"\n (error)=\"handleImageError($event, 'assets/img/icons/male.png')\"\n />\n </div>\n </div>\n </ng-container>\n </ng-container>\n\n <ng-template #noProfileImg>\n <div class=\"text-center my-2\">\n <div class=\"avatar avatar-image\">\n <img\n src=\"/assets/img/icons/male.png\"\n alt=\"\"\n class=\"img-fluid\"\n />\n </div>\n </div>\n </ng-template>\n </li>\n\n <li class=\"list-inline-item float-end\">\n <a *ngIf=\"action?.crm_contact\"\n ngbTooltip=\"See this contact\"\n aria-label=\"See this contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n action?.crm_contact?.id\n ]\">\n <i class=\"fa fa-eye me-3 see-icon\" aria-hidden=\"true\"></i>\n </a>\n <a ngbTooltip=\"Set as completed\"\n aria-label=\"Set as completed\"\n class=\"me-3\"\n href=\"javascript:void(0);\"\n (click)=\"setAsCompleted(action.id, action, i)\">\n <i class=\"fa fa-tasks cta1-icon\" aria-hidden=\"true\"></i>\n </a>\n <a ngbTooltip=\"Set as cancelled\"\n aria-label=\"Set as cancelled\"\n href=\"javascript:void(0);\"\n (click)=\"setAsCancelled(action.id, action, i)\">\n <i\n class=\"fa fa-times text-danger delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n </li>\n </ul>\n <p [class.text-danger]=\"!action.color\"\n class=\"mb-0\"\n *ngIf=\"action.due\">\n {{ action.due }}\n </p>\n <p *ngIf=\"action.owner?.id !== userId\"\n class=\"m-0 mt-1\">\n <a class=\"font-italic grey\"\n [routerLink]=\"['/members', action?.owner?.slug]\">Added by\n {{ action.owner?.first_name + ' ' + action.owner?.last_name }}</a>\n </p>\n <p class=\"mt-1 mb-1 fw-bold\">\n <a class=\"text-secondary\"\n *ngIf=\"action?.crm_contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n action?.crm_contact?.id\n ]\">\n {{\n action?.crm_contact?.first_name +\n ' ' +\n action?.crm_contact?.last_name\n }}\n </a>\n <a *ngIf=\"!action.crm_contact_id\">N/A</a> at\n <a *ngIf=\"action.crm_account_id\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n action?.crm_account?.id\n ]\">\n {{ action?.crm_account?.name }}\n </a>\n </p>\n <div class=\"comment-section\">\n <textarea class=\"mt-1 textarea form-control mb-2\"\n [(ngModel)]=\"action.comment\">{{ action.comment }}</textarea>\n <div class=\"d-flex\">\n <p class=\"my-1 comment\"\n *ngIf=\"!showFullComment || action.id !== commentId\">\n {{ action.comment | slice: 0:230\n }}<a *ngIf=\"action.comment.length > 230\"\n class=\"text-secondary\"\n (click)=\"showFullComment = true; commentId = action.id\">...show more\n </a>\n </p>\n <p class=\"my-1 comment\"\n *ngIf=\"showFullComment && action.id === commentId\">\n {{ action.comment }}\n <a *ngIf=\"action.comment.length > 230 && showFullComment\"\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n </p>\n <button class=\"btn btn-md edit-btn\"\n (click)=\"editComment($event)\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </button>\n </div>\n <div class=\"control-btns edit-control-btns\">\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-default me-2\"\n (click)=\"editComment(undefined)\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button class=\"btn btn-sm btn-primary\"\n (click)=\"updateComment(action)\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- Suggested Actions -->\n <div class=\"col-12 col-md-6 mb-3\">\n <h5 class=\"accordion-heading\">AI Suggested Actions</h5>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n\n\n <div #suggestedActionsSelector *ngIf=\"accountActionSuggested?.length > 0\" class=\"suggested-actions-wrapper\"\n infiniteScroll\n [infiniteScrollContainer]=\"suggestedActionsSelector\"\n [infiniteScrollDistance]=\"2\"\n [infiniteScrollThrottle]=\"50\">\n\n <div class=\"mb-4 action-card bg-white\"\n *ngFor=\"\n let suggestedAction of accountActionSuggested\n | paginate: { id: 'suggestedAction', itemsPerPage: 10, currentPage: p1 };\n let i = index\n \">\n <div class=\"p-2\">\n <p class=\"mt-1 mb-1 fw-bold\">\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n suggestedAction?.crm_account?.id\n ]\">{{ suggestedAction?.crm_account?.name }}</a>\n </p>\n <p class=\"fw-bold mb-1\">{{ suggestedAction.crm_action }}</p>\n <p class=\"mb-0\">{{ suggestedAction.reason }}</p>\n </div>\n </div>\n </div>\n <div class=\"text-center pagination-controls w-100 mt-3\"\n *ngIf=\"accountActionSuggested?.length > 10\">\n <pagination-controls id=\"suggestedAction\"\n (pageChange)=\"p1 = $event\">\n </pagination-controls>\n </div>\n <div *ngIf=\"accountActionSuggested.length === 0 && isLoadedSuggested\"\n class=\"px-2\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Actions.ActionSuggestionsMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.textarea,.control-btns{display:none}.comment,.edit-btn{display:block}.comment{border:0;border-bottom:1px solid rgb(242,242,242);color:#000;font-size:1rem;resize:none}.action-name{background-color:var(--first)!important}.textarea{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:17px}.comment-section{min-width:350px;padding-right:45px;position:relative}.comment-section p{word-break:break-all}.comment-section.show-controls .textarea,.comment-section.show-controls .control-btns{display:block}.comment-section.show-controls .comment,.comment-section.show-controls .edit-btn{display:none}.comment-section.show-controls .control-btns.edit-control-btns{display:flex;justify-content:flex-end}.edit-btn{margin-top:-15px}.avatar-image{height:25px;width:25px}.when-btn:focus{border:0;box-shadow:none}.pending-actions-wrapper,.suggested-actions-wrapper{overflow-y:auto;height:calc(100vh - 150px)}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$3.PaginationControlsComponent, selector: "pagination-controls", inputs: ["id", "maxSize", "directionLinks", "autoHide", "responsive", "previousLabel", "nextLabel", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], outputs: ["pageChange", "pageBoundsCorrection"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i9.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i10.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i18.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "pipe", type: i2$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i4$3.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i11$2.TranslocoPipe, name: "transloco" }] }); }
|
|
6531
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: CrmActionsComponent, isStandalone: false, selector: "pw-crm-actions", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-4\">\n <div class=\"col-12 mb-0\">\n <h2>{{ 'Crm.Actions.Title' | transloco }}</h2>\n </div>\n <div class=\"col-12 col-sm-3 float-start mb-2\"\n *ngIf=\"showFilter\">\n <p-dropdown\n [options]=\"allSubscriptionMembers\"\n optionLabel=\"first_name\"\n optionValue=\"id\"\n [ngModel]=\"0\"\n (onChange)=\"filterByUser($event.value)\">\n\n <ng-template pTemplate=\"selectedItem\" let-selected>\n <span *ngIf=\"selected\">\n {{ selected.first_name }} {{ selected.last_name }}\n </span>\n </ng-template>\n\n <ng-template pTemplate=\"item\" let-option>\n {{ option.first_name }} {{ option.last_name }}\n </ng-template>\n</p-dropdown>\n </div>\n <div>\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-opportunities\"\n [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary float-end me-3\"\n data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.AccountMessage.AddAccount' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary float-end me-3\"\n [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n data-cy=\"add-action\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n </div>\n </div>\n <!-- Pending Actions -->\n <div class=\"col-12 col-md-6 mb-3\">\n <h5 class=\"accordion-heading\">Pending Actions</h5>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div *ngIf=\"contactActions?.length === 0 && isLoaded\"\n class=\"px-2\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Actions.ActionMessage' | transloco\"> </pw-no-data>\n </div>\n <!-- wrapper for infinite scroll -->\n <div #selector class=\"pending-actions-wrapper\"\n infiniteScroll\n [infiniteScrollDistance]=\"2\"\n [infiniteScrollThrottle]=\"50\"\n [infiniteScrollContainer]=\"selector\"\n [fromRoot]=\"true\"\n (scrolled)=\"onScrollPendingActions()\">\n <div class=\"mb-4 action-card bg-white\"\n *ngFor=\"let action of contactActions; let i = index\">\n <div class=\"p-2\">\n <ul class=\"list-inline\">\n <li class=\"list-inline-item me-2\">\n <h6 *ngIf=\"!updating || actionId !== action.id\">\n {{ action.when_short_date }}\n </h6>\n <input *ngIf=\"updating && actionId === action.id\"\n placeholder=\"dd-mmm-yyyy\"\n [value]=\"action.when_short_date\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, action)\" />\n </li>\n <li>\n <button type=\"button\"\n class=\"btn btn-sm when-btn\"\n (click)=\"showDatePicker(action?.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n ngbTooltip=\"Click to Edit\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </li>\n <li class=\"list-inline-item\">\n <span class=\"badge bg-primary action-name\">{{ action.crm_action?.name }}</span>\n </li>\n <li>\n <ng-container *ngIf=\"action.owner?.user_avatar?.length > 0; else noProfileImg\">\n <ng-container *ngFor=\"let owner_image of action.owner?.user_avatar\">\n <div class=\"text-center my-2\" *ngIf=\"owner_image.width === 50\" [ngbTooltip]=\"action.owner.first_name + ' ' +action.owner.last_name\">\n <div class=\"avatar avatar-image\">\n <img\n class=\"img-fluid\"\n [src]=\"owner_image.url\"\n alt=\"Male Icon\"\n (error)=\"handleImageError($event, 'assets/img/icons/male.png')\"\n />\n </div>\n </div>\n </ng-container>\n </ng-container>\n\n <ng-template #noProfileImg>\n <div class=\"text-center my-2\">\n <div class=\"avatar avatar-image\">\n <img\n src=\"/assets/img/icons/male.png\"\n alt=\"\"\n class=\"img-fluid\"\n />\n </div>\n </div>\n </ng-template>\n </li>\n\n <li class=\"list-inline-item float-end\">\n <a *ngIf=\"action?.crm_contact\"\n ngbTooltip=\"See this contact\"\n aria-label=\"See this contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n action?.crm_contact?.id\n ]\">\n <i class=\"fa fa-eye me-3 see-icon\" aria-hidden=\"true\"></i>\n </a>\n <a ngbTooltip=\"Set as completed\"\n aria-label=\"Set as completed\"\n class=\"me-3\"\n href=\"#\"\n (click)=\"$event.preventDefault(); setAsCompleted(action.id, action, i)\">\n <i class=\"fa fa-tasks cta1-icon\" aria-hidden=\"true\"></i>\n </a>\n <a ngbTooltip=\"Set as cancelled\"\n aria-label=\"Set as cancelled\"\n href=\"#\"\n (click)=\"$event.preventDefault(); setAsCancelled(action.id, action, i)\">\n <i\n class=\"fa fa-times text-danger delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n </li>\n </ul>\n <p [class.text-danger]=\"!action.color\"\n class=\"mb-0\"\n *ngIf=\"action.due\">\n {{ action.due }}\n </p>\n <p *ngIf=\"action.owner?.id !== userId\"\n class=\"m-0 mt-1\">\n <a class=\"font-italic grey\"\n [routerLink]=\"['/members', action?.owner?.slug]\">Added by\n {{ action.owner?.first_name + ' ' + action.owner?.last_name }}</a>\n </p>\n <p class=\"mt-1 mb-1 fw-bold\">\n <a class=\"text-secondary\"\n *ngIf=\"action?.crm_contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n action?.crm_contact?.id\n ]\">\n {{\n action?.crm_contact?.first_name +\n ' ' +\n action?.crm_contact?.last_name\n }}\n </a>\n <a *ngIf=\"!action.crm_contact_id\">N/A</a> at\n <a *ngIf=\"action.crm_account_id\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n action?.crm_account?.id\n ]\">\n {{ action?.crm_account?.name }}\n </a>\n </p>\n <div class=\"comment-section\">\n <textarea class=\"mt-1 textarea form-control mb-2\"\n [(ngModel)]=\"action.comment\">{{ action.comment }}</textarea>\n <div class=\"d-flex\">\n <p class=\"my-1 comment\"\n *ngIf=\"!showFullComment || action.id !== commentId\">\n {{ action.comment | slice: 0:230\n }}<a *ngIf=\"action.comment.length > 230\"\n class=\"text-secondary\"\n (click)=\"showFullComment = true; commentId = action.id\">...show more\n </a>\n </p>\n <p class=\"my-1 comment\"\n *ngIf=\"showFullComment && action.id === commentId\">\n {{ action.comment }}\n <a *ngIf=\"action.comment.length > 230 && showFullComment\"\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n </p>\n <button class=\"btn btn-md edit-btn\"\n (click)=\"editComment($event)\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </button>\n </div>\n <div class=\"control-btns edit-control-btns\">\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-default me-2\"\n (click)=\"editComment(undefined)\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button class=\"btn btn-sm btn-primary\"\n (click)=\"updateComment(action)\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- Suggested Actions -->\n <div class=\"col-12 col-md-6 mb-3\">\n <h5 class=\"accordion-heading\">AI Suggested Actions</h5>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n\n\n <div #suggestedActionsSelector *ngIf=\"accountActionSuggested?.length > 0\" class=\"suggested-actions-wrapper\"\n infiniteScroll\n [infiniteScrollContainer]=\"suggestedActionsSelector\"\n [infiniteScrollDistance]=\"2\"\n [infiniteScrollThrottle]=\"50\">\n\n <div class=\"mb-4 action-card bg-white\"\n *ngFor=\"\n let suggestedAction of accountActionSuggested\n | paginate: { id: 'suggestedAction', itemsPerPage: 10, currentPage: p1 };\n let i = index\n \">\n <div class=\"p-2\">\n <p class=\"mt-1 mb-1 fw-bold\">\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n suggestedAction?.crm_account?.id\n ]\">{{ suggestedAction?.crm_account?.name }}</a>\n </p>\n <p class=\"fw-bold mb-1\">{{ suggestedAction.crm_action }}</p>\n <p class=\"mb-0\">{{ suggestedAction.reason }}</p>\n </div>\n </div>\n </div>\n <div class=\"text-center pagination-controls w-100 mt-3\"\n *ngIf=\"accountActionSuggested?.length > 10\">\n <pagination-controls id=\"suggestedAction\"\n (pageChange)=\"p1 = $event\">\n </pagination-controls>\n </div>\n <div *ngIf=\"accountActionSuggested.length === 0 && isLoadedSuggested\"\n class=\"px-2\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Actions.ActionSuggestionsMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.textarea,.control-btns{display:none}.comment,.edit-btn{display:block}.comment{border:0;border-bottom:1px solid rgb(242,242,242);color:#000;font-size:1rem;resize:none}.action-name{background-color:var(--first)!important}.textarea{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:17px}.comment-section{min-width:350px;padding-right:45px;position:relative}.comment-section p{word-break:break-all}.comment-section.show-controls .textarea,.comment-section.show-controls .control-btns{display:block}.comment-section.show-controls .comment,.comment-section.show-controls .edit-btn{display:none}.comment-section.show-controls .control-btns.edit-control-btns{display:flex;justify-content:flex-end}.edit-btn{margin-top:-15px}.avatar-image{height:25px;width:25px}.when-btn:focus{border:0;box-shadow:none}.pending-actions-wrapper,.suggested-actions-wrapper{overflow-y:auto;height:calc(100vh - 150px)}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$3.PaginationControlsComponent, selector: "pagination-controls", inputs: ["id", "maxSize", "directionLinks", "autoHide", "responsive", "previousLabel", "nextLabel", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], outputs: ["pageChange", "pageBoundsCorrection"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i9.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i10.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i18.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "pipe", type: i2$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i4$3.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i11$2.TranslocoPipe, name: "transloco" }] }); }
|
|
6529
6532
|
}
|
|
6530
6533
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CrmActionsComponent, decorators: [{
|
|
6531
6534
|
type: Component,
|
|
6532
|
-
args: [{ selector: 'pw-crm-actions', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 mb-4\">\n <div class=\"col-12 mb-0\">\n <h2>{{ 'Crm.Actions.Title' | transloco }}</h2>\n </div>\n <div class=\"col-12 col-sm-3 float-start mb-2\"\n *ngIf=\"showFilter\">\n <p-dropdown\n [options]=\"allSubscriptionMembers\"\n optionLabel=\"first_name\"\n optionValue=\"id\"\n [ngModel]=\"0\"\n (onChange)=\"filterByUser($event.value)\">\n\n <ng-template pTemplate=\"selectedItem\" let-selected>\n <span *ngIf=\"selected\">\n {{ selected.first_name }} {{ selected.last_name }}\n </span>\n </ng-template>\n\n <ng-template pTemplate=\"item\" let-option>\n {{ option.first_name }} {{ option.last_name }}\n </ng-template>\n</p-dropdown>\n </div>\n <div>\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-opportunities\"\n [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary float-end me-3\"\n data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.AccountMessage.AddAccount' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary float-end me-3\"\n [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n data-cy=\"add-action\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n </div>\n </div>\n <!-- Pending Actions -->\n <div class=\"col-12 col-md-6 mb-3\">\n <h5 class=\"accordion-heading\">Pending Actions</h5>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div *ngIf=\"contactActions?.length === 0 && isLoaded\"\n class=\"px-2\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Actions.ActionMessage' | transloco\"> </pw-no-data>\n </div>\n <!-- wrapper for infinite scroll -->\n <div #selector class=\"pending-actions-wrapper\"\n infiniteScroll\n [infiniteScrollDistance]=\"2\"\n [infiniteScrollThrottle]=\"50\"\n [infiniteScrollContainer]=\"selector\"\n [fromRoot]=\"true\"\n (scrolled)=\"onScrollPendingActions()\">\n <div class=\"mb-4 action-card bg-white\"\n *ngFor=\"let action of contactActions; let i = index\">\n <div class=\"p-2\">\n <ul class=\"list-inline\">\n <li class=\"list-inline-item me-2\">\n <h6 *ngIf=\"!updating || actionId !== action.id\">\n {{ action.when_short_date }}\n </h6>\n <input *ngIf=\"updating && actionId === action.id\"\n placeholder=\"dd-mmm-yyyy\"\n [value]=\"action.when_short_date\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, action)\" />\n </li>\n <li>\n <button type=\"button\"\n class=\"btn btn-sm when-btn\"\n (click)=\"showDatePicker(action?.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n ngbTooltip=\"Click to Edit\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </li>\n <li class=\"list-inline-item\">\n <span class=\"badge bg-primary action-name\">{{ action.crm_action?.name }}</span>\n </li>\n <li>\n <ng-container *ngIf=\"action.owner?.user_avatar?.length > 0; else noProfileImg\">\n <ng-container *ngFor=\"let owner_image of action.owner?.user_avatar\">\n <div class=\"text-center my-2\" *ngIf=\"owner_image.width === 50\" [ngbTooltip]=\"action.owner.first_name + ' ' +action.owner.last_name\">\n <div class=\"avatar avatar-image\">\n <img\n class=\"img-fluid\"\n [src]=\"owner_image.url\"\n alt=\"Male Icon\"\n (error)=\"handleImageError($event, 'assets/img/icons/male.png')\"\n />\n </div>\n </div>\n </ng-container>\n </ng-container>\n\n <ng-template #noProfileImg>\n <div class=\"text-center my-2\">\n <div class=\"avatar avatar-image\">\n <img\n src=\"/assets/img/icons/male.png\"\n alt=\"\"\n class=\"img-fluid\"\n />\n </div>\n </div>\n </ng-template>\n </li>\n\n <li class=\"list-inline-item float-end\">\n <a *ngIf=\"action?.crm_contact\"\n ngbTooltip=\"See this contact\"\n aria-label=\"See this contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n action?.crm_contact?.id\n ]\">\n <i class=\"fa fa-eye me-3 see-icon\" aria-hidden=\"true\"></i>\n </a>\n <a ngbTooltip=\"Set as completed\"\n aria-label=\"Set as completed\"\n class=\"me-3\"\n href=\"javascript:void(0);\"\n (click)=\"setAsCompleted(action.id, action, i)\">\n <i class=\"fa fa-tasks cta1-icon\" aria-hidden=\"true\"></i>\n </a>\n <a ngbTooltip=\"Set as cancelled\"\n aria-label=\"Set as cancelled\"\n href=\"javascript:void(0);\"\n (click)=\"setAsCancelled(action.id, action, i)\">\n <i\n class=\"fa fa-times text-danger delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n </li>\n </ul>\n <p [class.text-danger]=\"!action.color\"\n class=\"mb-0\"\n *ngIf=\"action.due\">\n {{ action.due }}\n </p>\n <p *ngIf=\"action.owner?.id !== userId\"\n class=\"m-0 mt-1\">\n <a class=\"font-italic grey\"\n [routerLink]=\"['/members', action?.owner?.slug]\">Added by\n {{ action.owner?.first_name + ' ' + action.owner?.last_name }}</a>\n </p>\n <p class=\"mt-1 mb-1 fw-bold\">\n <a class=\"text-secondary\"\n *ngIf=\"action?.crm_contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n action?.crm_contact?.id\n ]\">\n {{\n action?.crm_contact?.first_name +\n ' ' +\n action?.crm_contact?.last_name\n }}\n </a>\n <a *ngIf=\"!action.crm_contact_id\">N/A</a> at\n <a *ngIf=\"action.crm_account_id\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n action?.crm_account?.id\n ]\">\n {{ action?.crm_account?.name }}\n </a>\n </p>\n <div class=\"comment-section\">\n <textarea class=\"mt-1 textarea form-control mb-2\"\n [(ngModel)]=\"action.comment\">{{ action.comment }}</textarea>\n <div class=\"d-flex\">\n <p class=\"my-1 comment\"\n *ngIf=\"!showFullComment || action.id !== commentId\">\n {{ action.comment | slice: 0:230\n }}<a *ngIf=\"action.comment.length > 230\"\n class=\"text-secondary\"\n (click)=\"showFullComment = true; commentId = action.id\">...show more\n </a>\n </p>\n <p class=\"my-1 comment\"\n *ngIf=\"showFullComment && action.id === commentId\">\n {{ action.comment }}\n <a *ngIf=\"action.comment.length > 230 && showFullComment\"\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n </p>\n <button class=\"btn btn-md edit-btn\"\n (click)=\"editComment($event)\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </button>\n </div>\n <div class=\"control-btns edit-control-btns\">\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-default me-2\"\n (click)=\"editComment(undefined)\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button class=\"btn btn-sm btn-primary\"\n (click)=\"updateComment(action)\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- Suggested Actions -->\n <div class=\"col-12 col-md-6 mb-3\">\n <h5 class=\"accordion-heading\">AI Suggested Actions</h5>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n\n\n <div #suggestedActionsSelector *ngIf=\"accountActionSuggested?.length > 0\" class=\"suggested-actions-wrapper\"\n infiniteScroll\n [infiniteScrollContainer]=\"suggestedActionsSelector\"\n [infiniteScrollDistance]=\"2\"\n [infiniteScrollThrottle]=\"50\">\n\n <div class=\"mb-4 action-card bg-white\"\n *ngFor=\"\n let suggestedAction of accountActionSuggested\n | paginate: { id: 'suggestedAction', itemsPerPage: 10, currentPage: p1 };\n let i = index\n \">\n <div class=\"p-2\">\n <p class=\"mt-1 mb-1 fw-bold\">\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n suggestedAction?.crm_account?.id\n ]\">{{ suggestedAction?.crm_account?.name }}</a>\n </p>\n <p class=\"fw-bold mb-1\">{{ suggestedAction.crm_action }}</p>\n <p class=\"mb-0\">{{ suggestedAction.reason }}</p>\n </div>\n </div>\n </div>\n <div class=\"text-center pagination-controls w-100 mt-3\"\n *ngIf=\"accountActionSuggested?.length > 10\">\n <pagination-controls id=\"suggestedAction\"\n (pageChange)=\"p1 = $event\">\n </pagination-controls>\n </div>\n <div *ngIf=\"accountActionSuggested.length === 0 && isLoadedSuggested\"\n class=\"px-2\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Actions.ActionSuggestionsMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.textarea,.control-btns{display:none}.comment,.edit-btn{display:block}.comment{border:0;border-bottom:1px solid rgb(242,242,242);color:#000;font-size:1rem;resize:none}.action-name{background-color:var(--first)!important}.textarea{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:17px}.comment-section{min-width:350px;padding-right:45px;position:relative}.comment-section p{word-break:break-all}.comment-section.show-controls .textarea,.comment-section.show-controls .control-btns{display:block}.comment-section.show-controls .comment,.comment-section.show-controls .edit-btn{display:none}.comment-section.show-controls .control-btns.edit-control-btns{display:flex;justify-content:flex-end}.edit-btn{margin-top:-15px}.avatar-image{height:25px;width:25px}.when-btn:focus{border:0;box-shadow:none}.pending-actions-wrapper,.suggested-actions-wrapper{overflow-y:auto;height:calc(100vh - 150px)}\n"] }]
|
|
6535
|
+
args: [{ selector: 'pw-crm-actions', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 mb-4\">\n <div class=\"col-12 mb-0\">\n <h2>{{ 'Crm.Actions.Title' | transloco }}</h2>\n </div>\n <div class=\"col-12 col-sm-3 float-start mb-2\"\n *ngIf=\"showFilter\">\n <p-dropdown\n [options]=\"allSubscriptionMembers\"\n optionLabel=\"first_name\"\n optionValue=\"id\"\n [ngModel]=\"0\"\n (onChange)=\"filterByUser($event.value)\">\n\n <ng-template pTemplate=\"selectedItem\" let-selected>\n <span *ngIf=\"selected\">\n {{ selected.first_name }} {{ selected.last_name }}\n </span>\n </ng-template>\n\n <ng-template pTemplate=\"item\" let-option>\n {{ option.first_name }} {{ option.last_name }}\n </ng-template>\n</p-dropdown>\n </div>\n <div>\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-opportunities\"\n [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary float-end me-3\"\n data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.AccountMessage.AddAccount' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary float-end me-3\"\n [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n data-cy=\"add-action\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n </div>\n </div>\n <!-- Pending Actions -->\n <div class=\"col-12 col-md-6 mb-3\">\n <h5 class=\"accordion-heading\">Pending Actions</h5>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div *ngIf=\"contactActions?.length === 0 && isLoaded\"\n class=\"px-2\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Actions.ActionMessage' | transloco\"> </pw-no-data>\n </div>\n <!-- wrapper for infinite scroll -->\n <div #selector class=\"pending-actions-wrapper\"\n infiniteScroll\n [infiniteScrollDistance]=\"2\"\n [infiniteScrollThrottle]=\"50\"\n [infiniteScrollContainer]=\"selector\"\n [fromRoot]=\"true\"\n (scrolled)=\"onScrollPendingActions()\">\n <div class=\"mb-4 action-card bg-white\"\n *ngFor=\"let action of contactActions; let i = index\">\n <div class=\"p-2\">\n <ul class=\"list-inline\">\n <li class=\"list-inline-item me-2\">\n <h6 *ngIf=\"!updating || actionId !== action.id\">\n {{ action.when_short_date }}\n </h6>\n <input *ngIf=\"updating && actionId === action.id\"\n placeholder=\"dd-mmm-yyyy\"\n [value]=\"action.when_short_date\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, action)\" />\n </li>\n <li>\n <button type=\"button\"\n class=\"btn btn-sm when-btn\"\n (click)=\"showDatePicker(action?.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n ngbTooltip=\"Click to Edit\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </li>\n <li class=\"list-inline-item\">\n <span class=\"badge bg-primary action-name\">{{ action.crm_action?.name }}</span>\n </li>\n <li>\n <ng-container *ngIf=\"action.owner?.user_avatar?.length > 0; else noProfileImg\">\n <ng-container *ngFor=\"let owner_image of action.owner?.user_avatar\">\n <div class=\"text-center my-2\" *ngIf=\"owner_image.width === 50\" [ngbTooltip]=\"action.owner.first_name + ' ' +action.owner.last_name\">\n <div class=\"avatar avatar-image\">\n <img\n class=\"img-fluid\"\n [src]=\"owner_image.url\"\n alt=\"Male Icon\"\n (error)=\"handleImageError($event, 'assets/img/icons/male.png')\"\n />\n </div>\n </div>\n </ng-container>\n </ng-container>\n\n <ng-template #noProfileImg>\n <div class=\"text-center my-2\">\n <div class=\"avatar avatar-image\">\n <img\n src=\"/assets/img/icons/male.png\"\n alt=\"\"\n class=\"img-fluid\"\n />\n </div>\n </div>\n </ng-template>\n </li>\n\n <li class=\"list-inline-item float-end\">\n <a *ngIf=\"action?.crm_contact\"\n ngbTooltip=\"See this contact\"\n aria-label=\"See this contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n action?.crm_contact?.id\n ]\">\n <i class=\"fa fa-eye me-3 see-icon\" aria-hidden=\"true\"></i>\n </a>\n <a ngbTooltip=\"Set as completed\"\n aria-label=\"Set as completed\"\n class=\"me-3\"\n href=\"#\"\n (click)=\"$event.preventDefault(); setAsCompleted(action.id, action, i)\">\n <i class=\"fa fa-tasks cta1-icon\" aria-hidden=\"true\"></i>\n </a>\n <a ngbTooltip=\"Set as cancelled\"\n aria-label=\"Set as cancelled\"\n href=\"#\"\n (click)=\"$event.preventDefault(); setAsCancelled(action.id, action, i)\">\n <i\n class=\"fa fa-times text-danger delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n </li>\n </ul>\n <p [class.text-danger]=\"!action.color\"\n class=\"mb-0\"\n *ngIf=\"action.due\">\n {{ action.due }}\n </p>\n <p *ngIf=\"action.owner?.id !== userId\"\n class=\"m-0 mt-1\">\n <a class=\"font-italic grey\"\n [routerLink]=\"['/members', action?.owner?.slug]\">Added by\n {{ action.owner?.first_name + ' ' + action.owner?.last_name }}</a>\n </p>\n <p class=\"mt-1 mb-1 fw-bold\">\n <a class=\"text-secondary\"\n *ngIf=\"action?.crm_contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n action?.crm_contact?.id\n ]\">\n {{\n action?.crm_contact?.first_name +\n ' ' +\n action?.crm_contact?.last_name\n }}\n </a>\n <a *ngIf=\"!action.crm_contact_id\">N/A</a> at\n <a *ngIf=\"action.crm_account_id\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n action?.crm_account?.id\n ]\">\n {{ action?.crm_account?.name }}\n </a>\n </p>\n <div class=\"comment-section\">\n <textarea class=\"mt-1 textarea form-control mb-2\"\n [(ngModel)]=\"action.comment\">{{ action.comment }}</textarea>\n <div class=\"d-flex\">\n <p class=\"my-1 comment\"\n *ngIf=\"!showFullComment || action.id !== commentId\">\n {{ action.comment | slice: 0:230\n }}<a *ngIf=\"action.comment.length > 230\"\n class=\"text-secondary\"\n (click)=\"showFullComment = true; commentId = action.id\">...show more\n </a>\n </p>\n <p class=\"my-1 comment\"\n *ngIf=\"showFullComment && action.id === commentId\">\n {{ action.comment }}\n <a *ngIf=\"action.comment.length > 230 && showFullComment\"\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n </p>\n <button class=\"btn btn-md edit-btn\"\n (click)=\"editComment($event)\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </button>\n </div>\n <div class=\"control-btns edit-control-btns\">\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-default me-2\"\n (click)=\"editComment(undefined)\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button class=\"btn btn-sm btn-primary\"\n (click)=\"updateComment(action)\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- Suggested Actions -->\n <div class=\"col-12 col-md-6 mb-3\">\n <h5 class=\"accordion-heading\">AI Suggested Actions</h5>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n\n\n <div #suggestedActionsSelector *ngIf=\"accountActionSuggested?.length > 0\" class=\"suggested-actions-wrapper\"\n infiniteScroll\n [infiniteScrollContainer]=\"suggestedActionsSelector\"\n [infiniteScrollDistance]=\"2\"\n [infiniteScrollThrottle]=\"50\">\n\n <div class=\"mb-4 action-card bg-white\"\n *ngFor=\"\n let suggestedAction of accountActionSuggested\n | paginate: { id: 'suggestedAction', itemsPerPage: 10, currentPage: p1 };\n let i = index\n \">\n <div class=\"p-2\">\n <p class=\"mt-1 mb-1 fw-bold\">\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n suggestedAction?.crm_account?.id\n ]\">{{ suggestedAction?.crm_account?.name }}</a>\n </p>\n <p class=\"fw-bold mb-1\">{{ suggestedAction.crm_action }}</p>\n <p class=\"mb-0\">{{ suggestedAction.reason }}</p>\n </div>\n </div>\n </div>\n <div class=\"text-center pagination-controls w-100 mt-3\"\n *ngIf=\"accountActionSuggested?.length > 10\">\n <pagination-controls id=\"suggestedAction\"\n (pageChange)=\"p1 = $event\">\n </pagination-controls>\n </div>\n <div *ngIf=\"accountActionSuggested.length === 0 && isLoadedSuggested\"\n class=\"px-2\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Actions.ActionSuggestionsMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.textarea,.control-btns{display:none}.comment,.edit-btn{display:block}.comment{border:0;border-bottom:1px solid rgb(242,242,242);color:#000;font-size:1rem;resize:none}.action-name{background-color:var(--first)!important}.textarea{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:17px}.comment-section{min-width:350px;padding-right:45px;position:relative}.comment-section p{word-break:break-all}.comment-section.show-controls .textarea,.comment-section.show-controls .control-btns{display:block}.comment-section.show-controls .comment,.comment-section.show-controls .edit-btn{display:none}.comment-section.show-controls .control-btns.edit-control-btns{display:flex;justify-content:flex-end}.edit-btn{margin-top:-15px}.avatar-image{height:25px;width:25px}.when-btn:focus{border:0;box-shadow:none}.pending-actions-wrapper,.suggested-actions-wrapper{overflow-y:auto;height:calc(100vh - 150px)}\n"] }]
|
|
6533
6536
|
}], ctorParameters: () => [{ type: i1.CrmService }, { type: i0.Injector }, { type: Document, decorators: [{
|
|
6534
6537
|
type: Inject,
|
|
6535
6538
|
args: [DOCUMENT]
|
|
@@ -6916,7 +6919,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
6916
6919
|
}]
|
|
6917
6920
|
}] });
|
|
6918
6921
|
|
|
6919
|
-
PlotlyViaCDNModule.setPlotlyVersion('
|
|
6922
|
+
PlotlyViaCDNModule.setPlotlyVersion('2.33.0', 'custom', 'https://cdn.jsdelivr.net/npm/plotly.js-strict-dist-min@2.33.0/plotly-strict.min.js');
|
|
6920
6923
|
class SmartCrmPrivateModule {
|
|
6921
6924
|
constructor() {
|
|
6922
6925
|
console.log('🚀 SMART CRM MODULE LOADED! - User is authenticated');
|