Add moderator module with routing, components, and API integration

2025-07-17 13:08:23 +03:00
parent c67360273e
commit 70338eae0b
42 changed files with 866 additions and 110 deletions
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ModeratorApiService } from './moderator-api.service';
+
+describe('ModeratorApiService', () => {
+  let service: ModeratorApiService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ModeratorApiService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import {HttpClient, HttpHeaders} from '@angular/common/http';
+import {Observable} from 'rxjs';
+import {Tutorial} from '../models/tutorial.model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ModeratorApiService {
+  baseUrl = 'http://localhost:8080/api/moderator';
+
+
+  constructor(private http: HttpClient) {
+
+  }
+
+  getBePublishedTutorials(): Observable<Tutorial[]> {
+    return this.http.get<Tutorial[]>(`${this.baseUrl}/tutorials`);
+  }
+
+  getTutorial(id: string | null | undefined): Observable<Tutorial> {
+    return this.http.get<Tutorial>(`${this.baseUrl}/tutorial-get/${id}`);
+  }
+
+  publish(id: any,data: any): Observable<any> {
+    return this.http.put(`${this.baseUrl}/tutorial-update/${id}`, data);
+  }
+
+}
@@ -0,0 +1 @@
+<p>moderator-welcome.component works!</p>
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModeratorWelcomeComponent } from './moderator-welcome.component';
+
+describe('ModeratorWelcomeComponent', () => {
+  let component: ModeratorWelcomeComponent;
+  let fixture: ComponentFixture<ModeratorWelcomeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ModeratorWelcomeComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ModeratorWelcomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-moderator-welcome.component',
+  imports: [],
+  templateUrl: './moderator-welcome.component.html',
+  styleUrl: './moderator-welcome.component.scss'
+})
+export class ModeratorWelcomeComponent {
+
+}
@@ -0,0 +1,4 @@
+<app-side-bar-moderator class="pc-sidebar" ></app-side-bar-moderator>
+<div class="pc-container">
+  <router-outlet></router-outlet>
+</div>
@@ -0,0 +1,13 @@
+//---------------
+.pc-sidebar{
+  top: 65px;
+  overflow-y: auto;
+  background-color: rgba(153, 153, 153, 0.16);
+
+  backdrop-filter: blur(8px);
+}
+.pc-container{
+  top: 0px;
+  padding-left: 5px;
+  padding-right: 5px;
+}
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModeratorComponent } from './moderator.component';
+
+describe('ModeratorComponent', () => {
+  let component: ModeratorComponent;
+  let fixture: ComponentFixture<ModeratorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ModeratorComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ModeratorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import {RouterOutlet} from '@angular/router';
+import {SideBarModeratorComponent} from '../side-bar-moderator.component/side-bar-moderator.component';
+
+
+
+@Component({
+  selector: 'app-moderator.component',
+  imports: [
+    RouterOutlet,
+    SideBarModeratorComponent,
+
+  ],
+  templateUrl: './moderator.component.html',
+  styleUrl: './moderator.component.scss'
+})
+export class ModeratorComponent {
+
+}
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {moderatorRouting} from './moderator.routing';
+import {ModeratorComponent} from './moderator.component/moderator.component';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    moderatorRouting,
+    ModeratorComponent,
+    CommonModule
+  ]
+})
+export class ModeratorModule { }
@@ -0,0 +1,7 @@
+import { ModeratorRouting } from './moderator.routing';
+
+describe('ModeratorRouting', () => {
+  it('should create an instance', () => {
+    expect(new ModeratorRouting()).toBeTruthy();
+  });
+});
@@ -0,0 +1,27 @@
+import {RouterModule, Routes} from '@angular/router';
+import {UserComponent} from '../user-module/user.component/user.component';
+import {ModeratorComponent} from './moderator.component/moderator.component';
+
+const MODERATOR_ROUTES: Routes = [
+  {
+    path: '',
+    component: ModeratorComponent,
+
+    children: [
+      {
+        path: 'moderator-welcome',
+        loadComponent: () => import('../moderator-module/moderator-welcome.component/moderator-welcome.component').then((c) => c.ModeratorWelcomeComponent),
+      },
+      {
+        path: 'tutorials-list',
+        loadComponent: () => import('../moderator-module/tutorials-list.component/tutorials-list.component').then((c) => c.TutorialsListComponent)
+      },
+      {
+        path: 'tutorial-preview',
+        loadComponent: () => import('../moderator-module/tutorial-preview.component/tutorial-preview.component').then((c) => c.TutorialPreviewComponent)
+      }
+    ]
+  }
+];
+
+export const moderatorRouting = RouterModule.forChild(MODERATOR_ROUTES);
@@ -0,0 +1,18 @@
+<mat-nav-list>
+  <a mat-list-item routerLink="moderator-welcome">
+        <span class="entry">
+          <mat-icon>house</mat-icon>
+          @if (!isCollapsed) {
+            <span >Dashboard</span>
+          }
+        </span>
+  </a>
+  <a mat-list-item routerLink="tutorials-list">
+        <span class="entry">
+          <mat-icon>newspaper</mat-icon>
+          @if (!isCollapsed) {
+            <span >Tutorials</span>
+          }
+        </span>
+  </a>
+</mat-nav-list>
@@ -0,0 +1,14 @@
+.entry{
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding:0.75rem;
+  color: rgba(24, 255, 255, 0.96);
+
+}
+
+a.mdc-list-item
+{
+
+  background-color: rgba(24,255,255,0.04);
+}
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SideBarModeratorComponent } from './side-bar-moderator.component';
+
+describe('SideBarModeratorComponent', () => {
+  let component: SideBarModeratorComponent;
+  let fixture: ComponentFixture<SideBarModeratorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SideBarModeratorComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SideBarModeratorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,20 @@
+import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import {MatIcon} from '@angular/material/icon';
+import {MatListItem, MatNavList} from '@angular/material/list';
+import {RouterLink} from '@angular/router';
+
+@Component({
+  selector: 'app-side-bar-moderator',
+  imports: [
+    MatIcon,
+    MatListItem,
+    MatNavList,
+    RouterLink
+  ],
+  templateUrl: './side-bar-moderator.component.html',
+  styleUrl: './side-bar-moderator.component.scss',
+  schemas:[CUSTOM_ELEMENTS_SCHEMA]
+})
+export class SideBarModeratorComponent {
+  isCollapsed = false;
+}
@@ -0,0 +1,43 @@
+<mat-card  appearance="outlined">
+  <mat-card-header>
+    <mat-card-title>Edit tutorial</mat-card-title>
+  </mat-card-header>
+  <mat-card-content >
+    <mat-form-field class="example-full-width">
+      <mat-label>Title</mat-label>
+      <input matInput required
+             [(ngModel)]="tutorial.title">
+    </mat-form-field>
+    <mat-tab-group>
+      <mat-tab label="Preview">
+        <markdown class="preview" [data]="tutorial.description"></markdown>
+      </mat-tab>
+      <mat-tab label="Edit">
+        <textarea class="variable-textarea" [(ngModel)]="tutorial.description"></textarea>
+        <markdown class="variable-binding" [data]="tutorial.description"></markdown>
+      </mat-tab>
+
+      <mat-tab label="Example">
+        <textarea class="variable-textarea" [(ngModel)]="markdown"></textarea>
+        <markdown class="variable-binding" [data]="markdown"></markdown>
+      </mat-tab>
+    </mat-tab-group>
+  </mat-card-content>
+  <mat-card-actions>
+
+    <button matButton (click)="publishTutorial()">Publicate</button>
+    @if (hasError){
+      <mat-error>
+        {{errorMessage}}
+      </mat-error>
+    }
+    @if(submitted) {
+      <h4>Tutorial was submitted successfully!</h4>
+
+      <button matButton routerLink="../tutorials-list">Back to list</button>
+    }
+
+  </mat-card-actions>
+</mat-card>
+
+
@@ -0,0 +1,59 @@
+.submit-form {
+  max-width: 400px;
+  margin: auto;
+}
+
+mat-card{
+  //margin: 20px;
+}
+mat-card-title{
+  color: cyan;
+}
+
+.example-form {
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
+}
+
+
+.example-full-width {
+  width: 100%;
+}
+
+
+.variable-binding,
+.variable-textarea {
+  width: 49%;
+}
+
+.variable-textarea {
+  border-radius: 5px;
+  box-shadow: 0 1px 2px rgba(0,0,0,.07);
+  min-height: 420px;
+  padding: 8px;
+  transition: all 300ms ease-out;
+}
+
+.variable-textarea:hover {
+  box-shadow: 0 6px 12px 3px rgba(0,0,0,.09),
+  0 2px 3px 1px rgba(0,0,0,.06);
+}
+
+.variable-binding {
+  display: block;
+  float: right;
+}
+
+.preview {
+  /*  display: block;
+    float: right;*/
+}
+
+.mat-mdc-card-outlined {
+  background-color: var(--mat-card-outlined-container-color, var(--mat-sys-surface));
+  border-radius:0;
+  border-width: var(--mat-card-outlined-outline-width, 1px);
+  border-color: var(--mat-card-outlined-outline-color, var(--mat-sys-outline-variant));
+  box-shadow: var(--mat-card-outlined-container-elevation, var(--mat-sys-level0));
+}
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TutorialPreviewComponent } from './tutorial-preview.component';
+
+describe('TutorialPreviewComponent', () => {
+  let component: TutorialPreviewComponent;
+  let fixture: ComponentFixture<TutorialPreviewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TutorialPreviewComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TutorialPreviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,94 @@
+import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import {FormsModule} from "@angular/forms";
+import {MarkdownComponent} from "ngx-markdown";
+import {MatButton} from "@angular/material/button";
+import {MatCard, MatCardActions, MatCardContent, MatCardHeader} from "@angular/material/card";
+import {MatError, MatFormField, MatInput, MatLabel} from "@angular/material/input";
+import {MatTab, MatTabGroup} from "@angular/material/tabs";
+import {ActivatedRoute, RouterLink} from "@angular/router";
+import {Tutorial} from '../../models/tutorial.model';
+import {UserApiService} from '../../user-module/user-api.service';
+import {ModeratorApiService} from '../moderator-api.service';
+
+@Component({
+  selector: 'app-tutorial-preview.component',
+  imports: [
+    FormsModule,
+    MarkdownComponent,
+    MatButton,
+    MatCard,
+    MatCardActions,
+    MatCardContent,
+    MatCardHeader,
+    MatError,
+    MatFormField,
+    MatInput,
+    MatLabel,
+    MatTab,
+    MatTabGroup,
+    RouterLink,
+    MatError,
+    MatFormField
+  ],
+  templateUrl: './tutorial-preview.component.html',
+  styleUrl: './tutorial-preview.component.scss',
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class TutorialPreviewComponent {
+  tutorial: Tutorial = new Tutorial();
+  submitted = false;
+  hasError = false;
+  errorMessage = '';
+  markdown = `## Markdown __rulez__!
+---
+
+### Syntax highlight
+\`\`\`typescript
+const language = 'typescript';
+\`\`\`
+
+### Lists
+1. Ordered list
+2. Another bullet point
+   - Unordered list
+   - Another unordered bullet
+
+### Blockquote
+> Blockquote to the max`;
+
+  private id: string | null | undefined;
+
+  constructor(private moderatorApiService: ModeratorApiService, private route: ActivatedRoute) {
+
+    this.route.queryParams
+      .subscribe(params => {
+        console.log(params);
+        this.id = params['id'];
+        console.log(this.id);
+      });
+
+    this.moderatorApiService.getTutorial(this.id).subscribe(
+      data=>{
+        this.tutorial = data;
+      }
+    );
+  }
+
+  publishTutorial(): void {
+    this.tutorial.published = true;
+    this.moderatorApiService.publish(this.id, this.tutorial)
+      .subscribe(
+        response => {
+          console.log(response);
+          this.submitted = true;
+          this.hasError = false;
+        },
+        error => {
+          console.log(error);
+
+          this.errorMessage = error.error.message;
+
+          this.hasError = true;
+        });
+  }
+}
@@ -0,0 +1,44 @@
+<table mat-table [dataSource]="dataSource">
+  @for (column of columnsSchema; track column){
+    <ng-container [matColumnDef]="column.key">
+      <th mat-header-cell *matHeaderCellDef>
+        {{column.label}}
+      </th>
+      <td mat-cell *matCellDef="let element">
+         @switch (column.type) {
+
+          @case('isEdit') {
+            <div class="btn-edit" >
+              <button mat-button routerLink='../tutorial-preview' [queryParams]="{id:element.id}" (click)="element.isEdit = !element.isEdit">
+                Preview
+              </button>
+
+            </div>
+          }
+          @case ('boolean') {
+            <mat-slide-toggle
+              class="example-margin"
+              [checked]="element[column.key]"
+
+              (change)="publish(element, $event.checked)"
+            >
+
+            </mat-slide-toggle>
+          }
+          @case ('datetime') {
+            {{ element[column.key] | date: 'medium' }}
+          }
+          @default {
+            {{ element[column.key] }}
+          }
+        }
+
+      </td>
+    </ng-container>
+
+  }
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+</table>
+
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TutorialsListComponent } from './tutorials-list.component';
+
+describe('TutorialsListComponent', () => {
+  let component: TutorialsListComponent;
+  let fixture: ComponentFixture<TutorialsListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TutorialsListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TutorialsListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,144 @@
+import { Component } from '@angular/core';
+import {DatePipe} from "@angular/common";
+import {MatButton} from "@angular/material/button";
+import {
+  MatCell,
+  MatCellDef, MatColumnDef,
+  MatHeaderCell, MatHeaderCellDef,
+  MatHeaderRow,
+  MatHeaderRowDef,
+  MatRow,
+  MatRowDef, MatTable, MatTableDataSource
+} from "@angular/material/table";
+import {MatCheckbox} from "@angular/material/checkbox";
+import {MatSlideToggle} from "@angular/material/slide-toggle";
+import {Router, RouterLink} from "@angular/router";
+import {Tutorial} from '../../models/tutorial.model';
+import {EventData} from '../../_shared/event.class';
+import {ModeratorApiService} from '../moderator-api.service';
+import {TokenStorageService} from '../../services/token-storage.service';
+import {EventBusService} from '../../_shared/event-bus.service';
+import {AuthService} from '../../services/auth.service';
+import {HttpHeaders} from '@angular/common/http';
+
+@Component({
+  selector: 'app-tutorials-list.component',
+  imports: [
+    DatePipe,
+    MatButton,
+    MatCell,
+    MatCellDef,
+    MatHeaderCell,
+    MatHeaderRow,
+    MatHeaderRowDef,
+    MatRow,
+    MatRowDef,
+    MatSlideToggle,
+    MatTable,
+    RouterLink,
+    MatColumnDef,
+    MatHeaderCellDef
+  ],
+  templateUrl: './tutorials-list.component.html',
+  styleUrl: './tutorials-list.component.scss'
+})
+export class TutorialsListComponent {
+  displayedColumns: string[] = TutorialColumns.map((col) => col.key)
+  columnsSchema: any = TutorialColumns
+  dataSource = new MatTableDataSource<Tutorial>()
+
+
+
+  constructor(private moderatorApiService: ModeratorApiService,
+              private storageService: TokenStorageService,
+              private eventBusService: EventBusService,
+              private authService: AuthService,
+              private router: Router
+  ) {
+    this.getTutorials();
+  }
+  getTutorials(): void {
+    this.moderatorApiService.getBePublishedTutorials()
+      .subscribe(( data:Tutorial[] ) => {
+          this.dataSource.data = data;
+          console.log(data);
+        },
+        error => {
+          console.log(error);
+          if (
+            (
+              error.status === 401
+
+            )
+            && this.storageService.isLoggedIn()
+          ) {
+            this.eventBusService.emit(new EventData('logout', null));
+          }
+        });
+  }
+
+
+  publish(element: any, checked: boolean){
+    element.published = checked;
+    this.moderatorApiService.publish(element.id, element).subscribe(
+      response => {
+        console.log(response);
+      },
+      error => {
+        console.log(error);
+      });
+
+  }
+
+
+  logout(): void {
+    this.authService.logout().subscribe({
+      next: res => {
+        console.log(res);
+        this.storageService.clean();
+
+        //window.location.reload();
+        this.router.navigate(['main/generate-image']).then(() => {
+          //window.location.reload();
+        })
+
+      },
+      error: err => {
+        console.log(err);
+      }
+    });
+
+  }
+}
+
+export const TutorialColumns = [
+
+  {
+    key: 'title',
+    type: 'text',
+    label: 'Title',
+    required: true,
+  },
+  {
+    key: 'published',
+    type: 'boolean',
+    label: 'Is Published',
+  },
+  {
+    key: 'created',
+    type: 'datetime',
+    label: 'Created Date',
+    required: true,
+  },
+  {
+    key: 'modified',
+    type: 'datetime',
+    label: 'Modified Date',
+    required: true
+  },
+  {
+    key: 'isEdit',
+    type: 'isEdit',
+    label: '',
+  }
+];