I'm trying to figure out how to make a chakra-react-select form, with options for selection that are defined as an enum in the Prisma schema as follows:
enum Category {
FUTURE
NATURAL
SOCIAL
}
I can see the form in the docs looks as follows:
<Select
isMulti
options={[
{
label: "I am red",
value: "I-am-red",
},
{
label: "I fallback to purple",
value: "i-am-purple",
}
]}
placeholder="Select categories"
closeMenuOnSelect={true}
onChange={onChange}
onBlur={onBlur}
value={value}
ref={ref}
/>
I can't find an example of how to make the prisma enum Category, the select options. I don't care if both label and value are the categories.
How can I use enum values as the select options?
You should be able to do something like this inside your select:
<Select
placeholder="Select categories"
>
{Object.keys(Category).map(cat => (<option>cat</option>))}
</Select>
Related
I have a Ant Design Form Item with a custom rule to check for name uniqueness. I only want this to be triggered in the edit scenario if the name was changed.
For example, the user edits an existing object named "Bob", he changes the name to "Fred".
In this scenario I want the validation to be triggered.
If the user edits the existing object called "Fred", and doesnt edit this field, but edits another field on the form I don't want the name uniqueness to be triggered.
<Form.Item
name="name"
label="name"
rules={[
{
required: true,
message: "Please input the name",
}),
},
() => {
return {
validator: uniqueNameValidator,
};
},
]}
>
<Input autoFocus data-cy="dir-create-name" />
</Form.Item>
<Form.Item
name="desc"
label="Description",
})}
>
<Input.TextArea data-cy="dir-create-desc" />
</Form.Item>
I am not sure if there is a way to compare values, and only do the validation if the previous value doesn't match the new value
As per docs, Autocomplete component has no distinction between option and actual value.
I have a list of options as objects with ids. When I select an option I want to get its id as a value, not the object itself. Also, when I set the value of Autocomplete I want to pass in id only.
Is it possible?
<Autocomplete
options={[{id: 1, label: 'foo'}, {id: 2, label: 'bar'}]}
value={1}
onChange={(_, value) => { /* value should be number (id) */ }}
/>
Update: option label should remain configurable
Ciao, unfortunately value on onChange event returns one of the options selected. So is not possible to return only one attribute of the element.
The only thing you can do is take the value.id:
<Autocomplete
options={[
{ id: 1, label: "foo" },
{ id: 2, label: "bar" }
]}
getOptionLabel={(option) => option.label} // this to show label on Autocomplete
getOptionSelected={(option, value) => option.id === value.id} // this to compare option on id value
onChange={(event, value) => console.log(value.id)} // here access to id property of value object
...
/>
Here a codesandbox example.
I have the following Problem:
I want to develop a shopping cart and have problems with the counter of the product card and I have problems to show the data in the summary view.
For this project I use XML views and I've already readed a lot about binding. When I want to bind a static path I have no problems. The data comes from a JSON model named "cartData".
Example (from the goToCart Button)
...
text="{cartData>/currentUser}";
...
Everything shows correctly (in the example), but for my project I need to bind a main binding (for counter of the cart) and this path need a parameter for the user. Which is saved at the path like in the example.
I've already tried a lot of combinations to accomplish this bug, but now I have no more ideas :-(
A example of my tried combinations:
text="{ ${cartData>/cartOfUser/} + {cartData>/currentUser} + '/roles/counter'}"
EDIT:
Some dummy parts of my code:
My Button (doen't work yet how I need...):
<m:Button
id="details.Btn.ShowCart"
text="{ parts: [
{path: 'cartProducts>/cartEntries/'},
{path: 'cartProducts>/currentChoice/'},
{path: '/addedRoles/counter'}
]}"
type="Emphasized"
icon="sap-icon://cart-3"
iconFirst="true"
width="auto"
enabled="true"
visible="true"
iconDensityAware="false"
press="showCart"/>
How my JSON Model in LocalStorage look like:
{
"cartEntries": {
"counter": 2,
"UserId12": {
"UserId": "UserId12",
"Email": "Email12",
"dateCreated": "2017-07-14T13:18:13.632Z",
"dateUpdated": "2017-07-14T13:18:13.632Z",
"addedRoles": {
"counter": 0
},
"existingRoles": {
"counter": 0
}
},
"UserId14": {
"UserId": "UserId14",
"Email": "Email14",
"dateCreated": "2017-07-14T13:18:30.415Z",
"dateUpdated": "2017-07-14T13:18:30.415Z",
"addedRoles": {
"counter": 0
},
"existingRoles": {
"counter": 0
}
}
},
"currentChoice": "UserId14"
}
My JSON Data with comment:
I need to grab the value from "currentChoice", to search with this information in cartEntries for the right counter
How the Button look now:
It show the data not in the correct way. Please ignore the zero at first...
The goal is to take the value of "currentChoice" and use it as a 'parameter' to call the information for the right user..
What I also tried:
text="{= ${= 'cartProducts>/cartEntries/' + ${cartProducts>/currentChoice/} + '/addedRoles/counter' } }"
What works, but I need it more "dynamic" is:
text="{cartProducts>/cartEntries/UserId14/addedRoles/counter}"
I hope you guy's now know what I mean... :-/
Best regards
The Solution
How I solve the problem:
Add a formatter to the button:
/',
formatter: '.formatter._getCartInt'
}"
type="Emphasized"
icon="sap-icon://cart-3"
iconFirst="true"
width="auto"
enabled="true"
visible="true"
iconDensityAware="false"
press="showCart"/>
Implement the formatter in my formatter.js file:
_getCartInt: function (sP1) {
var sCurrent = sP1.currentChoice;
var sFinalString = "cartProducts>/cartEntries/" + sCurrent + "/addedRoles/counter";
this.getView().byId("btn.ShowCart").bindProperty("text",{path: sFinalString, type: new sap.ui.model.type.Integer()}); }
Try to use the following approach:
in i18n file:
cartInfoTitle=User: {0} has: {1} items in the cart
in XML view:
<Text text="{
parts: [
{path: 'i18n>cartInfoTitle'},
{path: 'modelName>/property1'},
{path: 'modelName>/property2'}
],
formatter: 'jQuery.sap.formatMessage'
}" />
So you declare the i18n entry and then use the predefined formatter to replace the placeholders with the values from the "parts" array (Documentation article).
Ok so to answer : you cannot use expression in a binding (same applies for classes). So to have the output you want you will indeed need a formatter + include the needed top level elements of your JSON model in the binding parts (so that it updates properly).
XML (I assume your model is called 'cartData')
<Text text="{
parts: [
'cartData>/cartEntries',
'cartData>/currentChoice'
],
formatter: '.myFormatter'
}" />
JS Controller
controller.prototype.myFormatter = function (cartEntries, currentChoice) {
if (cartEntries && cartEntries[currentChoice]) {
return cartEntries[currentChoice].addedRoles.counter;
}
}
[code not tested]
Error message:
"Uncaught Error: After filtering out keys not in the schema, your modifier is now empty"
Using autoform with collection2 and simple schema in Meteor.
The schema:
Injuries = new Mongo.Collection('injuries');
Rehab = new SimpleSchema({
exercise: {
type: String,
label: "Rehab Exercise"
},
sets: {
type: Number,
label: "Sets"
},
duration: {
type: Number,
label: "Set Duration (in Minutes)"
},
date: {
type: String,
label: "Date of Rehab Exercise"
},
rehabnotes: {
type: String,
label: "Notes: i.e. 70% Intensity During Sprints",
max: 200
},
injuryid:{
type: String,
}
});
Injuries.attachSchema(new SimpleSchema({
player: {
type: String,
label: "Player",
max: 50
},
injury: {
type: String,
label: "Injury"
},
notes: {
type: String,
label: "Notes",
max: 200
},
injurydate: {
type: Date,
label: "Date of Injury",
},
rehab: {
type: [Rehab],
optional: true
}
}));
And the Form Code in the Template:
{{#autoForm collection="Injuries" schema="Rehab" id="insertRehabForm" type="update"}}
<fieldset>
{{> afQuickField name='exercise' options=options}}
{{> afQuickField name='sets'}}
{{> afQuickField name='duration'}}
{{> afQuickField name='date'}}
{{> afQuickField name='rehabnotes' rows=6}}
</fieldset>
<button type="submit" class="btn btn-primary">Insert</button>
{{/autoForm}}
I can insert documents just fine with the autoform on the home page, using this custom form on the individual document page I receive the error on submission.
I have one collection hook setup up for before submissions, but this looks like it is just a schema error, perhaps the Rehab array that I have set up on the original Injuries schema is messing this up? The searches I've done for this have all been about the "Type" parameter in the schema not matching what is expected, but I've checked those here and they look good. Suggestions?
Based on the AutoForm's docs: the schema attribute is required if collection attribute is not set, however, even if collection is set AutoForm will still use the provided schema attribute to generate (only applicable to QuickForm) and validate the form (applicable to both AutoForm and QuickForm).
What happened in your case is that since both attributes (schema and collection) are provided, AutoForm first validates the form fields against the Rehab schema and when it succeed, it tries to insert the values of those fields (exercise, sets, duration, date, rehabnotes) to your Injuries collection, which does not have those keys in its own schema (it only has player, injury, notes, injurydate and rehab).
From your requirements, it seems like setting the AutoForm type to update-pushArray is the best possible solution. Check the docs and the example for usage.
How can I query a field in an object? My html retrieves all the objects in array called 'postcards'
Meteor.user.profile.postcards [
{
_id: 84fh83f,
field_one: "a name",
field_two: " winter whether",
field_three: " lost more writing"
},
{
_id: 6jsf58s,
field_one: "another name",
field_two: " topical issues ",
field_three: " lost more writing"
}
]
Note: I used random.Id() so each object in the array can be uniquely identified.
Setting a session value to this._id when the user is focused on the input field will retrieve this unique id, however, I would like to query the actual field in focus. The value in these fields are projected within the text input area by using the spacebars syntax within the html.
Can I somehow assign the name within the curly braces of the value attribute to a variable? Then query?
Is there a whole new way to achieve this?
I want to update that specific field in this object instead updating the entire object.
HTML:
{{#with currentUser.profile}}
{{#each postcards}}
<input id="one" value="{{field_one}}" type="text">
<input id="two" value="{{field_two}}" type="text">
<input id="three" value="{{field_three}}" type="text">
{{/each}}
{{/with}}
client.js
Within events, I would like to update the field on focus upon keyup.
Templates.myTemplate.events({
'keyup input[type=text]': _.throttle(function(event) {
Meteor.users.update(this._id, {$set: {**fieldbeingedited**: event.target.value}});
}, 500);
});
What you want to have is an ES6 capability named 'Computed property names'.
This is what is looks like :
var x = 'hello',
obj = {
[x]: 'world'
};
console.log(obj); // Object {hello: "world"}
You have two options :
- you use the meteor harmony package to transpile your es6 to es5 (https://github.com/mquandalle/meteor-harmony)
- you build your object first
To build you object first :
var obj = {};
obj[ this.targetField ] = event.target.value
Meteor.users.update(this._id, {$set: obj});