Criando listagem de evento de nacoes e criando formulario para edicao…

… do evento de nacoes. Inserido os mecanismos de injeção de dependencia
db1group · Sep 12, 2024 · 598d819 · 598d819
1 parent bfe625b
commit 598d819
Show file tree

Hide file tree

Showing 23 changed files with 564 additions and 116 deletions.
diff --git a/README.md b/README.md
@@ -7,3 +7,5 @@ This template should help get you started developing with Vue 3 and TypeScript i
 - [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar) and disable Vetur
 
 - Use [vue-tsc](https://github.com/vuejs/language-tools/tree/master/packages/tsc) for performing the same type checking from the command line, or for generating d.ts files for SFCs.
+
+Component Library - Vuetify 3
diff --git a/index.html b/index.html
@@ -1,9 +1,14 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css"
+      rel="stylesheet"
+    />
+    <meta name="color-scheme" content="dark" />
     <title>Vite + Vue + TS</title>
   </head>
   <body>

diff --git a/package.json b/package.json
@@ -9,6 +9,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@types/axios": "^0.14.0",
+    "@types/node": "^22.5.4",
+    "axios": "^1.7.7",
     "keycloak-js": "^25.0.2",
     "pinia": "^2.2.0",
     "sass": "^1.77.4",

diff --git a/src/App.vue b/src/App.vue
@@ -1,30 +1,25 @@
-  <template>
-    <v-layout class="rounded rounded-md">
-      <sidebar-component></sidebar-component>
-      <header-component></header-component>
-
-
-
-
-      <v-main>
-        <v-container>
-
-          <router-view></router-view>
-        </v-container>
-      </v-main>
-    </v-layout>
-  </template>
+<template>
+  <v-layout class="rounded rounded-md">
+    <sidebar-component></sidebar-component>
+    <header-component></header-component>
+    <v-main>
+      <v-container>
+        <router-view></router-view>
+      </v-container>
+    </v-main>
+  </v-layout>
+</template>
 
 <style scoped></style>
 <script lang="ts">
 import { defineComponent } from 'vue';
-import SidebarComponent from './components/sidebar/sidebar.component.vue'
-import HeaderComponent from './components/header/header.component.vue'
+import SidebarComponent from './components/sidebar/sidebar.component.vue';
+import HeaderComponent from './components/header/header.component.vue';
 
 export default defineComponent({
   components: {
     SidebarComponent,
-    HeaderComponent
-  }
-})
+    HeaderComponent,
+  },
+});
 </script>
diff --git a/src/components/sidebar/sidebar.component.vue b/src/components/sidebar/sidebar.component.vue
@@ -1,34 +1,30 @@
 <template>
