implements carousel

tauisilva · Mar 2, 2024 · 58f6242 · 58f6242
1 parent d086de7
commit 58f6242
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 9 deletions.
diff --git a/src/app/components/repos/repos.component.html b/src/app/components/repos/repos.component.html
@@ -1,12 +1,39 @@
-<section class="tabview">
+<section class="carousel">
+  <p-carousel [value]="repos"[numScroll]="1" [numVisible]="5" [responsiveOptions]="respOptions">
+    <ng-template pTemplate="header">
+      <p class="pl-3 font-bold">Github - Repositórios</p>
+    </ng-template>
+    <ng-template let-repo pTemplate="item">
+      <div class="border-1 h-full surface-border border-round m-2 text-center px-3">
+        <section class="w-full top-info">
+          <p class="font-semibold">{{ repo.name }}</p>
+          <a class="icon" [href]="repo.html_url" target="_blank"><i class="pi pi-github"></i></a>
+        </section>
+        <div class="mb-3">
+          <img [src]="repo.img" alt="" class="w-full shadow-2" loading="eager">
+        </div>
+        <div>
+          <h6 class="mt-0 mb-3">{{ repo.description }}</h6>
+          <p-tag *ngIf="repo?.language" severity="success" [value]="repo?.language"></p-tag>
+          <div class="mt-5 flex align-items-center justify-content-center gap-2">
+            <!-- <p-button icon="pi pi-search" [rounded]="true" />
+                <p-button icon="pi pi-star-fill" [rounded]="true" severity="secondary" /> -->
+          </div>
+        </div>
+      </div>
+    </ng-template>
+  </p-carousel>
+</section>
+<!-- <section class="tabview">
   <p-dataView #dv [value]="repos" [rows]="5" [paginator]="true">
     <ng-template pTemplate="list" let-repo>
       <div class="grid grid-nogutter">
         <div class="col-12">
           @for (rep of repo; let first = $first; track $index;) {
           <section class="flex flex-column xl:flex-row xl:align-content-start p-4 gap-4"
             [ngClass]="{ 'border-top-1 surface-border': !first }">
-            <img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" [src]="rep.img" loading="eager" />
+            <img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" [src]="rep.img"
+              loading="eager" />
             <div class="flex flex-column sm:flex-row justify-content-between 
               align-items-center xl:align-items-start flex-1 gap-4">
               <div class="flex flex-column align-items-center sm:align-items-start gap-3">
@@ -21,4 +48,4 @@
       </div>
     </ng-template>
   </p-dataView>
-</section>
+</section> -->
diff --git a/src/app/components/repos/repos.component.scss b/src/app/components/repos/repos.component.scss
@@ -0,0 +1,26 @@
+.carousel {
+  ::ng-deep .p-carousel-item {
+    padding-bottom: .5rem;
+  }
+
+  .top-info {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: .5rem 0 1rem 0;
+
+    p {
+      margin: 0;
+    }
+
+    a.icon {
+      color: black;
+
+      i {
+        font-size: larger;
+      }
+    }
+
+  }
+}
diff --git a/src/app/components/repos/repos.component.ts b/src/app/components/repos/repos.component.ts
@@ -1,13 +1,14 @@
 import { NgClass, NgIf } from '@angular/common';
 import { Component, OnInit, inject } from '@angular/core';
+import { CarouselModule } from 'primeng/carousel';
 import { DataViewModule } from 'primeng/dataview';
 import { TagModule } from 'primeng/tag';
 import { GithubService } from '../../services/github.service';
 
 @Component({
   selector: 'app-repos',
   standalone: true,
-  imports: [TagModule, DataViewModule, NgIf, NgClass],
+  imports: [TagModule, DataViewModule, NgIf, NgClass, CarouselModule],
   templateUrl: './repos.component.html',
   styleUrl: './repos.component.scss',
   providers: [GithubService]
@@ -20,10 +21,24 @@ export class ReposComponent implements OnInit {
     card_img: false
   };
   repos: any[] = [];
+  respOptions: any[] | undefined;
 
   ngOnInit(): void {
+    this.respOptions = [
+      { breakpoint: '2559px', numVisible: 5, numScroll: 1 },
+      { breakpoint: '1919px', numVisible: 5, numScroll: 1 },
+      { breakpoint: '1439px', numVisible: 3, numScroll: 1 },
+      { breakpoint: '1366px', numVisible: 3, numScroll: 1 },
+      { breakpoint: '1199px', numVisible: 2, numScroll: 1 },
+      { breakpoint: '991px', numVisible: 2, numScroll: 1 },
+      { breakpoint: '599px', numVisible: 1, numScroll: 1 }
 
-    this.gitService.getAll('tauisilva').subscribe((repos) => {
+    ]
+    this.load();
+  }
+
+  load() {
+    this.gitService.getAll().subscribe((repos) => {
       if (repos) {
         this.repos = repos;
         repos.forEach(async (r: any) => {

diff --git a/src/app/services/github.service.ts b/src/app/services/github.service.ts
@@ -8,12 +8,12 @@ import { environment } from '../../env/env';
 })
 export class GithubService {
 
-  private api = `${environment.GIT_Api}`;
+  private api = `${environment.API_GITHUB}`;
   private http = inject(HttpClient);
   constructor() { }
 
-  getAll(user: string) {
-    return this.http.get<any>(`${this.api}/users/${user}/repos`);
+  getAll() {
+    return this.http.get<any>(`${this.api}/users/${environment.USER_GITHUB}/repos`);
   }
 
   getImg(url: string): Observable<string | null> {

diff --git a/src/env/env.ts b/src/env/env.ts
@@ -1,4 +1,5 @@
 export const environment = {
   production: false,
-  GIT_Api: 'https://api.github.com',
+  API_GITHUB: 'https://api.github.com',
+  USER_GITHUB: 'tauisilva'
 }