@posiwise/smart-crm 0.0.19 → 0.0.21

package/src/lib/private/components/smart-crm-opportunities/smart-crm-opportunities-list/smart-crm-opportunities-info/smart-crm-opportunities-info.component.html

@@ -0,0 +1,489 @@
+<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>
+        Opportunity Info
+      </h2>
+    </div>
+  </div>
+  <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.title }}</span>
+        </h4>
+        <a href="javascript:void(0);"
+          *ngIf="isFormEdit"
+          class="btn btn-sm btn-outline-primary float-end"
+          (click)="
+                        isFormEdit = !isFormEdit; getAccountsBySubscription(); getAllContacts()
+                    ">Edit</a>
+      </div>
+      <form [formGroup]="aboutControls"
+        [class.isDisabled]="isFormEdit">
+        <div class="mb-3">
+          <label class="label mb-0">{{
+                        'Crm.OpportunitiesMessage.Title' | transloco
+                    }}</label>
+          <input type="text"
+            class="form-control rounded-0 ps-1 user-value"
+            formControlName="title"
+            [ngClass]="{ 'is-invalid': submitted && f['title'].errors }" />
+        </div>
+        <div class="mb-3 ui-fluid skills-modal"
+          *ngIf="data?.crm_contact_id">
+          <label class="label mb-2">{{
+                        'Crm.OpportunitiesMessage.Contact' | transloco
+                    }}</label>
+          <a [routerLink]="[
+                            '/' + subscription?.slug + routers.contactInfo,
+                            data.crm_contact_id
+                        ]"
+            class="form-control d-block pb-2 ps-1 user-value"
+            *ngIf="isFormEdit && data?.crm_contact_id">{{ data?.crm_contact?.first_name }} {{ data?.crm_contact?.last_name }}</a>
+          <p-autoComplete *ngIf="!isFormEdit || !data?.crm_contact_id"
+            [suggestions]="filteredContacts"
+            formControlName="crm_contact_id"
+            dataKey="id"
+            field="displayName"
+            [dropdown]="true"
+            (completeMethod)="onContactSearch($event)"
+            styleClass="w-100"
+            placeholder="Search contacts"
+            [multiple]="false">
+          </p-autoComplete>
+        </div>
+        <div class="mb-3 ui-fluid skills-modal">
+          <label class="label mb-2">{{
+                        'Crm.OpportunitiesMessage.Account' | transloco
+                    }}</label>
+          <a [routerLink]="[
+                            '/' + subscription?.slug + routers.accountInfo,
+                            data.crm_account_id
+                        ]"
+            class="form-control d-block pb-2 ps-1 user-value"
+            *ngIf="isFormEdit && data?.crm_account_id">{{ data?.crm_accounty?.name }}</a>
+          <p-autoComplete *ngIf="!isFormEdit || !data?.crm_account_id"
+            [suggestions]="filteredAccounts"
+            formControlName="crm_account_id"
+            dataKey="id"
+            field="name"
+            [dropdown]="true"
+            (completeMethod)="accountSearch($event)"
+            styleClass="w-100"
+            placeholder="Search accounts"
+            [multiple]="false">
+          </p-autoComplete>
+        </div>
+        <div class="mb-3">
+          <label class="label mb-0">{{
+                        'Crm.OpportunitiesMessage.OneTimeAmount' | transloco
+                    }}</label>
+          <a class="form-control d-block pb-2 ps-1 user-value"
+            *ngIf="isFormEdit && data?.one_time_amount">{{ data?.one_time_amount | currency }}</a>
+          <input *ngIf="!isFormEdit || !data?.one_time_amount"
+            type="number"
+            numbersOnly
+            class="form-control rounded-0 ps-1 user-value"
+            formControlName="one_time_amount"
+            id="one_time_amount"
+            [ngClass]="{ 'is-invalid': submitted && f['one_time_amount'].errors }" />
+        </div>
+        <div class="mb-3">
+          <label class="label mb-0">{{
+                        'Crm.OpportunitiesMessage.MonthlyAmount' | transloco
+                    }}</label>
+          <a class="form-control d-block pb-2 ps-1 user-value"
+            *ngIf="isFormEdit && data?.monthly_amount">{{ data?.monthly_amount | currency }}</a>
+          <input *ngIf="!isFormEdit || !data?.monthly_amount"
+            type="number"
+            numbersOnly
+            class="form-control rounded-0 ps-1 user-value"
+            formControlName="monthly_amount"
+            id="monthly_amount"
+            [ngClass]="{ 'is-invalid': submitted && f['monthly_amount'].errors }" />
+        </div>
+        <div *ngIf="!isFormEdit"
+          class="text-end form-action-buttons">
+          <input type="button"
+            class="btn btn-outline-primary"
+            (click)="isFormEdit = !isFormEdit; getOpportunityDetails()"
+            value="Cancel" />
+          <input type="button"
+            class="btn btn-primary ms-3"
+            value="Submit"
+            (click)="updateOpportunities()" />
+        </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)="onCommentSave()">
+            <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">
+              <button type="submit"
+              [buttonBusy]="buttonBusy"
+                [disabled]="buttonDisable"
+                class="btn btn-primary mt-2 mb-2 float-end"
+                >Submit Note</button>
+              <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.OpportunitiesMessage.NoActionsInOpportunitiesInfoMessage'
+                                        | transloco
+                                ">
+              </pw-no-data>
+            </div>
+          </form>
+          <div class="w-100 text-center mt-3"
+            *ngIf="!isLoaded">
+            <p-progressSpinner strokeWidth="2"> </p-progressSpinner>
+          </div>
+          <div *ngIf="!opportunitiesComments?.length && isLoaded"
+            class="no-actions pt-3">
+            <pw-no-data [withImage]="true" [message]="'Crm.OpportunitiesMessage.NoActionsMessage' | transloco">
+            </pw-no-data>
+          </div>
+          <div *ngIf="opportunitiesComments?.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 opportunitiesComments;
+                                    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">
+                      <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 opportunitiesVersioning">
+            <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 }}<br />
+              <strong>Object: </strong>{{ version.object | json }}
+            </p>
+            <hr />
+          </div>
+          <div *ngIf="opportunitiesVersioning?.length === 0">
+            <pw-no-data [withImage]="true" [message]="'Crm.OpportunitiesMessage.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"
+            [opportunityId]="opportunitiesId">
+          </pw-smart-crm-company-files>
+        </ng-template>
+      </li>
+    </ul>
+
+    <div [ngbNavOutlet]="nav"></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-opportunities/smart-crm-opportunities-list/smart-crm-opportunities-info/smart-crm-opportunities-info.component.scss

@@ -0,0 +1,104 @@
+@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;
+}
+
+.form-action-buttons {
+    margin-bottom: 14px;
+    margin-top: 15px;
+}