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.
|
// directory from which Croodle is served.
|
||||||
const relativeUrl = this.router.currentURL;
|
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
|
// The URL under which Croodle is served, is not known at
|
||||||
// build-time. But we can construct it ourself, by parsing
|
// build-time. But we can construct it ourself, by parsing
|
||||||
// window.location.href and replacing the hash part.
|
// 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;
|
podModulePrefix: string;
|
||||||
locationType: 'history' | 'hash' | 'none';
|
locationType: 'history' | 'hash' | 'none';
|
||||||
rootURL: string;
|
rootURL: string;
|
||||||
APP: {
|
APP: Record<string, unknown>;
|
||||||
version: string;
|
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default config;
|
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;
|
const { poll } = model;
|
||||||
// As know that the route is `poll.participation`, which means that there
|
// As know that the route is `poll.participation`, which means that there
|
||||||
// is a parent `poll` for sure.
|
// 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) {
|
if (!userData) {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
|
|
|
@ -220,7 +220,7 @@ export default class Poll {
|
||||||
passphrase: string,
|
passphrase: string,
|
||||||
) {
|
) {
|
||||||
const creationDate = new Date().toISOString();
|
const creationDate = new Date().toISOString();
|
||||||
const version = config.APP.version;
|
const version = config.APP['version'] as string;
|
||||||
const timezone =
|
const timezone =
|
||||||
pollType === 'FindADate' &&
|
pollType === 'FindADate' &&
|
||||||
options.some(({ title }) => {
|
options.some(({ title }) => {
|
||||||
|
|
|
@ -46,7 +46,7 @@ export default class User {
|
||||||
passphrase: string,
|
passphrase: string,
|
||||||
) {
|
) {
|
||||||
const creationDate = new Date().toISOString();
|
const creationDate = new Date().toISOString();
|
||||||
const version = config.APP.version;
|
const version = config.APP['version'] as string;
|
||||||
|
|
||||||
const payload = {
|
const payload = {
|
||||||
user: {
|
user: {
|
||||||
|
|
|
@ -28,7 +28,7 @@ export default class CreateRoute extends Route {
|
||||||
|
|
||||||
beforeModel(transition: Transition) {
|
beforeModel(transition: Transition) {
|
||||||
// enforce that wizzard is started at create.index
|
// 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');
|
this.router.transitionTo('create.index');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,7 +18,7 @@ export default class PollRoute extends Route {
|
||||||
}
|
}
|
||||||
|
|
||||||
redirect(poll: Poll, transition: Transition) {
|
redirect(poll: Poll, transition: Transition) {
|
||||||
if (transition.to.name === 'poll.index') {
|
if (transition.to?.name === 'poll.index') {
|
||||||
const { encryptionKey } = this.paramsFor(this.routeName) as {
|
const { encryptionKey } = this.paramsFor(this.routeName) as {
|
||||||
encryptionKey: string;
|
encryptionKey: string;
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,42 +1 @@
|
||||||
<div class="cr-form-wrapper box">
|
<CreateIndex @formData={{@model.formData}} @poll={{@model.poll}} />
|
||||||
<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>
|
|
62
package-lock.json
generated
62
package-lock.json
generated
|
@ -7890,16 +7890,6 @@
|
||||||
"@simple-dom/interface": "^1.4.0"
|
"@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": {
|
"node_modules/@glimmer/node": {
|
||||||
"version": "0.84.3",
|
"version": "0.84.3",
|
||||||
"resolved": "https://registry.npmjs.org/@glimmer/node/-/node-0.84.3.tgz",
|
"resolved": "https://registry.npmjs.org/@glimmer/node/-/node-0.84.3.tgz",
|
||||||
|
@ -8019,16 +8009,6 @@
|
||||||
"@simple-dom/interface": "^1.4.0"
|
"@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": {
|
"node_modules/@glimmer/runtime": {
|
||||||
"version": "0.84.3",
|
"version": "0.84.3",
|
||||||
"resolved": "https://registry.npmjs.org/@glimmer/runtime/-/runtime-0.84.3.tgz",
|
"resolved": "https://registry.npmjs.org/@glimmer/runtime/-/runtime-0.84.3.tgz",
|
||||||
|
@ -8061,16 +8041,6 @@
|
||||||
"@simple-dom/interface": "^1.4.0"
|
"@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": {
|
"node_modules/@glimmer/syntax": {
|
||||||
"version": "0.84.3",
|
"version": "0.84.3",
|
||||||
"resolved": "https://registry.npmjs.org/@glimmer/syntax/-/syntax-0.84.3.tgz",
|
"resolved": "https://registry.npmjs.org/@glimmer/syntax/-/syntax-0.84.3.tgz",
|
||||||
|
@ -8111,10 +8081,14 @@
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/@glimmer/validator": {
|
"node_modules/@glimmer/validator": {
|
||||||
"version": "0.44.0",
|
"version": "0.84.3",
|
||||||
"resolved": "https://registry.npmjs.org/@glimmer/validator/-/validator-0.44.0.tgz",
|
"resolved": "https://registry.npmjs.org/@glimmer/validator/-/validator-0.84.3.tgz",
|
||||||
"integrity": "sha512-i01plR0EgFVz69GDrEuFgq1NheIjZcyTy3c7q+w7d096ddPVeVcRzU3LKaqCfovvLJ+6lJx40j45ecycASUUyw==",
|
"integrity": "sha512-RTBV4TokUB0vI31UC7ikpV7lOYpWUlyqaKV//pRC4pexYMlmqnVhkFrdiimB/R1XyNdUOQUmnIAcdic39NkbhQ==",
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@glimmer/env": "^0.1.7",
|
||||||
|
"@glimmer/global-context": "0.84.3"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@glimmer/vm": {
|
"node_modules/@glimmer/vm": {
|
||||||
"version": "0.84.3",
|
"version": "0.84.3",
|
||||||
|
@ -32680,16 +32654,6 @@
|
||||||
"@simple-dom/interface": "^1.4.0"
|
"@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": {
|
"node_modules/ember-source/node_modules/@types/fs-extra": {
|
||||||
"version": "5.1.0",
|
"version": "5.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-5.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-5.1.0.tgz",
|
||||||
|
@ -34326,16 +34290,6 @@
|
||||||
"node": "12.* || 14.* || >= 16.*"
|
"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": {
|
"node_modules/ember-template-recast/node_modules/ansi-styles": {
|
||||||
"version": "4.3.0",
|
"version": "4.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||||
|
|
|
@ -136,6 +136,7 @@
|
||||||
"webpack": "5.89.0"
|
"webpack": "5.89.0"
|
||||||
},
|
},
|
||||||
"overrides": {
|
"overrides": {
|
||||||
|
"@glimmer/validator": "0.84.3",
|
||||||
"ember-element-helper": "0.8.5"
|
"ember-element-helper": "0.8.5"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
|
|
Loading…
Reference in a new issue