]>
Commit | Line | Data |
---|---|---|
1b42bb86 DC |
1 | Ext.define('PVE.panel.TagEditContainer', { |
2 | extend: 'Ext.container.Container', | |
3 | alias: 'widget.pveTagEditContainer', | |
4 | ||
5 | layout: { | |
6 | type: 'hbox', | |
59e71a08 | 7 | align: 'middle', |
1b42bb86 DC |
8 | }, |
9 | ||
10 | controller: { | |
11 | xclass: 'Ext.app.ViewController', | |
12 | ||
13 | loadTags: function(tagstring = '', force = false) { | |
14 | let me = this; | |
15 | let view = me.getView(); | |
16 | ||
17 | if (me.oldTags === tagstring && !force) { | |
18 | return; | |
19 | } | |
20 | ||
21 | view.suspendLayout = true; | |
22 | me.forEachTag((tag) => { | |
23 | view.remove(tag); | |
24 | }); | |
25 | me.getViewModel().set('tagCount', 0); | |
26 | let newtags = tagstring.split(/[;, ]/).filter((t) => !!t) || []; | |
27 | newtags.forEach((tag) => { | |
28 | me.addTag(tag); | |
29 | }); | |
38f4e6e4 | 30 | me.updateFilter(); |
1b42bb86 DC |
31 | view.suspendLayout = false; |
32 | view.updateLayout(); | |
33 | if (!force) { | |
34 | me.oldTags = tagstring; | |
35 | } | |
36 | }, | |
37 | ||
38 | onRender: function(v) { | |
39 | let me = this; | |
40 | let view = me.getView(); | |
8d8ba23d DC |
41 | view.toggleCls('hide-handles', PVE.Utils.shouldSortTags()); |
42 | ||
1b42bb86 DC |
43 | view.dragzone = Ext.create('Ext.dd.DragZone', v.getEl(), { |
44 | getDragData: function(e) { | |
45 | let source = e.getTarget('.handle'); | |
46 | if (!source) { | |
47 | return undefined; | |
48 | } | |
49 | let sourceId = source.parentNode.id; | |
50 | let cmp = Ext.getCmp(sourceId); | |
51 | let ddel = document.createElement('div'); | |
52 | ddel.classList.add('proxmox-tags-full'); | |
53 | ddel.innerHTML = Proxmox.Utils.getTagElement(cmp.tag, PVE.Utils.tagOverrides); | |
54 | let repairXY = Ext.fly(source).getXY(); | |
55 | cmp.setDisabled(true); | |
56 | ddel.id = Ext.id(); | |
57 | return { | |
58 | ddel, | |
59 | repairXY, | |
60 | sourceId, | |
61 | }; | |
62 | }, | |
63 | onMouseUp: function(target, e, id) { | |
64 | let cmp = Ext.getCmp(this.dragData.sourceId); | |
65 | if (cmp && !cmp.isDestroyed) { | |
66 | cmp.setDisabled(false); | |
67 | } | |
68 | }, | |
69 | getRepairXY: function() { | |
70 | return this.dragData.repairXY; | |
71 | }, | |
72 | beforeInvalidDrop: function(target, e, id) { | |
73 | let cmp = Ext.getCmp(this.dragData.sourceId); | |
74 | if (cmp && !cmp.isDestroyed) { | |
75 | cmp.setDisabled(false); | |
76 | } | |
77 | }, | |
78 | }); | |
79 | view.dropzone = Ext.create('Ext.dd.DropZone', v.getEl(), { | |
80 | getTargetFromEvent: function(e) { | |
81 | return e.getTarget('.proxmox-tag-dark,.proxmox-tag-light'); | |
82 | }, | |
83 | getIndicator: function() { | |
84 | if (!view.indicator) { | |
85 | view.indicator = Ext.create('Ext.Component', { | |
86 | floating: true, | |
87 | html: '<i class="fa fa-long-arrow-up"></i>', | |
88 | hidden: true, | |
89 | shadow: false, | |
90 | }); | |
91 | } | |
92 | return view.indicator; | |
93 | }, | |
94 | onContainerOver: function() { | |
95 | this.getIndicator().setVisible(false); | |
96 | }, | |
97 | notifyOut: function() { | |
98 | this.getIndicator().setVisible(false); | |
99 | }, | |
100 | onNodeOver: function(target, dd, e, data) { | |
101 | let indicator = this.getIndicator(); | |
102 | indicator.setVisible(true); | |
103 | indicator.alignTo(Ext.getCmp(target.id), 't50-bl', [-1, -2]); | |
104 | return this.dropAllowed; | |
105 | }, | |
106 | onNodeDrop: function(target, dd, e, data) { | |
107 | this.getIndicator().setVisible(false); | |
108 | let sourceCmp = Ext.getCmp(data.sourceId); | |
109 | if (!sourceCmp) { | |
110 | return; | |
111 | } | |
112 | sourceCmp.setDisabled(false); | |
113 | let targetCmp = Ext.getCmp(target.id); | |
114 | view.remove(sourceCmp, { destroy: false }); | |
115 | view.insert(view.items.indexOf(targetCmp), sourceCmp); | |
116 | }, | |
117 | }); | |
118 | }, | |
119 | ||
120 | forEachTag: function(func) { | |
121 | let me = this; | |
122 | let view = me.getView(); | |
123 | view.items.each((field) => { | |
1b42bb86 DC |
124 | if (field.getXType() === 'pveTag') { |
125 | func(field); | |
126 | } | |
127 | return true; | |
128 | }); | |
129 | }, | |
130 | ||
131 | toggleEdit: function(cancel) { | |
132 | let me = this; | |
133 | let vm = me.getViewModel(); | |
59e71a08 | 134 | let view = me.getView(); |
1b42bb86 DC |
135 | let editMode = !vm.get('editMode'); |
136 | vm.set('editMode', editMode); | |
137 | ||
138 | // get a current tag list for editing | |
139 | if (editMode) { | |
140 | PVE.Utils.updateUIOptions(); | |
141 | } | |
142 | ||
143 | me.forEachTag((tag) => { | |
144 | tag.setMode(editMode ? 'editable' : 'normal'); | |
145 | }); | |
146 | ||
147 | if (!vm.get('editMode')) { | |
148 | let tags = []; | |
149 | if (cancel) { | |
150 | me.loadTags(me.oldTags, true); | |
151 | } else { | |
59e71a08 | 152 | let toRemove = []; |
1b42bb86 DC |
153 | me.forEachTag((cmp) => { |
154 | if (cmp.isVisible() && cmp.tag) { | |
155 | tags.push(cmp.tag); | |
59e71a08 DC |
156 | } else { |
157 | toRemove.push(cmp); | |
1b42bb86 DC |
158 | } |
159 | }); | |
59e71a08 | 160 | toRemove.forEach(cmp => view.remove(cmp)); |
1b42bb86 DC |
161 | tags = tags.join(','); |
162 | if (me.oldTags !== tags) { | |
163 | me.oldTags = tags; | |
59e71a08 | 164 | me.loadTags(tags, true); |
1b42bb86 DC |
165 | me.getView().fireEvent('change', tags); |
166 | } | |
167 | } | |
168 | } | |
169 | me.getView().updateLayout(); | |
170 | }, | |
171 | ||
38f4e6e4 DC |
172 | updateFilter: function() { |
173 | let me = this; | |
174 | let tags = []; | |
175 | me.forEachTag(cmp => { | |
176 | if (cmp.tag) { | |
177 | tags.push(cmp.tag); | |
178 | } | |
179 | }); | |
180 | me.forEachTag(cmp => { | |
181 | cmp.updateFilter(tags); | |
182 | }); | |
183 | }, | |
184 | ||
59e71a08 | 185 | addTag: function(tag, isNew) { |
1b42bb86 DC |
186 | let me = this; |
187 | let view = me.getView(); | |
188 | let vm = me.getViewModel(); | |
59e71a08 DC |
189 | let index = view.items.length - 5; |
190 | if (PVE.Utils.shouldSortTags() && !isNew) { | |
8d8ba23d | 191 | index = view.items.findIndexBy(tagField => { |
59e71a08 DC |
192 | if (tagField.reference === 'noTagsField') { |
193 | return false; | |
194 | } | |
195 | if (tagField.xtype !== 'pveTag') { | |
8d8ba23d DC |
196 | return true; |
197 | } | |
13a0c8bf | 198 | let a = tagField.tag.toLowerCase(); |
871953db DC |
199 | let b = tag.toLowerCase(); |
200 | return a > b ? true : a < b ? false : tagField.tag.localeCompare(tag) > 0; | |
8d8ba23d DC |
201 | }, 1); |
202 | } | |
59e71a08 | 203 | let tagField = view.insert(index, { |
1b42bb86 DC |
204 | xtype: 'pveTag', |
205 | tag, | |
206 | mode: vm.get('editMode') ? 'editable' : 'normal', | |
207 | listeners: { | |
38f4e6e4 DC |
208 | change: (field, newTag) => { |
209 | me.updateFilter(); | |
210 | }, | |
59e71a08 DC |
211 | destroy: function() { |
212 | vm.set('tagCount', vm.get('tagCount') - 1); | |
1b42bb86 DC |
213 | }, |
214 | }, | |
215 | }); | |
216 | ||
59e71a08 | 217 | if (isNew) { |
38f4e6e4 | 218 | me.updateFilter(); |
59e71a08 | 219 | tagField.selectText(); |
1b42bb86 | 220 | } |
1b42bb86 | 221 | |
59e71a08 | 222 | vm.set('tagCount', vm.get('tagCount') + 1); |
1b42bb86 DC |
223 | }, |
224 | ||
59e71a08 | 225 | addTagClick: function(event) { |
1b42bb86 | 226 | let me = this; |
59e71a08 DC |
227 | me.lookup('noTagsField').setVisible(false); |
228 | me.addTag('', true); | |
1b42bb86 DC |
229 | }, |
230 | ||
231 | cancelClick: function() { | |
232 | this.toggleEdit(true); | |
233 | }, | |
234 | ||
235 | editClick: function() { | |
236 | this.toggleEdit(false); | |
237 | }, | |
238 | ||
239 | init: function(view) { | |
240 | let me = this; | |
241 | if (view.tags) { | |
242 | me.loadTags(view.tags); | |
243 | } | |
244 | ||
245 | me.mon(Ext.GlobalEvents, 'loadedUiOptions', () => { | |
8d8ba23d DC |
246 | view.toggleCls('hide-handles', PVE.Utils.shouldSortTags()); |
247 | me.loadTags(me.oldTags, true); // refresh tag colors and order | |
1b42bb86 DC |
248 | }); |
249 | }, | |
250 | }, | |
251 | ||
252 | viewModel: { | |
253 | data: { | |
254 | tagCount: 0, | |
255 | editMode: false, | |
256 | }, | |
257 | ||
258 | formulas: { | |
259 | hideNoTags: function(get) { | |
59e71a08 | 260 | return get('tagCount') !== 0; |
1b42bb86 DC |
261 | }, |
262 | }, | |
263 | }, | |
264 | ||
265 | loadTags: function() { | |
266 | return this.getController().loadTags(...arguments); | |
267 | }, | |
268 | ||
269 | items: [ | |
270 | { | |
271 | xtype: 'box', | |
59e71a08 | 272 | reference: 'noTagsField', |
1b42bb86 DC |
273 | bind: { |
274 | hidden: '{hideNoTags}', | |
275 | }, | |
276 | html: gettext('No Tags'), | |
277 | }, | |
278 | { | |
59e71a08 DC |
279 | xtype: 'button', |
280 | iconCls: 'fa fa-plus', | |
281 | tooltip: gettext('Add Tag'), | |
1b42bb86 DC |
282 | bind: { |
283 | hidden: '{!editMode}', | |
284 | }, | |
285 | hidden: true, | |
59e71a08 DC |
286 | margin: '0 8 0 5', |
287 | ui: 'default-toolbar', | |
288 | handler: 'addTagClick', | |
1b42bb86 DC |
289 | }, |
290 | { | |
59e71a08 DC |
291 | xtype: 'tbseparator', |
292 | ui: 'horizontal', | |
293 | bind: { | |
294 | hidden: '{!editMode}', | |
295 | }, | |
1b42bb86 | 296 | hidden: true, |
59e71a08 DC |
297 | }, |
298 | { | |
299 | xtype: 'button', | |
300 | iconCls: 'fa fa-times', | |
301 | tooltip: gettext('Cancel Edit'), | |
1b42bb86 DC |
302 | bind: { |
303 | hidden: '{!editMode}', | |
304 | }, | |
59e71a08 DC |
305 | hidden: true, |
306 | margin: '0 5 0 0', | |
307 | ui: 'default-toolbar', | |
308 | handler: 'cancelClick', | |
309 | }, | |
310 | { | |
311 | xtype: 'button', | |
312 | iconCls: 'fa fa-check', | |
313 | tooltip: gettext('Finish Edit'), | |
314 | bind: { | |
315 | hidden: '{!editMode}', | |
1b42bb86 | 316 | }, |
59e71a08 DC |
317 | hidden: true, |
318 | ui: 'default-toolbar', | |
319 | handler: 'editClick', | |
1b42bb86 DC |
320 | }, |
321 | { | |
322 | xtype: 'box', | |
323 | cls: 'pve-tag-inline-button', | |
59e71a08 | 324 | html: `<i data-qtip="${gettext('Edit Tags')}" class="fa fa-pencil"></i>`, |
1b42bb86 | 325 | bind: { |
59e71a08 | 326 | hidden: '{editMode}', |
1b42bb86 DC |
327 | }, |
328 | listeners: { | |
329 | click: 'editClick', | |
330 | element: 'el', | |
331 | }, | |
332 | }, | |
333 | ], | |
334 | ||
335 | listeners: { | |
336 | render: 'onRender', | |
337 | }, | |
338 | ||
339 | destroy: function() { | |
340 | let me = this; | |
341 | Ext.destroy(me.dragzone); | |
342 | Ext.destroy(me.dropzone); | |
343 | Ext.destroy(me.indicator); | |
344 | me.callParent(); | |
345 | }, | |
346 | }); |