Skip to content

Commit

Permalink
added style to frontend
Browse files Browse the repository at this point in the history
  • Loading branch information
mahmoodalisha committed Dec 1, 2024
1 parent b6ce1ae commit e407039
Show file tree
Hide file tree
Showing 7 changed files with 279 additions and 211 deletions.
3 changes: 2 additions & 1 deletion webiu-ui/angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": ["src/favicon.ico", "src/assets"],
"styles": ["src/styles.scss"],
"styles": ["src/styles.scss",
"node_modules/@fortawesome/fontawesome-free/css/all.min.css"],
"scripts": []
},
"configurations": {
Expand Down
9 changes: 9 additions & 0 deletions webiu-ui/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions webiu-ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"@angular/platform-browser": "^17.3.0",
"@angular/platform-browser-dynamic": "^17.3.0",
"@angular/router": "^17.3.0",
"@fortawesome/fontawesome-free": "^6.7.1",
"axios": "^1.7.8",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,57 +1,78 @@
<div style="padding: 20px;">
<h2 class="title">Contributor Search</h2>

<!-- Search Bar -->
<div class="search-bar">
<input
type="text"
[(ngModel)]="username"
placeholder="Enter GitHub Username"
class="search-input"
/>
<button (click)="onSearch()" class="search-button">Search</button>
</div>

<!-- Error Message -->
<p *ngIf="errorMessage" class="error-message">{{ errorMessage }}</p>

<!-- Loading State -->
<p *ngIf="loading" class="loading-message">Loading...</p>

<!-- Display Issues and Pull Requests Side by Side -->
<div class="data-section-container">
<!-- Display Issues -->
<div *ngIf="issues.length > 0" class="data-section">
<h3 class="section-title">Created Issues</h3>
<ul class="data-list">
<li *ngFor="let issue of issues" class="data-item">
<a [href]="issue.html_url" target="_blank" rel="noopener noreferrer">
{{ issue.title }}
</a>
</li>
</ul>
</div>

<!-- Display Pull Requests -->
<div *ngIf="pullRequests.length > 0" class="data-section">
<h3 class="section-title">Created Pull Requests</h3>
<ul class="data-list">
<li *ngFor="let pr of pullRequests" class="data-item">
<a [href]="pr.html_url" target="_blank" rel="noopener noreferrer">
{{ pr.title }}
</a>
</li>
</ul>
</div>
<h2 class="title">Contributor Search</h2>

<!-- Search Bar -->
<div class="search-bar">
<input
type="text"
[(ngModel)]="username"
placeholder="Enter GitHub Username"
class="search-input"
/>
<button (click)="onSearch()" class="search-button">Search</button>
</div>

<!-- Error Message -->
<p *ngIf="errorMessage" class="error-message">{{ errorMessage }}</p>

<!-- Loading State -->
<p *ngIf="loading" class="loading-message">Loading...</p>



<!-- No data message -->
<p
*ngIf="!loading && !errorMessage && issues.length === 0 && pullRequests.length === 0"
class="no-data-message"

<!-- Toggle Buttons for Issues and Pull Requests -->
<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: {{ issues.length }}
</button>
<button
(click)="toggleView('pullRequests')"
[class.active]="activeView === 'pullRequests'"
class="toggle-button"
>
No issues or pull requests found for this contributor.
</p>
<i class="fas fa-code-branch icon-gap"></i> Pull Requests: {{ pullRequests.length }}
</button>
</div>

<!-- Display Issues or Pull Requests Based on Active View -->
<!-- User Profile Section -->
<div class="main-container">
<div *ngIf="userProfile" class="user-profile">
<img [src]="userProfile.avatar_url" alt="Profile Picture" class="profile-picture" />
<h3 class="username">{{ userProfile.login }}</h3>
</div>
<div *ngIf="activeView === 'issues'" class="data-section">
<h3 class="section-title">Created Issues</h3>
<ul class="data-list">
<li *ngFor="let issue of issues" class="data-item">
<a [href]="issue.html_url" target="_blank" rel="noopener noreferrer">
{{ issue.title }}
</a>
</li>
</ul>
</div>

<div *ngIf="activeView === 'pullRequests'" class="data-section">
<h3 class="section-title">Created Pull Requests</h3>
<ul class="data-list">
<li *ngFor="let pr of pullRequests" class="data-item">
<a [href]="pr.html_url" target="_blank" rel="noopener noreferrer">
{{ pr.title }}
</a>
</li>
</ul>
</div>

</div>

<!-- No data message -->
<p
*ngIf="!loading && !errorMessage && issues.length === 0 && pullRequests.length === 0"
class="no-data-message"
>
No issues or pull requests found for this contributor.
</p>
</div>
Loading

0 comments on commit e407039

Please sign in to comment.