From fa37ed0476aa8a15b1454de9bf1f9383c8209f45 Mon Sep 17 00:00:00 2001 From: Leszek Date: Wed, 22 Nov 2023 00:03:31 +0100 Subject: [PATCH 01/23] =?UTF-8?q?WIP=20add=20=E2=80=A6PartialByResponses?= =?UTF-8?q?=20constants?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/permissions/permConstants.ts | 63 +++++++++++--- jsapp/js/components/permissions/permParser.ts | 4 + .../userAssetPermsEditor.component.tsx | 83 ++++++++++++++----- 3 files changed, 119 insertions(+), 31 deletions(-) diff --git a/jsapp/js/components/permissions/permConstants.ts b/jsapp/js/components/permissions/permConstants.ts index 2b3fd3d37f..32c1c06bfb 100644 --- a/jsapp/js/components/permissions/permConstants.ts +++ b/jsapp/js/components/permissions/permConstants.ts @@ -81,21 +81,47 @@ type CheckboxNameRegular = | 'submissionsEdit' | 'submissionsValidate' | 'submissionsDelete'; -/** Names of checkboxes for partial permissions (the counterparts). */ +/** Names of checkboxes for "by users" partial permissions. */ export type CheckboxNamePartialByUsers = | 'submissionsViewPartialByUsers' | 'submissionsEditPartialByUsers' | 'submissionsValidatePartialByUsers' | 'submissionsDeletePartialByUsers'; + /** Names of checkboxes for "by responses" partial permissions. */ +export type CheckboxNamePartialByResponses = + | 'submissionsViewPartialByResponses' + | 'submissionsEditPartialByResponses' + | 'submissionsValidatePartialByResponses' + | 'submissionsDeletePartialByResponses'; /** All checkboxes names combined. */ -export type CheckboxNameAll = CheckboxNameRegular | CheckboxNamePartialByUsers; -/** Name of lists of usernames for a partial permissions checkboxes. */ +export type CheckboxNameAll = CheckboxNameRegular | CheckboxNamePartialByUsers | CheckboxNamePartialByResponses; + +/** Name of lists of usernames for "by users" partial permissions checkboxes. */ export type PartialByUsersListName = | 'submissionsViewPartialByUsersList' | 'submissionsEditPartialByUsersList' | 'submissionsDeletePartialByUsersList' | 'submissionsValidatePartialByUsersList'; +/** + * Name of select used by user to choose question for "by responses" partial + * permissions checkboxes. + */ +export type PartialByResponsesQuestionName = + | 'submissionsViewPartialByResponsesQuestion' + | 'submissionsEditPartialByResponsesQuestion' + | 'submissionsDeletePartialByResponsesQuestion' + | 'submissionsValidatePartialByResponsesQuestion'; +/** + * Name of textbox used by user to type the condition value for "by responses" + * partial permissions checkboxes. + */ +export type PartialByResponsesValueName = + | 'submissionsViewPartialByResponsesValue' + | 'submissionsEditPartialByResponsesValue' + | 'submissionsDeletePartialByResponsesValue' + | 'submissionsValidatePartialByResponsesValue'; + /** * This list contains the names of all the checkboxes in userAssetPermsEditor. * Every one of them is strictly connected to a permission, see the pairs at @@ -108,12 +134,16 @@ export const CHECKBOX_NAMES = createEnum([ 'submissionsAdd', 'submissionsView', 'submissionsViewPartialByUsers', + 'submissionsViewPartialByResponses', 'submissionsEdit', 'submissionsEditPartialByUsers', + 'submissionsEditPartialByResponses', 'submissionsValidate', 'submissionsValidatePartialByUsers', + 'submissionsValidatePartialByResponses', 'submissionsDelete', 'submissionsDeletePartialByUsers', + 'submissionsDeletePartialByResponses', ]) as {[P in CheckboxNameAll]: CheckboxNameAll}; Object.freeze(CHECKBOX_NAMES); @@ -128,12 +158,16 @@ Object.freeze(CHECKBOX_NAMES); * but only for this limited list of users". */ export const PARTIAL_PERM_PAIRS: { - [key in CheckboxNamePartialByUsers]: PermissionCodename; + [key in CheckboxNamePartialByUsers | CheckboxNamePartialByResponses]: PermissionCodename; } = { submissionsViewPartialByUsers: 'view_submissions', + submissionsViewPartialByResponses: 'view_submissions', submissionsEditPartialByUsers: 'change_submissions', + submissionsEditPartialByResponses: 'change_submissions', submissionsValidatePartialByUsers: 'validate_submissions', + submissionsValidatePartialByResponses: 'validate_submissions', submissionsDeletePartialByUsers: 'delete_submissions', + submissionsDeletePartialByResponses: 'delete_submissions', }; Object.freeze(PARTIAL_PERM_PAIRS); @@ -149,12 +183,16 @@ export const CHECKBOX_PERM_PAIRS: { submissionsAdd: 'add_submissions', submissionsView: 'view_submissions', submissionsViewPartialByUsers: 'partial_submissions', + submissionsViewPartialByResponses: 'partial_submissions', submissionsEdit: 'change_submissions', submissionsEditPartialByUsers: 'partial_submissions', + submissionsEditPartialByResponses: 'partial_submissions', submissionsValidate: 'validate_submissions', submissionsValidatePartialByUsers: 'partial_submissions', + submissionsValidatePartialByResponses: 'partial_submissions', submissionsDelete: 'delete_submissions', submissionsDeletePartialByUsers: 'partial_submissions', + submissionsDeletePartialByResponses: 'partial_submissions', }; Object.freeze(CHECKBOX_PERM_PAIRS); @@ -164,6 +202,7 @@ Object.freeze(CHECKBOX_PERM_PAIRS); */ export const PARTIAL_IMPLIED_CHECKBOX_PAIRS = { [CHECKBOX_NAMES.submissionsEditPartialByUsers]: CHECKBOX_NAMES.submissionsAdd, + [CHECKBOX_NAMES.submissionsEditPartialByResponses]: CHECKBOX_NAMES.submissionsAdd, }; Object.freeze(PARTIAL_IMPLIED_CHECKBOX_PAIRS); @@ -180,19 +219,23 @@ export const CHECKBOX_LABELS: {[key in CheckboxNameAll]: string} = { submissionsAdd: t('Add submissions'), submissionsView: t('View submissions'), submissionsViewPartialByUsers: t('View submissions only from specific users'), + submissionsViewPartialByResponses: t('View submissions based on a condition'), submissionsEdit: t('Edit submissions'), submissionsEditPartialByUsers: t('Edit submissions only from specific users'), + submissionsEditPartialByResponses: t('Edit submissions based on a condition'), submissionsValidate: t('Validate submissions'), - submissionsValidatePartialByUsers: t( - 'Validate submissions only from specific users' - ), + submissionsValidatePartialByUsers: t('Validate submissions only from specific users'), + submissionsValidatePartialByResponses: t('Validate submissions based on a condition'), submissionsDelete: t('Delete submissions'), - submissionsDeletePartialByUsers: t( - 'Delete submissions only from specific users' - ), + submissionsDeletePartialByUsers: t('Delete submissions only from specific users'), + submissionsDeletePartialByResponses: t('Delete submissions based on a condition'), }; Object.freeze(CHECKBOX_LABELS); export const PARTIAL_BY_USERS_DEFAULT_LABEL = t( 'Act on submissions only from specific users' ); + +export const PARTIAL_BY_RESPONSES_DEFAULT_LABEL = t( + 'Act on submissions based on a condition' +); diff --git a/jsapp/js/components/permissions/permParser.ts b/jsapp/js/components/permissions/permParser.ts index 8ba75be8f0..f74ae3532e 100644 --- a/jsapp/js/components/permissions/permParser.ts +++ b/jsapp/js/components/permissions/permParser.ts @@ -35,15 +35,19 @@ export interface PermsFormData { submissionsView?: boolean; submissionsViewPartialByUsers?: boolean; submissionsViewPartialByUsersList?: string[]; + submissionsViewPartialByResponses?: boolean; submissionsEdit?: boolean; submissionsEditPartialByUsers?: boolean; submissionsEditPartialByUsersList?: string[]; + submissionsEditPartialByResponses?: boolean; submissionsDelete?: boolean; submissionsDeletePartialByUsers?: boolean; submissionsDeletePartialByUsersList?: string[]; + submissionsDeletePartialByResponses?: boolean; submissionsValidate?: boolean; submissionsValidatePartialByUsers?: boolean; submissionsValidatePartialByUsersList?: string[]; + submissionsValidatePartialByResponses?: boolean; } export interface UserWithPerms { diff --git a/jsapp/js/components/permissions/userAssetPermsEditor.component.tsx b/jsapp/js/components/permissions/userAssetPermsEditor.component.tsx index 8dab7ef283..e9d0ecb809 100644 --- a/jsapp/js/components/permissions/userAssetPermsEditor.component.tsx +++ b/jsapp/js/components/permissions/userAssetPermsEditor.component.tsx @@ -21,6 +21,7 @@ import { import type { CheckboxNameAll, CheckboxNamePartialByUsers, + CheckboxNamePartialByResponses, PartialByUsersListName, PermissionCodename, } from './permConstants'; @@ -65,20 +66,24 @@ interface UserAssetPermsEditorState { submissionsViewDisabled: boolean; submissionsViewPartialByUsers: boolean; submissionsViewPartialByUsersList: string[]; + submissionsViewPartialByResponses: boolean; submissionsAdd: boolean; submissionsAddDisabled: boolean; submissionsEdit: boolean; submissionsEditDisabled: boolean; submissionsEditPartialByUsers: boolean; submissionsEditPartialByUsersList: string[]; + submissionsEditPartialByResponses: boolean; submissionsValidate: boolean; submissionsValidateDisabled: boolean; submissionsValidatePartialByUsers: boolean; submissionsValidatePartialByUsersList: string[]; + submissionsValidatePartialByResponses: boolean; submissionsDelete: boolean; submissionsDeleteDisabled: boolean; submissionsDeletePartialByUsers: boolean; submissionsDeletePartialByUsersList: string[]; + submissionsDeletePartialByResponses: boolean; } /** @@ -108,20 +113,24 @@ export default class UserAssetPermsEditor extends React.Component< submissionsViewDisabled: false, submissionsViewPartialByUsers: false, submissionsViewPartialByUsersList: [], + submissionsViewPartialByResponses: false, submissionsAdd: false, submissionsAddDisabled: false, submissionsEdit: false, submissionsEditDisabled: false, submissionsEditPartialByUsers: false, submissionsEditPartialByUsersList: [], + submissionsEditPartialByResponses: false, submissionsValidate: false, submissionsValidateDisabled: false, submissionsValidatePartialByUsers: false, submissionsValidatePartialByUsersList: [], + submissionsValidatePartialByResponses: false, submissionsDelete: false, submissionsDeleteDisabled: false, submissionsDeletePartialByUsers: false, submissionsDeletePartialByUsersList: [], + submissionsDeletePartialByResponses: false, }; this.applyPropsData(); @@ -549,31 +558,51 @@ export default class UserAssetPermsEditor extends React.Component< } /** - * Displays UI for typing in a list of users for given partial permissions - * checkbox. It uses a separator to turn the array into string and vice versa. + * Displays UI for enabling and typing in a list of users for given partial + * permissions checkbox. It uses a separator to turn the array into string and + * vice versa. */ - renderUsersTextbox(checkboxName: CheckboxNamePartialByUsers) { - const listName = getPartialByUsersListName(checkboxName); - return ( - - ); + renderPartialByUsersRow(checkboxName: CheckboxNamePartialByUsers) { + if (this.isAssignable(CHECKBOX_PERM_PAIRS[checkboxName])) { + const listName = getPartialByUsersListName(checkboxName); + return ( +
+ {this.renderCheckbox(checkboxName)} + + {this.state[checkboxName] === true && ( + + )} +
+ ); + } else { + return null; + } } - renderPartialRow(checkboxName: CheckboxNamePartialByUsers) { + // TODO: get a list of question names to be used here + // TODO: display select + // TODO: display a checkbox + renderPartialByResponsesRow(checkboxName: CheckboxNamePartialByResponses) { if (this.isAssignable(CHECKBOX_PERM_PAIRS[checkboxName])) { return (
{this.renderCheckbox(checkboxName)} - {this.state[checkboxName] === true && - this.renderUsersTextbox(checkboxName)} + {this.state[checkboxName] === true && ( + <> + select {/*for question name (qpath?)*/} + textbox {/*for value*/} + + )}
); } else { @@ -617,22 +646,34 @@ export default class UserAssetPermsEditor extends React.Component< {this.isAssignable('view_submissions') && this.renderCheckbox('submissionsView')} - {this.renderPartialRow('submissionsViewPartialByUsers')} + {this.renderPartialByUsersRow('submissionsViewPartialByUsers')} + {this.renderPartialByResponsesRow( + 'submissionsViewPartialByResponses' + )} {this.isAssignable('add_submissions') && this.renderCheckbox('submissionsAdd')} {this.isAssignable('change_submissions') && this.renderCheckbox('submissionsEdit')} - {this.renderPartialRow('submissionsEditPartialByUsers')} + {this.renderPartialByUsersRow('submissionsEditPartialByUsers')} + {this.renderPartialByResponsesRow( + 'submissionsEditPartialByResponses' + )} {this.isAssignable('validate_submissions') && this.renderCheckbox('submissionsValidate')} - {this.renderPartialRow('submissionsValidatePartialByUsers')} + {this.renderPartialByUsersRow('submissionsValidatePartialByUsers')} + {this.renderPartialByResponsesRow( + 'submissionsValidatePartialByResponses' + )} {this.isAssignable('delete_submissions') && this.renderCheckbox('submissionsDelete')} - {this.renderPartialRow('submissionsDeletePartialByUsers')} + {this.renderPartialByUsersRow('submissionsDeletePartialByUsers')} + {this.renderPartialByResponsesRow( + 'submissionsDeletePartialByResponses' + )} {this.isAssignable('manage_asset') && this.renderCheckbox('formManage')} From 6472ba9fdef9ce3c8d5b07f389b39ff9ab125eed Mon Sep 17 00:00:00 2001 From: Leszek Date: Thu, 23 Nov 2023 00:24:48 +0100 Subject: [PATCH 02/23] add question select and value textbox (WIP) --- .../userAssetPermsEditor.component.tsx | 72 ++++++++++++++++++- jsapp/js/components/permissions/utils.ts | 43 ++++++++++- 2 files changed, 111 insertions(+), 4 deletions(-) diff --git a/jsapp/js/components/permissions/userAssetPermsEditor.component.tsx b/jsapp/js/components/permissions/userAssetPermsEditor.component.tsx index e9d0ecb809..79273cbbc4 100644 --- a/jsapp/js/components/permissions/userAssetPermsEditor.component.tsx +++ b/jsapp/js/components/permissions/userAssetPermsEditor.component.tsx @@ -28,7 +28,16 @@ import type { import type {AssignablePermsMap} from './sharingForm.component'; import type {PermissionBase} from 'js/dataInterface'; import userExistence from 'js/users/userExistence.store'; -import {getPartialByUsersListName, getCheckboxLabel} from './utils'; +import { + getPartialByUsersListName, + getCheckboxLabel, + getPartialByResponsesQuestionName, + getPartialByResponsesValueName, +} from './utils'; +import {getSurveyFlatPaths} from 'js/assetUtils'; +import assetStore from 'js/assetStore'; +import KoboSelect from 'js/components/common/koboSelect'; +import type {KoboSelectOption} from 'js/components/common/koboSelect'; const PARTIAL_PLACEHOLDER = t('Enter usernames separated by comma'); const USERNAMES_SEPARATOR = ','; @@ -67,6 +76,8 @@ interface UserAssetPermsEditorState { submissionsViewPartialByUsers: boolean; submissionsViewPartialByUsersList: string[]; submissionsViewPartialByResponses: boolean; + submissionsViewPartialByResponsesQuestion: string | null; + submissionsViewPartialByResponsesValue: string; submissionsAdd: boolean; submissionsAddDisabled: boolean; submissionsEdit: boolean; @@ -74,16 +85,22 @@ interface UserAssetPermsEditorState { submissionsEditPartialByUsers: boolean; submissionsEditPartialByUsersList: string[]; submissionsEditPartialByResponses: boolean; + submissionsEditPartialByResponsesQuestion: string | null; + submissionsEditPartialByResponsesValue: string; submissionsValidate: boolean; submissionsValidateDisabled: boolean; submissionsValidatePartialByUsers: boolean; submissionsValidatePartialByUsersList: string[]; submissionsValidatePartialByResponses: boolean; + submissionsValidatePartialByResponsesQuestion: string | null; + submissionsValidatePartialByResponsesValue: string; submissionsDelete: boolean; submissionsDeleteDisabled: boolean; submissionsDeletePartialByUsers: boolean; submissionsDeletePartialByUsersList: string[]; submissionsDeletePartialByResponses: boolean; + submissionsDeletePartialByResponsesQuestion: string | null; + submissionsDeletePartialByResponsesValue: string; } /** @@ -114,6 +131,8 @@ export default class UserAssetPermsEditor extends React.Component< submissionsViewPartialByUsers: false, submissionsViewPartialByUsersList: [], submissionsViewPartialByResponses: false, + submissionsViewPartialByResponsesQuestion: null, + submissionsViewPartialByResponsesValue: '', submissionsAdd: false, submissionsAddDisabled: false, submissionsEdit: false, @@ -121,16 +140,22 @@ export default class UserAssetPermsEditor extends React.Component< submissionsEditPartialByUsers: false, submissionsEditPartialByUsersList: [], submissionsEditPartialByResponses: false, + submissionsEditPartialByResponsesQuestion: null, + submissionsEditPartialByResponsesValue: '', submissionsValidate: false, submissionsValidateDisabled: false, submissionsValidatePartialByUsers: false, submissionsValidatePartialByUsersList: [], submissionsValidatePartialByResponses: false, + submissionsValidatePartialByResponsesQuestion: null, + submissionsValidatePartialByResponsesValue: '', submissionsDelete: false, submissionsDeleteDisabled: false, submissionsDeletePartialByUsers: false, submissionsDeletePartialByUsersList: [], submissionsDeletePartialByResponses: false, + submissionsDeletePartialByResponsesQuestion: null, + submissionsDeletePartialByResponsesValue: '', }; this.applyPropsData(); @@ -588,19 +613,60 @@ export default class UserAssetPermsEditor extends React.Component< } } + getQuestionNameSelectOptions(): KoboSelectOption[] { + const output: KoboSelectOption[] = []; + const foundAsset = assetStore.getAsset(this.props.assetUid); + if (foundAsset?.content?.survey) { + const flatPaths = getSurveyFlatPaths( + foundAsset.content?.survey, + false, + true + ); + for (const [, qPath] of Object.entries(flatPaths)) { + output.push({ + value: qPath, + label: qPath, + }); + } + } + return output; + } + // TODO: get a list of question names to be used here // TODO: display select // TODO: display a checkbox renderPartialByResponsesRow(checkboxName: CheckboxNamePartialByResponses) { if (this.isAssignable(CHECKBOX_PERM_PAIRS[checkboxName])) { + const questionProp = getPartialByResponsesQuestionName(checkboxName); + const valueProp = getPartialByResponsesValueName(checkboxName); + return (
{this.renderCheckbox(checkboxName)} {this.state[checkboxName] === true && ( <> - select {/*for question name (qpath?)*/} - textbox {/*for value*/} + { + console.log('xxx newSelectedOption', newSelectedOption); + } + } + /> + + {/* Yes, we display an equals character between select and textbox here :) */} + = + + {console.log('xxx newVal', newVal)}} + /> )}
diff --git a/jsapp/js/components/permissions/utils.ts b/jsapp/js/components/permissions/utils.ts index 67044c4b9e..adc3ae94a3 100644 --- a/jsapp/js/components/permissions/utils.ts +++ b/jsapp/js/components/permissions/utils.ts @@ -13,6 +13,9 @@ import type { CheckboxNameAll, CheckboxNamePartialByUsers, PartialByUsersListName, + CheckboxNamePartialByResponses, + PartialByResponsesQuestionName, + PartialByResponsesValueName, } from './permConstants'; import { CHECKBOX_PERM_PAIRS, @@ -219,7 +222,7 @@ export function getPartialByUsersCheckboxName( } /** - * Matches given partial "by users" checkbox name with the list name + * Matches given partial "by users" checkbox name with the list property name */ export function getPartialByUsersListName( checkboxName: CheckboxNamePartialByUsers @@ -236,6 +239,44 @@ export function getPartialByUsersListName( } } +/** + * Matches given partial "by responses" checkbox name with the question property + * name + */ +export function getPartialByResponsesQuestionName( + checkboxName: CheckboxNamePartialByResponses +): PartialByResponsesQuestionName { + switch (checkboxName) { + case 'submissionsViewPartialByResponses': + return 'submissionsViewPartialByResponsesQuestion'; + case 'submissionsEditPartialByResponses': + return 'submissionsEditPartialByResponsesQuestion'; + case 'submissionsDeletePartialByResponses': + return 'submissionsDeletePartialByResponsesQuestion'; + case 'submissionsValidatePartialByResponses': + return 'submissionsValidatePartialByResponsesQuestion'; + } +} + +/** + * Matches given partial "by responses" checkbox name with the value property + * name + */ +export function getPartialByResponsesValueName( + checkboxName: CheckboxNamePartialByResponses +): PartialByResponsesValueName { + switch (checkboxName) { + case 'submissionsViewPartialByResponses': + return 'submissionsViewPartialByResponsesValue'; + case 'submissionsEditPartialByResponses': + return 'submissionsEditPartialByResponsesValue'; + case 'submissionsDeletePartialByResponses': + return 'submissionsDeletePartialByResponsesValue'; + case 'submissionsValidatePartialByResponses': + return 'submissionsValidatePartialByResponsesValue'; + } +} + /** * For given permission name it returns a matching checkbox name (non-partial). * It should never return `undefined`, but TypeScript has some limitations. From 6529b7ed0d4f36046a77e9540f2c5352263016ed Mon Sep 17 00:00:00 2001 From: Leszek Date: Fri, 24 Nov 2023 14:53:25 +0100 Subject: [PATCH 03/23] more wip changes --- jsapp/js/components/permissions/permParser.ts | 8 +++++ .../userAssetPermsEditor.component.tsx | 35 +++++++++++++------ 2 files changed, 33 insertions(+), 10 deletions(-) diff --git a/jsapp/js/components/permissions/permParser.ts b/jsapp/js/components/permissions/permParser.ts index f74ae3532e..c972bbc630 100644 --- a/jsapp/js/components/permissions/permParser.ts +++ b/jsapp/js/components/permissions/permParser.ts @@ -36,18 +36,26 @@ export interface PermsFormData { submissionsViewPartialByUsers?: boolean; submissionsViewPartialByUsersList?: string[]; submissionsViewPartialByResponses?: boolean; + submissionsViewPartialByResponsesQuestion?: boolean; + submissionsViewPartialByResponsesValue?: boolean; submissionsEdit?: boolean; submissionsEditPartialByUsers?: boolean; submissionsEditPartialByUsersList?: string[]; submissionsEditPartialByResponses?: boolean; + submissionsEditPartialByResponsesQuestion?: boolean; + submissionsEditPartialByResponsesValue?: boolean; submissionsDelete?: boolean; submissionsDeletePartialByUsers?: boolean; submissionsDeletePartialByUsersList?: string[]; submissionsDeletePartialByResponses?: boolean; + submissionsDeletePartialByResponsesQuestion?: boolean; + submissionsDeletePartialByResponsesValue?: boolean; submissionsValidate?: boolean; submissionsValidatePartialByUsers?: boolean; submissionsValidatePartialByUsersList?: string[]; submissionsValidatePartialByResponses?: boolean; + submissionsValidatePartialByResponsesQuestion?: boolean; + submissionsValidatePartialByResponsesValue?: boolean; } export interface UserWithPerms { diff --git a/jsapp/js/components/permissions/userAssetPermsEditor.component.tsx b/jsapp/js/components/permissions/userAssetPermsEditor.component.tsx index 79273cbbc4..54135508a2 100644 --- a/jsapp/js/components/permissions/userAssetPermsEditor.component.tsx +++ b/jsapp/js/components/permissions/userAssetPermsEditor.component.tsx @@ -1,5 +1,6 @@ import React from 'react'; import clonedeep from 'lodash.clonedeep'; +import cx from 'classnames'; import Checkbox from 'js/components/common/checkbox'; import TextBox from 'js/components/common/textBox'; import Button from 'js/components/common/button'; @@ -38,6 +39,7 @@ import {getSurveyFlatPaths} from 'js/assetUtils'; import assetStore from 'js/assetStore'; import KoboSelect from 'js/components/common/koboSelect'; import type {KoboSelectOption} from 'js/components/common/koboSelect'; +import styles from './userAssetPermsEditor.module.scss'; const PARTIAL_PLACEHOLDER = t('Enter usernames separated by comma'); const USERNAMES_SEPARATOR = ','; @@ -591,7 +593,7 @@ export default class UserAssetPermsEditor extends React.Component< if (this.isAssignable(CHECKBOX_PERM_PAIRS[checkboxName])) { const listName = getPartialByUsersListName(checkboxName); return ( -
+
{this.renderCheckbox(checkboxName)} {this.state[checkboxName] === true && ( @@ -641,33 +643,46 @@ export default class UserAssetPermsEditor extends React.Component< const valueProp = getPartialByResponsesValueName(checkboxName); return ( -
+
{this.renderCheckbox(checkboxName)} {this.state[checkboxName] === true && ( - <> +
{ - console.log('xxx newSelectedOption', newSelectedOption); + // Update state object in non mutable way + let output = clonedeep(this.state); + output = Object.assign(output, { + [questionProp]: newSelectedOption, + }); + this.setState(output); } } /> - {/* Yes, we display an equals character between select and textbox here :) */} + {/* We display an equals character between elements here :) */} = {console.log('xxx newVal', newVal)}} + onChange={(newVal: string) => { + // Update state object in non mutable way + let output = clonedeep(this.state); + output = Object.assign(output, { + [valueProp]: newVal, + }); + this.setState(output); + }} /> - +
)}
); @@ -692,7 +707,7 @@ export default class UserAssetPermsEditor extends React.Component< > {isNew && ( // don't display username editor when editing existing user -
+
)} -
+
{this.isAssignable('view_asset') && this.renderCheckbox('formView')} {this.isAssignable('change_asset') && this.renderCheckbox('formEdit')} @@ -745,7 +760,7 @@ export default class UserAssetPermsEditor extends React.Component< this.renderCheckbox('formManage')}
-
+