Add new components for AI and tutorials, update routing, and enhance file upload functionality

2025-08-04 10:38:46 +03:00
parent 18c6906637
commit 483d029952
206 changed files with 2362 additions and 1199 deletions
@@ -0,0 +1,41 @@
+<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="Markdown text">
+        <textarea class="variable-textarea" [(ngModel)]="tutorial.description"></textarea>
+        <markdown class="variable-binding" [data]="tutorial.description"></markdown>
+      </mat-tab>
+      <mat-tab label="Result">
+        <markdown class="preview" [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)="updateTutorial()">Save</button>
+    @if (hasError){
+      <mat-error>
+        {{errorMessage}}
+      </mat-error>
+    }
+    @if(submitted) {
+      <h4>Tutorial was submitted successfully!</h4>
+      <button matButton routerLink="../tutorial-add">Add new tutorial</button>
+      <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 { TutorialEditComponent } from './tutorial-edit.component';
+
+describe('TutorialEditComponent', () => {
+  let component: TutorialEditComponent;
+  let fixture: ComponentFixture<TutorialEditComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TutorialEditComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TutorialEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,90 @@
+import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+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 {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {Tutorial} from '../../../models/tutorial.model';
+import {UserApiService} from '../user-api.service';
+import {ActivatedRoute, RouterLink} from '@angular/router';
+
+@Component({
+  selector: 'app-tutorial-edit.component',
+  imports: [
+    MarkdownComponent,
+    MatButton,
+    MatCard,
+    MatCardActions,
+    MatCardContent,
+    MatCardHeader,
+    MatFormField,
+    MatInput,
+    MatLabel,
+    MatTab,
+    MatTabGroup,
+    ReactiveFormsModule,
+    FormsModule,
+    MatFormField,
+    RouterLink,
+    MatError
+  ],
+  templateUrl: './tutorial-edit.component.html',
+  styleUrl: './tutorial-edit.component.scss',
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class TutorialEditComponent {
+  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 userApiService: UserApiService, private route: ActivatedRoute) {
+
+    this.route.queryParams
+      .subscribe(params => {
+        console.log(params);
+        this.id = params['id'];
+        console.log(this.id);
+      });
+
+    this.userApiService.getTutorial(this.id).subscribe(
+      data=>{
+        this.tutorial = data;
+      }
+    );
+  }
+  updateTutorial(): void {
+    this.userApiService.update(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;
+        });
+  }
+}