Add read-only mode to map and array editors
This commit is contained in:
parent
8a4c19dd17
commit
46bfac7540
13 changed files with 174 additions and 79 deletions
1
frontend-reactive/app/components/account/full.hbs
Normal file
1
frontend-reactive/app/components/account/full.hbs
Normal file
|
|
@ -0,0 +1 @@
|
|||
{{yield}}
|
||||
1
frontend-reactive/app/components/account/overview.hbs
Normal file
1
frontend-reactive/app/components/account/overview.hbs
Normal file
|
|
@ -0,0 +1 @@
|
|||
{{yield}}
|
||||
|
|
@ -1,29 +1,29 @@
|
|||
import { action } from '@ember/object'
|
||||
import Component from '@glimmer/component'
|
||||
import { tracked } from '@glimmer/tracking'
|
||||
import isValidMail from 'frontend-reactive/helpers/is-valid-mail'
|
||||
import { action } from '@ember/object';
|
||||
import Component from '@glimmer/component';
|
||||
import { tracked } from '@glimmer/tracking';
|
||||
import isValidMail from 'frontend-reactive/helpers/is-valid-mail';
|
||||
|
||||
export interface AuthPostRegistrationFormSignature {
|
||||
// The arguments accepted by the component
|
||||
Args: {
|
||||
username: string
|
||||
}
|
||||
username: string;
|
||||
};
|
||||
// Any blocks yielded by the component
|
||||
Blocks: {
|
||||
default: []
|
||||
}
|
||||
default: [];
|
||||
};
|
||||
// The element to which `...attributes` is applied in the component template
|
||||
Element: null
|
||||
Element: null;
|
||||
}
|
||||
|
||||
export default class AuthPostRegistrationForm extends Component<AuthPostRegistrationFormSignature> {
|
||||
@tracked displayname: string = this.args.username
|
||||
@tracked description: string = ''
|
||||
@tracked gender: Array<{ value: string }> = []
|
||||
@tracked displayname: string = this.args.username;
|
||||
@tracked description: string = '';
|
||||
@tracked gender: Array<{ value: string }> = [];
|
||||
@tracked beingTypes: Array<{
|
||||
name: string
|
||||
checked: boolean
|
||||
description: string
|
||||
name: string;
|
||||
checked: boolean;
|
||||
description: string;
|
||||
}> = [
|
||||
{
|
||||
name: 'Human',
|
||||
|
|
@ -55,22 +55,22 @@ export default class AuthPostRegistrationForm extends Component<AuthPostRegistra
|
|||
description: 'Doll',
|
||||
checked: false,
|
||||
},
|
||||
]
|
||||
@tracked defaultpostmode: string = 'Public'
|
||||
@tracked followapproval: boolean = false
|
||||
@tracked customProperties: Array<{ key: string; value: string }> = []
|
||||
@tracked indexable: boolean = true
|
||||
@tracked mail = { mail: '', valid: false }
|
||||
@tracked enableBlueskyIntegration = false
|
||||
];
|
||||
@tracked defaultpostmode: string = 'Public';
|
||||
@tracked followapproval: boolean = false;
|
||||
@tracked customProperties: Array<{ key: string; value: string }> = [];
|
||||
@tracked indexable: boolean = true;
|
||||
@tracked mail = { mail: '', valid: false };
|
||||
@tracked enableBlueskyIntegration = false;
|
||||
|
||||
genderAddedHandler(newIndex: number) {
|
||||
console.log('gender added')
|
||||
console.log('gender added');
|
||||
}
|
||||
genderRemovedHandler(removedIndex: number) {
|
||||
console.log('gender removed')
|
||||
console.log('gender removed');
|
||||
}
|
||||
|
||||
@action test() {
|
||||
console.log(this.mail)
|
||||
console.log(this.mail);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="mail-entry {{@wrapper-classes}}">
|
||||
<label>
|
||||
Email
|
||||
<!--<div class="filling-spacer"/>-->
|
||||
{{!--<div class="filling-spacer"/>--}}
|
||||
<Input
|
||||
class="mail-input {{if this.mailOk "mail-input-ok" "mail-input-error"}} {{@input-classes}}"
|
||||
@type="text"
|
||||
|
|
|
|||
|
|
@ -1,27 +1,40 @@
|
|||
<div class="{{@wrapper-classes}}">
|
||||
<ul>
|
||||
{{#each this.args.list as |element index|}}
|
||||
<li>
|
||||
<div class="string-array-element-wrapper">
|
||||
<Input @type="text" @value={{element.key}} />
|
||||
<Input @type="text" @value={{element.value}} />
|
||||
<div
|
||||
class="{{@remove-element-classes}}"
|
||||
type="button"
|
||||
{{on "click" (fn this.removeElement index)}}
|
||||
>
|
||||
X
|
||||
{{#if @readonly}}
|
||||
<ul>
|
||||
{{#each this.args.list as |element|}}
|
||||
<li>
|
||||
<div class="string-array-element-wrapper">
|
||||
<p class="{{@element-key-classes}}">{{element.key}}</p>
|
||||
<p class="{{@element-value-classes}}">{{element.value}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{else}}
|
||||
<ul>
|
||||
{{#each this.args.list as |element index|}}
|
||||
<li>
|
||||
<div class="string-array-element-wrapper">
|
||||
<Input @type="text" @value={{element.key}} />
|
||||
<Input @type="text" @value={{element.value}} />
|
||||
<div
|
||||
class="{{@remove-element-classes}}"
|
||||
type="button"
|
||||
{{on "click" (fn this.removeElement index)}}
|
||||
>
|
||||
X
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
|
||||
</ul>
|
||||
<div
|
||||
class="{{@add-element-classes}}"
|
||||
type="button"
|
||||
{{on "click" this.addElement}}
|
||||
>
|
||||
Add element
|
||||
</div>
|
||||
</ul>
|
||||
<div
|
||||
class="{{@add-element-classes}}"
|
||||
type="button"
|
||||
{{on "click" this.addElement}}
|
||||
>
|
||||
Add element
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
|
@ -1,14 +1,26 @@
|
|||
<div class={{@wrapper-class}}>
|
||||
{{#each this.args.elements as |element|}}
|
||||
<label class={{@label-class}}>
|
||||
{{element.description}}
|
||||
<Input
|
||||
@type="checkbox"
|
||||
name="{{element.name}}"
|
||||
class="{{@input-classes}}"
|
||||
@checked={{element.checked}}
|
||||
{{on "change" this.onChange}}
|
||||
/>
|
||||
</label>
|
||||
{{/each}}
|
||||
{{#if @readonly}}
|
||||
<ul>
|
||||
{{#each this.args.elements as |element|}}
|
||||
{{#if element.checked}}
|
||||
<li>
|
||||
<p>{{element.name}}</p>
|
||||
</li>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{else}}
|
||||
{{#each this.args.elements as |element|}}
|
||||
<label class={{@label-class}}>
|
||||
{{element.description}}
|
||||
<Input
|
||||
@type="checkbox"
|
||||
name="{{element.name}}"
|
||||
class="{{@input-classes}}"
|
||||
@checked={{element.checked}}
|
||||
{{on "change" this.onChange}}
|
||||
/>
|
||||
</label>
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
|
@ -1,12 +1,16 @@
|
|||
<div class="{{@wrapper-class}}">
|
||||
{{#each @elements as |element index|}}
|
||||
<RadioButton
|
||||
@value="{{element}}"
|
||||
@groupValue={{@selected}}
|
||||
@name={{@name}}
|
||||
@required={{@required}}
|
||||
>
|
||||
{{element}}
|
||||
</RadioButton>
|
||||
{{/each}}
|
||||
{{#if @readonly}}
|
||||
<p class="{{@element-classes}}">{{@selected}}</p>
|
||||
{{else}}
|
||||
{{#each @elements as |element index|}}
|
||||
<RadioButton
|
||||
@value="{{element}}"
|
||||
@groupValue={{@selected}}
|
||||
@name={{@name}}
|
||||
@required={{@required}}
|
||||
>
|
||||
{{element}}
|
||||
</RadioButton>
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
|
@ -1,4 +1,11 @@
|
|||
<div class="{{@wrapper-classes}}">
|
||||
{{#if @readonly}}
|
||||
<ul>
|
||||
{{#each this.args.list as |element|}}
|
||||
<p class="{{@readonly-element-classes}}">{{element.value}}</p>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{else}}
|
||||
<ul>
|
||||
{{#each this.args.list as |element index|}}
|
||||
<li>
|
||||
|
|
@ -27,4 +34,5 @@
|
|||
>
|
||||
Add element
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue