Merge pull request #18 from HE-Arc/12-add-character-element

add basic actions on characters (CRUD)

Author: sebastienmendes

api/fantasyforge/settings.py

@@ -30,7 +30,7 @@
 DEBUG = True
 
 ALLOWED_HOSTS = [
-    "127.0.0.1",
+    "localhost",
     "api-fantasy-forge.k8s.ing.he-arc.ch",
     ]
 

api/fantasyforgeapp/forms.py

@@ -0,0 +1,7 @@
+from django import forms
+from .models import Character
+
+class CharacterForm(forms.ModelForm):
+    class Meta:
+        model = Character
+        fields = ['name']

frontend/src/router/index.js

@@ -21,8 +21,20 @@ const router = createRouter({
     {
       path: '/characters',
       name: 'characters',
-      component: () => import('../views/CharachtersView.vue'),
-    }
+      component: () => import('../views/CharactersView.vue'),
+    },
+
+    {
+      path: '/characters/:id',
+      name: 'character-edit',
+      component: () => import('../views/CharacterEdition.vue'),
+    },
+
+    {
+      path: '/characters/new',
+      name: 'character-new',
+      component: () => import('../views/CharacterEdition.vue'),
+    },
   ],
 })
 

frontend/src/views/CharachtersView.vue

@@ -0,0 +1,83 @@
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import axios from 'axios';
+
+// State variables
+const name = ref('');
+const message = ref('');
+const isEdit = ref(false); // Flag to check if we are in edit mode
+const characterId = ref(null);
+
+// Fetch character data for editing
+const route = useRoute();
+const router = useRouter();
+
+// On mounted, check if we're editing (via URL param)
+onMounted(async () => {
+  if (route.params.id) {
+    isEdit.value = true;
+    characterId.value = route.params.id;
+    await fetchCharacter();
+  }
+});
+
+// Fetch the character data by ID (for editing)
+const fetchCharacter = async () => {
+  try {
+    const response = await axios.get(`/api/characters/${characterId.value}/`);
+    name.value = response.data.name; // Pre-fill the form with the existing data
+  } catch (error) {
+    message.value = 'Error fetching character data!';
+    console.error(error);
+  }
+};
+
+// Handle form submission (POST for create, PUT for edit)
+const submitForm = async () => {
+  try {
+    if (isEdit.value) {
+      // PUT request for editing an existing character
+      const response = await axios.put(`/api/characters/${characterId.value}/`, { name: name.value });
+      message.value = `Character "${response.data.name}" updated successfully!`;
+    } else {
+      // POST request for creating a new character
+      const response = await axios.post('/api/characters/', { name: name.value });
+      message.value = `Character "${response.data.name}" created successfully!`;
+    }
+
+    router.push('/characters'); // Redirect to the list page after submission
+  } catch (error) {
+    message.value = 'Error submitting the form!';
+    console.error(error);
+  }
+};
+</script>
+
+<template>
+  <div>
+    <h2>{{ isEdit ? 'Edit' : 'Create' }} Character</h2>
+    <form @submit.prevent="submitForm">
+      <input v-model="name" type="text" placeholder="Character Name" required />
+      <button type="submit">{{ isEdit ? 'Update' : 'Create' }} Character</button>
+    </form>
+
+    <p v-if="message">{{ message }}</p>
+  </div>
+</template>
+
+<style scoped>
+input {
+  padding: 8px;
+  margin-right: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+button {
+  padding: 8px 12px;
+  background-color: blue;
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+</style>

frontend/src/views/CharacterEdition.vue

@@ -0,0 +1,46 @@
+<script setup>
+import axios from "axios";
+import { ref, onMounted } from "vue";
+const characters = ref([]);
+
+const fetchCharacters = async () => {
+  try {
+    const res = await axios.get("/api/characters/");
+    characters.value = res.data;
+  } catch (error) {
+    console.error("Error fetching characters:", error);
+  }
+};
+
+onMounted(() => {
+  fetchCharacters();
+});
+const deleteCharacter = async (id) => {
+  try {
+    await axios.delete(`/api/characters/${id}/`);
+    characters.value = characters.value.filter(character => character.id !== id);
+  } catch (error) {
+    console.error("Error deleting character:", error);
+  }
+};
+</script>
+<template>
+  <div>
+    <div class="flex justify-end mb-4">
+      <router-link :to="{ name: 'character-new' }" class="bg-red-500 text-white px-4 py-2 rounded">Add Character</router-link>
+    </div>
+    <ul class="list-none p-0">
+      <li v-for="character in characters" :key="character.id" class="p-2 border-b border-gray-300 flex justify-between items-center">
+        <span>{{ character.name }}</span>
+        <div>
+            <router-link :to="{ name: 'character-edit', params: { id: character.id } }">
+              ✏️
+            </router-link>
+            <button @click="deleteCharacter(character.id)">
+              <router-link :to="{ name: 'characters' }">🗑️</router-link>
+            </button>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>