From 32454c0ac3ce47a935ca7b6a3fdceca37f190a72 Mon Sep 17 00:00:00 2001 From: prahalad Date: Tue, 19 Oct 2021 20:07:58 +0530 Subject: [PATCH] Impleted FAQs with Api call --- src/app/faq/faq.component.html | 26 +++- src/app/faq/faq.component.scss | 88 ++++++++++++++ src/app/faq/faq.component.ts | 163 +++++++++++++++++++++++++- src/app/profile/profile.module.ts | 3 +- src/app/profile/profile.page.html | 5 +- src/app/profile/profile.page.scss | 2 +- src/app/services/help.service.spec.ts | 12 ++ src/app/services/help.service.ts | 26 ++++ 8 files changed, 313 insertions(+), 12 deletions(-) create mode 100644 src/app/services/help.service.spec.ts create mode 100644 src/app/services/help.service.ts diff --git a/src/app/faq/faq.component.html b/src/app/faq/faq.component.html index f478074..77cd3b4 100644 --- a/src/app/faq/faq.component.html +++ b/src/app/faq/faq.component.html @@ -1,3 +1,23 @@ -

- faq works! -

+
+
FAQs
+
+ +
+
  • +
    +

    {{mockFaq.title}}

    + +
    +
    +

    {{question.sub_question}}

    +
    Subheader
    +

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similique + eaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias + quidem + corrupti tenetur facilis temporibus error.

    +
    +
    • +
    \ No newline at end of file diff --git a/src/app/faq/faq.component.scss b/src/app/faq/faq.component.scss index e69de29..c41cd90 100644 --- a/src/app/faq/faq.component.scss +++ b/src/app/faq/faq.component.scss @@ -0,0 +1,88 @@ +.heading-holder { + background-color: #efefef; + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 5%; + + .name { + color: var(--brand-dark-grey); + font-size: 12px; + font-weight: 500; + letter-spacing: 0.5px; + } + + ion-button { + margin: 0; + --color: var(--brand-blue); + font-size: 12px; + --padding-end: 0; + } +} + + +.faq-container{ + li{ + list-style: none; + width: 90%; + border-radius: 10px; + background-color: white; + box-shadow: 0px 0px 10px #c7c4c4; + color: var(--brand-dark-grey); + line-height: 1.6; + border-bottom: 1px solid lightgrey; + margin: 20px auto; + padding: 0 20px; + max-height: 50vh; + overflow: auto; + + &.active { + .subquestions { + display: block; + } + } + + .upfold{ + display: flex; + justify-content: space-between; + align-items: center; + height: 50px; + position: sticky; + top: 0; + background-color: white; + + h3{ + font-size: 18px; + font-weight: 600; + } + ion-icon { + font-size: 20px; + } + } + + .subquestions{ + display: none; + padding: 10px 0; + + div{ + margin: 10px auto; + } + + h3{ + font-size: 18px; + font-weight: 600; + } + h5{ + font-size: 16px; + font-weight: 600; + padding: 5px 0; + color: var(--brand-grey); + } + p{ + font-size: 12px; + text-align: justify; + color: var(--brand-grey); + } + } + } +} \ No newline at end of file diff --git a/src/app/faq/faq.component.ts b/src/app/faq/faq.component.ts index 4f885d5..ae60559 100644 --- a/src/app/faq/faq.component.ts +++ b/src/app/faq/faq.component.ts @@ -1,14 +1,167 @@ import { Component, OnInit } from '@angular/core'; +import { HelpService } from '../services/help.service'; +import { LoadingController } from '@ionic/angular'; +import { AlertController } from '@ionic/angular'; +import { ToastService } from '../services/toast.service'; + @Component({ - selector: 'app-faq', - templateUrl: './faq.component.html', - styleUrls: ['./faq.component.scss'], + selector: 'app-faq', + templateUrl: './faq.component.html', + styleUrls: ['./faq.component.scss'], }) export class FaqComponent implements OnInit { - constructor() { } + allFaqs: any = []; + loader: any; + selectedQuestions: number = 0; + + mockFaqs = [ + { + title: "What are the return guidelines?", + questions: [ + { + sub_question: "Questions1", + subHeader: "Headers", + subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error', + }, { + sub_question: "Questions2", + subHeader: "Headers", + subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error', + }, { + sub_question: "Questions3", + subHeader: "Headers", + subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error', + }, { + sub_question: "Questions4", + subHeader: "Headers", + subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error', + }, { + sub_question: "Questions5", + subHeader: "Headers", + subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error', + }, + ] + },{ + title: "How can I return a Gift?", + questions: [ + { + sub_question: "Questions1", + subHeader: "Headers", + subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error', + }, { + sub_question: "Questions2", + subHeader: "Headers", + subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error', + }, { + sub_question: "Questions3", + subHeader: "Headers", + subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error', + }, { + sub_question: "Questions4", + subHeader: "Headers", + subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error', + }, { + sub_question: "Questions5", + subHeader: "Headers", + subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error', + }, + ] + },{ + title: "Title 1", + questions: [ + { + sub_question: "Questions1", + subHeader: "Headers", + subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error', + }, { + sub_question: "Questions2", + subHeader: "Headers", + subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error', + }, { + sub_question: "Questions3", + subHeader: "Headers", + subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error', + }, { + sub_question: "Questions4", + subHeader: "Headers", + subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error', + }, { + sub_question: "Questions5", + subHeader: "Headers", + subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error', + }, + ] + },{ + title: "Title 1", + questions: [ + { + sub_question: "Questions1", + subHeader: "Headers", + subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error', + }, { + sub_question: "Questions2", + subHeader: "Headers", + subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error', + }, { + sub_question: "Questions3", + subHeader: "Headers", + subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error', + }, { + sub_question: "Questions4", + subHeader: "Headers", + subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error', + }, { + sub_question: "Questions5", + subHeader: "Headers", + subAnswer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias similiqueeaque tempore consequuntur, voluptatum quisquam saepe dolore officiis expedita a aut eius alias quidem corrupti tenetur facilis temporibus error', + }, + ] + }, + ] + + + constructor( + private helpService: HelpService, + public loadingController: LoadingController, + public alertController: AlertController, + private toastService: ToastService, + + + + ) { } + + ngOnInit() { } + + async presentLoading() { + this.loader = await this.loadingController.create({ + message: 'Please wait...', + spinner: 'dots', + mode: 'ios' + }); + await this.loader.present(); + } + + async presentAlert(message: string) { + const alert = await this.alertController.create({ + message: message, + mode: 'ios', + buttons: ['OK'] + }); + + await alert.present(); + } + - ngOnInit() {} + getAllfaqs() { + this.helpService.allFaqs().then((response) => { + this.allFaqs = response; + this.loader ? this.loader.dismiss() : null; + console.log(this.allFaqs) + }, (error) => { + this.loader ? this.loader.dismiss() : null + console.log(error); + }); + } } diff --git a/src/app/profile/profile.module.ts b/src/app/profile/profile.module.ts index 2b53949..f6b6d09 100644 --- a/src/app/profile/profile.module.ts +++ b/src/app/profile/profile.module.ts @@ -10,6 +10,7 @@ import { ProfilePage } from './profile.page'; import { OrdersComponent } from '../orders/orders.component'; import { NotificationsComponent } from '../notifications/notifications.component'; import { ReferComponent } from '../refer/refer.component'; +import { FaqComponent } from '../faq/faq.component'; const routes: Routes = [ { @@ -25,6 +26,6 @@ const routes: Routes = [ IonicModule, RouterModule.forChild(routes) ], - declarations: [ProfilePage, OrdersComponent, NotificationsComponent, ReferComponent] + declarations: [ProfilePage, OrdersComponent, NotificationsComponent, ReferComponent, FaqComponent] }) export class ProfilePageModule {} diff --git a/src/app/profile/profile.page.html b/src/app/profile/profile.page.html index 5060c37..68dbe04 100644 --- a/src/app/profile/profile.page.html +++ b/src/app/profile/profile.page.html @@ -51,8 +51,8 @@ NOTIFICATION -
    +
    @@ -69,5 +69,6 @@ + diff --git a/src/app/profile/profile.page.scss b/src/app/profile/profile.page.scss index 9947784..e38a70d 100644 --- a/src/app/profile/profile.page.scss +++ b/src/app/profile/profile.page.scss @@ -99,7 +99,7 @@ overflow: auto; .tab { - width: 90px; + width: 25%; &.active { figure { diff --git a/src/app/services/help.service.spec.ts b/src/app/services/help.service.spec.ts new file mode 100644 index 0000000..5e16d1e --- /dev/null +++ b/src/app/services/help.service.spec.ts @@ -0,0 +1,12 @@ +import { TestBed } from '@angular/core/testing'; + +import { HelpService } from './help.service'; + +describe('HelpService', () => { + beforeEach(() => TestBed.configureTestingModule({})); + + it('should be created', () => { + const service: HelpService = TestBed.get(HelpService); + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/help.service.ts b/src/app/services/help.service.ts new file mode 100644 index 0000000..15c9064 --- /dev/null +++ b/src/app/services/help.service.ts @@ -0,0 +1,26 @@ +import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { URL } from '../mocks/url'; + + +@Injectable({ + providedIn: 'root' +}) +export class HelpService { + + constructor( + private http: HttpClient + ) { } + + async allFaqs(){ + const httpOptions={ + headers: new HttpHeaders({ + 'Access-Control-Allow-Origin': '*', + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + localStorage.access_Token + }) + }; + + return await this.http.get(URL + '/api/maioraservice/faq/getall/', httpOptions).toPromise() + } +}