Passed
Pull Request — 1.11.x (#4368)
by Angel Fernando Quiroz
18:36 queued 08:28
created

SelectAjax::templateResultForUsersInCourse()   A

Complexity

Conditions 1
Paths 1

Size

Total Lines 3
Code Lines 1

Duplication

Lines 0
Ratio 0 %

Importance

Changes 1
Bugs 0 Features 0
Metric Value
eloc 1
c 1
b 0
f 0
dl 0
loc 3
rs 10
cc 1
nc 1
nop 0
1
<?php
2
3
/* For licensing terms, see /license.txt */
4
5
/**
6
 * A drop down list with all languages to use with QuickForm.
7
 */
8
class SelectAjax extends HTML_QuickForm_select
9
{
10
    /**
11
     * {@inheritdoc}
12
     */
13
    public function __construct($elementName, $elementLabel = '', $options = null, $attributes = null)
14
    {
15
        parent::__construct($elementName, $elementLabel, $options, $attributes);
16
    }
17
18
    /**
19
     * The ajax call must contain an array of id and text.
20
     *
21
     * @return string
22
     */
23
    public function toHtml()
24
    {
25
        $iso = api_get_language_isocode(api_get_interface_language());
26
        $formatResult = $this->getAttribute('formatResult');
27
        $formatSelection = $this->getAttribute('formatSelection');
28
        $formatCondition = '';
29
30
        if (!empty($formatResult)) {
31
            $formatCondition .= ',
32
                templateResult : '.$formatResult;
33
        }
34
35
        if (!empty($formatSelection)) {
36
            $formatCondition .= ',
37
                templateSelection : '.$formatSelection;
38
        }
39
40
        $width = 'element';
41
        $givenWidth = '100%';
42
        if (!empty($givenWidth)) {
43
            $width = $givenWidth;
44
        }
45
46
        //Get the minimumInputLength for select2
47
        $minimumInputLength = $this->getAttribute('minimumInputLength') > 3 ?
48
            $this->getAttribute('minimumInputLength') : 3
49
        ;
50
51
        $plHolder = $this->getAttribute('placeholder');
52
        if (empty($plHolder)) {
53
            $plHolder = preg_replace("/'/", "\\'", get_lang('SelectAnOption'));
54
        }
55
56
        $id = $this->getAttribute('id');
57
58
        if (empty($id)) {
59
            $id = $this->getAttribute('name');
60
            $this->setAttribute('id', $id);
61
        }
62
        // URL must return ajax json_encode arrady [items => [['id'=>1, 'text'='content']]
63
        $url = $this->getAttribute('url');
64
65
        if (!$url) {
66
            $url = $this->getAttribute('url_function');
67
        } else {
68
            $url = "'$url'";
69
        }
70
71
        $tagsAttr = $this->getAttribute('tags');
72
        $multipleAttr = $this->getAttribute('multiple');
73
74
        $tags = !empty($tagsAttr) ? (bool) $tagsAttr : false;
75
        $tags = $tags ? 'true' : 'false';
76
77
        $multiple = !empty($multipleAttr) ? (bool) $multipleAttr : false;
78
        $multiple = $multiple ? 'true' : 'false';
79
80
        $max = $this->getAttribute('maximumSelectionLength');
81
        $max = !empty($max) ? "maximumSelectionLength: $max, " : '';
82
83
        // wait XX milliseconds before triggering the request
84
        $delay = ((int) $this->getAttribute('delay')) ?: 1000;
85
86
        $html = <<<JS
87
            <script>
88
                $(function(){
89
                    $('#{$this->getAttribute('id')}').select2({
90
                        language: '$iso',
91
                        placeholder: '$plHolder',
92
                        allowClear: true,
93
                        width: '$width',
94
                        minimumInputLength: '$minimumInputLength',
95
                        tags: $tags,
96
                        ajax: {
97
                            url: $url,
98
                            delay: $delay,
99
                            dataType: 'json',
100
                            data: function(params) {
101
                                return {
102
                                    q: params.term, // search term
103
                                    page_limit: 10,
104
                                };
105
                            },
106
                            processResults: function (data, page) {
107
                                // Parse the results into the format expected by Select2
108
                                if (data.items) {
109
                                    return {
110
                                        results: data.items
111
                                    };
112
                                }
113
                                return {
114
                                    results: ''
115
                                };
116
                            }
117
                        }
118
                        $formatCondition
119
                    });
120
                });
121
            </script>
122
JS;
123
124
        $this->removeAttribute('formatResult');
125
        $this->removeAttribute('formatSelection');
126
        $this->removeAttribute('minimumInputLength');
127
        $this->removeAttribute('maximumSelectionLength');
128
        $this->removeAttribute('tags');
129
        $this->removeAttribute('placeholder');
130
        $this->removeAttribute('class');
131
        $this->removeAttribute('url');
132
        $this->removeAttribute('url_function');
133
        $this->setAttribute('style', 'width: 100%;');
134
135
        return parent::toHtml().$html;
136
    }
137
138
    /**
139
     * We check the options and return only the values that _could_ have been
140
     * selected. We also return a scalar value if select is not "multiple".
141
     */
142
    public function exportValue(&$submitValues, $assoc = false)
143
    {
144
        $value = $this->_findValue($submitValues);
145
146
        if (!$value) {
147
            $value = '';
148
        }
149
150
        return $this->_prepareValue($value, $assoc);
151
    }
152
153
    public static function templateResultForUsersInCourse(): string
154
    {
155
        return "function (state) {
156
                if (state.loading) {
157
                    return state.text;
158
                }
159
160
                var \$container = \$(
161
                    '<div class=\"select2-result-user clearfix\">' +
162
                        '<div class=\"select2-result-user__avatar pull-left\">' +
163
                            '<img>' +
164
                        '</div>' +
165
                        '<div class=\"select2-result-user__info pull-left\">' +
166
                            '<div class=\"select2-result-user__name\"></div>' +
167
                            '<div class=\"select2-result-user__username small\"></div>' +
168
                        '</div>' +
169
                    '</div>'
170
                );
171
172
                \$container.find('.select2-result-user__avatar img')
173
                    .prop({ 'src': state.avatarUrl, 'alt': state.username })
174
                    .css({ 'width': '40px', 'height': '40px' });
175
                \$container.find('.select2-result-user__info').css({ 'paddingLeft': '6px' });
176
                \$container.find('.select2-result-user__name').text(state.completeName);
177
                \$container.find('.select2-result-user__username').text(state.username);
178
179
                return \$container;
180
            }";
181
    }
182
183
    public static function templateSelectionForUsersInCourse(): string
184
    {
185
        return "function (state) {
186
                if (!state.id) {
187
                    return state.text;
188
                }
189
    
190
                if (!state.avatarUrl) {
191
                    var avatarUrl = $(state.element).data('avatarurl');
192
                    var username = $(state.element).data('username');
193
                    
194
                    state.avatarUrl = avatarUrl;
195
                    state.username = username;
196
                    state.completeName = state.text;
197
                }
198
    
199
                var \$container = \$('<span><img> ' + state.completeName + '</span>');
200
    
201
                \$container.find('img')
202
                    .prop({ 'src': state.avatarUrl, 'alt': state.username })
203
                    .css({ 'width': '20px', 'height': '20px' });
204
    
205
                return \$container;
206
            }";
207
    }
208
}
209