├── vue.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── http-common.js
    ├── main.js
    ├── services
    │   └── ExplorerService.js
    ├── router.js
    ├── App.vue
    └── components
    │   ├── ExplorersList.vue
    │   ├── AddExplorer.vue
    │   └── Explorer.vue
├── babel.config.js
├── .gitignore
├── README.md
└── package.json


/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   devServer: {
3 |     port: 8081
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RodolfoBaume/client-launchx/master/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RodolfoBaume/client-launchx/master/src/assets/logo.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/http-common.js:
--------------------------------------------------------------------------------
1 | import axios from "axios";
2 | export default axios.create({
3 |   baseURL: "http://localhost:3000",
4 |   headers: {
5 |     "Content-type": "application/json"
6 |   }
7 | });
8 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | import 'bootstrap'
4 | import 'bootstrap/dist/css/bootstrap.min.css'
5 | import router from './router'
6 | createApp(App).use(router).mount('#app')
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-3-crud
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/src/services/ExplorerService.js:
--------------------------------------------------------------------------------
 1 | import http from "../http-common";
 2 | 
 3 | class ExplorerService {
 4 |   getAll() {
 5 |     return http.get("/explorers");
 6 |   }
 7 |   get(id) {
 8 |     return http.get(`/explorers/${id}`);
 9 |   }
10 |   create(data) {
11 |     return http.post("/explorers", data);
12 |   }
13 |   update(id, data) {
14 |     return http.put(`/explorers/${id}`, data);
15 |   }
16 |   delete(id) {
17 |     return http.delete(`/explorers/${id}`);
18 |   }
19 | }
20 | 
21 | export default new ExplorerService();
22 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import { createWebHistory, createRouter } from "vue-router";
 2 | const routes =  [
 3 |   {
 4 |     path: "/",
 5 |     alias: "/explorers",
 6 |     name: "explorers",
 7 |     component: () => import("./components/ExplorersList")
 8 |   },
 9 |   {
10 |     path: "/explorer/:id",
11 |     name: "explorer-details",
12 |     component: () => import("./components/Explorer")
13 |   },
14 |   {
15 |     path: "/add",
16 |     name: "add-explorer",
17 |     component: () => import("./components/AddExplorer")
18 |   }
19 | ];
20 | const router = createRouter({
21 |   history: createWebHistory(),
22 |   routes,
23 | });
24 | export default router;
25 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <nav class="navbar navbar-expand navbar-light bg-white">
 4 |       <router-link to="/" class="navbar-brand">LaunchX</router-link>
 5 |       <div class="navbar-nav mr-auto">
 6 |         <li class="nav-item">
 7 |           <router-link to="/explorers" class="nav-link">Explorers</router-link>
 8 |         </li>
 9 |         <li class="nav-item">
10 |           <router-link to="/add" class="nav-link">Agregar Explorer</router-link>
11 |         </li>
12 |       </div>
13 |     </nav>
14 |     <div class="container mt-3">
15 |       <router-view />
16 |     </div>
17 |   </div>
18 | </template>
19 | <script>
20 | export default {
21 |   name: "app"
22 | };
23 | </script>
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "launch-x",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build --dest build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.26.0",
12 |     "bootstrap": "^4.6.0",
13 |     "core-js": "^3.6.5",
14 |     "jquery": "^3.6.0",
15 |     "popper.js": "^1.16.1",
16 |     "vue": "^3.0.0",
17 |     "vue-router": "^4.0.12"
18 |   },
19 |   "devDependencies": {
20 |     "@vue/cli-plugin-babel": "~4.5.0",
21 |     "@vue/cli-plugin-eslint": "~4.5.0",
22 |     "@vue/cli-service": "~4.5.0",
23 |     "@vue/compiler-sfc": "^3.0.0",
24 |     "babel-eslint": "^10.1.0",
25 |     "eslint": "^6.7.2",
26 |     "eslint-plugin-vue": "^7.0.0"
27 |   },
28 |   "eslintConfig": {
29 |     "root": true,
30 |     "env": {
31 |       "node": true
32 |     },
33 |     "extends": [
34 |       "plugin:vue/vue3-essential",
35 |       "eslint:recommended"
36 |     ],
37 |     "parserOptions": {
38 |       "parser": "babel-eslint"
39 |     },
40 |     "rules": {}
41 |   },
42 |   "browserslist": [
43 |     "> 1%",
44 |     "last 2 versions",
45 |     "not dead"
46 |   ]
47 | }
48 | 


