Conga Digital Commerce 202405.2.0 on Conga Revenue Lifecycle Platform
  1. Components
  2. FavoriteModalComponent

File

projects/congarevenuecloud/elements/src/lib/favorite-modal/favorite-modal.component.ts

Description

This component is a work in progress.

Favorite modal lets you add products/cart line items from the drawer to the Favorite Configuration. The modal provides option to choose from existing favorites or allow users to create new favorite and add/update items to the favorite configuartion.

Preview

Usage

Example :
import { FavoriteModalModule } from '@congarevenuecloud/elements';
@NgModule({
imports: [FavoriteModalModule, ...]
})
export class AppModule {}
Example :
```typescript
<apt-favorite-modal></apt-favorite-modal>
Example :

Implements

OnInit OnDestroy

Metadata

encapsulation ViewEncapsulation.None
selector apt-favorite-modal
styleUrls ./favorite-modal.component.scss
templateUrl ./favorite-modal.component.html

Index

Properties
Methods

Constructor

constructor(modalRef: BsModalRef, plService: PriceListService, userService: UserService, exceptionService: ExceptionService, favService: FavoriteService, batchSelectionService: BatchSelectionService, apiService: ApiService, configService: ConfigurationService, cartService: CartService, secondaryCartService: SecondaryCartService)
Parameters :
Name Type Optional
modalRef BsModalRef No
plService PriceListService No
userService UserService No
exceptionService ExceptionService No
favService FavoriteService No
batchSelectionService BatchSelectionService No
apiService ApiService No
configService ConfigurationService No
cartService CartService No
secondaryCartService SecondaryCartService No

Methods

addFavorite
addFavorite()

Method Addfavorite is responsible for adding the products or lineitems to the already existing Favorite configuration fro the drawer.

Returns : void
createFavorite
createFavorite()

Method createFavorite is responsible for creating new favorite and adding the products or lineitems to the newly created favorite configuration.

Returns : void

Properties

_items
Type : Array<CartItem | ItemRequest>
favoriteName
Type : string
layout
Type : "AddExistingFav" | "AddNewFav"
Default value : 'AddExistingFav'
loading
Type : Boolean
Default value : false
lookUpLoading
Type : Boolean
Default value : false
lookupOptions
Type : LookupOptions
Default value : { primaryTextField: 'Name', fieldList: ['Id', 'Name'], }
lookupResults
Type : Array<Favorite>
Default value : []
Public modalRef
Type : BsModalRef
searchTerm
Type : string
sub
Type : Subscription
value
Type : string
view$
Type : BehaviorSubject<Array<Favorite>>
Default value : new BehaviorSubject<Array<Favorite>>(null) 
<div>
    <div class="modal-header align-items-center d-flex flex-row-reverse p-0 pb-2 mt-3 border-bottom border-secondary">
        <button type="button" class="close close-button pull-right" aria-label="Close" (click)="modalRef.hide()">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <ng-container [ngSwitch]="layout">
        <ng-container *ngSwitchCase="'AddExistingFav'">
            <ng-container *ngTemplateOutlet="AddExistingFav;"></ng-container>
        </ng-container>
        <ng-container *ngSwitchCase="'AddNewFav'">
            <ng-container *ngTemplateOutlet="AddNewFav;"></ng-container>
        </ng-container>
    </ng-container>
</div>

<ng-template #AddExistingFav>
    <div class="modal-body bg-white pb-0 custom-border-bottom-radius-0">
        <h4 class="modal-title d-flex align-items-center m-0 pb-2 text-truncate font-weight-bold">
            {{ "FAVORITE.FAVORITE_MODAL.ADD_FAVORITE" | translate }}
        </h4>
        <div class="row">
            <div class="col-12 col-md-12">
                <div class="form-group">
                    <label [class.col-form-label-sm]="small"
                        class="font-weight-bold">{{'FAVORITE.FAVORITE_MODAL.SEARCH_OR_ADD_FAV' | translate}}</label>
                    <ng-select class="form-control aptFavLookup p-0" [class.form-control-sm]="small" [(ngModel)]="value"
                        [items]="lookupResults" bindLabel="Name" (search)="onLookupSearch($event)" bindValue="Id"
                        bindLabel="Name" placeholder="{{'FAVORITE.FAVORITE_MODAL.ENTER_FAVORITE_NAME' | translate}}"
                        [loading]="lookUpLoading"
                        [ngClass]="{ 'is-invalid': select.invalid && (select.touched || select.dirty) }"
                        (clear)="setFavLookupFieldData()" (focus)="setFavLookupFieldData()" #select="ngModel">
                        <ng-template ng-option-tmp let-item="item" let-index="index" let-search="search">
                            <div class="d-flex align-items-center">
                                <div class="d-flex flex-column h-100 justify-content-around">
                                    <span [ngOptionHighlight]="search">{{item['Name']}}</span>
                                    <i class="small" *ngIf="lookupOptions?.secondaryTextField">{{item['Name']}}</i>
                                </div>
                            </div>
                        </ng-template>
                        <ng-template ng-footer-tmp let-search="search">
                            <button type="button" class="btn btn-link" (click)="layout = 'AddNewFav'">
                                <small class="d-block">
                                    <i class="fa fa-plus mr-2" aria-hidden="true"></i>
                                    <small
                                        [innerHTML]="'FAVORITE.FAVORITE_MODAL.ADD_NEW_FAVORITE' | translate: {search: searchTerm}"></small>
                                </small>
                            </button>
                        </ng-template>
                        <ng-template ng-loadingspinner-tmp>
                            <apt-spinner></apt-spinner>
                        </ng-template>
                    </ng-select>

                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer bg-white">
        <div class="form-group d-flex justify-content-end">
            <button class="btn btn-primary btn-raised px-1 m-0" type="button" (click)="addFavorite()" [disabled]="!value"
                [ladda]="loading" data-style="zoom-in">{{ "COMMON.UPDATE" | translate }}</button>
        </div>
    </div>
</ng-template>
<ng-template #AddNewFav>
    <div class="modal-body bg-white pb-0 custom-border-bottom-radius-0">
        <h4 class="modal-title d-flex align-items-center m-0 pb-2 text-truncate font-weight-bold">
            {{ "FAVORITE.FAVORITE_MODAL.ADD_FAVORITE" | translate }}
        </h4>
        <div class="row">
            <div class="col-12 col-md-12">
                <div class="form-group">
                    <apt-input-field [entity]="favorite" [field]="'Name'" [(ngModel)]="favoriteName" [label]="'Name'" [required]="true">
                    </apt-input-field>
                </div>
                <div class="form-group">
                    <apt-input-field [entity]="favorite" [field]="'Description'" [(ngModel)]="favorite.Description">
                    </apt-input-field>
                </div>
                <div class="form-group custom-control custom-checkbox pl-3">
                    <input type="checkbox" [checked]="fav_checked" id="favScope" class="custom-control-input"
                        [(ngModel)]="fav_checked"
                        (ngModelChange)="fav_checked ? favorite.Scope = 'Public': favorite.Scope = 'Private'">
                    <label class="ml-2 custom-control-label pt-1"
                        for="favScope">{{'FAVORITE.FAVORITE_MODAL.MAKE_PUBLICLY_VISIBILE' | translate}}</label>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer pt-3 border-top bg-white">
        <div class="form-group d-flex justify-content-end">
            <!-- <button *ngIf="lookupResults.length > 0" class="btn btn-link btn-raised" type="button"
                (click)="layout = 'AddExistingFav'" data-style="zoom-in">
                {{ 'FAVORITE.FAVORITE_MODAL.ADD_TO_EXISTING' | translate }}
            </button> TO DO: Add existing feature not supported-->
            <button class="btn btn-primary btn-raised px-1 m-0" type="button" (click)="createFavorite()" [ladda]="loading"
                data-style="zoom-in" [disabled]="!favoriteName">
                {{ 'FAVORITE.FAVORITE_MODAL.ADD_FAVORITE' | translate }}
            </button>
        </div>
    </div>
</ng-template>

./favorite-modal.component.scss 

.ng-select.aptFavLookup {
  font-size: 14px;

  &.ng-select-focused:not(.ng-select-opened) > .ng-select-container {
    border-color: transparent;
    box-shadow: none;
  }

  .ng-select-container {
    background-color: transparent;
    border-radius: 0px;
    min-height: 34px;
    height: 34px;
    border-width: 0px;

    .ng-arrow-wrapper {
      display: none;
    }

    apt-spinner {
      svg {
        width: 18px;
        height: 18px;
      }
    }

    .ng-clear-wrapper {
      width: 24px;
      height: 24px;

      &:hover .ng-clear {
        opacity: 1;
      }

      .ng-clear {
        width: 24px;
        height: 24px;
        color: transparent;
        content: '';
        background-image: url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24' class='ng-scope'%3E%3Cpolygon points='20 5.611 18.389 4 12 10.389 5.611 4 4 5.611 10.389 12 4 18.389 5.611 20 12 13.611 18.389 20 20 18.389 13.611 12'%3E%3C/polygon%3E%3C/svg%3E");
        opacity: 0.5;
      }
    }

    &::before {
      width: 24px;
      height: 24px;
      content: '';
      background-image: url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24' class='ng-scope'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'%3E%3C/path%3E%3C/svg%3E");
    }
  }

  &.ng-select-single .ng-select-container .ng-value-container .ng-input {
    padding-left: 34px;
    padding-right: 36px;
    & > input {
      cursor: text;
    }
  }

  &.contacts {
    .ng-dropdown-panel {
      bottom: auto !important;
    }
  }

  .ng-dropdown-panel {
    .ng-dropdown-header {
      font-size: 12px;
      padding-left: 14px;
      border: none;
    }
    .ng-dropdown-panel-items {
      .ng-option {
        min-height: 40px;
        padding: 4px 10px 4px 14px;

        .basicOption {
          line-height: 32px;
        }

        .contactOption {
          height: 56px;
        }
      }
    }
  }
}

.modal-header{
  padding-left: 490px;
  padding-bottom: none;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""