@posiwise/smart-crm 0.0.20 → 0.0.21

package/src/lib/private/components/smart-crm-contacts/smart-crm-contact-info/smart-crm-contact-info.component.html

@@ -0,0 +1,530 @@
+<div class="row">
+  <div class="col-12 mb-0">
+    <div class="me-auto mb-0">
+      <h2 class="mb-0">
+        <a href="javascript:void(0)"
+          (click)="back()"
+          class="previous"><i class="fa fa-arrow-alt-circle-left" aria-hidden="true"></i></a>
+        Contact Info
+      </h2>
+    </div>
+    <a class="btn btn-sm btn-outline-primary float-end mb-3"
+      data-cy="add-opportunities"
+      (click)="navigateToOpportunities()">
+      <i class="fa fa-plus-circle" aria-hidden="true"></i>
+      {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}
+    </a>
+  </div>
+  <div class="w-100 text-center mt-3"
+  *ngIf="!isDataLoaded">
+  <p-progressSpinner> </p-progressSpinner>
+  </div>
+  <div *ngIf="isDataLoaded">
+    <div class="row">
+      <div class="col-12 col-md-4">
+        <div class="user-info p-3 card pb-0 h-auto">
+          <div class="mb-2 text-center">
+            <a class="profile-image">
+              <img width="100"
+                height="100"
+                class="rounded-circle img-border width-100"
+                alt="user"
+                src="assets/img/icons/male.png" />
+            </a>
+          </div>
+          <div class="mb-4 d-flex justify-content-between align-items-center">
+            <h4 class="d-inline-block">
+              About <span *ngIf="data?.id">{{ data | ifNameNullShowEmail }}</span>
+            </h4>
+            <a href="javascript:void(0);"
+              *ngIf="isFormEdit"
+              class="btn btn-sm btn-outline-primary float-end"
+              (click)="isFormEdit = !isFormEdit">Edit</a>
+          </div>
+          <form [formGroup]="aboutControls"
+            [class.isDisabled]="isFormEdit">
+            <div class="mb-3">
+              <label class="label mb-0">{{
+                            'Crm.ContactMessage.FirstName' | transloco
+                        }}</label>
+              <input type="text"
+                class="form-control rounded-0 ps-1 user-value"
+                formControlName="first_name"
+                [ngClass]="{ 'is-invalid': submitted && f['first_name'].errors }" />
+            </div>
+            <div class="mb-3">
+              <label class="label mb-0">{{
+                            'Crm.ContactMessage.LastName' | transloco
+                        }}</label>
+              <input type="text"
+                class="form-control rounded-0 ps-1 user-value"
+                formControlName="last_name"
+                [ngClass]="{ 'is-invalid': submitted && f['last_name'].errors }" />
+            </div>
+            <div class="mb-3 ui-fluid skills-modal">
+              <label class="label mb-2">{{ 'Crm.ContactMessage.Account' | transloco }}
+              </label>
+              <a [routerLink]="[
+                                '/' + subscription?.slug + routers.accountInfo,
+                                data.crm_account_id
+                            ]"
+                class="form-control d-block pb-2 ps-1 user-value"
+                [class.is-invalid]="
+                                (f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors
+                            "
+                *ngIf="isFormEdit"
+                [class.disableFormControl]="!data?.crm_account_id">{{ f['crm_account_id'].value?.name }}</a>
+              <p-autoComplete *ngIf="!isFormEdit"
+                [suggestions]="filteredAccounts"
+                formControlName="crm_account_id"
+                dataKey="id"
+                field="name"
+                [dropdown]="true"
+                (completeMethod)="search($event)"
+                styleClass="w-100"
+                [inputStyleClass]="
+                                (f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors
+                                    ? 'invalid-field'
+                                    : ''
+                            "
+                placeholder="Search accounts"
+                [multiple]="false">
+              </p-autoComplete>
+              <span *ngIf="(f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors"
+                class="text-danger">account is required</span>
+            </div>
+            <div class="mb-3">
+              <label class="label mb-0">{{ 'Crm.ContactMessage.Email' | transloco }}</label>
+              <a href="mailTo:{{ data.email }}"
+                class="form-control d-block pb-2 ps-1 user-value"
+                *ngIf="isFormEdit && data.email">{{ data.email }}</a>
+              <input type="text"
+                *ngIf="!isFormEdit || !data.email"
+                class="form-control rounded-0 ps-1 user-value"
+                formControlName="email"
+                [ngClass]="{ 'is-invalid': submitted && f['email'].errors }" />
+            </div>
+            <div class="mb-3">
+              <label class="label mb-0">{{
+                            'Crm.ContactMessage.LinkedInUrl' | transloco
+                        }}</label>
+              <a [href]="data.linkedin_url"
+                target="blank"
+                class="form-control d-block pb-2 ps-1 user-value"
+                *ngIf="isFormEdit && data.linkedin_url">{{ data.linkedin_url }}</a>
+              <input *ngIf="!isFormEdit || !data.linkedin_url"
+                type="text"
+                class="form-control rounded-0 ps-1 user-value"
+                formControlName="linkedin_url"
+                [ngClass]="{ 'is-invalid': submitted && f['linkedin_url'].errors }" />
+            </div>
+            <div class="mb-3">
+              <label class="label mb-0">{{
+                            'Crm.ContactMessage.Headline' | transloco
+                        }}</label>
+              <input type="text"
+                class="form-control rounded-0 ps-1 user-value"
+                formControlName="headline"
+                [ngClass]="{ 'is-invalid': submitted && f['headline'].errors }" />
+            </div>
+            <div class="mb-3"
+              *ngIf="data.tel">
+              <label class="label mb-0">{{ 'Crm.ContactMessage.Tel' | transloco }}</label>
+              <input type="text"
+                class="form-control rounded-0 ps-1 user-value"
+                formControlName="tel" />
+            </div>
+            <div class="mb-3">
+              <label class="label mb-0">{{
+                            'Crm.ContactMessage.Potential' | transloco
+                        }}</label>
+              <select formControlName="potential"
+                class="form-control form-select"
+                [ngClass]="{ 'is-invalid': submitted && f['potential'].errors }">
+                <option *ngFor="let option of potentials"
+                  [value]="option">
+                  {{ option }}
+                </option>
+              </select>
+            </div>
+            <div class="mb-3">
+              <label class="label mb-0">{{ 'Crm.ContactMessage.Labels' | transloco }} </label>
+              <p-multiSelect [options]="labels"
+                [class.disableFormControl]="isFormEdit"
+                formControlName="labels"
+                appendTo="body"></p-multiSelect>
+            </div>
+            <div *ngIf="!isFormEdit"
+              class="text-end form-action-buttons">
+              <input type="button"
+                class="btn btn-outline-primary"
+                (click)="isFormEdit = !isFormEdit; getUserInfo()"
+                value="Cancel" />
+              <input type="button"
+                class="btn btn-primary ms-3"
+                value="Submit"
+                (click)="updateContactInfo()" />
+            </div>
+          </form>
+        </div>
+      </div>
+      <div class="col-12 col-md-8">
+        <ul ngbNav
+          #nav="ngbNav"
+          class="nav-tabs">
+          <li [ngbNavItem]="1">
+            <a ngbNavLink>Notes</a>
+            <ng-template ngbNavContent>
+              <form [formGroup]="actionControls"
+                (ngSubmit)="onSave()">
+                <textarea class="form-control"
+                  formControlName="comment"
+                  rows="6"></textarea>
+                <p class="text-danger"
+                  *ngIf="
+                                    actionControls.get('comment').touched &&
+                                    actionControls.get('comment').invalid
+                                ">
+                  Note Required
+                </p>
+                <div *ngIf="actions.length"
+                  class="d-block clear-both pt-3">
+                  <ng-container *ngFor="let action of actions; index as i">
+                    <button *ngIf="action.visible"
+                      type="button"
+                      [class.active]=""
+                      class="btn btn-sm me-2 btn-outline-primary mb-2 action-btn"
+                      (click)="showDatePicker($event, action.id); d.toggle()">
+                      {{ action.name }}
+                    </button>
+                  </ng-container>
+                  <div class="text-danger"
+                    *ngIf="submitAction && actionFormControls['crm_action_id'].invalid">
+                    Please select an action
+                  </div>
+                  <div class="row mt-3">
+                    <div class="col-12 col-sm-4">
+                      <div class="input-group">
+                        <input class="form-control"
+                          placeholder="dd-mm-yyyy"
+                          formControlName="when"
+                          ngbDatepicker
+                          #d="ngbDatepicker"
+                          (click)="d.toggle()" />
+                      </div>
+                    </div>
+                    <div class="col-sm-4 pe-0 completed-toggle">
+                      <div class="mb-3">
+                        <ui-switch checkedLabel="completed"
+                          uncheckedLabel="open"
+                          formControlName="completed"
+                          name="completed">
+                        </ui-switch>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="float-end">
+                  <input type="submit"
+                    [buttonBusy]="buttonBusy"
+                    [disabled]="buttonDisable"
+                    class="btn btn-primary mt-2 mb-2 float-end"
+                    value="Submit Note" />
+                  <a class="btn btn-outline-primary mt-2 mb-2 me-0 me-sm-2 float-end"
+                    (click)="openModal(content)">{{ 'Upload file' | transloco }}</a>
+                </div>
+                <div *ngIf="buttonDisable"
+                  class="no-actions pt-4">
+                  <pw-no-data [withImage]="true" [message]="
+                                        'Crm.ContactMessage.NoActionsInContactInfoMessage' | transloco
+                                    ">
+                    <span><a [routerLink]="[
+                                                '/' +
+                                                    subscription?.slug +
+                                                    routers.configurations +
+                                                    'actions'
+                                            ]">Take me to the actions configuration section.</a></span>
+                  </pw-no-data>
+                </div>
+              </form>
+              <div class="w-100 text-center mt-3"
+                *ngIf="!isLoaded">
+                <p-progressSpinner strokeWidth="2"> </p-progressSpinner>
+              </div>
+              <div *ngIf="!contactComments?.length && isLoaded"
+                class="no-actions pt-3">
+                <pw-no-data [withImage]="true" [message]="'Crm.ContactMessage.NoActionsMessage' | transloco">
+                </pw-no-data>
+              </div>
+              <div *ngIf="contactComments.length"
+                id="timeline"
+                class="pt-3 clear-both timeline-center timeline-wrapper">
+                <ul class="timeline">
+                  <li class="timeline-line"></li>
+                </ul>
+                <ul class="timeline">
+                  <li class="timeline-line"></li>
+                  <li class="timeline-item"
+                    [ngClass]="{ 'mt-5': odd }"
+                    *ngFor="
+                                        let item of contactComments;
+                                        index as i;
+                                        let odd = odd;
+                                        let even = even
+                                    ">
+                    <div class="timeline-badge">
+                      <span class="bg-red bg-lighten-1">
+                        <span class="timeline-year">
+                          <span class="d-block date-year">{{
+                                                    item.when | date: 'medium' | slice: 0:3
+                                                }}</span>
+                          <span>{{ item.year }}</span></span>
+                      </span>
+                    </div>
+                    <div class="timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static">
+                      <div class="card-header py-4">
+                        <div class="mb-0 clearfix">
+                          <!-- <a>{{item.comment}}</a> -->
+                          <textarea type="text"
+                            name="comment"
+                            class="comment-field form-control p-0"
+                            [(ngModel)]="item.comment">{{ item.comment }}</textarea>
+                          <p class="float-start mb-0"
+                            *ngIf="!showFullComment || item.id !== commentId">
+                            {{ item.comment | slice: 0:170
+                                                    }}<a *ngIf="item.comment.length > 170"
+                              class="text-secondary"
+                              (click)="
+                                                            showFullComment = true; commentId = item.id
+                                                        ">...show more</a>
+                          </p>
+                          <p class="float-start mb-0"
+                            *ngIf="showFullComment && item.id === commentId">
+                            {{ item.comment }}
+                            <a *ngIf="
+                                                            item.comment.length > 170 && showFullComment
+                                                        "
+                              (click)="showFullComment = false"
+                              class="text-secondary">...show less</a>
+                          </p>
+                          <button class="btn btn-md edit-btn float-end py-0"
+                            (click)="showEditControls($event)"
+                            *ngIf="userId === item.owner_id || hasAccess">
+                            <i
+                                                        class="fa fa-edit edit-icon"
+                                                        aria-hidden="true"
+                                                    ></i>
+                          </button>
+                        </div>
+                        <div class="card-subtitle text-muted my-0 clearfix">
+                          <div class="float-start">
+                            <span *ngIf="!updating || actionId !== item.id"
+                              class="font-small-3">
+                              {{ item.when }}</span>
+                            <input *ngIf="updating && actionId === item.id"
+                              placeholder="dd-mm-yyyy"
+                              [value]="item.when"
+                              ngbDatepicker
+                              #d="ngbDatepicker"
+                              (focus)="d.toggle()"
+                              (dateSelect)="onDateSelect($event, item)" />
+                          </div>
+                          <button type=" button"
+                            class="btn btn-sm float-end when-btn py-0"
+                            *ngIf="userId === item.owner_id || hasAccess"
+                            (click)="showDatePickerUpdate(item.id)">
+                            <i
+                                                        class="fa fa-edit edit-icon"
+                                                        aria-hidden="true"
+                                                    ></i>
+                          </button>
+                        </div>
+                        <p [class.text-danger]="!item.color"
+                          *ngIf="!item.cancelled && !item.completed"
+                          class="mb-0">
+                          {{ item.due }}
+                        </p>
+                        <p>
+                          {{ item.owner.first_name + ' ' + item.owner.last_name }}
+                        </p>
+                        <span class="badge bg-primary">{{
+                                                item?.crm_action?.name
+                                            }}</span>
+                        <span *ngIf="
+                                                    !item.completed &&
+                                                    (userId === item.owner_id || hasAccess)
+                                                "
+                          class="badge bg-success ms-2">Open</span>
+                        <a *ngIf="
+                                                    !item.completed &&
+                                                    (userId === item.owner_id || hasAccess)
+                                                "
+                          ngbTooltip="Set as completed"
+                          class="me-3 ms-3"
+                          href="javascript:void(0);"
+                          (click)="
+                                                    setAsCompletedOrUncompleted(
+                                                        item.id,
+                                                        item,
+                                                        item.completed
+                                                    )
+                                                ">
+                          <i class="fa fa-tasks completed" aria-hidden="true"></i>
+                        </a>
+                        <a *ngIf="
+                                                    !item.cancelled &&
+                                                    !item.completed &&
+                                                    (userId === item.owner_id || hasAccess)
+                                                "
+                          ngbTooltip="Set as cancelled"
+                          href="javascript:void(0);"
+                          (click)="setAsCancelled(item.id, item)">
+                          <i
+                                                    class="fa fa-times delete-icon"
+                                                    aria-hidden="true"
+                                                ></i>
+                        </a>
+                        <a *ngIf="
+                                                    item.completed &&
+                                                    (userId === item.owner_id || hasAccess)
+                                                "
+                          ngbTooltip="Set as UnCompleted"
+                          href="javascript:void(0);"
+                          (click)="
+                                                    setAsCompletedOrUncompleted(
+                                                        item.id,
+                                                        item,
+                                                        item.completed
+                                                    )
+                                                "
+                          class="ms-2">
+                          <i class="far fa-window-close" aria-hidden="true"></i>
+                        </a>
+                        <div class="control-btns mt-3 text-end">
+                          <button type="button"
+                            class="btn btn-sm btn-outline-default me-2"
+                            (click)="showEditControls(undefined)">
+                            Cancel
+                          </button>
+                          <button class="btn btn-sm btn-primary"
+                            type="button"
+                            (click)="updateComment(item)">
+                            Submit
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </ng-template>
+          </li>
+          <li [ngbNavItem]="2">
+            <a ngbNavLink>Versioning</a>
+            <ng-template ngbNavContent>
+              <div *ngFor="let version of contactVersioning">
+                <p>
+                  <strong>Event: </strong>{{ version.event }} | <strong>Author: </strong><a *ngIf="version?.author"
+                    [routerLink]="['/members', version?.author?.slug]">{{ version?.author | ifNameNullShowEmail }}</a>
+                  | <strong>Created at: </strong>{{ version.created_at | dateFormat: 'datetime' }}<br />
+                  <strong>Object: </strong>{{ version.object | json }}
+                </p>
+                <hr />
+              </div>
+              <div *ngIf="contactVersioning?.length === 0">
+                <pw-no-data [withImage]="true" [message]="'Crm.ContactMessage.NoVersionsMessage' | transloco">
+                </pw-no-data>
+              </div>
+            </ng-template>
+          </li>
+          <li [ngbNavItem]="3">
+            <a ngbNavLink>Files</a>
+            <ng-template ngbNavContent>
+              <pw-smart-crm-company-files [contactId]="contactId"
+                [accountId]="accountId">
+              </pw-smart-crm-company-files>
+            </ng-template>
+          </li>
+        </ul>
+
+        <div [ngbNavOutlet]="nav"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<ng-template #content
+  let-modal>
+  <div class="modal-header">
+    <h3 class="modal-title mb-0 p-0">{{ 'Upload File' | transloco }}</h3>
+    <button type="button"
+      class="btn-close float-end"
+      aria-label="Close"
+      (click)="modal.dismiss()">
+
+    </button>
+  </div>
+  <div class="modal-body">
+    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>
+    <div class="row p-2">
+      <div class="col-12">
+        <div class="upload-box">
+          <div class="upload-box-content">
+            <div class="drop-container"
+              ngFileDrop
+              [options]="options"
+              (uploadOutput)="onUploadOutput($event)"
+              [uploadInput]="uploadInput">
+              <p>
+                Drag files here or
+                <label class="upload-button">
+                  <input type="file"
+                    ngFileSelect
+                    [options]="options"
+                    (uploadOutput)="onUploadOutput($event)"
+                    [uploadInput]="uploadInput"
+                    multiple />
+                  browse
+                </label>
+                to upload.
+              </p>
+            </div>
+            <div class="upload-item"
+              *ngFor="let f of files; let i = index">
+              <div class="upload-item-content">
+                <div class="filename">
+                  <div class="filename-left">
+                    <i class="ionicon ion-ios-copy" aria-hidden="true"></i>
+                    <span>{{ f.name }}</span>
+                  </div>
+                </div>
+                <div class="progress-content">
+                  <div class="progress">
+                    <span class="bar"
+                      [style.width]="f?.progress?.data?.percentage + '%'"
+                      [class.is-done]="f['uploaded']"></span>
+                  </div>
+                </div>
+                <div class="progress-text-content">
+                  <span class="progress-text"
+                    [class.is-done]="f['uploaded']">
+                    <span *ngIf="!f['uploaded']">{{ f.progress?.data?.percentage - 1 }}%
+                    </span>
+                    <span *ngIf="f['uploaded']">100 %</span>
+                    <span *ngIf="!f['uploaded']">Uploading...</span>
+                    <span *ngIf="f['uploaded']">Done</span>
+                  </span>
+                  <span class="speed-and-eta-text"
+                    *ngIf="f.progress?.data?.percentage !== 0 && !f['uploaded']">
+                    <span>{{ f.progress?.data?.speedHuman }} </span>
+                    <span>ETA {{ f.progress?.data?.etaHuman }}</span>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</ng-template>

package/src/lib/private/components/smart-crm-contacts/smart-crm-contact-info/smart-crm-contact-info.component.scss

@@ -0,0 +1,112 @@
+@import 'variables/branding-variables';
+
+.user-info {
+    .label {
+        color: $form-control-color;
+        font-size: 14px;
+        text-transform: capitalize;
+    }
+
+    .user-value {
+        border: 0;
+        border-bottom: 1px solid $form-control-color;
+
+        &:focus {
+            box-shadow: none;
+        }
+
+        &.is-invalid {
+            border-color: rgb(255 88 107);
+        }
+    }
+}
+
+.control-btns {
+    display: none;
+}
+
+.comment-field {
+    border: 0;
+    border-bottom: 1px solid rgb(242 242 242);
+    color: $heading-color-main;
+    display: none;
+    font-size: 15px;
+    min-height: 100px;
+    padding: 2px 5px !important;
+
+    &: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,
+    .control-btns {
+        display: block;
+    }
+
+    p,
+    .edit-btn {
+        display: none;
+    }
+}
+
+select {
+    appearance: none;
+}
+
+textarea {
+    resize: none;
+}
+
+.clear-both {
+    clear: both;
+}
+
+.isDisabled {
+    input[type='text'],
+    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;
+        }
+    }
+}
+
+.form-action-buttons {
+    margin-bottom: 14px;
+    margin-top: 15px;
+}