Dynamic Server Entry Management in a Vue.js Application

This challenge focuses on building a component within a Vue.js application that allows users to dynamically add, edit, and delete server entries. This is a common requirement in applications that manage infrastructure, APIs, or any system requiring configuration of external services. The goal is to create a reusable component that handles server entry data and provides a user-friendly interface for managing it.

Problem Description

You are tasked with creating a Vue.js component named ServerEntryManager. This component should allow users to:

1. Add a new server entry: The user should be able to input a server name, URL, and port number. Upon submission, a new entry should be added to the component's data.
2. View existing server entries: A list of existing server entries should be displayed, showing the server name, URL, and port.
3. Edit an existing server entry: Clicking on an entry should open an edit form pre-populated with the entry's data. Changes should be saved and reflected in the displayed list.
4. Delete a server entry: A delete button should be provided for each entry, allowing the user to remove it from the list.

The component should use TypeScript for type safety and maintainability. The data for server entries should be stored within the component's reactive data. Error handling (e.g., invalid URL format) is not required for this challenge, but consider it for future improvements.

Key Requirements:

• The component must be written in TypeScript.
• The component must be reactive, meaning changes to the data are reflected in the UI.
• The UI should be clear and intuitive for adding, viewing, editing, and deleting server entries.
• The component should be reusable and easily integrated into other parts of a Vue.js application.

Expected Behavior:

• When the component loads, it should display an empty list if no server entries exist.
• Adding a new entry should add it to the list and clear the input fields.
• Editing an entry should update the entry in the list.
• Deleting an entry should remove it from the list.

Examples

Example 1:

Input: Initial state: []
Output: A component displaying an empty list with an "Add Server" button and input fields for name, URL, and port.
Explanation: The component initializes with an empty array of server entries.

Example 2:

Input: User adds a server with name "Server A", URL "https://example.com", and port 8080.
Output: The list displays one entry: { name: "Server A", url: "https://example.com", port: 8080 }. The input fields are cleared.
Explanation: The new server entry is added to the component's data and displayed in the list.

Example 3:

Input: User clicks "Edit" on an entry with name "Server A", URL "https://example.com", and port 8080. User changes the URL to "https://newexample.com" and saves.
Output: The list displays one entry: { name: "Server A", url: "https://newexample.com", port: 8080 }.
Explanation: The URL of the selected entry is updated in the component's data and reflected in the list.

Constraints

• The component should be self-contained and not rely on external data sources (e.g., an API). Data is managed within the component's state.
• The URL should be a string.
• The port should be a number.
• The component should be reasonably performant for a small number of entries (up to 20). Optimization for large datasets is not required.
• The UI can be simple HTML and CSS; advanced styling is not required.

Notes

• Consider using Vue's v-model directive for two-way data binding in the input fields.
• Think about how to structure the data for each server entry (e.g., an object with name, url, and port properties).
• You can use Vue's template syntax (e.g., v-for, v-if) to dynamically render the list of server entries.
• Focus on the core functionality of adding, viewing, editing, and deleting entries. Error handling and advanced features can be added later.
• The component should be designed to be easily extensible for future features.