diff --git a/src/app/shared/models/aboutPortal.model.ts b/src/app/shared/models/aboutPortal.model.ts index e3cbb578a..284ed2a10 100644 --- a/src/app/shared/models/aboutPortal.model.ts +++ b/src/app/shared/models/aboutPortal.model.ts @@ -1,13 +1,24 @@ -export class AboutPortal { - id: string; - title: string; - sectionName: string; +export class AboutPortalItem { + id?: string; + sectionName?: string; description: string; + aboutPortalId?: string; - constructor(info, id?) { + constructor(info, id?, aboutPortalId?) { this.id = id; - this.title = info.title; this.sectionName = info.sectionName; this.description = info.description; + this.aboutPortalId = aboutPortalId; + } +} +export class AboutPortal { + id?: string; + title?: string; + aboutPortalItems: AboutPortalItem []; + + constructor(title: string, portalItems: AboutPortalItem[], id?) { + this.id = id; + this.title = title; + this.aboutPortalItems = portalItems; } } \ No newline at end of file diff --git a/src/app/shared/models/techAdmin.model.ts b/src/app/shared/models/techAdmin.model.ts index cff48f31d..2cb7b9073 100644 --- a/src/app/shared/models/techAdmin.model.ts +++ b/src/app/shared/models/techAdmin.model.ts @@ -1,9 +1,5 @@ -export class TechAdmin { +export interface TechAdmin { id?: string; - userId?: number; - - constructor(info) { - this.id = info.id; - this.userId = info.userId; - } + role: string; + isRegistered: boolean; } diff --git a/src/app/shared/services/portal/portal.service.ts b/src/app/shared/services/portal/portal.service.ts index 3d311c05e..c72dc1b8f 100644 --- a/src/app/shared/services/portal/portal.service.ts +++ b/src/app/shared/services/portal/portal.service.ts @@ -15,12 +15,12 @@ export class PortalService { * @param aboutPortal: AboutPortal */ updateInfoAboutPortal(aboutPortal: AboutPortal): Observable { - return this.http.put('/api/v1/InformationAboutPortal/Update', aboutPortal); + return this.http.put('/api/v1/AboutPortal/Update', aboutPortal); } /** * This method get information about Portal from the database. */ getInfoAboutPortal(): Observable { - return this.http.get('/api/v1/InformationAboutPortal/Get'); + return this.http.get('/api/v1/AboutPortal/Get'); } } diff --git a/src/app/shared/services/tech-admin/tech-admin.service.spec.ts b/src/app/shared/services/tech-admin/tech-admin.service.spec.ts index f93390857..3e4834035 100644 --- a/src/app/shared/services/tech-admin/tech-admin.service.spec.ts +++ b/src/app/shared/services/tech-admin/tech-admin.service.spec.ts @@ -1,3 +1,4 @@ +import { HttpClientTestingModule } from '@angular/common/http/testing'; import { TestBed } from '@angular/core/testing'; import { TechAdminService } from './tech-admin.service'; @@ -6,7 +7,9 @@ describe('TechAdminService', () => { let service: TechAdminService; beforeEach(() => { - TestBed.configureTestingModule({}); + TestBed.configureTestingModule({ + imports: [ HttpClientTestingModule ] + }); service = TestBed.inject(TechAdminService); }); diff --git a/src/app/shared/services/tech-admin/tech-admin.service.ts b/src/app/shared/services/tech-admin/tech-admin.service.ts index 0dc452a21..62c8fc6b0 100644 --- a/src/app/shared/services/tech-admin/tech-admin.service.ts +++ b/src/app/shared/services/tech-admin/tech-admin.service.ts @@ -1,3 +1,4 @@ +import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { TechAdmin } from '../../models/techAdmin.model'; @@ -7,18 +8,12 @@ import { TechAdmin } from '../../models/techAdmin.model'; }) export class TechAdminService { - constructor() { } + constructor(private http: HttpClient) { } /** * This method get TechAdmin by id - * !!But we need to change this function to get actual data from backend */ getProfile(): Observable { - return Observable.create(observer => { - setTimeout(() => { - observer.next({id:"id45nhb", userId: 95}); - }, 1000); - }) + return this.http.get(`/api/v1/Admin/GetProfile`); } - } diff --git a/src/app/shell/admin-tools/platform/about-edit/about-edit.component.html b/src/app/shell/admin-tools/platform/about-edit/about-edit.component.html index 17faa6951..c80225131 100644 --- a/src/app/shell/admin-tools/platform/about-edit/about-edit.component.html +++ b/src/app/shell/admin-tools/platform/about-edit/about-edit.component.html @@ -3,13 +3,29 @@

РЕДАГУВАННЯ ПРО ПОРТАЛ

+ +
+
+ + info_outline +
+ + + + + +
+
- -
diff --git a/src/app/shell/admin-tools/platform/about-edit/about-edit.component.scss b/src/app/shell/admin-tools/platform/about-edit/about-edit.component.scss index ac938ee25..3a62d3d86 100644 --- a/src/app/shell/admin-tools/platform/about-edit/about-edit.component.scss +++ b/src/app/shell/admin-tools/platform/about-edit/about-edit.component.scss @@ -1,9 +1,22 @@ +@import "src/app/shared/styles/create-form.scss"; @import "src/app/shared/styles/create-form-wrapper.scss"; -@import "src/app/shared/styles/buttons.scss"; +@import "src/app/shared/styles/validation-form.scss"; .wrapper{ padding: 1rem 5rem; margin-bottom: 2rem; &-title{ text-align: center; } +} + +.activeInfoBtn { + color: #3849f9; +} +.inactiveInfoBtn { + color: #AAAAAA; +} +.status-info-icon { + cursor: pointer; + margin: auto 0.5rem; + font-size: 16px; } \ No newline at end of file diff --git a/src/app/shell/admin-tools/platform/about-edit/about-edit.component.spec.ts b/src/app/shell/admin-tools/platform/about-edit/about-edit.component.spec.ts index 8ae081160..3316d1532 100644 --- a/src/app/shell/admin-tools/platform/about-edit/about-edit.component.spec.ts +++ b/src/app/shell/admin-tools/platform/about-edit/about-edit.component.spec.ts @@ -1,11 +1,14 @@ import { Component, Input } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; import { RouterTestingModule } from '@angular/router/testing'; import { NgxsModule } from '@ngxs/store'; import { AboutEditComponent } from './about-edit.component'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; describe('AboutEditComponent', () => { let component: AboutEditComponent; @@ -15,14 +18,18 @@ describe('AboutEditComponent', () => { await TestBed.configureTestingModule({ imports: [ NgxsModule.forRoot([]), + MatFormFieldModule, + MatInputModule, ReactiveFormsModule, MatButtonModule, MatIconModule, - RouterTestingModule + RouterTestingModule, + BrowserAnimationsModule ], declarations: [ AboutEditComponent, - MockAboutFormComponent + MockAboutFormComponent, + MockValidationHintForInputComponent ] }) .compileComponents(); @@ -44,7 +51,16 @@ describe('AboutEditComponent', () => { template: '' }) class MockAboutFormComponent { - @Input() AboutFormGroup: FormGroup; + @Input() AboutItemFormGroup: FormGroup; @Input() index: number; @Input() aboutFormAmount: number; } +@Component({ + selector: 'app-validation-hint-for-input', + template: '' +}) +class MockValidationHintForInputComponent { + @Input() type: string; + @Input() invalid: boolean; + @Input() forbiddenCharacter: string; +} \ No newline at end of file diff --git a/src/app/shell/admin-tools/platform/about-edit/about-edit.component.ts b/src/app/shell/admin-tools/platform/about-edit/about-edit.component.ts index 9d9a69570..cfe437f26 100644 --- a/src/app/shell/admin-tools/platform/about-edit/about-edit.component.ts +++ b/src/app/shell/admin-tools/platform/about-edit/about-edit.component.ts @@ -2,11 +2,11 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; import { Select, Store } from '@ngxs/store'; import { Observable, Subject } from 'rxjs'; -import { filter, takeUntil, takeWhile } from 'rxjs/operators'; +import { takeUntil, takeWhile } from 'rxjs/operators'; import { Constants } from 'src/app/shared/constants/constants'; import { TEXT_REGEX } from 'src/app/shared/constants/regex-constants'; import { NavBarName } from 'src/app/shared/enum/navigation-bar'; -import { AboutPortal } from 'src/app/shared/models/aboutPortal.model'; +import { AboutPortal, AboutPortalItem } from 'src/app/shared/models/aboutPortal.model'; import { NavigationBarService } from 'src/app/shared/services/navigation-bar/navigation-bar.service'; import { UpdateInfoAboutPortal } from 'src/app/shared/store/admin.actions'; import { AdminState } from 'src/app/shared/store/admin.state'; @@ -21,7 +21,13 @@ import { AddNavPath, DeleteNavPath } from 'src/app/shared/store/navigation.actio }) export class AboutEditComponent implements OnInit, OnDestroy { - AboutFormArray = new FormArray([]); + AboutPortalItemArray = new FormArray([]); + + amountOfSections = 0; + + isActiveHeaderInfoButton = false; + + AboutFormGroup: FormGroup; @Select(AppState.isDirtyForm) isDirtyForm$: Observable; @@ -41,13 +47,24 @@ export class AboutEditComponent implements OnInit, OnDestroy { private navigationBarService: NavigationBarService) { } ngOnInit(): void { + this.AboutFormGroup = this.fb.group({ + image: new FormControl(''), + title: new FormControl('', [Validators.pattern(TEXT_REGEX)]), + }); + this.aboutPortal$ .pipe( - filter((aboutPortal: AboutPortal) => !!aboutPortal), takeUntil(this.destroy$), ).subscribe((aboutPortal: AboutPortal) => { this.infoAboutPortal = aboutPortal; - (this.infoAboutPortal) ? this.AboutFormArray.push(this.newForm(this.infoAboutPortal)) : this.AboutFormArray.push(this.newForm()); + if (this.infoAboutPortal) { + this.infoAboutPortal.aboutPortalItems + .forEach((item) => this.AboutPortalItemArray.push(this.newForm(item))); + this.AboutFormGroup.controls['title'].setValue(this.infoAboutPortal.title); + this.amountOfSections = this.infoAboutPortal.aboutPortalItems.length; + } else { + this.AboutPortalItemArray.push(this.newForm()); + } }); this.store.dispatch(new AddNavPath(this.navigationBarService.creatNavPaths( { name: NavBarName.AdminTools, isActive: false, disable: false }, @@ -59,12 +76,10 @@ export class AboutEditComponent implements OnInit, OnDestroy { /** * This method creates new FormGroup */ - private newForm(aboutPortal?: AboutPortal): FormGroup { + private newForm(aboutPortalItem?: AboutPortalItem): FormGroup { const aboutEditFormGroup = this.fb.group({ - image: new FormControl(''), - title: new FormControl('', [Validators.pattern(TEXT_REGEX)]), sectionName: new FormControl('', [Validators.pattern(TEXT_REGEX)]), - description: new FormControl('', [Validators.maxLength(Constants.MAX_DESCRIPTION_ABOUT_LENGTH), Validators.required]), + description: new FormControl('', [Validators.required, Validators.maxLength(Constants.MAX_DESCRIPTION_ABOUT_LENGTH)]), }); aboutEditFormGroup.valueChanges @@ -75,7 +90,7 @@ export class AboutEditComponent implements OnInit, OnDestroy { this.store.dispatch(new MarkFormDirty(true)); }); - aboutPortal && aboutEditFormGroup.patchValue(aboutPortal, { emitEvent: false }); + aboutPortalItem && aboutEditFormGroup.patchValue(aboutPortalItem, { emitEvent: false }); return aboutEditFormGroup; } @@ -84,7 +99,8 @@ export class AboutEditComponent implements OnInit, OnDestroy { * This method creates new FormGroup adds new FormGroup to the FormArray */ addAboutForm(): void { - this.AboutFormArray.push(this.newForm()); + this.amountOfSections++; + this.AboutPortalItemArray.push(this.newForm()); } /** @@ -92,26 +108,30 @@ export class AboutEditComponent implements OnInit, OnDestroy { * @param index */ onDeleteForm(index: number): void { - this.AboutFormArray.removeAt(index); + this.amountOfSections--; + this.AboutPortalItemArray.removeAt(index); } onSubmit(): void { - if (this.AboutFormArray.invalid) { - this.checkValidationAboutFormArray(); + if (this.AboutPortalItemArray.invalid) { + this.checkValidationAboutFormArray(this.AboutPortalItemArray); + } else if (this.AboutFormGroup.invalid) { + this.checkValidation(this.AboutFormGroup); } else { - this.AboutFormArray.controls.forEach((form: FormGroup) => { - const aboutPortal: AboutPortal = new AboutPortal(form.value); - this.store.dispatch(new UpdateInfoAboutPortal(aboutPortal)); + let aboutPortalItemArray = []; + this.AboutPortalItemArray.controls.forEach((form: FormGroup) => { + aboutPortalItemArray.push(new AboutPortalItem(form.value)) }); + const aboutPortal: AboutPortal = new AboutPortal(this.AboutFormGroup.value.title, aboutPortalItemArray); + this.store.dispatch(new UpdateInfoAboutPortal(aboutPortal)); } } - /** - * This method marks each control of form in the array of forms in AboutFormArray as touched + * This method marks each control of form in the array of forms in formArray as touched */ - private checkValidationAboutFormArray(): void { - Object.keys(this.AboutFormArray.controls).forEach(key => { - this.checkValidation(this.AboutFormArray.get(key)); + private checkValidationAboutFormArray(formArray: FormArray): void { + Object.keys(formArray.controls).forEach(key => { + this.checkValidation(formArray.get(key)); }); } diff --git a/src/app/shell/admin-tools/platform/about-edit/about-form/about-form.component.html b/src/app/shell/admin-tools/platform/about-edit/about-form/about-form.component.html index 3a46ab08e..3e523690c 100644 --- a/src/app/shell/admin-tools/platform/about-edit/about-form/about-form.component.html +++ b/src/app/shell/admin-tools/platform/about-edit/about-form/about-form.component.html @@ -1,19 +1,6 @@ -
-
- - info_outline -
- - - - - -
+ [invalid]="AboutItemFormGroup.get('sectionName').invalid && AboutItemFormGroup.get('sectionName').touched" + [forbiddenCharacter]="AboutItemFormGroup.get('sectionName').errors?.pattern?.requiredPattern">
+ {{AboutItemFormGroup.get('description').value.length}}/{{constants.MAX_DESCRIPTION_ABOUT_LENGTH}}
@@ -39,10 +26,10 @@
+ [invalid]="AboutItemFormGroup.get('description').invalid && AboutItemFormGroup.get('description').touched">
-
diff --git a/src/app/shell/admin-tools/platform/about-edit/about-form/about-form.component.spec.ts b/src/app/shell/admin-tools/platform/about-edit/about-form/about-form.component.spec.ts index 7d4a0c377..42aa580cd 100644 --- a/src/app/shell/admin-tools/platform/about-edit/about-form/about-form.component.spec.ts +++ b/src/app/shell/admin-tools/platform/about-edit/about-form/about-form.component.spec.ts @@ -31,9 +31,7 @@ describe('AboutFormComponent', () => { beforeEach(() => { fixture = TestBed.createComponent(AboutFormComponent); component = fixture.componentInstance; - component.AboutFormGroup = new FormGroup({ - image: new FormControl(''), - title: new FormControl(''), + component.AboutItemFormGroup = new FormGroup({ sectionName: new FormControl(''), description: new FormControl('') }); diff --git a/src/app/shell/admin-tools/platform/about-edit/about-form/about-form.component.ts b/src/app/shell/admin-tools/platform/about-edit/about-form/about-form.component.ts index 5dc8ae0d8..22463c7f0 100644 --- a/src/app/shell/admin-tools/platform/about-edit/about-form/about-form.component.ts +++ b/src/app/shell/admin-tools/platform/about-edit/about-form/about-form.component.ts @@ -11,20 +11,19 @@ export class AboutFormComponent implements OnInit { readonly constants: typeof Constants = Constants; - @Input() AboutFormGroup: FormGroup; + @Input() AboutItemFormGroup: FormGroup; @Input() index: number; @Input() aboutFormAmount: number; @Output() deleteForm = new EventEmitter(); - isActiveHeaderInfoButton = false; isActiveSectionInfoButton = false; constructor() { } ngOnInit(): void { } - delete(): void { + onDelete(): void { this.deleteForm.emit(this.index); } } diff --git a/src/app/shell/admin-tools/platform/platform.component.html b/src/app/shell/admin-tools/platform/platform.component.html index 5b6bb9fcf..1ee9d9e30 100644 --- a/src/app/shell/admin-tools/platform/platform.component.html +++ b/src/app/shell/admin-tools/platform/platform.component.html @@ -7,33 +7,16 @@ editРедагувати -
Про портал
-

Раді вітати Вас на порталі "Позашкілля"!

-

Мета проєкту полягає в тому, щоб залучити якомога більше дітей, молоді та дорослих - до - занять улюбленою справою: чи то є хобі, розвага, спорт, мистецтво, наука, технологія, чи майбутня професія або - перекваліфікація через навчання.

-

Проєкт презентує різноманіття гуртків, секцій та класів з позашкільної освіти, культури, спорту, демонструє - вибір - освітніх послуг, максимально наближених до місця навчання або проживання.

-

Проєкт дає можливість реєстрації як споживача послуг (діти, молодь, дорослі) так і їх надавача (заклади освіти - будь-якої форми власності). -

-

Ідея проєкту реалізується за допомогою інформаційної системи пошуку гуртка за - параметрами місця їх знаходження; певного творчого колективу, де може реалізуватися особа; певного напряму - обраної - діяльності тощо.

-

Проєкт реалізується на виконання програми діджиталізації країни, загальнонаціональної програми Президента - “Здорова Україна”, задля подолання перепонів, які стоять на заваді реалізації творчого потенціалу дитини, - здійсненні її мрій.

-

Продукт створено за участі креативної команди професіоналів з ІТ компанії SoftServe, а також інших волонтерів - зі - сфери освіти, науки, культури та спорту - Партнери проєкту: МОН, Мінкульт, Мінмолодьспорт та інші органи державної влади та місцевого самоврядування. -

-

Ваші пропозиції по покращенню роботи сервісу можна надсилати: - Pozashkillia@gmail.com

-
+ +

{{(aboutPortal$ | async)?.title}}

+
+
+ {{portalItem.sectionName}} +
+

{{portalItem.description}}

+
+ + diff --git a/src/app/shell/admin-tools/platform/platform.component.scss b/src/app/shell/admin-tools/platform/platform.component.scss index ff3f2086b..68aca61c7 100644 --- a/src/app/shell/admin-tools/platform/platform.component.scss +++ b/src/app/shell/admin-tools/platform/platform.component.scss @@ -10,6 +10,10 @@ font-weight: normal; font-size: 13px; line-height: 18px; + white-space: break-spaces; + } + h4 { + margin-bottom: 20px; } } @@ -23,8 +27,8 @@ } .config-button { - font-weight: bold; - font-family:Open Sans; + font-weight: 300; + font-family: Open Sans; } .config-support p { diff --git a/src/app/shell/admin-tools/platform/platform.component.ts b/src/app/shell/admin-tools/platform/platform.component.ts index 8d91ee54d..5ac55013c 100644 --- a/src/app/shell/admin-tools/platform/platform.component.ts +++ b/src/app/shell/admin-tools/platform/platform.component.ts @@ -5,8 +5,10 @@ import { Select, Store } from '@ngxs/store'; import { Observable, Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { AdminTabs, AdminTabsUkr } from 'src/app/shared/enum/enumUA/admin-tabs'; +import { AboutPortal } from 'src/app/shared/models/aboutPortal.model'; import { Direction } from 'src/app/shared/models/category.model'; import { GetInfoAboutPortal } from 'src/app/shared/store/admin.actions'; +import { AdminState } from 'src/app/shared/store/admin.state'; import { GetDirections } from 'src/app/shared/store/meta-data.actions'; import { MetaDataState } from 'src/app/shared/store/meta-data.state'; @@ -24,6 +26,9 @@ export class PlatformComponent implements OnInit, OnDestroy { directions$: Observable; destroy$: Subject = new Subject(); + @Select(AdminState.aboutPortal) + aboutPortal$: Observable; + tabIndex: number; constructor(