Skip to content

Commit 9246bd1

Browse files
tc-imbatc-imba
committed
feature: multiple select code languages (with select2)
1 parent dee648f commit 9246bd1

File tree

5 files changed

+87
-16
lines changed

5 files changed

+87
-16
lines changed

‎vj4/handler/problem.py

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -609,18 +609,18 @@ def split_tags(self, s):
609609

610610
@base.require_priv(builtin.PRIV_USER_PROFILE)
611611
@base.route_argument
612-
@base.post_argument
612+
@base.multi_post_argument
613613
@base.require_csrf_token
614614
@base.sanitize
615615
async def post(self, *, pid: document.convert_doc_id, hidden: bool=False,
616-
category: str, tag: str, languages: str,
616+
category: str, tag: str, languages: list,
617617
difficulty_setting: int, difficulty_admin: str=''):
618618
pdoc = await problem.get(self.domain_id, pid)
619619
if not self.own(pdoc, builtin.PERM_EDIT_PROBLEM_SELF):
620620
self.check_perm(builtin.PERM_EDIT_PROBLEM)
621621
category = self.split_tags(category)
622622
tag = self.split_tags(tag)
623-
_languages = self.split_tags(languages)
623+
_languages = (await self.request.post()).getall('languages', [])
624624
languages = []
625625
for lang in _languages:
626626
if constant.language.LANG_TEXTS.get(lang):

‎vj4/ui/components/form/select.page.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { AutoloadPage } from 'vj/misc/PageLoader';
22
import 'select2';
3+
import 'select2/dist/css/select2.css';
34

45
const selectPage = new AutoloadPage('selectPage', () => {
5-
console.log(1);
6+
$('.select.select2').select2();
67
});
78

89
export default selectPage;

‎vj4/ui/components/form/select.page.styl

Lines changed: 50 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,7 @@
11
@import './var.inc.styl'
22

3-
.select
3+
.select, .select2-selection__rendered
44
form-styles()
5-
padding-right: 1.1rem
6-
background-color: $input-background-color
7-
background-image: url('~vj/misc/icons/' + $icon-expand_more-file)
8-
background-size: 16px 16px
9-
background-position: right -1rem center
10-
background-origin: content-box
11-
background-repeat: no-repeat
125
outline: $input-outline
136
transition: outline-color .2s, border-color .2s
147
transition-timing-function: ease-out-cubic
@@ -21,9 +14,58 @@
2114
&:disabled
2215
opacity: 0.5
2316

17+
.select, .select2-selection__arrow
18+
background-color: $input-background-color
19+
background-image: url('~vj/misc/icons/' + $icon-expand_more-file)
20+
background-size: 16px 16px
21+
background-origin: content-box
22+
background-repeat: no-repeat
23+
24+
.select
25+
padding-right: 1.1rem
26+
background-position: right -1rem center
27+
28+
.select2-selection__arrow
29+
height: 80% !important
30+
top: 10% !important
31+
background-position: center
32+
2433
.select-container.compact .select, .select.compact
2534
margin-bottom: 0
2635
height: rem($compact-control-height)
2736
line-height: rem($compact-control-height - 2)
2837
padding-top: 0
2938
padding-bottom: 0
39+
40+
.select2-container
41+
width: 100% !important
42+
height: rem($form-control-height)
43+
margin: $input-margin
44+
45+
.select2-container .selection, .select2-selection
46+
width: 100% !important
47+
height: 100% !important
48+
49+
.select2-selection
50+
border: 0 !important
51+
52+
.select2-selection__rendered
53+
padding: rem(5px) !important
54+
line-height: rem($form-control-height - 12px) !important
55+
56+
.select2-dropdown, .select2-search__field
57+
border: $input-border !important
58+
59+
.select2-selection__arrow b
60+
display: none
61+
62+
.select2-selection__choice
63+
margin-top: 0 !important
64+
65+
.select2-search--inline
66+
height: 100% !important
67+
68+
.select2-search__field
69+
height: 100% !important
70+
border: 0 !important
71+
margin-top: 0 !important

