refactor /create/index controller to component (#760)
This commit is contained in:
parent
41d6b90099
commit
4950e327ed
13 changed files with 102 additions and 137 deletions
42
app/components/create-index.hbs
Normal file
42
app/components/create-index.hbs
Normal file
|
@ -0,0 +1,42 @@
|
|||
<div class="cr-form-wrapper box">
|
||||
<BsForm
|
||||
@formLayout="horizontal"
|
||||
@model={{@formData}}
|
||||
@onSubmit={{this.submit}}
|
||||
as |form|
|
||||
>
|
||||
<form.element
|
||||
@label={{t "create.index.input.pollType.label"}}
|
||||
@property="pollType"
|
||||
@showValidationOn={{array "change" "focusOut"}}
|
||||
@useIcons={{false}}
|
||||
class="poll-type"
|
||||
data-test-form-element="poll-type"
|
||||
as |el|
|
||||
>
|
||||
<select
|
||||
id={{el.id}}
|
||||
class="form-control"
|
||||
required
|
||||
{{on "change" (pick "target.value" el.setValue)}}
|
||||
{{autofocus}}
|
||||
>
|
||||
<option value="FindADate" selected={{eq el.value "FindADate"}}>
|
||||
{{t "pollTypes.findADate.label"}}
|
||||
</option>
|
||||
<option value="MakeAPoll" selected={{eq el.value "MakeAPoll"}}>
|
||||
{{t "pollTypes.makeAPoll.label"}}
|
||||
</option>
|
||||
</select>
|
||||
</form.element>
|
||||
|
||||
<div class="row cr-steps-bottom-nav">
|
||||
<div class="col-6 col-md-8 order-12">
|
||||
<NextButton />
|
||||
</div>
|
||||
<div class="col-6 col-md-4 order-1 text-right">
|
||||
<BackButton disabled />
|
||||
</div>
|
||||
</div>
|
||||
</BsForm>
|
||||
</div>
|
38
app/components/create-index.ts
Normal file
38
app/components/create-index.ts
Normal file
|
@ -0,0 +1,38 @@
|
|||
import Component from '@glimmer/component';
|
||||
import { inject as service } from '@ember/service';
|
||||
import { action } from '@ember/object';
|
||||
import { registerDestructor } from '@ember/destroyable';
|
||||
import type RouterService from '@ember/routing/router-service';
|
||||
import type { CreateIndexRouteModel } from '../routes/create/index';
|
||||
|
||||
export interface CreateOptionsIndexSignature {
|
||||
Args: {
|
||||
formData: CreateIndexRouteModel['formData'];
|
||||
poll: CreateIndexRouteModel['poll'];
|
||||
};
|
||||
}
|
||||
|
||||
export default class CreateIndexComponent extends Component<CreateOptionsIndexSignature> {
|
||||
@service declare router: RouterService;
|
||||
|
||||
@action
|
||||
submit() {
|
||||
this.router.transitionTo('create.meta');
|
||||
}
|
||||
|
||||
constructor(owner: unknown, args: CreateOptionsIndexSignature['Args']) {
|
||||
super(owner, args);
|
||||
|
||||
registerDestructor(this, () => {
|
||||
const { poll, formData } = this.args;
|
||||
|
||||
poll.pollType = formData.pollType;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
declare module '@glint/environment-ember-loose/registry' {
|
||||
export default interface Registry {
|
||||
CreateIndex: typeof CreateIndexComponent;
|
||||
}
|
||||
}
|
|
@ -14,6 +14,10 @@ export default class SharePollUrlComponent extends Component {
|
|||
// directory from which Croodle is served.
|
||||
const relativeUrl = this.router.currentURL;
|
||||
|
||||
if (!relativeUrl) {
|
||||
throw new Error('Relative URL is `null`. Cannot calculate poll URL.');
|
||||
}
|
||||
|
||||
// The URL under which Croodle is served, is not known at
|
||||
// build-time. But we can construct it ourself, by parsing
|
||||
// window.location.href and replacing the hash part.
|
||||
|
|
4
app/config/environment.d.ts
vendored
4
app/config/environment.d.ts
vendored
|
@ -8,9 +8,7 @@ declare const config: {
|
|||
podModulePrefix: string;
|
||||
locationType: 'history' | 'hash' | 'none';
|
||||
rootURL: string;
|
||||
APP: {
|
||||
version: string;
|
||||
};
|
||||
APP: Record<string, unknown>;
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
|
|
@ -1,33 +0,0 @@
|
|||
import Controller from '@ember/controller';
|
||||
import { inject as service } from '@ember/service';
|
||||
import { action } from '@ember/object';
|
||||
import type RouterService from '@ember/routing/router-service';
|
||||
import type Transition from '@ember/routing/transition';
|
||||
import type { CreateIndexRouteModel } from 'croodle/routes/create/index';
|
||||
|
||||
export default class CreateIndex extends Controller {
|
||||
@service declare router: RouterService;
|
||||
|
||||
declare model: CreateIndexRouteModel;
|
||||
|
||||
@action
|
||||
submit() {
|
||||
this.router.transitionTo('create.meta');
|
||||
}
|
||||
|
||||
@action
|
||||
handleTransition(transition: Transition) {
|
||||
if (transition.from?.name === 'create.index') {
|
||||
const { poll, formData } = this.model;
|
||||
|
||||
poll.pollType = formData.pollType;
|
||||
}
|
||||
}
|
||||
|
||||
constructor() {
|
||||
// eslint-disable-next-line prefer-rest-params
|
||||
super(...arguments);
|
||||
|
||||
this.router.on('routeWillChange', this.handleTransition);
|
||||
}
|
||||
}
|
|
@ -70,7 +70,9 @@ export default class PollParticipationController extends Controller {
|
|||
const { poll } = model;
|
||||
// As know that the route is `poll.participation`, which means that there
|
||||
// is a parent `poll` for sure.
|
||||
const { encryptionKey } = this.router.currentRoute.parent!.queryParams;
|
||||
const { encryptionKey } = this.router.currentRoute?.parent?.queryParams as {
|
||||
encryptionKey: string;
|
||||
};
|
||||
|
||||
if (!userData) {
|
||||
throw new Error(
|
||||
|
|
|
@ -220,7 +220,7 @@ export default class Poll {
|
|||
passphrase: string,
|
||||
) {
|
||||
const creationDate = new Date().toISOString();
|
||||
const version = config.APP.version;
|
||||
const version = config.APP['version'] as string;
|
||||
const timezone =
|
||||
pollType === 'FindADate' &&
|
||||
options.some(({ title }) => {
|
||||
|
|
|
@ -46,7 +46,7 @@ export default class User {
|
|||
passphrase: string,
|
||||
) {
|
||||
const creationDate = new Date().toISOString();
|
||||
const version = config.APP.version;
|
||||
const version = config.APP['version'] as string;
|
||||
|
||||
const payload = {
|
||||
user: {
|
||||
|
|
|
@ -28,7 +28,7 @@ export default class CreateRoute extends Route {
|
|||
|
||||
beforeModel(transition: Transition) {
|
||||
// enforce that wizzard is started at create.index
|
||||
if (transition.to.name !== 'create.index') {
|
||||
if (transition.to?.name !== 'create.index') {
|
||||
this.router.transitionTo('create.index');
|
||||
}
|
||||
}
|
||||
|
|
|
@ -18,7 +18,7 @@ export default class PollRoute extends Route {
|
|||
}
|
||||
|
||||
redirect(poll: Poll, transition: Transition) {
|
||||
if (transition.to.name === 'poll.index') {
|
||||
if (transition.to?.name === 'poll.index') {
|
||||
const { encryptionKey } = this.paramsFor(this.routeName) as {
|
||||
encryptionKey: string;
|
||||
};
|
||||
|
|
|
@ -1,42 +1 @@
|
|||
<div class="cr-form-wrapper box">
|
||||
<BsForm
|
||||
@formLayout="horizontal"
|
||||
@model={{@model.formData}}
|
||||
@onSubmit={{this.submit}}
|
||||
as |form|
|
||||
>
|
||||
<form.element
|
||||
@label={{t "create.index.input.pollType.label"}}
|
||||
@property="pollType"
|
||||
@showValidationOn={{array "change" "focusOut"}}
|
||||
@useIcons={{false}}
|
||||
class="poll-type"
|
||||
data-test-form-element="poll-type"
|
||||
as |el|
|
||||
>
|
||||
<select
|
||||
id={{el.id}}
|
||||
class="form-control"
|
||||
required
|
||||
{{on "change" (pick "target.value" el.setValue)}}
|
||||
{{autofocus}}
|
||||
>
|
||||
<option value="FindADate" selected={{eq el.value "FindADate"}}>
|
||||
{{t "pollTypes.findADate.label"}}
|
||||
</option>
|
||||
<option value="MakeAPoll" selected={{eq el.value "MakeAPoll"}}>
|
||||
{{t "pollTypes.makeAPoll.label"}}
|
||||
</option>
|
||||
</select>
|
||||
</form.element>
|
||||
|
||||
<div class="row cr-steps-bottom-nav">
|
||||
<div class="col-6 col-md-8 order-12">
|
||||
<NextButton />
|
||||
</div>
|
||||
<div class="col-6 col-md-4 order-1 text-right">
|
||||
<BackButton disabled />
|
||||
</div>
|
||||
</div>
|
||||
</BsForm>
|
||||
</div>
|
||||
<CreateIndex @formData={{@model.formData}} @poll={{@model.poll}} />
|
62
package-lock.json
generated
62
package-lock.json
generated
|
@ -7890,16 +7890,6 @@
|
|||
"@simple-dom/interface": "^1.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@glimmer/manager/node_modules/@glimmer/validator": {
|
||||
"version": "0.84.3",
|
||||
"resolved": "https://registry.npmjs.org/@glimmer/validator/-/validator-0.84.3.tgz",
|
||||
"integrity": "sha512-RTBV4TokUB0vI31UC7ikpV7lOYpWUlyqaKV//pRC4pexYMlmqnVhkFrdiimB/R1XyNdUOQUmnIAcdic39NkbhQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@glimmer/env": "^0.1.7",
|
||||
"@glimmer/global-context": "0.84.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@glimmer/node": {
|
||||
"version": "0.84.3",
|
||||
"resolved": "https://registry.npmjs.org/@glimmer/node/-/node-0.84.3.tgz",
|
||||
|
@ -8019,16 +8009,6 @@
|
|||
"@simple-dom/interface": "^1.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@glimmer/reference/node_modules/@glimmer/validator": {
|
||||
"version": "0.84.3",
|
||||
"resolved": "https://registry.npmjs.org/@glimmer/validator/-/validator-0.84.3.tgz",
|
||||
"integrity": "sha512-RTBV4TokUB0vI31UC7ikpV7lOYpWUlyqaKV//pRC4pexYMlmqnVhkFrdiimB/R1XyNdUOQUmnIAcdic39NkbhQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@glimmer/env": "^0.1.7",
|
||||
"@glimmer/global-context": "0.84.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@glimmer/runtime": {
|
||||
"version": "0.84.3",
|
||||
"resolved": "https://registry.npmjs.org/@glimmer/runtime/-/runtime-0.84.3.tgz",
|
||||
|
@ -8061,16 +8041,6 @@
|
|||
"@simple-dom/interface": "^1.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@glimmer/runtime/node_modules/@glimmer/validator": {
|
||||
"version": "0.84.3",
|
||||
"resolved": "https://registry.npmjs.org/@glimmer/validator/-/validator-0.84.3.tgz",
|
||||
"integrity": "sha512-RTBV4TokUB0vI31UC7ikpV7lOYpWUlyqaKV//pRC4pexYMlmqnVhkFrdiimB/R1XyNdUOQUmnIAcdic39NkbhQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@glimmer/env": "^0.1.7",
|
||||
"@glimmer/global-context": "0.84.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@glimmer/syntax": {
|
||||
"version": "0.84.3",
|
||||
"resolved": "https://registry.npmjs.org/@glimmer/syntax/-/syntax-0.84.3.tgz",
|
||||
|
@ -8111,10 +8081,14 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/@glimmer/validator": {
|
||||
"version": "0.44.0",
|
||||
"resolved": "https://registry.npmjs.org/@glimmer/validator/-/validator-0.44.0.tgz",
|
||||
"integrity": "sha512-i01plR0EgFVz69GDrEuFgq1NheIjZcyTy3c7q+w7d096ddPVeVcRzU3LKaqCfovvLJ+6lJx40j45ecycASUUyw==",
|
||||
"dev": true
|
||||
"version": "0.84.3",
|
||||
"resolved": "https://registry.npmjs.org/@glimmer/validator/-/validator-0.84.3.tgz",
|
||||
"integrity": "sha512-RTBV4TokUB0vI31UC7ikpV7lOYpWUlyqaKV//pRC4pexYMlmqnVhkFrdiimB/R1XyNdUOQUmnIAcdic39NkbhQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@glimmer/env": "^0.1.7",
|
||||
"@glimmer/global-context": "0.84.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@glimmer/vm": {
|
||||
"version": "0.84.3",
|
||||
|
@ -32680,16 +32654,6 @@
|
|||
"@simple-dom/interface": "^1.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ember-source/node_modules/@glimmer/validator": {
|
||||
"version": "0.84.3",
|
||||
"resolved": "https://registry.npmjs.org/@glimmer/validator/-/validator-0.84.3.tgz",
|
||||
"integrity": "sha512-RTBV4TokUB0vI31UC7ikpV7lOYpWUlyqaKV//pRC4pexYMlmqnVhkFrdiimB/R1XyNdUOQUmnIAcdic39NkbhQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@glimmer/env": "^0.1.7",
|
||||
"@glimmer/global-context": "0.84.3"
|
||||
}
|
||||
},
|
||||
"node_modules/ember-source/node_modules/@types/fs-extra": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-5.1.0.tgz",
|
||||
|
@ -34326,16 +34290,6 @@
|
|||
"node": "12.* || 14.* || >= 16.*"
|
||||
}
|
||||
},
|
||||
"node_modules/ember-template-recast/node_modules/@glimmer/validator": {
|
||||
"version": "0.84.3",
|
||||
"resolved": "https://registry.npmjs.org/@glimmer/validator/-/validator-0.84.3.tgz",
|
||||
"integrity": "sha512-RTBV4TokUB0vI31UC7ikpV7lOYpWUlyqaKV//pRC4pexYMlmqnVhkFrdiimB/R1XyNdUOQUmnIAcdic39NkbhQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@glimmer/env": "^0.1.7",
|
||||
"@glimmer/global-context": "0.84.3"
|
||||
}
|
||||
},
|
||||
"node_modules/ember-template-recast/node_modules/ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
|
|
|
@ -136,6 +136,7 @@
|
|||
"webpack": "5.89.0"
|
||||
},
|
||||
"overrides": {
|
||||
"@glimmer/validator": "0.84.3",
|
||||
"ember-element-helper": "0.8.5"
|
||||
},
|
||||
"engines": {
|
||||
|
|
Loading…
Reference in a new issue