refactor: improve template related type compatibility

docs/guides/forms.md

@@ -163,7 +163,7 @@ cancelForm() {
 | **ishShowFormFeedback** (Directive)       | \<div class="form-group has-feedback" [formGroup]="form" [ishShowFormFeedback]="formControl">...\</div>                                                                                                                                                                                                                                       | Directive ishShowFormFeedback Can be used to color labels and form controls in dependence of the validation status of the related form control Should be used at the form-group element                 |
 | **ish-input** (Component)                 | ![Input field](forms-input.png) &nbsp; \<ish-input [form]="loginForm" controlName="userName" type="email" label="account.login.email.label" labelClass="col-sm-3" inputClass="col-sm-6" markRequiredLabel="off" [errorMessages]="{'required':'account.login.email.error.required','email':'account.login.email.error.invalid'}">\</ish-input> | **Input form control** for Text input fields, Email input fields, Password input fields, Number input fields                                                                                            |
 | **ish-select** (Component)                | ![Select box](forms-select.png) \<ish-select controlName="securityQuestion" [form]="credentialsForm" label="Security Question" [options]="securityQuestionOptions" showEmptyOption="true" [errorMessages]=" {'required':'account.login.email.error.required'}">\</ish-select>                                                                 | **Select form control** 'options' should implement interface SelectOption                                                                                                                               |
-| **ish-textarea** (Component)              | ![Textarea input](forms-textarea.png) \<ish-textarea controlName="comments" [form]="contactForm" label="helpdesk.contactus.comments.label" maxlength="30000" rows="10" [errorMessages]="{ required: 'helpdesk.contactus.comments.error' }">\</ish-textarea>                                                                                   | **Textarea form control**                                                                                                                                                                               |
+| **ish-textarea** (Component)              | ![Textarea input](forms-textarea.png) \<ish-textarea controlName="comments" [form]="contactForm" label="helpdesk.contactus.comments.label" [maxlength]="30000" [rows]="10"[errorMessages]="{ required: 'helpdesk.contactus.comments.error' }">\</ish-textarea>                                                                                | **Textarea form control**                                                                                                                                                                               |
 | **ish-checkbox** (Component)              | ![Checkbox](forms-checkbox.png) \<ish-checkbox controlName="saveForLater" [form]="paymentForm" label="checkout.save_edit.checkbox.label">\</ish-checkbox>                                                                                                                                                                                     | **Checkbox form control**                                                                                                                                                                               |
 | **ish-form-control-feedback** (Component) | ![Form feedback](forms-formfeedback.png) <ish-form-control-feedback [messages]="errorMessages" [control]="formControl"></ish-form-control-feedback>                                                                                                                                                                                           | **form control feedback component** To display error messages To display validation status icon of the related form control NOTE: Use this component only if you cannot use one of the components above |
 | **form-utils** (Service)                  | Methods: markAsDirtyRecursive(formGroup: FormGroup) updateValidatorsByDataLength(control: AbstractControl,array: any[],validators: ValidatorFn / ValidatorFn[] = Validators.required,async = false)                                                                                                                                           |                                                                                                                                                                                                         | Service for form related tasks |

projects/organization-management/src/app/components/user-roles-selection/user-roles-selection.component.html

@@ -4,13 +4,13 @@
       'account.user.details.profile.role_permissions.heading' | translate
     }}</label>
     <div class="col-md-8">
-      <div *ngIf="form$ | async as form" class="row">
+      <div *ngIf="form$ | async as form" class="row" [formGroup]="form">
         <ng-container *ngFor="let item of form.controls | keyvalue: unsorted; let i = index">
           <div class="col-12" *ngIf="role$(item.key) | async as role">
             <div class="form-control-checkbox">
               <div class="form-check form-control">
                 <label [for]="item.key">
-                  <input type="checkbox" id="item.key" value="item.value.value" [formControl]="item.value" />
+                  <input type="checkbox" [id]="item.key" [formControlName]="item.key" />
                   <span>{{ role.displayName }}</span
                   ><br />
                   <span *ngIf="role.description" class="input-help">{{ role.description }}</span>

projects/organization-management/src/app/pages/user-create/user-create-page.component.ts

@@ -42,8 +42,8 @@ export class UserCreatePageComponent implements OnInit {
     this.userError$ = this.organizationManagementFacade.usersError$;
   }
 
