Skip to content
This repository was archived by the owner on Oct 7, 2024. It is now read-only.

Commit d23a98b

Browse files
paulmojicatechpaulmojicatech
committed
add standalone for list
1 parent 2371114 commit d23a98b

13 files changed

+497
-0
lines changed

‎packages/ionic-angular/src/generators/application/files/list-standalone/src/app/app.component.ts.template‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import {Component} from '@angular/core';
2+
import {CommonModule} from '@angular/common';
3+
import {IonicModule} from '@ionic/angular';
4+
5+
@Component({
6+
selector: '<%= prefix %>-root',
7+
standalone: true,
8+
imports: [CommonModule, IonicModule],
9+
template: `
10+
<ion-app>
11+
<ion-router-outlet></ion-router-outlet>
12+
</ion-app>
13+
`,
14+
styles: `
15+
`
16+
})
17+
export class AppComponent {
18+
}

‎packages/ionic-angular/src/generators/application/files/list-standalone/src/app/app.config.ts.template‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { ApplicationConfig, importProvidersFrom } from '@angular/core';
2+
import { provideRouter } from '@angular/router';
3+
import { appRoutes } from './app.routes';
4+
import {IonicModule} from '@ionic/angular';
5+
6+
export const appConfig: ApplicationConfig = {
7+
providers: [
8+
provideRouter(appRoutes),
9+
importProvidersFrom(
10+
IonicModule.forRoot()
11+
)
12+
13+
],
14+
};

‎packages/ionic-angular/src/generators/application/files/list-standalone/src/app/app.routes.ts.template‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import {Routes} from '@angular/router';
2+
3+
export const appRoutes: Routes = [
4+
{
5+
path: 'home',
6+
loadChildren: () => import('./home/home.routes').then( r => r.routes)
7+
},
8+
{
9+
path: 'message/:id',
10+
loadChildren: () => import('./view-message/view-message.routes').then( r => r.routes)
11+
},
12+
{
13+
path: '',
14+
redirectTo: 'home',
15+
pathMatch: 'full'
16+
},
17+
];
18+

‎packages/ionic-angular/src/generators/application/files/list-standalone/src/app/home/home.page.ts.template‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { Component, inject } from '@angular/core';
2+
import {CommonModule} from '@angular/common';
3+
import { RefresherCustomEvent, IonicModule } from '@ionic/angular';
4+
import { DataService, Message } from '../services/data.service';
5+
import {MessageComponent} from '../message/message.component';
6+
7+
@Component({
8+
selector: '<%= prefix %>-home',
9+
standalone: true,
10+
imports: [CommonModule, IonicModule, MessageComponent],
11+
template: `
12+
<ion-header [translucent]="true">
13+
<ion-toolbar>
14+
<ion-title>
15+
Inbox
16+
</ion-title>
17+
</ion-toolbar>
18+
</ion-header>
19+
20+
<ion-content [fullscreen]="true">
21+
<ion-refresher slot="fixed" (ionRefresh)="refresh($event)">
22+
<ion-refresher-content></ion-refresher-content>
23+
</ion-refresher>
24+
25+
<ion-header collapse="condense">
26+
<ion-toolbar>
27+
<ion-title size="large">
28+
Inbox
29+
</ion-title>
30+
</ion-toolbar>
31+
</ion-header>
32+
33+
<ion-list>
34+
<<%= prefix %>-message *ngFor="let message of getMessages()" [message]="message"></<%= prefix %>-message>
35+
</ion-list>
36+
</ion-content>
37+
`,
38+
styles: `
39+
`
40+
})
41+
export class HomePage {
42+
private data = inject(DataService);
43+
constructor() {}
44+
45+
refresh(ev: any) {
46+
setTimeout(() => {
47+
(ev as RefresherCustomEvent).detail.complete();
48+
}, 3000);
49+
}
50+
51+
getMessages(): Message[] {
52+
return this.data.getMessages();
53+
}
54+
}

