From c4f94bf0a569c260f668c7a01abe9149b26bbc38 Mon Sep 17 00:00:00 2001 From: Yasin Seden Date: Fri, 14 Jul 2023 21:10:45 +0300 Subject: [PATCH 1/4] =?UTF-8?q?Feedback=20module=20tan=C4=B1mland=C4=B1=20?= =?UTF-8?q?ve=20routingler=20ile=20send=20feedback=20componenti=20olu?= =?UTF-8?q?=C5=9Fturuldu.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app-routing.module.ts | 5 + src/app/auth/login/login.component.html | 5 +- src/app/auth/login/login.component.ts | 4 + .../display-feedback.component.css | 0 .../display-feedback.component.html | 1 + .../display-feedback.component.spec.ts | 23 ++++ .../display-feedback.component.ts | 10 ++ src/app/feedback/feedback-routing.module.ts | 19 ++++ src/app/feedback/feedback.module.ts | 28 +++++ .../send-feedback/send-feedback.component.css | 4 + .../send-feedback.component.html | 101 ++++++++++++++++++ .../send-feedback.component.spec.ts | 23 ++++ .../send-feedback/send-feedback.component.ts | 55 ++++++++++ src/app/main/main.module.ts | 1 - .../phone-number-format.directive.ts | 27 +++++ src/app/shared/shared.module.ts | 7 +- 16 files changed, 309 insertions(+), 4 deletions(-) create mode 100644 src/app/feedback/display-feedback/display-feedback.component.css create mode 100644 src/app/feedback/display-feedback/display-feedback.component.html create mode 100644 src/app/feedback/display-feedback/display-feedback.component.spec.ts create mode 100644 src/app/feedback/display-feedback/display-feedback.component.ts create mode 100644 src/app/feedback/feedback-routing.module.ts create mode 100644 src/app/feedback/feedback.module.ts create mode 100644 src/app/feedback/send-feedback/send-feedback.component.css create mode 100644 src/app/feedback/send-feedback/send-feedback.component.html create mode 100644 src/app/feedback/send-feedback/send-feedback.component.spec.ts create mode 100644 src/app/feedback/send-feedback/send-feedback.component.ts create mode 100644 src/app/shared/directives/phone-number-format.directive.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 3f5cfc5..56f0fb4 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -10,6 +10,11 @@ const routes: Routes = [ loadChildren: (): any => import('./auth/auth.module').then((m: any) => m.AuthModule), }, + { + path: 'feedback', + loadChildren: (): any => import('./feedback/feedback.module').then((m: any) => m.FeedbackModule), + }, + { path: '', redirectTo: 'auth/login', diff --git a/src/app/auth/login/login.component.html b/src/app/auth/login/login.component.html index 8dc5db5..761679d 100644 --- a/src/app/auth/login/login.component.html +++ b/src/app/auth/login/login.component.html @@ -8,7 +8,10 @@ Sana Şifa - +

giris

diff --git a/src/app/auth/login/login.component.ts b/src/app/auth/login/login.component.ts index 9322376..0c1cacc 100644 --- a/src/app/auth/login/login.component.ts +++ b/src/app/auth/login/login.component.ts @@ -69,4 +69,8 @@ export class LoginComponent { } + navigateToFeedback() { + this.router.navigate(['/feedback']); + } + } diff --git a/src/app/feedback/display-feedback/display-feedback.component.css b/src/app/feedback/display-feedback/display-feedback.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/feedback/display-feedback/display-feedback.component.html b/src/app/feedback/display-feedback/display-feedback.component.html new file mode 100644 index 0000000..192926a --- /dev/null +++ b/src/app/feedback/display-feedback/display-feedback.component.html @@ -0,0 +1 @@ +

display-feedback works!

