37338-vm/process_definitions.php

<?php
require_once 'WorkflowEngine.php';

$workflowEngine = new WorkflowEngine();
// TODO: Create a method in WorkflowEngine to get all process definitions
$pdo = db();
$stmt = $pdo->query("SELECT * FROM process_definitions ORDER BY name");
$processes = $stmt->fetchAll(PDO::FETCH_ASSOC);

?>
<?php include '_header.php'; ?>
<?php include '_navbar.php'; ?>

<div class="container-fluid">
    <div class="row">
        <?php include '_sidebar.php'; ?>

        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
            <div class="d-flex justify-content-between align-items-center pt-3 pb-2 mb-3 border-bottom">
                <h1 class="h2">Process Definitions</h1>
                <div class="btn-toolbar mb-2 mb-md-0">
                    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#createProcessModal">
                        Create Process
                    </button>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-bordered table-sm">
                    <thead>
                        <tr class="text-center">
                            <th class="bg-light">Name</th>
                            <th class="bg-light">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($processes as $process): ?>
                            <tr>
                                <td><?= htmlspecialchars($process['name']) ?></td>
                                <td class="text-center">
                                    <button class="btn btn-sm btn-secondary edit-process-btn" 
                                            data-process-id="<?= $process['id'] ?>" 
                                            data-process-name="<?= htmlspecialchars($process['name']) ?>"
                                            data-process-definition='<?= htmlspecialchars($process['definition_json'] ?? '') ?>'>
                                        Edit
                                    </button>
                                    <!-- TODO: Add delete functionality -->
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </main>
    </div>
</div>

<!-- Create/Edit Process Modal -->
<div class="modal fade" id="createProcessModal" tabindex="-1" aria-labelledby="createProcessModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createProcessModalLabel">Create Process</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="createProcessForm" action="_save_process_definition.php" method="post">
                    <input type="hidden" name="process_id" id="processId">
                    <div class="mb-3">
                        <label for="processName" class="form-label">Process Name</label>
                        <input type="text" class="form-control" id="processName" name="name" required>
                    </div>
                    
                    <hr>

                    <h5>Statuses</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="initialStatus" class="form-label">Initial Status</label>
                                <select class="form-select" id="initialStatus"></select>
                            </div>
                        </div>
                    </div>
                    <div id="statuses-list" class="mb-3"></div>
                    <div class="input-group mb-3">
                        <input type="text" id="newStatusInput" class="form-control" placeholder="New status name">
                        <button class="btn btn-outline-secondary" type="button" id="addStatusBtn">Add Status</button>
                    </div>

                    <hr>

                    <h5>Transitions</h5>
                    <div id="transitions-list" class="mb-3"></div>
                    <div class="row">
                        <div class="col-5">
                            <select id="fromStatusSelect" class="form-select"></select>
                        </div>
                        <div class="col-2 text-center">=&gt;</div>
                        <div class="col-5">
                            <select id="toStatusSelect" class="form-select"></select>
                        </div>
                    </div>
                     <div class="d-grid gap-2 mt-3">
                        <button class="btn btn-outline-secondary" type="button" id="addTransitionBtn">Add Transition</button>
                    </div>

                    <textarea name="definition_json" id="definitionJson" class="d-none"></textarea>

                    <hr class="mt-4">

                    <button type="submit" class="btn btn-primary">Save Process</button>
                </form>
            </div>
        </div>
    </div>
</div>

<?php include '_footer.php'; ?>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const createProcessModal = document.getElementById('createProcessModal');
    const modalTitle = createProcessModal.querySelector('.modal-title');
    const form = createProcessModal.querySelector('#createProcessForm');
    const processIdInput = createProcessModal.querySelector('#processId');
    const processNameInput = createProcessModal.querySelector('#processName');
    const definitionJsonTextarea = createProcessModal.querySelector('#definitionJson');

    // Handle create button click
    const createButton = document.querySelector('button[data-bs-target="#createProcessModal"]');
    createButton.addEventListener('click', function() {
        modalTitle.textContent = 'Create Process';
        form.action = '_save_process_definition.php';
        processIdInput.value = '';
        processNameInput.value = '';
        definitionJsonTextarea.value = '';
    });

    // Handle edit button click
    document.querySelectorAll('.edit-process-btn').forEach(button => {
        button.addEventListener('click', function() {
            const processId = this.dataset.processId;
            const processName = this.dataset.processName;
            const processDefinition = this.dataset.processDefinition;

            modalTitle.textContent = 'Edit Process';
            form.action = '_save_process_definition.php';
            processIdInput.value = processId;
            processNameInput.value = processName;
            definitionJsonTextarea.value = processDefinition;

            const modal = new bootstrap.Modal(createProcessModal);
            modal.show();
        });
    });
});
</script>