@iamproperty/components 7.6.4--beta7 → 7.6.4--beta8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/css/components/actionbar.component.css +1 -1
- package/assets/css/components/actionbar.component.css.map +1 -1
- package/assets/css/components/actionbar.global.css +1 -1
- package/assets/css/components/actionbar.global.css.map +1 -1
- package/assets/css/components/config.component.css +1 -0
- package/assets/css/components/config.component.css.map +1 -0
- package/assets/css/components/notification.css +1 -1
- package/assets/css/components/notification.css.map +1 -1
- package/assets/css/components/table-basic.global.css +1 -1
- package/assets/css/components/table-basic.global.css.map +1 -1
- package/assets/css/components/table.global.css +1 -1
- package/assets/css/components/table.global.css.map +1 -1
- package/assets/css/core.min.css +1 -1
- package/assets/css/core.min.css.map +1 -1
- package/assets/css/style.min.css +1 -1
- package/assets/css/style.min.css.map +1 -1
- package/assets/js/components/accordion/accordion.component.min.js +1 -1
- package/assets/js/components/actionbar/actionbar.component.js +7 -6
- package/assets/js/components/actionbar/actionbar.component.min.js +5 -5
- package/assets/js/components/actionbar/actionbar.component.min.js.map +1 -1
- package/assets/js/components/address-lookup/address-lookup.component.js +11 -1
- package/assets/js/components/address-lookup/address-lookup.component.min.js +3 -3
- package/assets/js/components/address-lookup/address-lookup.component.min.js.map +1 -1
- package/assets/js/components/advanced-select/advanced-select.component.min.js +1 -1
- package/assets/js/components/applied-filters/applied-filters.component.min.js +1 -1
- package/assets/js/components/barchart/barchart.component.min.js +1 -1
- package/assets/js/components/bento-grid/bento-grid.component.min.js +1 -1
- package/assets/js/components/calendar/calendar.component.min.js +1 -1
- package/assets/js/components/card/card.component.min.js +1 -1
- package/assets/js/components/carousel/carousel.component.min.js +1 -1
- package/assets/js/components/collapsible-side/collapsible-side.component.min.js +1 -1
- package/assets/js/components/config/config.component.js +532 -0
- package/assets/js/components/config/config.component.min.js +59 -0
- package/assets/js/components/config/config.component.min.js.map +1 -0
- package/assets/js/components/content/content.component.min.js +1 -1
- package/assets/js/components/darkmode/darkmode.component.min.js +1 -1
- package/assets/js/components/doughnutchart/doughnutchart.component.min.js +1 -1
- package/assets/js/components/fileupload/fileupload.component.min.js +1 -1
- package/assets/js/components/filter-card/filter-card.component.min.js +1 -1
- package/assets/js/components/filterlist/filterlist.component.min.js +1 -1
- package/assets/js/components/form/form.component.min.js +1 -1
- package/assets/js/components/header/header.component.min.js +1 -1
- package/assets/js/components/inline-edit/inline-edit.component.min.js +1 -1
- package/assets/js/components/input/input.component.min.js +1 -1
- package/assets/js/components/input-range/input-range.component.min.js +1 -1
- package/assets/js/components/marketing/marketing.component.min.js +1 -1
- package/assets/js/components/menu/menu.component.min.js +1 -1
- package/assets/js/components/milestone/milestone.component.min.js +1 -1
- package/assets/js/components/milestone-group/milestone-group.component.min.js +1 -1
- package/assets/js/components/modal/modal.component.min.js +1 -1
- package/assets/js/components/multi-step/multi-step.component.min.js +1 -1
- package/assets/js/components/multi-step-modal/multi-step-modal.component.min.js +1 -1
- package/assets/js/components/multiselect/multiselect.component.min.js +1 -1
- package/assets/js/components/nav/nav.component.min.js +1 -1
- package/assets/js/components/notification/notification.component.js +69 -30
- package/assets/js/components/notification/notification.component.min.js +5 -5
- package/assets/js/components/notification/notification.component.min.js.map +1 -1
- package/assets/js/components/pagination/pagination.component.min.js +1 -1
- package/assets/js/components/password/password.component.min.js +1 -1
- package/assets/js/components/popover/popover.component.min.js +1 -1
- package/assets/js/components/rank/rank.component.min.js +1 -1
- package/assets/js/components/rankings/rankings.component.min.js +1 -1
- package/assets/js/components/rating/rating.component.min.js +1 -1
- package/assets/js/components/record-card/record-card.component.min.js +1 -1
- package/assets/js/components/search/search.component.min.js +1 -1
- package/assets/js/components/slider/slider.component.min.js +1 -1
- package/assets/js/components/split-button/split-button.component.min.js +1 -1
- package/assets/js/components/std-address-lookup/std-address-lookup.component.min.js +4 -4
- package/assets/js/components/std-address-lookup/std-address-lookup.component.min.js.map +1 -1
- package/assets/js/components/table/table.component.min.js +2 -2
- package/assets/js/components/table-ajax/table-ajax.component.min.js +2 -2
- package/assets/js/components/table-basic/table-basic.component.min.js +2 -2
- package/assets/js/components/table-no-submit/table-no-submit.component.min.js +2 -2
- package/assets/js/components/table-submit/table-submit.component.min.js +2 -2
- package/assets/js/components/tabs/tabs.component.min.js +1 -1
- package/assets/js/components/tag/tag.component.min.js +1 -1
- package/assets/js/components/tooltip/tooltip.component.min.js +1 -1
- package/assets/js/components/video-card/video-card.component.min.js +1 -1
- package/assets/js/components/video-modal/video-modal.component.min.js +1 -1
- package/assets/js/components/word-count/word-count.component.min.js +1 -1
- package/assets/js/scripts.bundle.js +1 -1
- package/assets/js/scripts.bundle.min.js +1 -1
- package/assets/sass/components/actionbar.component.scss +13 -4
- package/assets/sass/components/actionbar.global.scss +8 -0
- package/assets/sass/components/config.component.scss +235 -0
- package/assets/sass/components/notification.scss +4 -14
- package/assets/sass/components/table-basic.global.scss +4 -4
- package/assets/sass/foundations/root.scss +0 -4
- package/assets/ts/components/actionbar/actionbar.component.ts +7 -6
- package/assets/ts/components/address-lookup/address-lookup.component.ts +16 -1
- package/assets/ts/components/config/config.component.ts +699 -0
- package/assets/ts/components/notification/notification.component.ts +98 -47
- package/assets/ts/components/std-address-lookup/std-address-lookup.component.ts +1 -0
- package/dist/components.es.js +28 -28
- package/dist/components.umd.js +273 -216
- package/package.json +1 -1
- package/src/components/Config/Config.vue +23 -0
|
@@ -0,0 +1,532 @@
|
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
import Cookies from '../../../../node_modules/js-cookie/dist/js.cookie.mjs';
|
|
11
|
+
import { trackComponentRegistered } from '../_global.js';
|
|
12
|
+
trackComponentRegistered('iam-config');
|
|
13
|
+
class iamConfig extends HTMLElement {
|
|
14
|
+
constructor() {
|
|
15
|
+
var _a, _b;
|
|
16
|
+
super();
|
|
17
|
+
this.getBucketsData = (data) => {
|
|
18
|
+
if (!data)
|
|
19
|
+
return [];
|
|
20
|
+
const buckets = [];
|
|
21
|
+
// TODO: check local storage first
|
|
22
|
+
data.forEach(bucket => {
|
|
23
|
+
var _a, _b;
|
|
24
|
+
if (typeof ((_a = bucket.attributes) === null || _a === void 0 ? void 0 : _a.criteria) == "object" && Array.isArray((_b = bucket.attributes) === null || _b === void 0 ? void 0 : _b.criteria)) {
|
|
25
|
+
buckets.push(bucket);
|
|
26
|
+
}
|
|
27
|
+
});
|
|
28
|
+
return buckets;
|
|
29
|
+
};
|
|
30
|
+
this.createBuckets = (buckets) => {
|
|
31
|
+
console.log(buckets);
|
|
32
|
+
const bucketsContainer = this.shadowRoot.querySelector('#buckets'); // TODO: rename
|
|
33
|
+
if (!buckets)
|
|
34
|
+
return false;
|
|
35
|
+
buckets.forEach((bucket) => {
|
|
36
|
+
this.createBucket(bucket);
|
|
37
|
+
});
|
|
38
|
+
return true;
|
|
39
|
+
};
|
|
40
|
+
this.createBucket = (bucket) => {
|
|
41
|
+
const bucketsContainer = this.shadowRoot.querySelector('#buckets'); // TODO: rename
|
|
42
|
+
const bucketElement = document.createElement('div');
|
|
43
|
+
bucketElement.innerHTML = this.addBucketHTML(bucket);
|
|
44
|
+
//bucketElement.setAttribute('data-bucket',bucket.id);
|
|
45
|
+
bucketElement.classList.add('bucket__wrapper');
|
|
46
|
+
bucketsContainer === null || bucketsContainer === void 0 ? void 0 : bucketsContainer.insertAdjacentElement('beforeend', bucketElement);
|
|
47
|
+
//this.addButtonEvents(bucketElement,true);
|
|
48
|
+
this.createEditBucketsEvents(bucketElement);
|
|
49
|
+
const criteriaContainer = bucketElement.querySelector('.criteria--container');
|
|
50
|
+
if (bucket.attributes) {
|
|
51
|
+
bucket.attributes.criteria.forEach((criteria) => {
|
|
52
|
+
var _a, _b, _c;
|
|
53
|
+
const criteriaForm = document.createElement('form');
|
|
54
|
+
criteriaForm.classList.add('criteria');
|
|
55
|
+
criteriaForm.innerHTML = this.addCriteriaHTML(criteria.attributes);
|
|
56
|
+
// TODO add to HTML
|
|
57
|
+
(_a = criteriaForm.querySelector('[name="attribute"]')) === null || _a === void 0 ? void 0 : _a.value = criteria.attributes.attribute;
|
|
58
|
+
(_b = criteriaForm.querySelector('[name="rule"]')) === null || _b === void 0 ? void 0 : _b.value = criteria.attributes.rule;
|
|
59
|
+
(_c = criteriaForm.querySelector('[name="match"]')) === null || _c === void 0 ? void 0 : _c.value = criteria.attributes.match;
|
|
60
|
+
criteriaContainer === null || criteriaContainer === void 0 ? void 0 : criteriaContainer.appendChild(criteriaForm);
|
|
61
|
+
// TODO add buttons
|
|
62
|
+
// TODO add events
|
|
63
|
+
});
|
|
64
|
+
this.createForms(bucket.attributes.items, bucket.id);
|
|
65
|
+
}
|
|
66
|
+
return bucketElement;
|
|
67
|
+
};
|
|
68
|
+
this.addCriteriaHTML = (attributes) => {
|
|
69
|
+
return /*HTML*/ `<label>
|
|
70
|
+
<span class="visually-hidden">Attribute</span>
|
|
71
|
+
${this.createCriteriaDropdown(attributes.attribute)}
|
|
72
|
+
</label>
|
|
73
|
+
<label>
|
|
74
|
+
<span class="visually-hidden">Rule</span>
|
|
75
|
+
<select name="rule" class="mt-0 select--sm">
|
|
76
|
+
<option value="set">is not empty</option>
|
|
77
|
+
<option value="empty">is empty</option>
|
|
78
|
+
<option value="equals">equals</option>
|
|
79
|
+
<option value="not">is not</option>
|
|
80
|
+
<option value="greater">greater than</option>
|
|
81
|
+
<option value="less">less than</option>
|
|
82
|
+
</select>
|
|
83
|
+
</label>
|
|
84
|
+
<label>
|
|
85
|
+
<span class="visually-hidden">Match</span>
|
|
86
|
+
<input type="text" name="match" class="mt-0 input--sm" /> <!-- TODO Add datalist or transform into select -->
|
|
87
|
+
</label>
|
|
88
|
+
<div class="btn__group">
|
|
89
|
+
<button class="btn btn-compact btn-sm mt-0 btn-secondary fa-plus" type="button" data-direction="add" title="Delete">Add</button>
|
|
90
|
+
<button class="btn btn-compact btn-sm mt-0 btn-secondary fa-trash" type="button" data-direction="delete" title="Delete">Delete</button>
|
|
91
|
+
</div>`;
|
|
92
|
+
};
|
|
93
|
+
this.addBucketHTML = (bucket) => {
|
|
94
|
+
var _a, _b, _c;
|
|
95
|
+
return /*HTML*/ `<label>
|
|
96
|
+
<span class="visually-hidden">Name</span>
|
|
97
|
+
<input type="text" name="bucket" value="${(_b = (_a = bucket.attributes) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : ''}"/>
|
|
98
|
+
</label>
|
|
99
|
+
<div class="btn__group text-end"><button class="btn btn-compact btn-sm mt-0 btn-secondary fa-pen-to-square" data-expand title="Expand to see more options">Edit</button>${this.buttonHTML}</div>
|
|
100
|
+
<div class="criteria--container">
|
|
101
|
+
</div>
|
|
102
|
+
<div data-bucket="${(_c = bucket.id) !== null && _c !== void 0 ? _c : ''}" class="bucket">
|
|
103
|
+
</div>`;
|
|
104
|
+
};
|
|
105
|
+
this.createCriteriaDropdown = (attribute) => {
|
|
106
|
+
const form = this.querySelector('form');
|
|
107
|
+
const formData = new FormData(form);
|
|
108
|
+
const formDataObj = Object.fromEntries(formData.entries());
|
|
109
|
+
let optionsHtml = '';
|
|
110
|
+
Object.keys(formDataObj).forEach(function (key) {
|
|
111
|
+
optionsHtml += `<option value="${key}" ${key == attribute ? ' selected="selected"' : ''}>${key}</option>`;
|
|
112
|
+
});
|
|
113
|
+
return `<select name="attributes[criteria]" class="mt-0 select--sm">
|
|
114
|
+
<option value=""></option>
|
|
115
|
+
${optionsHtml}
|
|
116
|
+
</select>`;
|
|
117
|
+
};
|
|
118
|
+
this.createEditBucketsEvents = (bucket) => {
|
|
119
|
+
this.addButtonEvents(bucket, true);
|
|
120
|
+
const expandButton = bucket === null || bucket === void 0 ? void 0 : bucket.querySelector('[data-expand]');
|
|
121
|
+
expandButton === null || expandButton === void 0 ? void 0 : expandButton.addEventListener('click', () => {
|
|
122
|
+
bucket.classList.toggle('bucket--expanded');
|
|
123
|
+
});
|
|
124
|
+
};
|
|
125
|
+
this.createForms = (data, bucketId = "any") => {
|
|
126
|
+
data.forEach(item => {
|
|
127
|
+
var _a;
|
|
128
|
+
if (typeof ((_a = item.attributes) === null || _a === void 0 ? void 0 : _a.criteria) == "undefined") {
|
|
129
|
+
const formElement = this.createForm(item, bucketId);
|
|
130
|
+
Object.keys(item.attributes).forEach(function (key) {
|
|
131
|
+
if (formElement.querySelector(`[name="${key}"]`)) {
|
|
132
|
+
const element = formElement.querySelector(`[name="${key}"]`);
|
|
133
|
+
if (element.matches('select[data-import]') && !element.querySelector(`option[value="${item.attributes[key]}"]`)) {
|
|
134
|
+
const optionElement = document.createElement('option');
|
|
135
|
+
optionElement.value = item.attributes[key];
|
|
136
|
+
optionElement.innerHTML = item.attributes[key];
|
|
137
|
+
element.appendChild(optionElement);
|
|
138
|
+
}
|
|
139
|
+
element.value = item.attributes[key];
|
|
140
|
+
}
|
|
141
|
+
});
|
|
142
|
+
}
|
|
143
|
+
});
|
|
144
|
+
};
|
|
145
|
+
this.checkCriteria = (attributes, bucket) => {
|
|
146
|
+
if (attributes[bucket])
|
|
147
|
+
return true;
|
|
148
|
+
return false;
|
|
149
|
+
};
|
|
150
|
+
this.checkBuckets = (attributes) => {
|
|
151
|
+
const anyContainer = this.shadowRoot.querySelector('#any'); // TODO: rename
|
|
152
|
+
let container = anyContainer;
|
|
153
|
+
if (!this.hasAttribute('data-buckets'))
|
|
154
|
+
return container;
|
|
155
|
+
let buckets = [];
|
|
156
|
+
let addedToBucket = false;
|
|
157
|
+
// If data attribute set
|
|
158
|
+
buckets = this.getAttribute('data-buckets').split(',');
|
|
159
|
+
// TODO: If importing the config from a json file
|
|
160
|
+
buckets.forEach((bucket) => {
|
|
161
|
+
const addToBucket = !addedToBucket ? this.checkCriteria(attributes, bucket) : false;
|
|
162
|
+
if (addToBucket) {
|
|
163
|
+
addedToBucket = true;
|
|
164
|
+
container = this.shadowRoot.querySelector(`[data-bucket="${bucket}"]`);
|
|
165
|
+
}
|
|
166
|
+
});
|
|
167
|
+
return container;
|
|
168
|
+
};
|
|
169
|
+
this.createForm = (item, bucketId = "any") => {
|
|
170
|
+
var _a;
|
|
171
|
+
const anyContainer = this.shadowRoot.querySelector(`#items [data-bucket="${bucketId}"]`); // TODO: rename
|
|
172
|
+
//const bucketsContainer = this.shadowRoot.querySelector('#buckets'); // TODO: rename
|
|
173
|
+
//const container = this.checkBuckets(item.attributes); TODO: re-enable
|
|
174
|
+
const container = anyContainer;
|
|
175
|
+
const formElement = (_a = this.querySelector(`form`)) === null || _a === void 0 ? void 0 : _a.cloneNode(true);
|
|
176
|
+
//formTemplate.setAttribute('id', item.id);
|
|
177
|
+
// TODO check if it matches a bucket
|
|
178
|
+
container === null || container === void 0 ? void 0 : container.insertAdjacentElement('beforeend', formElement);
|
|
179
|
+
//const formElement = container?.querySelector(`[id="${item.id}"]`);
|
|
180
|
+
formElement === null || formElement === void 0 ? void 0 : formElement.addEventListener('submit', (event) => {
|
|
181
|
+
event.preventDefault();
|
|
182
|
+
});
|
|
183
|
+
this.addButtons(formElement);
|
|
184
|
+
return formElement;
|
|
185
|
+
};
|
|
186
|
+
this.getCurrentIds = () => {
|
|
187
|
+
var _a;
|
|
188
|
+
const idsArr = [];
|
|
189
|
+
Array.from((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('#items form')).forEach((form) => {
|
|
190
|
+
idsArr.push(parseInt(form.getAttribute('id')));
|
|
191
|
+
});
|
|
192
|
+
return idsArr;
|
|
193
|
+
};
|
|
194
|
+
this.generateId = () => {
|
|
195
|
+
return Math.max(...this.getCurrentIds()) + 1;
|
|
196
|
+
};
|
|
197
|
+
this.addButtonEvents = (element, scrollIntoView = true) => {
|
|
198
|
+
const upButton = element === null || element === void 0 ? void 0 : element.querySelector('[data-direction="up"]');
|
|
199
|
+
const downButton = element === null || element === void 0 ? void 0 : element.querySelector('[data-direction="down"]');
|
|
200
|
+
const deleteButton = element === null || element === void 0 ? void 0 : element.querySelector('[data-direction="delete"]');
|
|
201
|
+
upButton === null || upButton === void 0 ? void 0 : upButton.addEventListener('click', () => {
|
|
202
|
+
if (element === null || element === void 0 ? void 0 : element.previousElementSibling) {
|
|
203
|
+
element === null || element === void 0 ? void 0 : element.parentNode.insertBefore(element, element.previousElementSibling);
|
|
204
|
+
if (scrollIntoView)
|
|
205
|
+
element === null || element === void 0 ? void 0 : element.scrollIntoView({ behavior: "instant", block: "center" });
|
|
206
|
+
}
|
|
207
|
+
});
|
|
208
|
+
downButton === null || downButton === void 0 ? void 0 : downButton.addEventListener('click', () => {
|
|
209
|
+
if (element.nextElementSibling) {
|
|
210
|
+
element === null || element === void 0 ? void 0 : element.parentNode.insertBefore(element, element.nextElementSibling.nextElementSibling);
|
|
211
|
+
}
|
|
212
|
+
else {
|
|
213
|
+
element === null || element === void 0 ? void 0 : element.parentNode.insertAdjacentElement('beforeend', element);
|
|
214
|
+
}
|
|
215
|
+
if (scrollIntoView)
|
|
216
|
+
element === null || element === void 0 ? void 0 : element.scrollIntoView({ behavior: "instant", block: "center" });
|
|
217
|
+
});
|
|
218
|
+
deleteButton === null || deleteButton === void 0 ? void 0 : deleteButton.addEventListener('click', () => {
|
|
219
|
+
element.remove();
|
|
220
|
+
});
|
|
221
|
+
};
|
|
222
|
+
this.addButtons = (form) => {
|
|
223
|
+
form === null || form === void 0 ? void 0 : form.insertAdjacentHTML('beforeend', `<div class="btn__group">${this.buttonHTML}</div>`);
|
|
224
|
+
this.addButtonEvents(form);
|
|
225
|
+
};
|
|
226
|
+
this.attachShadow({ mode: 'open' });
|
|
227
|
+
const assetLocation = document.body.hasAttribute('data-assets-location')
|
|
228
|
+
? document.body.getAttribute('data-assets-location')
|
|
229
|
+
: '/assets';
|
|
230
|
+
const loadCSS = `@import "${assetLocation}/css/components/config.component.css";`;
|
|
231
|
+
const template = document.createElement('template');
|
|
232
|
+
template.innerHTML = /* HTML */ `
|
|
233
|
+
<style>
|
|
234
|
+
${loadCSS}
|
|
235
|
+
</style>
|
|
236
|
+
<div id="wrapper">
|
|
237
|
+
<div id="items">
|
|
238
|
+
<div id="buckets"></div>
|
|
239
|
+
<div id="any" data-bucket="any"></div>
|
|
240
|
+
</div>
|
|
241
|
+
<div class="admin-panel">
|
|
242
|
+
<button class="btn btn-action fa-plus" command="add-bucket">Add bucket</button>
|
|
243
|
+
<button class="btn btn-action fa-plus" command="add-item">Add ${(_a = this.getAttribute('data-item-name')) !== null && _a !== void 0 ? _a : 'item'}</button> <!-- Changes to open a model if we want to validate the add form first -->
|
|
244
|
+
|
|
245
|
+
</div>
|
|
246
|
+
<button id="save" class="btn btn-sm btn-primary fa-floppy-disk" >Save items</button>
|
|
247
|
+
</div>
|
|
248
|
+
`;
|
|
249
|
+
(_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.appendChild(template.content.cloneNode(true));
|
|
250
|
+
}
|
|
251
|
+
importData(ajaxURL) {
|
|
252
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
253
|
+
// Setup controller vars if not already set
|
|
254
|
+
if (!window.controller)
|
|
255
|
+
window.controller = [];
|
|
256
|
+
// Abort if controller already present for this url
|
|
257
|
+
if (window.controller[ajaxURL])
|
|
258
|
+
window.controller[ajaxURL].abort();
|
|
259
|
+
// Create a new controller so it can be aborted if new fetch made
|
|
260
|
+
window.controller[ajaxURL] = new AbortController();
|
|
261
|
+
const { signal } = window.controller[ajaxURL];
|
|
262
|
+
try {
|
|
263
|
+
return yield fetch(ajaxURL, {
|
|
264
|
+
signal: signal,
|
|
265
|
+
method: 'get',
|
|
266
|
+
credentials: 'same-origin',
|
|
267
|
+
headers: new Headers({
|
|
268
|
+
'Content-Type': 'application/json',
|
|
269
|
+
Accept: 'application/json',
|
|
270
|
+
'X-Requested-With': 'XMLHttpRequest',
|
|
271
|
+
'X-XSRF-TOKEN': Cookies.get('XSRF-TOKEN'),
|
|
272
|
+
}),
|
|
273
|
+
})
|
|
274
|
+
.then((response) => response.json())
|
|
275
|
+
.then((response) => {
|
|
276
|
+
const returnData = response['data'] ? response['data'] : response;
|
|
277
|
+
return returnData;
|
|
278
|
+
});
|
|
279
|
+
}
|
|
280
|
+
catch (error) {
|
|
281
|
+
//console.log(error);
|
|
282
|
+
return 'There has been a problem. Please try again in a few moments.';
|
|
283
|
+
}
|
|
284
|
+
});
|
|
285
|
+
}
|
|
286
|
+
importAttributeData(comonponent) {
|
|
287
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
288
|
+
});
|
|
289
|
+
}
|
|
290
|
+
connectedCallback() {
|
|
291
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
292
|
+
var _a, _b, _c, _d, _e;
|
|
293
|
+
this.buttonHTML = /* HTML */ `
|
|
294
|
+
<button class="btn btn-compact btn-sm mt-0 btn-secondary fa-trash" type="button" data-direction="delete" title="Delete">Delete</button>
|
|
295
|
+
<button class="btn btn-compact btn-sm mt-0 btn-secondary fa-chevron-down" type="button" data-direction="down" title="Move down">Down</button>
|
|
296
|
+
<button class="btn btn-compact btn-sm mt-0 btn-secondary fa-chevron-up" type="button" data-direction="up" title="Move up">Up</button>
|
|
297
|
+
`;
|
|
298
|
+
const dataImportUrl = this.getAttribute('data-import');
|
|
299
|
+
const getBucketsData = this.getBucketsData;
|
|
300
|
+
const createBuckets = this.createBuckets;
|
|
301
|
+
const createForms = this.createForms;
|
|
302
|
+
const createForm = this.createForm;
|
|
303
|
+
const itemsContainer = this.shadowRoot.querySelector('#items'); // TODO: rename
|
|
304
|
+
const anyContainer = this.shadowRoot.querySelector('#any'); // TODO: rename
|
|
305
|
+
const bucketsContainer = this.shadowRoot.querySelector('#buckets'); // TODO: rename
|
|
306
|
+
const editBuckets = this.shadowRoot.querySelector('#editBuckets'); // TODO: rename
|
|
307
|
+
const saveButton = this.shadowRoot.querySelector('#save');
|
|
308
|
+
const addButton = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[data-add-item]');
|
|
309
|
+
const addForm = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#addForm');
|
|
310
|
+
const editBucketsDialog = (_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('#editBucketsDialog');
|
|
311
|
+
const editBucketsForm = (_d = this.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('#editBucketsForm');
|
|
312
|
+
const editBucketsFormSubmit = (_e = this.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('#editBucketsForm .btn-primary');
|
|
313
|
+
const addBucketButton = this === null || this === void 0 ? void 0 : this.shadowRoot.querySelector('[command="add-bucket"]');
|
|
314
|
+
const addItemButton = this === null || this === void 0 ? void 0 : this.shadowRoot.querySelector('[command="add-item"]');
|
|
315
|
+
const templateForm = this === null || this === void 0 ? void 0 : this.querySelector('form');
|
|
316
|
+
let editBucketsOriginalState = '';
|
|
317
|
+
let buckets = [];
|
|
318
|
+
// Prevent the template form from submitting anything
|
|
319
|
+
templateForm === null || templateForm === void 0 ? void 0 : templateForm.addEventListener('submit', (event) => {
|
|
320
|
+
event.preventDefault();
|
|
321
|
+
});
|
|
322
|
+
// TODO: add this to an on change event on the select
|
|
323
|
+
Array.from(this.querySelectorAll('select[data-import]')).forEach((select) => __awaiter(this, void 0, void 0, function* () {
|
|
324
|
+
const ajaxURL = select.getAttribute('data-import');
|
|
325
|
+
this.importData(ajaxURL).then((data) => {
|
|
326
|
+
if (typeof data == 'string')
|
|
327
|
+
return data;
|
|
328
|
+
data.forEach(item => {
|
|
329
|
+
const optionElement = document.createElement('option');
|
|
330
|
+
optionElement.value = item.id;
|
|
331
|
+
optionElement.innerHTML = item.attributes.name;
|
|
332
|
+
select.appendChild(optionElement);
|
|
333
|
+
});
|
|
334
|
+
return true;
|
|
335
|
+
});
|
|
336
|
+
}));
|
|
337
|
+
// #region import data
|
|
338
|
+
// TODO load from web storage if its newer
|
|
339
|
+
const storedData = localStorage.getItem(`config-${this.getAttribute('data-name')}`);
|
|
340
|
+
//const buckets = this.getBucketsData(); // TODO: load from local storage
|
|
341
|
+
if (storedData) {
|
|
342
|
+
//createForms(JSON.parse(storedData), buckets);
|
|
343
|
+
}
|
|
344
|
+
else if (dataImportUrl) {
|
|
345
|
+
const dataImport = yield this.importData(dataImportUrl).then((data) => {
|
|
346
|
+
if (typeof data == 'string')
|
|
347
|
+
return data;
|
|
348
|
+
const buckets = getBucketsData(data);
|
|
349
|
+
if (buckets) {
|
|
350
|
+
createBuckets(buckets);
|
|
351
|
+
}
|
|
352
|
+
createForms(data); // any bucket
|
|
353
|
+
return true;
|
|
354
|
+
});
|
|
355
|
+
}
|
|
356
|
+
// #endregion
|
|
357
|
+
// #region Add buckets to edit modal
|
|
358
|
+
/*
|
|
359
|
+
editBucketsForm?.addEventListener('submit', (event) => {
|
|
360
|
+
|
|
361
|
+
event.stopPropagation();
|
|
362
|
+
event.preventDefault();
|
|
363
|
+
|
|
364
|
+
if(event.submitter == editBucketsFormSubmit){
|
|
365
|
+
|
|
366
|
+
// Clear what is there already
|
|
367
|
+
//anyContainer?.innerHTML = '';
|
|
368
|
+
|
|
369
|
+
Array.from(itemsContainer?.querySelectorAll('form')).forEach((formElement:HTMLElement, index):void => {
|
|
370
|
+
|
|
371
|
+
anyContainer?.insertAdjacentElement('beforeend',formElement);
|
|
372
|
+
});
|
|
373
|
+
|
|
374
|
+
// Empty the buckets
|
|
375
|
+
bucketsContainer?.innerHTML = '';
|
|
376
|
+
|
|
377
|
+
// Load the new bucket data then recreate them
|
|
378
|
+
const buckets = [];
|
|
379
|
+
Array.from(editBuckets?.querySelectorAll('[data-bucket]')).forEach((editBucketElement:HTMLElement, index):void => {
|
|
380
|
+
|
|
381
|
+
bucketsContainer?.insertAdjacentHTML('beforeend',`<div class="bucket" data-bucket="${editBucketElement.getAttribute('data-bucket')}"></div>`);
|
|
382
|
+
|
|
383
|
+
const bucket = {}
|
|
384
|
+
|
|
385
|
+
bucket.id = editBucketElement.getAttribute('data-bucket');
|
|
386
|
+
bucket.attributes = {};
|
|
387
|
+
|
|
388
|
+
bucket.attributes.name = editBucketElement.querySelector('[name="bucket"]')?.value;
|
|
389
|
+
|
|
390
|
+
//const formData = new FormData(editBucketElement);
|
|
391
|
+
//const formDataObj = Object.fromEntries(formData.entries());
|
|
392
|
+
// TODO cycle through the criteria forms
|
|
393
|
+
|
|
394
|
+
buckets.push(bucket);
|
|
395
|
+
});
|
|
396
|
+
|
|
397
|
+
|
|
398
|
+
console.log(buckets);
|
|
399
|
+
// this.createBuckets(buckets); TODO: re-enable
|
|
400
|
+
|
|
401
|
+
/*
|
|
402
|
+
// Move items back into buckets
|
|
403
|
+
Array.from(itemsContainer?.querySelectorAll('form')).forEach((formElement:HTMLElement, index):void => {
|
|
404
|
+
|
|
405
|
+
const formData = new FormData(formElement);
|
|
406
|
+
const formDataObj = Object.fromEntries(formData.entries());
|
|
407
|
+
const newContainer = this.checkBuckets(formDataObj);
|
|
408
|
+
|
|
409
|
+
if(newContainer != anyContainer){
|
|
410
|
+
newContainer?.insertAdjacentElement('beforeend',formElement);
|
|
411
|
+
}
|
|
412
|
+
});
|
|
413
|
+
|
|
414
|
+
|
|
415
|
+
editBucketsOriginalState = editBuckets.innerHTML;
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
editBucketsDialog?.close();
|
|
419
|
+
});
|
|
420
|
+
*/
|
|
421
|
+
/*
|
|
422
|
+
|
|
423
|
+
addBucketButton?.addEventListener('click', (event) => {
|
|
424
|
+
|
|
425
|
+
const editBucket = document.createElement('div');
|
|
426
|
+
editBucket.classList.add('bucket--edit');
|
|
427
|
+
editBucket.innerHTML = this.addBucketHTML();
|
|
428
|
+
|
|
429
|
+
editBuckets?.insertAdjacentElement('beforeend', editBucket)
|
|
430
|
+
|
|
431
|
+
this.addButtonEvents(editBucket,false);
|
|
432
|
+
const expandButton = editBucket?.querySelector('[data-expand]');
|
|
433
|
+
|
|
434
|
+
expandButton?.addEventListener('click',() => {
|
|
435
|
+
|
|
436
|
+
editBucket.classList.toggle('bucket--expanded');
|
|
437
|
+
});
|
|
438
|
+
});
|
|
439
|
+
|
|
440
|
+
*/
|
|
441
|
+
// #endregion
|
|
442
|
+
// #region add data
|
|
443
|
+
addItemButton === null || addItemButton === void 0 ? void 0 : addItemButton.addEventListener("click", (event) => {
|
|
444
|
+
const form = this.createForm({});
|
|
445
|
+
form === null || form === void 0 ? void 0 : form.scrollIntoView({ behavior: "instant", block: "center" });
|
|
446
|
+
// TODO scroll into view
|
|
447
|
+
});
|
|
448
|
+
addBucketButton === null || addBucketButton === void 0 ? void 0 : addBucketButton.addEventListener("click", (event) => {
|
|
449
|
+
const bucket = this.createBucket({});
|
|
450
|
+
bucket === null || bucket === void 0 ? void 0 : bucket.scrollIntoView({ behavior: "instant", block: "center" });
|
|
451
|
+
});
|
|
452
|
+
// #endregion
|
|
453
|
+
// #region update values
|
|
454
|
+
this.shadowRoot.addEventListener('change', (event) => {
|
|
455
|
+
const container = event.target.closest('[data-bucket]');
|
|
456
|
+
if (!container)
|
|
457
|
+
return false;
|
|
458
|
+
const attribute = event.target.name;
|
|
459
|
+
const value = event.target.value;
|
|
460
|
+
const attributes = {};
|
|
461
|
+
attributes[attribute] = value;
|
|
462
|
+
const newContainer = this.checkBuckets(attributes);
|
|
463
|
+
if (newContainer != container) {
|
|
464
|
+
const form = event.target.closest(`form`);
|
|
465
|
+
// TODO a confirmation modal
|
|
466
|
+
newContainer === null || newContainer === void 0 ? void 0 : newContainer.insertAdjacentElement('beforeend', form);
|
|
467
|
+
form === null || form === void 0 ? void 0 : form.scrollIntoView({ behavior: "instant", block: "center" });
|
|
468
|
+
}
|
|
469
|
+
});
|
|
470
|
+
// #endregion
|
|
471
|
+
// #region save data
|
|
472
|
+
saveButton === null || saveButton === void 0 ? void 0 : saveButton.addEventListener('click', (event) => {
|
|
473
|
+
event.preventDefault();
|
|
474
|
+
// TODO validation
|
|
475
|
+
const entries = [];
|
|
476
|
+
// Save buckets data
|
|
477
|
+
Array.from(itemsContainer === null || itemsContainer === void 0 ? void 0 : itemsContainer.querySelectorAll('.bucket__wrapper')).forEach((bucketElement, index) => {
|
|
478
|
+
const bucket = {};
|
|
479
|
+
bucket.attributes = {};
|
|
480
|
+
bucket.id = bucketElement === null || bucketElement === void 0 ? void 0 : bucketElement.querySelector('[name="bucket"]').value;
|
|
481
|
+
bucket.type = 'bucket';
|
|
482
|
+
bucket.attributes.index = index;
|
|
483
|
+
const criteria = [];
|
|
484
|
+
// TODO populate criteria
|
|
485
|
+
Array.from(bucketElement === null || bucketElement === void 0 ? void 0 : bucketElement.querySelectorAll('.criteria--container form')).forEach((formElement, criteriaIndex) => {
|
|
486
|
+
const item = {};
|
|
487
|
+
//item.id = formElement.getAttribute('id');
|
|
488
|
+
item.type = 'criteria';
|
|
489
|
+
item.index = criteriaIndex;
|
|
490
|
+
const formData = new FormData(formElement);
|
|
491
|
+
const formDataObj = Object.fromEntries(formData.entries());
|
|
492
|
+
item.attributes = formDataObj;
|
|
493
|
+
criteria.push(item);
|
|
494
|
+
});
|
|
495
|
+
bucket.attributes.criteria = criteria;
|
|
496
|
+
const items = [];
|
|
497
|
+
Array.from(bucketElement === null || bucketElement === void 0 ? void 0 : bucketElement.querySelectorAll('[data-bucket] form')).forEach((formElement, itemIndex) => {
|
|
498
|
+
const item = {};
|
|
499
|
+
//item.id = formElement.getAttribute('id');
|
|
500
|
+
item.type = 'item';
|
|
501
|
+
item.index = itemIndex;
|
|
502
|
+
const formData = new FormData(formElement);
|
|
503
|
+
const formDataObj = Object.fromEntries(formData.entries());
|
|
504
|
+
item.attributes = formDataObj;
|
|
505
|
+
items.push(item);
|
|
506
|
+
});
|
|
507
|
+
bucket.attributes.items = items;
|
|
508
|
+
entries.push(bucket);
|
|
509
|
+
});
|
|
510
|
+
Array.from(itemsContainer === null || itemsContainer === void 0 ? void 0 : itemsContainer.querySelectorAll('[data-bucket="any"] form')).forEach((formElement, index) => {
|
|
511
|
+
const entry = {};
|
|
512
|
+
//entry.id = formElement.getAttribute('id');
|
|
513
|
+
entry.type = 'item';
|
|
514
|
+
entry.index = index;
|
|
515
|
+
const formData = new FormData(formElement);
|
|
516
|
+
const formDataObj = Object.fromEntries(formData.entries());
|
|
517
|
+
entry.attributes = formDataObj;
|
|
518
|
+
entries.push(entry);
|
|
519
|
+
});
|
|
520
|
+
const entriesJson = JSON.stringify(entries);
|
|
521
|
+
console.log(entries);
|
|
522
|
+
// TODO add toast message
|
|
523
|
+
// TODO save locally for now but when pushing to endpoint the web storage file should get deleted
|
|
524
|
+
//localStorage.setItem(`config-${this.getAttribute('data-name')}`, entriesJson);
|
|
525
|
+
//const bucketsJson = JSON.stringify(buckets);
|
|
526
|
+
//localStorage.setItem(`config-buckets-${this.getAttribute('data-name')}`, bucketsJson);
|
|
527
|
+
});
|
|
528
|
+
// #endregion
|
|
529
|
+
});
|
|
530
|
+
}
|
|
531
|
+
}
|
|
532
|
+
export default iamConfig;
|