From a707c46952116f8bd719cd2d5beb08ed03616648 Mon Sep 17 00:00:00 2001 From: Sultan Khan Date: Mon, 5 Jul 2021 08:48:10 +0300 Subject: [PATCH] design fixes share --- Mohem/package.json | 7 +- .../app/itemforsale/home/home.component.scss | 3 +- .../itemforsale/items/items.component.html | 4 +- .../itemforsale/items/items.component.scss | 5 +- .../worklist-main.component.html | 2 +- .../worklist-main.component.scss | 10 +- .../filter/filter.component.html | 32 ++++++ .../filter/filter.component.scss | 33 ++++++ .../filter/filter.component.spec.ts | 27 +++++ .../offersdiscount/filter/filter.component.ts | 101 ++++++++++++++++++ .../offersdiscount/home/home.component.html | 6 +- .../offersdiscount/home/home.component.scss | 85 +++++++++------ .../app/offersdiscount/home/home.component.ts | 31 +++++- .../offer-details.component.html | 16 ++- .../offer-details/offer-details.component.ts | 5 +- .../offersdiscount/offersdiscount.module.ts | 8 +- .../app/offersdiscount/services/service.ts | 1 + ...pliances.svg => electronic_appliances.svg} | 0 Mohem/src/assets/localization/i18n.json | 8 ++ Mohem/src/theme/styles.scss | 3 + 20 files changed, 330 insertions(+), 57 deletions(-) create mode 100644 Mohem/src/app/offersdiscount/filter/filter.component.html create mode 100644 Mohem/src/app/offersdiscount/filter/filter.component.scss create mode 100644 Mohem/src/app/offersdiscount/filter/filter.component.spec.ts create mode 100644 Mohem/src/app/offersdiscount/filter/filter.component.ts rename Mohem/src/assets/imgs/itemsforsale/{electronic appliances.svg => electronic_appliances.svg} (100%) diff --git a/Mohem/package.json b/Mohem/package.json index 4bed3503..8d76c7a1 100644 --- a/Mohem/package.json +++ b/Mohem/package.json @@ -48,6 +48,7 @@ "@ionic-native/native-storage": "^5.17.0", "@ionic-native/nfc": "^5.30.0", "@ionic-native/open-native-settings": "^5.14.0", + "@ionic-native/social-sharing": "^5.34.0", "@ionic-native/splash-screen": "^5.0.0", "@ionic-native/sqlite": "^5.18.0", "@ionic-native/status-bar": "^5.0.0", @@ -94,6 +95,7 @@ "cordova-plugin-themeablebrowser": "^0.2.18", "cordova-plugin-whitelist": "^1.3.4", "cordova-plugin-wifiwizard2": "^3.1.1", + "cordova-plugin-x-socialsharing": "^6.0.3", "cordova-sqlite-storage": "^3.4.0", "cordova-support-google-services": "^1.3.2", "cordova.plugins.diagnostic": "^5.0.1", @@ -215,11 +217,12 @@ "GOOGLE_PLAY_SERVICES_VERSION": "+" }, "phonegap-nfc": {}, - "wifiwizard2": {} + "wifiwizard2": {}, + "cordova-plugin-x-socialsharing": {} }, "platforms": [ "android", "ios" ] } -} \ No newline at end of file +} diff --git a/Mohem/src/app/itemforsale/home/home.component.scss b/Mohem/src/app/itemforsale/home/home.component.scss index 515d9d64..bcfeb828 100644 --- a/Mohem/src/app/itemforsale/home/home.component.scss +++ b/Mohem/src/app/itemforsale/home/home.component.scss @@ -193,6 +193,7 @@ margin-bottom: 70px; margin: 1px; border-radius: 15px; background: #fff; + height: 115px; } .sale-icon ion-icon{ @@ -202,7 +203,7 @@ margin-bottom: 70px; margin-top:5px; margin-top: 5px; margin-bottom: 0; - font-size: 12px; + font-size: 14px; font-weight: bold; } .add-details{ diff --git a/Mohem/src/app/itemforsale/items/items.component.html b/Mohem/src/app/itemforsale/items/items.component.html index 32e85170..447131e1 100644 --- a/Mohem/src/app/itemforsale/items/items.component.html +++ b/Mohem/src/app/itemforsale/items/items.component.html @@ -66,7 +66,7 @@
- +

Electronic Appliance

@@ -76,7 +76,7 @@
- +

Fashion & Beauty

