diff --git a/dear-diary-angular/package-lock.json b/dear-diary-angular/package-lock.json index 130c0f4..ac54ed3 100644 --- a/dear-diary-angular/package-lock.json +++ b/dear-diary-angular/package-lock.json @@ -16,6 +16,9 @@ "@angular/platform-browser": "^14.2.0", "@angular/platform-browser-dynamic": "^14.2.0", "@angular/router": "^14.2.0", + "@ngrx/effects": "^14.3.3", + "@ngrx/store": "^14.3.3", + "@ngrx/store-devtools": "^14.3.3", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" @@ -2701,6 +2704,43 @@ "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==", "dev": true }, + "node_modules/@ngrx/effects": { + "version": "14.3.3", + "resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-14.3.3.tgz", + "integrity": "sha512-bP7rIHlu1KAj5Wm0TWR7Q8VlOQOBu8uiN/fDP3Lqi8FwVW6HOq9eBGcFwJGyqwVAmulsvLFB68MhpMYg2W78+w==", + "dependencies": { + "tslib": "^2.0.0" + }, + "peerDependencies": { + "@angular/core": "^14.0.0", + "@ngrx/store": "14.3.3", + "rxjs": "^6.5.3 || ^7.5.0" + } + }, + "node_modules/@ngrx/store": { + "version": "14.3.3", + "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-14.3.3.tgz", + "integrity": "sha512-VhPDR2a5OQJfrVRah3vdJgL/F6UC8NU/X7lxKFqBW3NC+pmlIeFO/y8jLrZOKBXwG45tY9wrg15S70nEGoZtHA==", + "dependencies": { + "tslib": "^2.0.0" + }, + "peerDependencies": { + "@angular/core": "^14.0.0", + "rxjs": "^6.5.3 || ^7.5.0" + } + }, + "node_modules/@ngrx/store-devtools": { + "version": "14.3.3", + "resolved": "https://registry.npmjs.org/@ngrx/store-devtools/-/store-devtools-14.3.3.tgz", + "integrity": "sha512-YQFFKYRnmREHCUb0aAaAgSXWKjZqV+5pmzsjW6HZ0GTKoy9R3JI7Miw0gplwkJpLO7Z3AFCuLQIpTs5ryAOwPQ==", + "dependencies": { + "tslib": "^2.0.0" + }, + "peerDependencies": { + "@ngrx/store": "14.3.3", + "rxjs": "^6.5.3 || ^7.5.0" + } + }, "node_modules/@ngtools/webpack": { "version": "14.2.10", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-14.2.10.tgz", @@ -13739,6 +13779,30 @@ "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==", "dev": true }, + "@ngrx/effects": { + "version": "14.3.3", + "resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-14.3.3.tgz", + "integrity": "sha512-bP7rIHlu1KAj5Wm0TWR7Q8VlOQOBu8uiN/fDP3Lqi8FwVW6HOq9eBGcFwJGyqwVAmulsvLFB68MhpMYg2W78+w==", + "requires": { + "tslib": "^2.0.0" + } + }, + "@ngrx/store": { + "version": "14.3.3", + "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-14.3.3.tgz", + "integrity": "sha512-VhPDR2a5OQJfrVRah3vdJgL/F6UC8NU/X7lxKFqBW3NC+pmlIeFO/y8jLrZOKBXwG45tY9wrg15S70nEGoZtHA==", + "requires": { + "tslib": "^2.0.0" + } + }, + "@ngrx/store-devtools": { + "version": "14.3.3", + "resolved": "https://registry.npmjs.org/@ngrx/store-devtools/-/store-devtools-14.3.3.tgz", + "integrity": "sha512-YQFFKYRnmREHCUb0aAaAgSXWKjZqV+5pmzsjW6HZ0GTKoy9R3JI7Miw0gplwkJpLO7Z3AFCuLQIpTs5ryAOwPQ==", + "requires": { + "tslib": "^2.0.0" + } + }, "@ngtools/webpack": { "version": "14.2.10", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-14.2.10.tgz", diff --git a/dear-diary-angular/package.json b/dear-diary-angular/package.json index 34fb3e3..0090010 100644 --- a/dear-diary-angular/package.json +++ b/dear-diary-angular/package.json @@ -18,6 +18,9 @@ "@angular/platform-browser": "^14.2.0", "@angular/platform-browser-dynamic": "^14.2.0", "@angular/router": "^14.2.0", + "@ngrx/effects": "^14.3.3", + "@ngrx/store": "^14.3.3", + "@ngrx/store-devtools": "^14.3.3", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" diff --git a/dear-diary-angular/src/app/app.module.ts b/dear-diary-angular/src/app/app.module.ts index c8a99fe..18dc79a 100644 --- a/dear-diary-angular/src/app/app.module.ts +++ b/dear-diary-angular/src/app/app.module.ts @@ -1,12 +1,16 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ReactiveFormsModule } from '@angular/forms'; - import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { SignInPageComponent } from './containers/sign-in-page/sign-in-page.component'; import { HomePageComponent } from './containers/home-page/home-page.component'; import { DiaryCardComponent } from './components/diary-card/diary-card.component'; +import { StoreModule } from '@ngrx/store'; +import { environment } from 'src/environments/environment'; +import { StoreDevtoolsModule } from '@ngrx/store-devtools'; +import { EffectsModule } from '@ngrx/effects'; +import { cardReducer } from './store/reducers/card.reducers'; @NgModule({ declarations: [ @@ -15,7 +19,20 @@ import { DiaryCardComponent } from './components/diary-card/diary-card.component HomePageComponent, DiaryCardComponent, ], - imports: [BrowserModule, AppRoutingModule, ReactiveFormsModule], + imports: [ + BrowserModule, + AppRoutingModule, + ReactiveFormsModule, + + StoreModule.forRoot({ cards: cardReducer }), + EffectsModule.forRoot(), + StoreDevtoolsModule.instrument({ + maxAge: 25, + logOnly: environment.production, + autoPause: true, + }), + ], + providers: [], bootstrap: [AppComponent], }) diff --git a/dear-diary-angular/src/app/components/diary-card/diary-card.component.ts b/dear-diary-angular/src/app/components/diary-card/diary-card.component.ts index e2467d0..77385c5 100644 --- a/dear-diary-angular/src/app/components/diary-card/diary-card.component.ts +++ b/dear-diary-angular/src/app/components/diary-card/diary-card.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; import { cardDetails } from 'src/app/models/cardDetails'; @Component({ selector: 'app-diary-card', @@ -6,26 +6,20 @@ import { cardDetails } from 'src/app/models/cardDetails'; styleUrls: ['./diary-card.component.css'], }) export class DiaryCardComponent implements OnInit { - card:cardDetails; - isLarge:boolean=false; + @Input() + card!: cardDetails; + isLarge: boolean = false; showMore: boolean = false; - - constructor() { - this.card = { - title: 'hello', - userName: 'lahiru', - description: - 'a lifecycle that starts when Angular instantiates lifecycle that starts pppp instantiates lifecycle that starts pppp instantiates lifecycle that starts pppp', - }; - } + + constructor() {} ngOnInit(): void { console.log(this.card?.description.length); - this.isLarge = this.card?.description.length>100 ? true : false - this.showMore = true + this.isLarge = this.card?.description.length > 100 ? true : false; + this.showMore = true; } - showMoreAction(): void { + showMoreAction(): void { this.showMore = this.showMore ? false : true; } } diff --git a/dear-diary-angular/src/app/containers/home-page/home-page.component.css b/dear-diary-angular/src/app/containers/home-page/home-page.component.css index e69de29..7e4a1ef 100644 --- a/dear-diary-angular/src/app/containers/home-page/home-page.component.css +++ b/dear-diary-angular/src/app/containers/home-page/home-page.component.css @@ -0,0 +1,86 @@ +.mainArea { + background-color: rgb(59, 165, 202); + height: 100%; + width: 100%; +} +.navbar { + position: fixed; + height: 3rem; + background-color: #00bcd4; + width: 100vw; + display: flex; + justify-content: center; + align-items: center; +} +.contentA { + display: flex; + justify-content: center; +} +.inputFields { + /* background-color: #f1f6f7; + height: max-content; + width: 96%; + border-radius: 10px; + top: 4rem; + position: relative; + display: inline; */ + + background-color: #f1f6f7; + width: 96%; + border-radius: 10px; + top: 4rem; + margin: 4% 0% 2% 0%; +} +.titleInput { + margin: 1% 2% 1% 2%; + height: 2rem; + min-width: 22rem; + border: 1px solid black; + border-radius: 15px; + padding-left: 1%; + transition: width 1s; +} +#descInput { + margin: 1% 2% 1% 2%; + height: 40%; + width: 87rem; + border: 1px solid black; + border-radius: 15px; + padding: 1%; + transition: height 1s; +} +.lable { + margin-left: 2rem; + margin-top: 1%; +} +.submitBtn { + border-radius: 15px; + background-color: #14a5dd; + height: 2rem; + color: white; + font-size: 16px; + border: 1px solid #14a5dd; + width: max-content; + position: relative; + cursor: pointer; +} + +.cardsArea { + width: 95%; + height: max-content; + display: inline-flex; + flex-direction: row; + background-color: rgb(59, 165, 202); + border: 1px solid rgb(59, 165, 202); + border-radius: 10px; + margin-bottom: 2%; + top: 5rem; + justify-content: space-between; + margin-left: 2%; + padding: 8px; + flex-wrap: wrap; +} +.card { + margin-top: 1%; + display: inline-block; +} diff --git a/dear-diary-angular/src/app/containers/home-page/home-page.component.html b/dear-diary-angular/src/app/containers/home-page/home-page.component.html index c3171d5..c750341 100644 --- a/dear-diary-angular/src/app/containers/home-page/home-page.component.html +++ b/dear-diary-angular/src/app/containers/home-page/home-page.component.html @@ -1,5 +1,39 @@ -

