Display message when there are no results.

webiu-server/controllers/contributorController.js

@@ -11,6 +11,8 @@ const getAllContributors = async (req, res) => {
     let finalResponse = {};
     const orgName = 'c2siorg';
     const repositories = await fetchRepositories(orgName);
+    console.log(repositories);
+
 
     if (!repositories) {
       return res.status(500).json({ error: 'Failed to fetch repositories' });

webiu-ui/src/app/page/contributor-search/contributor-search.component.html

@@ -1,76 +1,107 @@
-<div style="padding: 20px;">
+<div style="padding: 20px">
   <!-- Toggle Buttons for Issues and Pull Requests -->
-  <div class="action-bar">
+  <div *ngIf="hasData" class="action-bar">
     <div class="toggle-buttons">
       <button
         (click)="toggleView('issues')"
         [class.active]="activeView === 'issues'"
         class="toggle-button"
       >
-        <i class="fas fa-circle-notch icon-gap"></i> Issues Created: {{ filteredIssues.length }}
+        <i class="fas fa-circle-notch icon-gap"></i> Issues Created:
+        {{ filteredIssues.length }}
       </button>
       <button
         (click)="toggleView('pullRequests')"
         [class.active]="activeView === 'pullRequests'"
         class="toggle-button"
       >
-        <i class="fas fa-code-branch icon-gap"></i> Pull Requests: {{ filteredPullRequests.length }}
+        <i class="fas fa-code-branch icon-gap"></i> Pull Requests:
+        {{ filteredPullRequests.length }}
       </button>
     </div>
     <div class="filter-section">
       <p>Filter by repo</p>
       <select class="repository-select" (change)="onRepoFilterChange($event)">
         <option value="">All</option>
-        <option *ngFor="let repo of uniqueRepositories" [value]="repo">{{ repo }}</option>
+        <option *ngFor="let repo of uniqueRepositories" [value]="repo">
+          {{ repo }}
+        </option>
       </select>
     </div>
   </div>
 
   <!-- User Profile Section -->
   <div class="main-container">
     <div *ngIf="userProfile" class="user-profile">
-      <img [src]="userProfile.avatar_url" alt="Profile Picture" class="profile-picture" />
+      <img
+        [src]="userProfile.avatar_url"
+        alt="Profile Picture"
+        class="profile-picture"
+      />
       <h3 class="username">{{ userProfile.login }}</h3>
-      <button (click)="openGitHubProfile(userProfile.html_url)" class="github-button">
+      <button
+        (click)="openGitHubProfile(userProfile.html_url)"
+        class="github-button"
+      >
         <i class="fab fa-github github-icon"></i>
         <span class="username">{{ userProfile.login }}</span>
       </button>
     </div>
 
     <!-- Display Issues or Pull Requests Based on Active View -->
     <div *ngIf="activeView === 'issues'" class="data-section">
-      <ul class="data-list">
+      <ul
+        class="data-list"
+        *ngIf="filteredIssues.length > 0; else noIssuesMessage"
+      >
         <li *ngFor="let issue of filteredIssues" class="data-item">
           <ng-container *ngIf="issue.closed_at; else openIssue">
-            <i class="far fa-check-circle" style="color: #0056b3; font-size: 20px;"></i>
+            <i class="far fa-check-circle icon-closed"></i>
           </ng-container>
           <ng-template #openIssue>
-            <i class="fas fa-circle-notch icon-gap" style="color:green;font-size: 20px"></i>
+            <i class="fas fa-circle-notch icon-open"></i>
           </ng-template>
           <a [href]="issue.html_url" target="_blank" rel="noopener noreferrer">
             {{ issue.title }}
           </a>
           <p>{{ formatLastUpdated(issue.updated_at) }}</p>
         </li>
       </ul>
+      <ng-template #noIssuesMessage>
+        <p class="no-data-message" *ngIf="filteredIssues.length > 0">
+          No issues found for this contributor.
+        </p>
+      </ng-template>
     </div>
 
     <div *ngIf="activeView === 'pullRequests'" class="data-section">
-      <ul class="data-list">
+      <ul
+        class="data-list"
+        *ngIf="filteredPullRequests.length > 0; else noPullRequestMessage"
+      >
         <li *ngFor="let pr of filteredPullRequests" class="data-item">
-          <i class="fa-solid fa-code-pull-request" style="color: green;font-size: 18px;"></i>
+          <i class="fa-solid fa-code-pull-request icon-open"></i>
           <a [href]="pr.html_url" target="_blank" rel="noopener noreferrer">
             {{ pr.title }}
           </a>
           <p>{{ formatLastUpdated(pr.updated_at) }}</p>
         </li>
       </ul>
+      <ng-template #noPullRequestMessage>
+        <p class="no-data-message" *ngIf="filteredPullRequests.length > 0">
+          No pull requests found for this contributor.
+        </p>
+      </ng-template>
     </div>
   </div>
 
-  <!-- No data message -->
+  <!-- Global "No Data" Message -->
   <p
-    *ngIf="!loading && !errorMessage && filteredIssues.length === 0 && filteredPullRequests.length === 0"
+    *ngIf="
+      !hasData &&
+      filteredIssues.length === 0 &&
+      filteredPullRequests.length === 0
+    "
     class="no-data-message"
   >
     No issues or pull requests found for this contributor.

webiu-ui/src/app/page/contributor-search/contributor-search.component.scss

@@ -298,5 +298,6 @@
     font-size: 0.7rem;
   }
 }
