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