You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
234 lines
7.8 KiB
HTML
234 lines
7.8 KiB
HTML
|
|
<ion-content>
|
|
<div class="head-title">
|
|
<!-- <ion-toolbar class="header-toolbar">
|
|
<ion-buttons slot="start">
|
|
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
|
|
</ion-buttons>
|
|
<ion-title color="light" >{{ts.trPK('itemforsale','title')}}</ion-title>
|
|
</ion-toolbar> -->
|
|
|
|
<app-generic-header
|
|
showImage="false"
|
|
showBack="true"
|
|
[headerText]="'itemforsale,title' | translate">
|
|
</app-generic-header>
|
|
</div>
|
|
<div class="header"></div>
|
|
<div class="bottom"></div>
|
|
<div class="md-stepper-horizontal ">
|
|
<ion-row>
|
|
<ion-col size="4"> <div class="md-step active " [ngClass]="step >1 ? 'green' : 'orange'">
|
|
<div class="md-step-circle"><span style="content: url(/assets/imgs/check-white.svg)"></span></div>
|
|
<div class="md-step-title">{{ts.trPK('itemforsale','select-category')}}</div>
|
|
<div class="md-step-optional">{{ts.trPK('itemforsale','completed')}}</div>
|
|
<div [class]="direction == 'ltr' ? 'md-step-bar-left' : 'md-step-bar-right'" ></div>
|
|
<!-- <div class="md-step-bar-right" [ngClass]="step ==1 ? 'orange-border' : 'green-border'"></div> -->
|
|
</div>
|
|
</ion-col>
|
|
|
|
<ion-col size="4"> <div class="md-step" [ngClass]="step >2 ? 'green' : step ==2 ? 'orange' : 'grey'">
|
|
<div class="md-step-circle"><span *ngIf="step==1" style="content: url(/assets/imgs/check.svg)"></span>
|
|
<span *ngIf="step>2 || step==2" style="content: url(/assets/imgs/check-white.svg)">
|
|
</span>
|
|
</div>
|
|
<div class="md-step-title">{{ts.trPK('itemforsale','add-details')}}</div>
|
|
|
|
<div class="md-step-optional">{{step >2 ? ts.trPK('itemforsale','completed') :ts.trPK('itemforsale','locked')}}</div>
|
|
<div class="md-step-bar-left"></div>
|
|
|
|
</div></ion-col>
|
|
<ion-col size="4"><div class="md-step" [ngClass]="step >3 ? 'green' : step ==3 ? 'orange' : 'grey'">
|
|
<div class="md-step-circle"><span *ngIf="step==1 || step==2" style="content: url(/assets/imgs/check.svg)"></span>
|
|
<span *ngIf="step>=3" style="content: url(/assets/imgs/check-white.svg)"></span></div>
|
|
<div class="md-step-title">{{ts.trPK('itemforsale','review-sell')}}</div>
|
|
<div class="md-step-optional">{{step >3 ? ts.trPK('itemforsale','completed') : ts.trPK('itemforsale','locked')}}</div>
|
|
<div class="md-step-bar-left"></div>
|
|
|
|
</div></ion-col>
|
|
</ion-row>
|
|
</div>
|
|
<div class="content">
|
|
|
|
|
|
|
|
<div class="offering" *ngIf="step==1">
|
|
<h2>{{ts.trPK('itemforsale','offering')}}</h2>
|
|
</div>
|
|
<ion-grid *ngIf="step==1">
|
|
<ion-row>
|
|
<ion-col size="4" *ngFor="let category of categories">
|
|
<div class="sale-icon" (click)="nextStep(category)">
|
|
<div class="top">
|
|
<div class="top-icon" [innerHTML]="category.content | sanitizeHTMLPipe" >
|
|
</div>
|
|
<div class="bottom-icon">
|
|
<p *ngIf="direction == 'ltr'">{{category.title}}</p>
|
|
<p *ngIf="direction =='rtl'">{{category.title_Ar}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
<div class="offering" *ngIf="step==2">
|
|
<h2>{{ts.trPK('itemforsale','add-details')}}</h2>
|
|
</div>
|
|
<div class="add-details" *ngIf="step==2">
|
|
<ion-grid>
|
|
<ion-row>
|
|
<p>{{ts.trPK('itemforsale','item-info')}}</p>
|
|
<ion-col size="12">
|
|
<ion-item lines="none">
|
|
<ion-input [placeholder]="ts.trPK('itemforsale','item-info')" [(ngModel)]="itemInfo"></ion-input>
|
|
</ion-item>
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
|
|
<ion-col size="12">
|
|
<ion-item lines="none">
|
|
|
|
|
|
<ion-textarea rows="6" cols="20" [placeholder]="ts.trPK('worklist','item-description')" [(ngModel)]="itemDescription"></ion-textarea>
|
|
</ion-item>
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
<ion-col>
|
|
<p>{{ts.trPK('itemforsale','item-condition')}}</p>
|
|
<ion-radio-group value="new" [(ngModel)]="itemCondition">
|
|
<ion-col>
|
|
<ion-radio value="new"></ion-radio>
|
|
<ion-label>{{ts.trPK('itemforsale','new')}}</ion-label>
|
|
</ion-col>
|
|
<ion-col>
|
|
<ion-radio value="used"></ion-radio>
|
|
<ion-label>{{ts.trPK('itemforsale','used')}}</ion-label>
|
|
</ion-col>
|
|
|
|
|
|
</ion-radio-group>
|
|
</ion-col>
|
|
</ion-row>
|
|
<ion-row>
|
|
<ion-col>
|
|
<p class="boldTxtNav" >{{ts.trPK('itemforsale','region')}}</p>
|
|
<ion-select okText='{{"general, ok" | translate }}' cancelText='{{"general, cancel" | translate }}'
|
|
[(ngModel)]="regionID">
|
|
<ion-select-option *ngFor="let region of regions" [value]="region.regionID" >{{region.regionName}}</ion-select-option>
|
|
|
|
</ion-select>
|
|
</ion-col>
|
|
</ion-row>
|
|
<ion-row>
|
|
|
|
<ion-col size="12">
|
|
<p>{{ts.trPK('itemforsale','item-price')}}</p>
|
|
<ion-item lines="none">
|
|
<ion-input [placeholder]="ts.trPK('itemforsale','item-price')" type="number" [(ngModel)]="itemPrice"></ion-input>
|
|
</ion-item>
|
|
</ion-col>
|
|
</ion-row>
|
|
<ion-row>
|
|
|
|
<p>{{ts.trPK('itemforsale','item-photos')}}</p>
|
|
</ion-row>
|
|
<div>
|
|
<div class="fileUpload btn btn-primary">
|
|
<!-- <img slot="start" style=" height: 55px;"src="../assets/imgs/add-photo.svg"> -->
|
|
<!-- <input end class="upload" type="file" ng2FileSelect [uploader]="uploader"
|
|
(change)="onFileSelected($event)" (click)="onFileSelectedclick($event)" /> -->
|
|
<file-uploader (fileSelected)="attachmentSelected($event)" [maxFileSize]="maxFileSize"
|
|
[multiupload]="true" [selectedAttachment]="selectedPicture">
|
|
</file-uploader>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</ion-grid>
|
|
</div>
|
|
|
|
<div class="offering" *ngIf="step==3">
|
|
<h2>Review & Sell</h2>
|
|
</div>
|
|
|
|
|
|
<div class="add-details" *ngIf="step==3">
|
|
<h2 class="review-title" *ngIf="direction =='rtl'">
|
|
{{selectedCategory.title_Ar}}
|
|
</h2>
|
|
<h2 class="review-title" *ngIf="direction =='ltr'">
|
|
{{selectedCategory.title}}
|
|
</h2>
|
|
|
|
|
|
<p style="font-weight: 600;"> {{itemInfo}}</p>
|
|
|
|
<p>
|
|
{{itemDescription}}
|
|
</p>
|
|
<div class="description-details">
|
|
<p class="orange">{{itemCondition}}</p>
|
|
|
|
<ion-slides>
|
|
<ion-slide>
|
|
<ion-grid class=" gridAH" *ngIf="addAttachRequest.length>0">
|
|
|
|
<ion-row>
|
|
<ion-col lines="none" size="3" *ngFor="let obj of addAttachRequest">
|
|
<div class="image-container">
|
|
<div class="uploaded">
|
|
<!-- <div class="closed" (click)="deletePhoto(item)">X</div> -->
|
|
<img [src]="getImgContent('data:image/png;base64, ' +obj.Base64Data) " />
|
|
</div>
|
|
|
|
</div>
|
|
</ion-col>
|
|
|
|
</ion-row>
|
|
</ion-grid>
|
|
</ion-slide>
|
|
</ion-slides>
|
|
<div class="selling">
|
|
|
|
|
|
<strong>{{ts.trPK('itemforsale','selling-for')}} </strong> <h2>{{itemPrice}} SAR</h2>
|
|
</div>
|
|
<div class="waring">
|
|
<img src="/assets/imgs/itemsforsale/alert.svg"> <label>{{ts.trPK('itemforsale','warning')}}</label>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<ion-footer *ngIf="step==1">
|
|
<div class="centerDiv">
|
|
<ion-button class="footer-button red-button" (click)="cancelItem()" ion-button>
|
|
{{ts.trPK('general','cancel')}} </ion-button>
|
|
|
|
|
|
</div>
|
|
</ion-footer>
|
|
|
|
|
|
<ion-footer *ngIf="step>1">
|
|
<div class="centerDiv">
|
|
<ion-button class="footer-button red-button small-btn" ion-button (click)="cancelItem()" *ngIf="step ==2 || step ==3">
|
|
{{ts.trPK('general','cancel')}} </ion-button>
|
|
<ion-button class="footer-button small-btn" ion-button (click)="step =3" *ngIf="step ==2" [disabled]="!validate()">
|
|
{{ts.trPK('general','next')}} </ion-button>
|
|
|
|
<ion-button class="footer-button small-btn" ion-button (click)="createItemForSale()" *ngIf="step ==3 && !editItem">
|
|
{{ts.trPK('general','confirm')}} </ion-button>
|
|
<ion-button class="footer-button small-btn" ion-button (click)="updateItemForSale()" *ngIf="step ==3 && editItem">
|
|
{{ts.trPK('general','update')}} </ion-button>
|
|
|
|
</div>
|
|
</ion-footer>
|
|
|
|
</ion-content> |