gristlabs_grist-core/app/client/ui/FormSuccessPage.ts

92 lines
2.5 KiB
TypeScript
Raw Normal View History

import {makeT} from 'app/client/lib/localization';
import {FormModel} from 'app/client/models/FormModel';
import {
buildFormMessagePage,
cssFormMessageImage,
cssFormMessageImageContainer,
cssFormMessageText,
} from 'app/client/ui/FormContainer';
import {vars} from 'app/client/ui2018/cssVars';
import {getPageTitleSuffix} from 'app/common/gristUrls';
import {getGristConfig} from 'app/common/urlUtils';
import {Computed, Disposable, dom, makeTestId, styled} from 'grainjs';
const testId = makeTestId('test-form-');
const t = makeT('FormSuccessPage');
export class FormSuccessPage extends Disposable {
private _successText = Computed.create(this, this._model.formLayout, (_use, layout) => {
if (!layout) { return null; }
return layout.successText || t('Thank you! Your response has been recorded.');
});
private _showNewResponseButton = Computed.create(this, this._model.formLayout, (_use, layout) => {
return Boolean(layout?.anotherResponse);
});
constructor(private _model: FormModel) {
super();
document.title = `${t('Form Submitted')}${getPageTitleSuffix(getGristConfig())}`;
}
public buildDom() {
return buildFormMessagePage(() => [
cssFormSuccessMessageImageContainer(
cssFormSuccessMessageImage({src: 'img/form-success.svg'}),
),
cssFormMessageText(dom.text(this._successText), testId('success-page-text')),
dom.maybe(this._showNewResponseButton, () =>
cssFormButtons(
cssFormNewResponseButton(
t('Submit new response'),
dom.on('click', () => this._handleClickNewResponseButton()),
),
)
),
], testId('success-page'));
}
private async _handleClickNewResponseButton() {
await this._model.fetchForm();
}
}
const cssFormSuccessMessageImageContainer = styled(cssFormMessageImageContainer, `
height: 215px;
`);
const cssFormSuccessMessageImage = styled(cssFormMessageImage, `
max-height: 215px;
max-width: 250px;
`);
const cssFormButtons = styled('div', `
display: flex;
justify-content: center;
align-items: center;
margin-top: 24px;
`);
const cssFormNewResponseButton = styled('button', `
position: relative;
outline: none;
border-style: none;
line-height: normal;
user-select: none;
display: flex;
justify-content: center;
align-items: center;
padding: 12px 24px;
min-height: 40px;
background: ${vars.primaryBg};
border-radius: 3px;
color: ${vars.primaryFg};
&:hover {
cursor: pointer;
background: ${vars.primaryBgHover};
}
`);