‎packages/ionic-angular/src/generators/application/files/list-standalone/src/app/home/home.routes.ts.template‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import {Routes} from '@angular/router';
2+
3+
export const routes: Routes = [
4+
{
5+
path: '',
6+
loadComponent: () => import('./home.page').then(p => p.HomePage)
7+
}
8+
];

‎packages/ionic-angular/src/generators/application/files/list-standalone/src/app/home/home.spec.ts.template‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
import { RouterModule } from '@angular/router';
3+
import { IonicModule } from '@ionic/angular';
4+
5+
import { MessageComponentModule } from '../message/message.module';
6+
7+
import { HomePage } from './home.page';
8+
9+
describe('HomePage', () => {
10+
let component: HomePage;
11+
let fixture: ComponentFixture<HomePage>;
12+
13+
beforeEach(async () => {
14+
await TestBed.configureTestingModule({
15+
declarations: [HomePage],
16+
imports: [IonicModule.forRoot(), MessageComponentModule, RouterModule.forRoot([])]
17+
}).compileComponents();
18+
19+
fixture = TestBed.createComponent(HomePage);
20+
component = fixture.componentInstance;
21+
fixture.detectChanges();
22+
});
23+
24+
it('should create', () => {
25+
expect(component).toBeTruthy();
26+
});
27+
});

