Skip to content

Commit bc8fdf6

Browse files
5Amogh5Amogh
authored
Merge pull request ELEVATE-Project#3 from syedameenabrar/release-1.0.0
Project list api integration in listing page
2 parents cf9ede2 + caa9c70 commit bc8fdf6

13 files changed

+217
-235
lines changed

‎src/app/app.module.ts

+7-1
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@ import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
66

77
import { AppRoutingModule } from './app-routing.module';
88
import { AppComponent } from './app.component';
9-
import { HttpClient, HttpClientModule } from '@angular/common/http';
9+
import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule } from '@angular/common/http';
1010
import { LIBRARY_CONFIG, SlAuthLibModule } from 'authentication_frontend_library';
11+
import { ApiInterceptor } from './services/interceptor/api.interceptor';
1112
@NgModule({
1213
declarations: [AppComponent],
1314
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule,
@@ -18,6 +19,11 @@ import { LIBRARY_CONFIG, SlAuthLibModule } from 'authentication_frontend_library
1819
provide: LIBRARY_CONFIG,
1920
useFactory: configFactory,
2021
deps: [HttpClient]
22+
},
23+
{
24+
provide: HTTP_INTERCEPTORS,
25+
useClass: ApiInterceptor,
26+
multi: true
2127
}
2228
],
2329
bootstrap: [AppComponent],

‎src/app/config/url.config.json

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
{
22
"survey": {
3-
"listingUrl": "project/v1/solutions/list"
3+
"listingUrl": "/project/v1/solutions/list"
44
},
55
"observation": {
6-
"listingUrl": "project/v1/solutions/list"
6+
"listingUrl": "/project/v1/solutions/list"
77
},
88
"project": {
9-
"listingUrl": "project/v1/solutions/list"
9+
"listingUrl": "/project/v1/userProjects/list"
10+
},
11+
"homeListing": {
12+
"listingUrl": "/project/v1/forms/read"
1013
}
1114
}

‎src/app/home/home.page.html

+10-69
Original file line numberDiff line numberDiff line change
@@ -4,90 +4,31 @@
44
</ion-toolbar>
55
</ion-header>
66

7-
<ion-content [fullscreen]="true" color="light">
8-
<ng-container *ngFor="let item of jsonData">
9-
<ng-container *ngTemplateOutlet="typeTemplateMapping[item.type]"></ng-container>
7+
<ion-content [fullscreen]="true">
8+
<ng-container *ngFor="let listData of listResData">
9+
<ng-container *ngTemplateOutlet="typeTemplateMapping[listData?.type]"></ng-container>
1010
</ng-container>
11-
<ng-template #bannerTemplate>
12-
<ion-list lines="none">
13-
<div>
14-
<swiper-container>
15-
@for (item of jsonData; track item.id) {
16-
@if (item?.type == 'banner'){
17-
@for (data of item?.data; track data.id) {
18-
<swiper-slide>
19-
<ion-card class="banner">
20-
<ion-card-content>
21-
<h1>{{data?.title}}</h1>
22-
</ion-card-content>
23-
</ion-card>
24-
</swiper-slide>
25-
}}
26-
}
27-
</swiper-container>
28-
</div>
29-
</ion-list>
30-
</ng-template>
3111

