@@ -122,6 +128,7 @@
import UsernameTextbox from 'kolibri.coreVue.components.UsernameTextbox';
import PasswordTextbox from 'kolibri.coreVue.components.PasswordTextbox';
import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+ import ExtraDemographics from 'kolibri-common/components/ExtraDemographics';
import IdentifierTextbox from './IdentifierTextbox';
const { NOT_SPECIFIED } = DemographicConstants;
@@ -141,6 +148,7 @@
PasswordTextbox,
IdentifierTextbox,
ImmersivePage,
+ ExtraDemographics,
},
mixins: [commonCoreStrings],
data() {
@@ -153,6 +161,7 @@
passwordValid: false,
gender: NOT_SPECIFIED,
birthYear: NOT_SPECIFIED,
+ extraDemographics: {},
idNumber: '',
loading: true,
kind: {
@@ -240,6 +249,7 @@
id_number: this.idNumber,
gender: this.gender,
birth_year: this.birthYear,
+ extra_demographics: this.extraDemographics,
role: {
kind: this.newUserRole,
},
diff --git a/kolibri/plugins/facility/assets/src/views/UserEditPage.vue b/kolibri/plugins/facility/assets/src/views/UserEditPage.vue
index 8c4be5d5d98..a787ddaff76 100644
--- a/kolibri/plugins/facility/assets/src/views/UserEditPage.vue
+++ b/kolibri/plugins/facility/assets/src/views/UserEditPage.vue
@@ -92,6 +92,13 @@
:disabled="formDisabled"
class="select"
/>
+
+
+
@@ -129,7 +136,7 @@
import pickBy from 'lodash/pickBy';
import UserType from 'kolibri.utils.UserType';
import { FacilityUserResource } from 'kolibri.resources';
- import { mapState, mapGetters } from 'vuex';
+ import { mapActions, mapState, mapGetters } from 'vuex';
import urls from 'kolibri.urls';
import { UserKinds, ERROR_CONSTANTS } from 'kolibri.coreVue.vuex.constants';
import CatchErrors from 'kolibri.utils.CatchErrors';
@@ -140,6 +147,7 @@
import FullNameTextbox from 'kolibri.coreVue.components.FullNameTextbox';
import UsernameTextbox from 'kolibri.coreVue.components.UsernameTextbox';
import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+ import ExtraDemographics from 'kolibri-common/components/ExtraDemographics';
import IdentifierTextbox from './IdentifierTextbox';
export default {
@@ -157,6 +165,7 @@
IdentifierTextbox,
UsernameTextbox,
UserTypeDisplay,
+ ExtraDemographics,
},
mixins: [commonCoreStrings],
data() {
@@ -173,13 +182,14 @@
gender: '',
birthYear: '',
idNumber: '',
+ extraDemographics: null,
userCopy: {},
caughtErrors: [],
status: '',
};
},
computed: {
- ...mapGetters(['currentUserId']),
+ ...mapGetters(['currentUserId', 'facilityConfig']),
...mapState('userManagement', ['facilityUsers']),
formDisabled() {
return this.status === 'BUSY';
@@ -238,17 +248,21 @@
},
},
created() {
- FacilityUserResource.fetchModel({
+ const facilityConfigPromise = this.getFacilityConfig();
+ const facilityUserPromise = FacilityUserResource.fetchModel({
id: this.$route.params.id,
- })
- .then(user => {
- this.username = user.username;
- this.fullName = user.full_name;
- this.idNumber = user.id_number;
- this.gender = user.gender;
- this.birthYear = user.birth_year;
- this.setKind(user);
- this.makeCopyOfUser(user);
+ }).then(user => {
+ this.username = user.username;
+ this.fullName = user.full_name;
+ this.idNumber = user.id_number;
+ this.gender = user.gender;
+ this.birthYear = user.birth_year;
+ this.extraDemographics = user.extra_demographics;
+ this.setKind(user);
+ this.makeCopyOfUser(user);
+ });
+ Promise.all([facilityConfigPromise, facilityUserPromise])
+ .then(() => {
this.loading = false;
})
.catch(error => {
@@ -256,6 +270,7 @@
});
},
methods: {
+ ...mapActions(['getFacilityConfig']),
setKind(user) {
this.kind = UserType(user);
const coachOption = this.userTypeOptions[1];
@@ -275,6 +290,7 @@
full_name: this.fullName,
gender: this.gender,
id_number: this.idNumber,
+ extra_demographics: this.extraDemographics,
username: this.username,
kind: UserType(user),
};
@@ -300,6 +316,7 @@
full_name: this.fullName,
gender: this.gender,
id_number: this.idNumber,
+ extra_demographics: this.extraDemographics,
username: this.username,
},
(value, key) => {
diff --git a/packages/kolibri-common/components/ExtraDemographics/ExtraDemographicField.vue b/packages/kolibri-common/components/ExtraDemographics/ExtraDemographicField.vue
new file mode 100644
index 00000000000..aa1928f4617
--- /dev/null
+++ b/packages/kolibri-common/components/ExtraDemographics/ExtraDemographicField.vue
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+
+
diff --git a/packages/kolibri-common/components/ExtraDemographics/__tests__/ExtraDemographicField.spec.js b/packages/kolibri-common/components/ExtraDemographics/__tests__/ExtraDemographicField.spec.js
new file mode 100644
index 00000000000..e4d3a252d43
--- /dev/null
+++ b/packages/kolibri-common/components/ExtraDemographics/__tests__/ExtraDemographicField.spec.js
@@ -0,0 +1,157 @@
+import { mount } from '@vue/test-utils';
+import ExtraDemographicField from '../ExtraDemographicField.vue';
+
+const label = 'Age';
+
+const field = {
+ id: 'age',
+ description: label,
+ enumValues: [
+ {
+ value: '0-5',
+ defaultLabel: 'Zero to Five',
+ },
+ {
+ value: '6-10',
+ defaultLabel: 'Six to Ten',
+ },
+ {
+ value: '11-15',
+ defaultLabel: 'Eleven to Fifteen',
+ },
+ {
+ value: '16-20',
+ defaultLabel: 'Sixteen to Twenty',
+ },
+ {
+ value: '21-25',
+ defaultLabel: 'Twenty-One to Twenty-Five',
+ },
+ ],
+};
+
+describe('ExtraDemographicField', () => {
+ it('renders the label correctly', () => {
+ const wrapper = mount(ExtraDemographicField, {
+ propsData: {
+ field,
+ value: '0-5',
+ },
+ });
+ expect(wrapper.vm.description).toBe(label);
+ });
+
+ it('renders the translated label correctly', () => {
+ const wrapper = mount(ExtraDemographicField, {
+ propsData: {
+ field: {
+ ...field,
+ translations: {
+ en: 'Not Age',
+ },
+ },
+ value: '0-5',
+ },
+ });
+ expect(wrapper.vm.description).toBe('Not Age');
+ });
+
+ it('generates the correct options', () => {
+ const wrapper = mount(ExtraDemographicField, {
+ propsData: {
+ field,
+ value: '0-5',
+ },
+ });
+
+ const options = wrapper.vm.options;
+ expect(options.length).toBe(5);
+ expect(options[0].value).toBe('0-5');
+ expect(options[0].label).toBe('Zero to Five');
+ expect(options[1].value).toBe('6-10');
+ expect(options[1].label).toBe('Six to Ten');
+ expect(options[2].value).toBe('11-15');
+ expect(options[2].label).toBe('Eleven to Fifteen');
+ expect(options[3].value).toBe('16-20');
+ expect(options[3].label).toBe('Sixteen to Twenty');
+ expect(options[4].value).toBe('21-25');
+ expect(options[4].label).toBe('Twenty-One to Twenty-Five');
+ });
+
+ it('generates the correct translated options', () => {
+ const enumValues = [
+ {
+ value: '0-5',
+ defaultLabel: 'Zero to Five',
+ translations: {
+ en: 'Less than Five',
+ },
+ },
+ {
+ value: '6-10',
+ defaultLabel: 'Six to Ten',
+ translations: {
+ en: 'More than Six but less than Ten',
+ },
+ },
+ {
+ value: '11-15',
+ defaultLabel: 'Eleven to Fifteen',
+ translations: {
+ en: 'More than Eleven but less than Fifteen',
+ },
+ },
+ {
+ value: '16-20',
+ defaultLabel: 'Sixteen to Twenty',
+ translations: {
+ en: 'More than Sixteen but less than Twenty',
+ },
+ },
+ {
+ value: '21-25',
+ defaultLabel: 'Twenty-One to Twenty-Five',
+ translations: {
+ en: 'More than Twenty-One but less than Twenty-Five',
+ },
+ },
+ ];
+ const wrapper = mount(ExtraDemographicField, {
+ propsData: {
+ field: {
+ ...field,
+ enumValues,
+ },
+ value: '0-5',
+ },
+ });
+
+ const options = wrapper.vm.options;
+ expect(options.length).toBe(5);
+ expect(options[0].value).toBe('0-5');
+ expect(options[0].label).toBe('Less than Five');
+ expect(options[1].value).toBe('6-10');
+ expect(options[1].label).toBe('More than Six but less than Ten');
+ expect(options[2].value).toBe('11-15');
+ expect(options[2].label).toBe('More than Eleven but less than Fifteen');
+ expect(options[3].value).toBe('16-20');
+ expect(options[3].label).toBe('More than Sixteen but less than Twenty');
+ expect(options[4].value).toBe('21-25');
+ expect(options[4].label).toBe('More than Twenty-One but less than Twenty-Five');
+ });
+
+ it('emits the select event when the value changes', () => {
+ const wrapper = mount(ExtraDemographicField, {
+ propsData: {
+ field,
+ value: '0-5',
+ },
+ });
+
+ const input = wrapper.findComponent({ name: 'KSelect' });
+ input.vm.$emit('select', { value: '6-10' });
+
+ expect(wrapper.emitted().select).toBeTruthy();
+ expect(wrapper.emitted().select[0]).toEqual(['6-10']);
+ });
+});
diff --git a/packages/kolibri-common/components/ExtraDemographics/__tests__/ExtraDemographics.spec.js b/packages/kolibri-common/components/ExtraDemographics/__tests__/ExtraDemographics.spec.js
new file mode 100644
index 00000000000..ed6cb9bce07
--- /dev/null
+++ b/packages/kolibri-common/components/ExtraDemographics/__tests__/ExtraDemographics.spec.js
@@ -0,0 +1,102 @@
+import { mount } from '@vue/test-utils';
+import ExtraDemographics from '../index.vue';
+import ExtraDemographicField from '../ExtraDemographicField.vue';
+
+const field1 = {
+ id: 'age',
+ description: 'Age',
+ enumValues: [
+ {
+ value: '0-5',
+ defaultLabel: 'Zero to Five',
+ },
+ {
+ value: '6-10',
+ defaultLabel: 'Six to Ten',
+ },
+ {
+ value: '11-15',
+ defaultLabel: 'Eleven to Fifteen',
+ },
+ {
+ value: '16-20',
+ defaultLabel: 'Sixteen to Twenty',
+ },
+ {
+ value: '21-25',
+ defaultLabel: 'Twenty-One to Twenty-Five',
+ },
+ ],
+};
+
+const field2 = {
+ id: 'flavour',
+ description: 'Flavour',
+ enumValues: [
+ {
+ value: 'up',
+ defaultLabel: 'Up',
+ },
+ {
+ value: 'down',
+ defaultLabel: 'Down',
+ },
+ {
+ value: 'strange',
+ defaultLabel: 'Strange',
+ },
+ {
+ value: 'charm',
+ defaultLabel: 'Charm',
+ },
+ {
+ value: 'top',
+ defaultLabel: 'Top',
+ },
+ {
+ value: 'bottom',
+ defaultLabel: 'Bottom',
+ },
+ ],
+};
+
+const mockFacilityDatasetExtraFields = {
+ demographic_fields: [field1, field2],
+};
+
+describe('ExtraDemographics', () => {
+ it('renders ExtraDemographicField for each field in customSchema', () => {
+ const wrapper = mount(ExtraDemographics, {
+ propsData: {
+ facilityDatasetExtraFields: mockFacilityDatasetExtraFields,
+ value: null,
+ },
+ });
+ const extraDemographicFields = wrapper.findAllComponents(ExtraDemographicField);
+ expect(extraDemographicFields).toHaveLength(
+ mockFacilityDatasetExtraFields.demographic_fields.length
+ );
+ });
+
+ it('emits input event with updated value when ExtraDemographicField emits select', () => {
+ const wrapper = mount(ExtraDemographics, {
+ propsData: {
+ facilityDatasetExtraFields: mockFacilityDatasetExtraFields,
+ value: null,
+ },
+ });
+ const extraDemographicField = wrapper.findComponent(ExtraDemographicField);
+ extraDemographicField.vm.$emit('select', '6-10');
+ expect(wrapper.emitted().input[0]).toEqual([{ age: '6-10' }]);
+ });
+
+ it('computes customSchema correctly', () => {
+ const wrapper = mount(ExtraDemographics, {
+ propsData: {
+ facilityDatasetExtraFields: mockFacilityDatasetExtraFields,
+ value: null,
+ },
+ });
+ expect(wrapper.vm.customSchema).toEqual(mockFacilityDatasetExtraFields.demographic_fields);
+ });
+});
diff --git a/packages/kolibri-common/components/ExtraDemographics/index.vue b/packages/kolibri-common/components/ExtraDemographics/index.vue
new file mode 100644
index 00000000000..16aa6a78642
--- /dev/null
+++ b/packages/kolibri-common/components/ExtraDemographics/index.vue
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+
+
+
+