Routing Configuration

With the backend endpoints for creating, deleting, and listing entities established, the next step involves visualizing these operations within the AppBuilder workspace. To navigate to the database management module, configure a new route. A navigation handler can trigger the redirection.

const navigateToDbManager = () => {
  window.open('http://localhost:3001/#/database-manager');
};

Interface Layout and Adaptation

The management view requires a split layout to handle the three core endpoints. The left panel renders the available entities using the list endpoint, alongside a button to invoke the creation endpoint. The right panel displays the schema definition of the currently selected entity. Each entity row includes a removal option bound to the delete endpoint.

Fetching Entity List

Retrieve the available data models upon component initialization. The model structure defines an identifier, a display name, and a schema mapping.

interface DataModel {
  modelId: string;
  modelName: string;
  modelDefinition: Record<string, string>;
}

const [availableModels, setAvailableModels] = useState<DataModel[]>([]);

useEffect(() => {
  fetchModels();
}, []);

const fetchModels = async () => {
  const response = await fetch('http://localhost:4000/entity/getEntityList', { method: 'POST' });
  const result = await response.();
  if (result.data) {
    setAvailableModels(result.data);
  }
};

Removing an Entity

Trigger the deletion process for a specific model by passing its unique identifier to the backend.

const initiateRemoval = (model: DataModel) => async () => {
  const payload = { modelId: model.modelId };
  const response = await fetch('http://localhost:4000/entity/delEntityItem', {
    method: 'POST',
    headers: { 'Content-Type': 'application/' },
    body: JSON.stringify(payload)
  });
  const result = await response.();
  if (result.code === 200) {
    alert('Entity removed successfully');
    fetchModels();
  }
};

Creating an Entity

The creation process requires a model name, a unique identifier, and a schema definition. A modal dialog facilitates this input. Upon confirmation, the schema array is mapped into an object before submission. These database schemas serve as the foundational structure for persisting data submitted through low-code forms later in the system.

const submitNewModel = async () => {
  if (!modelName || !modelId) {
    alert('Model identifier and name are required');
    return;
  }

  const definition: Record<string, string> = {};
  fieldEntries.forEach((entry) => {
    if (entry && entry.key) {
      definition[entry.key] = entry.dataType;
    }
  });

  const payload = { modelId, modelName, modelDefinition: definition };
  const response = await fetch('http://localhost:4000/entity/addEntity', {
    method: 'POST',
    headers: { 'Content-Type': 'application/' },
    body: JSON.stringify(payload)
  });
  const result = await response.();
  if (result.code === 200) {
    alert('Model created successfully');
    fetchModels();
    setModelName('');
    setModelId('');
    setFieldEntries([]);
    toggleCreationModal(false);
  }
};