(core) In Welcome questionnaire, add 'School' option, ask to enter company or school

Test Plan: Added some checks that company and use_school get recorded. (Live doc will need to be updated before release.)

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D2650
This commit is contained in:
Dmitry S 2020-10-31 03:09:39 -04:00
parent 71519d9e5c
commit 275a35d03a
2 changed files with 12 additions and 2 deletions

View File

@ -101,6 +101,8 @@ export class WelcomePage extends Disposable {
*/ */
private _buildInfoForm(owner: MultiHolder) { private _buildInfoForm(owner: MultiHolder) {
const allFilled = Observable.create(owner, false); const allFilled = Observable.create(owner, false);
const whereObs = Observable.create(owner, '');
return forms.form({method: "post", action: location.href }, return forms.form({method: "post", action: location.href },
handleSubmit(), handleSubmit(),
(elem) => { setTimeout(() => elem.focus(), 0); }, (elem) => { setTimeout(() => elem.focus(), 0); },
@ -108,7 +110,12 @@ export class WelcomePage extends Disposable {
forms.question( forms.question(
forms.text('Where do you plan to use Grist?'), forms.text('Where do you plan to use Grist?'),
forms.checkboxItem([{name: 'use_work'}], 'Work'), forms.checkboxItem([{name: 'use_work'}], 'Work'),
forms.checkboxItem([{name: 'use_school'}], 'School'),
forms.checkboxItem([{name: 'use_personal'}], 'Personal'), forms.checkboxItem([{name: 'use_personal'}], 'Personal'),
forms.textBox({name: 'company'},
dom.hide(use => !use(whereObs)),
dom.attr('placeholder', (use) => use(whereObs) === 'school' ? 'Your School' : 'Your Company')
),
), ),
forms.question( forms.question(
forms.text('What brings you to Grist?'), forms.text('What brings you to Grist?'),
@ -127,6 +134,7 @@ export class WelcomePage extends Disposable {
), ),
dom.on('change', (e, form) => { dom.on('change', (e, form) => {
allFilled.set(forms.isFormFilled(form, ['use_*', 'reason_*', 'industry', 'role'])); allFilled.set(forms.isFormFilled(form, ['use_*', 'reason_*', 'industry', 'role']));
whereObs.set(form.use_work.checked ? 'work' : form.use_school.checked ? 'school' : '');
}), }),
cssButtonGroup( cssButtonGroup(
cssButtonGroup.cls('-right'), cssButtonGroup.cls('-right'),

View File

@ -15,7 +15,7 @@
* ); * );
*/ */
import {cssCheckboxSquare, cssLabel} from 'app/client/ui2018/checkbox'; import {cssCheckboxSquare, cssLabel} from 'app/client/ui2018/checkbox';
import {dom, DomElementArg, styled} from 'grainjs'; import {dom, DomArg, DomElementArg, styled} from 'grainjs';
export { export {
form, form,
@ -30,7 +30,9 @@ export {
* array of arguments to the checkbox; the rest goes into the label. E.g. * array of arguments to the checkbox; the rest goes into the label. E.g.
* checkboxItem([{name: 'ok'}], 'Check to approve'); * checkboxItem([{name: 'ok'}], 'Check to approve');
*/ */
export function checkboxItem(checkboxArgs: DomElementArg[], ...labelArgs: DomElementArg[]): HTMLElement { export function checkboxItem(
checkboxArgs: Array<DomArg<HTMLInputElement>>, ...labelArgs: DomElementArg[]
): HTMLElement {
return cssCheckboxLabel( return cssCheckboxLabel(
cssCheckbox({type: 'checkbox'}, ...checkboxArgs), cssCheckbox({type: 'checkbox'}, ...checkboxArgs),
...labelArgs); ...labelArgs);