Skip to content

Commit

Permalink
write open and closed question components in octane
Browse files Browse the repository at this point in the history
  • Loading branch information
@DrumsnChocolate
DrumsnChocolate committed Nov 3, 2024
1 parent 2ea0d64 commit a90eb41
Show file tree
Hide file tree
Showing 5 changed files with 133 additions and 128 deletions.
51 changes: 25 additions & 26 deletions app/components/form/closed-question.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

{{#unless question.form.hasResponses}}
<div class='float-md-end mb-3'>
<FaIcon @icon='xmark' {{on 'click' (action 'deleteQuestion')}} />
<FaIcon @icon='xmark' {{on 'click' this.deleteQuestion}} />
</div>
{{/unless}}

Expand All @@ -13,8 +13,8 @@
aria-label='Vraag'
name='question'
placeholder='Vraag'
@value={{question.question}}
disabled={{question.form.hasResponses}}
@value={{@question.question}}
disabled={{@question.form.hasResponses}}
/>
</div>

Expand All @@ -25,11 +25,10 @@
<label class='visually-hidden form-label'>Vraagtype</label>
<Input::SelectInput
@class='form-select w-auto'
@required={{required}}
@options={{questionTypeOptions}}
@placeholder={{Vraagtype}}
@value={{question.fieldType}}
@disabled={{question.form.hasResponses}}
@options={{this.questionTypeOptions}}
@placeholder="vraagtype"
@value={{@question.fieldType}}
@disabled={{@question.form.hasResponses}}
/>
</div>

Expand All @@ -38,22 +37,22 @@
class='form-check-input'
@type='checkbox'
name='required'
@checked={{question.required}}
disabled={{question.form.hasResponses}}
id="question-{{question.position}}-required-check"
@checked={{@question.required}}
disabled={{@question.form.hasResponses}}
id="question-{{@question.position}}-required-check"
/>
<label class='form-check-label' for="question-{{question.position}}-required-check">Verplicht</label>
<label class='form-check-label' for="question-{{@question.position}}-required-check">Verplicht</label>
</div>
</div>
</div>

{{#unless question.form.hasResponses}}
{{#unless @question.form.hasResponses}}
<div class='col-md-7 col-sm-12'>
<div class='float-md-end'>
<button
type='button'
class='btn btn-default'
{{action 'moveQuestionUp'}}
{{on 'click' this.moveQuestionUp}}
>
<FaIcon @icon='arrow-up' />
Omhoog
Expand All @@ -62,7 +61,7 @@
<button
type='button'
class='btn btn-default'
{{action 'moveQuestionDown'}}
{{on 'click' this.moveQuestionDown}}
>
<FaIcon @icon='arrow-down' />
Omlaag
Expand All @@ -72,14 +71,14 @@
{{/unless}}
</div>

{{#each question.sortedOptions as |opt|}}
{{#each @question.sortedOptions as |opt|}}
{{#unless opt.isDeleted}}
<div class='d-flex mb-3'>
<span class='input-group-addon d-flex justify-content-center align-items-center me-3'>
<input id="question-{{question.position}}-option-{{opt.position}}-check" class="form-check-input" type={{question.fieldType}} disabled={{true}} />
<label for="question-{{question.position}}-option-{{opt.position}}-required-check"/>
<input id="question-{{@question.position}}-option-{{opt.position}}-check" class="form-check-input" type={{@question.fieldType}} disabled={{true}} />
<label for="question-{{@question.position}}-option-{{opt.position}}-required-check"/>
</span>

<div class='input-group'>
<Input
@type='text'
Expand All @@ -88,28 +87,28 @@
name='option'
placeholder='Optie'
@value={{opt.option}}
disabled={{question.form.hasResponses}}
disabled={{@question.form.hasResponses}}
/>

{{#unless question.form.hasResponses}}
{{#unless @question.form.hasResponses}}
<button
type='button'
class='btn btn-default'
{{action 'moveOptionUp' opt}}
{{on 'click' (fn this.moveOptionUp opt)}}
>
<FaIcon @icon='arrow-up' />
</button>
<button
type='button'
class='btn btn-default'
{{action 'moveOptionDown' opt}}
{{on 'click' (fn this.moveOptionDown opt)}}
>
<FaIcon @icon='arrow-down' />
</button>
<button
type='button'
class='btn btn-default'
{{action 'deleteOption' opt}}
{{on 'click' (fn this.deleteOption opt)}}
>
<FaIcon @icon='trash' />
</button>
Expand All @@ -119,8 +118,8 @@
{{/unless}}
{{/each}}

{{#unless question.form.hasResponses}}
<button type='button' class='btn btn-default mb-3' {{action 'addOption'}}>
{{#unless @question.form.hasResponses}}
<button type='button' class='btn btn-default mb-3' {{on 'click' this.addOption}}>
Optie toevoegen
</button>
{{/unless}}
77 changes: 39 additions & 38 deletions app/components/form/closed-question.js
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,43 @@
import { ClosedQuestionTypes } from 'amber-ui/constants';
import { inject as service } from '@ember/service';
import OpenQuestionComponent from './open-question';
import { action } from '@ember/object';

export default OpenQuestionComponent.extend({
store: service(),
questionTypes: ClosedQuestionTypes,
init() {
this._super();
},
actions: {
addOption() {
const position =
this.question.get('sortedOptions.lastObject.position') + 1 || 0;
this.store.createRecord('form/closed-question-option', {
question: this.question,
position,
});
},
deleteOption(option) {
option.deleteRecord();
},
moveOptionUp(option) {
const index = this.question.get('sortedOptions').indexOf(option);
if (index > 0) {
const previousOption = this.question
.get('sortedOptions')
.objectAt(index - 1);
this.send('switchPositions', option, previousOption);
}
},
moveOptionDown(option) {
const index = this.question.get('sortedOptions').indexOf(option);
if (index < this.question.get('sortedOptions.length') - 1) {
const nextOption = this.question
.get('sortedOptions')
.objectAt(index + 1);
this.send('switchPositions', option, nextOption);
}
},
},
});
export default class ClosedQuestionComponent extends OpenQuestionComponent {
@service store;
questionTypes = ClosedQuestionTypes;
@action
addOption() {

Check warning on line 10 in app/components/form/closed-question.js

View check run for this annotation

Codecov / codecov/patch

app/components/form/closed-question.js#L10 

Added line #L10 was not covered by tests
const position =
this.question.get('sortedOptions.lastObject.position') + 1 || 0;
this.store.createRecord('form/closed-question-option', {
question: this.question,
position,

Check warning on line 15 in app/components/form/closed-question.js

View check run for this annotation

Codecov / codecov/patch

app/components/form/closed-question.js#L14-L15 

Added lines #L14 - L15 were not covered by tests
});
}

@action
deleteOption(option) {
option.deleteRecord();
}

Check warning on line 23 in app/components/form/closed-question.js

View check run for this annotation

Codecov / codecov/patch

app/components/form/closed-question.js#L23 

Added line #L23 was not covered by tests
@action
moveOptionUp(option) {
const index = this.question.get('sortedOptions').indexOf(option);
if (index > 0) {
const previousOption = this.question
.get('sortedOptions')
.objectAt(index - 1);

Check warning on line 30 in app/components/form/closed-question.js

View check run for this annotation

Codecov / codecov/patch

app/components/form/closed-question.js#L28-L30 

Added lines #L28 - L30 were not covered by tests
this.switchPositions(option, previousOption);
}
}

Check warning on line 33 in app/components/form/closed-question.js

View check run for this annotation

Codecov / codecov/patch

app/components/form/closed-question.js#L33 

Added line #L33 was not covered by tests

@action
moveOptionDown(option) {
const index = this.question.get('sortedOptions').indexOf(option);
if (index < this.question.get('sortedOptions.length') - 1) {
const nextOption = this.question.get('sortedOptions').objectAt(index + 1);
this.switchPositions(option, nextOption);
}
}

Check warning on line 42 in app/components/form/closed-question.js

View check run for this annotation

Codecov / codecov/patch

app/components/form/closed-question.js#L39-L42 

Added lines #L39 - L42 were not covered by tests
}
4 changes: 2 additions & 2 deletions app/components/form/form-form.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@
<div class='card'>
<div class='card-body create-new-question'>
{{#if question.isOpenQuestion}}
{{form/open-question question form=model}}
<Form::OpenQuestion @question={{question}} @form={{model}}/>
{{else}}
{{form/closed-question question form=model}}
<Form::ClosedQuestion @question={{question}} @form={{model}}/>
{{/if}}
</div>
</div>
Expand Down
31 changes: 15 additions & 16 deletions app/components/form/open-question.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<span class='fw-bold mb-3'>Open vraag</span>

{{#unless question.form.hasResponses}}
{{#unless @question.form.hasResponses}}
<div class='float-md-end mb-3'>
<FaIcon @icon='xmark' {{on 'click' (action 'deleteQuestion')}} />
<FaIcon @icon='xmark' {{on 'click' this.deleteQuestion}} />
</div>
{{/unless}}

Expand All @@ -13,8 +13,8 @@
aria-label='Vraag'
name='question'
placeholder='Vraag'
@value={{question.question}}
disabled={{question.form.hasResponses}}
@value={{@question.question}}
disabled={{@question.form.hasResponses}}
/>
</div>

Expand All @@ -25,11 +25,10 @@
<label class='visually-hidden form-label'>Vraagtype</label>
<Input::SelectInput
@class='form-select'
@required={{required}}
@options={{questionTypeOptions}}
@placeholder={{Vraagtype}}
@value={{question.fieldType}}
@disabled={{question.form.hasResponses}}
@options={{this.questionTypeOptions}}
@placeholder="vraagtype"
@value={{@question.fieldType}}
@disabled={{@question.form.hasResponses}}
/>
</div>

Expand All @@ -38,22 +37,22 @@
class='form-check-input'
@type='checkbox'
name='required'
@checked={{question.required}}
disabled={{question.form.hasResponses}}
id="question-{{question.position}}-required-check"
@checked={{@question.required}}
disabled={{@question.form.hasResponses}}
id="question-{{@question.position}}-required-check"
/>
<label class='form-check-label' for="question-{{question.position}}-required-check">Verplicht</label>
<label class='form-check-label' for="question-{{@question.position}}-required-check">Verplicht</label>
</div>
</div>
</div>

{{#unless question.form.hasResponses}}
{{#unless @question.form.hasResponses}}
<div class='col-md-7 col-sm-12'>
<div class='float-md-end'>
<button
type='button'
class='btn btn-default'
{{action 'moveQuestionUp'}}
{{on 'click' this.moveQuestionUp}}
>
<FaIcon @icon='arrow-up' />
Omhoog
Expand All @@ -62,7 +61,7 @@
<button
type='button'
class='btn btn-default'
{{action 'moveQuestionDown'}}
{{on 'click' this.moveQuestionDown}}
>
<FaIcon @icon='arrow-down' />
Omlaag
Expand Down
Loading

0 comments on commit a90eb41

Please sign in to comment.