Merge pull request #3 from tauisilva/dev

ajustes no design do card
tauisilva · Mar 4, 2024 · bf165c2 · bf165c2
2 parents 73929ed + 9a098eb
commit bf165c2
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 42 deletions.
diff --git a/src/app/components/repos/repos.component.html b/src/app/components/repos/repos.component.html
@@ -16,34 +16,43 @@
               <span class="date">Criado:<strong>{{formatData(repo.created_at)}}</strong></span>
               <span class="date">Atualidao:<strong>{{formatData(repo.updated_at)}}</strong> </span>
             </div>
-            <div class="w-full h-auto gap-1 flex">
-              <section class="w-full h-full">
-                <section class="w-full h-full flex border-round overflow-hidden">
+            <div class="w-full h-auto gap-1 flex justify-content-between">
+              <section class="w-9 h-full">
+                <section class="w-full h-full shadow-2 flex border-round overflow-hidden">
                   @for (language of repo.langs; track $index) {
-                  <div class="bar" [style.width]="language.percentage + '%'" [style.backgroundColor]="language.color">
-                  </div>
+                  <span class="bar" [style.width]="language.percentage + '%'" [style.backgroundColor]="language.color">
+                  </span>
                   }
                 </section>
                 <section class="w-full">
-                  <section class="flex justify-content-between">
+                  <section class="flex flex-wrap gap-1">
                     @for (lan of repo.langs; track $index) {
                     <div class="lang">
-                      <span class="bol" [style.backgroundColor]="lan.color"></span>
+                      <span class="bol shadow-2" [style.backgroundColor]="lan.color"></span>
                       <span class="txt">{{lan.name}}</span>
                     </div>
                     }
                   </section>
                 </section>
               </section>
               <p-tag *ngIf="repo?.language" severity="success" [value]="repo?.language"></p-tag>
+              <!-- <p-chip *ngIf="repo?.language" [label]="repo?.language"></p-chip> -->
             </div>
             <section class="w-full text-left h-3rem">
               <p class="description">{{ repo.description }}</p>
             </section>
-            <section class="flex py-1 gap-2 justify-content-end">
-              <a class="icon" [href]="repo.html_url" target="_blank"><i class="bi bi-github"></i></a>
-              <a class="icon" [href]="repo.html_url" target="_blank"><i class="bi bi-eye"></i></a>
-              <a class="icon" [href]="repo.html_url" target="_blank"><i class="bi bi-info"></i></a>
+            <section class="flex py-1 footer" [ngClass]="{ 'justify-content-between': repo.name === isPort,
+               'justify-content-end': repo.name !== isPort }">
+              <section class="flex border-yellow-500 text-sm icon w-auto gap-1 align-items-center"
+                *ngIf="repo.name === isPort">
+                <p class="m-0 font-bold">este site</p>
+                <i class="bi bi-stars text-yellow-500"></i>
+              </section>
+              <section class="flex gap-2">
+                <a class="icon" [href]="repo.html_url" target="_blank"><i class="bi bi-github"></i></a>
+                <a class="icon" [href]="repo.html_url" target="_blank"><i class="bi bi-eye"></i></a>
+                <a class="icon" [href]="repo.html_url" target="_blank"><i class="bi bi-info"></i></a>
+              </section>
             </section>
           </div>
         </div>

diff --git a/src/app/components/repos/repos.component.scss b/src/app/components/repos/repos.component.scss
@@ -52,7 +52,6 @@
 
   .top-info {
     display: flex;
-    flex-direction: row;
     align-items: center;
     justify-content: space-between;
     padding: .5rem 0 1rem 0;
@@ -64,8 +63,6 @@
     img.icon {
       width: 1.5rem;
     }
-
-
   }
 
   .body {
@@ -93,16 +90,17 @@
       padding: .25rem 0;
     }
 
