Skip to content

Commit

Permalink
Bump select2 version up (naver#900)
Browse files Browse the repository at this point in the history 
* Bump select2 version up to 4.0.13

* Change to determine width by custom style property

* Remove unused select2 library files

* Apply validation error CSS style

* Fix Select2 event binding

* Fix multiple select option

* Fix UserSwitchModal

* Fix reset by select2 change event

* Remove unnecessary condition

* Treat script empty option as invalid
  • Loading branch information
@imbyungjun
imbyungjun authored Sep 30, 2022
1 parent 1aba1ad commit fdff3c0
Show file tree
Hide file tree
Showing 14 changed files with 141 additions and 726 deletions.
20 changes: 8 additions & 12 deletions ngrinder-controller/src/main/java/org/ngrinder/user/service/UserService.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,11 @@

import javax.annotation.PostConstruct;
import java.time.Instant;
import java.util.ArrayList;
import java.util.List;
import java.util.Objects;

import static java.time.Instant.now;
import static java.util.stream.Collectors.toList;
import static org.apache.commons.lang.StringUtils.isBlank;
import static org.hibernate.Hibernate.initialize;
import static org.ngrinder.common.constant.CacheConstants.DIST_CACHE_USERS;
Expand Down Expand Up @@ -151,7 +152,7 @@ public User save(User user) {
@CachePut(value = DIST_CACHE_USERS, key = "#user.userId")
@Override
public User saveWithoutPasswordEncoding(User user) {
final List<User> followers = getFollowers(user.getFollowersStr());
final List<User> followers = getFollowers(user.getFollowerIds());
user.setFollowers(followers);

User savedUser = saveWithoutFollowers(user);
Expand Down Expand Up @@ -191,16 +192,11 @@ private void prepareUserEnv(User user) {
}


private List<User> getFollowers(String followersStr) {
List<User> newShareUsers = new ArrayList<>();
String[] userIds = StringUtils.split(StringUtils.trimToEmpty(followersStr), ',');
for (String userId : userIds) {
User shareUser = userRepository.findOneByUserId(userId.trim());
if (shareUser != null) {
newShareUsers.add(shareUser);
}
}
return newShareUsers;
private List<User> getFollowers(List<String> followerIds) {
return followerIds.stream()
.map(userId -> userRepository.findOneByUserId(userId.trim()))
.filter(Objects::nonNull)
.collect(toList());
}

/**
Expand Down
2 changes: 1 addition & 1 deletion ngrinder-core/src/main/java/org/ngrinder/model/User.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ public class User extends BaseModel<User> {
private User follower;

@Transient
private String followersStr;
private List<String> followerIds;

@Transient
private User ownerUser;
Expand Down
2 changes: 1 addition & 1 deletion ngrinder-frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"license": "ISC",
"dependencies": {
"html-entities": "1.3.1",
"select2": "^3.5.1",
"select2": "^4.0.13",
"axios": "^0.21.1",
"base64-js": "^1.2.1",
"billboard.js": "^1.11.0",
Expand Down
20 changes: 0 additions & 20 deletions ngrinder-frontend/src/js/components/Base.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,20 +147,6 @@
max-height: 100%;
overflow: hidden;
}
.error {
.select2-choice {
border-color: @error-color;
span {
color: @error-color;
}
}
[data-toggle="dropdown"] {
border-color: @error-color;
color: @error-color;
}
}
}
.introjs-helperNumberLayer {
Expand Down Expand Up @@ -209,12 +195,6 @@
}
}
.select2-container {
.select2-default {
color: #777 !important;
}
}
.modal-dialog {
.modal-body {
word-break: break-all;
Expand Down
81 changes: 56 additions & 25 deletions ngrinder-frontend/src/js/components/common/Select2.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template>
<span v-if="type === 'select'">
<select v-if="multiple" ref="select2" v-model="value" :style="customStyle" :name="name"></select>
<span v-else>
<select ref="select2"
:style="customStyle"
:name="name"
Expand All @@ -9,25 +10,24 @@
</select>
<div v-show="errors.has(name)" class="validation-message" v-text="errors.first(name)" :style="errStyle"></div>
</span>
<input v-else ref="select2" v-model="value" :style="customStyle" :name="name">
</template>

<script>
import Vue from 'vue';
import Component from 'vue-class-component';
import { Inject } from 'vue-property-decorator';
import 'select2';
import 'select2/select2.css';
import 'select2/dist/js/select2.full.js';
import 'select2/dist/css/select2.css';
@Component({
props: {
value: {
type: String,
type: [String, Array],
required: true,
},
type: {
type: String,
default: 'select',
multiple: {
type: Boolean,
default: false,
},
option: {
type: Object,
Expand All @@ -51,44 +51,75 @@
const self = this;
$(this.$refs.select2)
.select2(this.option, [])
.change(function() {
self.$emit('input', this.value);
.on('change', () => {
self.$emit('input', $(self.$refs.select2).val());
self.$emit('change');
if (self.type === 'select') {
if (!self.multiple) {
self.$nextTick(() => self.$validator.validate(self.name));
}
})
.on('select2-opening', () => self.$emit('opening'));
.on('select2:opening', () => self.$emit('opening'));
if (self.multiple && this.value) {
const initFunction = this.option.initSelect2 || (() => []);
const options = initFunction();
options.forEach(option => $(this.$refs.select2).append(option));
$(this.$refs.select2).trigger('change');
}
}
selectValue(value) {
$(this.$refs.select2).select2('val', value);
$(this.$refs.select2).val(value);
$(this.$refs.select2).trigger('change');
this.$emit('input', value);
}
getSelectedOption(key) {
return this.$refs.select2.options[this.selectedIndex()].dataset[key];
}
selectedIndex() {
return this.$refs.select2.options.selectedIndex;
return $(this.$refs.select2).find(':selected')[0].dataset[key];
}
refreshDropDown() {
$(this.$refs.select2).select2('search', '');
$(this.$refs.select2).select2('close');
$(this.$refs.select2).select2('open');
}
}
</script>

<style lang="less">
.select2-container {
.select2-choice {
height: 30px !important;
@error-color: #d9534f;
#ngrinder {
.select2-container .select2-selection--single {
height: 30px;
}
}
.select2-no-results, .select2-input {
font-size: 12px;
.error {
.dropdown {
button {
border: 1px solid @error-color;
&.show-placeholder {
color: @error-color;
}
}
}
.select2-selection {
border-color: @error-color;
span {
color: @error-color;
}
b {
border-color: @error-color transparent;
}
}
}
.select2-no-results, .select2-input {
font-size: 12px;
}
}
</style>
24 changes: 13 additions & 11 deletions ngrinder-frontend/src/js/components/common/navigator/modal/UserSwitchModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,17 @@
<div class="modal-body pt-0">
<fieldset>
<control-group labelMessageKey="user.switch.title">
<select2 v-if="isAdmin" :option="option" type="input" v-model="switchTargetUserId" @change="switchUser"></select2>
<select2 v-else v-model="switchTargetUserId" @change="switchUser">
<option value=""></option>
<select2 v-if="isAdmin"
customStyle="width: 310px;"
:option="option"
type="input"
v-model="switchTargetUserId"
@change="switchUser">
</select2>
<select2 v-else
customStyle="width: 310px;"
v-model="switchTargetUserId"
@change="switchUser">
<option v-for="user in switchableUsers" :value="user.userId">{{ user | userDescription }}</option>
</select2>
</control-group>
Expand Down Expand Up @@ -47,17 +55,15 @@
url: `${this.contextPath}/user/api/switch_options`,
dataType: 'json',
quietMillis: 1000,
data: term => ({ keywords: term }),
results: users => {
data: params => ({ keywords: params.term }),
processResults: users => {
const select2Data = users.map(user => ({
id: user.userId,
text: userDescription(user),
}));
return { results: select2Data };
},
},
formatSelection: data => data.text,
formatResult: data => data.text,
};
} else {
this.$http.get('/user/api/switch_options')
Expand Down Expand Up @@ -101,10 +107,6 @@
color: #666;
font-weight: bold;
}
.select2-container {
width: 310px;
}
}
}
</style>
20 changes: 14 additions & 6 deletions ngrinder-frontend/src/js/components/perftest/detail/Config.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,13 +130,14 @@
<option v-if="!config.github || config.github.length === 0" class="add-github" value="addGitHub" v-text="i18n('script.github.add.config')"></option>
</select2>
<select2 v-model="test.config.scriptName" name="scriptName" ref="scriptSelect" customStyle="width: 250px;"
:key="test.config.scm"
:option="{ placeholder: i18n('perfTest.config.scriptInput'),
formatSelection: scriptSelect2Template,
formatResult: scriptSelect2Template }"
@change="changeScript"
@opening="openingScriptSelect"
:validationRules="{ required: true, scriptValidation: true }" errStyle="position: absolute; padding-left: 177px;">
<option></option>
<option data-validate="-1"></option>
<option v-for="script in scripts"
:data-validate="script.validated"
:data-revision="script.revision"
Expand Down Expand Up @@ -409,8 +410,15 @@
return;
}
const scriptName = this.test.config.scriptName;
const scriptRevision = this.test.config.scriptRevision;
this.syncGitHubConfigRevision();
this.setScripts(this.test.config.scriptName);
this.test.config.scriptName = scriptName;
this.setScripts(scriptName);
this.$nextTick(() => {
this.test.config.scriptRevision = scriptRevision;
});
}
syncGitHubConfigRevision() {
Expand Down Expand Up @@ -455,7 +463,7 @@
this.targetHosts = [];
this.test.config.scriptRevision = '';
this.test.config.scriptName = '';
this.$nextTick(() => this.$refs.scriptSelect.selectValue(''));
this.$refs.scriptSelect.selectValue('');
}
changeRegion(region) {
Expand Down Expand Up @@ -516,13 +524,13 @@
this.loadGitHubScript(true).catch(() => { /* noOp */ });
}
async loadGitHubScript(refresh) {
loadGitHubScript(refresh) {
if (!this.isValidScm()) {
return Promise.reject();
}
this.showProgressBar();
await this.$http.get(`/script/api/github?refresh=${!!refresh}`)
return this.$http.get(`/script/api/github?refresh=${!!refresh}`)
.then(res => {
for (const key in res.data) {
this.scriptsMap[this.extractConfigurationName(key)] = res.data[key].map(script => ({
Expand Down Expand Up @@ -845,7 +853,7 @@
}
get isNoneRegion() {
return this.test.config.region === 'NONE'
return this.test.config.region === 'NONE';
}
}
</script>
Expand Down
Loading

0 comments on commit fdff3c0

Please sign in to comment.