active_element 0.0.1 → 0.0.3

data/app/assets/javascripts/active_element/json_field.js

@@ -0,0 +1,316 @@
+ActiveElement.JsonField = (() => {
+  const cloneElement = (id) => ActiveElement.cloneElement('json', id);
+
+  const humanize = ({ string, singular = false }) => {
+    const humanized = string.split('_').map(item => item.charAt(0).toUpperCase() + item.substring(1)).join(' ');
+
+    if (!singular) return humanized;
+
+    return humanized.replace(/s$/, ''); // FIXME: Expose translations from back-end to make this more useful.
+  };
+
+  const createStore = ({ data, store = { data: {}, paths: {} } }) => {
+    const buildState = ({ data, store, path = [] }) => {
+      const getPath = (key) => {
+        return path.concat([key]);
+      };
+
+      if (Array.isArray(data)) {
+        return data.map((value, index) => buildState({ data: value, store, path: getPath(index) }));
+      } else if (data && typeof(data) === 'object') {
+        return Object.fromEntries(
+          Object.entries(data).map(
+            ([key, value]) => [key, buildState({ data: value, store, path: getPath(key) })]
+          )
+        );
+      } else {
+        const id = crypto.randomUUID();
+        store.data[id] = data;
+        store.paths[id] = path;
+        return id;
+      }
+    };
+
+    const state = buildState({ data, store });
+    const getValue = (key) => store.data[key];
+    const setValue = (key, value) => store.data[key] = value;
+
+    return { state, store, getValue, setValue };
+  };
+
+  const getState = ({ store }) => {
+    const data = {};
+    const storeData = Object.entries(store.paths).forEach(([id, path]) => {
+      let value = data;
+      path.forEach((key, index) => {
+        if (index === path.length - 1) {
+          value[key] = store.data[id];
+        } else if (typeof(key) === 'string') {
+          value[key] = value[key] || {};
+          value = value[key];
+        } else {
+          value[key] = value[key] || [];
+          value = value[key];
+        }
+      });
+
+      return value;
+    },
+    {});
+
+    return data;
+  };
+
+  const getValueFromElement = ({ element }) => {
+    if (element.type === 'checkbox') return element.checked;
+
+    return element.value;
+  };
+
+  const getData = (element) => {
+    const dataKey = element.dataset.dataKey;
+
+    return ActiveElement.jsonData[dataKey].data;
+  };
+
+  const getSchema = (element) => {
+    const dataKey = element.dataset.dataKey;
+
+    return ActiveElement.jsonData[dataKey].schema;
+  };
+
+  const trackState = ({ element, schema, getValue }) => {
+    element.addEventListener('change', (ev) => {
+      const key = ev.target.id;
+      const previousValue = getValue(key);
+      const newValue = getValueFromElement({ element: ev.target });
+
+      if (previousValue !== newValue) {
+        // setValue(key, newValue);
+        // TODO: Trigger callbacks
+      }
+      console.log(`Previous: ${previousValue}`);
+      console.log(`Updated:  ${newValue}`);
+      return true;
+    });
+  };
+
+  const Component = ({ getValue, schema, state, element }) => {
+    const ObjectField = ({ schema, state, floating = true, omitLabel = false }) => {
+      let element;
+      switch (schema.type) {
+        case 'boolean':
+          return BooleanField({ state, omitLabel, schema });
+        case 'string':
+          return StringField({ state, omitLabel, floating, schema });
+          break;
+        case 'object':
+          element = cloneElement('form-group-floating');
+
+          (schema.shape.fields).forEach((field) => {
+            element.append(
+              ObjectField({
+                name: field.name,
+                floating: false,
+                schema: field,
+                state: state ? state[field.name] : null,
+              })
+            );
+          });
+
+          return element;
+        case 'array':
+          element = cloneElement('form-group');
+          const list = ArrayField({ schema, state });
+          element.append(ExpandCollapseButton({ element }));
+          element.append(Label({ title: schema.name }));
+          element.append(list);
+          element.append(AppendButton({ list, schema, state }));
+          return element;
+      }
+    };
+
+    const BooleanField = ({ omitLabel, schema, state }) => {
+      const checkbox = cloneElement('checkbox-field');
+
+      checkbox.id = state;
+      checkbox.checked = getValue(state);
+
+      if (omitLabel) return checkbox;
+
+      const element = cloneElement('form-check');
+
+      element.append(checkbox);
+      element.append(Label({ title: schema.name, template: 'form-check-label' }));
+
+      return element;
+    };
+
+    const ArrayField = ({ schema, state }) => {
+      const element = cloneElement('list-group');
+
+      if (state) {
+        state.forEach((value) => {
+          const listItem = cloneElement('list-item');
+          const objectField = ObjectField({
+            omitLabel: true,
+            schema: { ...schema, ...schema.shape },
+            state: value,
+          });
+
+          if (schema.shape.type == 'object') {
+            const group = cloneElement('form-group');
+            group.append(DeleteButton({ rootElement: listItem, template: 'delete-object-button' }));
+            group.append(objectField);
+            listItem.append(group);
+          } else {
+            listItem.append(objectField);
+            listItem.append(DeleteButton({ rootElement: listItem }));
+          }
+
+          element.append(listItem);
+        });
+      }
+
+      return element;
+    };
+
+    const Label = ({ title, template }) => {
+      const element = cloneElement(template || 'label');
+
+      element.append(humanize({ string: title }));
+
+      return element;
+    }
+
+    const Select = ({ state, schema }) => {
+      const element = cloneElement('select')
+
+      element.id = state;
+
+      schema.shape.options.forEach((option) => {
+        const optionElement = document.createElement('option');
+        optionElement.value = option;
+        optionElement.append(option);
+        optionElement.selected = option === getValue(state);
+        element.append(optionElement);
+      });
+
+      return element;
+    };
+
+    const TextField = ({ template, state, schema }) => {
+      const element = cloneElement(template || 'text-field');
+
+      element.value = getValue(state) || '';
+      element.id = state;
+      element.placeholder = schema.shape?.placeholder || ' ';
+
+      return element;
+    };
+
+    const StringField = ({ omitLabel, floating, schema, state }) => {
+      let element;
+
+      if (schema.shape?.options?.length) {
+        element = Select({ state, schema });
+      } else {
+        element = TextField({ state, schema });
+      }
+
+      if (omitLabel) return element;
+
+      const group = cloneElement('form-group-floating');
+
+      group.append(element);
+      group.append(Label({ title: schema.name }));
+
+      return group;
+    };
+
+    const ExpandCollapseButton = ({ element }) => {
+      const button = cloneElement('expand-collapse-button');
+
+      button.onclick = (ev) => {
+        ev.stopPropagation();
+        element.classList.toggle('collapsed');
+
+        if (element.classList.contains('collapsed')) {
+          button.innerText = 'Show';
+        } else {
+          button.innerText = 'Hide';
+        }
+
+        return false;
+      };
+
+      return button;
+    };
+
+    const DeleteButton = ({ rootElement, template = 'delete-button' }) => {
+      const element = cloneElement(template);
+
+      element.onclick = (ev) => {
+        ev.stopPropagation();
+        rootElement.remove();
+
+        return false;
+      };
+
+      return element;
+    };
+
+    const AppendButton = ({ list, schema, state }) => {
+      const element = cloneElement('append-button');
+
+      const humanName = humanize({ string: schema.name, singular: true });
+
+      element.append(`Add ${humanName}`);
+      element.onclick = (ev) => {
+        ev.stopPropagation();
+        const listItem = cloneElement('list-item');
+        const objectField = ObjectField(
+          { name: schema.name, omitLabel: true, state, schema: { ...schema, ...schema.shape } }
+        );
+
+        if (schema.shape.type == 'object') {
+          listItem.append(DeleteButton({ rootElement: listItem, template: 'delete-object-button' }));
+          listItem.append(objectField);
+        } else {
+          listItem.append(objectField);
+          listItem.append(DeleteButton({ rootElement: listItem }));
+        }
+        list.append(listItem);
+
+        return false;
+      };
+
+      return element;
+    };
+
+    element.append(ObjectField({ omitLabel: true, schema, state, getValue }));
+  };
+
+  const JsonField = (element) => {
+    const data = getData(element);
+    const schema = getSchema(element);
+    const { state, store, getValue } = createStore({ data });
+
+    console.log(getState({ store }));
+
+    trackState({ element, schema, getValue });
+    const component = Component({ getValue, schema, state, element });
+
+    return component;
+  };
+
+  return JsonField;
+})();
+
+(() => {
+  window.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.json-field').forEach((element) => {
+      ActiveElement.JsonField(element);
+    });
+  });
+})();

