alice.pds.demo.boltless.dev
This repository has no description
6.1 kB
149 lines
1{{ define "repo/pulls/fragments/pullStepDetails" }}
2 {{ $hasSidePanel := and .LabelDefs .RepoInfo.Roles.IsPushAllowed }}
3 {{ $previewUrl := printf "/%s/pulls/new/preview" .RepoInfo.FullName }}
4 {{ $labelCtx := dict "Defs" .LabelDefs "State" .LabelState "RepoInfo" .RepoInfo "Subject" "" "LoggedInUser" .LoggedInUser }}
5
6 <section class="flex flex-col md:flex-row gap-6">
7 <div class="flex-1 min-w-0 flex flex-col gap-4">
8 {{ template "pullStepDetailsSingle" (dict "Root" . "PreviewUrl" $previewUrl) }}
9 {{ template "pullSubmitRow" . }}
10 </div>
11
12 {{ if $hasSidePanel }}
13 <aside class="w-full md:w-72 md:flex-shrink-0 flex flex-col gap-6">
14 {{ template "editBasicLabels" $labelCtx }}
15 {{ template "editKvLabels" $labelCtx }}
16 </aside>
17 {{ end }}
18 </section>
19
20 {{ template "markdownEditorScript" }}
21{{ end }}
22
23{{ define "pullStepDetailsSingle" }}
24 {{ $root := .Root }}
25 {{ $previewUrl := .PreviewUrl }}
26 <input type="hidden" name="titleDirty" id="titleDirty" value="{{ if $root.TitleDirty }}1{{ end }}" />
27 <input type="hidden" name="bodyDirty" id="bodyDirty" value="{{ if $root.BodyDirty }}1{{ end }}" />
28 <div class="flex flex-col gap-1">
29 <label for="title" class="text-xs tracking-wide text-gray-800 dark:text-gray-200">Title</label>
30 <input
31 type="text"
32 name="title"
33 id="title"
34 value="{{ $root.Title }}"
35 oninput="document.getElementById('titleDirty').value='1'"
36 class="w-full dark:bg-gray-800 dark:text-white dark:border-gray-700"
37 placeholder="One-line summary of your change."
38 />
39 </div>
40
41 {{ template "markdownEditor" (dict
42 "Id" "pull-body"
43 "Name" "body"
44 "Value" $root.Body
45 "Rows" 6
46 "Placeholder" "Describe your change. Markdown is supported."
47 "PreviewUrl" $previewUrl
48 "DirtyFlag" "bodyDirty"
49 ) }}
50{{ end }}
51
52{{ define "markdownEditor" }}
53 {{ $id := .Id }}
54 {{ $name := .Name }}
55 {{ $value := .Value }}
56 {{ $rows := .Rows }}
57 {{ $placeholder := .Placeholder }}
58 {{ $previewUrl := .PreviewUrl }}
59 {{ $dirtyFlag := .DirtyFlag }}
60 <div class="flex flex-col gap-2" data-md-editor="{{ $id }}">
61 <div class="btn-group self-start text-gray-600 dark:text-gray-300">
62 <button type="button" data-md-mode="write"
63 class="btn-group-item active group">
64 {{ i "pencil" "w-3.5 h-3.5" }}
65 Write
66 </button>
67 <button type="button" data-md-mode="preview"
68 hx-post="{{ $previewUrl }}"
69 hx-vals='js:{body: document.querySelector("[data-md-editor=\"{{ $id }}\"] textarea").value}'
70 hx-params="body"
71 hx-target="[data-md-editor='{{ $id }}'] [data-md-preview]"
72 hx-swap="innerHTML"
73 hx-indicator="this"
74 class="btn-group-item group">
75 {{ i "eye" "w-3.5 h-3.5 inline group-[.htmx-request]:hidden" }}
76 {{ i "loader-circle" "w-3.5 h-3.5 animate-spin hidden group-[.htmx-request]:inline" }}
77 Preview
78 </button>
79 </div>
80 <div data-md-panel="write">
81 <textarea
82 id="{{ $id }}"
83 name="{{ $name }}"
84 rows="{{ $rows }}"
85 class="w-full resize-y dark:bg-gray-800 dark:text-white dark:border-gray-700"
86 placeholder="{{ $placeholder }}"
87 {{ if $dirtyFlag }}oninput="document.getElementById('{{ $dirtyFlag }}').value='1'"{{ end }}
88 >{{ $value }}</textarea>
89 </div>
90 <div data-md-panel="preview" class="hidden">
91 <div data-md-preview class="min-h-[6rem] p-3 border border-gray-200 dark:border-gray-700 rounded bg-gray-50 dark:bg-gray-900/30">
92 <span class="text-gray-400 dark:text-gray-500 italic">Loading preview...</span>
93 </div>
94 </div>
95 </div>
96{{ end }}
97
98{{ define "pullSubmitRow" }}
99 <div class="flex items-center justify-end gap-4 mt-auto">
100 {{ if and .MergeCheck .MergeCheck.IsConflicted }}
101 <div class="flex items-center gap-2 text-sm">
102 <span class="inline-flex items-center gap-1 text-red-600 dark:text-red-400">
103 {{ i "x" "w-4 h-4" }}
104 Can't automatically merge
105 </span>
106 <span class="text-gray-500 dark:text-gray-400">You can still create the pull request</span>
107 </div>
108 {{ else if and .MergeCheck .MergeCheck.Error }}
109 <div class="flex items-center gap-2 text-sm text-red-600 dark:text-red-400">
110 {{ i "triangle-alert" "w-4 h-4" }}
111 Merge check failed
112 </div>
113 {{ end }}
114
115 <button
116 type="submit"
117 class="btn-create flex items-center gap-2"
118 hx-indicator="#create-pull-spinner"
119 >
120 {{ i "git-pull-request-create" "w-4 h-4" }}
121 Create pull request
122 <span id="create-pull-spinner" class="group">
123 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
124 </span>
125 </button>
126 </div>
127{{ end }}
128
129{{ define "markdownEditorScript" }}
130 <script>
131 (() => {
132 if (window.__mdEditorWired) return;
133 window.__mdEditorWired = true;
134 document.body.addEventListener('click', (e) => {
135 const btn = e.target.closest('[data-md-mode]');
136 if (!btn) return;
137 const editor = btn.closest('[data-md-editor]');
138 if (!editor) return;
139 const mode = btn.dataset.mdMode;
140 editor.querySelectorAll('[data-md-panel]').forEach(p => {
141 p.classList.toggle('hidden', p.dataset.mdPanel !== mode);
142 });
143 editor.querySelectorAll('[data-md-mode]').forEach(b => {
144 b.classList.toggle('active', b === btn);
145 });
146 });
147 })();
148 </script>
149{{ end }}