Basic CRUD project Vue3 Composition API

<template>
  <!-- Main container for the application -->
  <div>
    <h1>CRUD Application with Vue 3</h1>

    <!-- Display the list of items -->
    <h2>Items</h2>
    <ul>
      <!-- Loop through the 'items' array using v-for -->
      <li v-for="item in items" :key="item.id">
        <!-- If we are editing this item, show the edit form -->
        <div v-if="editItem && editItem.id === item.id">
          <!-- Input fields for editing the name and description of the item -->
          <input
            v-model="editItem.name"
            placeholder="Edit Name"
          />
          <input
            v-model="editItem.description"
            placeholder="Edit Description"
          />
          <!-- Button to save changes to the item -->
          <button @click="saveEdit">Save</button>
          <!-- Button to cancel the edit -->
          <button @click="cancelEdit">Cancel</button>
        </div>
        <!-- If we are not editing this item, display its details -->
        <div v-else>
          <!-- Show the item's name and description -->
          {{ item.name }} - {{ item.description }}
          <!-- Button to initiate editing for this item -->
          <button @click="startEdit(item)">Edit</button>
          <!-- Button to delete the item -->
          <button @click="deleteItem(item.id)">Delete</button>
        </div>
      </li>
    </ul>

    <!-- Form to add a new item -->
    <h2>Add New Item</h2>
    <!-- Input field for the new item's name -->
    <input v-model="newItem.name" placeholder="Item Name" />
    <!-- Input field for the new item's description -->
    <input v-model="newItem.description" placeholder="Item Description" />
    <!-- Button to add the new item -->
    <button @click="addItem">Add Item</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'; // Import ref for reactivity and onMounted for lifecycle hook
import axios from 'axios'; // Import axios for making HTTP requests

// Define the structure of an Item with TypeScript's interface (optional if using JS)
interface Item {
  id: number; // The unique identifier for each item
  name: string; // The name of the item
  description: string; // The description of the item
}

// Create a reactive array to hold the list of items
const items = ref<Item[]>([]); // 'items' holds the data fetched from the backend

// Create a reactive object to manage new item input
// Omit 'id' because the server generates it when we add a new item
const newItem = ref<Omit<Item, 'id'>>({ name: '', description: '' });

// Create a reactive object to manage the item being edited, or null if no item is being edited
const editItem = ref<Item | null>(null);

// Function to fetch all items from the server when the component is mounted
const fetchItems = async () => {
  try {
    // Send a GET request to fetch the list of items
    const response = await axios.get<Item[]>('http://localhost:5000/items');
    // Update the 'items' array with the data received from the server
    items.value = response.data;
  } catch (error) {
    // Log any error that occurs during the API request
    console.error('Error fetching items:', error);
  }
};

// Use the onMounted lifecycle hook to fetch items when the component is loaded
onMounted(fetchItems);

// Function to add a new item to the list
const addItem = async () => {
  try {
    // Send a POST request to add the new item to the server
    const response = await axios.post<Item>('http://localhost:5000/items', newItem.value);
    // Add the newly created item to the 'items' array
    items.value.push(response.data);
    // Reset the 'newItem' input fields after successfully adding the item
    newItem.value = { name: '', description: '' };
  } catch (error) {
    // Log any error that occurs during the API request
    console.error('Error adding item:', error);
  }
};

// Function to start editing an item
const startEdit = (item: Item) => {
  // Set 'editItem' to the selected item (creates a copy of the item)
  editItem.value = { ...item };
};

// Function to save the edited item
const saveEdit = async () => {
  // If no item is being edited, return early
  if (!editItem.value) return;

  try {
    // Send a PUT request to update the item on the server
    const response = await axios.put<Item>(`http://localhost:5000/items/${editItem.value.id}`, editItem.value);
    // Find the index of the item that was edited in the 'items' array
    const index = items.value.findIndex((i) => i.id === editItem.value!.id);
    // Replace the old item with the updated item in the 'items' array
    items.value[index] = response.data;
    // Clear the 'editItem' to exit edit mode
    editItem.value = null;
  } catch (error) {
    // Log any error that occurs during the API request
    console.error('Error updating item:', error);
  }
};

// Function to cancel the editing process
const cancelEdit = () => {
  // Clear the 'editItem' state to cancel editing
  editItem.value = null;
};

// Function to delete an item
const deleteItem = async (id: number) => {
  try {
    // Send a DELETE request to remove the item from the server
    await axios.delete(`http://localhost:5000/items/${id}`);
    // Update the 'items' array by removing the deleted item
    items.value = items.value.filter((item) => item.id !== id);
  } catch (error) {
    // Log any error that occurs during the API request
    console.error('Error deleting item:', error);
  }
};
</script>

<style scoped>
/* Scoped CSS to style the component */
ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

button {
  margin-left: 10px;
}
</style>