-  get profile() {
-    return this.form.get('profile');
+  get profile(): FormGroup {
+    return this.form.get('profile') as FormGroup;
   }
 
   submitForm() {

src/app/core/directives/server-html.directive.ts

@@ -20,7 +20,7 @@ import { LinkParser } from 'ish-core/utils/link-parser';
 })
 export class ServerHtmlDirective implements AfterContentInit, AfterViewInit, OnChanges {
   @Input() callbacks: {
-    [key: string]: () => {};
+    [key: string]: () => void;
   };
 
   constructor(

src/app/core/models/line-item/line-item.model.ts

@@ -28,16 +28,10 @@ export interface LineItem {
     total: PriceItem;
     undiscountedTotal;
     valueRebatesTotal?: PriceItem;
-
-    // attributes needed for quote feature
-    originTotal?: PriceItem;
   };
   isHiddenGift: boolean;
   isFreeGift: boolean;
 
-  // attributes needed for quote feature
-  originSingleBasePrice?: PriceItem;
-
   isQuantityFixed?: boolean;
 }
 

src/app/core/models/product/product.helper.ts

@@ -23,12 +23,11 @@ export enum ProductCompletenessLevel {
 
 export type AllProductTypes = Product | VariationProduct | VariationProductMaster | ProductBundle | ProductRetailSet;
 
-export type AnyProductType = Product & VariationProduct & VariationProductMaster & ProductBundle & ProductRetailSet;
-
-export type ProductPrices =
-  | Partial<Pick<ProductRetailSet, 'minListPrice' | 'minSalePrice' | 'summedUpListPrice' | 'summedUpSalePrice'>>
-  | Partial<Pick<VariationProductMaster, 'minListPrice' | 'minSalePrice' | 'maxListPrice' | 'maxSalePrice'>>
-  | Partial<Pick<Product, 'salePrice' | 'listPrice'>>;
+export type ProductPrices = Partial<
+  Pick<ProductRetailSet, 'minListPrice' | 'minSalePrice' | 'summedUpListPrice' | 'summedUpSalePrice'>
+> &
+  Partial<Pick<VariationProductMaster, 'minListPrice' | 'minSalePrice' | 'maxListPrice' | 'maxSalePrice'>> &
+  Partial<Pick<Product, 'salePrice' | 'listPrice'>>;
 
 export class ProductHelper {
   /**

src/app/core/store/shopping/recently/recently.selectors.ts

@@ -8,7 +8,7 @@ import { RecentlyState } from './recently.reducer';
 
 const getRecentlyState = createSelector(getShoppingState, state => state.recently);
 
-export const getRecentlyViewedProducts = createSelectorFactory(projector =>
+export const getRecentlyViewedProducts = createSelectorFactory<unknown, string[]>(projector =>
   defaultMemoize(projector, undefined, isEqual)
 )(getRecentlyState, (state: RecentlyState): string[] =>
   state.products

src/app/extensions/order-templates/pages/account-order-template-detail/account-order-template-detail-page.component.html

@@ -41,7 +41,6 @@ <h1>
     </ng-container>
   </div>
   <ish-product-add-to-basket
-    displayType="button"
     [product]="dummyProduct"
     [disabled]="!selectedItems?.length"
     [class]="'btn btn-primary float-right'"

src/app/extensions/order-templates/pages/account-order-template/account-order-template-list/account-order-template-list.component.html

@@ -54,13 +54,15 @@
   </div>
 </ng-template>
 
+<!-- the title will be set dynamically -->
 <ish-modal-dialog
   #deleteDialog
-  (confirmed)="delete($event)"
   [options]="{
     confirmText: 'account.order_template.delete.button.text' | translate,
-    rejectText: 'account.cancel.button.label' | translate
+    rejectText: 'account.cancel.button.label' | translate,
+    titleText: 'undefined'
   }"
+  (confirmed)="delete($event)"
 >
   {{ 'account.order_template.delete.do_you_really.text' | translate }}
 </ish-modal-dialog>

src/app/extensions/order-templates/pages/account-order-template/account-order-template-list/account-order-template-list.component.ts

@@ -24,6 +24,7 @@ export class AccountOrderTemplateListComponent implements OnDestroy {
   @Output() deleteOrderTemplate = new EventEmitter<string>();
 
   dummyProduct = { sku: 'dummy', inStock: true, availability: true };
+
   private destroy$ = new Subject();
 
   constructor(private translate: TranslateService, private productFacade: ShoppingFacade) {}

src/app/extensions/order-templates/shared/order-template-preferences-dialog/order-template-preferences-dialog.component.html

@@ -20,7 +20,7 @@ <h2 class="modal-title">{{ modalHeader | translate }}</h2>
         controlName="title"
         label="account.order_template.form.name.label"
         markRequiredLabel="off"
-        maxlength="35"
+        [maxlength]="35"
         [errorMessages]="{
           required: 'account.order_template.form.name.error.required',
           maxlength: 'account.order_template.form.name.error.maxlength'

src/app/extensions/order-templates/shared/select-order-template-modal/select-order-template-modal.component.html

@@ -53,7 +53,7 @@ <h2 class="modal-title">{{ headerTranslationKey | translate }}</h2>
                 <ish-input
                   class="w-75"
                   controlName="newOrderTemplate"
-                  [disabled]="newOrderTemplateDisabled ? 'true' : null"
+                  [disabled]="newOrderTemplateDisabled ? true : null"
                   [errorMessages]="{ required: 'account.order_template.name.error.required' }"
                   [form]="updateOrderTemplateForm"
                   inputClass="col-md-12"

src/app/extensions/quickorder/pages/quickorder/quickorder-page.component.html

@@ -71,7 +71,7 @@ <h3>{{ 'quickorder.page.subtitle' | translate }}</h3>
                 [form]="item"
                 controlName="quantity"
                 inputClass="w-100"
-                min="1"
+                [min]="1"
                 [errorMessages]="{
                   required: 'product.quantity.notempty.text',
                   integer: 'product.quantity.integer.text',

src/app/extensions/quoting/facades/quote-context.facade.ts

@@ -43,6 +43,7 @@ export abstract class QuoteContextFacade
     entityAsQuoteRequest: QuoteRequest;
     entityAsQuote: Quote;
     state: QuoteStatus;
+    editable: boolean;
     justSubmitted: boolean;
   }>
   implements OnDestroy {
@@ -88,6 +89,8 @@ export abstract class QuoteContextFacade
       'state',
       timer(0, 2000).pipe(switchMapTo(this.select('entity').pipe(map(QuotingHelper.state))), distinctUntilChanged())
     );
+
+    this.connect('editable', this.select('state').pipe(map(state => state === 'New')));
   }
 
   updateItem(item: LineItemUpdate) {

src/app/extensions/quoting/models/quoting/quoting.mapper.spec.ts

@@ -210,6 +210,11 @@ describe('Quoting Mapper', () => {
                 "type": "Money",
                 "value": 1002.95,
               },
+              "originTotal": Object {
+                "currency": "USD",
+                "type": "Money",
+                "value": 1002.95,
+              },
               "productSKU": "10696946",
               "quantity": Object {
                 "type": "Quantity",
@@ -221,17 +226,10 @@ describe('Quoting Mapper', () => {
                 "type": "Money",
                 "value": 10.95,
               },
-              "totals": Object {
-                "originTotal": Object {
-                  "currency": "USD",
-                  "type": "Money",
-                  "value": 1002.95,
-                },
-                "total": Object {
-                  "currency": "USD",
-                  "type": "Money",
-                  "value": 10.95,
-                },
+              "total": Object {
+                "currency": "USD",
+                "type": "Money",
+                "value": 10.95,
               },
             },
           ],
@@ -363,12 +361,10 @@ describe('Quoting Mapper', () => {
                 "type": "Money",
                 "value": 964.5,
               },
-              "totals": Object {
-                "total": Object {
-                  "currency": "USD",
-                  "type": "Money",
-                  "value": 964.5,
-                },
+              "total": Object {
+                "currency": "USD",
+                "type": "Money",
+                "value": 964.5,
               },
             },
           ],

src/app/extensions/quoting/models/quoting/quoting.mapper.ts

@@ -78,10 +78,8 @@ export class QuotingMapper {
 
             singleBasePrice: PriceMapper.fromData(item.singlePrice),
             originSingleBasePrice: PriceMapper.fromData(item.originSinglePrice),
-            totals: {
-              total: PriceMapper.fromData(item.totalPrice),
-              originTotal: PriceMapper.fromData(item.originTotalPrice),
-            },
+            total: PriceMapper.fromData(item.totalPrice),
+            originTotal: PriceMapper.fromData(item.originTotalPrice),
           })),
         };
         return mapped;
@@ -110,7 +108,7 @@ export class QuotingMapper {
                 productSKU: itemData.productSKU,
                 quantity: itemData.quantity,
                 singleBasePrice: PriceMapper.fromData(itemData.singlePrice),
-                totals: { total: PriceMapper.fromData(itemData.totalPrice) },
+                total: PriceMapper.fromData(itemData.totalPrice),
               };
             }
           }),

src/app/extensions/quoting/models/quoting/quoting.model.ts

@@ -30,17 +30,15 @@ export interface QuoteRequestItem extends QuoteItemStub {
   quantity: Attribute<number>;
 
   singleBasePrice: Price;
-  totals: { total: Price };
+  total: Price;
 }
 
-interface QuoteItem extends QuoteRequestItem {
+export interface QuoteItem extends QuoteRequestItem {
   originQuantity: Attribute<number>;
 
   originSingleBasePrice: Price;
-  totals: {
-    total: Price;
-    originTotal: Price;
-  };
+  total: Price;
+  originTotal: Price;
 }
 
 interface QuoteBase<ItemType> extends QuoteStub {

src/app/extensions/quoting/quoting.module.ts

@@ -8,6 +8,8 @@ import { ProductAddToQuoteComponent } from './shared/product-add-to-quote/produc
 import { QuoteEditComponent } from './shared/quote-edit/quote-edit.component';
 import { QuoteExpirationDateComponent } from './shared/quote-expiration-date/quote-expiration-date.component';
 import { QuoteInteractionsComponent } from './shared/quote-interactions/quote-interactions.component';
+import { QuoteLineItemListElementComponent } from './shared/quote-line-item-list-element/quote-line-item-list-element.component';
+import { QuoteLineItemListComponent } from './shared/quote-line-item-list/quote-line-item-list.component';
 import { QuoteStateComponent } from './shared/quote-state/quote-state.component';
 import { QuoteViewComponent } from './shared/quote-view/quote-view.component';
 import { QuoteWidgetComponent } from './shared/quote-widget/quote-widget.component';
@@ -21,6 +23,8 @@ import { QuoteWidgetComponent } from './shared/quote-widget/quote-widget.compone
     QuoteEditComponent,
     QuoteExpirationDateComponent,
     QuoteInteractionsComponent,
+    QuoteLineItemListComponent,
+    QuoteLineItemListElementComponent,
     QuoteStateComponent,
     QuoteViewComponent,
     QuoteWidgetComponent,

src/app/extensions/quoting/shared/quote-edit/quote-edit.component.html

@@ -51,15 +51,7 @@
     <!-- Quote Item List -->
     <div class="section">
       <h3>{{ 'quote.items.table.heading' | translate }}</h3>
-      <ish-line-item-list
-        *ngIf="quote.items"
-        [lineItems]="quote.items"
-        [editable]="true"
-        lineItemViewType="availability"
-        [total]="quote.total"
-        (updateItem)="onUpdateItem($event)"
-        (deleteItem)="onDeleteItem($event)"
-      ></ish-line-item-list>
+      <ish-quote-line-item-list *ngIf="quote.items"></ish-quote-line-item-list>
     </div>
   </form>
 </ng-container>

src/app/extensions/quoting/shared/quote-edit/quote-edit.component.spec.ts

@@ -6,9 +6,9 @@ import { EMPTY } from 'rxjs';
 import { instance, mock, when } from 'ts-mockito';
 
 import { InplaceEditComponent } from 'ish-shared/components/common/inplace-edit/inplace-edit.component';
-import { LineItemListComponent } from 'ish-shared/components/line-item/line-item-list/line-item-list.component';
 
 import { QuoteContextFacade } from '../../facades/quote-context.facade';
+import { QuoteLineItemListComponent } from '../quote-line-item-list/quote-line-item-list.component';
 import { QuoteStateComponent } from '../quote-state/quote-state.component';
 
 import { QuoteEditComponent } from './quote-edit.component';
@@ -26,7 +26,7 @@ describe('Quote Edit Component', () => {
       imports: [ReactiveFormsModule, TranslateModule.forRoot()],
       declarations: [
         MockComponent(InplaceEditComponent),
-        MockComponent(LineItemListComponent),
+        MockComponent(QuoteLineItemListComponent),
         MockComponent(QuoteStateComponent),
         QuoteEditComponent,
       ],

src/app/extensions/quoting/shared/quote-edit/quote-edit.component.ts

@@ -3,8 +3,6 @@ import { FormControl, FormGroup } from '@angular/forms';
 import { pick } from 'lodash-es';
 import { Observable } from 'rxjs';
 
-import { LineItemUpdate } from 'ish-core/models/line-item-update/line-item-update.model';
-
 import { QuoteContextFacade } from '../../facades/quote-context.facade';
 import { QuoteRequest } from '../../models/quoting/quoting.model';
 
@@ -52,12 +50,4 @@ export class QuoteEditComponent implements OnInit {
   reset() {
     this.form.reset(this.valuesFromQuote);
   }
-
-  onUpdateItem(item: LineItemUpdate) {
-    this.context.updateItem(item);
-  }
-
-  onDeleteItem(itemId: string) {
-    this.context.deleteItem(itemId);
-  }
 }

src/app/extensions/quoting/shared/quote-expiration-date/quote-expiration-date.component.ts

@@ -10,7 +10,7 @@ import { Quote, QuoteStatus } from '../../models/quoting/quoting.model';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class QuoteExpirationDateComponent implements OnChanges {
-  @Input() quote: Quote;
+  @Input() quote: Partial<Pick<Quote, 'id' | 'validToDate'>>;
 
   state$: Observable<QuoteStatus>;