Initial commit
This commit is contained in:
122
application/view/table/create.php
Normal file
122
application/view/table/create.php
Normal file
@@ -0,0 +1,122 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user