-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* design maximum participation with the switch check condition * onInputChange * onInputChange wip * progress passing limit to saveForm --------- Co-authored-by: kachourihassen <[email protected]>
- Loading branch information
1 parent
c74c1d8
commit 00089ed
Showing
15 changed files
with
280 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
67 changes: 67 additions & 0 deletions
67
...ampaigns/components/draft-maximum-participation/draft-maximum-participation.component.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| .title-section { | ||
| font-style: normal; | ||
| font-weight: bold; | ||
| font-size: 22px; | ||
| line-height: 28px; | ||
| text-align: center; | ||
| letter-spacing: 1px; | ||
| color: #1f2337; | ||
| } | ||
| .label-type { | ||
| font-style: normal; | ||
| font-family: 'Poppins'; | ||
| font-weight: 400; | ||
| font-size: 16px; | ||
| line-height: 125.9%; | ||
| letter-spacing: 0.03em; | ||
| color: #75758f; | ||
| text-align: center; | ||
| display: flow; | ||
| margin-bottom: 25px !important; | ||
| } | ||
| .small-label { | ||
| font-style: normal; | ||
| font-weight: 600; | ||
| font-size: 14px; | ||
| line-height: 125.9%; | ||
| letter-spacing: 0.03em; | ||
| color: #75758F; | ||
| padding-left: 170px !important; | ||
| } | ||
| .styleForInputMedia { | ||
| border-style: solid; | ||
| border-radius: 30px; | ||
| border-color: #D6D6E8; | ||
| outline: none; | ||
| width: 40%; | ||
| height: 150%; | ||
| text-align: start; | ||
| color: #323754; | ||
| margin-right: 30px !important; | ||
| position: relative; | ||
| bottom: 0.4em; | ||
| text-align: center; | ||
| } | ||
|
|
||
| /* .cont{ | ||
| display : flex; | ||
| flex-direction: row; | ||
| } */ | ||
|
|
||
| .test{ display: flex; justify-content: flex-end;} | ||
| .left { flex-grow: 1; } | ||
| .right { display: flex; align-items: center; } | ||
|
|
||
|
|
||
| /* Hide the spinner controls for number input */ | ||
| input[type="number"]::-webkit-inner-spin-button, | ||
| input[type="number"]::-webkit-outer-spin-button { | ||
| -webkit-appearance: none; | ||
| appearance: none; | ||
| margin: 0; | ||
| } | ||
|
|
||
| /* Hide the spinner controls for Firefox */ | ||
| input[type="number"] { | ||
| -moz-appearance: textfield; | ||
| } |
58 changes: 58 additions & 0 deletions
58
...mpaigns/components/draft-maximum-participation/draft-maximum-participation.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| <div class="col-12 px-3 padding-small-version"> | ||
| <div | ||
| class="col-md-12 col-lg-12 col-xs-12 d-flex justify-content-center pt-4" | ||
| > | ||
| <label class="title-section"> | ||
| {{ 'campaign.title_maximum_participation' | translate }}</label> | ||
| </div> | ||
| <div class="row d-flex justify-content-center pt-3 mb-1"> | ||
| <div class="col-xl-10 col-md-12 col-lg-10 col-sm-12"> | ||
| <label class="label-type">{{ | ||
| 'campaign_sous_titre_max_part' | translate | ||
| }}</label> | ||
| </div> | ||
| </div> | ||
| <div class="row d-flex"> | ||
| <!-- <div class="cont col-xl-10 col-md-12 col-lg-10 col-sm-12"> | ||
| <p class="small-label mb-0">{{ 'campaign_descrip-max-partic' | translate }}</p> | ||
| <input | ||
| type="text" | ||
| class="styleForInputMedia" | ||
| aria-describedby="basic-addon2" | ||
| style="float: right;" | ||
| /> | ||
| <ui-switch | ||
| id="toggle" | ||
| > | ||
| </ui-switch> | ||
| </div> --> | ||
|
|
||
|
|
||
| <div class="test"> | ||
| <div class="left col-xl-10 col-md-12 col-lg-10 col-sm-12"> | ||
| <p class="par small-label mb-0">{{ 'campaign_descrip-max-partic' | translate }}</p> | ||
| </div> | ||
| <div class="right"> | ||
| <input | ||
| type="number" | ||
| pattern="[0-9]*" | ||
| inputmode="numeric" | ||
| class="styleForInputMedia" | ||
| aria-describedby="basic-addon2" | ||
| [disabled]="!toggleSwitch.checked" | ||
| [placeholder]="toggleSwitch.checked ? '' : '-'" | ||
| [(ngModel)]="inputValue" | ||
| (input)="onInputChanged()" | ||
| /> | ||
| <ui-switch | ||
| id="toggle" | ||
| class="button" | ||
| #toggleSwitch | ||
| (change)="onInputChanged()" | ||
| ></ui-switch> | ||
|
|
||
|
|
||
| </div> |
25 changes: 25 additions & 0 deletions
25
...igns/components/draft-maximum-participation/draft-maximum-participation.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
|
||
| import { DraftMaximumParticipationComponent } from './draft-maximum-participation.component'; | ||
|
|
||
| describe('DraftMaximumParticipationComponent', () => { | ||
| let component: DraftMaximumParticipationComponent; | ||
| let fixture: ComponentFixture<DraftMaximumParticipationComponent>; | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| declarations: [ DraftMaximumParticipationComponent ] | ||
| }) | ||
| .compileComponents(); | ||
| }); | ||
|
|
||
| beforeEach(() => { | ||
| fixture = TestBed.createComponent(DraftMaximumParticipationComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
96 changes: 96 additions & 0 deletions
96
...campaigns/components/draft-maximum-participation/draft-maximum-participation.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| import { Component, OnInit,ViewChild,Output,EventEmitter,OnDestroy } from '@angular/core'; | ||
| import { UntypedFormArray, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms'; | ||
| import { ActivatedRoute } from '@angular/router'; | ||
| import { CampaignHttpApiService } from '@core/services/campaign/campaign.service'; | ||
| import { debounceTime, distinctUntilChanged, switchMap, takeUntil, tap } from 'rxjs/operators'; | ||
| import { Subject,Subscription } from 'rxjs'; | ||
| import { DraftCampaignService } from '@campaigns/services/draft-campaign.service'; | ||
|
|
||
|
|
||
| @Component({ | ||
| selector: 'app-draft-maximum-participation', | ||
| templateUrl: './draft-maximum-participation.component.html', | ||
| styleUrls: ['./draft-maximum-participation.component.css'] | ||
| }) | ||
|
|
||
|
|
||
| export class DraftMaximumParticipationComponent implements OnInit { | ||
|
|
||
| private inputValueSubject = new Subject<string>(); | ||
| private inputValueSubscription: Subscription | undefined; | ||
| private isDestroyed = new Subject(); | ||
|
|
||
| form = new UntypedFormGroup({ | ||
| limitParticipation: new UntypedFormControl(0, [Validators.required]) | ||
| }); | ||
| constructor(private route: ActivatedRoute, | ||
| private campaignService: CampaignHttpApiService, | ||
| private service :DraftCampaignService) { | ||
|
|
||
| this.form = new UntypedFormGroup( | ||
| { | ||
| limitParticipation: new UntypedFormControl(0, { | ||
| validators: Validators.required | ||
| }), | ||
| } | ||
| ); | ||
| } | ||
| id! :any; | ||
| ngOnInit(): void { | ||
| // Accessing the ID parameter from the URL | ||
| this.id = this.route.snapshot.paramMap.get('id'); | ||
|
|
||
| // Set up the subscription | ||
| this.inputValueSubscription = this.inputValueSubject | ||
| .pipe( | ||
| debounceTime(1000), // Adjust the debounce time as needed (in milliseconds) | ||
| switchMap((value) => { | ||
| console.log('SwitchMap triggered with value:', value); | ||
|
|
||
| return this.saveParticipantsNumber(+value)} | ||
| ) // Convert value to a number and send the API request | ||
| ) | ||
| .subscribe(); | ||
|
|
||
| } | ||
| inputValue: string = ''; | ||
| @ViewChild('toggleSwitch', { static: true }) toggleSwitch: any; | ||
| onInputChanged() { | ||
| console.log('Emitting value:', this.inputValue); | ||
| this.saveForm(); | ||
| !this.toggleSwitch.checked && (this.inputValue = ''); | ||
| this.form.get('limitParticipation')?.setValue(this.inputValue || 0) | ||
| return this.campaignService.updateOneById({limitParticipation :this.inputValue || 0},this.id).subscribe((data : any)=>{console.log(data);}) | ||
| } | ||
|
|
||
| private saveParticipantsNumber(limit : number){ | ||
| console.log('here') | ||
| return this.campaignService.updateOneById({limit},this.id) | ||
| } | ||
|
|
||
|
|
||
| saveForm() { | ||
| this.form.valueChanges | ||
| .pipe( | ||
| debounceTime(500), | ||
| tap((values: any) => { | ||
| if (this.id) { | ||
| this.service.autoSaveFormOnValueChanges({ | ||
| formData: values, | ||
| id: this.id | ||
| }); | ||
| } | ||
| }), | ||
| takeUntil(this.isDestroyed) | ||
| ) | ||
| .subscribe(); | ||
| } | ||
|
|
||
| ngOnDestroy(): void { | ||
| if (this.inputValueSubscription) { | ||
| this.inputValueSubscription.unsubscribe(); | ||
| } | ||
| this.isDestroyed.next(''); | ||
| this.isDestroyed.unsubscribe(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -47,4 +47,5 @@ export interface ICampaignResponse { | |
| file?: string; | ||
| urlPicUser?: string; | ||
| missions?: []; | ||
| limit:number; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.