Skip to content

Commit 6108772

Browse files
jon-nfcjon-nfc
committed
feat(layout): Ticket Meta fields made inline editable
ref: #42 #46 closes #12
1 parent f08e88d commit 6108772

File tree

3 files changed

+121
-132
lines changed

3 files changed

+121
-132
lines changed

‎src/App.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import History from "./layout/history";
1717
import Settings from "./layout/Settings";
1818
import urlBuilder from "./hooks/urlBuilder";
1919
import { apiFetch } from "./hooks/apiFetch";
20+
import { InlineFieldAction } from "./components/InlineFields";
2021
import MainLayout from "./layout/Main";
2122

2223
const Login = () => {
@@ -105,10 +106,10 @@ function App() {
105106
******************************************************** */}
106107

107108
<Route path=":common_model/:common_pk/project_task/:pk" element={<Ticket
108-
/>} loader = {pagedLoader}/>
109+
/>} loader = {pagedLoader} action={InlineFieldAction} />
109110

110111
<Route path="ticket/:model/:pk" element={<Ticket
111-
/>} loader = {pagedLoader}/>
112+
/>} loader = {pagedLoader} action={InlineFieldAction} />
112113

113114
{/* ********************************************************
114115
Detail View

‎src/index.css

+8-15
Original file line numberDiff line numberDiff line change
@@ -464,6 +464,7 @@ div.content-header .column.right svg {
464464
width: 30px;
465465
}
466466

467+
467468
svg.help {
468469
fill: var(--contrasting-colour);
469470
}
@@ -570,6 +571,13 @@ article div.ticket div.metadata div {
570571
border: none;
571572
}
572573

574+
.ticket .metadata fieldset input,
575+
.ticket .metadata fieldset select {
576+
padding: 0px;
577+
margin: 0px;
578+
width: 100%;
579+
}
580+
573581
.ticket .metadata fieldset label {
574582
display: block;
575583
font-weight: bold;
@@ -1814,21 +1822,6 @@ div.submit-dropdown-button div.button svg {
18141822
display:block;
18151823
}
18161824

1817-
button.form {
1818-
background-color: var(--contrasting-colour);
1819-
color: var(--text-colour-button);
1820-
border: none;
1821-
font-size: inherit;
1822-
height: 30px;
1823-
margin: 5px;
1824-
padding: 0px 20px;
1825-
}
1826-
1827-
form button.inverse {
1828-
background-color: var(--background-colour-active);
1829-
color: var(--contrasting-colour);
1830-
}
1831-
18321825
footer {
18331826
background-color: var(--background-colour-active);
18341827
display: grid;

‎src/layout/Ticket.jsx

+110-115
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import LinkedItems from "../components/page/ticket/LinkedItems";
77
import RelatedTickets from "../components/page/ticket/RelatedTickets";
88
import TicketComments from "../components/page/ticket/TicketComments";
99
import MarkdownEditor from "../components/MarkdownEditor";
10+
import InlineField from "../components/InlineFields";
1011
import ContentHeader from "../components/page/ContentHeader";
1112

1213

@@ -175,19 +176,19 @@ const Ticket = () => {
175176
<FieldData
176177
metadata={metadata}
177178
field_name='opened_by'
178-
data={page_data}
179+
data={ticket_data}
179180
/>&nbsp;
180181
<span class="sub-script">on&nbsp;</span>
181182
<FieldData
182183
metadata={metadata}
183184
field_name='created'
184-
data={page_data}
185+
data={ticket_data}
185186
/>&nbsp;
186187
<span class="sub-script">Updated&nbsp;</span>
187188
<FieldData
188189
metadata={metadata}
189190
field_name='modified'
190-
data={page_data}
191+
data={ticket_data}
191192
/>
192193
</h3>
193194
<div className="markdown">
@@ -201,7 +202,7 @@ const Ticket = () => {
201202
</section>
202203
}
203204

204-
<div>
205+
<div>
205206
{ page_data['_urls']['related_tickets'] &&
206207
<RelatedTickets
207208
data_url={String(page_data['_urls']['related_tickets']).split('api/v2')[1]}
@@ -224,124 +225,118 @@ const Ticket = () => {
224225
comments_url = {String(page_data['_urls']['comments']).split('api/v2')[1] + '?page[size]=500'}
225226
ticket_id = {page_data['id']}
226227
/>}
227-
</div>
228228
</div>
229+
</div>
229230

230-
<div className="sidebar">
231+
<div className="sidebar">
231232

232-
<div className="metadata">
233-
<div>
233+
<div className="metadata">
234+
<div>
234235

235-
<h3 className={"metadata ticket-type-" + ticket_type}>
236-
Ticket&nbsp;#
237-
<FieldData
238-
metadata={metadata}
239-
field_name='id'
240-
data={page_data}
241-
/>
242-
&nbsp;
243-
{page_data['external_ref'] &&(
244-
('( #') + page_data['external_ref'] + (')')
245-
)}
246-
</h3>
247-
248-
<fieldset>
249-
<label>Assigned</label>
250-
<span className="text">
251-
<FieldData
252-
metadata={metadata}
253-
field_name='assigned_users'
254-
data={page_data}
255-
/>
256-
</span>
257-
</fieldset>
258-
<fieldset>
259-
<label>Status</label>
260-
<span className="text">
261-
<FieldData
262-
metadata={metadata}
263-
field_name='status_badge'
264-
data={page_data}
265-
/>
266-
</span>
267-
</fieldset>
268-
<fieldset>
269-
<label>Labels</label>
270-
<span className="text">val</span>
271-
</fieldset>
272-
273-
<fieldset>
274-
<label>Category</label>
275-
<span className="text">
276-
<FieldData
277-
metadata={metadata}
278-
field_name='category'
279-
data={page_data}
280-
/>
281-
</span>
282-
</fieldset>
283-
284-
<fieldset>
285-
<label>Project</label>
286-
<span className="text">
287-
<FieldData
288-
metadata={metadata}
289-
field_name='project'
290-
data={page_data}
291-
/>
292-
</span>
293-
</fieldset>
294-
295-
<fieldset>
296-
<label>Milestone</label>
297-
<span className="text">
298-
<FieldData
299-
metadata={metadata}
300-
field_name='milestone'
301-
data={page_data}
302-
/>
303-
</span>
304-
</fieldset>
305-
306-
<fieldset>
307-
<label>Priority</label>
308-
<span className="text">U
309-
<FieldData
310-
metadata={metadata}
311-
field_name='urgency'
312-
data={page_data}
313-
/>
314-
/ I
315-
<FieldData
316-
metadata={metadata}
317-
field_name='impact'
318-
data={page_data}
319-
/>
320-
/ P
321-
<FieldData
322-
metadata={metadata}
323-
field_name='priority'
324-
data={page_data}
325-
/>
326-
</span>
327-
</fieldset>
328-
329-
<fieldset>
330-
<label>Duration</label>
331-
<span className="text">
332-
{secondsToTime(page_data['duration'])}
333-
</span>
334-
</fieldset>
335-
336-
<fieldset>
337-
<label>Roadmap(s)</label>
338-
<span className="text">val</span>
339-
</fieldset>
236+
<h3 className={"metadata ticket-type-" + ticket_type}>
237+
Ticket&nbsp;#
238+
<FieldData
239+
metadata={metadata}
240+
field_name='id'
241+
data={ticket_data}
242+
/>
243+
&nbsp;
244+
{ticket_data['external_ref'] &&(
245+
('( #') + ticket_data['external_ref'] + (')')
246+
)}
247+
</h3>
340248

341-
</div>
249+
<InlineField
250+
data={ticket_data}
251+
field_name='assigned_users'
252+
metadata={metadata}
253+
/>
342254

343-
</div>
255+
<InlineField
256+
data={ticket_data}
257+
field_name='assigned_teams'
258+
metadata={metadata}
259+
/>
260+
261+
<InlineField
262+
data={ticket_data}
263+
field_name='status_badge'
264+
metadata={metadata}
265+
/>
266+
267+
<fieldset>
268+
<label>Labels</label>
269+
<span className="text">val</span>
270+
</fieldset>
271+
272+
<InlineField
273+
data={ticket_data}
274+
field_name='category'
275+
metadata={metadata}
276+
/>
344277

278+
<InlineField
279+
data={ticket_data}
280+
field_name='project'
281+
metadata={metadata}
282+
/>
283+
284+
<InlineField
285+
data={ticket_data}
286+
field_name='milestone'
287+
metadata={metadata}
288+
/>
289+
290+
<fieldset>
291+
<label>Duration</label>
292+
<span className="text">
293+
{secondsToTime(page_data['duration'])}
294+
</span>
295+
</fieldset>
296+
297+
<InlineField
298+
data={ticket_data}
299+
field_name='urgency'
300+
metadata={metadata}
301+
/>
302+
303+
<InlineField
304+
data={ticket_data}
305+
field_name='impact'
306+
metadata={metadata}
307+
/>
308+
309+
<InlineField
310+
data={ticket_data}
311+
field_name='priority'
312+
metadata={metadata}
313+
/>
314+
315+
<fieldset>
316+
<label>Estimate</label>
317+
<span className="text">
318+
{secondsToTime(page_data['estimate'])}
319+
</span>
320+
</fieldset>
321+
322+
<InlineField
323+
data={ticket_data}
324+
field_name='subscribed_users'
325+
metadata={metadata}
326+
/>
327+
328+
<InlineField
329+
data={ticket_data}
330+
field_name='subscribed_teams'
331+
metadata={metadata}
332+
/>
333+
334+
<fieldset>
335+
<label>Roadmap(s)</label>
336+
<span className="text">val</span>
337+
</fieldset>
338+
339+
</div>
345340
</div>
346341

347342
</div>

0 commit comments

Comments
 (0)