-    a.icon {
-      color: var(--text-color);
-      border: 1px solid var(--surface-border);
-      padding: .1rem .25rem;
-      border-radius: 5px;
-      background-color: transparent;
-      backdrop-filter: blur(50px);
+    .footer {
+
+      .icon {
+        color: var(--text-color);
+        border: 1px solid var(--surface-border);
+        padding: .1rem .25rem;
+        border-radius: 5px;
 
-      i {
-        font-size: larger;
+        i {
+          font-size: medium;
+        }
       }
     }
   }

diff --git a/src/app/components/repos/repos.component.ts b/src/app/components/repos/repos.component.ts
@@ -3,19 +3,20 @@ import { Component, OnInit, ViewEncapsulation, inject } from '@angular/core';
 import { CarouselModule } from 'primeng/carousel';
 import { DataViewModule } from 'primeng/dataview';
 import { TagModule } from 'primeng/tag';
+import { environment } from '../../../env/env';
 import { repos } from '../../models/dados';
 import { GithubService } from '../../services/github.service';
 import { fIsoDate } from '../../utils/data';
-
 @Component({
   selector: 'app-repos',
   standalone: true,
   imports: [
-    TagModule,
+    CarouselModule,
     DataViewModule,
-    NgIf, NgClass,
-    CarouselModule
+    NgClass, NgIf,
+    TagModule,
   ],
+
   templateUrl: './repos.component.html',
   styleUrl: './repos.component.scss',
   providers: [GithubService],
@@ -24,6 +25,7 @@ import { fIsoDate } from '../../utils/data';
 
 export class ReposComponent implements OnInit {
   private gitService = inject(GithubService);
+  isPort = environment.REPO_NAME;
   skeleton = {
     card: false,
     card_img: false
@@ -42,35 +44,54 @@ export class ReposComponent implements OnInit {
       { breakpoint: '599px', numVisible: 1, numScroll: 1 }
 
     ]
-    // this.repos = repos.slice(0, 10);
-    // console.log(this.repos.length)
     this.load();
-    // this.repos.forEach((r) => {
-    //   const l = r.lang;
-    //   r.langs = this.getLan(l);
-    // })
+    // this.loadLocal();
+  }
+
+  loadLocal() {
+    const rep = repos.slice(0, 10);
+    this.repos.forEach((r) => {
+      const l = r.lang;
+      r.langs = this.getLan(l);
+    })
+    const index = rep.findIndex(i => i.name === this.isPort);
+    if (index !== -1) {
+      rep.unshift(rep.splice(index, 1)[0]);
+    }
+    this.repos = rep;
   }
 
   load() {
-    this.gitService.getAll().subscribe((repos) => {
+    this.gitService.getAll().subscribe(async (repos) => {
       if (repos) {
-        const res = repos.slice(0, 10);
+        const res = repos.filter((obj: { description: string | null; }) => obj.description !== null && obj.description !== '');
+        console.log(res.length);
+
         res.forEach(async (r: any) => {
           const img = await this.gitService.getImg(r?.html_url).toPromise();
           r.img = img;
+
           const languages = await this.gitService.getLangs(r?.full_name).toPromise();
           r.langs = this.getLan(languages);
         });
+        if (typeof this.isPort === 'string') {
+          const index = res.findIndex((i: { name: string; }) => i.name === this.isPort);
+
+          if (index !== -1) {
+            res.unshift(res.splice(index, 1)[0]);
+          }
+        }
+
         this.repos = res;
       }
-    })
+    });
   }
+
+
   formatData(data: Date) {
     return fIsoDate(new Date(data));
   }
 
-
-
   getLan(data: any): any {
     const total: any = Object.values(data).reduce((acc: any, value: any) => acc + value, 0);
     console.log(74.21 + 22.05 + 3.75);
@@ -83,8 +104,12 @@ export class ReposComponent implements OnInit {
     return obj;
   }
 
-
   getRandomColor(): string {
-    return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+    let color = '';
+    do {
+      color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+    } while (color === '#FFFFFF' || color === '#000000');
+    return color;
   }
+
 }
diff --git a/src/app/models/dados.ts b/src/app/models/dados.ts
@@ -12,7 +12,7 @@ export const repos = [
 
   },
   {
-    name: 'Obj test 2',
+    name: 'Portfolio-app',
     html_url: 'url 2',
     description: 'kjsdhjksndjk 2',
     language: 'Java',
@@ -48,7 +48,7 @@ export const repos = [
 
   },
   {
-    name: 'Obj test 2',
+    name: "portfolio-app",
     html_url: 'url 2',
     description: 'kjsdhjksndjk 2',
     language: 'Java',

diff --git a/src/env/env.ts b/src/env/env.ts
@@ -2,5 +2,6 @@ export const environment = {
   production: false,
   API_GITHUB: 'https://api.github.com',
   USER_GITHUB: 'tauisilva',
+  REPO_NAME: 'Portfolio-app',
   FILE_INFOS: 'infos.json'
 }