combo/apps/dataviz/forms.py

@@ -25,12 +25,12 @@ from django.db.models import Q
 from django.db.models.fields import BLANK_CHOICE_DASH
 from django.template import Context, Template, TemplateSyntaxError, VariableDoesNotExist
 from django.utils.translation import gettext_lazy as _
+from gadjo.forms.widgets import MultiSelectWidget
 
 from combo.utils import cache_during_request, requests, spooler
 
 from .fields import StaticField
 from .models import ChartCell, ChartFiltersCell, ChartNgCell
-from .widgets import MultiSelectWidget
 
 
 class ChartForm(forms.ModelForm):

combo/apps/dataviz/models.py

@@ -776,8 +776,8 @@ class ChartFiltersCell(CellBase):
         verbose_name = _('Filters')
 
     class Media:
-        js = ('js/combo.multiselectwidget.js',)
-        css = {'all': ('css/combo.multiselectwidget.css',)}
+        js = ('js/gadjo.multiselectwidget.js',)
+        css = {'all': ('css/gadjo.multiselectwidget.css',)}
 
     @classmethod
     def is_enabled(cls):

combo/apps/dataviz/static/css/combo.multiselectwidget.scss

@@ -1,31 +0,0 @@
-.combo-multi-select-widget--field {
-      margin-bottom: 0.2em;
-}
-
-.combo-multi-select-widget--select-button-container {
-      display: flex;
-      gap: 0.5em;
-}
-
-.combo-multi-select-widget--field select {
-      min-width: 0;
-}
-
-.combo-multi-select-widget--field button {
-      margin-top: auto;
-      margin-bottom: auto;
-}
-
-.combo-multi-select-widget--field:first-of-type button.combo-multi-select-widget--button-remove {
-      display: none;
-}
-
-button.combo-multi-select-widget--button-add::before {
-      content: "\f067"; /* plus */
-      font-family: FontAwesome;
-}
-
-button.combo-multi-select-widget--button-remove::before {
-      content: "\f068"; /* minus */
-      font-family: FontAwesome;
-}

combo/apps/dataviz/static/js/combo.multiselectwidget.js

@@ -1,69 +0,0 @@
-const multiSelectWidget = (function () {
-
-  const add_row = function(widget) {
-    event.preventDefault();
-
-    /* get last row node */
-    const rows = widget.querySelectorAll('.combo-multi-select-widget--field');
-    const $last_row = $(rows).last();
-
-    /* clone the row */
-    const $new_row = $last_row.clone();
-
-    /* set new label and ids */
-    const row_label = widget.dataset.rowLabel;
-    const new_label = row_label + ' ' + rows.length;
-    $new_row.find('label').text(new_label);
-
-    const row_id = widget.dataset.rowId;
-    const new_id = row_id + '_' + rows.length;
-    $new_row.find('label').attr('for', new_id);
-    $new_row.find('select').attr('id', new_id);
-
-    /* add new row after the last row */
-    $last_row.after($new_row);
-    $('.combo-multi-select-widget--button-remove', $new_row).click(remove_row);
-  }
-
-  const remove_row = function(event) {
-    event.preventDefault();
-    var $field = $(this).parents('.content');
-    var $row = $(this).parents('.combo-multi-select-widget--field');
-    $row.remove();
-    $field.change();
-  }
-
-  const init = function(cell) {
-    const widgets = cell.querySelectorAll('.combo-multi-select-widget');
-    if (!widgets.length) return;
-
-    widgets.forEach(function(widget){
-      const deletBtn = widget.querySelectorAll('.combo-multi-select-widget--button-remove');
-      const addBtn = widget.querySelectorAll('.combo-multi-select-widget--button-add');
-
-      $(addBtn).off('click');
-      $(addBtn).click( () => add_row(widget) );
-      $(deletBtn).off('click');
-      $(deletBtn).click(remove_row);
-    });
-  }
-
-  return {
-    init
-  }
-
-})();
-
-$(function() {
-  $('.cell').each(function(i, cell) {
-    multiSelectWidget.init(cell);
-  });
-
-  $(document).on('combo:cell-loaded', function(e, cell) {
-    multiSelectWidget.init(cell);
-  });
-
-  $('.cell').on('combo:cellform-reloaded', function() {
-    multiSelectWidget.init(this);
-  });
-});

combo/apps/dataviz/templates/combo/widgets/multiselectwidget.html