diff --git a/Mohem/src/app/itemforsale/items/items.component.scss b/Mohem/src/app/itemforsale/items/items.component.scss index 032c2d77..bb7b0dd6 100644 --- a/Mohem/src/app/itemforsale/items/items.component.scss +++ b/Mohem/src/app/itemforsale/items/items.component.scss @@ -177,4 +177,7 @@ ion-card-content{ } .details-text{ white-space: normal; -} \ No newline at end of file +} +ion-card-content ion-icon{ +font-size: 25px; +} diff --git a/Mohem/src/app/notification/worklist-main/worklist-main.component.html b/Mohem/src/app/notification/worklist-main/worklist-main.component.html index 3779b172..09f87123 100644 --- a/Mohem/src/app/notification/worklist-main/worklist-main.component.html +++ b/Mohem/src/app/notification/worklist-main/worklist-main.component.html @@ -363,7 +363,7 @@ - diff --git a/Mohem/src/app/notification/worklist-main/worklist-main.component.scss b/Mohem/src/app/notification/worklist-main/worklist-main.component.scss index e8434bee..98c2566e 100644 --- a/Mohem/src/app/notification/worklist-main/worklist-main.component.scss +++ b/Mohem/src/app/notification/worklist-main/worklist-main.component.scss @@ -100,13 +100,15 @@ text-align: left; } .req_info{ - width: 20px; - height: 20px; + width: 25px; + height: 25px; display: inline-block; - margin: 15px 10px 0px 0px; + margin: 0; } - + .deligate{ + margin-left:10px; + } .actionBtn{ --border-radius: 50% !important; height: 55px; diff --git a/Mohem/src/app/offersdiscount/filter/filter.component.html b/Mohem/src/app/offersdiscount/filter/filter.component.html new file mode 100644 index 00000000..d7d72ecd --- /dev/null +++ b/Mohem/src/app/offersdiscount/filter/filter.component.html @@ -0,0 +1,32 @@ + + + + + +
+ + + + {{key.name}} + + + + + + + +
+ + +
+ + {{ts.trPK('general','apply-filters')}} + +
+
+
\ No newline at end of file diff --git a/Mohem/src/app/offersdiscount/filter/filter.component.scss b/Mohem/src/app/offersdiscount/filter/filter.component.scss new file mode 100644 index 00000000..39bebf2a --- /dev/null +++ b/Mohem/src/app/offersdiscount/filter/filter.component.scss @@ -0,0 +1,33 @@ +ion-label{ + font-size: 14px !important; +} +ion-thumbnail img{ + width: 40px; + height: 40px; + margin: 10px; +} +.active::before{ + position: absolute; + right: 10px; + top: 15px; + padding: 0px; + background: #3cc353; + padding: 3px 2px 2px 3px; + border-radius: 60%; + font-size: 12px; + color: #fff; + content: '✓'; + width: 20px; + height: 20px; + text-align: center; + z-index: 2; +} + +.footer-button{ + background: var(--newgreen)!important;border-radius: 10px; --background: transparent; + width: 80%; +} +ion-footer{ + position: fixed; + bottom: 0; +} \ No newline at end of file diff --git a/Mohem/src/app/offersdiscount/filter/filter.component.spec.ts b/Mohem/src/app/offersdiscount/filter/filter.component.spec.ts new file mode 100644 index 00000000..ff6002ba --- /dev/null +++ b/Mohem/src/app/offersdiscount/filter/filter.component.spec.ts @@ -0,0 +1,27 @@ +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FilterComponent } from './filter.component'; + +describe('FilterComponent', () => { + let component: FilterComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ FilterComponent ], + schemas: [CUSTOM_ELEMENTS_SCHEMA], + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(FilterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/Mohem/src/app/offersdiscount/filter/filter.component.ts b/Mohem/src/app/offersdiscount/filter/filter.component.ts new file mode 100644 index 00000000..ea6bd033 --- /dev/null +++ b/Mohem/src/app/offersdiscount/filter/filter.component.ts @@ -0,0 +1,101 @@ +import { AfterViewInit, Component, OnInit } from '@angular/core'; +import { CommonService } from 'src/app/hmg-common/services/common/common.service'; +import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service'; +import { OfferDiscountService } from '../services/service'; +import { ModalController } from '@ionic/angular'; +@Component({ + selector: 'app-filter', + templateUrl: './filter.component.html', + styleUrls: ['./filter.component.scss'], +}) +export class FilterComponent implements AfterViewInit { + + segment: any = '1'; + categoriesObj: any; + categories: any = []; + offersData: any = []; + activeClass: any; + tempSearch: any = []; + searchText: String; + public activeKey = {} + constructor(public ts: TranslatorService, public modalController: ModalController, public cs: CommonService, public offersService: OfferDiscountService) { } + + ngAfterViewInit(): void { + + this.getOfferDiscount(); + } + + + openDetails(offer) { + this.cs.sharedService.setSharedData(offer, OfferDiscountService.selected_offers); + + var related = this.offersData.filter((res) => res.rowID != offer.rowID); + this.cs.sharedService.setSharedData(related, OfferDiscountService.related_offers); + + this.cs.navigateForward('/offersdiscount/offer-details'); + } + getOfferDiscount() { + this.cs.startLoading(); + this.offersService.getOffers({}, () => { }, this.ts.trPK('general', 'retry')).subscribe((res) => { + var data = JSON.parse(res['Mohemm_ITG_ResponseItem']); + this.cs.stopLoading(); + if (data['result']) + this.displayOffers(data['result']); + }); + + } + displayOffers(data) { + if (data['data']) { + var parseJSON = data['data']; + var offers = JSON.parse(parseJSON) + this.categoriesObj = this.groupBy(offers, TranslatorService.getCurrentDirection() == 'ltr' ? 'categoryName_en' : 'categoryName_ar'); + // = Object.keys(this.categoriesObj); + + + + for (var x in this.categoriesObj) { + for (var y in offers) { + if (x == offers[y].categoryName_en && this.categories.filter(item => item.name.includes(x)) == false) { + this.categories.push({ + name: x, + icon: offers[y].icon + }) + + } + } + } + + this.filterOffers(this.categories[0]); + } + } + groupBy(xs, key) { + return xs.reduce((rv, x) => { + + (rv[x[key.trim()]] = rv[x[key]] || []).push(x); + return rv + }, {}); + }; + filterOffers(key) { + this.activeKey = key; + this.activeClass = key.name; + this.offersData = this.categoriesObj[key.name]; + this.tempSearch = JSON.parse(JSON.stringify(this.offersData)); + } + checkDate(date) { + return new Date(date) >= new Date() + } + getDotted(temp) { + return temp.substring(0, 60) + " ..."; + } + search(t) { + this.offersData = this.tempSearch.filter((post, index) => { + if (post.Title.toLowerCase().indexOf(t.toLowerCase()) > -1) + return true; + }); + + } + applyFilters() { + this.cs.sharedService.setSharedData(this.activeKey, OfferDiscountService.selected_filters); + this.cs.back(); + } +} diff --git a/Mohem/src/app/offersdiscount/home/home.component.html b/Mohem/src/app/offersdiscount/home/home.component.html index 19c5b20b..c73ad025 100644 --- a/Mohem/src/app/offersdiscount/home/home.component.html +++ b/Mohem/src/app/offersdiscount/home/home.component.html @@ -25,8 +25,8 @@

{{ts.trPK('itemforsale','browse-categories')}}

- - + + @@ -70,7 +70,7 @@

{{ts.trPK('general','expired')}}

- + diff --git a/Mohem/src/app/offersdiscount/home/home.component.scss b/Mohem/src/app/offersdiscount/home/home.component.scss index 32f41606..fe0564ea 100644 --- a/Mohem/src/app/offersdiscount/home/home.component.scss +++ b/Mohem/src/app/offersdiscount/home/home.component.scss @@ -20,44 +20,44 @@ .SearchtextBox{ margin: 10px; - border-radius: 20px; + --border-radius: 25px; } .filterText{ margin: 5px 15px 5px; - font-size: 18px; + font-size: 16px; font-weight: bold; } .container-icon{ - padding: 0 10px 0px; - position: relative; - white-space:nowrap; - overflow-x:auto; + padding: 0 10px 10px; + position: relative; + white-space: nowrap; + overflow-x: auto; } .box-icon{ width:90px; - height: 90px; + // height: 90px; margin: 0px; display: inline-block; } .sale-icon{ box-shadow: 1px 1px 5px 1px #cccc; - padding: 0px; - margin: 3px; - border-radius: 8px; + padding: 5px; + margin: 5px; + border-radius: 10px; background: #fff; - position: relative; } .sale-icon ion-icon{ font-size: 25px; } .sale-icon p{ - margin-top: 5px; + margin-top: 0px; margin-bottom: 5px; text-transform: capitalize; font-size: 17px; - text-align: center; + font-size: 14px; + text-align: left; } .bottom-icon{ text-overflow: clip; @@ -66,39 +66,26 @@ padding:1px; font-weight: bold; } -ion-card{ - margin:5px; -} ion-card-header{ background: #fff; } - ion-card-header img{ margin: 15px auto; - height: 85px; -} -.dark{ - display: block; - margin: 2px; - font-size: 15px; - font-weight: bold; + border-radius: 6px; + height: 150px; } ion-card-title{ font-weight: bold; font-size: 18px; -} -ion-card-content{ padding: 5px; } .orange{ color: orange; } -.red{ - color:rgb(172, 9, 9) -} .green{ - color:#00AE4D; + color:#1FA169; + font-weight: bold; } ion-segment-button ion-label{ padding: 0; @@ -139,10 +126,10 @@ margin: 5px; .active .top::before{ position: absolute; right: 0px; - top: -3px; + top: 2px; padding: 0px; background: #3cc353; - padding:2px 3px 4px 3px; + padding: 2px 3px 4px 3px; border-radius: 60%; font-size: 10px; color: #fff; @@ -151,12 +138,42 @@ margin: 5px; height: 12px; text-align: center; } + ion-content{ --background:#F5F5F5 ; } .top{ - text-align: center; + text-align: left; + position: relative; } .top img{ - height:40px + + height: 35px; + margin: 5px 5px 0px 5px; +} +.filter{ + position: absolute; + right: 20px; +} +ion-card-content{ + padding: 0 15px 0px 15px; +} +ion-card{ + margin: 0px; + --background: #fff; + --border-radius: 53px; + border-radius: 10px; +} +.red{ + color: #de1717; + font-weight: bold; + margin-left: -5px; +} +.arrow-icon{ + margin-top: 0px; + font-size: 25px; + color: #0298df; +} +ion-card-content strong{ + font-size: 14px; } \ No newline at end of file diff --git a/Mohem/src/app/offersdiscount/home/home.component.ts b/Mohem/src/app/offersdiscount/home/home.component.ts index f4e783b0..511a7e32 100644 --- a/Mohem/src/app/offersdiscount/home/home.component.ts +++ b/Mohem/src/app/offersdiscount/home/home.component.ts @@ -1,7 +1,10 @@ import { AfterViewInit, Component, OnInit } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { ModalController } from '@ionic/angular'; import { connectableObservableDescriptor } from 'rxjs/internal/observable/ConnectableObservable'; import { CommonService } from 'src/app/hmg-common/services/common/common.service'; import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service'; +import { FilterComponent } from '../filter/filter.component'; import { OfferDiscountService } from '../services/service'; @Component({ @@ -17,14 +20,25 @@ export class HomeComponent implements AfterViewInit { activeClass: any; tempSearch: any = []; searchText: String; - constructor(public ts: TranslatorService, public cs: CommonService, public offersService: OfferDiscountService) { } + constructor(public ts: TranslatorService, public modalController: ModalController, public cs: CommonService, public offersService: OfferDiscountService, public route: ActivatedRoute) { + + this.route + .params.subscribe(val => { + setTimeout(() => { + this.ionEnter(); + }, 100); + }); + } ngAfterViewInit(): void { - this.getOfferDiscount(); } - - + ionEnter() { + let activeClass = this.cs.sharedService.getSharedData(OfferDiscountService.selected_filters); + if (activeClass) { + this.filterOffers(activeClass); + } + } openDetails(offer) { this.cs.sharedService.setSharedData(offer, OfferDiscountService.selected_offers); @@ -93,4 +107,13 @@ export class HomeComponent implements AfterViewInit { }); } + async openModel() { + // const modal = await this.modalController.create({ + // component: FilterComponent, + + // }); + // modal.cssClass = "filter-modal" + // modal.present(); + this.cs.navigateForward('/offersdiscount/filter-page'); + } } diff --git a/Mohem/src/app/offersdiscount/offer-details/offer-details.component.html b/Mohem/src/app/offersdiscount/offer-details/offer-details.component.html index dc01ea38..29e80cec 100644 --- a/Mohem/src/app/offersdiscount/offer-details/offer-details.component.html +++ b/Mohem/src/app/offersdiscount/offer-details/offer-details.component.html @@ -35,7 +35,16 @@ -

{{details.Discount}} {{ts.trPK('general','discount')}}

+ + +

{{details.Discount}} {{ts.trPK('general','discount')}}

+
+ +
+ +
+
+
@@ -49,7 +58,7 @@ {{ts.trPK('itemforsale','related-offers')}}

- + @@ -63,6 +72,7 @@ {{item.Discount}} {{ts.trPK('general','discount')}} +

{{ts.trPK('general','offer-valid')}}

@@ -71,7 +81,7 @@

{{ts.trPK('general','expired')}}

- +
diff --git a/Mohem/src/app/offersdiscount/offer-details/offer-details.component.ts b/Mohem/src/app/offersdiscount/offer-details/offer-details.component.ts index 9a708b4e..f6f30011 100644 --- a/Mohem/src/app/offersdiscount/offer-details/offer-details.component.ts +++ b/Mohem/src/app/offersdiscount/offer-details/offer-details.component.ts @@ -12,7 +12,7 @@ export class OfferDetailsComponent implements OnInit { public details: any; public direction: String; public related: any; - constructor(public ts: TranslatorService, public cs: CommonService, public offersService: OfferDiscountService) { } + constructor(public ts: TranslatorService, private socialSharing: SocialSharing, public cs: CommonService, public offersService: OfferDiscountService) { } ngOnInit() { this.direction = TranslatorService.getCurrentDirection(); @@ -26,4 +26,7 @@ export class OfferDetailsComponent implements OnInit { getDotted(temp) { return temp.substring(0, 75) + " ..."; } + share() { + this.socialSharing.share(this.details.Description, this.details.Title, this.details.Banner_Image) + } } diff --git a/Mohem/src/app/offersdiscount/offersdiscount.module.ts b/Mohem/src/app/offersdiscount/offersdiscount.module.ts index b08f0b7b..a39cbfe0 100644 --- a/Mohem/src/app/offersdiscount/offersdiscount.module.ts +++ b/Mohem/src/app/offersdiscount/offersdiscount.module.ts @@ -10,6 +10,7 @@ import { HomeComponent } from './home/home.component'; import { OfferDetailsComponent } from './offer-details/offer-details.component'; import { HmgCommonModule } from '../hmg-common/hmg-common.module'; import { OfferDiscountService } from './services/service'; +import { FilterComponent } from './filter/filter.component'; const routes: Routes = [ @@ -25,6 +26,10 @@ const routes: Routes = [ path: 'offer-details', component: OfferDetailsComponent }, + { + path: 'filter-page', + component: FilterComponent + }, ], } ]; @@ -39,7 +44,8 @@ const routes: Routes = [ HmgCommonModule, RouterModule.forChild(routes) ], - declarations: [OffersdiscountPage, HomeComponent, OfferDetailsComponent], + declarations: [OffersdiscountPage, HomeComponent, OfferDetailsComponent, FilterComponent], + entryComponents: [FilterComponent], providers: [OfferDiscountService] }) export class OffersdiscountPageModule { } diff --git a/Mohem/src/app/offersdiscount/services/service.ts b/Mohem/src/app/offersdiscount/services/service.ts index 92f32d93..0ce7c037 100644 --- a/Mohem/src/app/offersdiscount/services/service.ts +++ b/Mohem/src/app/offersdiscount/services/service.ts @@ -11,6 +11,7 @@ export class OfferDiscountService { public static getSuborinateStatus = 'Services/ERP.svc/REST/GET_SUBORDINATES_ATTD_STATUS'; public static selected_offers = 'selected-offers'; public static related_offers = 'related-offers'; + public static selected_filters = 'selected-filters'; constructor( public con: ConnectorService, private authService: AuthenticationService, diff --git a/Mohem/src/assets/imgs/itemsforsale/electronic appliances.svg b/Mohem/src/assets/imgs/itemsforsale/electronic_appliances.svg similarity index 100% rename from Mohem/src/assets/imgs/itemsforsale/electronic appliances.svg rename to Mohem/src/assets/imgs/itemsforsale/electronic_appliances.svg diff --git a/Mohem/src/assets/localization/i18n.json b/Mohem/src/assets/localization/i18n.json index 3d16b82d..1aaf29e0 100644 --- a/Mohem/src/assets/localization/i18n.json +++ b/Mohem/src/assets/localization/i18n.json @@ -225,6 +225,14 @@ "en": "Offers & Discount", "ar": "العروض والخصومات" }, + "filter-offers": { + "en": "Filter Offers & Discounts", + "ar": "تصفية العروض والخصومات" + }, + "apply-filters": { + "en": "Apply Filters", + "ar": "تطبيق المرشحات" + }, "discount": { "en": "Discount", "ar": "خصم" diff --git a/Mohem/src/theme/styles.scss b/Mohem/src/theme/styles.scss index 54ccb3c6..41164060 100644 --- a/Mohem/src/theme/styles.scss +++ b/Mohem/src/theme/styles.scss @@ -1586,3 +1586,6 @@ ion-segment-button { width: 75%; margin: auto; } + .filter-modal .modal-wrapper{ + border-radius: 0px !important; + } \ No newline at end of file