--------------------------------------------------------------------------------
/src/components/ExplorersList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="list row">
 3 |     <div class="col-md-6">
 4 |       <h4> Explorers Inscritos </h4>
 5 |       <ul class="list-group">
 6 |         <li class="list-group-item"
 7 |           :class="{ active: index == currentIndex }"
 8 |           v-for="(explorer, index) in explorers"
 9 |           :key="index"
10 |           @click="setActiveExplorer(explorer, index)"
11 |         >
12 |           {{ explorer.username }}
13 |         </li>
14 | 
15 |       </ul>
16 |     </div>
17 |     <div class="col-md-6">
18 |       <div v-if="currentExplorer">
19 |         <h4>Explorer</h4>
20 |         <div>
21 |           <br><label><strong>Nombre:</strong></label> {{ currentExplorer.name}}
22 |           <br><label><strong>Username:</strong></label> {{ currentExplorer.username}}
23 |           <br><label><strong>Mission:</strong></label> {{ currentExplorer.mission}}
24 |         </div>
25 |         <router-link :to="'/explorer/' + currentExplorer.id" class="btn btn-info"> Editar</router-link>
26 |       </div>
27 |       <div v-else>
28 |         <br />
29 |         <p> Selecciona un explorer.</p>
30 |       </div>
31 |     </div>
32 |   </div>
33 | </template>
34 | <script>
35 | 
36 | import ExplorerService from "../services/ExplorerService";
37 | 
38 | export default {
39 |   name: "explorer-list",
40 |   data() {
41 |     return {
42 |       tutorials: [],
43 |       explorers: [],
44 |       currentTutorial: null,
45 |       currentExplorer: null,
46 |       currentIndex: -1,
47 |       title: "",
48 |       explorerId: ""
49 |     };
50 |   },
51 |   methods: {
52 |     getAllExplorers(){
53 |       ExplorerService.getAll()
54 |         .then(response => {
55 |           this.explorers = response.data;
56 |         })
57 |         .catch(e => {
58 |           console.log(e);
59 |         });
60 |     },
61 |     setActiveExplorer(explorer, index) {
62 |       this.currentExplorer= explorer;
63 |       this.currentIndex = explorer? index : -1;
64 |     }
65 |   },
66 |   mounted() {
67 |     this.getAllExplorers();
68 |   }
69 | };
70 | </script>
71 | 


--------------------------------------------------------------------------------
/src/components/AddExplorer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="submit-form">
 3 |     <div v-if="!submitted">
 4 |     <h3>Nuevo Explorer</h3>
 5 |       <div class="form-group">
 6 |         <label for="title">Nombre </label>
 7 |         <input
 8 |           type="text"
 9 |           class="form-control"