data/app/assets/javascripts/active_element/pagination.js

@@ -0,0 +1,18 @@
+(() => {
+  window.addEventListener('DOMContentLoaded', () => {
+    const paginationSelect = document.querySelector('#collection-table-page-size-selector');
+
+    if (paginationSelect) {
+      paginationSelect.addEventListener('change', (ev) => {
+        ev.stopPropagation();
+
+        const params = new URLSearchParams(window.location.search);
+
+        params.set('page_size', ev.target.value);
+        window.location.search = params.toString();
+
+        return false;
+      });
+    }
+  });
+})();

data/app/assets/javascripts/active_element/search_field.js

@@ -0,0 +1,127 @@
+(() => {
+  let lastRequestId;
+
+  const cloneElement = (id) => ActiveElement.cloneElement('form-search-field', id);
+
+  const tryParseJSON = (json, defaultValue) => {
+    try {
+      return JSON.parse(json);
+    } catch (error) {
+      ActiveElement.log(error);
+      return defaultValue;
+    }
+  };
+
+  const processResponse = ({
+    element, response, hiddenInput, spinner, clearButton, searchResultsContainer, responseErrorContainer
+  }) => {
+    spinner.classList.add('invisible');
+    clearButton.classList.remove('invisible');
+
+    if (response.ok) {
+      response.json().then((json) => {
+        if (json.request_id !== lastRequestId) {
+          return;
+        }
+
+        responseErrorContainer.innerText = '';
+
+        if (!json.results.length) {
+          responseErrorContainer.innerText = `No matching results for ${element.value}`;
+          return;
+        }
+
+        json.results.forEach(({ value, attributes }) => {
+          const resultsItem = cloneElement('results-item');
+
+          resultsItem.innerText = attributes.length === 0 ? value : `${attributes.join(', ')} (${value})`;
+          resultsItem.addEventListener('click', () => {
+            hiddenInput.value = value;
+            element.value = attributes.length == 0 ? value : `${attributes.join(', ')} (${value})`;
+            searchResultsContainer.replaceChildren();
+            searchResultsContainer.classList.add('d-none');
+          });
+          searchResultsContainer.append(resultsItem);
+        });
+
+        searchResultsContainer.classList.remove('d-none');
+      });
+    } else {
+      response.json().then((json) => responseErrorContainer.innerText = json.message)
+                     .catch(() => responseErrorContainer.innerText = 'An unepxected error occurred');
+    }
+  };
+
+  window.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('[data-field-type="text-search"]').forEach((element) => {
+      const id = element.id;
+      const hiddenId = `${id}-hidden-value`;
+      const formId = element.dataset.formId;
+      const form = document.querySelector(`#${formId}`);
+      const model = element.dataset.searchModel;
+      const attributes = tryParseJSON(element.dataset.searchAttributes, []);
+      const value = element.dataset.searchValue;
+      const token = ActiveElement.getAntiCsrfToken();
+      const hiddenInput = cloneElement('hidden-input');
+      const responseErrorContainer = cloneElement('response-error');
+      const searchResultsContainer = cloneElement('results');
+      const spinner = cloneElement('spinner');
+      const clearButton = cloneElement('clear-button');
+      document.addEventListener('click', () => {
+        searchResultsContainer.classList.add('d-none');
+      });
+
+      clearButton.addEventListener('click', () => {
+        element.value = '';
+        hiddenInput.value = '';
+        responseErrorContainer.innerText = '';
+        spinner.classList.add('invisible');
+        clearButton.classList.add('invisible');
+      });
+
+      element.addEventListener('keyup', () => {
+        const query = element.value;
+        const requestId = crypto.randomUUID();
+        lastRequestId = requestId;
+
+        clearButton.classList.add('invisible');
+        spinner.classList.remove('invisible');
+        hiddenInput.value = query;
+        searchResultsContainer.classList.add('d-none');
+
+        if (!query || query.length < 3) {
+          spinner.classList.add('invisible');
+          return;
+        }
+
+        searchResultsContainer.replaceChildren();
+
+        fetch(
+          '/_text_search/',
+          {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              request_id: requestId,
+              model,
+              value,
+              attributes,
+              query,
+              [token.param]: token.value,
+            }),
+          }
+        ).then((response) => processResponse(
+          { element, response, spinner, clearButton, hiddenInput, searchResultsContainer, responseErrorContainer }
+        ));
+      });
+
+      hiddenInput.name = element.name;
+      if (element.value) hiddenInput.value = element.value;
+      form.append(hiddenInput);
+      element.parentElement.append(searchResultsContainer);
+      element.parentElement.append(clearButton);
+      element.parentElement.append(spinner);
+      element.parentElement.append(responseErrorContainer);
+    });
+  });
+})();

