Ümit Tunç
250 lines
13 KiB
PHP
250 lines
13 KiB
PHP
@extends('admin.master')
|
|
@section("title", e2("Module Generator Wizard"))
|
|
@section("desc", e2("Follow the steps to create a complex module."))
|
|
@section('content')
|
|
|
|
<div class="content">
|
|
<div class="block" id="wizard-block">
|
|
<div class="block-header block-header-default">
|
|
<h3 class="block-title">{{e2("Module Generator")}}</h3>
|
|
</div>
|
|
<!-- Step Tabs -->
|
|
<ul class="nav nav-tabs nav-tabs-alt nav-fill" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="step1-tab" data-toggle="tab" href="#step1" role="tab">{{e2("1. Basic Info")}}</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" id="step2-tab" data-toggle="tab" href="#step2" role="tab">{{e2("2. Database Columns")}}</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" id="step3-tab" data-toggle="tab" href="#step3" role="tab">{{e2("3. Permissions & Finish")}}</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<form action="{{ url('admin/module-generator/generate') }}" method="POST" enctype="multipart/form-data" id="generator-form">
|
|
@csrf
|
|
<div class="block-content tab-content" style="min-height: 400px;">
|
|
<!-- Step 1: Basic Info -->
|
|
<div class="tab-pane active" id="step1" role="tabpanel">
|
|
<div class="row py-30 justify-content-center">
|
|
<div class="col-sm-8 col-md-6">
|
|
<div class="form-group">
|
|
<label for="title">{{e2("Module Title")}}</label>
|
|
<input type="text" name="title" id="title" class="form-control form-control-lg" placeholder="e.g. Product Management" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="icon">{{e2("Module Icon (PNG)")}}</label>
|
|
<div class="custom-file">
|
|
<input type="file" class="custom-file-input" id="icon" name="icon" accept="image/png">
|
|
<label class="custom-file-label" for="icon">{{e2("Choose icon...")}}</label>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<button type="button" class="btn btn-alt-primary next-step" data-next="step2">
|
|
{{e2("Next Step")}} <i class="fa fa-arrow-right ml-5"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 2: Columns -->
|
|
<div class="tab-pane" id="step2" role="tabpanel">
|
|
<div class="row justify-content-center">
|
|
<div class="col-12">
|
|
<div class="table-responsive">
|
|
<table class="table table-vcenter table-hover" id="columns-table">
|
|
<thead>
|
|
<tr>
|
|
<th>{{e2("Column Name")}}</th>
|
|
<th>{{e2("Type")}}</th>
|
|
<th>{{e2("Advanced Config")}}</th>
|
|
<th class="text-center" style="width: 50px;"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="columns-body">
|
|
<tr class="column-row" data-index="0">
|
|
<td>
|
|
<input type="text" name="columns[0][name]" class="form-control" placeholder="column_name" required>
|
|
</td>
|
|
<td>
|
|
<select name="columns[0][type]" class="form-control column-type-select">
|
|
<option value="string">String</option>
|
|
<option value="integer">Integer</option>
|
|
<option value="decimal">Decimal</option>
|
|
<option value="long-text">Long Text</option>
|
|
<option value="date">Date</option>
|
|
<option value="datetime">DateTime</option>
|
|
<option value="time">Time</option>
|
|
<option value="boolean">Boolean (Toggle)</option>
|
|
<option value="select">Static Dropdown</option>
|
|
<option value="select-dropdown">API Dropdown</option>
|
|
<option value="multiple-choice">Multiple Choice</option>
|
|
<option value="link-search">File / PDF Link</option>
|
|
<option value="separator">--- Separator ---</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<div class="config-container">
|
|
<small class="text-muted">{{e2("No extra config needed")}}</small>
|
|
</div>
|
|
</td>
|
|
<td class="text-center">
|
|
<button type="button" class="btn btn-sm btn-alt-danger remove-column">
|
|
<i class="fa fa-trash"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="py-20">
|
|
<button type="button" class="btn btn-alt-success btn-block" id="add-column">
|
|
<i class="fa fa-plus mr-5"></i> {{e2("Add New Column")}}
|
|
</button>
|
|
</div>
|
|
<hr>
|
|
<div class="d-flex justify-content-between">
|
|
<button type="button" class="btn btn-alt-secondary prev-step" data-prev="step1">
|
|
<i class="fa fa-arrow-left mr-5"></i> {{e2("Back")}}
|
|
</button>
|
|
<button type="button" class="btn btn-alt-primary next-step" data-next="step3">
|
|
{{e2("Next Step")}} <i class="fa fa-arrow-right ml-5"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 3: Permissions & Finish -->
|
|
<div class="tab-pane" id="step3" role="tabpanel">
|
|
<div class="row py-30 justify-content-center">
|
|
<div class="col-sm-8 col-md-6 text-center">
|
|
<div class="alert alert-info">
|
|
<i class="fa fa-info-circle mr-5"></i>
|
|
{{e2("Default permissions will be assigned to Level 1 (Admin). You can adjust them later in System Settings.")}}
|
|
</div>
|
|
<h3 class="font-w400 mt-50">{{e2("Ready to generate?")}}</h3>
|
|
<p class="text-muted">{{e2("This will create a Migration, Model, and a Blade View.")}}</p>
|
|
|
|
<div class="py-30">
|
|
<button type="submit" class="btn btn-hero btn-lg btn-alt-primary">
|
|
<i class="fa fa-magic mr-10"></i> {{e2("Generate Module Now")}}
|
|
</button>
|
|
</div>
|
|
|
|
<button type="button" class="btn btn-alt-secondary prev-step" data-prev="step2">
|
|
<i class="fa fa-arrow-left mr-5"></i> {{e2("Back to Columns")}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
@section('scripts')
|
|
<script>
|
|
$(function() {
|
|
let colIndex = 1;
|
|
|
|
// Step Navigation
|
|
$('.next-step').click(function() {
|
|
let nextTab = $(this).data('next');
|
|
$('#' + nextTab + '-tab').removeClass('disabled').tab('show');
|
|
});
|
|
|
|
$('.prev-step').click(function() {
|
|
let prevTab = $(this).data('prev');
|
|
$('#' + prevTab + '-tab').tab('show');
|
|
});
|
|
|
|
// Column Config Logic
|
|
function updateConfig(row) {
|
|
let type = row.find('.column-type-select').val();
|
|
let index = row.data('index');
|
|
let container = row.find('.config-container');
|
|
let html = '';
|
|
|
|
if (type === 'select' || type === 'multiple-choice') {
|
|
html = `
|
|
<div class="form-group mb-0">
|
|
<input type="text" name="columns[${index}][options]" class="form-control form-control-sm" placeholder="Option1, Option2, Option3" title="Comma separated options">
|
|
<small class="form-text text-muted">Comma separated values</small>
|
|
</div>
|
|
`;
|
|
} else if (type === 'select-dropdown') {
|
|
html = `
|
|
<div class="form-group mb-0">
|
|
<input type="text" name="columns[${index}][source]" class="form-control form-control-sm" placeholder="api/table_name or table_name">
|
|
<small class="form-text text-muted">Table name or API endpoint</small>
|
|
</div>
|
|
`;
|
|
} else if (type === 'separator') {
|
|
html = `
|
|
<div class="form-group mb-0">
|
|
<input type="text" name="columns[${index}][label]" class="form-control form-control-sm" placeholder="Separator Title">
|
|
</div>
|
|
`;
|
|
} else {
|
|
html = '<small class="text-muted">No extra config needed</small>';
|
|
}
|
|
|
|
container.html(html);
|
|
}
|
|
|
|
$(document).on('change', '.column-type-select', function() {
|
|
updateConfig($(this).closest('tr'));
|
|
});
|
|
|
|
$('#add-column').click(function() {
|
|
let html = `
|
|
<tr class="column-row" data-index="${colIndex}">
|
|
<td>
|
|
<input type="text" name="columns[${colIndex}][name]" class="form-control" placeholder="column_name" required>
|
|
</td>
|
|
<td>
|
|
<select name="columns[${colIndex}][type]" class="form-control column-type-select">
|
|
<option value="string">String</option>
|
|
<option value="integer">Integer</option>
|
|
<option value="decimal">Decimal</option>
|
|
<option value="long-text">Long Text</option>
|
|
<option value="date">Date</option>
|
|
<option value="datetime">DateTime</option>
|
|
<option value="time">Time</option>
|
|
<option value="boolean">Boolean (Toggle)</option>
|
|
<option value="select">Static Dropdown</option>
|
|
<option value="select-dropdown">API Dropdown</option>
|
|
<option value="multiple-choice">Multiple Choice</option>
|
|
<option value="link-search">File / PDF Link</option>
|
|
<option value="separator">--- Separator ---</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<div class="config-container">
|
|
<small class="text-muted">No extra config needed</small>
|
|
</div>
|
|
</td>
|
|
<td class="text-center">
|
|
<button type="button" class="btn btn-sm btn-alt-danger remove-column">
|
|
<i class="fa fa-trash"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
$('#columns-body').append(html);
|
|
colIndex++;
|
|
});
|
|
|
|
$(document).on('click', '.remove-column', function() {
|
|
if ($('#columns-body tr').length > 1) {
|
|
$(this).closest('tr').remove();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
@endsection
|
|
|
|
@endsection
|