🛠 Feature: Cmd+k filter plus detail preview of purchased courses

TomasSirotek · Dec 8, 2023 · 2b61075 · 2b61075
1 parent 2c842c3
commit 2b61075
Show file tree

Hide file tree

Showing 53 changed files with 1,967 additions and 542 deletions.
diff --git a/src/Infrastructure/Authentication/Services/JwtGenerator.cs b/src/Infrastructure/Authentication/Services/JwtGenerator.cs
@@ -8,9 +8,7 @@
 
 namespace SkillSphere.Infrastructure.Authentication.Services;
 
-
-
-    public class JwtGenerator : IJwtTokenGen
+public class JwtGenerator : IJwtTokenGen
     {
         private readonly JwtTokenConfig _authSettings;
 

diff --git a/src/UI/angular.json b/src/UI/angular.json
@@ -31,7 +31,8 @@
             ],
             "styles": [
               "src/styles.scss",
-              "node_modules/tailwindcss/base.css"
+              "node_modules/tailwindcss/base.css",
+              "node_modules/@ngneat/cmdk/styles/vercel.css"
             ],
             "scripts": [
               "node_modules/flowbite/dist/flowbite.js"

diff --git a/src/UI/package-lock.json b/src/UI/package-lock.json
diff --git a/src/UI/package.json b/src/UI/package.json
@@ -15,6 +15,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^17.0.4",
+    "@angular/cdk": "^16.2.12",
     "@angular/common": "^17.0.4",
     "@angular/compiler": "^17.0.4",
     "@angular/core": "^17.0.4",
@@ -25,7 +26,10 @@
     "@ng-icons/core": "^25.3.1",
     "@ng-icons/heroicons": "^25.3.1",
     "@ng-select/ng-select": "^12.0.4",
+    "@ngneat/cmdk": "^2.0.0",
     "@ngneat/dialog": "^4.1.1",
+    "@ngneat/overview": "^5.1.1",
+    "@ngneat/until-destroy": "^10.0.0",
     "@swimlane/ngx-datatable": "^20.1.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/typography": "^0.5.10",

diff --git a/src/UI/src/app/app.component.ts b/src/UI/src/app/app.component.ts
@@ -6,13 +6,20 @@ import { ResponsiveHelperComponent } from './shared/components/responsive-helper
 import { AlertComponent } from './shared/component/alert/alert.component';
 import { initFlowbite } from 'flowbite';
 import { ReactiveFormsModule } from '@angular/forms';
+import { CommandComponent, EmptyDirective, GroupComponent, InputDirective, ItemDirective, ListComponent } from '@ngneat/cmdk';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   standalone: true,
-  imports: [NgClass, RouterOutlet, ResponsiveHelperComponent,AlertComponent,NgIf],
+
+  imports: [NgClass, RouterOutlet, ResponsiveHelperComponent,AlertComponent,NgIf,CommandComponent,
+    InputDirective,
+    ListComponent,
+    GroupComponent,
+    ItemDirective,
+    EmptyDirective],
 
 })
 export class AppComponent implements OnInit {

diff --git a/src/UI/src/app/core/constant/menu.ts b/src/UI/src/app/core/constant/menu.ts
@@ -8,11 +8,11 @@ export class Menu {
       items: [
         {
           icon:' heroBuildingStorefront',
-          label: 'Courses',
+          label: 'Store',
           route: '/courses',
         },
         {
-          icon: 'heroFolderOpen',
+          icon: 'heroSquares2x2',
           label: 'Dashboard',
           route: '/dashboard',
           children: [

diff --git a/src/UI/src/app/modules/dashboard/pages/dashboard/dashboard.component.html b/src/UI/src/app/modules/dashboard/pages/dashboard/dashboard.component.html
@@ -4,6 +4,12 @@
 >
   <!-- end Header -->
 
+  <app-boxes-header
+    [showButton]="false"
+    title="Purchase courses"
+  ></app-boxes-header>
+
+
   <!-- Card Blog -->
   <div class="py-4 mx-auto">
     <div *ngIf="!isLoaded; else skeletonContent">
@@ -31,22 +37,20 @@
         *ngIf="filteredCourses && filteredCourses.length > 0; else noResults"
       >
         <!-- Course cards -->
-        <ng-container *ngFor="let course of filteredCourses">
+        <ng-container *ngFor="let course of filteredCourses ; let i = index">
+
           <div
             class="group shadow-sm dark:border-gray-700 hover:scale-105 transform transition-transform duration-300"
           >
             <div
-              class="bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 overflow-hidden"
+              class="bg-white border border-gray-200 rounded-md shadow dark:bg-gray-800 dark:border-gray-700 overflow-hidden"
             >
               <div class="relative">
                 <div class="absolute top-2 left-2 text-black dark:text-white">
                   <button
                     class="flex-none button rounded-md px-4 text-xs font-semibold text-white hover:cursor-pointer"
                   >
-                    <ng-icon
-                      name="heroCheckBadge"
-                      class="text-3xl text-green-500"
-                    ></ng-icon>
+
                   </button>
                 </div>
 
@@ -89,7 +93,7 @@
                 </div>
               </div>
 
-              <div class="p-4 md:p-6 space-y-2 hover:cursor-pointer">
+              <div class="p-4 md:p-6 space-y-2 hover:cursor-pointer" (click)="openModal(i) "> 
                 <h3
                   class="text-xl font-semibold text-gray-800 dark:text-gray-300 dark:hover:text-white"
                 >
@@ -132,7 +136,7 @@
                   </div>
 
                   <div>
-                    <button class="border-green-500 border rounded-md px-2">
+                    <button  class="border-green-500 border rounded-md px-2">
                       <span [class]="'text-green-500'" class="font-bold">
                         Watch now
                       </span>
@@ -142,6 +146,7 @@
               </div>
             </div>
           </div>
+
         </ng-container>
       </div>
     </ng-template>
@@ -153,5 +158,9 @@
     </ng-template>
   </div>
 
+
   <!-- End Card Blog -->
 </div>
+
+<app-modal-preview  [descriptionType]="false" (canceled)="handleCancelPreviewModal()" [course]="selectedCourse"  />
+