-
-    <!-- <v-navigation-drawer theme="dark" permanent rail>
-
-
-        <v-divider></v-divider>
-        
-        <v-list density="compact" nav>
-            <v-list-item prepend-avatar="https://cdn.vuetifyjs.com/images/cards/house.jpg" value="house"
-            nav></v-list-item>
-            <v-list-item prepend-avatar="https://cdn.vuetifyjs.com/images/cards/road.jpg" value="road"
-            nav></v-list-item>
-            <v-list-item prepend-avatar="https://cdn.vuetifyjs.com/images/cards/plane.jpg" value="plane"
-            nav></v-list-item>
-        </v-list>
-    </v-navigation-drawer> -->
-
-    <v-navigation-drawer permanent>
-        <v-list-item class="pa-4" prepend-avatar="https://randomuser.me/api/portraits/men/75.jpg" nav>
-            John Doe
-        </v-list-item>
-
-        <v-divider></v-divider>
-        <v-list>
-            <v-list-item title="Home" value="home"></v-list-item>
-
-            <v-list-item title="Contacts" value="contacts"></v-list-item>
-
-            <v-list-item title="Settings" value="settings"></v-list-item>
-        </v-list>
-    </v-navigation-drawer>
-
-
-</template>
+  <v-navigation-drawer permanent>
+    <v-list-item class="pa-4" nav> {{ username }} </v-list-item>
+
+    <v-divider></v-divider>
+    <v-list>
+      <v-list-item link href="/" title="Home" value="home"></v-list-item>
+      <v-list-item
+        href="/nation-events"
+        title="Evento de nações"
+        value="nations"
+      ></v-list-item>
+      <v-list-item href="/" title="Ligas" value="leagues"></v-list-item>
+    </v-list>
+  </v-navigation-drawer>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { authStore } from '../../store/auth-store';
+
+export default defineComponent({
+  computed: {
+    username() {
+      const store = authStore();
+      return store.username;
+    },
+  },
+});
+</script>
diff --git a/src/infra/auth/memory-ad.service.ts b/src/infra/auth/memory-ad.service.ts
@@ -0,0 +1,22 @@
+import { AuthStore } from '../../store/auth-store.interface';
+import { AuthAd } from './auth-ad';
+
+export class MemoryAdService implements AuthAd {
+  constructor(private readonly storeService: AuthStore) {}
+  async connect(): Promise<boolean> {
+    this.storeService.setToken('mock token');
+
+    this.storeService.setUsername('Geraldo Silva');
+    this.storeService.setUserCode('123456');
+
+    return true;
+  }
+  async refreshToken(): Promise<string> {
+    return 'true';
+  }
+  async disconnect(): Promise<void> {}
+
+  isAuthenticated(): boolean {
+    return true;
+  }
+}
diff --git a/src/infra/dependecy-injection/dependency-injection.ts b/src/infra/dependecy-injection/dependency-injection.ts
@@ -3,19 +3,23 @@ import { App } from 'vue';
 import { authStore } from '../../store/auth-store';
 import { AuthStore } from '../../store/auth-store.interface';
 import { AUTH_AD, AuthAd } from '../auth/auth-ad';
-import { KeycloakAdService } from '../auth/keycloak-ad.service';
+import { MemoryAdService } from '../auth/memory-ad.service';
+import { HTTP_CLIENT, HttpClient } from '../http/http-client';
+import { AxiosAdapter } from '../http/axios-adapter';
 
 export class DependencyInjection {
   store: AuthStore;
   authService: AuthAd;
+  httpClient: HttpClient;
 
   constructor() {
     this.store = authStore();
-    this.authService = new KeycloakAdService(this.store);
+    this.authService = new MemoryAdService(this.store);
+    this.httpClient = new AxiosAdapter();
   }
 
   async execute(applicationVue: App<Element>) {
-    // TODO: Add more service here
     applicationVue.provide(AUTH_AD, this.authService);
+    applicationVue.provide(HTTP_CLIENT, this.httpClient);
   }
 }
diff --git a/src/infra/http/axios-adapter.ts b/src/infra/http/axios-adapter.ts
@@ -0,0 +1,28 @@
+import axios, { Axios } from 'axios';
+import { HttpClient } from './http-client';
+
+export class AxiosAdapter implements HttpClient {
+  private http: Axios;
+
+  constructor() {
+    this.http = axios.create({
+      baseURL: import.meta.env.VITE_BACKEND_URL,
+    });
+  }
+
+  async get<T>(url: string): Promise<T> {
+    return this.http.get(url).then((response) => response.data);
+  }
+
+  async post<T>(url: string, data: any): Promise<T> {
+    return this.http.post(url, data).then((response) => response.data);
+  }
+
+  async put<T>(url: string, data: any): Promise<T> {
+    return this.http.put(url, data).then((response) => response.data);
+  }
+
+  async delete<T>(url: string): Promise<T> {
+    return this.http.delete(url).then((response) => response.data);
+  }
+}
diff --git a/src/infra/http/http-client.ts b/src/infra/http/http-client.ts
@@ -0,0 +1,7 @@
+export const HTTP_CLIENT = Symbol('HTTP_Client');
+export interface HttpClient {
+  get<T>(url: string): Promise<T>;
+  post<T>(url: string, data: any): Promise<T>;
+  put<T>(url: string, data: any): Promise<T>;
+  delete<T>(url: string): Promise<T>;
+}
diff --git a/src/modules/home/home.component.vue b/src/modules/home/home.component.vue
@@ -1,49 +1,50 @@
 <template>
