Actualizando fork

src/App.vue

@@ -6,9 +6,15 @@
         <li class="nav-item">
           <router-link to="/explorers" class="nav-link">Explorers</router-link>
         </li>
+        <li class="nav-item">
+          <router-link to="/MissionCommanders" class="nav-link">Mission Commanders</router-link>
+        </li>
         <li class="nav-item">
           <router-link to="/add" class="nav-link">Agregar Explorer</router-link>
         </li>
+        <li class="nav-item">
+          <router-link to="/addMissionCommander" class="nav-link">Agregar Mission Commander</router-link>
+        </li>        
       </div>
     </nav>
     <div class="container mt-3">

src/components/AddMissionCommander.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="submit-form">
+    <div v-if="!submitted">
+    <h3>Nuevo Mission Commander</h3>
+      <div class="form-group">
+        <label for="title">Nombre </label>
+        <input
+          type="text"
+          class="form-control"
+          id="title"
+          required
+          v-model="missionCommander.name"
+          name="title"
+        />
+      </div>
+      <div class="form-group">
+        <label for="title">Username</label>
+        <input
+          type="text"
+          class="form-control"
+          id="username"
+          required
+          v-model="missionCommander.username"
+          name="username"
+        />
+      </div>
+      <div class="form-group">
+        <label for="title">MainStack</label>
+        <input
+          type="text"
+          class="form-control"
+          id="mainStack"
+          required
+          v-model="missionCommander.mainStack"
+          name="mainStack"
+        />
+      </div>
+      <button @click="saveMissionCommander" class="btn btn-success">Agregar</button>
+    </div>
+    <div v-else>
+      <h4> Mission Commander creado exitosamente. </h4>
+      <button class="btn btn-success" @click="newMissionCommander">Add</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import ExplorerService from "../services/ExplorerService";
+export default {
+  name: "add-missionCommander",
+  data() {
+    return {
+      missionCommander: {
+        id: null,
+        name: "",
+        username: "",
+        mainStack: ""
+      },
+      submitted: false
+    };
+  },
+  methods: {
+    saveMissionCommander() {
+      var data = {
+        name: this.missionCommander.name,
+        username: this.missionCommander.username,
+        mainStack: this.missionCommander.mainStack
+      };
+      ExplorerService.createMC(data)
+        .then(response => {
+          this.missionCommander.id = response.data.id;
+          this.submitted = true;
+        })
+        .catch(e => {
+          console.log(e);
+        });
+    },
+    newMissionCommander() {
+      this.submitted = false;
+      this.missionCommander = {};
+    }
+  }
+};
+</script>

src/components/MissionCommander.vue

@@ -0,0 +1,90 @@
+<template>
+<h4>Mission Commander</h4>
+  <div v-if="currentMissionCommander" class="edit-form">
+    <form>
+      <div class="form-group">
+        <label for="title">Nombre</label>
+        <input type="text" disabled class="form-control" id="title"
+          v-model="currentMissionCommander.name"
+        />
+      </div>
+      <div class="form-group">
+        <label for="title">Username</label>
+        <input type="text" disabled class="form-control" id="title"
+          v-model="currentMissionCommander.username"
+        />
+      </div>
+      <div class="form-group">
+        <label for="title">MainStack</label>
+        <input type="text" class="form-control" id="title"
+          v-model="currentMissionCommander.mainStack"
+        />
+      </div>
+    </form>
+    <button class="btn btn-danger mr-2" @click="deleteMissionCommander">
+      Eliminar Mission Commander
+    </button>
+    <button type="submit" class="btn btn-info mr-2" @click="updateMissionCommander">
+      Actualizar
+    </button>
+    <p>{{ message }}</p>
+  </div>
+  <div v-else>
+    <br />
+    <p> Selecciona un Mission Commander. </p>
+  </div>
+</template>
+<script>
+import ExplorerService from "../services/ExplorerService";
+export default {
+  name: "missionCommander",
+  data() {
+    return {
+      currentMissionCommander: null,
+      message: ''
+    };
+  },
+  methods: {
+    getMComander(id) {
+      ExplorerService.getMComanders(id)
+        .then(response => {
+          this.currentMissionCommander= response.data;
+        })
+        .catch(e => {
+          console.log(e);
+        });
+    },
+    deleteMissionCommander() {
+      ExplorerService.deleteMC(this.currentMissionCommander.id)
+      .then(response => {
+        console.log(response.data);
+        this.$router.push({ name: "explorers" });
+      })
+      .catch(e => {
+          console.log(e);
+      });
+    },
+    updateMissionCommander() {
+      ExplorerService.updateMC(this.currentMissionCommander.id, this.currentMissionCommander)
+        .then(response => {
+          console.log(response.data);
+          this.message = 'Se actualizó correctamente';
+        })
+        .catch(e => {
+          console.log(e);
+        });
+    }
+  },
+  mounted() {
+    this.message = '';
+    this.getMComander(this.$route.params.id);
+  }
+};
+</script>
+
+<style>
+.edit-form {
+  max-width: 300px;
+  margin: auto;
+}
+</style>

