drawer not working yet

piradan · Feb 3, 2025 · c8864d8 · c8864d8
1 parent 283249b
commit c8864d8
Show file tree

Hide file tree

Showing 8 changed files with 194 additions and 124 deletions.
diff --git a/src/addons/block/recentlyaccessedcourses/recentlyaccessedcourses.module.ts b/src/addons/block/recentlyaccessedcourses/recentlyaccessedcourses.module.ts
@@ -14,15 +14,15 @@
 
 import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { CoreBlockDelegate } from '@features/block/services/block-delegate';
-import { AddonBlockRecentlyAccessedCoursesHandler } from './services/block-handler';
+import { AddonBlockRecentlyAccessedItemsHandler } from './services/block-handler';
 
 @NgModule({
     providers: [
         {
             provide: APP_INITIALIZER,
             multi: true,
             useValue: () => {
-                CoreBlockDelegate.registerHandler(AddonBlockRecentlyAccessedCoursesHandler.instance);
+                CoreBlockDelegate.registerHandler(AddonBlockRecentlyAccessedItemsHandler.instance);
             },
         },
     ],

diff --git a/src/addons/block/recentlyaccessedcourses/services/block-handler.ts b/src/addons/block/recentlyaccessedcourses/services/block-handler.ts
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { CoreBlockHandler } from '@features/block/services/block-delegate';
 import { CoreSites } from '@services/sites';
 import { makeSingleton } from '@singletons';
-import { AddonBlockRecentlyAccessedItemsComponent } from '../components/recentlyaccesseditems/recentlyaccesseditems';
+import { AddonBlockRecentlyAccessedItemsComponent } from '../../recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems';
 
 /**
  * Block handler.

diff --git a/...ntlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html b/...ntlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
@@ -1,70 +1,88 @@
-:host {
-    ion-card {
-        margin: 8px;
-    }
+<ion-content>
+    <!-- Course Progress Section -->
+    <ion-card *ngIf="courseProgress.length" class="progress-card">
+        <ion-card-header>
+            <ion-card-title>
+                <h2 class="section-title">{{ 'addon.block_recentlyaccesseditems.progress' | translate }}</h2>
+            </ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+            <ion-item *ngFor="let course of courseProgress" lines="full">
+                <ion-label>
+                    <h3>{{course.courseName}}</h3>
+                    <div class="progress-container">
+                        <ion-progress-bar [value]="course.progress / 100"></ion-progress-bar>
+                        <p class="progress-text">{{course.progress}}% {{ 'core.complete' | translate }}</p>
+                    </div>
+                </ion-label>
+            </ion-item>
+        </ion-card-content>
+    </ion-card>
 
-    .section-title {
-        font-size: 18px;
-        font-weight: 500;
-        margin: 0;
-    }
+    <!-- Badges Section -->
+    <ion-card *ngIf="badges.length" class="badges-card">
+        <ion-card-header>
+            <ion-card-title>
+                <h2 class="section-title">{{ 'addon.block_recentlyaccesseditems.badges' | translate }}</h2>
+            </ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+            <ion-item *ngFor="let badge of badges" lines="full" class="badge-item">
+                <ion-avatar slot="start" class="badge-avatar">
+                    <img [src]="badge.badgeurl" [alt]="badge.name">
+                </ion-avatar>
+                <ion-label>
+                    <h3 class="badge-title">{{badge.name}}</h3>
+                    <p class="badge-desc">{{badge.description}}</p>
+                    <p class="badge-date">{{ badge.dateissued | coreFormatDate }}</p>
+                </ion-label>
+            </ion-item>
+        </ion-card-content>
+    </ion-card>
 
-    .progress-container {
-        margin-top: 12px;
+    <!-- Achievements Section -->
+    <ion-card *ngIf="achievements.length" class="achievements-card">
+        <ion-card-header>
+            <ion-card-title>
+                <h2 class="section-title">{{ 'addon.block_recentlyaccesseditems.achievements' | translate }}</h2>
+            </ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+            <ion-item *ngFor="let achievement of achievements" lines="full">
+                <ion-icon [name]="achievement.icon" slot="start" [aria-label]="achievement.title"></ion-icon>
+                <ion-label>
+                    <h3>{{achievement.title}}</h3>
+                    <p>{{achievement.description}}</p>
+                    <p class="achievement-date">{{achievement.date | coreFormatDate}}</p>
+                </ion-label>
+            </ion-item>
+        </ion-card-content>
+    </ion-card>
 
-        ion-progress-bar {
-            margin-bottom: 8px;
-        }
-    }
+    <!-- Certificates Section -->
+    <ion-card *ngIf="certificates.length" class="certificates-card">
+        <ion-card-header>
+            <ion-card-title>
+                <h2 class="section-title">{{ 'addon.block_recentlyaccesseditems.certificates' | translate }}</h2>
+            </ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+            <ion-item *ngFor="let certificate of certificates" [href]="certificate.downloadurl" detail="true" lines="full">
+                <ion-icon name="document-text" slot="start" aria-label="Certificate"></ion-icon>
+                <ion-label>
+                    <h3>{{certificate.name}}</h3>
+                    <p>{{ certificate.timecreated | coreFormatDate }}</p>
+                </ion-label>
+            </ion-item>
+        </ion-card-content>
+    </ion-card>
 
-    .progress-text {
-        margin: 4px 0;
-        font-size: 14px;
-        color: var(--ion-color-medium);
-    }
-
-    .achievement-date {
-        margin-top: 4px;
-        font-size: 12px;
-        color: var(--ion-color-medium);
-    }
-
-    .radio-container {
-        width: 100%;
-        padding: 8px 0;
-        overflow: hidden;
-
-        audio {
-            width: 100%;
-            margin: 8px 0;
-        }
-
-        iframe {
-            border-radius: 8px;
-            background: var(--ion-color-light);
-        }
-    }
-
-    ion-item {
-        --padding-start: 16px;
-        --padding-end: 16px;
-        --inner-padding-end: 16px;
-    }
-
-    ion-item-divider {
-        --padding-start: 16px;
-        --padding-end: 8px;
-        --inner-padding-end: 8px;
-        --background: var(--ion-color-light);
-        min-height: 48px;
-    }
-
-    ion-avatar {
-        margin-right: 16px;
-    }
-
-    ion-icon {
-        font-size: 24px;
-        margin-right: 16px;
-    }
-}
+    <!-- Empty State -->
+    <ion-card *ngIf="!courseProgress.length && !badges.length && !achievements.length && !certificates.length">
+        <ion-item>
+            <ion-label class="ion-text-center">
+                {{ 'addon.block_recentlyaccesseditems.noitems' | translate }}
+            </ion-label>
+        </ion-item>
+    </ion-card>
+</ion-content>
diff --git a/...s/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss b/...s/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
@@ -1,19 +1,41 @@
 :host {
+    ion-content {
+        --background: var(--ion-background-color);
+    }
+
     ion-card {
-        margin: 8px;
+        margin: 16px;
+        border-radius: 8px;
+        background: var(--ion-card-background);
+
+        ion-card-header {
+            padding: 16px;
+        }
+
+        ion-card-content {
+            padding: 0;
+        }
+
+        ion-item {
+            --background: transparent;
+            --padding-start: 16px;
+            --padding-end: 16px;
+            --inner-padding-end: 16px;
+        }
     }
 
     .section-title {
         font-size: 18px;
         font-weight: 500;
         margin: 0;
+        color: var(--ion-text-color);
     }
 
     .progress-container {
-        margin-top: 12px;
+        margin-top: 8px;
 
         ion-progress-bar {
-            margin-bottom: 8px;
+            margin-bottom: 4px;
         }
     }
 
@@ -45,6 +67,67 @@
         }
     }
 
+    .badges-card {
+        margin: 16px;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+
+        ion-card-header {
+            padding: 16px;
+        }
+
+        .badge-item {
+            --padding-start: 16px;
+            --padding-end: 16px;
+            --inner-padding-end: 16px;
+            margin: 0;
+
+            .badge-avatar {
+                width: 40px;
+                height: 40px;
+            }
+
+            .badge-title {
+                font-weight: 500;
+                margin-bottom: 4px;
+                color: var(--ion-text-color);
+            }
+
+            .badge-desc {
+                color: var(--ion-color-medium);
+                font-size: 14px;
+            }
+
+            .badge-date {
+                font-size: 12px;
+                color: var(--ion-color-medium);
+                margin-top: 4px;
+            }
+        }
+
+        .badge-avatar {
+            width: 48px;
+            height: 48px;
+            margin-right: 16px;
+        }
+
+        .badge-title {
+            font-weight: 500;
+            margin-bottom: 4px;
+        }
+
+        .badge-desc {
+            color: var(--ion-color-medium);
+            font-size: 14px;
+        }
+
+        .badge-date {
+            font-size: 12px;
+            color: var(--ion-color-medium);
+            margin-top: 4px;
+        }
+    }
+
     ion-item {
         --padding-start: 16px;
         --padding-end: 16px;

diff --git a/...ons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.ts b/...ons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { CoreBlockBaseComponent } from '@features/block/classes/base-block-component';
-import { AddonRecentlyAccessedItemsService } from '../../services/recentlyaccesseditems';
+import { AddonRecentlyAccessedItemsService, AddonRecentlyAccessedItems } from '../../services/recentlyaccesseditems';
 import { Badge, Certificate, CourseProgress, Achievement } from '../../services/interfaces';
 
 @Component({
@@ -36,16 +36,16 @@ export class AddonBlockRecentlyAccessedItemsComponent extends CoreBlockBaseCompo
     protected async loadContent(): Promise<void> {
         try {
             const [badges, courseProgress, achievements, certificates] = await Promise.all([
-                AddonRecentlyAccessedItems.instance.getBadges(),
-                AddonRecentlyAccessedItems.instance.getCourseProgress(),
-                AddonRecentlyAccessedItems.instance.getAchievements(),
-                AddonRecentlyAccessedItems.instance.getCertificates(), // Retrieve certificates
+                AddonRecentlyAccessedItems.getBadges(),
+                AddonRecentlyAccessedItems.getCourseProgress(),
+                AddonRecentlyAccessedItems.getAchievements(),
+                AddonRecentlyAccessedItems.getCertificates(),
             ]);
 
             this.badges = badges;
             this.courseProgress = courseProgress;
             this.achievements = achievements;
-            this.certificates = certificates; // Assign certificates
+            this.certificates = certificates;
         } catch (error) {
             console.error('Error loading student progress data', error);
             throw error;

diff --git a/src/addons/block/recentlyaccesseditems/services/block-handler.ts b/src/addons/block/recentlyaccesseditems/services/block-handler.ts
@@ -22,11 +22,7 @@ export class AddonBlockRecentlyAccessedItemsHandlerService implements CoreBlockH
     }
 }
 
-<<<<<<< HEAD
-export const AddonBlockRecentlyAccessedItemsHandler = makeSingleton(AddonBlockRecentlyAccessedItemsHandlerService);
-=======
 /**
  * Singleton service instance.
  */
-export const AddonBlockRecentlyAccessedItemsHandler = makeSingleton(AddonBlockRecentlyAccessedItemsHandlerService)
->>>>>>> ab0874c (Drawer Works  - Half done)
+export const AddonBlockRecentlyAccessedItemsHandler = makeSingleton(AddonBlockRecentlyAccessedItemsHandlerService);