‎vj4/ui/templates/components/form.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
{% set autofocus = kwargs.pop('autofocus', false) %}
5050
{% set date = kwargs.pop('date', false) %}
5151
{% set time = kwargs.pop('time', false) %}
52+
{% set extra_class = kwargs.pop('extra_class', none) %}
5253
class="{{ form_class }}{% if extra_class %} {{ extra_class }}{% endif %}"
5354
{% if disabled %}disabled{% endif %}
5455
{% if required %}required{% endif %}
@@ -86,6 +87,34 @@
8687
{{ form_end(columns=columns, **kwargs) }}
8788
{% endmacro %}
8889

90+
{% macro select2(options, name='', value=[], multiple=false) %}
91+
{% if not value is sequence or value is string %}
92+
{% set value = [value] %}
93+
{% endif %}
94+
<div
95+
name="form_item_{{ name }}"
96+
{{ container_attr('select-container', **kwargs) }}
97+
>
98+
<select
99+
name="{{ name }}"
100+
{{ form_attr('select select2', **kwargs) }}
101+
{% if multiple %} multiple="multiple" {% endif %}
102+
>
103+
{% for k, v in options %}
104+
<option value="{{ k }}"{% if k in value %} selected{% endif %}>
105+
{{ _(v) }}
106+
</option>
107+
{% endfor %}
108+
</select>
109+
</div>
110+
{% endmacro %}
111+
112+
{% macro form_select2(columns=5) %}
113+
{{ form_begin(columns=columns, **kwargs) }}
114+
{{ select2(columns=columns, **kwargs) }}
115+
{{ form_end(columns=columns, **kwargs) }}
116+
{% endmacro %}
117+
89118
{% macro radio(options, name='', value='') %}
90119
<div
91120
name="form_item_{{ name }}"

‎vj4/ui/templates/problem_settings.html

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,17 +24,16 @@ <h1 class="section__title">{{ _('Settings') }}</h1>
2424
{{ form.form_text(columns=12, label='Category', help_text='Format: category 1, sub category 1.1, sub category 1.2, ..., sub category 1.x, ..., category n, sub category n.1, sub category n.2, ..., sub category n.m, ...', name='category', value=pdoc['category']|join(', ')) }}
2525
{{ form.form_text(columns=12, label='Tags', help_text='Splitted by \', \'.', name='tag', value=pdoc['tag']|join(', ')) }}
2626
<div class="row">
27-
{{ form.form_select(columns=4, label='Difficulty', name='difficulty_setting', options=vj4.model.adaptor.problem.SETTING_DIFFICULTY_RANGE.items(), value=pdoc['difficulty_setting']|default(0), row=false) }}
27+
{{ form.form_select2(columns=4, label='Difficulty', name='difficulty_setting', options=vj4.model.adaptor.problem.SETTING_DIFFICULTY_RANGE.items(), value=pdoc['difficulty_setting']|default(0), row=false) }}
2828
{{ form.form_text(columns=4, label='Evaluated difficulty', help_text='Effects only when Difficulty is not \'Use algorithm calculated\'.', name='difficulty_admin', placeholder='9', value=pdoc['difficulty_admin'] or '', row=False) }}
2929
<div class="medium-4 columns">
3030
<p class="help-text">{{ _('Difficulty displayed') }}: {{ pdoc['difficulty'] or _('(None)') }}</p>
3131
<p class="help-text">{{ _('Difficulty by algorithm') }}: {{ pdoc['difficulty_algo'] or _('(None)') }}</p>
3232
<p class="help-text">{{ _('Difficulty by admin') }}: {{ pdoc['difficulty_admin'] or _('(None)') }}</p>
3333
</div>
3434
</div>
35-
{# {{ form.form_text(columns=12, label='Code languages', help_text='Splitted by \', \'. Will support selection later.', name='languages', value=pdoc['languages']|join(', ')) }}#}
36-
{{ form.form_select(columns=12, label='Code languages', name='languages', options=vj4.constant.language.LANG_TEXTS.items(),
37-
value=pdoc['languages']|join(', ')) }}
35+
{{ form.form_select2(columns=12, label='Code languages', name='languages', options=vj4.constant.language.LANG_TEXTS.items(),
36+
value=pdoc['languages'], multiple=true) }}
3837
<div class="row"><div class="columns">
3938
<input type="hidden" name="csrf_token" value="{{ handler.csrf_token }}">
4039
<button type="submit" class="rounded primary button">

0 commit comments

Comments
 (0)