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.
sfh-mohemm/Mohem/src/app/itemforsale/items/items.component.html

155 lines
5.6 KiB
HTML

<ion-content>
<div class="head-title">
5 years ago
<app-generic-header
showImage="false"
5 years ago
showBack="true"
5 years ago
[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">
4 years ago
<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">
4 years ago
<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">
4 years ago
<p *ngIf="direction == 'ltr'">{{category.title}}</p>
<p *ngIf="direction =='rtl'">{{category.title_Ar}}</p>
</div>
</div>
</div>
4 years ago
</div>
<div class="grid-row">
<div class="loader" *ngIf="!items ">
<img src="../assets/icon/progress-loading.gif" />
</div>
4 years ago
<ion-row *ngIf="items">
4 years ago
<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" />
4 years ago
<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>
4 years ago
<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>
4 years ago
<p [class]="item.status=='Approved' ? 'green' : 'yellow'">{{item.status}}</p>
<ion-row>
<ion-col size="10">
<strong>
4 years ago
{{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>
4 years ago
4 years ago
<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>
4 years ago
<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>
4 years ago
<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">
4 years ago
<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">
4 years ago
<p [class]="item.status=='Approved' ? 'green' : 'yellow'">{{item.status}}</p>
4 years ago
</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>
4 years ago
<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>