diff --git a/src/app/feedback/display-feedback/display-feedback.component.spec.ts b/src/app/feedback/display-feedback/display-feedback.component.spec.ts new file mode 100644 index 0000000..fdd2e66 --- /dev/null +++ b/src/app/feedback/display-feedback/display-feedback.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DisplayFeedbackComponent } from './display-feedback.component'; + +describe('DisplayFeedbackComponent', () => { + let component: DisplayFeedbackComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ DisplayFeedbackComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DisplayFeedbackComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/feedback/display-feedback/display-feedback.component.ts b/src/app/feedback/display-feedback/display-feedback.component.ts new file mode 100644 index 0000000..953ade6 --- /dev/null +++ b/src/app/feedback/display-feedback/display-feedback.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-display-feedback', + templateUrl: './display-feedback.component.html', + styleUrls: ['./display-feedback.component.css'] +}) +export class DisplayFeedbackComponent { + +} diff --git a/src/app/feedback/feedback-routing.module.ts b/src/app/feedback/feedback-routing.module.ts new file mode 100644 index 0000000..ff10779 --- /dev/null +++ b/src/app/feedback/feedback-routing.module.ts @@ -0,0 +1,19 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { DisplayFeedbackComponent } from './display-feedback/display-feedback.component'; +import { SendFeedbackComponent } from './send-feedback/send-feedback.component'; + +const routes: Routes = [ + { + path: '', component: SendFeedbackComponent, + children: [ + { path: 'display', component: DisplayFeedbackComponent } + ] + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class FeedbackRoutingModule { } diff --git a/src/app/feedback/feedback.module.ts b/src/app/feedback/feedback.module.ts new file mode 100644 index 0000000..82277c1 --- /dev/null +++ b/src/app/feedback/feedback.module.ts @@ -0,0 +1,28 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { DisplayFeedbackComponent } from './display-feedback/display-feedback.component'; +import { SendFeedbackComponent } from './send-feedback/send-feedback.component'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { MaterialModule } from '../shared/material/material.module'; +import { SharedModule } from '../shared/shared.module'; +import { FeedbackRoutingModule } from './feedback-routing.module'; +import { RouterModule } from '@angular/router'; + + + +@NgModule({ + declarations: [ + DisplayFeedbackComponent, + SendFeedbackComponent, + ], + imports: [ + CommonModule, + MaterialModule, + FormsModule, + ReactiveFormsModule, + SharedModule, + FeedbackRoutingModule, + RouterModule, + ] +}) +export class FeedbackModule { } diff --git a/src/app/feedback/send-feedback/send-feedback.component.css b/src/app/feedback/send-feedback/send-feedback.component.css new file mode 100644 index 0000000..0a88f87 --- /dev/null +++ b/src/app/feedback/send-feedback/send-feedback.component.css @@ -0,0 +1,4 @@ +.background { + background: url('/assets/desen.jpg'); + background-size: cover; +} \ No newline at end of file diff --git a/src/app/feedback/send-feedback/send-feedback.component.html b/src/app/feedback/send-feedback/send-feedback.component.html new file mode 100644 index 0000000..6e46773 --- /dev/null +++ b/src/app/feedback/send-feedback/send-feedback.component.html @@ -0,0 +1,101 @@ +
+
+
+ + + +
+ + Name + + +

Name field can not be left + blank +

+ + + + + Surname + + +

Surame field can not + be left blank +

+ + +
+ +
+ + E-mail + + +

E-mail field can not be + left blank +

+

E-mail field must be in e-mail format +

+ + + + + + Phone number + +90   + + +
+ +
+

Select your gender

+
+ + Male + Female + I do not want to specify + +
+
+ + + Comment + + + +
+ + Where do you hear about us + + Social Media + Friend Suggestion + TV + Find Myself + Other + + + + +
+
+ + + +
+ + +
+ +

Stored Data:{{ i + 1 }}: {{ value.value | json }}

+
+
+ + diff --git a/src/app/feedback/send-feedback/send-feedback.component.spec.ts b/src/app/feedback/send-feedback/send-feedback.component.spec.ts new file mode 100644 index 0000000..e939add --- /dev/null +++ b/src/app/feedback/send-feedback/send-feedback.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SendFeedbackComponent } from './send-feedback.component'; + +describe('SendFeedbackComponent', () => { + let component: SendFeedbackComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SendFeedbackComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SendFeedbackComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/feedback/send-feedback/send-feedback.component.ts b/src/app/feedback/send-feedback/send-feedback.component.ts new file mode 100644 index 0000000..6b8bd2b --- /dev/null +++ b/src/app/feedback/send-feedback/send-feedback.component.ts @@ -0,0 +1,55 @@ +import { Component } from '@angular/core'; +import { FormGroup, FormControl, Validators, AbstractControl } from '@angular/forms'; +import { Router } from '@angular/router'; + + +@Component({ + selector: 'app-send-feedback', + templateUrl: './send-feedback.component.html', + styleUrls: ['./send-feedback.component.css'] +}) +export class SendFeedbackComponent { + + public feedbackForm = new FormGroup({ // deneme sırasında sürekli form doldurmamak için şimdilik değer atadım işin bitince silmeyi unutma + name: new FormControl('Yasin', Validators.required), + surname: new FormControl('Seden', Validators.required), + comment: new FormControl(), + email: new FormControl('yasinseden@yasin.com', [Validators.required, Validators.email]), + phoneNumber: new FormControl(), + gender: new FormControl('male', [Validators.required]), + reference: new FormControl('') // referans çıktısı sayı olarak olacak. Kullanırken dönen sayının karşılığı değeri döndürmeyi unutma + }) + + constructor( + public router: Router + ) {} + + parsedFeedbackValues: any[] = []; + valueKey: number = 1; // şimdilik geçici bir çözüm olarak bir değişkenle localstorage keylerini kontrol altına aldım. Daha verimli bir yolunu araştır + + get f(): { [key: string]: AbstractControl } { + return this.feedbackForm.controls + } + + submitfeedback() { // Kontrol amaçlı console.log ekledim. İşin bitince silmeyi unutma + const formValues = this.feedbackForm.value; + const key = this.valueKey.toString(); + window.localStorage.setItem(key, JSON.stringify(formValues)); + this.valueKey++ + } + + checkClick() { // Bu fonksiyon ile local storage'deki veriyi dönüyoruz. ilerleyen zamanda bu fonksiyonu veriyi tabloya dökmek için kullanacağız!! + let valueKey: any; + for (let i = 1; i < 100; i++) { // for döngüsüyle localstorage'deki veriyi döndürebiliyorum fakat şimdilik döngü 100'e kadar dönüyor. storage'daki veri sayısına göre dönmeyi öğren!!! + valueKey = i.toString(); + const storedFeedbackValues = localStorage.getItem(valueKey) + if (storedFeedbackValues) { + this.parsedFeedbackValues.push(JSON.parse(storedFeedbackValues)); + } + } + } + + navigateToFeedbackDisplay() { + this.router.navigate(['/feedback/display']); + } +} diff --git a/src/app/main/main.module.ts b/src/app/main/main.module.ts index 7b17e34..840dd9a 100644 --- a/src/app/main/main.module.ts +++ b/src/app/main/main.module.ts @@ -31,7 +31,6 @@ import { SharedModule } from '../shared/shared.module'; FormsModule, ReactiveFormsModule, MainFooterComponent, - SharedModule ] }) export class MainModule { } diff --git a/src/app/shared/directives/phone-number-format.directive.ts b/src/app/shared/directives/phone-number-format.directive.ts new file mode 100644 index 0000000..8d904d4 --- /dev/null +++ b/src/app/shared/directives/phone-number-format.directive.ts @@ -0,0 +1,27 @@ +import { Directive, ElementRef, HostListener } from '@angular/core'; + +@Directive({ + selector: '[appPhoneNumberFormat]' +}) +export class PhoneNumberFormatDirective { + + constructor(private el: ElementRef) { } + + @HostListener('input', ['$event']) + onInput(event: KeyboardEvent) { + const input = event.target as HTMLInputElement; + const phoneNumber = this.formatPhoneNumber(input.value); + input.value = phoneNumber; + } + + private formatPhoneNumber(value: string): string { + const digitsOnly = value.replace(/[^\d\b]/g, ''); //regex pattern + const areaCode = digitsOnly.slice(0, 3); + const firstPart = digitsOnly.slice(3, 6); + const secondPart = digitsOnly.slice(6, 8); + const lastPart = digitsOnly.slice(8, 10); + + return `(${areaCode}) ${firstPart} ${secondPart} ${lastPart}`; + } + +} diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 6441356..74233ea 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -10,6 +10,7 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader'; import { ReactiveFormsModule } from '@angular/forms'; import { CikisModalComponent } from './component/modals/cikis-modal/cikis-modal.component'; import { UrunEditModalComponent } from './component/modals/urun-edit-modal/urun-edit-modal.component'; +import { PhoneNumberFormatDirective } from './directives/phone-number-format.directive'; export function HttpLoaderFactory(http: HttpClient) { /// Eğer başka bir diiznde json tanımlamamk istersek return new TranslateHttpLoader(http); @@ -19,7 +20,8 @@ export function HttpLoaderFactory(http: HttpClient) { /// Eğer başka bir declarations: [ LanguageComponent, CikisModalComponent, - UrunEditModalComponent + UrunEditModalComponent, + PhoneNumberFormatDirective ], imports: [ CommonModule, @@ -38,7 +40,8 @@ export function HttpLoaderFactory(http: HttpClient) { /// Eğer başka bir exports: [ LanguageComponent, TranslateModule, - ReactiveFormsModule + ReactiveFormsModule, + PhoneNumberFormatDirective ], providers:[TranslateService] }) From bdde869909cd9f4a805802ed6fd7d010d328714e Mon Sep 17 00:00:00 2001 From: Yasin Seden Date: Sat, 15 Jul 2023 21:37:45 +0300 Subject: [PATCH 2/4] =?UTF-8?q?display=20feedback=20componenti=20i=C3=A7er?= =?UTF-8?q?i=C4=9Fi=20d=C3=BCzenlendi=20ve=20genel=20tasar=C4=B1m=C4=B1=20?= =?UTF-8?q?yap=C4=B1ld=C4=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../display-feedback.component.css | 5 +++ .../display-feedback.component.html | 34 ++++++++++++++++++- .../display-feedback.component.ts | 21 ++++++++++-- src/app/feedback/feedback-routing.module.ts | 8 ++--- src/app/feedback/feedback.module.ts | 2 ++ .../feedback/feedback/feedback.component.css | 0 .../feedback/feedback/feedback.component.html | 2 ++ .../feedback/feedback.component.spec.ts | 23 +++++++++++++ .../feedback/feedback/feedback.component.ts | 10 ++++++ .../send-feedback.component.html | 7 ---- .../send-feedback/send-feedback.component.ts | 12 ------- 11 files changed, 96 insertions(+), 28 deletions(-) create mode 100644 src/app/feedback/feedback/feedback.component.css create mode 100644 src/app/feedback/feedback/feedback.component.html create mode 100644 src/app/feedback/feedback/feedback.component.spec.ts create mode 100644 src/app/feedback/feedback/feedback.component.ts diff --git a/src/app/feedback/display-feedback/display-feedback.component.css b/src/app/feedback/display-feedback/display-feedback.component.css index e69de29..6b7cb97 100644 --- a/src/app/feedback/display-feedback/display-feedback.component.css +++ b/src/app/feedback/display-feedback/display-feedback.component.css @@ -0,0 +1,5 @@ +.background { + background: url('/assets/desen.jpg'); + background-size: cover; +} + diff --git a/src/app/feedback/display-feedback/display-feedback.component.html b/src/app/feedback/display-feedback/display-feedback.component.html index 192926a..8e571f0 100644 --- a/src/app/feedback/display-feedback/display-feedback.component.html +++ b/src/app/feedback/display-feedback/display-feedback.component.html @@ -1 +1,33 @@ -

display-feedback works!

+
+
+
+ + + +
+ + {{ item.name }} {{ item.surname }} + + + {{ item.email }} + + + 0{{ item.phoneNumber }} + +
+
+
+
+
+
+
+
+ + Comment: {{ + item.comment }} + + +
+
+
\ No newline at end of file diff --git a/src/app/feedback/display-feedback/display-feedback.component.ts b/src/app/feedback/display-feedback/display-feedback.component.ts index 953ade6..9ccde0c 100644 --- a/src/app/feedback/display-feedback/display-feedback.component.ts +++ b/src/app/feedback/display-feedback/display-feedback.component.ts @@ -1,10 +1,27 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-display-feedback', templateUrl: './display-feedback.component.html', styleUrls: ['./display-feedback.component.css'] }) -export class DisplayFeedbackComponent { +export class DisplayFeedbackComponent implements OnInit { + + ngOnInit(): void { + this.checkClick(); + } + parsedFeedbackValues: any[] = []; + + checkClick() { // Bu fonksiyon ile local storage'deki veriyi dönüyoruz. ilerleyen zamanda bu fonksiyonu veriyi tabloya dökmek için kullanacağız!! + let valueKey: any; + for (let i = 1; i < 100; i++) { // for döngüsüyle localstorage'deki veriyi döndürebiliyorum fakat şimdilik döngü 100'e kadar dönüyor. storage'daki veri sayısına göre dönmeyi öğren!!! + valueKey = i.toString(); + const storedFeedbackValues = localStorage.getItem(valueKey) + if (storedFeedbackValues) { + const retrievedValue = JSON.parse(storedFeedbackValues); + this.parsedFeedbackValues.push(retrievedValue) + } + } + } } diff --git a/src/app/feedback/feedback-routing.module.ts b/src/app/feedback/feedback-routing.module.ts index ff10779..57f987f 100644 --- a/src/app/feedback/feedback-routing.module.ts +++ b/src/app/feedback/feedback-routing.module.ts @@ -4,12 +4,8 @@ import { DisplayFeedbackComponent } from './display-feedback/display-feedback.co import { SendFeedbackComponent } from './send-feedback/send-feedback.component'; const routes: Routes = [ - { - path: '', component: SendFeedbackComponent, - children: [ - { path: 'display', component: DisplayFeedbackComponent } - ] - } + { path: '', component: SendFeedbackComponent }, + { path: 'display', component: DisplayFeedbackComponent } ]; @NgModule({ diff --git a/src/app/feedback/feedback.module.ts b/src/app/feedback/feedback.module.ts index 82277c1..b984654 100644 --- a/src/app/feedback/feedback.module.ts +++ b/src/app/feedback/feedback.module.ts @@ -7,6 +7,7 @@ import { MaterialModule } from '../shared/material/material.module'; import { SharedModule } from '../shared/shared.module'; import { FeedbackRoutingModule } from './feedback-routing.module'; import { RouterModule } from '@angular/router'; +import { FeedbackComponent } from './feedback/feedback.component'; @@ -14,6 +15,7 @@ import { RouterModule } from '@angular/router'; declarations: [ DisplayFeedbackComponent, SendFeedbackComponent, + FeedbackComponent, ], imports: [ CommonModule, diff --git a/src/app/feedback/feedback/feedback.component.css b/src/app/feedback/feedback/feedback.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/feedback/feedback/feedback.component.html b/src/app/feedback/feedback/feedback.component.html new file mode 100644 index 0000000..6a164d6 --- /dev/null +++ b/src/app/feedback/feedback/feedback.component.html @@ -0,0 +1,2 @@ + + diff --git a/src/app/feedback/feedback/feedback.component.spec.ts b/src/app/feedback/feedback/feedback.component.spec.ts new file mode 100644 index 0000000..3badc56 --- /dev/null +++ b/src/app/feedback/feedback/feedback.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FeedbackComponent } from './feedback.component'; + +describe('FeedbackComponent', () => { + let component: FeedbackComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ FeedbackComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(FeedbackComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/feedback/feedback/feedback.component.ts b/src/app/feedback/feedback/feedback.component.ts new file mode 100644 index 0000000..f5471a1 --- /dev/null +++ b/src/app/feedback/feedback/feedback.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-feedback', + templateUrl: './feedback.component.html', + styleUrls: ['./feedback.component.css'] +}) +export class FeedbackComponent { + +} diff --git a/src/app/feedback/send-feedback/send-feedback.component.html b/src/app/feedback/send-feedback/send-feedback.component.html index 6e46773..d38b665 100644 --- a/src/app/feedback/send-feedback/send-feedback.component.html +++ b/src/app/feedback/send-feedback/send-feedback.component.html @@ -90,12 +90,5 @@

Select your gender

- - -
- -

Stored Data:{{ i + 1 }}: {{ value.value | json }}

-
- diff --git a/src/app/feedback/send-feedback/send-feedback.component.ts b/src/app/feedback/send-feedback/send-feedback.component.ts index 6b8bd2b..0c55125 100644 --- a/src/app/feedback/send-feedback/send-feedback.component.ts +++ b/src/app/feedback/send-feedback/send-feedback.component.ts @@ -24,7 +24,6 @@ export class SendFeedbackComponent { public router: Router ) {} - parsedFeedbackValues: any[] = []; valueKey: number = 1; // şimdilik geçici bir çözüm olarak bir değişkenle localstorage keylerini kontrol altına aldım. Daha verimli bir yolunu araştır get f(): { [key: string]: AbstractControl } { @@ -38,17 +37,6 @@ export class SendFeedbackComponent { this.valueKey++ } - checkClick() { // Bu fonksiyon ile local storage'deki veriyi dönüyoruz. ilerleyen zamanda bu fonksiyonu veriyi tabloya dökmek için kullanacağız!! - let valueKey: any; - for (let i = 1; i < 100; i++) { // for döngüsüyle localstorage'deki veriyi döndürebiliyorum fakat şimdilik döngü 100'e kadar dönüyor. storage'daki veri sayısına göre dönmeyi öğren!!! - valueKey = i.toString(); - const storedFeedbackValues = localStorage.getItem(valueKey) - if (storedFeedbackValues) { - this.parsedFeedbackValues.push(JSON.parse(storedFeedbackValues)); - } - } - } - navigateToFeedbackDisplay() { this.router.navigate(['/feedback/display']); } From 72980978cbe78252c60aa13ca56efb9ebc7b9b30 Mon Sep 17 00:00:00 2001 From: Yasin Seden Date: Sun, 16 Jul 2023 20:21:49 +0300 Subject: [PATCH 3/4] =?UTF-8?q?Display-feedback=20componenti=20tamamland?= =?UTF-8?q?=C4=B1=20ve=20send-feedback=20componentindeki=20baz=C4=B1=20hat?= =?UTF-8?q?alar=20giderildi?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../display-feedback.component.html | 34 ++++++++++++++++--- .../display-feedback.component.ts | 12 ++++++- src/app/feedback/feedback.module.ts | 2 ++ .../send-feedback/send-feedback.component.ts | 13 +++---- src/assets/svgs/gender-female-icon.svg | 6 ++++ src/assets/svgs/gender-female-svgrepo-com.svg | 2 ++ src/assets/svgs/gender-male-icon.svg | 6 ++++ src/assets/svgs/gender-male-svgrepo-com.svg | 2 ++ 8 files changed, 65 insertions(+), 12 deletions(-) create mode 100644 src/assets/svgs/gender-female-icon.svg create mode 100644 src/assets/svgs/gender-female-svgrepo-com.svg create mode 100644 src/assets/svgs/gender-male-icon.svg create mode 100644 src/assets/svgs/gender-male-svgrepo-com.svg diff --git a/src/app/feedback/display-feedback/display-feedback.component.html b/src/app/feedback/display-feedback/display-feedback.component.html index 8e571f0..0e6f7cc 100644 --- a/src/app/feedback/display-feedback/display-feedback.component.html +++ b/src/app/feedback/display-feedback/display-feedback.component.html @@ -3,7 +3,7 @@
- +
@@ -17,11 +17,35 @@
-
-
-
+
+ +
+ +
+
+ +
+
+

NS

+
+
-
+ + +
+ +
+
+ +
+
+

PP

+
+
Comment: {{ diff --git a/src/app/feedback/display-feedback/display-feedback.component.ts b/src/app/feedback/display-feedback/display-feedback.component.ts index 9ccde0c..aff940e 100644 --- a/src/app/feedback/display-feedback/display-feedback.component.ts +++ b/src/app/feedback/display-feedback/display-feedback.component.ts @@ -1,4 +1,6 @@ import { Component, OnInit } from '@angular/core'; +import { MatIconRegistry } from "@angular/material/icon"; +import { DomSanitizer } from "@angular/platform-browser"; @Component({ selector: 'app-display-feedback', @@ -7,13 +9,21 @@ import { Component, OnInit } from '@angular/core'; }) export class DisplayFeedbackComponent implements OnInit { + // Constructor'a svg'yi eklememe rağmen neden kullanılamadığını öğren + constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer) { + this.matIconRegistry.addSvgIcon( + 'male-icon', + this.domSanitizer.bypassSecurityTrustResourceUrl('assets\svgs\gender-male-svgrepo-com.svg') + ); + } + ngOnInit(): void { this.checkClick(); } parsedFeedbackValues: any[] = []; - checkClick() { // Bu fonksiyon ile local storage'deki veriyi dönüyoruz. ilerleyen zamanda bu fonksiyonu veriyi tabloya dökmek için kullanacağız!! + checkClick() { let valueKey: any; for (let i = 1; i < 100; i++) { // for döngüsüyle localstorage'deki veriyi döndürebiliyorum fakat şimdilik döngü 100'e kadar dönüyor. storage'daki veri sayısına göre dönmeyi öğren!!! valueKey = i.toString(); diff --git a/src/app/feedback/feedback.module.ts b/src/app/feedback/feedback.module.ts index b984654..411f9dd 100644 --- a/src/app/feedback/feedback.module.ts +++ b/src/app/feedback/feedback.module.ts @@ -8,6 +8,7 @@ import { SharedModule } from '../shared/shared.module'; import { FeedbackRoutingModule } from './feedback-routing.module'; import { RouterModule } from '@angular/router'; import { FeedbackComponent } from './feedback/feedback.component'; +import { MatIconModule } from '@angular/material/icon'; @@ -25,6 +26,7 @@ import { FeedbackComponent } from './feedback/feedback.component'; SharedModule, FeedbackRoutingModule, RouterModule, + MatIconModule, ] }) export class FeedbackModule { } diff --git a/src/app/feedback/send-feedback/send-feedback.component.ts b/src/app/feedback/send-feedback/send-feedback.component.ts index 0c55125..e870e01 100644 --- a/src/app/feedback/send-feedback/send-feedback.component.ts +++ b/src/app/feedback/send-feedback/send-feedback.component.ts @@ -10,14 +10,14 @@ import { Router } from '@angular/router'; }) export class SendFeedbackComponent { - public feedbackForm = new FormGroup({ // deneme sırasında sürekli form doldurmamak için şimdilik değer atadım işin bitince silmeyi unutma - name: new FormControl('Yasin', Validators.required), - surname: new FormControl('Seden', Validators.required), + public feedbackForm = new FormGroup({ + name: new FormControl('', Validators.required), + surname: new FormControl('', Validators.required), comment: new FormControl(), - email: new FormControl('yasinseden@yasin.com', [Validators.required, Validators.email]), + email: new FormControl('', [Validators.required, Validators.email]), phoneNumber: new FormControl(), gender: new FormControl('male', [Validators.required]), - reference: new FormControl('') // referans çıktısı sayı olarak olacak. Kullanırken dönen sayının karşılığı değeri döndürmeyi unutma + reference: new FormControl('') }) constructor( @@ -34,7 +34,8 @@ export class SendFeedbackComponent { const formValues = this.feedbackForm.value; const key = this.valueKey.toString(); window.localStorage.setItem(key, JSON.stringify(formValues)); - this.valueKey++ + this.valueKey++; + this.feedbackForm.reset() } navigateToFeedbackDisplay() { diff --git a/src/assets/svgs/gender-female-icon.svg b/src/assets/svgs/gender-female-icon.svg new file mode 100644 index 0000000..c0ffcbc --- /dev/null +++ b/src/assets/svgs/gender-female-icon.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/assets/svgs/gender-female-svgrepo-com.svg b/src/assets/svgs/gender-female-svgrepo-com.svg new file mode 100644 index 0000000..0461760 --- /dev/null +++ b/src/assets/svgs/gender-female-svgrepo-com.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/src/assets/svgs/gender-male-icon.svg b/src/assets/svgs/gender-male-icon.svg new file mode 100644 index 0000000..a82f5a3 --- /dev/null +++ b/src/assets/svgs/gender-male-icon.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/assets/svgs/gender-male-svgrepo-com.svg b/src/assets/svgs/gender-male-svgrepo-com.svg new file mode 100644 index 0000000..d53539e --- /dev/null +++ b/src/assets/svgs/gender-male-svgrepo-com.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file From bddd168aa5912d8701165c166aabcc5efdfa7cc5 Mon Sep 17 00:00:00 2001 From: Yasin Seden Date: Mon, 17 Jul 2023 17:23:02 +0300 Subject: [PATCH 4/4] =?UTF-8?q?phoneNumberDirective=20daha=20kullan=C4=B1?= =?UTF-8?q?=C5=9Fl=C4=B1=20hale=20getirildi?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/feedback/send-feedback/send-feedback.component.html | 2 +- src/app/shared/directives/phone-number-format.directive.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/feedback/send-feedback/send-feedback.component.html b/src/app/feedback/send-feedback/send-feedback.component.html index d38b665..32054ab 100644 --- a/src/app/feedback/send-feedback/send-feedback.component.html +++ b/src/app/feedback/send-feedback/send-feedback.component.html @@ -43,7 +43,7 @@ Phone number - +90   + +90
diff --git a/src/app/shared/directives/phone-number-format.directive.ts b/src/app/shared/directives/phone-number-format.directive.ts index 8d904d4..94d2459 100644 --- a/src/app/shared/directives/phone-number-format.directive.ts +++ b/src/app/shared/directives/phone-number-format.directive.ts @@ -21,7 +21,7 @@ export class PhoneNumberFormatDirective { const secondPart = digitsOnly.slice(6, 8); const lastPart = digitsOnly.slice(8, 10); - return `(${areaCode}) ${firstPart} ${secondPart} ${lastPart}`; + return `${areaCode} ${firstPart} ${secondPart} ${lastPart}`; } }