-    <v-row>
-        <v-col cols="12">
-            <v-card>
-                <v-card-title>
-                    <h1>Home</h1>
-                </v-card-title>
-                <v-card-text>
-                    <p>Welcome to Rockstar Gaming</p>
-                </v-card-text>
-            </v-card>
-        </v-col>
-        <v-col cols="12">
-            <v-row justify="center">
-                <v-col cols="3">
-                    <v-card>
-                        <v-img src="/images/league/create-league-card.jpg" class="align-end"
-                            gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)" height="200px" cover>
-                            <v-card-title class="text-white">
-                                Cria uma nova liga
-                            </v-card-title>
-                        </v-img>
+  <v-row>
+    <v-col cols="12">
+      <v-card>
+        <v-card-title>
+          <h1>Home</h1>
+        </v-card-title>
+        <v-card-text>
+          <p>Welcome to Rockstar Gaming</p>
+        </v-card-text>
+      </v-card>
+    </v-col>
+    <v-col cols="12">
+      <v-row justify="center">
+        <v-col cols="3">
+          <v-card>
+            <v-img
+              src="/images/league/create-league-card.jpg"
+              class="align-end"
+              gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
+              height="200px"
+              cover
+            >
+              <v-card-title class="text-white">
+                Cria uma nova liga
+              </v-card-title>
+            </v-img>
 
-                        <v-card-actions>
-                            <v-spacer></v-spacer>
-                            <v-btn @click="createNewLeague">
-                                Nova liga
-                            </v-btn>
-                        </v-card-actions>
-                    </v-card>
-                </v-col>
-            </v-row>
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn @click="createNewNationEvent"> Nova liga de nações </v-btn>
+            </v-card-actions>
+          </v-card>
         </v-col>
-    </v-row>
+      </v-row>
+    </v-col>
+  </v-row>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent } from 'vue';
 
 export default defineComponent({
-    methods: {
-        createNewLeague() {
-            this.$router.push({ name: 'create-league' })
-        }
-    }
-
-
-})
-</script>
+  methods: {
+    createNewNationEvent() {
+      this.$router.push({ name: 'create-nation-event' });
+    },
+  },
+});
+</script>
diff --git a/src/modules/league/list/league-list.component.vue b/src/modules/league/list/league-list.component.vue
diff --git a/src/modules/league/route.ts b/src/modules/league/route.ts
@@ -1,21 +1,23 @@
-const routers = [
+import type { RouteRecordRaw } from 'vue-router';
+
+const routers: readonly RouteRecordRaw[] = [
   {
     path: '/league',
     component: () => import('./league.component.vue'),
     children: [
       {
         name: 'create-league',
-        path: '/create',
+        path: 'create',
+        component: () => import('./form/league-form.component.vue'),
+      },
+      {
+        path: 'edit/:id',
         component: () => import('./form/league-form.component.vue'),
       },
-      //   {
-      //     path: 'edit/:id',
-      //     component: () => import('./form/edit-league.component.vue'),
-      //   },
-      //   {
-      //     path: 'list',
-      //     component: () => import('./list/list-league.component.vue'),
-      //   },
+      {
+        path: 'list',
+        component: () => import('./list/league-list.component.vue'),
+      },
     ],
   },
 ];

diff --git a/src/modules/nation-event/entities/nation-event.ts b/src/modules/nation-event/entities/nation-event.ts
@@ -0,0 +1,31 @@
+export class NationEvent {
+  public id: string;
+  public name: string;
+  public season: string;
+
+  constructor(
+    data: NationEventInput = {
+      id: '',
+      name: '',
+      season: '',
+    }
+  ) {
+    this.id = data.id;
+    this.name = data.name;
+    this.season = data.season;
+  }
+
+  create() {
+    console.log(this, 'vai salvar isso no backend');
+  }
+
+  update() {
+    // Update the nation event
+  }
+}
+
+export type NationEventInput = {
+  id: string;
+  name: string;
+  season: string;
+};