data/app/assets/javascripts/active_element/secret.js

@@ -0,0 +1,40 @@
+(() => {
+  const cloneElement = (id) => ActiveElement.cloneElement('secret', id);
+
+  window.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('span[data-field-type="secret"]').forEach((element) => {
+      const secret = element.dataset.secret;
+      const showButton = cloneElement('show-button');
+      const hideButton = cloneElement('hide-button');
+      const content = cloneElement('content');
+      const placeholder = secret.replace(/./g, '*');
+
+      hideButton.classList.add('d-none');
+      content.classList.add('font-monospace');
+      content.classList.add('text-secondary');
+      content.innerText = placeholder;
+
+      showButton.addEventListener('click', () => {
+        showButton.classList.add('d-none');
+        hideButton.classList.remove('d-none');
+        content.classList.remove('text-secondary');
+        content.innerText = secret;
+
+        return false;
+      });
+
+      hideButton.addEventListener('click', () => {
+        showButton.classList.remove('d-none');
+        hideButton.classList.add('d-none');
+        content.classList.add('text-secondary');
+        content.innerText = placeholder;
+
+        return false;
+      });
+
+      element.append(content);
+      element.append(showButton);
+      element.append(hideButton);
+    });
+  });
+})();

data/app/assets/javascripts/active_element/setup.js

