search

magnet-cl / django-project-template

A project template for Django in python 3
MIT License
14 stars 8 forks source link

Feature/choicesjs #131

Closed jjjjota closed 2 years ago

jjjjota commented 2 years ago

Tareas relacionadas

Cambios realizados

1. Reemplazo de librería select2 por choices.js

Se instaló choices.js como reemplazo a select2.

Se añadieron estilos para que se viera lo más similar posible a un <select> con clase .form-select de Bootstrap, tomando como referencia adicional los estilos de la libería select2-bootstrap-5-theme y el diseño en la librería de diseño a la medida. Los estilos del menú desplegable, se crearon tal que se vea igual al menú de un dropdown porque suele ocurrir que ambos se diseñan igual.

Para que un <select> no se inicialice como Choices se le debe agregar la clase .js-not-choices.

Ejemplos .form-select:

<label for="formSelect">Form select</label>
<select id="formSelect" class="form-select js-not-choices">
  <option value="">Placeholder</option>
  <option value="1">Amet</option>
  <option value="2">Lorem</option>
  <option value="3">Sit</option>
</select>

<label for="formSelectGroups">Form select with <code>optgroup</code>s</label>
<select id="formSelectGroups" class="form-select js-not-choices">
  <option value="">Placeholder</option>
  <optgroup label="Group 1">
    <option value="1">Amet</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="2">Lorem</option>
    <option value="3">Sit</option>
  </optgroup>
</select>

<label for="formSelectDisabled">Form select <code>disabled</code></label>
<select id="formSelectDisabled" disabled="" class="form-select js-not-choices">
  <option value="">Placeholder</option>
  <option value="1">Amet</option>
  <option value="2">Lorem</option>
  <option value="3">Sit</option>
</select>

<label for="formSelectInvalid">Form select <code>.is-invalid</code></label>
<select id="formSelectInvalid" class="form-select is-invalid js-not-choices">
  <option value="">Placeholder</option>
  <option value="1">Amet</option>
  <option value="2">Lorem</option>
  <option value="3">Sit</option>
</select>

<label for="formSelectValid">Form select <code>.is-valid</code></label>
<select id="formSelectValid" class="form-select is-valid js-not-choices">
  <option value="">Placeholder</option>
  <option value="1">Amet</option>
  <option value="2">Lorem</option>
  <option value="3">Sit</option>
</select>

<div class="was-validated">
  <label for="formSelectValidated">Form select <code>.was-validated</code> support</label>
  <select id="formSelectValidated" required="" class="form-select js-not-choices">
    <option value="">Placeholder</option>
    <option value="1">Amet</option>
    <option value="2">Lorem</option>
    <option value="3">Sit</option>
  </select>
</div>

Ejemplos Choices:

<label for="choicesSingle">Choices</label>
<select id="choicesSingle">
  <option value="">Placeholder</option>
  <option value="1">Amet</option>
  <option value="2">Lorem</option>
  <option value="3">Sit</option>
</select>

<label for="choicesSingleGroups">Choices with <code>optgroup</code>s</label>
<select id="choicesSingleGroups">
  <option value="">Placeholder</option>
  <optgroup label="Group 1">
    <option value="1">Amet</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="2">Lorem</option>
    <option value="3">Sit</option>
  </optgroup>
</select>

<label for="choicesSingleDisabled">Choices <code>disabled</code></label>
<select id="choicesSingleDisabled" disabled="disabled">
  <option value="">Placeholder</option>
  <option value="1">Amet</option>
  <option value="2">Lorem</option>
  <option value="3">Sit</option>
</select>

<label for="choicesSingleInvalid">Choices <code>.is-invalid</code></label>
<select class="is-invalid" id="choicesSingleInvalid">
  <option value="">Placeholder</option>
  <option value="1">Amet</option>
  <option value="2">Lorem</option>
  <option value="3">Sit</option>
</select>

<label for="choicesSingleValid">Choices <code>.is-valid</code></label>
<select class="is-valid" id="choicesSingleValid">
  <option value="">Placeholder</option>
  <option value="1">Amet</option>
  <option value="2">Lorem</option>
  <option value="3">Sit</option>
</select>

<div class="was-validated">
  <label for="choicesSingleValidated">Choices <code>.was-validated</code> support</label>
  <select id="choicesSingleValidated" required="required">
    <option value="">Placeholder</option>
    <option value="1">Amet</option>
    <option value="2">Lorem</option>
    <option value="3">Sit</option>
  </select>
</div>

Ejemplos Choices multiple:

<label for="choicesMultiple">Choices multiple</label>
<select id="choicesMultiple" multiple="multiple">
  <option value="">Placeholder</option>
  <option value="1">Amet</option>
  <option value="2">Lorem</option>
  <option value="3">Sit</option>
</select>

<label for="choicesMultiplePreselected">Choices multiple with pre selected options</label>
<select id="choicesMultiplePreselected" multiple="multiple">
  <option value="">Placeholder</option>
  <option value="1" selected="selected">Amet</option>
  <option value="2" selected="selected">Lorem</option>
  <option value="3">Sit</option>
</select>

<label for="choicesMultipleDisabled">Choices multiple <code>disabled</code></label>
<select id="choicesMultipleDisabled" multiple="multiple" disabled="disabled">
    <option value="">Placeholder</option>
  <option value="1">Amet</option>
  <option value="2">Lorem</option>
  <option value="3">Sit</option>
</select>

<label for="choicesMultiplePreselectedDisabled">Choices multiple with pre selected options <code>disabled</code></label>
<select id="choicesMultiplePreselectedDisabled" multiple="multiple" disabled="disabled">
  <option value="">Placeholder</option>
  <option value="1" selected="selected">Amet</option>
  <option value="2" selected="selected">Lorem</option>
  <option value="3">Sit</option>
</select>

<label for="choicesMultipleInvalid">Choices multiple <code>.is-invalid</code></label>
<select class="is-invalid" id="choicesMultipleInvalid" multiple="multiple">
  <option value="">Placeholder</option>
  <option value="1">Amet</option>
  <option value="2">Lorem</option>
  <option value="3">Sit</option>
</select>

<label for="choicesMultipleValid">Choices multiple <code>.is-valid</code></label>
<select class="is-valid" id="choicesMultipleValid" multiple="multiple">
  <option value="">Placeholder</option>
  <option value="1">Amet</option>
  <option value="2">Lorem</option>
  <option value="3">Sit</option>
</select>

<div class="was-validated">
  <label for="choicesMultipleValidated">Choices multiple <code>.was-validated</code> support</label>
  <select id="choicesMultipleValidated" multiple="multiple" required="required">
    <option value="">Placeholder</option>
    <option value="1">Amet</option>
    <option value="2">Lorem</option>
    <option value="3">Sit</option>
  </select>
</div>

2. Input vinculado de región y comunas

Se migró el uso de select2 a choices.js. Para que se inicialicen correctamente, el <select> de regiones debe tener id igual a id_region y el id del de comunas debe ser igual a id_commune.

Snippet de ejemplo:

<select id="id_region">
  <option value="">Select region</option>
  <option value="1">Region 1</option>
  <option value="2">Region 2</option>
</select>
<select id="id_commune">
  <option value="">Select commune</option>
</select>