Skip to content

Commit 1498653

Browse files
achchu93achchu93
committed
role selector to custom field permission tab (WIP)
1 parent 2883116 commit 1498653

File tree

5 files changed

+160
-1
lines changed

5 files changed

+160
-1
lines changed

‎includes/abstracts/abstract-wpum-field-type.php‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -223,6 +223,15 @@ protected function get_default_editor_settings() {
223223
'model' => 'read_only',
224224
'default' => false,
225225
'hint' => esc_html__( 'Enable to prevent users from editing this field. Note: if the profile editing option is set to publicly editable, the field will still be visible within the account page but will not be customizable.', 'wp-user-manager' ),
226+
),
227+
'roles' => array(
228+
'type' => 'multiselect',
229+
'label' => esc_html__( 'Roles', 'wp-user-manager' ),
230+
'model' => 'roles',
231+
'default' => array(),
232+
'options' => wpum_get_roles( true ),
233+
'multiple' => true,
234+
'hint' => esc_html__( 'Show the fields only for selected users', 'wp-user-manager' )
226235
)
227236
]
228237
];

‎includes/wpum-fields/class-wpum-fields-editor.php‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -662,8 +662,12 @@ public function update_field() {
662662
case 'checkbox':
663663
$setting_data = $setting_data === 'true' ? true : false;
664664
break;
665+
case 'multiselect':
666+
$setting_data = $setting_data;
667+
break;
665668
default:
666-
$setting_data = sanitize_text_field( $setting_data );
669+
$sanitize_method = apply_filters( 'wpum_update_fields_sanitize_method', 'sanitize_text_field', $setting_type, $setting_data );
670+
$setting_data = call_user_func( $sanitize_method, $setting_data );
667671
break;
668672
}
669673

‎src/fields-editor/components/fields/multiselect.vue‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<template>
2+
<Multiselect
3+
:multiple="isMultiple"
4+
:options="schema.options || []"
5+
v-model="selected"
6+
track-by="value"
7+
label="label"
8+
@input="triggerChange"
9+
/>
10+
</template>
11+
12+
<style lang="scss">
13+
@import "vue-multiselect/dist/vue-multiselect.min.css";
14+
15+
.field-multiselect {
16+
.multiselect {
17+
font-size: inherit;
18+
19+
.multiselect__element {
20+
margin-bottom: 0;
21+
}
22+
23+
.multiselect__tags {
24+
color: #555;
25+
border-color: #8c8f94;
26+
border-radius: 3px;
27+
&:hover {
28+
border-color: #999;
29+
}
30+
}
31+
.multiselect__input {
32+
font-size: inherit;
33+
border:none !important;
34+
background: transparent;
35+
box-shadow: none !important;
36+
padding: 0;
37+
outline: none !important;
38+
}
39+
.multiselect__content-wrapper {
40+
box-shadow: 0 3px 5px rgba(0,0,0,.2);
41+
border: 1px solid #ddd;
42+
border-radius: 0;
43+
margin-top: 5px;
44+
}
45+
.multiselect__option--highlight {
46+
background: #0073aa;
47+
color: #fff;
48+
&:after {
49+
background: #0073aa;
50+
color: #fff;
51+
}
52+
}
53+
.multiselect__tags-wrap {
54+
.multiselect__tag {
55+
background: #0085ba;
56+
border-radius: 3px;
57+
margin-bottom: 3px;
58+
padding: 5px 30px 5px 10px;
59+
i {
60+
border-radius: 0;
61+
&:hover {
62+
background: #dd3e3e;
63+
}
64+
}
65+
}
66+
}
67+
.multiselect__spinner {
68+
background: #f7f7f7;
69+
&:before,
70+
&:after {
71+
border-color: #0085ba transparent transparent
72+
}
73+
}
74+
.multiselect__single {
75+
background: transparent;
76+
font-size: inherit;
77+
}
78+
}
79+
}
80+
</style>
81+
82+
<script>
83+
import Multiselect from 'vue-multiselect'
84+
85+
export default {
86+
props: {
87+
schema: {},
88+
model: {},
89+
formOptions: {},
90+
disabled: false
91+
},
92+
components: {
93+
Multiselect
94+
},
95+
data() {
96+
return {
97+
selected: null,
98+
isMultiple: this.schema.multiple
99+
}
100+
},
101+
methods: {
102+
clearValidationErrors(){
103+
104+
},
105+
validate(){
106+
107+
},
108+
triggerChange (value) {
109+
110+
let savedValue = value
111+
112+
if ( this.isMultiple === true ) {
113+
savedValue = []
114+
value.forEach(function(element) {
115+
savedValue.push(element.value)
116+
})
117+
} else if( savedValue === null ) {
118+
savedValue = null
119+
} else {
120+
savedValue = savedValue.value
121+
}
122+
123+
if( this.schema.model ){
124+
this.$set( this.model, this.schema.model, savedValue )
125+
}
126+
127+
this.$emit('input', savedValue )
128+
}
129+
},
130+
created() {
131+
let currentValue = this.model[this.schema.model];
132+
133+
if( currentValue instanceof Array ){
134+
currentValue = currentValue.map( role => this.schema.options.find( option => option.value == role ) ).filter( role => !!role )
135+
}else if( typeof currentValue === 'string' ){
136+
currentValue = this.schema.options.find( option => option.value == currentValue )
137+
}
138+
139+
this.selected = currentValue;
140+
}
141+
}
142+
</script>

‎src/fields-editor/fields-editor.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,10 @@ import router from './router'
66
import WPNotice from 'vue-wp-notice'
77
import VModal from 'vue-js-modal'
88
import FieldRepeater from './settings/field-type-repeater'
9+
import Multiselect from './components/fields/multiselect'
910
import {Bootstrap} from './../bootstrap'
1011

12+
Vue.component('field-multiselect', Multiselect)
1113
Vue.component('field-repeater', FieldRepeater)
1214
Vue.use(WPNotice)
1315
Vue.use(VModal, { dialog: true, dynamic: true })

‎src/registration-forms-editor/registration-editor.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,15 @@ import VueFormitFields from 'vue-formit-fields'
99
import WPUMFields from './components/field-types'
1010
import MultiselectField from './components/fields/multiselect'
1111
import FieldRepeater from './../fields-editor/settings/field-type-repeater'
12+
import MultiSelect from './../fields-editor/components/fields/multiselect'
1213
import {Bootstrap} from './../bootstrap'
1314

1415
Vue.use(VueFormitFields)
1516
Vue.use(WPNotice)
1617
Vue.use(VModal, { dialog: true, dynamic: true })
1718

1819
Vue.component('formit-multiselect', MultiselectField)
20+
Vue.component('field-multiselect', MultiSelect)
1921
Vue.component('field-repeater', FieldRepeater)
2022

2123
// register wpum fields

0 commit comments

Comments
 (0)