@@ -1,17 +0,0 @@
-{% load i18n %}
-
-<div class="combo-multi-select-widget" data-row-id="{{ widget.name }}" data-row-label="{% trans "Value" %}">
-  <div class="combo-multi-select-widget--fields" role="group" aria-labelledby="{{ widget.name }}_title">
-    {% for widget in widget.subwidgets %}
-      <div class="combo-multi-select-widget--field">
-        <label for="{{ widget.name }}_{{ forloop.counter }}" class="sr-only">{% trans "Value" %} {{ forloop.counter }}</label>
-        <div class="combo-multi-select-widget--select-button-container">
-          {% include widget.template_name %}
-          <button type="button" name="{{ widget.name }}$remove_element" class="combo-multi-select-widget--button-remove" title="{% trans "Remove" %}" aria-label="{% trans "Remove value" %} {{ forloop.counter }}"></button>
-        </div>
-      </div>
-    {% endfor %}
-  </div>
-
-  <button type="button" name="{{ widget.name }}$add_element" class="combo-multi-select-widget--button-add" title="{% trans "Add" %}" aria-label="{% trans "Add" %}"></button>
-</div>

combo/apps/dataviz/widgets.py

@@ -1,38 +0,0 @@
-from django import forms
-
-
-class MultiSelectWidget(forms.MultiWidget):
-    template_name = 'combo/widgets/multiselectwidget.html'
-
-    class Media:
-        js = ('js/combo.multiselectwidget.js',)
-        css = {'all': ('css/combo.multiselectwidget.css',)}
-
-    def __init__(self, attrs=None):
-        self.attrs = attrs
-        widgets = [forms.Select(attrs=attrs)]
-        super().__init__(widgets, attrs)
-
-    def get_context(self, name, value, attrs):
-        if not isinstance(value, list):
-            value = [value]
-
-        self.widgets = []
-        for _ in range(max(len(value), 1)):
-            self.widgets.append(forms.Select(attrs=self.attrs, choices=self.choices))
-
-        # all subwidgets must have the same name
-        self.widgets_names = [''] * len(self.widgets)
-        return super().get_context(name, value, attrs)
-
-    def decompress(self, value):
-        return value or []
-
-    def value_from_datadict(self, data, files, name):
-        values = [x for x in data.getlist(name) if x]
-
-        # remove duplicates while keeping order
-        return list(dict.fromkeys(values))
-
-    def id_for_label(self, id_):
-        return id_

combo/manager/static/js/combo.manager.js

@@ -463,6 +463,10 @@ $(function() {
       $('#linked-card-variable span[data-key="' + $(this).val() + '"]').show();
     }
   });
+
+  $('.cell').on('combo:cellform-reloaded', function() {
+    multiSelectWidget.init(this);
+  });
 });
 
 

combo/manager/templates/combo/manager_base.html

@@ -5,7 +5,7 @@
   <link rel="stylesheet" type="text/css" media="all" href="{% static "css/combo.manager.css" %}"/>
   <link rel="stylesheet" type="text/css" media="all" href="{% static "xstatic/leaflet.css" %}"/>
   <link rel="stylesheet" type="text/css" media="all" href="{% static "css/combo.map.css" %}"/>
-  <link rel="stylesheet" type="text/css" media="all" href="{% static "css/combo.multiselectwidget.css" %}"/>
+  <link rel="stylesheet" type="text/css" media="all" href="{% static "css/gadjo.multiselectwidget.css" %}"/>
 {% endblock %}
 {% block page-title %}{% firstof site_title "Combo" %}{% endblock %}
 {% block site-title %}{% firstof site_title "Combo" %}{% endblock %}
@@ -35,6 +35,6 @@
   <script src="{% static "js/combo.manager.js" %}"></script>
   <script src="{% static "xstatic/leaflet.js" %}"></script>
   <script src="{% static "js/combo.map.js" %}"></script>
-  <script src="{% static "js/combo.multiselectwidget.js" %}"></script>
+  <script src="{% static "js/gadjo.multiselectwidget.js" %}"></script>
   <script src="{% url "javascript-catalog" %}"></script>
 {% endblock %}

combo/public/static/js/combo.public.js

@@ -438,4 +438,8 @@ $(function() {
   }
   $('.contains-hidden-elements').mouseenter(reset_hidden_elements, null)
   $('.contains-hidden-elements').focusin(reset_hidden_elements)
+
+  $(document).on('combo:cell-loaded', function(e, cell) {
+    multiSelectWidget.init(cell);
+  });
 });