267 lines
8.8 KiB
Plaintext

package component
import (
"bytes"
"context"
"forge.cadoles.com/wpetit/clearcase/internal/core/model"
"forge.cadoles.com/wpetit/clearcase/internal/http/form"
common "forge.cadoles.com/wpetit/clearcase/internal/http/handler/webui/common/component"
"github.com/pkg/errors"
"github.com/yuin/goldmark"
"log/slog"
"strings"
)
type IssuePageVModel struct {
IssueURL string
SummaryForm *form.Form
IssueForm *form.Form
IssueTips string
Projects []*model.Project
SelectedProjectID string
}
const summaryPlaceholder = `
Décrivez rapidement le sujet du problème rencontré ou de l'évolution souhaitée, ClearCase utilisera le modèle de demande présent dans le dépôt (ou un modèle par défaut) afin de générer une version mise en forme et complétée.
Afin de fournir plus d'information de contexte au LLM, vous pouvez faire référence à d'autres tickets du dépôt via un ou plusieurs '#<issue_id>' et/ou des chemins vers des fichiers présents dans celui ci.
`
const bodyPlaceholder = `
Une fois votre demande générée, vous pourrez l'éditer puis la créer directement en cliquant sur le bouton 'Créer' ci-dessous.
`
const issueTemplatePlaceholder = `
Vous pouvez surcharger le modèle de demande fourni par le projet en remplissant ce champ.
`
func NewIssueSummaryForm() *form.Form {
return form.New(
form.NewField(
"project",
form.Attrs{},
form.NonEmpty("Ce champ ne doit pas être vide."),
),
form.NewField(
"summary",
form.Attrs{
"type": "textarea",
"rows": "20",
"placeholder": strings.TrimSpace(summaryPlaceholder),
},
form.NonEmpty("Ce champ ne doit pas être vide."),
),
form.NewField(
"template",
form.Attrs{
"type": "textarea",
"rows": "20",
"placeholder": strings.TrimSpace(issueTemplatePlaceholder),
},
),
)
}
func NewIssueForm() *form.Form {
return form.New(
form.NewField(
"title",
form.Attrs{
"type": "text",
"placeholder": "Écrivez le résumé de votre demande et cliquez sur 'Générer' pour remplir automatiquement ces champs.",
},
form.NonEmpty("Ce champ ne doit pas être vide."),
),
form.NewField(
"body",
form.Attrs{
"type": "textarea",
"rows": "20",
"placeholder": strings.TrimSpace(bodyPlaceholder),
},
form.NonEmpty("Ce champ ne doit pas être vide."),
),
)
}
templ IssuePage(vmodel IssuePageVModel) {
@common.AppPage(common.WithPageOptions(
common.WithTitle("Nouvelle demande"),
)) {
if vmodel.IssueURL != "" {
<article class="message is-primary">
<div class="message-header">
<p>Demande créée !</p>
<button class="delete" aria-label="delete" hx-on:click="onCloseMessage(this)"></button>
</div>
<div class="message-body">
Votre demande a été créée et est disponible à l'adresse suivante:
<a href={ templ.SafeURL(vmodel.IssueURL) } target="_blank"><code>{ vmodel.IssueURL }</code></a>.
</div>
</article>
<script type="text/javascript">
function clearSummary(projectId) {
sessionStorage.removeItem(`summary-${projectId}`)
}
function openIssue(issueUrl) {
window.open(issueUrl, "_blank");
}
</script>
@templ.JSFuncCall("clearSummary", vmodel.SelectedProjectID)
@templ.JSFuncCall("openIssue", vmodel.IssueURL)
}
<div class="columns">
<div class="column is-4">
<form id="summary-form" action={ common.CurrentURL(ctx) } method="put" hx-disabled-elt="textarea, input, select, button" hx-on:htmx:before-send="savePreferredProject()" hx-indicator="#generation-progress">
<h2 class="title is-size-3">Résumé de la demande</h2>
@common.FormSelect(
vmodel.SummaryForm, "issue-project", "project", "Projet",
common.WithOptions(projectsToOptions(vmodel.Projects)...),
common.WithAttrs(
"hx-get", string(common.CurrentURL(ctx, common.WithoutValues("project", "*"))),
"hx-target", "body",
"hx-push-url", "true",
),
)
@common.FormTextarea(
vmodel.SummaryForm, "issue-summary", "summary", "Résumé",
common.WithTextareaAttrs(
"hx-on:change", "onSummaryChange(event)",
),
)
<details class="my-3">
<summary class="is-clickable">Paramètres avancés</summary>
@common.FormTextarea(
vmodel.SummaryForm, "issue-template", "template", "Surcharger le modèle de demande",
common.WithTextareaAttrs(
"hx-on:change", "onIssueTemplateChange(event)",
),
)
</details>
<div class="buttons is-right">
<button type="submit" class="button is-info is-large">
<span class="icon">
<i class="fa fa-robot"></i>
</span>
<span>Générer</span>
</button>
</div>
</form>
</div>
<div class="column">
<h2 class="title is-size-3">Votre demande</h2>
<form action={ common.CurrentURL(ctx) } method="post" hx-disabled-elt="textarea, input, select, button" hx-indicator="#generation-progress">
@common.FormField(vmodel.IssueForm, "issue-title", "title", "Titre")
@common.FormTextarea(vmodel.IssueForm, "issue-body", "body", "Corps")
<div class="buttons is-right">
<button type="submit" class="button is-info is-large">
<span class="icon">
<i class="fa fa-rocket"></i>
</span>
<span>Créer</span>
</button>
</div>
</form>
</div>
</div>
<progress id="generation-progress" class="htmx-indicator progress"></progress>
if vmodel.IssueTips != "" {
{{ html := markdownToHTML(ctx, vmodel.IssueTips) }}
if html != "" {
<article class="message is-info mt-5">
<div class="message-header">
<p><span class="icon"><i class="fa fa-lightbulb"></i></span>Questionnements</p>
<button class="delete" aria-label="delete" hx-on:click="onCloseMessage(this)"></button>
</div>
<div class="message-body">
<div class="content">
<p>Utilisez ces quelques questions pour réfléchir aux éléments d'informations nécessaire à la bonne rédaction de votre demande:</p>
@templ.Raw(html)
</div>
</div>
</article>
}
}
<script type="text/javascript">
function onCloseMessage(closeElement) {
closeElement.closest('.message').style.display = 'none';
}
function onSummaryChange(evt) {
const summary = evt.currentTarget.value;
const projectId = document.getElementById("issue-project").value;
sessionStorage.setItem(`summary-${projectId}`, summary);
}
function onIssueTemplateChange(evt) {
const issueTemplate = evt.currentTarget.value;
const projectId = document.getElementById("issue-project").value;
localStorage.setItem(`issue-template-${projectId}`, issueTemplate);
}
function savePreferredProject() {
const projectId = document.getElementById("issue-project").value;
localStorage.setItem(`preferred-project`, projectId);
}
function restorePreferredProject() {
const preferredProject = localStorage.getItem(`preferred-project`);
if (!preferredProject) return;
const projectElement = document.getElementById("issue-project");
if (!projectElement) return;
if (preferredProject === projectElement.value) return;
projectElement.value = preferredProject;
projectElement.dispatchEvent(new Event('change'));
}
function restoreLastSummary() {
const summaryTextarea = document.getElementById("issue-summary");
if (!summaryTextarea) return;
const summary = summaryTextarea.value;
if (summary !== "") return;
const projectId = document.getElementById("issue-project").value;
if (!projectId) return;
const savedSummary = sessionStorage.getItem(`summary-${projectId}`);
if (!savedSummary) return;
summaryTextarea.value = savedSummary;
}
function restoreIssueTemplate() {
const issueTemplateTextarea = document.getElementById("issue-template");
if (!issueTemplateTextarea) return;
const issueTemplate = issueTemplateTextarea.value;
if (issueTemplate !== "") return;
const projectId = document.getElementById("issue-project").value;
if (!projectId) return;
const savedIssueTemplate = localStorage.getItem(`issue-template-${projectId}`);
if (!savedIssueTemplate) return;
issueTemplateTextarea.value = savedIssueTemplate;
}
htmx.onLoad(function(){
restoreLastSummary();
restorePreferredProject();
restoreIssueTemplate();
})
</script>
}
}
func projectsToOptions(projects []*model.Project) []string {
options := make([]string, 0, len(projects)*2)
for _, p := range projects {
options = append(options, p.Name, p.ID)
}
return options
}
func markdownToHTML(ctx context.Context, text string) string {
var buff bytes.Buffer
if err := goldmark.Convert([]byte(text), &buff); err != nil {
slog.ErrorContext(ctx, "could not convert markdown to html", slog.Any("error", errors.WithStack(err)))
return ""
}
return buff.String()
}