src/components/MissionCommanderList.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="list row">
+    <div class="col-md-6">
+      <h4> Mission Commanders </h4>
+      <ul class="list-group">
+        <li class="list-group-item"
+          :class="{ active: index == currentIndex }"
+          v-for="(missionCommander, index) in missionCommanders"
+          :key="index"
+          @click="setActiveMissionCommander(missionCommander, index)"
+        >
+          {{ missionCommander.username }}
+        </li>
+
+      </ul>
+    </div>
+    <div class="col-md-6">
+      <div v-if="currentMissionCommander">
+        <h4>Mission Commander</h4>
+        <div>
+          <br><label><strong>Nombre:</strong></label> {{ currentMissionCommander.name}}
+          <br><label><strong>Username:</strong></label> {{ currentMissionCommander.username}}
+          <br><label><strong>Mission:</strong></label> {{ currentMissionCommander.mission}}
+        </div>
+        <router-link :to="'/MissionCommander/' + currentMissionCommander.id" class="btn btn-info"> Editar</router-link>
+      </div>
+      <div v-else>
+        <br />
+        <p> Selecciona un Mission Commander.</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import ExplorerService from "../services/ExplorerService";
+
+export default {
+  name: "missionCommander-list",
+  data() {
+    return {
+      tutorials: [],
+      missionCommanders: [],
+      currentTutorial: null,
+      currentMissionCommander: null,
+      currentIndex: -1,
+      title: "",
+      missionCommanderId: ""
+    };
+  },
+  methods: {
+    getAllMCommander(){
+      ExplorerService.getAllMCommanders()
+        .then(response => {
+          this.missionCommanders = response.data;
+        })
+        .catch(e => {
+          console.log(e);
+        });
+    },
+    setActiveMissionCommander(missionCommander, index) {
+      this.currentMissionCommander= missionCommander;
+      this.currentIndex = missionCommander? index : -1;
+    }
+  },
+  mounted() {
+    this.getAllMCommander();
+  }
+};
+</script>

src/router.js

@@ -15,7 +15,23 @@ const routes =  [
     path: "/add",
     name: "add-explorer",
     component: () => import("./components/AddExplorer")
-  }
+  },
+  {
+    path: "/MissionCommanders",
+    alias: "/MissionCommanders",
+    name: "MissionCommanders",
+    component: () => import("./components/MissionCommanderList")
+  },
+  {
+    path: "/MissionCommander/:id",
+    name: "MissionCommander-details",
+    component: () => import("./components/MissionCommander")
+  },
+  {
+    path: "/addMissionCommander",
+    name: "add-MissionCommander",
+    component: () => import("./components/AddMissionCommander")
+  },
 ];
 const router = createRouter({
   history: createWebHistory(),

src/services/ExplorerService.js

@@ -16,6 +16,21 @@ class ExplorerService {
   delete(id) {
     return http.delete(`/explorers/${id}`);
   }
+  getAllMCommanders() {
+    return http.get("/MissionCommanders");
+  }
+  getMCommanders(id) {
+    return http.get(`/MissionCommanders/${id}`);
+  }
+  createMC(data) {
+    return http.post("/MissionCommanders", data);
+  }
+  updateMC(id, data) {
+    return http.put(`/MissionCommanders/${id}`, data);
+  }
+  deleteMC(id) {
+    return http.delete(`/MissionCommanders/${id}`);
+  }
 }
 
 export default new ExplorerService();