|
1
|
|
|
import {Datatable} from './datatable' |
|
2
|
|
|
|
|
3
|
|
|
export class EntityField { |
|
4
|
|
|
constructor() { |
|
5
|
|
|
this.initEntityFields() |
|
6
|
|
|
this.initListener() |
|
7
|
|
|
this.fieldName = ''; |
|
8
|
|
|
} |
|
9
|
|
|
|
|
10
|
|
|
/** |
|
11
|
|
|
* Initalize datatable for all entity fields |
|
12
|
|
|
*/ |
|
13
|
|
|
initEntityFields() { |
|
14
|
|
|
if ($('table[data-filter-type="related-list"]').length == 0) { |
|
|
|
|
|
|
15
|
|
|
return |
|
16
|
|
|
} |
|
17
|
|
|
|
|
18
|
|
|
$('.delete-related-record').on('click', (event) => { |
|
19
|
|
|
const modal = $(event.currentTarget).parents('.modal:first'); |
|
20
|
|
|
const fieldName = modal.attr('data-field') |
|
21
|
|
|
|
|
22
|
|
|
dispatchEvent(new CustomEvent('uccello.uitype.entity.deleted', { |
|
|
|
|
|
|
23
|
|
|
detail: { |
|
24
|
|
|
id: $(`[name='${fieldName}']`).val(), |
|
25
|
|
|
fieldName: fieldName |
|
26
|
|
|
} |
|
27
|
|
|
})); |
|
28
|
|
|
|
|
29
|
|
|
$(`[name='${fieldName}']`).val('') |
|
30
|
|
|
$(`#${fieldName}_display`).val('') |
|
31
|
|
|
$(`#${fieldName}_display`).parent().find('label').removeClass('active') |
|
32
|
|
|
|
|
33
|
|
|
|
|
34
|
|
|
|
|
35
|
|
|
$(modal).modal('close') |
|
36
|
|
|
}) |
|
37
|
|
|
} |
|
38
|
|
|
|
|
39
|
|
|
selectRelatedModule(datatable, recordId, recordLabel) { |
|
40
|
|
|
const modal = $(datatable.table).parents('.modal:first'); |
|
41
|
|
|
const fieldName = modal.attr('data-field') |
|
42
|
|
|
|
|
43
|
|
|
$(`[name='${fieldName}']`).val(recordId).trigger('keyup') |
|
44
|
|
|
$(`#${fieldName}_display`).val(recordLabel) |
|
45
|
|
|
$(`#${fieldName}_display`).parent().find('label').addClass('active') |
|
46
|
|
|
|
|
47
|
|
|
dispatchEvent(new CustomEvent('uccello.uitype.entity.selected', { |
|
|
|
|
|
|
48
|
|
|
detail: { |
|
49
|
|
|
id: recordId, |
|
50
|
|
|
fieldName: fieldName |
|
51
|
|
|
} |
|
52
|
|
|
})); |
|
53
|
|
|
|
|
54
|
|
|
$(modal).modal('close') |
|
55
|
|
|
} |
|
56
|
|
|
|
|
57
|
|
|
|
|
58
|
|
|
setUpForm(html, modal) { |
|
59
|
|
|
$('.create-ajax', modal).html(html); |
|
60
|
|
|
|
|
61
|
|
|
this.initMaterializeOnItems(); |
|
62
|
|
|
|
|
63
|
|
|
let form = $('#form_popup_'+this.fieldName, modal) |
|
64
|
|
|
|
|
65
|
|
|
form.submit(_ => { |
|
|
|
|
|
|
66
|
|
|
//Submit form with AJAX |
|
67
|
|
|
$.ajax( |
|
68
|
|
|
{ |
|
69
|
|
|
url: form.attr('action'), |
|
70
|
|
|
type: 'POST', |
|
71
|
|
|
data : form.serialize(), |
|
72
|
|
|
success : response => { |
|
73
|
|
|
if (response.id && response.recordLabel) { |
|
74
|
|
|
const fieldName = modal.attr('data-field'); |
|
75
|
|
|
|
|
76
|
|
|
$(`[name='${fieldName}']`).val(response.id).trigger('keyup') |
|
77
|
|
|
$(`#${fieldName}_display`).val(response.recordLabel) |
|
78
|
|
|
$(`#${fieldName}_display`).parent().find('label').addClass('active') |
|
79
|
|
|
|
|
80
|
|
|
dispatchEvent(new CustomEvent('uccello.uitype.entity.created', { |
|
|
|
|
|
|
81
|
|
|
detail: { |
|
82
|
|
|
id: response.id, |
|
83
|
|
|
fieldName: fieldName |
|
84
|
|
|
} |
|
85
|
|
|
})); |
|
86
|
|
|
|
|
87
|
|
|
$(modal).modal('close') |
|
88
|
|
|
|
|
89
|
|
|
// Display search list and refresh the list |
|
90
|
|
|
$('a.search-related-record', modal).click() |
|
91
|
|
|
let event = new CustomEvent('uccello.list.refresh', {detail: $('.search-related-record table', modal).attr('id')}) |
|
92
|
|
|
dispatchEvent(event) |
|
93
|
|
|
} |
|
94
|
|
|
else { |
|
95
|
|
|
this.setUpForm(response, modal); |
|
96
|
|
|
|
|
97
|
|
|
// Scroll to first error |
|
98
|
|
|
var scrollTo = $('.invalid:first'); |
|
99
|
|
|
modal.animate({scrollTop: scrollTo.offset().top - modal.offset().top + modal.scrollTop() - 30, scrollLeft: 0},300); |
|
100
|
|
|
} |
|
101
|
|
|
}, |
|
102
|
|
|
} |
|
103
|
|
|
); |
|
104
|
|
|
return false; |
|
105
|
|
|
}); |
|
106
|
|
|
} |
|
107
|
|
|
|
|
108
|
|
|
initMaterializeOnItems() |
|
109
|
|
|
{ |
|
110
|
|
|
$('select').each((index, el) => { |
|
111
|
|
|
$(el).formSelect({ |
|
112
|
|
|
dropdownOptions: { |
|
113
|
|
|
alignment: $(el).data('alignment') ? $(el).data('alignment') : 'left', |
|
114
|
|
|
constrainWidth: $(el).data('constrain-width') === false ? false : true, |
|
115
|
|
|
container: $(el).data('container') ? $($(el).data('container')) : null, |
|
116
|
|
|
coverTrigger: $(el).data('cover-trigger') === true ? true : false, |
|
117
|
|
|
closeOnClick: $(el).data('close-on-click') === false ? false : true, |
|
118
|
|
|
hover: $(el).data('hover') === true ? true : false, |
|
119
|
|
|
} |
|
120
|
|
|
}) |
|
121
|
|
|
}) |
|
122
|
|
|
|
|
123
|
|
|
$('[data-tooltip]').tooltip({ |
|
124
|
|
|
transitionMovement: 0, |
|
125
|
|
|
}) |
|
126
|
|
|
|
|
127
|
|
|
$('.collapsible').collapsible() |
|
128
|
|
|
|
|
129
|
|
|
M.updateTextFields(); |
|
|
|
|
|
|
130
|
|
|
} |
|
131
|
|
|
|
|
132
|
|
|
initListener() { |
|
133
|
|
|
$('a.entity-modal').on('click', event => { |
|
134
|
|
|
let element = $(event.currentTarget); |
|
135
|
|
|
let tableId = element.attr('data-table') |
|
136
|
|
|
|
|
137
|
|
|
let modalId = $(element).attr('href') |
|
138
|
|
|
let modal = $(modalId); |
|
139
|
|
|
|
|
140
|
|
|
this.fieldName = tableId.replace('datatable_', ''); |
|
141
|
|
|
|
|
142
|
|
|
|
|
143
|
|
|
// Click callback |
|
144
|
|
|
let rowClickCallback = (event, datatable, recordId, recordLabel) => { |
|
145
|
|
|
this.selectRelatedModule(datatable, recordId, recordLabel) |
|
146
|
|
|
} |
|
147
|
|
|
|
|
148
|
|
|
let el = $('table#'+tableId) |
|
149
|
|
|
let datatable = new Datatable() |
|
150
|
|
|
datatable.init(el, rowClickCallback) |
|
151
|
|
|
datatable.makeQuery() |
|
152
|
|
|
|
|
153
|
|
|
let edit_view_popup_url = $('meta[name="popup_url_'+this.fieldName+'"]').attr('content'); |
|
154
|
|
|
$.get(edit_view_popup_url, {field: this.fieldName}).then((data) => { |
|
155
|
|
|
this.setUpForm(data, modal); |
|
156
|
|
|
}); |
|
157
|
|
|
}) |
|
158
|
|
|
} |
|
159
|
|
|
} |
uccellolabs /
uccello
Loading history...
