oppi.li
1import $ from 'jquery';
2
3function isExclusiveScopeName(name) {
4 return /.*[^/]\/[^/].*/.test(name);
5}
6
7function updateExclusiveLabelEdit(form) {
8 const nameInput = document.querySelector(`${form} .label-name-input`);
9 const exclusiveField = document.querySelector(`${form} .label-exclusive-input-field`);
10 const exclusiveCheckbox = document.querySelector(`${form} .label-exclusive-input`);
11 const exclusiveWarning = document.querySelector(`${form} .label-exclusive-warning`);
12
13 if (isExclusiveScopeName(nameInput.value)) {
14 exclusiveField?.classList.remove('muted');
15 exclusiveField?.removeAttribute('aria-disabled');
16 if (exclusiveCheckbox.checked && exclusiveCheckbox.getAttribute('data-exclusive-warn')) {
17 exclusiveWarning?.classList.remove('tw-hidden');
18 } else {
19 exclusiveWarning?.classList.add('tw-hidden');
20 }
21 } else {
22 exclusiveField?.classList.add('muted');
23 exclusiveField?.setAttribute('aria-disabled', 'true');
24 exclusiveWarning?.classList.add('tw-hidden');
25 }
26}
27
28export function initCompLabelEdit(selector) {
29 if (!$(selector).length) return;
30
31 // Create label
32 $('.new-label.button').on('click', () => {
33 updateExclusiveLabelEdit('.new-label');
34 $('.new-label.modal').modal({
35 onApprove() {
36 const form = document.querySelector('.new-label.form');
37 if (!form.checkValidity()) {
38 form.reportValidity();
39 return false;
40 }
41 document.querySelector('.new-label.form').requestSubmit();
42 },
43 }).modal('show');
44 return false;
45 });
46
47 // Edit label
48 $('.edit-label-button').on('click', function () {
49 $('#label-modal-id').val($(this).data('id'));
50
51 const $nameInput = $('.edit-label .label-name-input');
52 $nameInput.val($(this).data('title'));
53
54 const $isArchivedCheckbox = $('.edit-label .label-is-archived-input');
55 $isArchivedCheckbox[0].checked = this.hasAttribute('data-is-archived');
56
57 const $exclusiveCheckbox = $('.edit-label .label-exclusive-input');
58 $exclusiveCheckbox[0].checked = this.hasAttribute('data-exclusive');
59 // Warn when label was previously not exclusive and used in issues
60 $exclusiveCheckbox.data('exclusive-warn',
61 $(this).data('num-issues') > 0 &&
62 (!this.hasAttribute('data-exclusive') || !isExclusiveScopeName($nameInput.val())));
63 updateExclusiveLabelEdit('.edit-label');
64
65 $('.edit-label .label-desc-input').val(this.getAttribute('data-description'));
66
67 const colorInput = document.querySelector('.edit-label .js-color-picker-input input');
68 colorInput.value = this.getAttribute('data-color');
69 colorInput.dispatchEvent(new Event('input', {bubbles: true}));
70
71 $('.edit-label.modal').modal({
72 onApprove() {
73 const form = document.querySelector('.edit-label.form');
74 if (!form.checkValidity()) {
75 form.reportValidity();
76 return false;
77 }
78 document.querySelector('.edit-label.form').requestSubmit();
79 },
80 }).modal('show');
81 return false;
82 });
83
84 $('.new-label .label-name-input').on('input', () => {
85 updateExclusiveLabelEdit('.new-label');
86 });
87 $('.new-label .label-exclusive-input').on('change', () => {
88 updateExclusiveLabelEdit('.new-label');
89 });
90 $('.edit-label .label-name-input').on('input', () => {
91 updateExclusiveLabelEdit('.edit-label');
92 });
93 $('.edit-label .label-exclusive-input').on('change', () => {
94 updateExclusiveLabelEdit('.edit-label');
95 });
96}