123 lines
8.2 KiB
PHP
123 lines
8.2 KiB
PHP
<div class="dbm-content-header">
|
|
<div class="dbm-breadcrumb">
|
|
<a href="<?php echo Config::get('URL'); ?>database/index">Databases</a>
|
|
<span class="separator">/</span>
|
|
<a href="<?php echo Config::get('URL'); ?>database/show/<?php echo urlencode($this->database_name); ?>"><?php echo htmlspecialchars($this->database_name); ?></a>
|
|
<span class="separator">/</span>
|
|
<span>New Table</span>
|
|
</div>
|
|
<div class="dbm-title">
|
|
<h1>Create New Table</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dbm-content-body">
|
|
<div class="dbm-card">
|
|
<div class="dbm-card-body">
|
|
<form method="post" action="<?php echo Config::get('URL'); ?>table/create/<?php echo urlencode($this->database_name); ?>" id="create-table-form">
|
|
<div class="dbm-form-group">
|
|
<label class="dbm-form-label">Table Name</label>
|
|
<input type="text" name="table_name" class="dbm-form-input" required pattern="[a-zA-Z0-9_]+" placeholder="my_table">
|
|
</div>
|
|
|
|
<h3 style="color: var(--text-primary); margin: 24px 0 16px;">Columns</h3>
|
|
|
|
<div id="columns-container">
|
|
<div class="column-row" style="display: flex; gap: 10px; margin-bottom: 12px; padding: 16px; background: var(--bg-input); border-radius: var(--radius); flex-wrap: wrap; align-items: center;">
|
|
<input type="text" name="columns[0][name]" class="dbm-form-input" placeholder="Column name" required style="width: 150px; max-width: 150px;">
|
|
<select name="columns[0][type]" class="dbm-form-select" style="width: 140px; max-width: 140px;">
|
|
<option value="INT">INT</option>
|
|
<option value="VARCHAR(255)">VARCHAR(255)</option>
|
|
<option value="TEXT">TEXT</option>
|
|
<option value="DATETIME">DATETIME</option>
|
|
<option value="TIMESTAMP">TIMESTAMP</option>
|
|
<option value="DECIMAL(10,2)">DECIMAL(10,2)</option>
|
|
<option value="BOOLEAN">BOOLEAN</option>
|
|
</select>
|
|
<select name="columns[0][null]" class="dbm-form-select" style="width: 100px; max-width: 100px;">
|
|
<option value="YES">NULL</option>
|
|
<option value="NO">NOT NULL</option>
|
|
</select>
|
|
<select name="columns[0][key]" class="dbm-form-select" style="width: 130px; max-width: 130px;">
|
|
<option value="">No Key</option>
|
|
<option value="PRI">PRIMARY KEY</option>
|
|
</select>
|
|
<input type="text" name="columns[0][default]" class="dbm-form-input" placeholder="Default" style="width: 100px; max-width: 100px;">
|
|
<select name="columns[0][extra]" class="dbm-form-select" style="width: 140px; max-width: 140px;">
|
|
<option value="">None</option>
|
|
<option value="auto_increment">AUTO_INCREMENT</option>
|
|
</select>
|
|
<button type="button" class="dbm-btn dbm-btn-sm dbm-btn-danger remove-column" style="display: none;">Remove</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="button" id="add-column" class="dbm-btn dbm-btn-secondary" style="margin-top: 8px;">
|
|
<i data-lucide="plus"></i>
|
|
Add Column
|
|
</button>
|
|
|
|
<div style="margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border-color);">
|
|
<button type="submit" name="submit_create_table" class="dbm-btn dbm-btn-success">
|
|
<i data-lucide="check-circle"></i>
|
|
Create Table
|
|
</button>
|
|
<a href="<?php echo Config::get('URL'); ?>database/show/<?php echo urlencode($this->database_name); ?>" class="dbm-btn dbm-btn-secondary">Cancel</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
let columnIndex = 1;
|
|
|
|
document.getElementById('add-column').addEventListener('click', function() {
|
|
const container = document.getElementById('columns-container');
|
|
const newRow = document.createElement('div');
|
|
newRow.className = 'column-row';
|
|
newRow.style.cssText = 'display: flex; gap: 10px; margin-bottom: 12px; padding: 16px; background: var(--bg-input); border-radius: var(--radius); flex-wrap: wrap; align-items: center;';
|
|
newRow.innerHTML = `
|
|
<input type="text" name="columns[${columnIndex}][name]" class="dbm-form-input" placeholder="Column name" required style="width: 150px; max-width: 150px;">
|
|
<select name="columns[${columnIndex}][type]" class="dbm-form-select" style="width: 140px; max-width: 140px;">
|
|
<option value="INT">INT</option>
|
|
<option value="VARCHAR(255)">VARCHAR(255)</option>
|
|
<option value="TEXT">TEXT</option>
|
|
<option value="DATETIME">DATETIME</option>
|
|
<option value="TIMESTAMP">TIMESTAMP</option>
|
|
<option value="DECIMAL(10,2)">DECIMAL(10,2)</option>
|
|
<option value="BOOLEAN">BOOLEAN</option>
|
|
</select>
|
|
<select name="columns[${columnIndex}][null]" class="dbm-form-select" style="width: 100px; max-width: 100px;">
|
|
<option value="YES">NULL</option>
|
|
<option value="NO">NOT NULL</option>
|
|
</select>
|
|
<select name="columns[${columnIndex}][key]" class="dbm-form-select" style="width: 130px; max-width: 130px;">
|
|
<option value="">No Key</option>
|
|
<option value="PRI">PRIMARY KEY</option>
|
|
</select>
|
|
<input type="text" name="columns[${columnIndex}][default]" class="dbm-form-input" placeholder="Default" style="width: 100px; max-width: 100px;">
|
|
<select name="columns[${columnIndex}][extra]" class="dbm-form-select" style="width: 140px; max-width: 140px;">
|
|
<option value="">None</option>
|
|
<option value="auto_increment">AUTO_INCREMENT</option>
|
|
</select>
|
|
<button type="button" class="dbm-btn dbm-btn-sm dbm-btn-danger remove-column">Remove</button>
|
|
`;
|
|
container.appendChild(newRow);
|
|
columnIndex++;
|
|
|
|
document.querySelectorAll('.remove-column').forEach(btn => btn.style.display = 'inline-flex');
|
|
});
|
|
|
|
document.getElementById('columns-container').addEventListener('click', function(e) {
|
|
if (e.target.classList.contains('remove-column')) {
|
|
e.target.closest('.column-row').remove();
|
|
const rows = document.querySelectorAll('.column-row');
|
|
if (rows.length === 1) {
|
|
rows[0].querySelector('.remove-column').style.display = 'none';
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|