Edit table - Akmot9/tauri_crud GitHub Wiki

Editing a Table with Tauri, Vue.js, and Rusqlite

In this tutorial, we will learn how to edit existing records in a table using Tauri, Vue.js, and the Rusqlite database. We'll build upon the previous tutorial, Creating a Table with Tauri, Vue.js, and Rusqlite, where we created a table.

Prerequisites

Before starting this tutorial, ensure that you have completed the prerequisites mentioned in the Tauri documentation.

Step 1: Project Structure

In your project structure, you should already have the following files and directories:

  • src/App.vue
  • src/components/EditTable.vue
  • src-tauri/src/main.rs

If you don't have these files, refer to the previous tutorial to set up your project structure.

Step 2: Create the Edit Table Component

In src/App.vue, import and use the EditTable component:

      <section>
        <h2>Add Packet Info Component</h2>
        <EditTable />
      </section>
import EditTable from "./components/EditTable.vue";

Step 3: Implement the Edit Table Component

In src/components/EditTable.vue, create a form to edit existing records in the table:

<template>
    <div>
      <h2>Add Packet Information</h2>
      <form @submit.prevent="submitForm">
        <div class="form-group">
          <label for="mac_source">MAC Source:</label>
          <input type="text" id="mac_source" v-model="packetInfo.mac_source" required />
        </div>
        <div class="form-group">
          <label for="mac_destination">MAC Destination:</label>
          <input type="text" id="mac_destination" v-model="packetInfo.mac_destination" required />
        </div>
        <!-- Add other form fields for PacketInfo properties -->
        <button type="submit">Add Packet Info</button>
      </form>
    </div>
  </template>
  
  <script>
  import { invoke } from '@tauri-apps/api'

  export default {
    data() {
      return {
        packetInfo: {
          mac_source: "",
          mac_destination: "",
          ethertype: "",
          ip_source: "",
          ip_destination: "",
          protocol: "",
          port_source: "",
          port_destination: "",
          count: 0,
        },
      };
    },
    methods: {
      async submitForm() {
        try {
          // Send the packetInfo object to Rust for insertion
          invoke('insert_packet_info', {packet_info: this.packetInfo})
          .then((response) => console.log(response))
        } catch (error) {
          console.error(error);
          alert("An error occurred while adding packet info.");
        }
      },
    },
  };
  </script>
  
  <style scoped>
  /* Add your component-specific styles here */
  </style>

Step 4: Implement the Rust Function

In src-tauri/src/main.rs, implement the Rust function to edit the table records. You can modify the existing create_table command to handle edits.

#[tauri::command(rename_all = "snake_case")]
fn insert_packet_info(packet_info: PacketInfo) -> Result<()> {
    println!("I was invoked from JS, with this message: {:?}", &packet_info);
    // Open a connection to the SQLite database
    let conn = Connection::open("my_database.db").unwrap();

    // Insert the provided `PacketInfo` into the table
    conn.execute(
        "INSERT INTO packet_info (mac_source, mac_destination, ethertype, ip_source, ip_destination, protocol, port_source, port_destination, count)
         VALUES (?1, ?2, ?3, ?4, ?5, ?6, ?7, ?8, ?9)",
        params![
            packet_info.mac_source,
            packet_info.mac_destination,
            packet_info.ethertype,
            packet_info.ip_source,
            packet_info.ip_destination,
            packet_info.protocol,
            packet_info.port_source,
            packet_info.port_destination,
            packet_info.count,
        ],
    ).unwrap();

    Ok(())
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![create_table,insert_packet_info])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

Conclusion

In this tutorial, you have learned how to set up the structure for editing a table in a Tauri, Vue.js, and Rusqlite project. You can customize the EditTable component and the Rust function edit_table to handle specific editing operations for your application.

Feel free to extend this example to build a full CRUD application with Tauri and Rusqlite, allowing users to create, read, update, and delete records in the database.

Continue exploring Tauri and Vue.js to create powerful desktop applications with embedded databases.

⚠️ **GitHub.com Fallback** ⚠️