10 |           id="title"
11 |           required
12 |           v-model="explorer.name"
13 |           name="title"
14 |         />
15 |       </div>
16 |       <div class="form-group">
17 |         <label for="title">Username</label>
18 |         <input
19 |           type="text"
20 |           class="form-control"
21 |           id="username"
22 |           required
23 |           v-model="explorer.username"
24 |           name="username"
25 |         />
26 |       </div>
27 |       <div class="form-group">
28 |         <label for="title">Misión</label>
29 |         <input
30 |           type="text"
31 |           class="form-control"
32 |           id="mission"
33 |           required
34 |           v-model="explorer.mission"
35 |           name="mission"
36 |         />
37 |       </div>
38 |       <button @click="saveExplorer" class="btn btn-success">Agregar</button>
39 |     </div>
40 |     <div v-else>
41 |       <h4> Explorer creado exitosamente. </h4>
42 |       <button class="btn btn-success" @click="newExplorer">Add</button>
43 |     </div>
44 |   </div>
45 | </template>
46 | 
47 | <script>
48 | import ExplorerService from "../services/ExplorerService";
49 | export default {
50 |   name: "add-explorer",
51 |   data() {
52 |     return {
53 |       explorer: {
54 |         id: null,
55 |         name: "",
56 |         username: "",
57 |         mission: ""
58 |       },
59 |       submitted: false
60 |     };
61 |   },
62 |   methods: {
63 |     saveExplorer() {
64 |       var data = {
65 |         name: this.explorer.name,
66 |         username: this.explorer.username,
67 |         mission: this.explorer.mission
68 |       };
69 |       ExplorerService.create(data)
70 |         .then(response => {
71 |           this.explorer.id = response.data.id;
72 |           this.submitted = true;
73 |         })
74 |         .catch(e => {
75 |           console.log(e);
76 |         });
77 |     },
78 |     newExplorer() {
79 |       this.submitted = false;
80 |       this.explorer = {};
81 |     }
82 |   }
83 | };
84 | </script>
85 | 


--------------------------------------------------------------------------------
/src/components/Explorer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <h4>Explorer</h4>
 3 |   <div v-if="currentExplorer" class="edit-form">
 4 |     <form>
 5 |       <div class="form-group">
 6 |         <label for="title">Nombre</label>
 7 |         <input type="text" disabled class="form-control" id="title"
 8 |           v-model="currentExplorer.name"
 9 |         />
10 |       </div>
11 |       <div class="form-group">
12 |         <label for="title">Username</label>
13 |         <input type="text" disabled class="form-control" id="title"
14 |           v-model="currentExplorer.username"
15 |         />
16 |       </div>
17 |       <div class="form-group">
18 |         <label for="title">Misión</label>
19 |         <input type="text" class="form-control" id="title"
20 |           v-model="currentExplorer.mission"
21 |         />
22 |       </div>
23 |     </form>
24 |     <button class="btn btn-danger mr-2" @click="deleteExplorer">
25 |       Eliminar Explorer
26 |     </button>
27 |     <button type="submit" class="btn btn-info mr-2" @click="updateExplorer">
28 |       Actualizar
29 |     </button>
30 |     <p>{{ message }}</p>
31 |   </div>
32 |   <div v-else>
33 |     <br />
34 |     <p> Selecciona un explorer. </p>
35 |   </div>
36 | </template>
37 | <script>
38 | import ExplorerService from "../services/ExplorerService";
39 | export default {
40 |   name: "explorer",
41 |   data() {
42 |     return {
43 |       currentExplorer: null,
44 |       message: ''
45 |     };
46 |   },
47 |   methods: {
48 |     getExplorer(id) {
49 |       ExplorerService.get(id)
50 |         .then(response => {
51 |           this.currentExplorer= response.data;
52 |         })
53 |         .catch(e => {
54 |           console.log(e);
55 |         });
56 |     },
57 |     deleteExplorer() {
58 |       ExplorerService.delete(this.currentExplorer.id)
59 |       .then(response => {
60 |         console.log(response.data);
61 |         this.$router.push({ name: "explorers" });
62 |       })
63 |       .catch(e => {
64 |           console.log(e);
65 |       });
66 |     },
67 |     updateExplorer() {
68 |       ExplorerService.update(this.currentExplorer.id, this.currentExplorer)
69 |         .then(response => {
70 |           console.log(response.data);
71 |           this.message = 'Se actualizó correctamente';
72 |         })
73 |         .catch(e => {
74 |           console.log(e);
75 |         });
76 |     }
77 |   },
78 |   mounted() {
79 |     this.message = '';
80 |     this.getExplorer(this.$route.params.id);
81 |   }
82 | };
83 | </script>
84 | 
85 | <style>
86 | .edit-form {
87 |   max-width: 300px;
88 |   margin: auto;
89 | }
90 | </style>
91 | 


--------------------------------------------------------------------------------