Merge pull request #37 from TomasSirotek/feature/course-dashboard-detail

Feature/course dashboard detail

src/Application/Features/Courses/Queries/GetAllCourses/GetCourses.cs

@@ -24,9 +24,12 @@ public async Task<GetCourseVm> Handle(GetCoursesQuery request, CancellationToken
                 .AsNoTracking()
                 .Include(c => c.Categories)
                 .Include(c => c.Chapters)
+                .Include(c => c.UserCourses)
+                .Where(c => c.IsPublished.Equals(true))
                 .ProjectTo<QueryDto>(_mapper.ConfigurationProvider)
                 .OrderBy(t => t.Title)
                 .ToListAsync(cancellationToken)
         };
+
     }
 }

src/Application/Features/Courses/Queries/GetAllCourses/QueryDto.cs

@@ -13,6 +13,8 @@ public class QueryDto
     public IReadOnlyCollection<CategoryDto> Categories { get; set; }
     public IReadOnlyCollection<ChapterDto> Chapters { get; init; }
 
+    public string? AuthorName { get; set; }
+
     public QueryDto()
     {
         Categories = Array.Empty<CategoryDto>();
@@ -24,6 +26,8 @@ private class Mapping : Profile
         public Mapping()
         {
             CreateMap<Course, QueryDto>()
+                .ForMember(dto => dto.AuthorName, 
+                    c => c.MapFrom(c => c.UserCourses.FirstOrDefault()!.User!.UserName))
                 .ForMember(dto => dto.Categories, 
                     c 
                         => c.MapFrom(c 

src/UI/package.json

@@ -65,6 +65,7 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
     "tailwindcss": "^3.3.5",
+    "tailwindcss-animated": "^1.0.1",
     "typescript": "~5.2.2"
   }
 }

src/UI/src/app/core/constant/menu.ts

@@ -3,29 +3,24 @@ import { MenuItem } from '../models/menu.model';
 export class Menu {
   public static pages: MenuItem[] = [
     {
-      group: 'Pages',
+      group: '',
       separator: true,
       items: [
+        {
+          icon:' heroBuildingStorefront',
+          label: 'Courses',
+          route: '/courses',
+        },
         {
           icon: 'heroFolderOpen',
           label: 'Dashboard',
           route: '/dashboard',
           children: [
             { label: 'Overview', route: '/dashboard' },
-            { label: 'Teaching', route: '/dashboard/teaching' },
-            { label: 'Purchased', route: '/dashboard/purchased' },
-
-          ],
-        },
-        {
-          icon:' heroBuildingStorefront',
-          label: 'Courses',
-          route: '/courses',
-          children: [
-            { label: 'Course store', route: '/courses' },
-            { label: 'Saved courses', route: '/teaching' },
+            { label: 'My courses', route: '/dashboard/my-courses' },
           ],
         },
+
       ],
     },
     {
@@ -34,7 +29,7 @@ export class Menu {
       items: [
         {
           icon: 'heroBuildingStorefront',
-          label: 'Settings',
+          label: 'Account settings',
           route: '/settings',
         },
 

src/UI/src/app/modules/auth/pages/login/login.component.ts

@@ -63,7 +63,7 @@ export class LoginComponent implements OnInit, OnDestroy{
     this.authService.authenticate(email, password)
     .subscribe({
       next: () => {
-        this._router.navigate(['/dashboard']);
+        this._router.navigate(['/courses']);
       },
       error: (err: any) => {
         this.toastr.error(JSON.stringify(err));

src/UI/src/app/modules/dashboard/dashboard-routing.module.ts

@@ -14,12 +14,12 @@ const routes: Routes = [
     canActivate: [AuthGuard],
   },
   {
-    path: 'teaching',
+    path: 'my-courses',
     component: TeachingComponent,
     canActivate: [AuthGuard],
   },
   {
-    path: 'teaching/:id',
+    path: 'my-courses/:id',
     component: CoursesDetailComponent,
     canActivate: [AuthGuard],
   },

src/UI/src/app/modules/dashboard/pages/dashboard/dashboard.component.ts

@@ -24,7 +24,6 @@ export class DashboardComponent implements OnInit{
   ngOnInit(): void {
     this.ds.getDashboardData().subscribe(data => {
 
-      console.log(data)
     });
 
 

src/UI/src/app/modules/dashboard/pages/user-courses/courses-detail-component.ts

@@ -133,6 +133,7 @@ export class CoursesDetailComponent implements OnInit {
     });
   }
 
+
   onCourseTitleChange(newTitle: string): void {
     this.course.title = newTitle;
     this.isChanged = true;
@@ -174,7 +175,6 @@ export class CoursesDetailComponent implements OnInit {
     // 1. cannot save if the fields are not filled out 
     // 2. must be able to save as draft
 
-    console.log(this.course.chapters)
 
     this.courseService.saveCourseDraft(this.course.id, this.course).subscribe({
       next: (response) => {

src/UI/src/app/modules/layout/layout-routing.module.ts

@@ -6,7 +6,7 @@ import { AuthGuard } from 'src/app/core/auth/service/auth-guard';
 // looking from perspective comming first and seaing tho pages 
 const routes: Routes = [
   { path: '', 
-    redirectTo: 'dashboard', 
+    redirectTo: 'courses', 
     pathMatch: 'full' 
   },
   {

src/UI/src/app/modules/management/components/boxes/boxes-header/boxes-header.component.html

@@ -1,6 +1,6 @@
 <div class="mb-4 flex justify-between " >
-    <div class="inline-block">
-      <h3    data-testid="box-title-header" class="text-2xl font-semibold text-gray-900 dark:text-white">{{title}}</h3>
+    <div class="inline-block w-full">
+      <h3 class="text-2xl font-semibold text-gray-900 dark:text-white">{{title}}</h3>
       <div class="space-x-1 text-sm font-medium text-gray-400 dark:text-night-300">
         <!-- <a href="" class="hover:text-primary-500">Dashboards</a> -->
         <span >{{subTitle}}</span>
@@ -14,8 +14,88 @@ <h3    data-testid="box-title-header" class="text-2xl font-semibold text-gray-90
         New course
       </button>
     </div>
+
+    <div class="w-1/2">
+        <div class="flex">
+          <label
+            for="search-dropdown"
+            class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
+            >Your Email</label
+          >
+          <button
+            id="dropdown-button"
+            data-dropdown-toggle="dropdown"
+            class="flex-shrink-0 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-s-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-night-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700 dark:text-white dark:border-gray-600"
+            type="button"
+          >
+            Filters
+            <svg
+              class="w-2.5 h-2.5 ms-2.5"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 10 6"
+            >
+              <path
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="m1 1 4 4 4-4"
+              />
+            </svg>
+          </button>
+          <div
+            id="dropdown"
+            class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700"
+          >
+            <ul
+              class="py-2 text-sm text-gray-700 dark:text-gray-200"
+              aria-labelledby="dropdown-button"
+            >
+              <li>
+                <button
+                  type="button"
+                  class="inline-flex w-full px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+                >
+                  Price
+                </button>
+              </li>
+              <li>
+                <button
+                  type="button"
+                  class="inline-flex w-full px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+                >
+                  Saved
+                </button>
+              </li>
+              <li>
+                <button
+                  type="button"
+                  class="inline-flex w-full px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+                >
+                  Owned
+                </button>
+              </li>
+
+            </ul>
+          </div>
+          <div class="relative w-full">
+            <input
+              id="search-dropdown"
+             [(ngModel)]="searchTerm"
+             (input)="onSearchQueryChange($event)"
+              class="block p-2.5 w-full z-20 text-sm text-gray-900 bg-gray-50 rounded-e-lg border-s-gray-50 border-s-2 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-night-700 dark:border-s-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500"
+              placeholder="Search by title ..."
+              required
+            />
+          </div>
+        </div>
+    </div>
   </div>
 
+
+
   <app-modal (canceled)="handleCancleModal()" ></app-modal>
 
 

src/UI/src/app/modules/management/components/boxes/boxes-header/boxes-header.component.ts

@@ -15,6 +15,7 @@ import { DialogConfig, DialogService } from '@ngneat/dialog';
 import { BoxesModalComponent } from '../boxes-modal/boxes-modal.component';
 import {
   FormGroup,
+  FormsModule,
   ReactiveFormsModule,
   UntypedFormBuilder,
 } from '@angular/forms';
@@ -40,19 +41,21 @@ interface PostBoxDto {
 @Component({
   selector: 'app-boxes-header',
   standalone: true,
-  imports: [CommonModule, ModalComponent],
+  imports: [CommonModule, ModalComponent,FormsModule],
   templateUrl: './boxes-header.component.html',
   styleUrls: ['./boxes-header.component.scss'],
 })
 export class BoxesHeaderComponent implements OnInit {
 
 
   @Output() dataEmitter = new EventEmitter<any>();
+  @Output() searchTermEmitter = new EventEmitter<string>();
   @Input() showButton: boolean;
 
   private modalSubscription: Subscription;
   modal: ModalInterface;
   formGroup: FormGroup;
+searchTerm: string;
 
   constructor(
     private fb: UntypedFormBuilder,
@@ -91,17 +94,8 @@ export class BoxesHeaderComponent implements OnInit {
   @Input() isDetail: boolean = true;
   @ViewChild('template', { static: true })
   messageFromDialog: string;
-  dataFromDialog: PostBoxDto;
-
-  postDataDto: PostBoxDto = {
-    title: '',
-    type: '',
-    image: '',
-    status: '',
-    price: 0,
-    color: '',
-    description: '',
-  };
+
+
 
   ngOnInit() {
     this.dataEmitter.emit(this.showButton);
@@ -111,6 +105,12 @@ export class BoxesHeaderComponent implements OnInit {
     this.modal.hide();
     }
 
+    onSearchQueryChange(event: any): void {
+      this.searchTerm = event.target.value;
+      this.searchTermEmitter.emit(this.searchTerm);
+    }
+
+
 
 
 

src/UI/src/app/modules/management/components/courses/course-chapters/course-chapters.component.ts

@@ -128,7 +128,7 @@ export class CourseChaptersComponent implements OnInit, OnChanges {
           description: chapter.description,
           isFree: chapter.isFree,
           videoURL: chapter.videoURL,
-          position: chapter.position, // Keep the original position from the database
+          // position: chapter.position, // Keep the original position from the database
         },
       ],
       position: chapter.position,
@@ -182,9 +182,6 @@ export class CourseChaptersComponent implements OnInit, OnChanges {
       // Update item positions after change detection
       this.updateItemPositions();
 
-      console.log(this.draggableList[0].title + " " + this.draggableList[0].position);
-      console.log(this.draggableList[1].title + " " +  this.draggableList[1].position);
-      console.log(this.draggableList[2].title + " " + this.draggableList[2].position);
 
       this.courseChaptersChange.emit(
         this.mapDraggableToChapters(this.draggableList)

src/UI/src/app/modules/management/components/courses/courses-card/courses-card.component.html

@@ -8,9 +8,7 @@
     <div class="font-bold text-xl mb-2 dark:text-white">
       {{ course?.title }}
     </div>
-    <p class="text-gray-700 text-base">
-      {{ course?.description }}
-    </p>
+    <p class="text-gray-700 text-base"  [innerHTML]="course?.description">  </p>
   </div>
   <div class="flex flex-wrap px-4 pb-2  ">
     <div *ngFor="let category of course?.categories">