accrete 0.0.23__py3-none-any.whl → 0.0.25__py3-none-any.whl

accrete/contrib/ui/static/js/filter.js

@@ -1,358 +1,596 @@
-const queryBlock = document.getElementById('query-block');
-const queryInput = document.getElementById('query-input');
-const queryInputControl = document.getElementById('query-input-control');
-const queryInputSelect = document.getElementById('query-input-select');
-const queryInputSelectControl = document.getElementById('query-input-select-control');
-const queryInputApply = document.getElementById('query-input-apply');
-const queryParamsDropdown = document.getElementById('query-params-dropdown');
-const queryParamElements = document.querySelectorAll('.query-param');
-const queryParamsElements = document.querySelectorAll('.query-params');
-const queryTags = document.getElementById('query-tags');
-const modalFilterButton = document.getElementById('modal-filter-button');
-const filterPanel = document.getElementById('filter-panel');
-const filterModal = document.getElementById('filter-modal');
-const modalContent = document.getElementById('modal-content');
-const queryTextElement = document.getElementById('query-text');
-const queryTextNotificationParameterElement = document.getElementById('query-notification-parameter');
-let activeInput = queryInput;
-
-queryInput.addEventListener('focus', showQueryParams);
-queryInput.addEventListener('keyup', navigateQueryInput);
-queryInputApply.addEventListener('click', applyQueryInput);
-queryParamElements.forEach((element) => {
-    element.addEventListener('keyup', navigateQueryParams);
-})
-queryParamElements.forEach((element) => {
-    element.addEventListener('mouseup', clickQueryParams);
-})
-window.onclick = function(event) {
-    const dontHide = [
-        '#query-block', '#query-input', '#query-params-dropdown', '#param-input',
-        '.query-param', '.query-params', '.query-param > p', '#query-operation',
-        '#query-operation > span', '#query-operation-select',
-        '#query-operation-select > option', '#query-params-dropdown > p > label',
-        '#query-params-dropdown > p', '#query-params-dropdown > p > label > input',
-        '#query-input-select', '#query-input-select > option'
-    ];
-    if (!event.target.matches(dontHide)) {
-        queryParamsElements.forEach((element) => {
-            element.classList.add('is-hidden');
-        })
-        if (!filterModal.classList.contains('is-active')) {
-            queryParamsDropdown.classList.add('is-hidden');
-        }
-  }
-}
-
-modalFilterButton.onclick = function () {
-    modalContent.appendChild(queryBlock);
-    filterModal.classList.add('is-active');
-    queryParamsDropdown.classList.remove('is-hidden');
-    activeInput.select()
+window.addEventListener('click', showHide);
+buildQueryTagsFromUrl();
+resetInput();
+
+function buildQueryTagsFromUrl() {
+    const queryTags = document.getElementById('query-tags');
+    removeQueryTagsChildren();
+    const queryGroup = createQueryGroup();
+    queryTags.appendChild(queryGroup)
+    buildQueryFromQueryString(normalizeQueryString(), queryGroup, '&');
 }
 
-buildActiveQuery();
-setDefaultTerm();
-
-
-function closeFilterModal() {
-    buildActiveQuery();
-    filterModal.classList.remove('is-active');
-    filterPanel.appendChild(queryBlock);
-}
-
-
-function setDefaultTerm() {
-    const defaultTerm = queryInput.getAttribute('data-default-term');
-    if (defaultTerm) {
-        const element = getParamElement(defaultTerm);
-        setParam(element);
-    } else {
-        activeInput.select();
+function removeQueryTagsChildren() {
+    const queryTags = document.getElementById('query-tags');
+    while (queryTags.firstElementChild) {
+        queryTags.firstElementChild.remove();
     }
 }
 
-function buildActiveQuery() {
-    const url = new URL(window.location.href);
-    const query = url.searchParams.get('q');
-    removeQueryTags();
-    if (!query) {
-        return
-    }
-    for(let block of JSON.parse(query)) {
-        const tagBlock = buildTagBlock();
-        for (let param of block) {
-            if (Object.prototype.toString.apply(param) === '[object Object]') {
-                const tag = buildActiveQueryTag(param);
-                tagBlock.appendChild(tag);
-            }
-            if (Object.prototype.toString.apply(param) === '[object Array]') {
-                const tagGroup = buildTagGroup();
-                for (let orParam of param) {
-                    const tag = buildActiveQueryTag(orParam);
-                    tagGroup.appendChild(tag);
-                    tagBlock.appendChild(tagGroup);
-                }
+function buildQueryFromQueryString(jsonQuery, queryGroup, operator='&') {
+    console.log(jsonQuery)
+    for (let item of jsonQuery) {
+        if (isString(item)) {
+            operator = item
+        }
+        else if (isObject(item)) {
+            operator = queryGroup.firstElementChild && operator || null;
+            for (let term in item) {
+                queryGroup.appendChild(createQueryTag(term, operator, item[term]));
+                operator = '&';
             }
         }
-        if (queryTags.childElementCount > 0) {
-            const blockLabel = buildTagBlockLabel();
-            queryTags.appendChild(blockLabel);
+        else if (isArray(item)) {
+            const subQueryGroup = createQueryGroup(
+                queryGroup.firstElementChild && operator || null
+            );
+            queryGroup.appendChild(createOperatorSelect(operator));
+            queryGroup.appendChild(subQueryGroup);
+            buildQueryFromQueryString(item, subQueryGroup, operator);
         }
-        queryTags.appendChild(tagBlock)
     }
-    if (queryTags.firstElementChild) {
-        modalFilterButton.classList.add('is-success')
-    } else {modalFilterButton.classList.remove('is-success')}
 }
 
-function removeQueryTags() {
-    while (queryTags.firstElementChild) {
-        queryTags.firstElementChild.remove();
-    }
+function queryStringFromJsonQuery() {
+    return JSON.stringify(buildJsonQueryFromHtml())
 }
 
-function buildActiveQueryTag(param) {
-    let tag = null;
-    let displayValue = '';
-    let value = null;
-    for (let p in param) {
-        if (typeof param[p] == 'boolean') {
-            value = param[p]
-        }
-        const element = getParamElement(p, value);
-        const dataType = element.getAttribute('data-type');
-        const text = getCompleteQueryText(element);
-        if (dataType === 'bool') {
-            displayValue = element.firstElementChild.text;
+function buildJsonQueryFromHtml(tagGroup=null) {
+    const queryTags = (
+        tagGroup || document.getElementById('query-tags').firstElementChild);
+    let query = []
+    if (!queryTags) {
+        return query
+    }
+    for (let tag of queryTags.children) {
+        if (tag.classList.contains('query-tag-operator')) {
+            const operator = tag.firstElementChild.value
+            if (operator !== '&') {query.push(operator);}
         }
-        else if (dataType === 'selection') {
-            const option = element.querySelector(
-                `.param-options option[value="${param[p]}"]`
-            );
-            displayValue = option.textContent;
+        else if (tag.classList.contains('query-group-operator')) {
+            const operator = tag.firstElementChild.firstElementChild.value;
+            if (operator !== '&') {query.push(operator);}
         }
-        else {
-            displayValue = param[p];
+        else if (tag.classList.contains('query-group')) {
+            query.push(buildJsonQueryFromHtml(tag))
         }
-        tag = buildTag(text, p, param[p], displayValue);
-    }
-    return tag
-}
-
-function apply() {
-    const tagBlocks = document.querySelectorAll('.query-tag-block');
-    let url = new URL(window.location)
-    let completeQuery = [];
-    tagBlocks.forEach((tagBlock) => {
-        let query = [];
-        for (let tag of tagBlock.children) {
-            if (tag.classList.contains('query-tag')) {
-                const param = tag.getAttribute('data-param');
-                let value = tag.getAttribute('data-value');
-                if (tag.getAttribute('data-is-bool') === 'true') {
-                    value = value === 'true'
-                }
-                query.push({[param]: value})
+        else if (tag.classList.contains('query-tag-container')) {
+            if (tag.firstElementChild.classList.contains('query-tag-operator')) {
+                const operator = tag.firstElementChild.firstElementChild.value
+                if (operator !== '&') {query.push(operator);}
             }
-            else if (tag.classList.contains('query-tag-group')) {
-                let orQuery = [];
-                for (let subTag of tag.children) {
-                    if (subTag.classList.contains('query-tag')) {
-                        const param = subTag.getAttribute('data-param');
-                        let value = subTag.getAttribute('data-value');
-                        if (subTag.getAttribute('data-is-bool') === 'true') {
-                            value = value === 'true'
-                        }
-                        orQuery.push({[param]: value});
+            if (tag.lastElementChild.classList.contains('query-tag')) {
+                const key = tag.lastElementChild.getAttribute(
+                    'data-param'
+                );
+                let value = tag.lastElementChild.getAttribute(
+                    'data-value'
+                );
+                if (typeof value === 'string') {
+                    if (value.toLowerCase() === 'true') {
+                        value = true
+                    }
+                    else if (value.toLowerCase() === 'false') {
+                        value = false
                     }
                 }
-                if (orQuery.length) {
-                    query.push(orQuery);
-                }
+                query.push({[key]: value})
             }
         }
-        completeQuery.push(query);
-    })
-    url.searchParams.set('q', JSON.stringify(completeQuery));
-    let queryApply = document.getElementById('query-apply');
-    let queryApplyEvent = new Event('click');
+    }
+    return query
+}
+
+function setQueryParam(queryParam) {
+    const queryLabel = getCompleteQueryText(queryParam);
+    const queryNotificationLabel = document.getElementById('query-label');
+    queryNotificationLabel.innerText = queryLabel;
+    queryNotificationLabel.classList.remove('is-hidden');
+    setInputType(queryParam);
+    if (queryParam.getAttribute('data-type') === 'bool') {
+        getActiveInput().value = queryParam.getAttribute('data-value')
+        applyInput();
+        resetInput();
+    }
+}
+
+function setInputType(queryParam) {
+    const queryInput = document.getElementById('query-input');
+    const query = getQueryFromElement(queryParam);
+    const dataType = queryParam.getAttribute('data-type');
+    const queryLabel = getCompleteQueryText(queryParam);
+    const step = queryParam.getAttribute('data-step') || null;
+    const inputControl = document.getElementById('query-input-control');
+    const selectControl = document.getElementById('query-input-select-control');
+    queryInput.setAttribute('data-param', query);
+    queryInput.setAttribute('data-text', queryLabel);
+    if (dataType === 'selection') {
+        const selectInput = document.getElementById('query-input-select');
+        const options = queryParam.querySelector('.param-options');
+        selectInput.innerHTML = options.innerHTML
+        selectControl.classList.remove('is-hidden');
+        inputControl.classList.add('is-hidden');
+        selectInput.setAttribute('data-param', query);
+        selectInput.setAttribute('data-text', queryLabel);
+        return
+    }
+    selectControl.classList.add('is-hidden');
+    inputControl.classList.remove('is-hidden');
+    queryInput.setAttribute('type', dataType);
+    if (step) {queryInput.step = step;}
+    queryInput.value = null;
+    queryInput.select()
+}
+
+function inputConfirm() {
+    if (this.event.key === 'Enter') {
+        applyInput();
+    }
+}
+
+function applyInput() {
+    const input = getActiveInput();
+    if (!input.reportValidity()) {
+        return
+    }
+    const edit = document.querySelector('.selected-query-edit');
+    const tag = document.querySelector('.selected-query-tag');
+    let group = (
+        document.querySelector('.selected-query-group')
+        || document.getElementById('query-tags').firstElementChild
+    );
+    if (!group) {
+        group = document.getElementById('query-tags').appendChild(createQueryGroup());
+    }
+    if (edit) {
+        editQueryTag(edit.closest('.query-tag-container'));
+    }
+    else if (tag) {
+        const container = tag.closest('.query-tag-container');
+        const previous = container.previousElementSibling;
+        if (previous) {
+            appendToTag(container);
+        }
+        else {
+            appendAfterTag(container);
+        }
+    }
+    else {
+        const operator = (
+            group.childElementCount
+            && document.getElementById('query-operation-select').value
+            || null
+        );
+        group.appendChild(createQueryTag(
+            input.getAttribute('data-param'),
+            operator,
+            input.value
+        ));
+    }
+    fetchQuery();
+    resetInput();
+}
+
+function editQueryTag(queryTagContainer) {
+    const input = getActiveInput();
+    const param = input.getAttribute('data-param');
+    const operator = (
+        queryTagContainer.previousElementSibling
+        && document.getElementById('query-operation-select').value
+        || null
+    );
+    const queryTag = createQueryTag(param, operator, input.value);
+    queryTagContainer.replaceWith(queryTag);
+}
+
+function appendToTag(queryTagContainer) {
+    const input = getActiveInput();
+    const operator = (
+        queryTagContainer.firstElementChild.classList.contains('query-tag-operator')
+        && queryTagContainer.firstElementChild.firstElementChild.value
+        || '&'
+    );
+    const operatorSelect = createOperatorSelect(operator);
+    const queryGroup = createQueryGroup();
+    queryTagContainer.after(operatorSelect);
+    if (queryTagContainer.firstElementChild.classList.contains('query-tag-operator')) {
+        queryTagContainer.firstElementChild.remove();
+    }
+    operatorSelect.after(queryGroup);
+
+    queryGroup.appendChild(queryTagContainer);
+    queryGroup.appendChild(createQueryTag(
+        input.getAttribute('data-param'),
+        document.getElementById('query-operation-select').value,
+        input.value)
+    );
+
+}
+
+function appendAfterTag(queryTagContainer) {
+    const input = getActiveInput();
+    const operator = document.getElementById('query-operation-select').value;
+    const tag = createQueryTag(
+        input.getAttribute('data-param'), operator, input.value
+    );
+    queryTagContainer.after(tag);
+}
+
+function resetInput() {
+    const input = document.getElementById('query-input');
+    const queryParam = getParamElement(input.getAttribute('data-default-term'))
+    const queryLabel = getCompleteQueryText(queryParam);
+    const queryNotificationLabel = document.getElementById('query-label');
+    queryNotificationLabel.innerText = queryLabel;
+    queryNotificationLabel.classList.remove('is-hidden');
+    setInputType(queryParam);
+}
+
+function fetchQuery(queryString=null) {
+    const queryApply = document.getElementById('query-apply');
+    const queryApplyEvent = new Event('click');
+    const url = new URL(window.location)
+    url.searchParams.set('q', queryString ?? queryStringFromJsonQuery());
     queryApply.setAttribute('hx-get', url.toString());
     htmx.process(queryApply);
     queryApply.dispatchEvent(queryApplyEvent);
 }
 
+//-----------------------------------------------------------------------------
+// Events
+//-----------------------------------------------------------------------------
+
+function showHide() {
+    const target = this.event.target;
+    const queryInput = document.getElementById('query-input-fieldset');
+    const queryParamDropDown = document.getElementById('query-params-dropdown');
+    const operation = document.getElementById('query-operation');
+    if (queryInput.contains(target)
+        || queryParamDropDown.contains(target)
+        || operation.contains(target)
+    ) {
+        queryParamDropDown.classList.remove('is-hidden');
+        return
+    }
+    queryParamDropDown.classList.add('is-hidden');
+}
 
-function resetFilter() {
-    const baseURl = window.location.href.split('?')[0];
-    window.location.assign(baseURl);
+function showFilterModal() {
+    const filterModal = document.getElementById('filter-modal');
+    const modalContent = document.getElementById('modal-content');
+    modalContent.appendChild(document.getElementById('query-block'));
+    filterModal.classList.add('is-active');
 }
 
-function applyQueryInput(event) {
-    event.stopPropagation();
-    const text = queryInput.getAttribute('data-text');
-    const param = queryInput.getAttribute('data-param');
-    const value = activeInput.value;
-    const valid = activeInput.reportValidity();
-    if (!valid) {return}
-    let displayValue = value;
-    if (activeInput === queryInputSelect) {
-        displayValue = activeInput.selectedOptions[0].textContent;
-    }
-    if (value && param) {
-        addQueryTag(text, param, value, displayValue);
-        setDefaultTerm();
-    } else if (value && !param) {
-        queryTextElement.classList.add('is-hidden');
-        queryTextNotificationParameterElement.classList.remove('is-hidden');
-        resetQueryInput();
-    } else if (!value && param) {
-        activeInput.select();
-    } else if (!value && !param) {
-        resetQueryInput();
-    }
-}
-
-function showQueryParams() {
-    document.getElementById('query-params-dropdown').classList.remove(
-        'is-hidden'
-    );
+function hideFilterModal() {
+    const filterModal = document.getElementById('filter-modal');
+    const panel = document.getElementById('filter-panel');
+    panel.appendChild(document.getElementById('query-block'));
+    filterModal.classList.remove('is-active');
 }
 
-function navigateQueryInput(event) {
-    if (event.key === 'Enter') {
-        applyQueryInput(event);
+function toggleParams() {
+    const target = this.event.target
+    const nextSibling = target.nextElementSibling;
+    if (!nextSibling) {
+        return
+    }
+    if (nextSibling.classList.contains('query-params')) {
+        nextSibling.classList.toggle('is-hidden');
     }
-    if (event.key === 'Escape') {
-        queryParamsDropdown.classList.add('is-hidden');
+    if (nextSibling.classList.contains('param-options')) {
+        setQueryParam(nextSibling.parentElement);
     }
-    if (event.key === 'ArrowDown') {
-        if (queryParamsDropdown.classList.contains('is-hidden')) {
-            queryParamsDropdown.classList.remove('is-hidden');
+}
+
+function deleteQueryTag(event) {
+    const tagContainer = event.currentTarget.closest('.query-tag-container');
+    const previousTagContainer = tagContainer.previousElementSibling;
+    const nextTagContainer = tagContainer.nextElementSibling;
+    const queryGroup = tagContainer.parentElement;
+
+    if (
+        previousTagContainer
+        && nextTagContainer
+        && tagContainer.firstElementChild.classList.contains('query-tag-operator')
+    ) {
+        if (nextTagContainer.childElementCount === 1) {
+            nextTagContainer.prepend(tagContainer.firstElementChild)
+        }
+    }
+    tagContainer.remove();
+    if (
+        !previousTagContainer
+        && nextTagContainer
+        && nextTagContainer.firstElementChild.classList.contains('query-tag-operator')
+    ) {
+        nextTagContainer.firstElementChild.remove();
+    }
+    if (!queryGroup.childElementCount) {
+        queryGroup.previousElementSibling && queryGroup.previousElementSibling.remove();
+        queryGroup.remove();
+    }
+    else if (
+        queryGroup.firstElementChild
+        && queryGroup.firstElementChild.classList.contains('query-group-operator')
+    ) {
+        if (!isFirstQueryGroup(queryGroup)) {
+            queryGroup.previousElementSibling && queryGroup.previousElementSibling.remove();
+            while (queryGroup.childElementCount) {
+                queryGroup.after(queryGroup.lastElementChild);
+            }
+            queryGroup.remove();
         }
-        if (!queryInput.type in ['date', 'datetime-local', 'number']) {
-            queryParamsDropdown.firstElementChild.focus({ focusVisible: true });
+        else {
+            queryGroup.firstElementChild.remove();
+            const subQueryGroup = queryGroup.firstElementChild;
+            while (subQueryGroup.childElementCount) {
+                subQueryGroup.before(subQueryGroup.firstElementChild);
+            }
+            subQueryGroup.remove();
         }
+    }
+    fetchQuery();
+}
 
+function setSelectedTag(event) {
+    event.stopPropagation();
+    const toDeactivate = event.currentTarget.classList.contains(
+        'selected-query-tag'
+    );
+    unselectAll();
+    if (!toDeactivate) {
+        event.currentTarget.classList.add('selected-query-tag');
     }
 }
 
-function clickQueryParams(event) {
+function setSelectedQueryGroup(event) {
     event.stopPropagation();
-    const queryParam = event.target.parentElement;
-    const queryParams = queryParam.querySelector(
-        '.query-params'
+    const toDeactivate = event.currentTarget.classList.contains(
+        'selected-query-group-selector'
     );
-    if (queryParams && queryParams.classList.contains('is-hidden')) {
-        queryParams.classList.remove('is-hidden');
+    unselectAll();
+    if (!toDeactivate) {
+        event.currentTarget.classList.add('selected-query-group-selector');
+        const parent = event.currentTarget.closest('.query-group-operator');
+        parent.nextElementSibling.classList.add('selected-query-group');
     }
-    else {
-        const subQueryParams = queryParam.querySelectorAll(
-            '.query-params'
-        );
-        subQueryParams.forEach((element) => {
-            element.classList.add('is-hidden');
-        })
+}
+
+function setSelectedEdit(event) {
+    event.stopPropagation();
+    const toDeactivate = event.currentTarget.classList.contains(
+        'selected-query-edit'
+    );
+    unselectAll();
+    if (toDeactivate) {
+        return
     }
-    if (!queryParam.querySelector('.query-params')) {
-        setParam(queryParam)
+    const tag = event.currentTarget.closest('.query-tag');
+    event.currentTarget.classList.add('selected-query-edit');
+    if (tag.getAttribute('data-is-bool') !== 'true') {
+        setQueryParam(getParamElement(
+            tag.getAttribute('data-param'),
+            tag.getAttribute('data-value')
+        ));
     }
+
 }
 
-function setParam(queryParam) {
-    const completeParam = getCompleteQueryParam(queryParam);
-    const dataType = queryParam.getAttribute('data-type');
-    const text = getCompleteQueryText(queryParam);
-    resetQueryInput();
-    setInputType(dataType, completeParam, text,
-        queryParam.getAttribute('data-step') || null
+function unselectAll() {
+    unselectAllQueryGroups();
+    unselectAllQueryTags();
+    unselectAllQueryEdits();
+}
+
+function unselectAllQueryTags() {
+    document.querySelectorAll('.selected-query-tag').forEach(
+        (tag) => {
+            tag.classList.remove('selected-query-tag')
+        }
+    );
+}
+
+function unselectAllQueryGroups() {
+    document.querySelectorAll(
+        '.selected-query-group, .selected-query-group-selector'
+    ).forEach(
+        (tag) => {
+            tag.classList.remove(
+                'selected-query-group', 'selected-query-group-selector'
+            )
+        }
+    );
+}
+
+function unselectAllQueryEdits() {
+    document.querySelectorAll('.selected-query-edit').forEach(
+        (tag) => {tag.classList.remove('selected-query-edit')}
     );
-    queryInput.scrollIntoView({behavior: 'smooth', block: 'end'});
-    queryInput.select();
+}
+
+function changeOperator(event) {
+    fetchQuery();
+}
+
+//-----------------------------------------------------------------------------
+// Elements
+//-----------------------------------------------------------------------------
+
+function createQueryGroup(operator=null) {
+    const queryGroup = document.createElement('div');
+    queryGroup.classList.add('query-group');
+    return queryGroup
+}
+
+function createQueryTag(term, operator, value=null) {
+    let displayValue;
+    const element = getParamElement(term, value);
+    const dataType = element.getAttribute('data-type');
+    const text = getCompleteQueryText(element);
     if (dataType === 'bool') {
-        let value = queryParam.getAttribute('data-value');
-        value = value === 'True';
-        addQueryTag(text, completeParam, value, queryParam.firstElementChild.text);
-        setInputType('text', '', '');
-        queryTextNotificationParameterElement.classList.add('is-hidden')
-        queryTextElement.innerText = '';
-        queryTextElement.classList.add('is-hidden')
+        displayValue = element.firstElementChild.text;
     }
     else if (dataType === 'selection') {
-        const options = queryParam.querySelector('.param-options');
-        activeInput = queryInputSelect;
-        queryInputSelect.innerHTML = options.innerHTML;
-        queryInputSelectControl.classList.remove('is-hidden');
-        queryInputControl.classList.add('is-hidden');
-        queryInput.setAttribute('data-param', completeParam);
-        queryInput.setAttribute('data-text', text);
-        queryTextNotificationParameterElement.classList.add('is-hidden')
-        queryTextElement.innerText = text;
-        queryTextElement.classList.remove('is-hidden')
-
+        const option = element.querySelector(
+            `.param-options > option[value="${value}"]`
+        );
+        displayValue = option.textContent;
     }
+    else {
+        displayValue = value;
+    }
+    return createTag(text, term, value, displayValue, operator);
 }
 
-function navigateQueryParams(event) {
-    event.stopPropagation();
-    let elementToFocus = null;
-    const isSubQuery = event.target.parentElement.classList.contains(
-        'query-params'
+function createTag(text, param, value, displayValue, operator) {
+    const tagContainer = document.createElement('div');
+    const tag = document.createElement('div');
+    const tagEditDiv = document.createElement('div');
+    const tagEditIcon = document.createElement('div');
+    const tagText = document.createElement('span');
+    const tagDeleteDiv = document.createElement('div');
+    const tagDeleteButton = document.createElement('button');
+    tagEditDiv.classList.add('query-tag-edit')
+    tagEditDiv.addEventListener('click', setSelectedEdit);
+    tagEditDiv.appendChild(tagEditIcon);
+    tagEditIcon.classList.add('icon-edit', 'query-tag-edit-icon');
+    tagText.classList.add('query-tag-text', 'is-size-7', 'is-unselectable');
+    tagText.innerText = text.concat(displayValue && `: ${displayValue}` || '');
+    tagDeleteDiv.classList.add('query-tag-delete')
+    tagDeleteButton.classList.add('delete', 'mx-1');
+    tagDeleteDiv.appendChild(tagDeleteButton);
+    tagDeleteButton.addEventListener('click', deleteQueryTag);
+    tag.addEventListener('click', setSelectedTag);
+    tag.classList.add('query-tag');
+    tag.tabIndex = -1;
+    tag.setAttribute('data-param', param);
+    tag.setAttribute('data-value', value);
+    tag.setAttribute('data-is-bool', String(isBoolean(value)));
+    tag.appendChild(tagEditDiv);
+    tag.appendChild(tagText);
+    tag.appendChild(tagDeleteDiv);
+    if (operator && operator !== '&') {
+        tagContainer.appendChild(createOperatorDiv(operator));
+    }
+    tagContainer.appendChild(tag);
+    tagContainer.classList.add('query-tag-container');
+    return tagContainer
+}
+
+function createOperatorDiv(operator) {
+    const operatorContainer = document.createElement('div');
+    const operatorDiv = document.createElement('div');
+    operatorContainer.classList.add('query-tag-operator');
+    operatorDiv.innerText = getOperatorLabel(operator);
+    operatorDiv.value = operator;
+    operatorDiv.setAttribute('value', operator);
+    operatorContainer.appendChild(operatorDiv);
+    return operatorContainer
+}
+
+function createOperatorSelect(operator) {
+    const selectContainer = document.createElement('div');
+    const selectDiv = document.createElement('div');
+    const select = document.createElement('select');
+    const andOption = document.createElement('option');
+    const orOption = document.createElement('option');
+    const xorOption = document.createElement('option');
+    const groupSelectorDiv = document.createElement('div');
+    const groupSelector = document.createElement('button');
+    groupSelectorDiv.classList.add('query-group-selector');
+    groupSelector.classList.add('icon-select');
+    groupSelectorDiv.appendChild(groupSelector);
+    andOption.value = '&';
+    andOption.innerText = getOperatorLabel('&');
+    orOption.innerText = getOperatorLabel('|');
+    xorOption.innerText = getOperatorLabel('^');
+    orOption.value = '|';
+    xorOption.value = '^';
+    if (operator === '&') {andOption.setAttribute('selected', '')}
+    else if (operator === '|') {orOption.setAttribute('selected', '')}
+    else if (operator === '^') {xorOption.setAttribute('selected', '')}
+    select.appendChild(andOption);
+    select.appendChild(orOption);
+    select.addEventListener('change', changeOperator);
+    selectDiv.classList.add('select')
+    selectDiv.appendChild(select);
+    if (operator === '^') {select.appendChild(xorOption);}
+    selectContainer.classList.add(
+        'query-group-operator', 'is-size-7', 'mr-1', 'mb-1'
     );
-    const hasSubQuery= event.target.querySelectorAll('.query-params');
+    selectContainer.appendChild(selectDiv);
+    selectContainer.appendChild(groupSelectorDiv);
+    groupSelector.addEventListener('click', setSelectedQueryGroup);
+    return selectContainer
+}
+
+//-----------------------------------------------------------------------------
+// Helper
+//-----------------------------------------------------------------------------
 
-    if (event.key === 'ArrowUp') {
-        if (event.target.previousElementSibling) {
-            elementToFocus = event.target.previousElementSibling;
+function normalizeQueryString(queryString=null, left=null) {
+    queryString = queryString || JSON.parse(
+        new URL(window.location.href).searchParams.get('q') || '[]'
+    );
+    let normalizedQueryString = []
+    for (let item of queryString) {
+        if (isString(item)) {
+            normalizedQueryString.push(item)
+            left = item
         }
-        else if (event.target.parentElement.id === 'query-params-dropdown') {
-            elementToFocus = queryInput;
-            elementToFocus.select();
+        else if (isObject(item)) {
+            for (let k in item) {
+                if (left && !isString(left)) {
+                    normalizedQueryString.push('&')
+                }
+                normalizedQueryString.push({[k]: item[k]})
+                left = item
+            }
         }
-        else if (event.target.parentElement.classList.contains('query-param')) {}
-    }
-    else if (event.key === 'ArrowDown') {
-        elementToFocus = event.target.nextElementSibling;
-    }
-    else if (event.key === 'Escape') {
-        elementToFocus = queryInput;
-        elementToFocus.select();
-        queryParamsElements.forEach((element) => {
-            element.classList.add('is-hidden');
-        })
-
-    }
-    else if (event.key === 'ArrowRight') {
-        if (hasSubQuery) {
-            const queryParams= event.target.querySelector('.query-params');
-            if (queryParams) {
-                queryParams.classList.remove('is-hidden');
-                elementToFocus = queryParams.firstElementChild;
+        else if (isArray(item)) {
+            if (left && !isString(left)) {
+                normalizedQueryString.push('&')
             }
+            normalizedQueryString.push(normalizeQueryString(item))
+            left = item
         }
     }
-    else if (event.key === 'ArrowLeft') {
-        if (isSubQuery) {
-            elementToFocus = event.target.parentElement.parentElement;
-            event.target.parentElement.classList.add('is-hidden');
-        }
+    return normalizedQueryString
+}
+
+function getOperatorLabel(operator) {
+    const queryTags = document.getElementById('query-tags');
+    if (operator === '&') {
+        return queryTags.getAttribute('data-and-label')
     }
-    if (elementToFocus) {
-        elementToFocus.focus();
+    else if (operator === '|') {
+        return queryTags.getAttribute('data-or-label')
     }
-
-    if (event.key === 'Enter') {
-        const param = event.target.getAttribute('data-param');
-        const value = queryInput.value;
-        const text = getCompleteQueryText(event.target)
-        addQueryTag(text, param, value);
+    else if (operator === '^') {
+        return queryTags.getAttribute('data-xor-label')
     }
 }
 
-function getParamElement(param, value=null) {
+function getParamElement(param, value=null){
+    const queryParamsDropdown = document.getElementById('query-params-dropdown');
     const invert = param.startsWith('~');
-    if (invert) {
-        param = param.slice(1);
+    param = invert && param.slice(1) || param
+    if (value === 'True') {
+        value = true
+    }
+    if (value === 'False') {
+        value = false
     }
     const parts = param.split('__');
     let paramElement = queryParamsDropdown.querySelector(
@@ -364,14 +602,12 @@ function getParamElement(param, value=null) {
             if (invert) {
                 selector += `[data-param-invert="true"]`;
             }
-            if (typeof value == 'boolean') {
+            if (typeof value === 'boolean') {
                 if (value) {
                     selector += `[data-value="True"]`;
                 } else {
                     selector += `[data-value="False"]`;
                 }
-            } else if (value) {
-                selector += `[data-value="${value}"]`;
             }
         }
         paramElement = paramElement.querySelector(selector);
@@ -379,8 +615,13 @@ function getParamElement(param, value=null) {
     return paramElement
 }
 
-function getQueryTextParts(element) {
-    let currentElement = element;
+function getCompleteQueryText(paramElement) {
+    let names = getQueryTextParts(paramElement);
+    return names.join(' \u2192 ')
+}
+
+function getQueryTextParts(paramElement) {
+    let currentElement = paramElement;
     let names = [];
     names.push(currentElement.firstElementChild.innerText);
     while (currentElement.parentElement.parentElement.classList.contains('query-param')) {
@@ -390,13 +631,8 @@ function getQueryTextParts(element) {
     return names.reverse()
 }
 
-function getCompleteQueryText(element) {
-    let names = getQueryTextParts(element);
-    return names.join(' \u2192 ')
-}
-
-function getCompleteQueryParam(element) {
-    let currentElement = element;
+function getQueryFromElement(queryParam) {
+    let currentElement = queryParam;
     const invert = currentElement.getAttribute('data-param-invert');
     let params = [];
     params.push(currentElement.getAttribute('data-param'));
@@ -412,188 +648,39 @@ function getCompleteQueryParam(element) {
     return paramString
 }
 
-function addQueryTag(text, param, value, displayValue) {
-    const operation = document.getElementById('query-operation-select').value;
-    const selectedTag= queryTags.querySelector('.selected-query-tag');
-    if (!queryTags.childElementCount) {
-        let tagBlock = buildTagBlock();
-        let tag = buildTag(text, param,  value, displayValue);
-        tagBlock.appendChild(tag);
-        queryTags.appendChild(tagBlock);
-    }
-    else if (operation === 'and' && selectedTag) {
-        selectedTag.parentElement.appendChild(buildTag(text, param, value, displayValue));
-    }
-    else if (operation === 'and' && !selectedTag) {
-        queryTags.lastElementChild.appendChild(buildTag(text, param, value, displayValue));
-    }
-    else if (operation === 'or' && selectedTag) {
-        if (selectedTag.classList.contains('query-tag-group')) {
-            let tag = buildTag(text, param, value, displayValue);
-            selectedTag.appendChild(tag);
-        }
-        else {
-            let tagGroup = buildTagGroup();
-            let tag = buildTag(text, param, value, displayValue);
-            selectedTag.parentElement.insertBefore(tagGroup, selectedTag);
-            tagGroup.appendChild(selectedTag);
-            tagGroup.appendChild(tag);
-            selectedTag.classList.remove('selected-query-tag');
-            tagGroup.classList.add('selected-query-tag');
-        }
-    }
-    else if (operation === 'or' && !selectedTag) {
-        const tagBlock = buildTagBlock();
-        const tag = buildTag(text, param, value, displayValue)
-        const tagBlockLabel = buildTagBlockLabel();
-        tagBlock.appendChild(tag);
-        queryTags.appendChild(tagBlockLabel);
-        queryTags.appendChild(tagBlock);
-    }
-    // if (!filterModal.classList.contains('is-active')) {
-    //     apply();
-    // }
-    apply();
-}
-
-function unselectSingleObject(pk) {
-    const tag = buildActiveQueryTag(JSON.parse(`{"~id__exact": ${pk}}`));
-    if (!queryTags.childElementCount) {
-        const tagBlock = buildTagBlock();
-        tagBlock.appendChild(tag);
-        queryTags.appendChild(tagBlock);
-    } else {
-        queryTags.lastElementChild.appendChild(tag);
-    }
-    // if (!filterModal.classList.contains('is-active')) {
-    //     apply();
-    // }
-    apply();
-}
-
-function buildTagBlock() {
-    let container = document.createElement('div');
-    container.classList.add('query-tag-block');
-    return container
-}
-
-function buildTagBlockLabel() {
-    const blockLabel = document.createElement('span');
-    blockLabel.innerText = queryTags.getAttribute('data-or-label');
-    blockLabel.classList.add('query-or-label');
-    return blockLabel
-}
-
-function buildTagGroup() {
-    let container= document.createElement('div');
-    container.classList.add('query-tag-group');
-    container.addEventListener('click', setSelectedTag);
-    return container
-}
-
-function buildTag(text, param, value, displayValue) {
-    let container = document.createElement('div');
-    let textSpan = document.createElement('span');
-    let deleteSpan = document.createElement('span');
-    let deleteButton = document.createElement('button');
-    container.classList.add('query-tag');
-    container.tabIndex = -1;
-    textSpan.classList.add('query-tag-text', 'is-size-6', 'is-unselectable');
-    if (displayValue) {
-        text = text.concat(': ', displayValue);
-    }
-    textSpan.innerText = text;
-    deleteSpan.classList.add(
-        'is-flex', 'is-flex-direction-column',
-        'is-justify-content-space-around', 'ml-1'
-    );
-    deleteButton.classList.add('delete');
-    deleteSpan.appendChild(deleteButton);
-    container.appendChild(textSpan);
-    container.appendChild(deleteSpan);
-    container.addEventListener('click', setSelectedTag);
-    deleteButton.addEventListener('click', deleteTag);
-    container.setAttribute('data-param', param);
-    container.setAttribute('data-value', value);
-    container.setAttribute('data-is-bool', String(typeof value === 'boolean'));
-    return container
+function getActiveInput() {
+    const input = document.getElementById('query-input');
+    return (
+        input.parentElement.classList.contains('is-hidden')
+        && document.getElementById('query-input-select')
+        || input
+    )
 }
 
-function setSelectedTag(event) {
-    event.stopPropagation();
-    let target = event.currentTarget
-    if (target.parentElement.classList.contains('query-tag-group')) {
-        target = event.currentTarget.parentElement;
-    }
-    const toDeactivate = target.classList.contains('selected-query-tag');
-    const selectedTags= queryBlock.querySelectorAll('.selected-query-tag');
-    selectedTags.forEach((element) => {
-        element.classList.remove('selected-query-tag');
-    })
-    if (!toDeactivate) {
-        target.classList.add('selected-query-tag');
-    }
+function isObject(item) {
+    return Object.prototype.toString.apply(item) === '[object Object]'
 }
 
-function deleteTag(event) {
-    event.stopPropagation();
-    const tag = event.target.closest('.query-tag');
-    let tagGroup = tag.parentElement;
-    tagGroup.removeChild(tag);
-    while (tagGroup.classList.contains('query-tag-group')) {
-        if (!tagGroup.childElementCount) {
-            let parent = tagGroup.parentElement;
-            parent.removeChild(tagGroup);
-            tagGroup = parent;
-        }
-        else if (tagGroup.childElementCount === 1) {
-            let parent = tagGroup.parentElement
-            let child = tagGroup.firstElementChild
-            if (tagGroup.classList.contains('selected-query-tag')) {
-                child.classList.add('selected-query-tag');
-            }
-            parent.appendChild(child);
-            parent.removeChild(tagGroup);
-            tagGroup = parent.parentElement;
-        }
-        else {
-            break
-        }
 
-    }
-    if (tagGroup.classList.contains('query-tag-block') && !tagGroup.childElementCount) {
-        const previousSibling = tagGroup.previousElementSibling;
-        const nextSibling = tagGroup.nextElementSibling;
-        if (previousSibling && previousSibling.classList.contains('query-or-label')) {
-            tagGroup.parentElement.removeChild(previousSibling);
-        }
-        if (nextSibling && nextSibling.classList.contains('query-or-label')) {
-            nextSibling.remove();
-        }
-        tagGroup.parentElement.removeChild(tagGroup);
-    }
-    // if (!filterModal.classList.contains('is-active')) {
-    //     apply();
-    // }
-    apply()
+function isArray(item) {
+    return Object.prototype.toString.apply(item) === '[object Array]'
 }
 
-function setInputType(inputType, param, text, step=null) {
-    queryInput.setAttribute('type', inputType);
-    queryInput.setAttribute('data-param', param);
-    queryInput.setAttribute('data-text', text);
-    queryTextNotificationParameterElement.classList.add('is-hidden');
-    queryTextElement.classList.remove('is-hidden');
-    queryTextElement.innerText = text;
-    if (step) {
-        queryInput.step = step
-    }
+
+function isString(item) {
+    return Object.prototype.toString.apply(item) === '[object String]'
 }
 
-function resetQueryInput() {
-    queryInput.setAttribute('type', 'text');
-    queryInputSelectControl.classList.add('is-hidden');
-    queryInputControl.classList.remove('is-hidden');
-    activeInput = queryInput;
-    queryInput.select();
+function isFirstQueryGroup(queryGroup) {
+    return queryGroup.parentElement.id === 'query-tags'
 }
+
+function isBoolean(value) {
+    if (typeof value === 'boolean') {
+        return true
+    }
+    if (typeof value === 'string') {
+        return value.toLowerCase() === 'false' || value.toLowerCase() === 'true'
+    }
+    return false
+}