home-page works!

-
- +
+
+

DIARY HOME

+
-
\ No newline at end of file +
+
+

Home

+ + + +
+
+ +
+ +
+
diff --git a/dear-diary-angular/src/app/containers/home-page/home-page.component.ts b/dear-diary-angular/src/app/containers/home-page/home-page.component.ts index f0f68dd..59eb738 100644 --- a/dear-diary-angular/src/app/containers/home-page/home-page.component.ts +++ b/dear-diary-angular/src/app/containers/home-page/home-page.component.ts @@ -1,15 +1,53 @@ import { Component, OnInit } from '@angular/core'; - +import { cardDetails } from 'src/app/models/cardDetails'; +import { FormControl, Validators } from '@angular/forms'; +import { select, Store } from '@ngrx/store'; +import { Observable } from 'rxjs'; +import { DiaryCard } from 'src/app/store/types/DiaryCard'; +import { addCardSuccess } from 'src/app/store/actions/card.action'; +import { selectCards } from 'src/app/store/selectors/card.selectors'; @Component({ selector: 'app-home-page', templateUrl: './home-page.component.html', - styleUrls: ['./home-page.component.css'] + styleUrls: ['./home-page.component.css'], }) export class HomePageComponent implements OnInit { + titleTxt = new FormControl('', Validators.required); + descTxt = new FormControl('', Validators.required); + // cards: cardDetails[] = []; - constructor() { } + card: cardDetails | undefined; + expand: boolean = false; + public cards: Observable = this.store.pipe( + select(selectCards) + ); + constructor(private store: Store<{ DiaryCard: any }>) {} ngOnInit(): void { + this.titleTxt.setValue(this.titleTxt.value); + this.descTxt.setValue(this.descTxt.value); + console.log(this.cards); } + submitBtnAction(): void { + console.log(this.cards); + this.expand = false; + + if (this.titleTxt.value != '' && this.descTxt.value != '') { + const card = { + title: this.titleTxt.value, + userName: localStorage.getItem('username'), + description: this.descTxt.value, + } as cardDetails; + // this.cards.push(card); + this.store.dispatch(addCardSuccess({ card })); + } else if (this.titleTxt.value == '') { + console.log('Missing title !'); + } else { + console.log('Missing description !'); + } + + this.titleTxt.setValue(''); + this.descTxt.setValue(''); + } } diff --git a/dear-diary-angular/src/app/containers/sign-in-page/sign-in-page.component.ts b/dear-diary-angular/src/app/containers/sign-in-page/sign-in-page.component.ts index a1822f9..acbd997 100644 --- a/dear-diary-angular/src/app/containers/sign-in-page/sign-in-page.component.ts +++ b/dear-diary-angular/src/app/containers/sign-in-page/sign-in-page.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; import { FormControl, Validators } from '@angular/forms'; import { Router } from '@angular/router'; @Component({ @@ -8,7 +8,8 @@ import { Router } from '@angular/router'; }) export class SignInPageComponent implements OnInit { public disabled: boolean = true; - userName = new FormControl('', Validators.required); + @Input() + public userName = new FormControl('', Validators.required); constructor(private router: Router) {} @@ -26,6 +27,9 @@ export class SignInPageComponent implements OnInit { logInAction(): void { console.log(this.userName.value); - this.router.navigate(['/home']); + if (this.userName.value !== null) { + this.router.navigate(['/home']); + localStorage.setItem('username', this.userName.value); + } } } diff --git a/dear-diary-angular/src/app/store/actions/card.action.ts b/dear-diary-angular/src/app/store/actions/card.action.ts new file mode 100644 index 0000000..136ef9b --- /dev/null +++ b/dear-diary-angular/src/app/store/actions/card.action.ts @@ -0,0 +1,24 @@ +import { createAction, props } from '@ngrx/store'; +import { cardDetails } from 'src/app/models/cardDetails'; + + +export const getCards = createAction('[Dear-diary Page] Get Cards'); +export const getCardsSuccess = createAction('[Dear-diary Page] Get Cards Success', + props<{cards:cardDetails[]}>() +); +export const getCardsFailure = createAction( + '[Dear-diary Page] Get Cards Failure', + props<{ error: string }>() +); +export const addCard = createAction( + '[Dear-diary Page] Add Card', + props<{ card: cardDetails }>() +); +export const addCardSuccess = createAction( + '[Dear-diary Page] Add Card Success', + props<{ card: cardDetails }>() +); +export const addCardFailure = createAction( + '[Dear-diary Page] Add Card Failure', + props<{ error: string }>() +); \ No newline at end of file diff --git a/dear-diary-angular/src/app/store/reducers/card.reducers.ts b/dear-diary-angular/src/app/store/reducers/card.reducers.ts new file mode 100644 index 0000000..46cc318 --- /dev/null +++ b/dear-diary-angular/src/app/store/reducers/card.reducers.ts @@ -0,0 +1,37 @@ +import { Action, createReducer, on } from '@ngrx/store'; +import { cardDetails } from 'src/app/models/cardDetails'; +import * as CardActions from '../actions/card.action'; +import { DiaryCard } from '../types/DiaryCard'; + +export const initialState: DiaryCard = { + cards: [], + error: null, +}; +export const cardReducer = createReducer( + initialState, + + on(CardActions.getCards, (state) => ({ ...state })), + + on(CardActions.getCardsSuccess, (state, action) => ({ + ...state, + cards: action.cards, + })), + + on(CardActions.getCardsFailure, (state, action) => ({ + ...state, + })), + + on(CardActions.addCard, (state, action) => ({ + ...state, + })), + + on(CardActions.addCardSuccess, (state, action) => ({ + ...state, + cards: [...state.cards, action.card], + })), + + on(CardActions.addCardFailure, (state, action) => ({ + ...state, + error: action.error, + })) +); diff --git a/dear-diary-angular/src/app/store/selectors/card.selectors.ts b/dear-diary-angular/src/app/store/selectors/card.selectors.ts new file mode 100644 index 0000000..3a0ca3a --- /dev/null +++ b/dear-diary-angular/src/app/store/selectors/card.selectors.ts @@ -0,0 +1,8 @@ +import { createFeatureSelector, createSelector } from '@ngrx/store'; +import { DiaryCard } from '../types/DiaryCard'; + +export const diaryCardFeature = createFeatureSelector('cards'); +export const selectCards = createSelector( + diaryCardFeature, + (state) => state.cards +); \ No newline at end of file diff --git a/dear-diary-angular/src/app/store/types/DiaryCard.ts b/dear-diary-angular/src/app/store/types/DiaryCard.ts new file mode 100644 index 0000000..32ea83b --- /dev/null +++ b/dear-diary-angular/src/app/store/types/DiaryCard.ts @@ -0,0 +1,6 @@ +import { cardDetails } from "src/app/models/cardDetails"; + +export interface DiaryCard { + cards: cardDetails[]; + error: string | null; +} \ No newline at end of file