-
-
+.hidden{
+  display: none;
+}

webiu-ui/src/app/page/contributor-search/contributor-search.component.ts

@@ -116,4 +116,10 @@ export class ContributorSearchComponent {
     const updatedAt = new Date(date);
     return formatDistanceToNow(updatedAt, { addSuffix: true });
   }
+  get hasData(): boolean {
+    return this.filteredIssues.length > 0 || this.filteredPullRequests.length > 0;
+  }
+
 }
+
+

webiu-ui/src/app/page/contributors/contributors.component.html

@@ -1,4 +1,3 @@
-<!-- page/contributors/contributors.component.html -->
 <div class="contributors-page">
   <section class="search-section">
     <div class="search-container">
@@ -16,7 +15,7 @@
       </div>
     </div>
     <div class="filter-section">
-      <span>filter by repository</span>
+      <span>Filter by repository</span>
       <select class="repository-select" (change)="onRepoChange($event)">
         <option value="">Codelabz</option>
         @for (repo of allRepos; track $index) {
@@ -25,39 +24,48 @@
       </select>
     </div>
     <div class="contributors-card-container loading-spinner">
-      <i class="fa fa-spinner fa-spin" style="font-size:32px;" *ngIf="isLoading; else content"></i>
+      <i
+        class="fa fa-spinner fa-spin"
+        style="font-size: 32px"
+        *ngIf="isLoading; else content"
+      ></i>
     </div>
-
-    <div class="pagination">
+
+    <div
+      class="pagination"
+      *ngIf="displayProfiles && displayProfiles.length > 0"
+    >
       <button (click)="prevPage()" [disabled]="isLoading || currentPage === 1">
         Previous
       </button>
       <span>Page {{ currentPage }} of {{ totalPages }}</span>
-      <button (click)="nextPage()" [disabled]="isLoading || currentPage === totalPages">
+      <button
+        (click)="nextPage()"
+        [disabled]="isLoading || currentPage === totalPages"
+      >
         Next
       </button>
     </div>
   </section>
 </div>
-<!-- 
-<ng-template #loading>
-  <div class="loader"></div>
-</ng-template> -->
-
 <ng-template #content>
   <div class="contributors-grid">
     @for (profile of displayProfiles; track $index) {
-      <app-profile-card
+    <app-profile-card
       *ngFor="let profile of displayProfiles; trackBy: trackByFn"
       [login]="profile.login"
       [contributions]="profile.contributions"
       [avatar_url]="profile.avatar_url"
       [followers]="profile.followers"
       [following]="profile.following"
-      (usernameClick)="onUsernameClick($event)" 
+      (usernameClick)="onUsernameClick($event)"
     ></app-profile-card>
-
-
     }
   </div>
-</ng-template>
+  <p
+    *ngIf="!isLoading && displayProfiles.length === 0"
+    class="no-contributors-message"
+  >
+    No contributors found matching the search criteria.
+  </p>
+</ng-template>

webiu-ui/src/app/page/contributors/contributors.component.scss

@@ -259,3 +259,9 @@
 }
 
 
+.no-contributors-message {
+  text-align: center;
+  color: #888;
+  font-size: 1.2em;
+  margin-top: 20px;
+}