32-
<ng-template #productTemplate>
12+
<ng-template #solutionTemplate>
3313
<ion-list>
34-
<ion-item>
14+
<ion-item lines="none">
3515
<ion-grid>
3616
<ion-row>
37-
@for (item of jsonData; track item.id) {
38-
@if (item?.type == 'solutionList'){
39-
@for (data of item?.data; track data.id) {
40-
<ion-col size="6" size-md="3" [routerLink]="data?.redirectionUrl">
17+
@for (listData of listResData; track listData.id) {
18+
@if (listData?.type == 'solutionList'){
19+
<ion-col size="6" size-md="3" (click)="navigateTo(listData?.listingData)">
4120
<ion-card class="tiels">
4221
<ion-card-content>
43-
<img [src]="data?.img" alt="">
44-
<h1 style="color:black">{{data?.name}}</h1>
22+
<img [src]="listData?.listingData?.img" alt="">
23+
<h1 style="color:black">{{listData?.listingData?.name}}</h1>
4524
</ion-card-content>
4625
</ion-card>
4726
</ion-col>
4827
}
4928
}
50-
}
5129
</ion-row>
5230
</ion-grid>
5331
</ion-item>
5432
</ion-list>
5533
</ng-template>
56-
57-
<!-- <ng-template #recommendationTemplate>
58-
<ion-list lines="none" class="ion-margin-bottom recentJobs">
59-
@for (item of jsonData; track item.id) {
60-
@if (item?.type == 'Recomendation'){
61-
<ion-list-header class="ion-margin-bottom">
62-
<ion-label>
63-
{{item?.type}}
64-
</ion-label>
65-
<ion-button fill="clear" size="small" color="medium">
66-
<ion-text>
67-
Show all
68-
</ion-text>
69-
</ion-button>
70-
</ion-list-header>
71-
@for (data of item?.data; track data.id) {
72-
<ion-item class="ion-margin-bottom" [routerLink]="['/', 'tabs', 'job', data.id]">
73-
<ion-thumbnail slot="start">
74-
<img [src]="'assets/imgs/' + data?.logo_light">
75-
</ion-thumbnail>
76-
<ion-label class="recent">
77-
{{data?.name}}
78-
<p>
79-
{{data?.company}}
80-
<span class="dot"></span>
81-
{{data?.type}}
82-
</p>
83-
</ion-label>
84-
<ion-text slot="end" color="dark">
85-
{{data?.status}}
86-
</ion-text>
87-
</ion-item>
88-
}
89-
}
90-
}
91-
</ion-list>
92-
</ng-template> -->
9334
</ion-content>

‎src/app/home/home.page.ts

+62-12
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
1-
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
1+
import { Component, OnInit, TemplateRef, ViewChild, inject } from '@angular/core';
22
import { IonicSlides } from '@ionic/angular';
33
import { register } from 'swiper/element/bundle';
44
import { HttpClient } from '@angular/common/http';
5+
import { LoaderService } from '../services/loader/loader.service';
6+
import { ApiBaseService } from '../services/base-api/api-base.service';
7+
import urlConfig from 'src/app/config/url.config.json';
8+
import { ToastService } from '../services/toast/toast.service';
9+
import { Router } from '@angular/router';
10+
import { finalize } from 'rxjs';
511
register();
612
@Component({
713
selector: 'app-home',
@@ -10,23 +16,67 @@ register();
1016
})
1117
export class HomePage implements OnInit {
1218
swiperModules = [IonicSlides];
13-
jsonData:any;
19+
jsonData: any;
20+
baseApiService: any;
21+
toastService: any;
22+
loader: LoaderService;
23+
listResData: any = [];
1424
typeTemplateMapping: { [key: string]: TemplateRef<any> } = {};
1525
@ViewChild('bannerTemplate') bannerTemplate!: TemplateRef<any>;
16-
@ViewChild('productTemplate') productTemplate!: TemplateRef<any>;
26+
@ViewChild('solutionTemplate') solutionTemplate!: TemplateRef<any>;
1727
@ViewChild('recommendationTemplate') recommendationTemplate!: TemplateRef<any>;
1828

19-
constructor(private http: HttpClient) {
29+
constructor(private http: HttpClient, private router: Router) {
30+
this.baseApiService = inject(ApiBaseService);
31+
this.loader = inject(LoaderService)
32+
this.toastService = inject(ToastService)
2033
}
2134

2235
ngOnInit() {
23-
this.http.get<any>('assets/listingData.json').subscribe(data => {
24-
this.jsonData = data;
25-
this.typeTemplateMapping = {
26-
"banner": this.bannerTemplate,
27-
"solutionList": this.productTemplate,
28-
"Recomendation": this.recommendationTemplate
29-
};
30-
});
36+
this.getHomeListing();
37+
}
38+
39+
getHomeListing() {
40+
this.loader.showLoading("Please wait while loading...");
41+
this.baseApiService
42+
.post(
43+
urlConfig['homeListing'].listingUrl)
44+
.pipe(
45+
finalize(() => {
46+
this.loader.dismissLoading();
47+
})
48+
)
49+
.subscribe((res: any) => {
50+
if (res?.message == 'Forms version fetched successfully') {
51+
const formData = res?.result;
52+
const homeListData = formData.find((item: any) => item.type === "home");
53+
54+
this.baseApiService
55+
.post(
56+
urlConfig['homeListing'].listingUrl + `/${homeListData?._id}`)
57+
.subscribe((res: any) => {
58+
if (res?.result) {
59+
this.listResData = res?.result?.data;
60+
}
61+
this.typeTemplateMapping = {
62+
"bannerList": this.bannerTemplate,
63+
"solutionList": this.solutionTemplate,
64+
"recomendationList": this.recommendationTemplate
65+
};
66+
},
67+
(err: any) => {
68+
this.toastService.presentToast(err?.error?.message);
69+
}
70+
);
71+
}
72+
},
73+
(err: any) => {
74+
this.toastService.presentToast(err?.error?.message);
75+
}
76+
);
77+
}
78+
79+
navigateTo(data: any) {
80+
this.router.navigate([data?.redirectionUrl], { state: data });
3181
}
3282
}

‎src/app/interfaces/main.interface.ts

+3
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,7 @@ export interface UrlConfig {
88
project: {
99
listingUrl: string;
1010
};
11+
homeListing: {
12+
listingUrl: string;
13+
};
1114
}

‎src/app/listing/listing.page.html

+23-38
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,49 @@
11
<ion-header [translucent]="true">
22
<ion-toolbar>
33
<ion-buttons slot="start">
4-
<ion-back-button defaultHref="/"></ion-back-button>
4+
<ion-back-button defaultHref="/" (click)="goBack()"></ion-back-button>
55
</ion-buttons>
66
</ion-toolbar>
77
</ion-header>
88

9-
109
<ion-content>
1110
<ion-list class="listTitle">
1211
<ion-row class="ion-margin">
1312
<ion-col size="12">
1413
<ion-text color="primary">
15-
<h1>{{listTitle}}</h1>
16-
<p>{{listDescription}}</p>
14+
<h1>{{stateData?.name}}</h1>
15+
<p>{{stateData?.description}}</p>
1716
</ion-text>
1817
</ion-col>
1918
</ion-row>
20-
19+
2120
<ion-row class="srch">
2221
<ion-col size="12">
23-
<ion-searchbar class="srchBar" placeholder="Search your {{listType}} here" [debounce]="1000" (ionInput)="handleInput($event)"></ion-searchbar>
22+
<ion-searchbar class="srchBar" placeholder="Search your {{stateData?.listType}} here" [debounce]="1000"
23+
(ionInput)="handleInput($event)"></ion-searchbar>
2424
</ion-col>
25-
<!-- <ion-col size="2">
26-
<ion-button mode="ios" color="light">
27-
<ion-icon name="options"></ion-icon>
28-
</ion-button>
29-
</ion-col> -->
3025
</ion-row>
31-
</ion-list >
32-
33-
34-
35-
<ion-grid>
36-
<ion-row>
37-
@for (abc of listData; track abc.id) {
38-
@if (abc?.type == 'solutionList'){
39-
@for (job of abc?.data; track job.id) {
40-
<ion-col size="12" size-md="6">
41-
<ion-card class="tiels">
42-
<ion-card-content>
43-
<!-- <img [src]="job?.img" alt=""> -->
44-
<h2><b>{{job?.name}}</b></h2>
45-
<h6>{{job?.description}}</h6>
46-
<p>Expired On {{job?.expired_on}}</p>
47-
</ion-card-content>
48-
</ion-card>
49-
</ion-col>
50-
}
51-
}
52-
}
53-
54-
</ion-row>
55-
</ion-grid>
56-
26+
</ion-list>
27+
28+
<ion-grid>
29+
<ion-row>
30+
@for (item of listData; track item.id) {
31+
<ion-col size="12" size-md="6">
32+
<ion-card class="tiels">
33+
<ion-card-content>
34+
<h2><b>{{item?.title}}</b></h2>
35+
<h6>{{item?.description}}</h6>
36+
</ion-card-content>
37+
</ion-card>
38+
</ion-col>
39+
}
40+
</ion-row>
41+
</ion-grid>
5742
</ion-content>
5843

5944
<ion-footer>
6045
<ion-toolbar>
61-
<ion-button expand="block" fill="solid" shape="round">
46+
<ion-button expand="block" fill="solid" shape="round" (click)="loadData()">
6247
Load More
6348
</ion-button>
6449
</ion-toolbar>

‎src/app/listing/listing.page.scss

+22-21
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,37 @@
1-
2-
31
ion-row.srch {
4-
padding-right: 1.5vh;
5-
align-items: center;
6-
ion-searchbar {
7-
--background: #fff;
8-
--border-radius: 10px;
9-
}
2+
padding-right: 1.5vh;
3+
align-items: center;
4+
5+
ion-searchbar {
6+
--background: #fff;
7+
--border-radius: 10px;
108
}
9+
}
10+
11+
ion-row.tagline {
12+
padding-left: 1.5vh;
1113

12-
ion-row.tagline {
13-
padding-left: 1.5vh;
14-
ion-text {
15-
font-size: 2rem;
16-
font-weight: 800;
17-
}
14+
ion-text {
15+
font-size: 2rem;
16+
font-weight: 800;
17+
}
1818
}
1919

20-
.listTitle{
20+
.listTitle {
2121
background: var(--ion-color-primary);
22-
h1,p{
22+
23+
h1,
24+
p {
2325
color: white;
2426
}
2527
}
2628

27-
h2{
29+
h2 {
2830
color: var(--ion-color-primary);
2931
}
3032

31-
.tiels{
32-
h6{
33+
.tiels {
34+
h6 {
3335
color: #000000;
3436
}
35-
}
36-
37+
}

0 commit comments

Comments
 (0)