product-form.component.html

<nb-card class="main">
	<nb-card-header class="d-flex">
		<h5>
			{{
				(product
					? 'INVENTORY_PAGE.EDIT_INVENTORY_ITEM'
					: 'INVENTORY_PAGE.ADD_INVENTORY_ITEM'
				) | translate
			}}
		</h5>
		<nb-icon
			class="ml-auto mt-1 close"
			icon="close-outline"
			(click)="onCancel()"
		></nb-icon>
	</nb-card-header>
	<nb-card-body>
		<form [formGroup]="form" *ngIf="form" class="mb-4">
			<div class="form-group">
				<div class="row">
					<div class="col-sm-6 mb-4">
						<label class="label" for="nameInput">
							{{ 'INVENTORY_PAGE.NAME' | translate }}
						</label>
						<input
							fullWidth
							id="nameInput"
							type="text"
							nbInput
							formControlName="name"
							[placeholder]="'INVENTORY_PAGE.NAME' | translate"
							[ngClass]="{
								'status-danger':
									form.controls['name'].invalid &&
									form.controls['name'].touched
							}"
						/>
						<div
							class="text-danger"
							*ngIf="
								form.controls['name'].errors &&
								form.controls['name'].errors.required
							"
						>
							{{ 'VALIDATION.FIELD_REQUIRED' | translate }}
						</div>
					</div>
					<div class="col-sm-6 mb-4">
						<label class="label" for="codeInput">
							{{ 'INVENTORY_PAGE.CODE' | translate }}
						</label>
						<input
							fullWidth
							id="codeInput"
							type="text"
							nbInput
							formControlName="code"
							[placeholder]="'INVENTORY_PAGE.CODE' | translate"
							[ngClass]="{
								'status-danger':
									form.controls['code'].invalid &&
									form.controls['code'].touched
							}"
						/>
						<div
							class="text-danger"
							*ngIf="
								form.controls['code'].errors &&
								form.controls['code'].errors.required
							"
						>
							{{ 'VALIDATION.FIELD_REQUIRED' | translate }}
						</div>
					</div>
				</div>
				<div class="row" *ngIf="productTypes && productCategories">
					<div class="col-sm-6 mb-4">
						<label class="label" for="productTypeId">
							{{ 'INVENTORY_PAGE.PRODUCT_TYPE' | translate }}
						</label>
						<nb-select
							id="productTypeId"
							formControlName="productTypeId"
							fullWidth
							[placeholder]="
								'INVENTORY_PAGE.PRODUCT_TYPE' | translate
							"
							[ngClass]="{
								'status-danger':
									form.controls['productTypeId'].invalid &&
									form.controls['productTypeId'].touched
							}"
						>
							<nb-option
								*ngFor="let productType of productTypes"
								[value]="productType.id"
							>
								{{ productType.name }}</nb-option
							>
						</nb-select>
						<div
							class="text-danger"
							*ngIf="
								form.controls['productTypeId'].errors &&
								form.controls['productTypeId'].errors.required
							"
						>
							{{ 'VALIDATION.FIELD_REQUIRED' | translate }}
						</div>
					</div>
					<div class="col-sm-6 mb-4">
						<label class="label" for="productCategoryId">
							{{ 'INVENTORY_PAGE.PRODUCT_CATEGORY' | translate }}
						</label>
						<nb-select
							id="productCategoryId"
							formControlName="productCategoryId"
							fullWidth
							[placeholder]="
								'INVENTORY_PAGE.PRODUCT_CATEGORY' | translate
							"
							[ngClass]="{
								'status-danger':
									form.controls['productCategoryId']
										.invalid &&
									form.controls['productCategoryId'].touched
							}"
						>
							<nb-option
								*ngFor="
									let productCategory of productCategories
								"
								[value]="productCategory.id"
								>{{ productCategory.name }}</nb-option
							>
						</nb-select>
						<div
							class="text-danger"
							*ngIf="
								form.controls['productCategoryId'].errors &&
								form.controls['productCategoryId'].errors
									.required
							"
						>
							{{ 'VALIDATION.FIELD_REQUIRED' | translate }}
						</div>
					</div>
				</div>
				<div class="mb-4">
					<label class="label" for="description">
						{{ 'INVENTORY_PAGE.DESCRIPTION' | translate }}
					</label>
					<textarea
						formControlName="description"
						nbInput
						fullWidth
						id="description"
						[placeholder]="'INVENTORY_PAGE.DESCRIPTION' | translate"
						[ngClass]="{
							'status-danger':
								form.controls['description'].invalid &&
								form.controls['description'].touched
						}"
					>
					</textarea>
				</div>
				<div class="row">
					<div class="col-sm-12 mb-4">
						<nb-checkbox formControlName="enabled">
							<span>{{
								'INVENTORY_PAGE.ENABLED' | translate
							}}</span>
						</nb-checkbox>
					</div>
				</div>
				<div class="options-wrap mb-4">
					<div *ngFor="let option of options" class="option">
						{{ option.name }}
					</div>
				</div>
				<div class="row d-bottom">
					<div class="col-sm-5">
						<label class="label" for="addOption">
							{{ 'INVENTORY_PAGE.ADD_OPTION' | translate }}
						</label>
						<input
							fullWidth
							id="addOption"
							type="text"
							[(ngModel)]="optionValue"
							[ngModelOptions]="{ standalone: true }"
							nbInput
							[placeholder]="
								'INVENTORY_PAGE.ADD_OPTION' | translate
							"
						/>
					</div>
					<div class="col-sm-4">
						<label class="label" for="optionCode">
							{{ 'INVENTORY_PAGE.CODE' | translate }}
						</label>
						<input
							fullWidth
							id="optionCode"
							type="text"
							[(ngModel)]="optionCode"
							[ngModelOptions]="{ standalone: true }"
							nbInput
							[placeholder]="'INVENTORY_PAGE.CODE' | translate"
						/>
					</div>
					<div class="col-sm-2">
						<button
							status="success"
							nbButton
							(click)="onAddOption()"
						>
							{{ 'INVENTORY_PAGE.ADD_OPTION' | translate }}
						</button>
					</div>
				</div>
			</div>
		</form>

		<div class="row">
			<div *ngIf="product && product.variants" class="col-sm-12">
				<button
					class="mr-2"
					status="info"
					nbButton
					*ngFor="let productVariant of product.variants"
					(click)="onEditProductVariant(productVariant.id)"
				>
					<nb-icon icon="edit-outline"></nb-icon>
					{{ productVariant.internalReference }}
				</button>
			</div>
		</div>
	</nb-card-body>
	<nb-card-footer class="text-right">
		<button (click)="onCancel()" status="warning" class="mr-3" nbButton>
			{{ 'BUTTONS.CLOSE' | translate }}
		</button>
		<button
			status="success"
			[disabled]="form.invalid"
			nbButton
			(click)="onSaveRequest()"
		>
			{{ 'BUTTONS.SAVE' | translate }}
		</button>
	</nb-card-footer>
</nb-card>