@@ -0,0 +1,36 @@
+(() => {
+  const generateId = () => {
+    ActiveElement._id += 1;
+
+    return `active-element-element-${ActiveElement._id}`;
+  };
+
+  const getAntiCsrfToken = () => {
+    const param = document.querySelector('meta[name="csrf-param"]').content;
+    const value = document.querySelector('meta[name="csrf-token"]').content;
+
+    return { param, value };
+  };
+
+  const cloneElement = (category, id) => {
+    const element = document.querySelector(`#${category}-templates`)
+                            .querySelector(`#${category}-${id}-template`)
+                            .cloneNode(true);
+    element.id = ActiveElement.generateId();
+    return element;
+  };
+
+  const ActiveElement = {
+    log: (message) => { console.log(`[ActiveElement] ${message}`); },
+    _id: 0,
+    generateId,
+    getAntiCsrfToken,
+    cloneElement,
+    components: {},
+    jsonData: {},
+  };
+
+  window.ActiveElement = ActiveElement;
+})();
+
+ActiveElement.log('Initialized');

data/app/assets/javascripts/active_element/theme.js

@@ -0,0 +1,42 @@
+(() => {
+  const cloneElement = (id) => ActiveElement.cloneElement('theme', id);
+
+  window.addEventListener('DOMContentLoaded', () => {
+    const themeSelect = document.querySelector('#theme-select');
+
+    const setTheme = (theme) => {
+      const themeSelectButtons = themeSelect.children;
+
+      Object.entries(themeSelectButtons).forEach(([_, element]) => {
+        if (element.dataset.themeSwitchTo === theme) {
+          element.classList.add('d-none');
+        } else {
+          element.classList.remove('d-none');
+        }
+      });
+
+      localStorage.setItem('active_element-theme', theme);
+      document.querySelector('html').dataset.bsTheme = theme;
+    };
+
+
+    const initTheme = () => {
+      const theme = localStorage.getItem('active_element-theme') || 'light';
+      const themeSelectButtons = document.querySelector('#theme-select-buttons').children;
+
+      Object.entries(themeSelectButtons).forEach(([_, element]) => {
+        themeSelect.append(element);
+
+        element.addEventListener('click', (ev) => {
+          event.stopPropagation();
+          setTheme(element.dataset.themeSwitchTo);
+          return false;
+        });
+      });
+
+      setTheme(theme);
+    };
+
+    initTheme();
+  });
+})();