c98b73bf39
Add dynamic label selection when creating a new issue: - New GET /issues/new/labels endpoint returns label checkboxes for a repo - When a repo is selected, labels are fetched via HTMX and displayed as checkboxes with colored label badges - CreateIssue handler now parses label_ids from form and passes them to the Gitea API - Shows "No labels available" message when repo has no labels Closes leeworks-agents/gitea-mobile#67 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
94 lines
3.2 KiB
HTML
94 lines
3.2 KiB
HTML
{{define "content"}}
|
|
<h1>Create Issue</h1>
|
|
|
|
<div id="form-error" class="empty" style="display:none;"></div>
|
|
|
|
<form id="create-issue-form" hx-post="/issues" hx-swap="innerHTML" hx-target="#main-content">
|
|
<div class="form-group">
|
|
<label for="repo-select">Repository</label>
|
|
<select id="repo-select" name="owner_repo" required>
|
|
<option value="">Select a repository...</option>
|
|
{{range $org, $repos := .Repos}}
|
|
<optgroup label="{{$org}}">
|
|
{{range $repos}}
|
|
<option value="{{.Owner.Login}}/{{.Name}}">{{.FullName}}</option>
|
|
{{end}}
|
|
</optgroup>
|
|
{{end}}
|
|
</select>
|
|
<input type="hidden" name="owner" id="owner-input">
|
|
<input type="hidden" name="repo" id="repo-input">
|
|
</div>
|
|
|
|
<div class="form-group" id="label-section" style="display:none;">
|
|
<label>Labels</label>
|
|
<div id="label-list"></div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="title">Title</label>
|
|
<input type="text" id="title" name="title" placeholder="Issue title" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="body">Description</label>
|
|
<textarea id="body" name="body" placeholder="Describe the issue..."></textarea>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary">Create Issue</button>
|
|
</form>
|
|
|
|
<script>
|
|
(function() {
|
|
var repoSelect = document.getElementById('repo-select');
|
|
var ownerInput = document.getElementById('owner-input');
|
|
var repoInput = document.getElementById('repo-input');
|
|
var formError = document.getElementById('form-error');
|
|
|
|
function splitOwnerRepo() {
|
|
var val = repoSelect.value;
|
|
if (val) {
|
|
var parts = val.split('/');
|
|
ownerInput.value = parts[0] || '';
|
|
repoInput.value = parts[1] || '';
|
|
} else {
|
|
ownerInput.value = '';
|
|
repoInput.value = '';
|
|
}
|
|
}
|
|
|
|
repoSelect.addEventListener('change', function() {
|
|
splitOwnerRepo();
|
|
var labelSection = document.getElementById('label-section');
|
|
var labelList = document.getElementById('label-list');
|
|
if (ownerInput.value && repoInput.value) {
|
|
labelList.innerHTML = '<span class="empty">Loading labels...</span>';
|
|
labelSection.style.display = 'block';
|
|
htmx.ajax('GET', '/issues/new/labels?owner=' + encodeURIComponent(ownerInput.value) + '&repo=' + encodeURIComponent(repoInput.value), {target: '#label-list', swap: 'innerHTML'});
|
|
} else {
|
|
labelSection.style.display = 'none';
|
|
labelList.innerHTML = '';
|
|
}
|
|
});
|
|
|
|
// Validate before HTMX submit.
|
|
document.getElementById('create-issue-form').addEventListener('htmx:configRequest', function(evt) {
|
|
splitOwnerRepo();
|
|
if (!ownerInput.value || !repoInput.value) {
|
|
evt.preventDefault();
|
|
formError.textContent = 'Please select a repository before submitting.';
|
|
formError.style.display = 'block';
|
|
return false;
|
|
}
|
|
formError.style.display = 'none';
|
|
});
|
|
|
|
// Show server-side errors inline on HTMX error responses.
|
|
document.getElementById('create-issue-form').addEventListener('htmx:responseError', function(evt) {
|
|
formError.textContent = evt.detail.xhr.responseText || 'An error occurred. Please try again.';
|
|
formError.style.display = 'block';
|
|
});
|
|
})();
|
|
</script>
|
|
{{end}}
|