Skip to content

Commit

Permalink
WIP upgrading select2
Browse files Browse the repository at this point in the history
  • Loading branch information
@claravox
claravox committed Nov 2, 2023
1 parent 114c4eb commit 960f021
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 62 deletions.
125 changes: 69 additions & 56 deletions group_manager/static/group_manager/js/group_manager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -938,12 +938,20 @@ $(function () {
$groupProperties.find('.placeholder-text').addClass('hidden')
$groupProperties.find('form').removeClass('hidden')

const defaultCategory = new Option(group.category, group.category, true, true)
$groupProperties.find('#f-group-update-category')
.select2('data', { id: group.category, text: group.category })
.select2('readonly', !canEditCategory)
.append(defaultCategory).trigger('change')
// TODO added disabled back?
// .prop('disabled', !canEditCategory)
// .select2({
// data: [{ id: group.category, text: group.category }],
// disabled: !canEditCategory
// })
$groupProperties.find('#f-group-update-subcategory')
.select2('data', { id: group.subcategory, text: group.subcategory })
.select2('readonly', !userCanManage)
.select2({
data: [{ id: group.subcategory, text: group.subcategory }],
disabled: !userCanManage
})
$groupProperties.find('#inputGroupPrepend')
.html(function () {
const matches = groupName.match(that.GROUP_PREFIXES_RE, '')
Expand Down Expand Up @@ -983,15 +991,18 @@ $(function () {
// Creation date of this group
$groupProperties.find('#f-group-update-creation-date')
.val(group.creation_date)
.prop('readonly', true)
.prop('disabled', true)

if (that.prefixHasDataClassification(prefix)) {
$groupProperties.find('.data-classification').show()
$('#f-group-update-data-classification')
.select2('readonly', !userCanManage)
.prop('disabled', true)
// .select2({
// disabled: !userCanManage
// })
} else {
$groupProperties.find('.data-classification').hide()
$('#f-group-update-data-classification').select2('readonly', true)
$('#f-group-update-data-classification').prop('disabled', true)
}

if (group.data_classification === null) {
Expand Down Expand Up @@ -1175,27 +1186,25 @@ $(function () {

$(sel).filter('.selectify-category').each(function () {
const $el = $(this)

$el.attr(
'placeholder',
(that.isMemberOfGroup('priv-category-add') || that.isRodsAdmin)
? 'Select a category or enter a new name'
: 'Select a category'
)
const placeholder = (that.isMemberOfGroup('priv-category-add') || that.isRodsAdmin)
? 'Select a category or enter a new name'
: 'Select a category'

$el.select2({
placeholder,
ajax: {
quietMillis: 200,
url: '/group_manager/get_categories',
type: 'post',
dataType: 'json',
data: function (term, page) {
return { query: term }
data: function (params) {
return { query: params.term }
},
results: function (data) {
processResults: function (data, params) {
const categories = data.categories
const results = []
const query = $el.data('select2').search.val()
const query = params.term
console.log('Here is the query', query)
let inputMatches = false

// For legacy reasons we allow selecting existing categories with illegal names.
Expand Down Expand Up @@ -1249,26 +1258,28 @@ $(function () {
return { results }
}
},
formatResult: function (result, $container, query, escaper) {
return escaper(result.text) +
templateResult: function (result) {
// TODO how to escape this text as it was before?
return $('<span>' + result.text +
(
'exists' in result && !result.exists
? ' <span class="grey">(create)</span>'
: ''
)
},
initSelection: function ($el, callback) {
const cb = { id: $el.val(), text: $el.val() }
callback(cb)
) +
'</span>')
}
}).on('open', function () {
$(this).select2('val', '')
}).on('change', function () {
$($(this).attr('data-subcategory')).select2('val', '')
// initSelection: function ($el, callback) {
// const cb = { id: $el.val(), text: $el.val() }
// callback(cb)
// }
}).on('select2:open', function () {
$('select').val('')
}).on('select2:change', function () {
$($(this).attr('data-subcategory')).val('')

// bring over the category value to the schema-id if exists.
if (that.schemaIDs.includes($(this).select2('val'))) {
$('#f-group-create-schema-id').select2('val', $(this).select2('val'))
if (that.schemaIDs.includes($(this).val(''))) {
$('#f-group-create-schema-id').val('').trigger($(this).val(''))
}

if (this.id === 'f-group-create-category') {
Expand Down Expand Up @@ -1337,20 +1348,20 @@ $(function () {
return { results }
}
},
formatResult: function (result, $container, query, escaper) {
return escaper(result.text) +
templateResult: function (result) {
return result.text +
(
'exists' in result && !result.exists
? ' <span class="grey">(create)</span>'
: ''
)
},
initSelection: function ($el, callback) {
const cb = { id: $el.val(), text: $el.val() }
callback(cb)
}
// initSelection: function ($el, callback) {
// const cb = { id: $el.val(), text: $el.val() }
// callback(cb)
// }
}).on('open', function () {
$(this).select2('val', '')
$(this).val('')
})
})

Expand Down Expand Up @@ -1397,20 +1408,20 @@ $(function () {
return { results }
}
},
formatResult: function (result, $container, query, escaper) {
return escaper(result.text) +
templateResult: function (result) {
return result.text +
(
'exists' in result && !result.exists
? ' <span class="grey">(create)</span>'
: ''
)
},
initSelection: function ($el, callback) {
const cb = { id: $el.val(), text: $el.val() }
callback(cb)
}
// initSelection: function ($el, callback) {
// const cb = { id: $el.val(), text: $el.val() }
// callback(cb)
// }
}).on('open', function () {
$(this).select2('val', '')
$(this).val('')
}).on('change', function () {
})
})
Expand Down Expand Up @@ -1464,18 +1475,18 @@ $(function () {
return { results }
}
},
formatResult: function (result, $container, query, escaper) {
return escaper(result.text) +
templateResult: function (result) {
return result.text +
(
'exists' in result && !result.exists
? ' <span class="grey">(create)</span>'
: ''
)
},
initSelection: function ($el, callback) {
const cb = { id: $el.val(), text: $el.val() }
callback(cb)
}
// initSelection: function ($el, callback) {
// const cb = { id: $el.val(), text: $el.val() }
// callback(cb)
// }
}).on('open', function () {
$(this).select2('val', '')
})
Expand Down Expand Up @@ -1510,7 +1521,7 @@ $(function () {
userList.push({ id: 'user:' + uniqueUsers[val], text: uniqueUsers[val].split('#')[0] })
}

// only unique usernames
// only unique group names
const uniqueGroups = [...new Set(groupnames)]
uniqueGroups.sort()
const groupList = []
Expand All @@ -1524,12 +1535,14 @@ $(function () {
const $el = $(this)
$el.select2({
data,
placeholder: 'Click here to search...',
allowClear: true,
openOnEnter: false,
minimumInputLength: 3
}).on('open', function () {
$(this).select2('val', '')
}).on('change', function () {
}).on('select2:open', function () {
$(this).val('')
}).on('select2:change', function () {
console.log("Hey there! I am running on change")
treeListGroups()
flatListGroups()
})
Expand Down Expand Up @@ -1567,7 +1580,7 @@ $(function () {
)
}

// all now bases upon update-fields. Create dialog is discarded
// all now based upon update-fields. Create dialog is discarded
const newProperties = {
name: $('#f-group-' + action + '-name').attr('data-prefix') +
$('#f-group-' + action + '-name').val(),
Expand Down
6 changes: 6 additions & 0 deletions group_manager/static/group_manager/package.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"dependencies": {
"@ttskch/select2-bootstrap4-theme": "^1.5.2",
"select2": "^4.1.0-rc.0"
}
}
18 changes: 12 additions & 6 deletions group_manager/templates/group_manager/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@

{% block style %}
<link rel="stylesheet" href="{{ url_for('group_manager_bp.static', filename='css/group_manager.css') }}">
<link rel="stylesheet" href="{{ url_for('group_manager_bp.static', filename='lib/select2/select2.css') }}">
<link rel="stylesheet" href="{{ url_for('group_manager_bp.static', filename='lib/select2/select2-bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('group_manager_bp.static', filename='node_modules/select2/dist/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ url_for('group_manager_bp.static', filename='node_modules/@ttskch/select2-bootstrap4-theme/dist/select2-bootstrap4.min.css') }}">
{% endblock style %}

{% block scripts %}
<script src="{{ url_for('static', filename='lib/jquery-migrate-3.4.1/jquery-migrate-3.4.1.min.js') }}"></script>
<script src="{{ url_for('group_manager_bp.static', filename='js/group_manager.js') }}"></script>
<script src="{{ url_for('group_manager_bp.static', filename='lib/select2/select2.min.js') }}"></script>
<script src="{{ url_for('group_manager_bp.static', filename='node_modules/select2/dist/js/select2.full.js') }}"></script>
<script>
$(function() {
Yoda.groupManager.load({{ group_hierarchy | safe }}, {{ schema_ids | safe }}, '{{ schema_id_default }}', '{{ user_type }}', '{{ user_zone }}');
Expand Down Expand Up @@ -45,7 +45,9 @@ <h1>Group manager</h1>
</ul>
</div>
<div class="mb-1">
<input name="user_name" id="search" class="form-control form-control-sm selectify-search mt-1" type="hidden" required placeholder="Click here to search..."/>
<select name="user_name" id="search" class="form-control form-control-sm selectify-search mt-1" required>
<option></option>
</select>
</div>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane {% if show_list == "TREE" %} show active {% endif %}" id="pills-tree" role="tabpanel" aria-labelledby="pills-tree-tab">
Expand Down Expand Up @@ -223,7 +225,9 @@ <h1>Group manager</h1>
<i class="fa-solid fa-question-circle" aria-hidden="true" title="Category for this group (may only contain lowercase letters (a-z) and hyphens (-))"></i>
</label>
<div class="col-sm-8">
<input name="group_category" id="f-group-update-category" class="form-control selectify-category" type="hidden" placeholder="Select a category or enter a new name" required data-subcategory="#f-group-update-subcategory" />
<select name="group_category" id="f-group-update-category" class="form-control selectify-category" required data-subcategory="#f-group-update-subcategory">
<option></option>
</select>
</div>
</div>

Expand All @@ -232,7 +236,9 @@ <h1>Group manager</h1>
<i class="fa-solid fa-question-circle" aria-hidden="true" title="Subcategory for this group (may only contain letters a-z, numbers, spaces, comma's, periods, parentheses, underscores (_) and hyphens (-))"></i>
</label>
<div class="col-sm-8">
<input name="group_subcategory" id="f-group-update-subcategory" class="form-control selectify-subcategory" type="hidden" placeholder="Select a subcategory or enter a new name" required data-category="#f-group-update-category" />
<select name="group_subcategory" id="f-group-update-subcategory" class="form-control selectify-subcategory" placeholder="Select a subcategory or enter a new name" required data-category="#f-group-update-category">
<option></option>
</select>
</div>
</div>

Expand Down

0 comments on commit 960f021

Please sign in to comment.