|
|
|
|
<ion-content>
|
|
|
|
|
<div class="head-title">
|
|
|
|
|
<app-generic-header
|
|
|
|
|
showImage="false"
|
|
|
|
|
showBack="true"
|
|
|
|
|
[headerText]="'itemforsale,title' | translate">
|
|
|
|
|
</app-generic-header>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="segments-container">
|
|
|
|
|
<ion-segment (ionChange)="segmentChanged($event)" value="1" class="item-for-sale-indicator">
|
|
|
|
|
<ion-segment-button value="1" >
|
|
|
|
|
<ion-label>{{ts.trPK('itemforsale','title')}} </ion-label>
|
|
|
|
|
</ion-segment-button>
|
|
|
|
|
<ion-segment-button value="2">
|
|
|
|
|
<ion-label>{{ts.trPK('itemforsale','my-posted-ad')}}</ion-label>
|
|
|
|
|
</ion-segment-button>
|
|
|
|
|
</ion-segment>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="header"></div>
|
|
|
|
|
<div class="bottom"></div>
|
|
|
|
|
|
|
|
|
|
<div class="sales-items" *ngIf="segment =='1'">
|
|
|
|
|
<div class="fab-button">
|
|
|
|
|
<ion-fab-button class="flaot-button" (click)="openSale()"><img src="assets/imgs/itemsforsale/add.svg"></ion-fab-button>
|
|
|
|
|
</div>
|
|
|
|
|
<ion-grid>
|
|
|
|
|
<ion-row>
|
|
|
|
|
|
|
|
|
|
<ion-col size="12">
|
|
|
|
|
<ion-item lines="none" class="SearchtextBox">
|
|
|
|
|
<ion-input [placeholder]="'itemforsale,search-items'| translate" (input)="search($event.target.value)"></ion-input>
|
|
|
|
|
</ion-item>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col size="10">
|
|
|
|
|
<p class="filterText"> {{ts.trPK('itemforsale','browse-categories')}} </p>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="2">
|
|
|
|
|
<img class="filter-icon" src="assets/imgs/itemsforsale/filter.svg" (click)="openModel()">
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</ion-grid>
|
|
|
|
|
|
|
|
|
|
<div class="container-icon">
|
|
|
|
|
<div class="box-icon" *ngFor="let category of categories" >
|
|
|
|
|
<div class="sale-icon" [ngClass]="{'active':activeClass==category.categoryID }" (click)="selectCategory(category)">
|
|
|
|
|
<div class="top" [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>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="grid-row">
|
|
|
|
|
<div class="loader" *ngIf="!items ">
|
|
|
|
|
<img src="../assets/icon/progress-loading.gif" />
|
|
|
|
|
</div>
|
|
|
|
|
<ion-row *ngIf="items">
|
|
|
|
|
<ion-col size="6" (click)="openDetails(item)" *ngFor="let item of items">
|
|
|
|
|
<ion-card *ngIf="item.status.toLowerCase() =='approved'">
|
|
|
|
|
<ion-card-header>
|
|
|
|
|
<img *ngIf="item.itemAttachments[0] && item.itemAttachments[0].content" [src]="getImgContent('data:image/png;base64, ' +item.itemAttachments[0].content)" />
|
|
|
|
|
<img *ngIf="!item.itemAttachments[0] || !item.itemAttachments[0].content" src="/assets/imgs/no-images.png" />
|
|
|
|
|
<ion-card-title *ngIf="direction == 'ltr'">{{item.title}}</ion-card-title>
|
|
|
|
|
<ion-card-title *ngIf="direction =='rtl'">{{item.title_Ar}}</ion-card-title>
|
|
|
|
|
|
|
|
|
|
</ion-card-header>
|
|
|
|
|
|
|
|
|
|
<ion-card-content>
|
|
|
|
|
<div class="description-cont" *ngIf="direction == 'ltr'">{{getDotted(item.description, 60)}}</div>
|
|
|
|
|
<div class="description-cont" *ngIf="direction =='rtl'">{{getDotted(item.description_Ar, 60)}}</div>
|
|
|
|
|
<p [class]="item.status=='Approved' ? 'green' : 'yellow'">{{item.status}}</p>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col size="10">
|
|
|
|
|
<strong>
|
|
|
|
|
{{item.quotePrice}} {{item.currencyCode}}
|
|
|
|
|
</strong>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="2">
|
|
|
|
|
<img src="assets/imgs/itemsforsale/arrow.svg">
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
|
|
|
|
|
</ion-card-content>
|
|
|
|
|
</ion-card>
|
|
|
|
|
</ion-col>
|
|
|
|
|
|
|
|
|
|
<div class="no-dataDiv" *ngIf="items.length == 0" >
|
|
|
|
|
<ion-row>
|
|
|
|
|
<img class="empty-data" src="../assets/imgs/box.png"/>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</ion-row>
|
|
|
|
|
<h4> {{ts.trPK('general','empty')}}</h4>
|
|
|
|
|
</div>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
|
|
|
|
|
<ion-infinite-scroll-content
|
|
|
|
|
loadingSpinner="bubbles"
|
|
|
|
|
loadingText="Loading more data...">
|
|
|
|
|
</ion-infinite-scroll-content>
|
|
|
|
|
</ion-infinite-scroll>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="my-ads" *ngIf="segment =='2'">
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-item button detail="false" *ngFor="let item of itemsByEmployee">
|
|
|
|
|
<ion-thumbnail slot="start">
|
|
|
|
|
<img *ngIf="item.itemAttachments[0] && item.itemAttachments[0].content" [src]="getImgContent('data:image/png;base64, ' +item.itemAttachments[0].content)" />
|
|
|
|
|
<img *ngIf="!item.itemAttachments[0] || !item.itemAttachments[0].content" src="assets/imgs/no-images.png" />
|
|
|
|
|
</ion-thumbnail>
|
|
|
|
|
<ion-label class="label-thumb">
|
|
|
|
|
|
|
|
|
|
<h3 *ngIf="direction == 'ltr'">{{item.title}}</h3>
|
|
|
|
|
<h3 *ngIf="direction =='rtl'">{{item.title_Ar}}</h3>
|
|
|
|
|
|
|
|
|
|
<p class="posted-on">{{getDate(item.created) }}</p>
|
|
|
|
|
|
|
|
|
|
<p class="details-text" *ngIf="direction == 'ltr'"> {{getDotted(item.description, 30)}}</p>
|
|
|
|
|
<p *ngIf="direction =='rtl'">{{getDotted(item.description_Ar, 30)}}</p>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col size="8">
|
|
|
|
|
<p [class]="item.status=='Approved' ? 'green' : 'yellow'">{{item.status}}</p>
|
|
|
|
|
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col>
|
|
|
|
|
<img class="icon" *ngIf="item.status!='Approved'" src="assets/imgs/itemsforsale/delete.svg" (click)="deleteItems(item)"/>
|
|
|
|
|
<img [class]="direction =='ltr' ? 'icon edit' : 'icon edit-ar'" src="assets/imgs/itemsforsale/edit.svg" (click)="editItems(item)" />
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</ion-label>
|
|
|
|
|
|
|
|
|
|
</ion-item>
|
|
|
|
|
<div class="space"></div>
|
|
|
|
|
</ion-row>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<ion-footer *ngIf="segment=='2'" >
|
|
|
|
|
<div class="centerDiv">
|
|
|
|
|
<ion-button class="footer-button" ion-button (click)="openSale()">
|
|
|
|
|
{{ts.trPK('itemforsale','create-new-ad')}} </ion-button>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</ion-footer>
|
|
|
|
|
|
|
|
|
|
</ion-content>
|
|
|
|
|
|