‎packages/ionic-angular/src/generators/application/files/list-standalone/src/app/message/message.component.spec.ts.template‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
import { RouterModule } from '@angular/router';
3+
import { IonicModule } from '@ionic/angular';
4+
5+
import { MessageComponent } from './message.component';
6+
7+
describe('MessageComponent', () => {
8+
let component: MessageComponent;
9+
let fixture: ComponentFixture<MessageComponent>;
10+
11+
beforeEach(async () => {
12+
await TestBed.configureTestingModule({
13+
declarations: [MessageComponent],
14+
imports: [IonicModule.forRoot(), RouterModule.forRoot([])]
15+
}).compileComponents();
16+
17+
fixture = TestBed.createComponent(MessageComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎packages/ionic-angular/src/generators/application/files/list-standalone/src/app/message/message.component.ts.template‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import { ChangeDetectionStrategy, Component, inject, Input } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import {RouterModule} from '@angular/router';
4+
import { Platform, IonicModule } from '@ionic/angular';
5+
import { Message } from '../services/data.service';
6+
7+
@Component({
8+
selector: '<%= prefix %>-message',
9+
standalone: true,
10+
imports: [CommonModule, IonicModule, RouterModule],
11+
template: `
12+
<ion-item *ngIf="message" [routerLink]="'/message/' + message.id" [detail]="false">
13+
<div slot="start" [class]="!message.read ? 'dot dot-unread' : 'dot'"></div>
14+
<ion-label class="ion-text-wrap">
15+
<h2>
16+
{{ message.fromName }}
17+
<span class="date">
18+
<ion-note>{{ message.date }}</ion-note>
19+
<ion-icon aria-hidden="true" name="chevron-forward" size="small" *ngIf="isIos()"></ion-icon>
20+
</span>
21+
</h2>
22+
<h3>{{ message.subject }}</h3>
23+
<p>
24+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
25+
</p>
26+
</ion-label>
27+
</ion-item>
28+
`,
29+
styles: `
30+
ion-item {
31+
--padding-start: 0;
32+
--inner-padding-end: 0;
33+
}
34+
35+
ion-label {
36+
margin-top: 12px;
37+
margin-bottom: 12px;
38+
}
39+
40+
ion-item h2 {
41+
font-weight: 600;
42+
margin: 0;
43+
}
44+
45+
ion-item p {
46+
text-overflow: ellipsis;
47+
overflow: hidden;
48+
white-space: nowrap;
49+
width: 95%;
50+
}
51+
52+
ion-item .date {
53+
float: right;
54+
align-items: center;
55+
display: flex;
56+
}
57+
58+
ion-item ion-icon {
59+
color: #c9c9ca;
60+
}
61+
62+
ion-item ion-note {
63+
font-size: 15px;
64+
margin-right: 8px;
65+
font-weight: normal;
66+
}
67+
68+
ion-item ion-note.md {
69+
margin-right: 14px;
70+
}
71+
72+
.dot {
73+
display: block;
74+
height: 12px;
75+
width: 12px;
76+
border-radius: 50%;
77+
align-self: start;
78+
margin: 16px 10px 16px 16px;
79+
}
80+
81+
.dot-unread {
82+
background: var(--ion-color-primary);
83+
}
84+
85+
ion-footer ion-title {
86+
font-size: 11px;
87+
font-weight: normal;
88+
}
89+
`,
90+
changeDetection: ChangeDetectionStrategy.OnPush
91+
})
92+
export class MessageComponent {
93+
private platform = inject(Platform);
94+
@Input() message?: Message;
95+
isIos() {
96+
return this.platform.is('ios')
97+
}
98+
}

‎packages/ionic-angular/src/generators/application/files/list-standalone/src/app/services/data.service.spec.ts.template‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { TestBed } from '@angular/core/testing';
2+
3+
import { DataService } from './data.service';
4+
5+
describe('DataService', () => {
6+
beforeEach(() => TestBed.configureTestingModule({}));
7+
8+
it('should be created', () => {
9+
const service: DataService = TestBed.get(DataService);
10+
expect(service).toBeTruthy();
11+
});
12+
});

‎packages/ionic-angular/src/generators/application/files/list-standalone/src/app/services/data.service.ts.template‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { Injectable } from '@angular/core';
2+
3+
export interface Message {
4+
fromName: string;
5+
subject: string;
6+
date: string;
7+
id: number;
8+
read: boolean;
9+
}
10+
11+
@Injectable({
12+
providedIn: 'root'
13+
})
14+
export class DataService {
15+
public messages: Message[] = [
16+
{
17+
fromName: 'Matt Chorsey',
18+
subject: 'New event: Trip to Vegas',
19+
date: '9:32 AM',
20+
id: 0,
21+
read: false
22+
},
23+
{
24+
fromName: 'Lauren Ruthford',
25+
subject: 'Long time no chat',
26+
date: '6:12 AM',
27+
id: 1,
28+
read: false
29+
},
30+
{
31+
fromName: 'Jordan Firth',
32+
subject: 'Report Results',
33+
date: '4:55 AM',
34+
id: 2,
35+
read: false
36+
},
37+
{
38+
fromName: 'Bill Thomas',
39+
subject: 'The situation',
40+
date: 'Yesterday',
41+
id: 3,
42+
read: false
43+
},
44+
{
45+
fromName: 'Joanne Pollan',
46+
subject: 'Updated invitation: Swim lessons',
47+
date: 'Yesterday',
48+
id: 4,
49+
read: false
50+
},
51+
{
52+
fromName: 'Andrea Cornerston',
53+
subject: 'Last minute ask',
54+
date: 'Yesterday',
55+
id: 5,
56+
read: false
57+
},
58+
{
59+
fromName: 'Moe Chamont',
60+
subject: 'Family Calendar - Version 1',
61+
date: 'Last Week',
62+
id: 6,
63+
read: false
64+
},
65+
{
66+
fromName: 'Kelly Richardson',
67+
subject: 'Placeholder Headhots',
68+
date: 'Last Week',
69+
id: 7,
70+
read: false
71+
}
72+
];
73+
74+
constructor() { }
75+
76+
public getMessages(): Message[] {
77+
return this.messages;
78+
}
79+
80+
public getMessageById(id: number): Message {
81+
return this.messages[id];
82+
}
83+
}

0 commit comments

Comments
 (0)