Skip to content

Commit db64790

Browse files
dvirtzdvirtz
committed
MBS-14013: replace area with react
date range component can now optionally have begin/end area components
1 parent 5c6f8c3 commit db64790

File tree

6 files changed

+131
-22
lines changed

6 files changed

+131
-22
lines changed

‎root/artist/edit_form.tt‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,11 @@
1717
[%- disambiguation_error() -%]
1818
[%- form_row_select(r, 'type_id', add_colon(l('Type'))) -%]
1919
[%- form_row_select(r, 'gender_id', add_colon(l('Gender'))) -%]
20-
[% WRAPPER form_row %]
21-
[% area_field = form.field('area.name') %]
22-
<label for="id-edit-artist.area.name">[% add_colon(l('Area')) %]</label>
23-
<span id="area" class="area autocomplete">
24-
[% React.embed(c, 'static/scripts/common/components/SearchIcon') %]
25-
[% r.hidden(form.field('area').field('gid'), { class => 'gid' }) %]
26-
[% r.hidden('area_id', class => 'id') %]
27-
[% r.text(area_field, class => 'name') %]
28-
</span>
29-
[% field_errors(r.form, 'area.name') %]
30-
[% END %]
20+
[% React.embed(c, 'static/scripts/edit/components/FormRowArea', {
21+
label => add_colon(l('Area')),
22+
field => form_to_json(form.field('area')),
23+
idField => form_to_json(form.field('area_id')),
24+
}) %]
3125
[% React.embed(c, 'static/scripts/edit/components/FormRowTextListSimple', {
3226
repeatable => form_to_json(form.field('ipi_codes')),
3327
label => add_colon(l('IPI codes')),
@@ -46,7 +40,11 @@
4640

4741
[% React.embed(c, 'static/scripts/edit/components/HydratedDateRangeFieldset', {
4842
initialField => form_to_json(form.field('period')),
49-
endedLabel => 'This area has ended.',
43+
endedLabel => 'This artist has ended.',
44+
beginAreaField => form_to_json(form.field('begin_area')),
45+
beginAreaIdField => form_to_json(form.field('begin_area_id')),
46+
endAreaField => form_to_json(form.field('end_area')),
47+
endAreaIdField => form_to_json(form.field('end_area_id')),
5048
}) %]
5149
[% script_manifest('edit/components/HydratedDateRangeFieldset', {async => 'async'}) %]
5250

‎root/server/components.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -537,6 +537,7 @@ export default {
537537
'static/scripts/common/components/TaggerIcon': (): Promise<mixed> => import('../static/scripts/common/components/TaggerIcon.js'),
538538
'static/scripts/common/components/WarningIcon': (): Promise<mixed> => import('../static/scripts/common/components/WarningIcon.js'),
539539
'static/scripts/edit/components/AddIcon': (): Promise<mixed> => import('../static/scripts/edit/components/AddIcon.js'),
540+
'static/scripts/edit/components/FormRowArea': (): Promise<mixed> => import('../static/scripts/edit/components/FormRowArea.js'),
540541
'static/scripts/edit/components/FormRowNameWithGuessCase': (): Promise<mixed> => import('../static/scripts/edit/components/FormRowNameWithGuessCase.js'),
541542
'static/scripts/edit/components/FormRowTextList': (): Promise<mixed> => import('../static/scripts/edit/components/FormRowTextList.js'),
542543
'static/scripts/edit/components/FormRowTextListSimple': (): Promise<mixed> => import('../static/scripts/edit/components/FormRowTextListSimple.js'),

‎root/static/scripts/edit/MB/Control/ArtistEdit.js‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,25 +19,34 @@ import initializeArea from './Area.js';
1919
export default function ArtistEdit() {
2020
var self = {};
2121

22+
// support replacing text without removing other nodes
23+
jQuery.fn.replaceText = function (newText) {
24+
return this.contents().filter(function () {
25+
return (this.nodeType === Node.TEXT_NODE &&
26+
this.nodeValue.trim() !== '');
27+
}).replaceWith(newText);
28+
};
29+
30+
2231
self.$name = $('#id-edit-artist\\.name');
23-
self.$begin = $('#label-id-edit-artist\\.period\\.begin_date');
24-
self.$ended = $('#label-id-edit-artist\\.period\\.ended');
25-
self.$end = $('#label-id-edit-artist\\.period\\.end_date');
26-
self.$beginarea = $('#label-id-edit-artist\\.begin_area\\.name');
27-
self.$endarea = $('#label-id-edit-artist\\.end_area\\.name');
32+
self.$begin = $('label[for="id-edit-artist.period.begin_date.year"]');
33+
self.$ended = $('label:has(#id-edit-artist\\.period\\.ended)');
34+
self.$end = $('label[for="id-edit-artist.period.end_date.year"]');
35+
self.$beginarea = $('label[for="id-edit-artist\\.begin_area\\.name"]');
36+
self.$endarea = $('label[for="id-edit-artist\\.end_area\\.name"]');
2837
self.$type = $('#id-edit-artist\\.type_id');
2938
self.$gender = $('#id-edit-artist\\.gender_id');
3039
self.old_gender = self.$gender.val();
3140

3241
self.changeDateText = function (begin, end, ended) {
33-
self.$begin.text(begin);
34-
self.$end.text(end);
35-
self.$ended.text(ended);
42+
self.$begin.replaceText(begin);
43+
self.$end.replaceText(end);
44+
self.$ended.replaceText(ended);
3645
};
3746

3847
self.changeAreaText = function (begin, end) {
39-
self.$beginarea.text(begin);
40-
self.$endarea.text(end);
48+
self.$beginarea.replaceText(begin);
49+
self.$endarea.replaceText(end);
4150
};
4251

4352
/*

‎root/static/scripts/edit/components/DateRangeFieldset.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {isDatePeriodValid} from '../utility/dates.js';
1717
import {applyAllPendingErrors} from '../utility/subfieldErrors.js';
1818

1919
import FieldErrors from './FieldErrors.js';
20+
import FormRowArea from './FormRowArea.js';
2021
import FormRowCheckbox from './FormRowCheckbox.js';
2122
import FormRowPartialDate, {
2223
type ActionT as FormRowPartialDateActionT,
@@ -167,6 +168,10 @@ component _DateRangeFieldset(
167168
dispatch: (ActionT) => void,
168169
endedLabel?: string,
169170
field: DatePeriodFieldT,
171+
beginAreaField?: AreaFieldT,
172+
beginAreaIdField?: FieldT<string>,
173+
endAreaField?: AreaFieldT,
174+
endAreaIdField?: FieldT<string>,
170175
) {
171176
const subfields = field.field;
172177

@@ -195,13 +200,33 @@ component _DateRangeFieldset(
195200
type="button"
196201
/>
197202
</FormRowPartialDate>
203+
{beginAreaField && beginAreaIdField
204+
? (
205+
<FormRowArea
206+
disabled={disabled}
207+
field={beginAreaField}
208+
idField={beginAreaIdField}
209+
label={addColonText(l('Begin area'))}
210+
/>
211+
)
212+
: null}
198213
<FormRowPartialDate
199214
disabled={disabled}
200215
dispatch={hooks.endDateDispatch}
201216
field={subfields.end_date}
202217
label={addColonText(l('End date'))}
203218
yearInputRef={hooks.endYearInputRef}
204219
/>
220+
{endAreaField && endAreaIdField
221+
? (
222+
<FormRowArea
223+
disabled={disabled}
224+
field={endAreaField}
225+
idField={endAreaIdField}
226+
label={addColonText(l('End area'))}
227+
/>
228+
)
229+
: null}
205230
<FieldErrors
206231
field={field}
207232
includeSubFields={false}

‎root/static/scripts/edit/components/FormRowArea.js‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/*
2+
* @flow strict
3+
* Copyright (C) 2018 MetaBrainz Foundation
4+
*
5+
* This file is part of MusicBrainz, the open internet music database,
6+
* and is licensed under the GPL version 2, or (at your option) any
7+
* later version: http://www.gnu.org/licenses/gpl-2.0.txt
8+
*/
9+
10+
import SearchIcon from '../../common/components/SearchIcon.js';
11+
import {last} from '../../common/utility/arrays.js';
12+
13+
import FieldErrors from './FieldErrors.js';
14+
import FormLabel from './FormLabel.js';
15+
import FormRow from './FormRow.js';
16+
17+
component FormRowArea(
18+
children ?: React.Node,
19+
disabled: boolean = false,
20+
field: AreaFieldT,
21+
idField: FieldT<string>,
22+
label: React.Node,
23+
required: boolean = false,
24+
) {
25+
const subfields = field.field;
26+
27+
return (
28+
<FormRow>
29+
<FormLabel
30+
forField={subfields.name}
31+
label={label}
32+
required={required}
33+
/>
34+
<span
35+
className="area autocomplete"
36+
disabled={disabled}
37+
id={last(field.html_name.split('.'))}
38+
>
39+
<SearchIcon />
40+
<input
41+
className={'gid' + (subfields.gid.has_errors ? ' error' : '')}
42+
defaultValue={subfields.gid.value}
43+
id={'id-' + subfields.gid.html_name}
44+
name={subfields.gid.html_name}
45+
type="hidden"
46+
/>
47+
<input
48+
className={'id' + (idField.has_errors ? ' error' : '')}
49+
defaultValue={idField.value}
50+
id={'id-' + idField.html_name}
51+
name={idField.html_name}
52+
type="hidden"
53+
/>
54+
<input
55+
className={'name' + (subfields.name.has_errors ? ' error' : '')}
56+
defaultValue={subfields.name.value}
57+
id={'id-' + subfields.name.html_name}
58+
name={subfields.name.html_name}
59+
type="text"
60+
/>
61+
</span>
62+
{children}
63+
<FieldErrors field={field} />
64+
</FormRow>
65+
);
66+
}
67+
68+
export default FormRowArea;

‎root/static/scripts/edit/components/HydratedDateRangeFieldset.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,20 @@ component _HydratedDateRangeFieldset(
2323
disabled: boolean = false,
2424
endedLabel?: string,
2525
initialField: DatePeriodFieldT,
26+
beginAreaIdField?: FieldT<string>,
27+
beginAreaField?: AreaFieldT,
28+
endAreaIdField?: FieldT<string>,
29+
endAreaField?: AreaFieldT,
2630
) {
2731
const [field, dispatch] = React.useReducer(reducer, initialField);
2832
return (
2933
<DateRangeFieldset
34+
beginAreaField={beginAreaField}
35+
beginAreaIdField={beginAreaIdField}
3036
disabled={disabled}
3137
dispatch={dispatch}
38+
endAreaField={endAreaField}
39+
endAreaIdField={endAreaIdField}
3240
endedLabel={endedLabel}
3341
field={field}
3442
>

0 commit comments

Comments
 (0)