@posiwise/smart-crm 0.0.67 → 0.0.68
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.
|
@@ -627,11 +627,11 @@ class SmartCrmCompanyFilesComponent extends AppBaseComponent {
|
|
|
627
627
|
super.ngOnDestroy();
|
|
628
628
|
}
|
|
629
629
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SmartCrmCompanyFilesComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i2$2.NgbModal }, { token: i2.AuthService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
630
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: SmartCrmCompanyFilesComponent, isStandalone: false, selector: "pw-smart-crm-company-files", inputs: { accountId: "accountId", contactId: "contactId", opportunityId: "opportunityId" }, usesInheritance: true, ngImport: i0, template: "<div class=\"row d-none\">\n <div class=\"col-12 mb-3\">\n <h2>Account Files</h2>\n </div>\n</div>\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-file\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add File' | 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]=\"totalRecordsUnFiltered === 0\">\n <p-table #dt\n [value]=\"allFiles\"\n [paginator]=\"totalRecords !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\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 <label for=\"crm-account-files-search\" class=\"visually-hidden\">Search Files</label>\n <input type=\"text\"\n id=\"crm-account-files-search\"\n name=\"crm-account-files-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n size=\"50\"\n placeholder=\"Search Files...\"\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=\"owner_id\">\n {{ 'Crm.AccountFilesMessage.Owner' | transloco }}\n <p-sortIcon field=\"owner_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_account_id\">\n {{ 'Crm.AccountFilesMessage.Account' | transloco }}\n <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_contact_id\">\n {{ 'Crm.AccountFilesMessage.Contact' | transloco }}\n <p-sortIcon field=\"crm_contact_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_opportunity_id\">\n {{ 'Crm.AccountFilesMessage.Opportunity' | transloco }}\n <p-sortIcon field=\"crm_opportunity_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"file\">\n {{ 'Crm.AccountFilesMessage.File' | transloco }}\n <p-sortIcon field=\"file\"></p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-file>\n <tr>\n <td data-head=\"Owner\">{{ file.owner?.first_name }} {{ file.owner?.last_name }}</td>\n <td data-head=\"Account\">\n <a *ngIf=\"file.crm_account_id\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n file.crm_account_id\n ]\">{{ file.crm_account?.name }}</a>\n </td>\n <td data-head=\"Contact\">\n <a *ngIf=\"file.crm_contact_id\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n file.crm_contact_id\n ]\">{{ file.crm_contact | ifNameNullShowEmail }}</a>\n </td>\n <td data-head=\"Opportunities\">{{ file?.crm_opportunity?.title }}</td>\n <td data-head=\"Files\">\n <a href=\"{{ file.file?.url }}\"\n target=\"blank\">{{\n file.file.url.split('?')[0].split('/')[\n file.file.url.split('?')[0].split('/').length - 1\n ]\n }}</a>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <ng-container *ngIf=\"hasAccess || file.owner_id === userId\">\n <li ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (keydown.enter)=\"onDelete(file.id)\"\n (keydown.space)=\"onDelete(file.id)\"\n (click)=\"onDelete(file.id)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n </ng-container>\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 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountFilesMessage.NoDataMessage' | transloco\"> </pw-no-data>\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", 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: 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: 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: i12.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i12.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "pipe", type: i15.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i11$2.TranslocoPipe, name: "transloco" }] }); }
|
|
630
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: SmartCrmCompanyFilesComponent, isStandalone: false, selector: "pw-smart-crm-company-files", inputs: { accountId: "accountId", contactId: "contactId", opportunityId: "opportunityId" }, usesInheritance: true, ngImport: i0, template: "<div class=\"row d-none\">\n <div class=\"col-12 mb-3\">\n <h2>Account Files</h2>\n </div>\n</div>\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-file\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add File' | 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]=\"totalRecordsUnFiltered === 0\">\n <p-table #dt\n [value]=\"allFiles\"\n [paginator]=\"totalRecords !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\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 <label for=\"crm-account-files-search\" class=\"visually-hidden\">Search Files</label>\n <input type=\"text\"\n id=\"crm-account-files-search\"\n name=\"crm-account-files-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n size=\"50\"\n placeholder=\"Search Files...\"\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=\"owner_id\">\n {{ 'Crm.AccountFilesMessage.Owner' | transloco }}\n <p-sortIcon field=\"owner_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_account_id\">\n {{ 'Crm.AccountFilesMessage.Account' | transloco }}\n <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_contact_id\">\n {{ 'Crm.AccountFilesMessage.Contact' | transloco }}\n <p-sortIcon field=\"crm_contact_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_opportunity_id\">\n {{ 'Crm.AccountFilesMessage.Opportunity' | transloco }}\n <p-sortIcon field=\"crm_opportunity_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"file\">\n {{ 'Crm.AccountFilesMessage.File' | transloco }}\n <p-sortIcon field=\"file\"></p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-file>\n <tr>\n <td data-head=\"Owner\">{{ file.owner?.first_name }} {{ file.owner?.last_name }}</td>\n <td data-head=\"Account\">\n <a *ngIf=\"file.crm_account_id\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n file.crm_account_id\n ]\">{{ file.crm_account?.name }}</a>\n </td>\n <td data-head=\"Contact\">\n <a *ngIf=\"file.crm_contact_id\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n file.crm_contact_id\n ]\">{{ file.crm_contact | ifNameNullShowEmail }}</a>\n </td>\n <td data-head=\"Opportunities\">{{ file?.crm_opportunity?.title }}</td>\n <td data-head=\"Files\">\n <a href=\"{{ file.file?.url }}\"\n target=\"blank\">{{\n file.file.url.split('?')[0].split('/')[\n file.file.url.split('?')[0].split('/').length - 1\n ]\n }}</a>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <ng-container *ngIf=\"hasAccess || file.owner_id === userId\">\n <li ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (keydown.enter)=\"onDelete(file.id)\"\n (keydown.space)=\"onDelete(file.id)\"\n (click)=\"onDelete(file.id)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n </ng-container>\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 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountFilesMessage.NoDataMessage' | transloco\"> </pw-no-data>\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\" for=\"account-files-file-upload\">\n <input type=\"file\"\n id=\"account-files-file-upload\"\n name=\"account-files-file-upload\"\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", 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: 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: 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: i12.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i12.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "pipe", type: i15.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i11$2.TranslocoPipe, name: "transloco" }] }); }
|
|
631
631
|
}
|
|
632
632
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SmartCrmCompanyFilesComponent, decorators: [{
|
|
633
633
|
type: Component,
|
|
634
|
-
args: [{ selector: 'pw-smart-crm-company-files', standalone: false, template: "<div class=\"row d-none\">\n <div class=\"col-12 mb-3\">\n <h2>Account Files</h2>\n </div>\n</div>\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-file\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add File' | 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]=\"totalRecordsUnFiltered === 0\">\n <p-table #dt\n [value]=\"allFiles\"\n [paginator]=\"totalRecords !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\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 <label for=\"crm-account-files-search\" class=\"visually-hidden\">Search Files</label>\n <input type=\"text\"\n id=\"crm-account-files-search\"\n name=\"crm-account-files-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n size=\"50\"\n placeholder=\"Search Files...\"\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=\"owner_id\">\n {{ 'Crm.AccountFilesMessage.Owner' | transloco }}\n <p-sortIcon field=\"owner_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_account_id\">\n {{ 'Crm.AccountFilesMessage.Account' | transloco }}\n <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_contact_id\">\n {{ 'Crm.AccountFilesMessage.Contact' | transloco }}\n <p-sortIcon field=\"crm_contact_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_opportunity_id\">\n {{ 'Crm.AccountFilesMessage.Opportunity' | transloco }}\n <p-sortIcon field=\"crm_opportunity_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"file\">\n {{ 'Crm.AccountFilesMessage.File' | transloco }}\n <p-sortIcon field=\"file\"></p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-file>\n <tr>\n <td data-head=\"Owner\">{{ file.owner?.first_name }} {{ file.owner?.last_name }}</td>\n <td data-head=\"Account\">\n <a *ngIf=\"file.crm_account_id\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n file.crm_account_id\n ]\">{{ file.crm_account?.name }}</a>\n </td>\n <td data-head=\"Contact\">\n <a *ngIf=\"file.crm_contact_id\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n file.crm_contact_id\n ]\">{{ file.crm_contact | ifNameNullShowEmail }}</a>\n </td>\n <td data-head=\"Opportunities\">{{ file?.crm_opportunity?.title }}</td>\n <td data-head=\"Files\">\n <a href=\"{{ file.file?.url }}\"\n target=\"blank\">{{\n file.file.url.split('?')[0].split('/')[\n file.file.url.split('?')[0].split('/').length - 1\n ]\n }}</a>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <ng-container *ngIf=\"hasAccess || file.owner_id === userId\">\n <li ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (keydown.enter)=\"onDelete(file.id)\"\n (keydown.space)=\"onDelete(file.id)\"\n (click)=\"onDelete(file.id)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n </ng-container>\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 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountFilesMessage.NoDataMessage' | transloco\"> </pw-no-data>\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" }]
|
|
634
|
+
args: [{ selector: 'pw-smart-crm-company-files', standalone: false, template: "<div class=\"row d-none\">\n <div class=\"col-12 mb-3\">\n <h2>Account Files</h2>\n </div>\n</div>\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-file\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add File' | 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]=\"totalRecordsUnFiltered === 0\">\n <p-table #dt\n [value]=\"allFiles\"\n [paginator]=\"totalRecords !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\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 <label for=\"crm-account-files-search\" class=\"visually-hidden\">Search Files</label>\n <input type=\"text\"\n id=\"crm-account-files-search\"\n name=\"crm-account-files-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n size=\"50\"\n placeholder=\"Search Files...\"\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=\"owner_id\">\n {{ 'Crm.AccountFilesMessage.Owner' | transloco }}\n <p-sortIcon field=\"owner_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_account_id\">\n {{ 'Crm.AccountFilesMessage.Account' | transloco }}\n <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_contact_id\">\n {{ 'Crm.AccountFilesMessage.Contact' | transloco }}\n <p-sortIcon field=\"crm_contact_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_opportunity_id\">\n {{ 'Crm.AccountFilesMessage.Opportunity' | transloco }}\n <p-sortIcon field=\"crm_opportunity_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"file\">\n {{ 'Crm.AccountFilesMessage.File' | transloco }}\n <p-sortIcon field=\"file\"></p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-file>\n <tr>\n <td data-head=\"Owner\">{{ file.owner?.first_name }} {{ file.owner?.last_name }}</td>\n <td data-head=\"Account\">\n <a *ngIf=\"file.crm_account_id\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n file.crm_account_id\n ]\">{{ file.crm_account?.name }}</a>\n </td>\n <td data-head=\"Contact\">\n <a *ngIf=\"file.crm_contact_id\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n file.crm_contact_id\n ]\">{{ file.crm_contact | ifNameNullShowEmail }}</a>\n </td>\n <td data-head=\"Opportunities\">{{ file?.crm_opportunity?.title }}</td>\n <td data-head=\"Files\">\n <a href=\"{{ file.file?.url }}\"\n target=\"blank\">{{\n file.file.url.split('?')[0].split('/')[\n file.file.url.split('?')[0].split('/').length - 1\n ]\n }}</a>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <ng-container *ngIf=\"hasAccess || file.owner_id === userId\">\n <li ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (keydown.enter)=\"onDelete(file.id)\"\n (keydown.space)=\"onDelete(file.id)\"\n (click)=\"onDelete(file.id)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n </ng-container>\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 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountFilesMessage.NoDataMessage' | transloco\"> </pw-no-data>\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\" for=\"account-files-file-upload\">\n <input type=\"file\"\n id=\"account-files-file-upload\"\n name=\"account-files-file-upload\"\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" }]
|
|
635
635
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i2$2.NgbModal }, { type: i2.AuthService }, { type: i0.ChangeDetectorRef }], propDecorators: { accountId: [{
|
|
636
636
|
type: Input
|
|
637
637
|
}], contactId: [{
|
|
@@ -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.19", 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.19", 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=\"crm-account-info-name\">{{ 'Crm.AccountMessage.Name' | transloco }}</label>\n <input type=\"text\"\n id=\"crm-account-info-name\"\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 <span class=\"pw-label-style label mb-0\" id=\"crm-account-info-location-label\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</span>\n <input ngx-gp-autocomplete\n id=\"crm-account-info-location\"\n name=\"location\"\n [attr.aria-labelledby]=\"'crm-account-info-location-label'\"\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 <span id=\"crm-account-info-country-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-country-label'\"\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-select>\n </div>\n <div class=\"mb-3 ui-fluid skills-modal\">\n <span class=\"pw-label-style label mb-2\" id=\"crm-account-info-owner-label\">{{ 'Crm.AccountMessage.Owner' | transloco }}</span>\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 [attr.aria-labelledby]=\"'crm-account-info-owner-label'\"\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=\"crm-account-info-company_url\">{{\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 id=\"crm-account-info-company_url\"\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=\"crm-account-info-tel\">{{ 'Crm.AccountMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n id=\"crm-account-info-tel\"\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 <span id=\"crm-account-info-organization-type-label\" class=\"pw-label-style\">{{ 'Organization.OrganizationType' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-organization-type-label'\"\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-select>\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationIndustries$ | async as industries\">\n <span id=\"crm-account-info-industry-label\" class=\"pw-label-style\">{{ 'Organization.OrganizationIndustry' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-industry-label'\"\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-select>\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationSizes$ | async as sizes\">\n <span id=\"crm-account-info-size-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Size' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-size-label'\"\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-select>\n </div>\n <div class=\"mb-3\">\n <span id=\"crm-account-info-status-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Status' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-status-label'\"\n [options]=\"status\"\n formControlName=\"status\"\n [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\"\n [placeholder]=\"'Select Status'\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span id=\"crm-account-info-priority-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Priority' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-priority-label'\"\n [options]=\"priority\"\n formControlName=\"priority\"\n [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\"\n [placeholder]=\"'Select Priority'\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span id=\"crm-account-info-source-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Source' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-source-label'\"\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-select>\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 <label for=\"crm-account-info-comment\" class=\"visually-hidden\">Note</label>\n <textarea id=\"crm-account-info-comment\"\n name=\"comment\"\n 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 <label for=\"crm-account-info-when\" class=\"visually-hidden\">Date</label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-account-info-when\"\n name=\"when\"\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 inputId=\"crm-account-info-search-contact\"\n [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 [id]=\"'crm-account-timeline-comment-' + item.id\"\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 [id]=\"'crm-account-info-when-' + item.id\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n value=\"{{ item.when }}\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\"\n aria-label=\"Date\" />\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 <label for=\"crm-account-info-search-contact\" class=\"visually-hidden\">Search contact</label>\n <input type=\"text\"\n id=\"crm-account-info-search-contact\"\n name=\"crm-account-info-search-contact\"\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.Select, selector: "p-select", 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", "size", "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", "controlId", "useAriaLabelledbyOnly", "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.19", 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=\"crm-account-info-name\">{{ 'Crm.AccountMessage.Name' | transloco }}</label>\n <input type=\"text\"\n id=\"crm-account-info-name\"\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 <span class=\"pw-label-style label mb-0\" id=\"crm-account-info-location-label\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</span>\n <input ngx-gp-autocomplete\n id=\"crm-account-info-location\"\n name=\"location\"\n [attr.aria-labelledby]=\"'crm-account-info-location-label'\"\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 <span id=\"crm-account-info-country-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-country-label'\"\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-select>\n </div>\n <div class=\"mb-3 ui-fluid skills-modal\">\n <span class=\"pw-label-style label mb-2\" id=\"crm-account-info-owner-label\">{{ 'Crm.AccountMessage.Owner' | transloco }}</span>\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 [attr.aria-labelledby]=\"'crm-account-info-owner-label'\"\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 <span class=\"label mb-0 d-block\" id=\"crm-account-info-company_url-label\">{{\n 'Crm.AccountMessage.CompanyUrl' | transloco\n }}</span>\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 id=\"crm-account-info-company_url\"\n class=\"form-control rounded-0 ps-1 user-value\"\n [attr.aria-labelledby]=\"'crm-account-info-company_url-label'\"\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=\"crm-account-info-tel\">{{ 'Crm.AccountMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n id=\"crm-account-info-tel\"\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 <span id=\"crm-account-info-organization-type-label\" class=\"pw-label-style\">{{ 'Organization.OrganizationType' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-organization-type-label'\"\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-select>\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationIndustries$ | async as industries\">\n <span id=\"crm-account-info-industry-label\" class=\"pw-label-style\">{{ 'Organization.OrganizationIndustry' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-industry-label'\"\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-select>\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationSizes$ | async as sizes\">\n <span id=\"crm-account-info-size-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Size' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-size-label'\"\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-select>\n </div>\n <div class=\"mb-3\">\n <span id=\"crm-account-info-status-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Status' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-status-label'\"\n [options]=\"status\"\n formControlName=\"status\"\n [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\"\n [placeholder]=\"'Select Status'\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span id=\"crm-account-info-priority-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Priority' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-priority-label'\"\n [options]=\"priority\"\n formControlName=\"priority\"\n [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\"\n [placeholder]=\"'Select Priority'\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span id=\"crm-account-info-source-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Source' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-source-label'\"\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-select>\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 <label for=\"crm-account-info-comment\" class=\"visually-hidden\">Note</label>\n <textarea id=\"crm-account-info-comment\"\n name=\"comment\"\n 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 <label for=\"crm-account-info-when\" class=\"visually-hidden\">Date</label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-account-info-when\"\n name=\"when\"\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 inputId=\"crm-account-info-search-contact\"\n [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 [id]=\"'crm-account-timeline-comment-' + item.id\"\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 [id]=\"'crm-account-info-when-' + item.id\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n value=\"{{ item.when }}\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\"\n aria-label=\"Date\" />\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 <label for=\"crm-account-info-search-contact\" class=\"visually-hidden\">Search contact</label>\n <input type=\"text\"\n id=\"crm-account-info-search-contact\"\n name=\"crm-account-info-search-contact\"\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\" for=\"account-info-file-upload\">\n <input type=\"file\"\n id=\"account-info-file-upload\"\n name=\"account-info-file-upload\"\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.Select, selector: "p-select", 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", "size", "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", "controlId", "useAriaLabelledbyOnly", "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.19", 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=\"#\"\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=\"crm-account-info-name\">{{ 'Crm.AccountMessage.Name' | transloco }}</label>\n <input type=\"text\"\n id=\"crm-account-info-name\"\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 <span class=\"pw-label-style label mb-0\" id=\"crm-account-info-location-label\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</span>\n <input ngx-gp-autocomplete\n id=\"crm-account-info-location\"\n name=\"location\"\n [attr.aria-labelledby]=\"'crm-account-info-location-label'\"\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 <span id=\"crm-account-info-country-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-country-label'\"\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-select>\n </div>\n <div class=\"mb-3 ui-fluid skills-modal\">\n <span class=\"pw-label-style label mb-2\" id=\"crm-account-info-owner-label\">{{ 'Crm.AccountMessage.Owner' | transloco }}</span>\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 [attr.aria-labelledby]=\"'crm-account-info-owner-label'\"\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=\"crm-account-info-company_url\">{{\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 id=\"crm-account-info-company_url\"\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=\"crm-account-info-tel\">{{ 'Crm.AccountMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n id=\"crm-account-info-tel\"\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 <span id=\"crm-account-info-organization-type-label\" class=\"pw-label-style\">{{ 'Organization.OrganizationType' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-organization-type-label'\"\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-select>\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationIndustries$ | async as industries\">\n <span id=\"crm-account-info-industry-label\" class=\"pw-label-style\">{{ 'Organization.OrganizationIndustry' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-industry-label'\"\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-select>\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationSizes$ | async as sizes\">\n <span id=\"crm-account-info-size-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Size' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-size-label'\"\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-select>\n </div>\n <div class=\"mb-3\">\n <span id=\"crm-account-info-status-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Status' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-status-label'\"\n [options]=\"status\"\n formControlName=\"status\"\n [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\"\n [placeholder]=\"'Select Status'\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span id=\"crm-account-info-priority-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Priority' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-priority-label'\"\n [options]=\"priority\"\n formControlName=\"priority\"\n [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\"\n [placeholder]=\"'Select Priority'\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span id=\"crm-account-info-source-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Source' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-source-label'\"\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-select>\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 <label for=\"crm-account-info-comment\" class=\"visually-hidden\">Note</label>\n <textarea id=\"crm-account-info-comment\"\n name=\"comment\"\n 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 <label for=\"crm-account-info-when\" class=\"visually-hidden\">Date</label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-account-info-when\"\n name=\"when\"\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 inputId=\"crm-account-info-search-contact\"\n [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 [id]=\"'crm-account-timeline-comment-' + item.id\"\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 [id]=\"'crm-account-info-when-' + item.id\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n value=\"{{ item.when }}\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\"\n aria-label=\"Date\" />\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 <label for=\"crm-account-info-search-contact\" class=\"visually-hidden\">Search contact</label>\n <input type=\"text\"\n id=\"crm-account-info-search-contact\"\n name=\"crm-account-info-search-contact\"\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=\"crm-account-info-name\">{{ 'Crm.AccountMessage.Name' | transloco }}</label>\n <input type=\"text\"\n id=\"crm-account-info-name\"\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 <span class=\"pw-label-style label mb-0\" id=\"crm-account-info-location-label\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</span>\n <input ngx-gp-autocomplete\n id=\"crm-account-info-location\"\n name=\"location\"\n [attr.aria-labelledby]=\"'crm-account-info-location-label'\"\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 <span id=\"crm-account-info-country-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-country-label'\"\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-select>\n </div>\n <div class=\"mb-3 ui-fluid skills-modal\">\n <span class=\"pw-label-style label mb-2\" id=\"crm-account-info-owner-label\">{{ 'Crm.AccountMessage.Owner' | transloco }}</span>\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 [attr.aria-labelledby]=\"'crm-account-info-owner-label'\"\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 <span class=\"label mb-0 d-block\" id=\"crm-account-info-company_url-label\">{{\n 'Crm.AccountMessage.CompanyUrl' | transloco\n }}</span>\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 id=\"crm-account-info-company_url\"\n class=\"form-control rounded-0 ps-1 user-value\"\n [attr.aria-labelledby]=\"'crm-account-info-company_url-label'\"\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=\"crm-account-info-tel\">{{ 'Crm.AccountMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n id=\"crm-account-info-tel\"\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 <span id=\"crm-account-info-organization-type-label\" class=\"pw-label-style\">{{ 'Organization.OrganizationType' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-organization-type-label'\"\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-select>\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationIndustries$ | async as industries\">\n <span id=\"crm-account-info-industry-label\" class=\"pw-label-style\">{{ 'Organization.OrganizationIndustry' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-industry-label'\"\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-select>\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationSizes$ | async as sizes\">\n <span id=\"crm-account-info-size-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Size' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-size-label'\"\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-select>\n </div>\n <div class=\"mb-3\">\n <span id=\"crm-account-info-status-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Status' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-status-label'\"\n [options]=\"status\"\n formControlName=\"status\"\n [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\"\n [placeholder]=\"'Select Status'\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span id=\"crm-account-info-priority-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Priority' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-priority-label'\"\n [options]=\"priority\"\n formControlName=\"priority\"\n [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\"\n [placeholder]=\"'Select Priority'\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span id=\"crm-account-info-source-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Source' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-source-label'\"\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-select>\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 <label for=\"crm-account-info-comment\" class=\"visually-hidden\">Note</label>\n <textarea id=\"crm-account-info-comment\"\n name=\"comment\"\n 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 <label for=\"crm-account-info-when\" class=\"visually-hidden\">Date</label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-account-info-when\"\n name=\"when\"\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 inputId=\"crm-account-info-search-contact\"\n [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 [id]=\"'crm-account-timeline-comment-' + item.id\"\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 [id]=\"'crm-account-info-when-' + item.id\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n value=\"{{ item.when }}\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\"\n aria-label=\"Date\" />\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 <label for=\"crm-account-info-search-contact\" class=\"visually-hidden\">Search contact</label>\n <input type=\"text\"\n id=\"crm-account-info-search-contact\"\n name=\"crm-account-info-search-contact\"\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\" for=\"account-info-file-upload\">\n <input type=\"file\"\n id=\"account-info-file-upload\"\n name=\"account-info-file-upload\"\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]
|
|
@@ -2747,7 +2747,7 @@ class SmartCrmContactDetailsComponent extends AppBaseComponent {
|
|
|
2747
2747
|
super.ngOnDestroy();
|
|
2748
2748
|
}
|
|
2749
2749
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SmartCrmContactDetailsComponent, deps: [{ token: i2.CommonService }, { token: i1.CrmService }, { token: i0.ChangeDetectorRef }, { token: i2.GeoService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2750
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: SmartCrmContactDetailsComponent, isStandalone: false, selector: "pw-smart-crm-contact-details", usesInheritance: true, ngImport: i0, template: "<div class=\"me-auto col-xs-6\">\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 <h3 class=\"m-subheader__title m-subheader__title--separator\">\n <span>{{ 'Crm.ContactMessage.Contact' | transloco }}:\n {{ isLoading ? '' :\n (data?.first_name\n ? data?.first_name + ' ' + data.last_name\n : ('Label.AddNew' | transloco))\n }}</span>\n </h3>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"isLoading\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n<div class=\"p-2 mt-3\">\n <form [formGroup]=\"form\"\n *ngIf=\"!isLoading\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.FirstName' | transloco\"\n name=\"first_name\"\n controlId=\"crm-contact-first_name\"\n [errorMsg]=\"'Crm.ContactMessage.FirstNameErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-first_name\"\n class=\"form-control\"\n formControlName=\"first_name\"\n autocomplete=\"given-name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.LastName' | transloco\"\n name=\"last_name\"\n controlId=\"crm-contact-last_name\"\n [errorMsg]=\"'Crm.ContactMessage.LastNameErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-last_name\"\n class=\"form-control\"\n formControlName=\"last_name\"\n autocomplete=\"family-name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.AccountMessage.Location' | transloco\"\n [errorMsg]=\"'Crm.AccountMessage.LocationErrorMessage' | transloco\"\n name=\"location\"\n controlId=\"crm-contact-location\"\n [useAriaLabelledbyOnly]=\"true\">\n <input ngx-gp-autocomplete\n id=\"crm-contact-location\"\n name=\"location\"\n class=\"form-control\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n [attr.aria-labelledby]=\"'crm-contact-location-label'\"\n (onAddressChange)=\"handleAddressChange($event)\"\n [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4\">\n <span class=\"pw-label-style mb-2\" id=\"crm-contact-country-label\">{{ 'Crm.AccountMessage.Country' | transloco }}</span>\n <p-autoComplete inputId=\"crm-contact-country\"\n formControlName=\"country\"\n [attr.aria-labelledby]=\"'crm-contact-country-label'\"\n [suggestions]=\"filteredCountries\"\n (completeMethod)=\"onSearchCountry($event)\"\n dataKey=\"code\"\n field=\"name\"\n [multiple]=\"false\"\n styleClass=\"w-100\"\n placeholder=\"Search Country\"\n [dropdown]=\"true\"\n [inputStyle]=\"\n submitted && f['country'].errors\n ? { border: '1px solid #ff586b' }\n : { border: '1px solid gray' }\n \">\n </p-autoComplete>\n </div>\n\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Headline' | transloco\"\n name=\"headline\"\n controlId=\"crm-contact-headline\"\n [errorMsg]=\"'Crm.ContactMessage.HeadlineErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-headline\"\n class=\"form-control\"\n formControlName=\"headline\"\n [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-4 col-lg-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Tel' | transloco\"\n name=\"tel\"\n controlId=\"crm-contact-tel\"\n [errorMsg]=\"'Crm.ContactMessage.TelErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-tel\"\n class=\"form-control\"\n formControlName=\"tel\"\n autocomplete=\"tel\"\n [ngClass]=\"{ 'is-invalid': submitted && f['tel'].errors }\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Email' | transloco\"\n name=\"email\"\n controlId=\"crm-contact-email\"\n errorMsg=\"{{\n f['email']?.errors?.required ? 'Please enter email' : 'Please Enter valid email'\n }}\">\n <input type=\"email\"\n id=\"crm-contact-email\"\n class=\"form-control\"\n formControlName=\"email\"\n autocomplete=\"email\"\n [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Crm.ContactMessage.EmailVerified' | transloco\"\n class=\"nowrap\"\n name=\"email_verified\"\n controlId=\"crm-contact-email_verified\"\n [useAriaLabelledbyOnly]=\"true\">\n <ui-switch formControlName=\"email_verified\"\n name=\"email_verified\"\n [attr.aria-labelledby]=\"'crm-contact-email_verified-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['email_verified'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.LinkedInUrl' | transloco\"\n name=\"linkedin_url\"\n controlId=\"crm-contact-linkedin_url\">\n <input type=\"url\"\n id=\"crm-contact-linkedin_url\"\n class=\"form-control\"\n formControlName=\"linkedin_url\"\n autocomplete=\"url\" />\n </pw-input-container>\n </div>\n\n <div class=\"ui-fluid skills-modal col-sm-4\">\n <span class=\"pw-label-style mb-2\" id=\"crm-contact-account-label\">{{ 'Crm.ContactMessage.Account' | transloco\n }}<span class=\"text-danger required-icon\">*</span></span>\n <p-autoComplete [suggestions]=\"filteredAccounts\"\n [attr.aria-labelledby]=\"'crm-contact-account-label'\"\n formControlName=\"crm_account_id\"\n dataKey=\"id\"\n field=\"name\"\n [dropdown]=\"true\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n placeholder=\"Search accounts\"\n [multiple]=\"false\"\n autocomplete=\"off\">\n </p-autoComplete>\n </div>\n\n <div class=\"col-12 col-sm-4 col-lg-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Department' | transloco\"\n name=\"department_id\"\n controlId=\"crm-contact-department_id\"\n [useAriaLabelledbyOnly]=\"true\"\n *ngIf=\"departments$ | async as departments\">\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-department_id-label'\"\n [options]=\"departments['organization_departments']\"\n formControlName=\"department_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['department_id'].errors }\"\n [placeholder]=\"'Select Department'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-4 col-lg-4\">\n <span id=\"crm-contact-potential-label\" class=\"pw-label-style\">{{ 'Crm.ContactMessage.Potential' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-potential-label'\"\n [options]=\"potentials\"\n formControlName=\"potential\"\n [placeholder]=\"'Select Potential'\">\n </p-select>\n </div>\n\n <div class=\"col-12 col-sm-4 col-lg-4\">\n <span id=\"crm-contact-labels-label\" class=\"pw-label-style\">{{ 'Crm.ContactMessage.Labels' | transloco }} </span>\n <p-multiSelect inputId=\"crm-contact-details-labels\"\n [options]=\"labels\"\n [attr.aria-labelledby]=\"'crm-contact-labels-label'\"\n formControlName=\"labels\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n\n <div class=\"col-12 col-sm-4 col-lg-4\"\n *ngIf=\"crmSources$ | async as source\">\n <span id=\"crm-contact-source-label\" class=\"pw-label-style\">{{ 'Crm.ContactMessage.Source' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-source-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\"\n [options]=\"source['crm_sources']\"\n optionLabel=\"label\"\n optionValue=\"value\"\n formControlName=\"crm_source_id\"\n placeholder=\"select crm source\">\n </p-select>\n </div>\n\n <div class=\"col-12 col-sm-4 col-lg-4 mt-3\">\n <pw-input-container [label]=\"'Crm.ContactMessage.DateOfBirth' | transloco\"\n name=\"dob\" controlId=\"crm-contact-details-dob\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-contact-details-dob\"\n name=\"dob\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"dob\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n autocomplete=\"off\" />\n <div class=\"input-group-append\">\n <button class=\"btn btn-primary\"\n type=\"button\"\n aria-label=\"Open date picker\"\n (click)=\"d.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 text-end mt-3\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary\"\n [disabled]=\"form.invalid\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </form>\n</div>\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.ɵ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: "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: 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: "component", type: i6.Select, selector: "p-select", 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", "size", "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.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { 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.AsyncPipe, name: "async" }, { kind: "pipe", type: i11$2.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2750
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: SmartCrmContactDetailsComponent, isStandalone: false, selector: "pw-smart-crm-contact-details", usesInheritance: true, ngImport: i0, template: "<div class=\"me-auto col-xs-6\">\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 <h3 class=\"m-subheader__title m-subheader__title--separator\">\n <span>{{ 'Crm.ContactMessage.Contact' | transloco }}:\n {{ isLoading ? '' :\n (data?.first_name\n ? data?.first_name + ' ' + data.last_name\n : ('Label.AddNew' | transloco))\n }}</span>\n </h3>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"isLoading\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n<div class=\"p-2 mt-3\">\n <form [formGroup]=\"form\"\n *ngIf=\"!isLoading\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.FirstName' | transloco\"\n name=\"first_name\"\n controlId=\"crm-contact-first_name\"\n [errorMsg]=\"'Crm.ContactMessage.FirstNameErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-first_name\"\n class=\"form-control\"\n formControlName=\"first_name\"\n autocomplete=\"given-name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" name=\"input_first_name_1\"/>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.LastName' | transloco\"\n name=\"last_name\"\n controlId=\"crm-contact-last_name\"\n [errorMsg]=\"'Crm.ContactMessage.LastNameErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-last_name\"\n class=\"form-control\"\n formControlName=\"last_name\"\n autocomplete=\"family-name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" name=\"input_last_name_2\"/>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.AccountMessage.Location' | transloco\"\n [errorMsg]=\"'Crm.AccountMessage.LocationErrorMessage' | transloco\"\n name=\"location\"\n controlId=\"crm-contact-location\"\n [useAriaLabelledbyOnly]=\"true\">\n <input ngx-gp-autocomplete\n id=\"crm-contact-location\"\n name=\"location\"\n class=\"form-control\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n [attr.aria-labelledby]=\"'crm-contact-location-label'\"\n (onAddressChange)=\"handleAddressChange($event)\"\n [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4\">\n <span class=\"pw-label-style mb-2\" id=\"crm-contact-country-label\">{{ 'Crm.AccountMessage.Country' | transloco }}</span>\n <p-autoComplete inputId=\"crm-contact-country\"\n formControlName=\"country\"\n [attr.aria-labelledby]=\"'crm-contact-country-label'\"\n [suggestions]=\"filteredCountries\"\n (completeMethod)=\"onSearchCountry($event)\"\n dataKey=\"code\"\n field=\"name\"\n [multiple]=\"false\"\n styleClass=\"w-100\"\n placeholder=\"Search Country\"\n [dropdown]=\"true\"\n [inputStyle]=\"\n submitted && f['country'].errors\n ? { border: '1px solid #ff586b' }\n : { border: '1px solid gray' }\n \">\n </p-autoComplete>\n </div>\n\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Headline' | transloco\"\n name=\"headline\"\n controlId=\"crm-contact-headline\"\n [errorMsg]=\"'Crm.ContactMessage.HeadlineErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-headline\"\n class=\"form-control\"\n formControlName=\"headline\"\n [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" name=\"input_headline_4\"/>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-4 col-lg-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Tel' | transloco\"\n name=\"tel\"\n controlId=\"crm-contact-tel\"\n [errorMsg]=\"'Crm.ContactMessage.TelErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-tel\"\n class=\"form-control\"\n formControlName=\"tel\"\n autocomplete=\"tel\"\n [ngClass]=\"{ 'is-invalid': submitted && f['tel'].errors }\" name=\"input_tel_5\"/>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Email' | transloco\"\n name=\"email\"\n controlId=\"crm-contact-email\"\n errorMsg=\"{{\n f['email']?.errors?.required ? 'Please enter email' : 'Please Enter valid email'\n }}\">\n <input type=\"email\"\n id=\"crm-contact-email\"\n class=\"form-control\"\n formControlName=\"email\"\n autocomplete=\"email\"\n [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" name=\"input_email_6\"/>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Crm.ContactMessage.EmailVerified' | transloco\"\n class=\"nowrap\"\n name=\"email_verified\"\n controlId=\"crm-contact-email_verified\"\n [useAriaLabelledbyOnly]=\"true\">\n <ui-switch formControlName=\"email_verified\"\n name=\"email_verified\"\n [attr.aria-labelledby]=\"'crm-contact-email_verified-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['email_verified'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.LinkedInUrl' | transloco\"\n name=\"linkedin_url\"\n controlId=\"crm-contact-linkedin_url\">\n <input type=\"url\"\n id=\"crm-contact-linkedin_url\"\n class=\"form-control\"\n formControlName=\"linkedin_url\"\n autocomplete=\"url\" name=\"input_linkedin_url_7\"/>\n </pw-input-container>\n </div>\n\n <div class=\"ui-fluid skills-modal col-sm-4\">\n <span class=\"pw-label-style mb-2\" id=\"crm-contact-account-label\">{{ 'Crm.ContactMessage.Account' | transloco\n }}<span class=\"text-danger required-icon\">*</span></span>\n <p-autoComplete [suggestions]=\"filteredAccounts\"\n [attr.aria-labelledby]=\"'crm-contact-account-label'\"\n formControlName=\"crm_account_id\"\n dataKey=\"id\"\n field=\"name\"\n [dropdown]=\"true\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n placeholder=\"Search accounts\"\n [multiple]=\"false\"\n autocomplete=\"off\">\n </p-autoComplete>\n </div>\n\n <div class=\"col-12 col-sm-4 col-lg-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Department' | transloco\"\n name=\"department_id\"\n controlId=\"crm-contact-department_id\"\n [useAriaLabelledbyOnly]=\"true\"\n *ngIf=\"departments$ | async as departments\">\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-department_id-label'\"\n [options]=\"departments['organization_departments']\"\n formControlName=\"department_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['department_id'].errors }\"\n [placeholder]=\"'Select Department'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-4 col-lg-4\">\n <span id=\"crm-contact-potential-label\" class=\"pw-label-style\">{{ 'Crm.ContactMessage.Potential' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-potential-label'\"\n [options]=\"potentials\"\n formControlName=\"potential\"\n [placeholder]=\"'Select Potential'\">\n </p-select>\n </div>\n\n <div class=\"col-12 col-sm-4 col-lg-4\">\n <span id=\"crm-contact-labels-label\" class=\"pw-label-style\">{{ 'Crm.ContactMessage.Labels' | transloco }} </span>\n <p-multiSelect inputId=\"crm-contact-details-labels\"\n [options]=\"labels\"\n [attr.aria-labelledby]=\"'crm-contact-labels-label'\"\n formControlName=\"labels\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n\n <div class=\"col-12 col-sm-4 col-lg-4\"\n *ngIf=\"crmSources$ | async as source\">\n <span id=\"crm-contact-source-label\" class=\"pw-label-style\">{{ 'Crm.ContactMessage.Source' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-source-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\"\n [options]=\"source['crm_sources']\"\n optionLabel=\"label\"\n optionValue=\"value\"\n formControlName=\"crm_source_id\"\n placeholder=\"select crm source\">\n </p-select>\n </div>\n\n <div class=\"col-12 col-sm-4 col-lg-4 mt-3\">\n <pw-input-container [label]=\"'Crm.ContactMessage.DateOfBirth' | transloco\"\n name=\"dob\" controlId=\"crm-contact-details-dob\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-contact-details-dob\"\n name=\"dob\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"dob\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n autocomplete=\"off\" />\n <div class=\"input-group-append\">\n <button class=\"btn btn-primary\"\n type=\"button\"\n aria-label=\"Open date picker\"\n (click)=\"d.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 text-end mt-3\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary\"\n [disabled]=\"form.invalid\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </form>\n</div>\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.ɵ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: "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: 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: "component", type: i6.Select, selector: "p-select", 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", "size", "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.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { 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.AsyncPipe, name: "async" }, { kind: "pipe", type: i11$2.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2751
2751
|
}
|
|
2752
2752
|
__decorate([
|
|
2753
2753
|
ValidateForm('form'),
|
|
@@ -2757,7 +2757,7 @@ __decorate([
|
|
|
2757
2757
|
], SmartCrmContactDetailsComponent.prototype, "onSave", null);
|
|
2758
2758
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SmartCrmContactDetailsComponent, decorators: [{
|
|
2759
2759
|
type: Component,
|
|
2760
|
-
args: [{ selector: 'pw-smart-crm-contact-details', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"me-auto col-xs-6\">\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 <h3 class=\"m-subheader__title m-subheader__title--separator\">\n <span>{{ 'Crm.ContactMessage.Contact' | transloco }}:\n {{ isLoading ? '' :\n (data?.first_name\n ? data?.first_name + ' ' + data.last_name\n : ('Label.AddNew' | transloco))\n }}</span>\n </h3>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"isLoading\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n<div class=\"p-2 mt-3\">\n <form [formGroup]=\"form\"\n *ngIf=\"!isLoading\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.FirstName' | transloco\"\n name=\"first_name\"\n controlId=\"crm-contact-first_name\"\n [errorMsg]=\"'Crm.ContactMessage.FirstNameErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-first_name\"\n class=\"form-control\"\n formControlName=\"first_name\"\n autocomplete=\"given-name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.LastName' | transloco\"\n name=\"last_name\"\n controlId=\"crm-contact-last_name\"\n [errorMsg]=\"'Crm.ContactMessage.LastNameErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-last_name\"\n class=\"form-control\"\n formControlName=\"last_name\"\n autocomplete=\"family-name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.AccountMessage.Location' | transloco\"\n [errorMsg]=\"'Crm.AccountMessage.LocationErrorMessage' | transloco\"\n name=\"location\"\n controlId=\"crm-contact-location\"\n [useAriaLabelledbyOnly]=\"true\">\n <input ngx-gp-autocomplete\n id=\"crm-contact-location\"\n name=\"location\"\n class=\"form-control\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n [attr.aria-labelledby]=\"'crm-contact-location-label'\"\n (onAddressChange)=\"handleAddressChange($event)\"\n [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4\">\n <span class=\"pw-label-style mb-2\" id=\"crm-contact-country-label\">{{ 'Crm.AccountMessage.Country' | transloco }}</span>\n <p-autoComplete inputId=\"crm-contact-country\"\n formControlName=\"country\"\n [attr.aria-labelledby]=\"'crm-contact-country-label'\"\n [suggestions]=\"filteredCountries\"\n (completeMethod)=\"onSearchCountry($event)\"\n dataKey=\"code\"\n field=\"name\"\n [multiple]=\"false\"\n styleClass=\"w-100\"\n placeholder=\"Search Country\"\n [dropdown]=\"true\"\n [inputStyle]=\"\n submitted && f['country'].errors\n ? { border: '1px solid #ff586b' }\n : { border: '1px solid gray' }\n \">\n </p-autoComplete>\n </div>\n\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Headline' | transloco\"\n name=\"headline\"\n controlId=\"crm-contact-headline\"\n [errorMsg]=\"'Crm.ContactMessage.HeadlineErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-headline\"\n class=\"form-control\"\n formControlName=\"headline\"\n [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-4 col-lg-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Tel' | transloco\"\n name=\"tel\"\n controlId=\"crm-contact-tel\"\n [errorMsg]=\"'Crm.ContactMessage.TelErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-tel\"\n class=\"form-control\"\n formControlName=\"tel\"\n autocomplete=\"tel\"\n [ngClass]=\"{ 'is-invalid': submitted && f['tel'].errors }\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Email' | transloco\"\n name=\"email\"\n controlId=\"crm-contact-email\"\n errorMsg=\"{{\n f['email']?.errors?.required ? 'Please enter email' : 'Please Enter valid email'\n }}\">\n <input type=\"email\"\n id=\"crm-contact-email\"\n class=\"form-control\"\n formControlName=\"email\"\n autocomplete=\"email\"\n [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Crm.ContactMessage.EmailVerified' | transloco\"\n class=\"nowrap\"\n name=\"email_verified\"\n controlId=\"crm-contact-email_verified\"\n [useAriaLabelledbyOnly]=\"true\">\n <ui-switch formControlName=\"email_verified\"\n name=\"email_verified\"\n [attr.aria-labelledby]=\"'crm-contact-email_verified-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['email_verified'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.LinkedInUrl' | transloco\"\n name=\"linkedin_url\"\n controlId=\"crm-contact-linkedin_url\">\n <input type=\"url\"\n id=\"crm-contact-linkedin_url\"\n class=\"form-control\"\n formControlName=\"linkedin_url\"\n autocomplete=\"url\" />\n </pw-input-container>\n </div>\n\n <div class=\"ui-fluid skills-modal col-sm-4\">\n <span class=\"pw-label-style mb-2\" id=\"crm-contact-account-label\">{{ 'Crm.ContactMessage.Account' | transloco\n }}<span class=\"text-danger required-icon\">*</span></span>\n <p-autoComplete [suggestions]=\"filteredAccounts\"\n [attr.aria-labelledby]=\"'crm-contact-account-label'\"\n formControlName=\"crm_account_id\"\n dataKey=\"id\"\n field=\"name\"\n [dropdown]=\"true\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n placeholder=\"Search accounts\"\n [multiple]=\"false\"\n autocomplete=\"off\">\n </p-autoComplete>\n </div>\n\n <div class=\"col-12 col-sm-4 col-lg-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Department' | transloco\"\n name=\"department_id\"\n controlId=\"crm-contact-department_id\"\n [useAriaLabelledbyOnly]=\"true\"\n *ngIf=\"departments$ | async as departments\">\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-department_id-label'\"\n [options]=\"departments['organization_departments']\"\n formControlName=\"department_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['department_id'].errors }\"\n [placeholder]=\"'Select Department'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-4 col-lg-4\">\n <span id=\"crm-contact-potential-label\" class=\"pw-label-style\">{{ 'Crm.ContactMessage.Potential' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-potential-label'\"\n [options]=\"potentials\"\n formControlName=\"potential\"\n [placeholder]=\"'Select Potential'\">\n </p-select>\n </div>\n\n <div class=\"col-12 col-sm-4 col-lg-4\">\n <span id=\"crm-contact-labels-label\" class=\"pw-label-style\">{{ 'Crm.ContactMessage.Labels' | transloco }} </span>\n <p-multiSelect inputId=\"crm-contact-details-labels\"\n [options]=\"labels\"\n [attr.aria-labelledby]=\"'crm-contact-labels-label'\"\n formControlName=\"labels\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n\n <div class=\"col-12 col-sm-4 col-lg-4\"\n *ngIf=\"crmSources$ | async as source\">\n <span id=\"crm-contact-source-label\" class=\"pw-label-style\">{{ 'Crm.ContactMessage.Source' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-source-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\"\n [options]=\"source['crm_sources']\"\n optionLabel=\"label\"\n optionValue=\"value\"\n formControlName=\"crm_source_id\"\n placeholder=\"select crm source\">\n </p-select>\n </div>\n\n <div class=\"col-12 col-sm-4 col-lg-4 mt-3\">\n <pw-input-container [label]=\"'Crm.ContactMessage.DateOfBirth' | transloco\"\n name=\"dob\" controlId=\"crm-contact-details-dob\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-contact-details-dob\"\n name=\"dob\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"dob\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n autocomplete=\"off\" />\n <div class=\"input-group-append\">\n <button class=\"btn btn-primary\"\n type=\"button\"\n aria-label=\"Open date picker\"\n (click)=\"d.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 text-end mt-3\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary\"\n [disabled]=\"form.invalid\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </form>\n</div>\n" }]
|
|
2760
|
+
args: [{ selector: 'pw-smart-crm-contact-details', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"me-auto col-xs-6\">\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 <h3 class=\"m-subheader__title m-subheader__title--separator\">\n <span>{{ 'Crm.ContactMessage.Contact' | transloco }}:\n {{ isLoading ? '' :\n (data?.first_name\n ? data?.first_name + ' ' + data.last_name\n : ('Label.AddNew' | transloco))\n }}</span>\n </h3>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"isLoading\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n<div class=\"p-2 mt-3\">\n <form [formGroup]=\"form\"\n *ngIf=\"!isLoading\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.FirstName' | transloco\"\n name=\"first_name\"\n controlId=\"crm-contact-first_name\"\n [errorMsg]=\"'Crm.ContactMessage.FirstNameErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-first_name\"\n class=\"form-control\"\n formControlName=\"first_name\"\n autocomplete=\"given-name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" name=\"input_first_name_1\"/>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.LastName' | transloco\"\n name=\"last_name\"\n controlId=\"crm-contact-last_name\"\n [errorMsg]=\"'Crm.ContactMessage.LastNameErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-last_name\"\n class=\"form-control\"\n formControlName=\"last_name\"\n autocomplete=\"family-name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" name=\"input_last_name_2\"/>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.AccountMessage.Location' | transloco\"\n [errorMsg]=\"'Crm.AccountMessage.LocationErrorMessage' | transloco\"\n name=\"location\"\n controlId=\"crm-contact-location\"\n [useAriaLabelledbyOnly]=\"true\">\n <input ngx-gp-autocomplete\n id=\"crm-contact-location\"\n name=\"location\"\n class=\"form-control\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n [attr.aria-labelledby]=\"'crm-contact-location-label'\"\n (onAddressChange)=\"handleAddressChange($event)\"\n [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4\">\n <span class=\"pw-label-style mb-2\" id=\"crm-contact-country-label\">{{ 'Crm.AccountMessage.Country' | transloco }}</span>\n <p-autoComplete inputId=\"crm-contact-country\"\n formControlName=\"country\"\n [attr.aria-labelledby]=\"'crm-contact-country-label'\"\n [suggestions]=\"filteredCountries\"\n (completeMethod)=\"onSearchCountry($event)\"\n dataKey=\"code\"\n field=\"name\"\n [multiple]=\"false\"\n styleClass=\"w-100\"\n placeholder=\"Search Country\"\n [dropdown]=\"true\"\n [inputStyle]=\"\n submitted && f['country'].errors\n ? { border: '1px solid #ff586b' }\n : { border: '1px solid gray' }\n \">\n </p-autoComplete>\n </div>\n\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Headline' | transloco\"\n name=\"headline\"\n controlId=\"crm-contact-headline\"\n [errorMsg]=\"'Crm.ContactMessage.HeadlineErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-headline\"\n class=\"form-control\"\n formControlName=\"headline\"\n [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" name=\"input_headline_4\"/>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-4 col-lg-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Tel' | transloco\"\n name=\"tel\"\n controlId=\"crm-contact-tel\"\n [errorMsg]=\"'Crm.ContactMessage.TelErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-tel\"\n class=\"form-control\"\n formControlName=\"tel\"\n autocomplete=\"tel\"\n [ngClass]=\"{ 'is-invalid': submitted && f['tel'].errors }\" name=\"input_tel_5\"/>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Email' | transloco\"\n name=\"email\"\n controlId=\"crm-contact-email\"\n errorMsg=\"{{\n f['email']?.errors?.required ? 'Please enter email' : 'Please Enter valid email'\n }}\">\n <input type=\"email\"\n id=\"crm-contact-email\"\n class=\"form-control\"\n formControlName=\"email\"\n autocomplete=\"email\"\n [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" name=\"input_email_6\"/>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Crm.ContactMessage.EmailVerified' | transloco\"\n class=\"nowrap\"\n name=\"email_verified\"\n controlId=\"crm-contact-email_verified\"\n [useAriaLabelledbyOnly]=\"true\">\n <ui-switch formControlName=\"email_verified\"\n name=\"email_verified\"\n [attr.aria-labelledby]=\"'crm-contact-email_verified-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['email_verified'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.LinkedInUrl' | transloco\"\n name=\"linkedin_url\"\n controlId=\"crm-contact-linkedin_url\">\n <input type=\"url\"\n id=\"crm-contact-linkedin_url\"\n class=\"form-control\"\n formControlName=\"linkedin_url\"\n autocomplete=\"url\" name=\"input_linkedin_url_7\"/>\n </pw-input-container>\n </div>\n\n <div class=\"ui-fluid skills-modal col-sm-4\">\n <span class=\"pw-label-style mb-2\" id=\"crm-contact-account-label\">{{ 'Crm.ContactMessage.Account' | transloco\n }}<span class=\"text-danger required-icon\">*</span></span>\n <p-autoComplete [suggestions]=\"filteredAccounts\"\n [attr.aria-labelledby]=\"'crm-contact-account-label'\"\n formControlName=\"crm_account_id\"\n dataKey=\"id\"\n field=\"name\"\n [dropdown]=\"true\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n placeholder=\"Search accounts\"\n [multiple]=\"false\"\n autocomplete=\"off\">\n </p-autoComplete>\n </div>\n\n <div class=\"col-12 col-sm-4 col-lg-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Department' | transloco\"\n name=\"department_id\"\n controlId=\"crm-contact-department_id\"\n [useAriaLabelledbyOnly]=\"true\"\n *ngIf=\"departments$ | async as departments\">\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-department_id-label'\"\n [options]=\"departments['organization_departments']\"\n formControlName=\"department_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['department_id'].errors }\"\n [placeholder]=\"'Select Department'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-sm-4 col-lg-4\">\n <span id=\"crm-contact-potential-label\" class=\"pw-label-style\">{{ 'Crm.ContactMessage.Potential' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-potential-label'\"\n [options]=\"potentials\"\n formControlName=\"potential\"\n [placeholder]=\"'Select Potential'\">\n </p-select>\n </div>\n\n <div class=\"col-12 col-sm-4 col-lg-4\">\n <span id=\"crm-contact-labels-label\" class=\"pw-label-style\">{{ 'Crm.ContactMessage.Labels' | transloco }} </span>\n <p-multiSelect inputId=\"crm-contact-details-labels\"\n [options]=\"labels\"\n [attr.aria-labelledby]=\"'crm-contact-labels-label'\"\n formControlName=\"labels\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n\n <div class=\"col-12 col-sm-4 col-lg-4\"\n *ngIf=\"crmSources$ | async as source\">\n <span id=\"crm-contact-source-label\" class=\"pw-label-style\">{{ 'Crm.ContactMessage.Source' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-source-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\"\n [options]=\"source['crm_sources']\"\n optionLabel=\"label\"\n optionValue=\"value\"\n formControlName=\"crm_source_id\"\n placeholder=\"select crm source\">\n </p-select>\n </div>\n\n <div class=\"col-12 col-sm-4 col-lg-4 mt-3\">\n <pw-input-container [label]=\"'Crm.ContactMessage.DateOfBirth' | transloco\"\n name=\"dob\" controlId=\"crm-contact-details-dob\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-contact-details-dob\"\n name=\"dob\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"dob\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n autocomplete=\"off\" />\n <div class=\"input-group-append\">\n <button class=\"btn btn-primary\"\n type=\"button\"\n aria-label=\"Open date picker\"\n (click)=\"d.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 text-end mt-3\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary\"\n [disabled]=\"form.invalid\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </form>\n</div>\n" }]
|
|
2761
2761
|
}], ctorParameters: () => [{ type: i2.CommonService }, { type: i1.CrmService }, { type: i0.ChangeDetectorRef }, { type: i2.GeoService }, { type: i0.Injector }], propDecorators: { onSave: [] } });
|
|
2762
2762
|
|
|
2763
2763
|
class SmartCrmContactInfoComponent extends AppBaseComponent {
|
|
@@ -3198,11 +3198,11 @@ class SmartCrmContactInfoComponent extends AppBaseComponent {
|
|
|
3198
3198
|
super.ngOnDestroy();
|
|
3199
3199
|
}
|
|
3200
3200
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", 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.19", 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=\"crm-contact-info-location\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</label>\n <input ngx-gp-autocomplete\n id=\"crm-contact-info-location\"\n name=\"location\"\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-select\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-select>\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-select\n formControlName=\"potential\"\n [options]=\"potentials\"\n [placeholder]=\"'Select Potential'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['potential'].errors }\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\"for=\"Labels\">{{ 'Crm.ContactMessage.Labels' | transloco }} </label>\n <p-multiSelect inputId=\"crm-contact-info-labels\"\n [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 <label for=\"crm-contact-info-comment\" class=\"visually-hidden\">Note</label>\n <textarea id=\"crm-contact-info-comment\"\n name=\"comment\"\n 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 <label for=\"crm-contact-info-when\" class=\"visually-hidden\">Date</label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-contact-info-when\"\n name=\"when\"\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 [id]=\"'crm-contact-timeline-comment-' + item.id\"\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 [id]=\"'crm-contact-info-when-' + item.id\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n [value]=\"item.when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\"\n aria-label=\"Date\" />\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.Select, selector: "p-select", 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", "size", "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.19", 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=\"input_first_name_1\">{{\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 }\" id=\"input_first_name_1\" name=\"input_first_name_1\"/>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"input_last_name_2\">{{\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 }\" id=\"input_last_name_2\" name=\"input_last_name_2\"/>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"crm-contact-info-location\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</label>\n <input ngx-gp-autocomplete\n id=\"crm-contact-info-location\"\n name=\"location\"\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 <span id=\"crm-contact-info-country-label\">{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-info-country-label'\"\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-select>\n </div>\n <div class=\"mb-3 ui-fluid skills-modal\">\n <span class=\"label mb-2 d-block\" id=\"crm-contact-info-account-label\">{{ 'Crm.ContactMessage.Account' | transloco }}\n </span>\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 [attr.aria-labelledby]=\"'crm-contact-info-account-label'\"\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 <span class=\"label mb-0 d-block\" id=\"crm-contact-info-email-label\">{{ 'Crm.ContactMessage.Email' | transloco }}</span>\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 [attr.aria-labelledby]=\"'crm-contact-info-email-label'\"\n formControlName=\"email\"\n [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" id=\"input_email_4\" name=\"input_email_4\"/>\n </div>\n <div class=\"mb-3\">\n <span class=\"label mb-0 d-block\" id=\"crm-contact-info-linkedin-label\">{{\n 'Crm.ContactMessage.LinkedInUrl' | transloco\n }}</span>\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 [attr.aria-labelledby]=\"'crm-contact-info-linkedin-label'\"\n formControlName=\"linkedin_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['linkedin_url'].errors }\" id=\"input_linkedin_url_5\" name=\"input_linkedin_url_5\"/>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"input_headline_6\">{{\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 }\" id=\"input_headline_6\" name=\"input_headline_6\"/>\n </div>\n <div class=\"mb-3\"\n *ngIf=\"data.tel\">\n <label class=\"label mb-0\" for=\"input_tel_7\">{{ 'Crm.ContactMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"tel\" id=\"input_tel_7\" name=\"input_tel_7\"/>\n </div>\n <div class=\"mb-3\">\n <span class=\"label mb-0 d-block\" id=\"crm-contact-info-potential-label\">{{\n 'Crm.ContactMessage.Potential' | transloco\n }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-info-potential-label'\"\n formControlName=\"potential\"\n [options]=\"potentials\"\n [placeholder]=\"'Select Potential'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['potential'].errors }\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span class=\"label mb-0 d-block\" id=\"crm-contact-info-labels-label\">{{ 'Crm.ContactMessage.Labels' | transloco }} </span>\n <p-multiSelect inputId=\"crm-contact-info-labels\"\n [options]=\"labels\"\n [attr.aria-labelledby]=\"'crm-contact-info-labels-label'\"\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 <label for=\"crm-contact-info-comment\" class=\"visually-hidden\">Note</label>\n <textarea id=\"crm-contact-info-comment\"\n name=\"comment\"\n 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 <label for=\"crm-contact-info-when\" class=\"visually-hidden\">Date</label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-contact-info-when\"\n name=\"when\"\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 [id]=\"'crm-contact-timeline-comment-' + item.id\"\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 [id]=\"'crm-contact-info-when-' + item.id\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n [value]=\"item.when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\"\n aria-label=\"Date\" />\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\" for=\"contact-info-file-upload\">\n <input type=\"file\"\n id=\"contact-info-file-upload\"\n name=\"contact-info-file-upload\"\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.Select, selector: "p-select", 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", "size", "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.19", 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=\"#\"\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=\"crm-contact-info-location\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</label>\n <input ngx-gp-autocomplete\n id=\"crm-contact-info-location\"\n name=\"location\"\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-select\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-select>\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-select\n formControlName=\"potential\"\n [options]=\"potentials\"\n [placeholder]=\"'Select Potential'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['potential'].errors }\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\"for=\"Labels\">{{ 'Crm.ContactMessage.Labels' | transloco }} </label>\n <p-multiSelect inputId=\"crm-contact-info-labels\"\n [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 <label for=\"crm-contact-info-comment\" class=\"visually-hidden\">Note</label>\n <textarea id=\"crm-contact-info-comment\"\n name=\"comment\"\n 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 <label for=\"crm-contact-info-when\" class=\"visually-hidden\">Date</label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-contact-info-when\"\n name=\"when\"\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 [id]=\"'crm-contact-timeline-comment-' + item.id\"\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 [id]=\"'crm-contact-info-when-' + item.id\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n [value]=\"item.when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\"\n aria-label=\"Date\" />\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"] }]
|
|
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=\"input_first_name_1\">{{\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 }\" id=\"input_first_name_1\" name=\"input_first_name_1\"/>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"input_last_name_2\">{{\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 }\" id=\"input_last_name_2\" name=\"input_last_name_2\"/>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"crm-contact-info-location\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</label>\n <input ngx-gp-autocomplete\n id=\"crm-contact-info-location\"\n name=\"location\"\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 <span id=\"crm-contact-info-country-label\">{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-info-country-label'\"\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-select>\n </div>\n <div class=\"mb-3 ui-fluid skills-modal\">\n <span class=\"label mb-2 d-block\" id=\"crm-contact-info-account-label\">{{ 'Crm.ContactMessage.Account' | transloco }}\n </span>\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 [attr.aria-labelledby]=\"'crm-contact-info-account-label'\"\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 <span class=\"label mb-0 d-block\" id=\"crm-contact-info-email-label\">{{ 'Crm.ContactMessage.Email' | transloco }}</span>\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 [attr.aria-labelledby]=\"'crm-contact-info-email-label'\"\n formControlName=\"email\"\n [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" id=\"input_email_4\" name=\"input_email_4\"/>\n </div>\n <div class=\"mb-3\">\n <span class=\"label mb-0 d-block\" id=\"crm-contact-info-linkedin-label\">{{\n 'Crm.ContactMessage.LinkedInUrl' | transloco\n }}</span>\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 [attr.aria-labelledby]=\"'crm-contact-info-linkedin-label'\"\n formControlName=\"linkedin_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['linkedin_url'].errors }\" id=\"input_linkedin_url_5\" name=\"input_linkedin_url_5\"/>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"input_headline_6\">{{\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 }\" id=\"input_headline_6\" name=\"input_headline_6\"/>\n </div>\n <div class=\"mb-3\"\n *ngIf=\"data.tel\">\n <label class=\"label mb-0\" for=\"input_tel_7\">{{ 'Crm.ContactMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"tel\" id=\"input_tel_7\" name=\"input_tel_7\"/>\n </div>\n <div class=\"mb-3\">\n <span class=\"label mb-0 d-block\" id=\"crm-contact-info-potential-label\">{{\n 'Crm.ContactMessage.Potential' | transloco\n }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-info-potential-label'\"\n formControlName=\"potential\"\n [options]=\"potentials\"\n [placeholder]=\"'Select Potential'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['potential'].errors }\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span class=\"label mb-0 d-block\" id=\"crm-contact-info-labels-label\">{{ 'Crm.ContactMessage.Labels' | transloco }} </span>\n <p-multiSelect inputId=\"crm-contact-info-labels\"\n [options]=\"labels\"\n [attr.aria-labelledby]=\"'crm-contact-info-labels-label'\"\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 <label for=\"crm-contact-info-comment\" class=\"visually-hidden\">Note</label>\n <textarea id=\"crm-contact-info-comment\"\n name=\"comment\"\n 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 <label for=\"crm-contact-info-when\" class=\"visually-hidden\">Date</label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-contact-info-when\"\n name=\"when\"\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 [id]=\"'crm-contact-timeline-comment-' + item.id\"\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 [id]=\"'crm-contact-info-when-' + item.id\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n [value]=\"item.when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\"\n aria-label=\"Date\" />\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\" for=\"contact-info-file-upload\">\n <input type=\"file\"\n id=\"contact-info-file-upload\"\n name=\"contact-info-file-upload\"\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]
|
|
@@ -6037,7 +6037,7 @@ class SmartCrmOpportunitiesInfoComponent extends AppBaseComponent {
|
|
|
6037
6037
|
super.ngOnDestroy();
|
|
6038
6038
|
}
|
|
6039
6039
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SmartCrmOpportunitiesInfoComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i2$2.NgbModal }, { token: i2.AuthService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6040
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", 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=\"crm-opportunities-info-title\">{{\n 'Crm.OpportunitiesMessage.Title' | transloco\n }}</label>\n <input type=\"text\"\n id=\"crm-opportunities-info-title\"\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 <span class=\"pw-label-style label mb-2\" id=\"crm-opportunities-info-contact-label\">{{\n 'Crm.OpportunitiesMessage.Contact' | transloco\n }}</span>\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 [attr.aria-labelledby]=\"'crm-opportunities-info-contact-label'\"\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 <span class=\"pw-label-style label mb-2\" id=\"crm-opportunities-info-account-label\">{{\n 'Crm.OpportunitiesMessage.Account' | transloco\n }}</span>\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 [attr.aria-labelledby]=\"'crm-opportunities-info-account-label'\"\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=\"one_time_amount\">{{\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=\"monthly_amount\">{{\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 <label for=\"crm-opp-info-comment\" class=\"visually-hidden\">Note</label>\n <textarea id=\"crm-opp-info-comment\"\n name=\"comment\"\n 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 <label for=\"crm-opp-info-when\" class=\"visually-hidden\">Date</label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-opp-info-when\"\n name=\"when\"\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 [id]=\"'crm-opp-timeline-comment-' + item.id\"\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 [id]=\"'crm-opp-info-when-' + item.id\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n value=\"{{ item.when }}\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\"\n aria-label=\"Date\" />\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" }] }); }
|
|
6040
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", 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=\"crm-opportunities-info-title\">{{\n 'Crm.OpportunitiesMessage.Title' | transloco\n }}</label>\n <input type=\"text\"\n id=\"crm-opportunities-info-title\"\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 <span class=\"pw-label-style label mb-2\" id=\"crm-opportunities-info-contact-label\">{{\n 'Crm.OpportunitiesMessage.Contact' | transloco\n }}</span>\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 [attr.aria-labelledby]=\"'crm-opportunities-info-contact-label'\"\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 <span class=\"pw-label-style label mb-2\" id=\"crm-opportunities-info-account-label\">{{\n 'Crm.OpportunitiesMessage.Account' | transloco\n }}</span>\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 [attr.aria-labelledby]=\"'crm-opportunities-info-account-label'\"\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 <span class=\"label mb-0 d-block\" id=\"crm-opportunities-info-one_time_amount-label\">{{\n 'Crm.OpportunitiesMessage.OneTimeAmount' | transloco\n }}</span>\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 [attr.aria-labelledby]=\"'crm-opportunities-info-one_time_amount-label'\"\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 <span class=\"label mb-0 d-block\" id=\"crm-opportunities-info-monthly_amount-label\">{{\n 'Crm.OpportunitiesMessage.MonthlyAmount' | transloco\n }}</span>\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 [attr.aria-labelledby]=\"'crm-opportunities-info-monthly_amount-label'\"\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 <label for=\"crm-opp-info-comment\" class=\"visually-hidden\">Note</label>\n <textarea id=\"crm-opp-info-comment\"\n name=\"comment\"\n 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 <label for=\"crm-opp-info-when\" class=\"visually-hidden\">Date</label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-opp-info-when\"\n name=\"when\"\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 [id]=\"'crm-opp-timeline-comment-' + item.id\"\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 [id]=\"'crm-opp-info-when-' + item.id\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n value=\"{{ item.when }}\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\"\n aria-label=\"Date\" />\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\" for=\"opp-info-file-upload\">\n <input type=\"file\"\n id=\"opp-info-file-upload\"\n name=\"opp-info-file-upload\"\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" }] }); }
|
|
6041
6041
|
}
|
|
6042
6042
|
__decorate([
|
|
6043
6043
|
ValidateForm('actionControls'),
|
|
@@ -6047,7 +6047,7 @@ __decorate([
|
|
|
6047
6047
|
], SmartCrmOpportunitiesInfoComponent.prototype, "onCommentSave", null);
|
|
6048
6048
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SmartCrmOpportunitiesInfoComponent, decorators: [{
|
|
6049
6049
|
type: Component,
|
|
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=\"crm-opportunities-info-title\">{{\n 'Crm.OpportunitiesMessage.Title' | transloco\n }}</label>\n <input type=\"text\"\n id=\"crm-opportunities-info-title\"\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 <span class=\"pw-label-style label mb-2\" id=\"crm-opportunities-info-contact-label\">{{\n 'Crm.OpportunitiesMessage.Contact' | transloco\n }}</span>\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 [attr.aria-labelledby]=\"'crm-opportunities-info-contact-label'\"\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 <span class=\"pw-label-style label mb-2\" id=\"crm-opportunities-info-account-label\">{{\n 'Crm.OpportunitiesMessage.Account' | transloco\n }}</span>\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 [attr.aria-labelledby]=\"'crm-opportunities-info-account-label'\"\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=\"one_time_amount\">{{\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=\"monthly_amount\">{{\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 <label for=\"crm-opp-info-comment\" class=\"visually-hidden\">Note</label>\n <textarea id=\"crm-opp-info-comment\"\n name=\"comment\"\n 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 <label for=\"crm-opp-info-when\" class=\"visually-hidden\">Date</label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-opp-info-when\"\n name=\"when\"\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 [id]=\"'crm-opp-timeline-comment-' + item.id\"\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 [id]=\"'crm-opp-info-when-' + item.id\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n value=\"{{ item.when }}\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\"\n aria-label=\"Date\" />\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"] }]
|
|
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=\"crm-opportunities-info-title\">{{\n 'Crm.OpportunitiesMessage.Title' | transloco\n }}</label>\n <input type=\"text\"\n id=\"crm-opportunities-info-title\"\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 <span class=\"pw-label-style label mb-2\" id=\"crm-opportunities-info-contact-label\">{{\n 'Crm.OpportunitiesMessage.Contact' | transloco\n }}</span>\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 [attr.aria-labelledby]=\"'crm-opportunities-info-contact-label'\"\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 <span class=\"pw-label-style label mb-2\" id=\"crm-opportunities-info-account-label\">{{\n 'Crm.OpportunitiesMessage.Account' | transloco\n }}</span>\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 [attr.aria-labelledby]=\"'crm-opportunities-info-account-label'\"\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 <span class=\"label mb-0 d-block\" id=\"crm-opportunities-info-one_time_amount-label\">{{\n 'Crm.OpportunitiesMessage.OneTimeAmount' | transloco\n }}</span>\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 [attr.aria-labelledby]=\"'crm-opportunities-info-one_time_amount-label'\"\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 <span class=\"label mb-0 d-block\" id=\"crm-opportunities-info-monthly_amount-label\">{{\n 'Crm.OpportunitiesMessage.MonthlyAmount' | transloco\n }}</span>\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 [attr.aria-labelledby]=\"'crm-opportunities-info-monthly_amount-label'\"\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 <label for=\"crm-opp-info-comment\" class=\"visually-hidden\">Note</label>\n <textarea id=\"crm-opp-info-comment\"\n name=\"comment\"\n 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 <label for=\"crm-opp-info-when\" class=\"visually-hidden\">Date</label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-opp-info-when\"\n name=\"when\"\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 [id]=\"'crm-opp-timeline-comment-' + item.id\"\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 [id]=\"'crm-opp-info-when-' + item.id\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n value=\"{{ item.when }}\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\"\n aria-label=\"Date\" />\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\" for=\"opp-info-file-upload\">\n <input type=\"file\"\n id=\"opp-info-file-upload\"\n name=\"opp-info-file-upload\"\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"] }]
|
|
6051
6051
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i2$2.NgbModal }, { type: i2.AuthService }, { type: Document, decorators: [{
|
|
6052
6052
|
type: Inject,
|
|
6053
6053
|
args: [DOCUMENT]
|
|
@@ -6528,11 +6528,11 @@ class CrmActionsComponent extends AppBaseComponent {
|
|
|
6528
6528
|
super.ngOnDestroy();
|
|
6529
6529
|
}
|
|
6530
6530
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: CrmActionsComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6531
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", 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-select\n inputId=\"crm-actions-filter-by-user\"\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-select>\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 <label *ngIf=\"updating && actionId === action.id\" [for]=\"'crm-action-date-' + action.id\" class=\"visually-hidden\">Date</label>\n <input *ngIf=\"updating && actionId === action.id\"\n [id]=\"'crm-action-date-' + action.id\"\n [name]=\"'crm-action-date-' + 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 <label [for]=\"'crm-action-comment-' + action.id\" class=\"visually-hidden\">Comment</label>\n <textarea [id]=\"'crm-action-comment-' + action.id\"\n [name]=\"'crm-action-comment-' + action.id\"\n 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.Select, selector: "p-select", 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", "size", "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.19", 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-select\n inputId=\"crm-actions-filter-by-user\"\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-select>\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 <label *ngIf=\"updating && actionId === action.id\" [for]=\"'crm-action-date-' + action.id\" class=\"visually-hidden\">Date</label>\n <input *ngIf=\"updating && actionId === action.id\"\n [id]=\"'crm-action-date-' + action.id\"\n [name]=\"'crm-action-date-' + 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)\" id=\"input_dd-mmm-yyyy_1712\" name=\"input_dd-mmm-yyyy_1712\" />\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 <label [for]=\"'crm-action-comment-' + action.id\" class=\"visually-hidden\">Comment</label>\n <textarea [id]=\"'crm-action-comment-' + action.id\"\n [name]=\"'crm-action-comment-' + action.id\"\n 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.Select, selector: "p-select", 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", "size", "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" }] }); }
|
|
6532
6532
|
}
|
|
6533
6533
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: CrmActionsComponent, decorators: [{
|
|
6534
6534
|
type: Component,
|
|
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-select\n inputId=\"crm-actions-filter-by-user\"\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-select>\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 <label *ngIf=\"updating && actionId === action.id\" [for]=\"'crm-action-date-' + action.id\" class=\"visually-hidden\">Date</label>\n <input *ngIf=\"updating && actionId === action.id\"\n [id]=\"'crm-action-date-' + action.id\"\n [name]=\"'crm-action-date-' + 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 <label [for]=\"'crm-action-comment-' + action.id\" class=\"visually-hidden\">Comment</label>\n <textarea [id]=\"'crm-action-comment-' + action.id\"\n [name]=\"'crm-action-comment-' + action.id\"\n 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-select\n inputId=\"crm-actions-filter-by-user\"\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-select>\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 <label *ngIf=\"updating && actionId === action.id\" [for]=\"'crm-action-date-' + action.id\" class=\"visually-hidden\">Date</label>\n <input *ngIf=\"updating && actionId === action.id\"\n [id]=\"'crm-action-date-' + action.id\"\n [name]=\"'crm-action-date-' + 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)\" id=\"input_dd-mmm-yyyy_1712\" name=\"input_dd-mmm-yyyy_1712\" />\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 <label [for]=\"'crm-action-comment-' + action.id\" class=\"visually-hidden\">Comment</label>\n <textarea [id]=\"'crm-action-comment-' + action.id\"\n [name]=\"'crm-action-comment-' + action.id\"\n 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"] }]
|
|
6536
6536
|
}], ctorParameters: () => [{ type: i1.CrmService }, { type: i0.Injector }, { type: Document, decorators: [{
|
|
6537
6537
|
type: Inject,
|
|
6538
6538
|
args: [DOCUMENT]
|