How can I use Vuelidate to validate an empty collection? - vuejs2

I am trying to use the same form for create and update.
Everything is working great when I am updating an existing location. It's when I am creating a new location that my validation is causing an error.
I can understand why it's unhappy, I don't have anything to validate. I don't understand what I am doing wrong though.
Looking at the docs, I believe I'm setting up the validation rule properly:
location: {
messaging: {
$each: {
email: {
fromName: { required },
fromAddress: { required },
},
},
},
...
}
I am passing location in as props with a default of:
...
messaging: [{
email: {
fromName: '',
fromAddress: '',
},
}],
When saving the data, it has the correct shape I'm looking for as well:
[{"email":{"fromName":"No Reply <noreply#example.com>","fromAddress":"noreply#example.com"}}]
My input looks like this:
<input id="fromName"
v-model.trim="$v.location.messaging.$each[0].email.fromName.$model"
type="text"
...
The error I am getting is
Cannot read properties of undefined (reading 'email')"
I understand that email is undefined, nothing exists (yet). How can I set up the validation collection so it knows what email is?

Related

Vue3: How to send params to a route without adding them to the url in Vue3?

In Vue3 is there a way to pass properties to a route without the values showing in the url?
I defined the route like this:
{
path: '/someRoute',
name: 'someRoute',
component: () => import('#/app/pages/SomeRoute.vue'),
props: (route) => {
...route.params
}, // <-- I've seen this method in Vue2 but in Vue3 the route.params is just empty here
}
I call the route like this:
<router-link :to="{ name: 'someRoute', params: { message: 'Some Message' } }">Some link</router-link>
When I change path into path: '/someRoute/:message', the message come through just fine but I just want to pass the message without it showing up in the url.
I've seen a couple of Vue2 examples that use this method (e.g. https://stackoverflow.com/a/50507329/1572330) but apparently they don't work in Vue3 anymore.
Also all the examples in the Vue3 docs (https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js / https://v3.router.vuejs.org/guide/essentials/passing-props.html) pass on their values through the url itself so I'm not sure if it's even possible anymore.
Any thoughts on this would be helpfull.
Finally I found something about this in the changelog: https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22
Apparently it's no longer possible to send properties via params without the showing in the url. But fortunately they give some alternative suggestions.
The one that worked best for my situation was to use state: { ... } instead:
<router-link :to="{ name: 'someRoute', force: true, state: { message: 'Some Message' } }">Some link</router-link>
Now in the code of the page I read the property from the history.sate and put the value in whatever property I need it.
In case the url/route itself doesn't change you need to have an update hook and use force: true
public created() {
this.message = window.history.state.message;
}
public updated() {
this.message = window.history.state.message;
}
PS history.state has some limitations so in other situations one of the other suggestions from the changelog might work better

Agile Central Basic App Settings

I'm implementing a simple app based on the UserIterationCapacity using a Rally.app.TimeboxScopedApp.
Now I want to specify a couple of settings as App settings and found the developer tutorial for this: https://help.rallydev.com/apps/2.1/doc/#!/guide/settings
But I just cant get it working. Whenever I try to fetch a setting my code stops without any warnings.
I've implemented the following:
config: {
defaultSettings: {
hoursPerSp: 6,
decimalsOnHoursPerSp: 1
}
},
getSettingsFields: function() {
return [
{
name: 'hoursPerSp',
xtype: 'rallynumberfield'
},
{
name: 'decimalsOnHoursPerSp',
xtype: 'rallynumberfield'
}
];
},
Now I'm trying to use
this.getSettings('hoursPerSp');
but unfortunately it is not working.
Thank you in advance
Problem solved.
I needed to keep track of my scope, i.e., I needed to pass in the this variable to my renders.

What are the available options for LayoutAnimation.Types

I have a custom layout animation taken from here.
var CustomLayoutAnimation = {
duration: 200,
create: {
type: LayoutAnimation.Types.linear,
property: LayoutAnimation.Properties.opacity,
},
update: {
type: LayoutAnimation.Types.curveEaseInEaseOut,
},
};
When running the code i get the following warning
Warning: Failed config type: The config config.update.type is marked
as required in LayoutAnimation.configureNext, but its value is
undefined.
The code has an entry for update.type, yet the warning says it's undefined. I'm guessing that the permitted values have been updated since the gist was written.
I tried to find out the list of available permitted entries but they are not listed in the React Native LayoutAnimation documentation.
I'd like to know :
Is the syntax no longer correct?
Is there a webpage somewhere that details the list of availble Types?
Whenever I run into an issue like this, I go to the source code. Here's the file for LayoutAnimation.js from the react-native source code. Based on this, I see a TypesEnum const declaration at line 25 looking like this:
const TypesEnum = {
spring: true,
linear: true,
easeInEaseOut: true,
easeIn: true,
easeOut: true,
keyboard: true,
};
I suspect that's why you are erring out - curveEaseInEaseOut is not a supported type. Choose one from the list above and I think you should be good to go. Hope this helps!

Get values from localStorage to use in Sencha Touch AJAX Proxy

In my Sencha Touch application I store some values in localStorage and they get stored just fine. Later I need to use those values for a request to a store and I need to pass those values as request headers. The code looks like the following:
Ext.define('AppName.store.storeName', {
extend: 'Ext.data.Store',
requires: [
'AppName.model.modelName'
],
config: {
model: 'AppName.model.modelName',
storeId: 'storeName',
proxy: {
type: 'ajax',
url: 'http://dynamic',
headers: {
auth_token: localStorage.getItem('activeUserToken'),
user_email: localStorage.getItem('userEMail')
},
reader: {
type: 'json'
}
}
}
});
However, both auth_token and user_email values are being returned as "undefined" when in Chrome developer tools I clearly see those values. Besides of that I access those values in many other places in my Sencha Touch application but can't do that in the store itself.
Could anybody please tell me what I'm doing wrong?
Thanks
I've solved this problem in the following way. Instead of passing the headers in the store I'm passing the headers during the request, before loading the store. Here's the code for that:
Ext.getStore('storeName').getProxy().setUrl(someURL);
Ext.getStore('storeName').getProxy().setHeaders(
{
"auth_token" : activeUserToken,
"user_email" : userEmail
}
);
Ext.getStore('storeName').load();

Model in sencha (array/object)

{ name: 'status', type: 'object' },
This is the fields in a model.
Can i define status.status1="value1", status.status2="value2" and so on..
if yes...then how?
If this is not possible, then can i use array in type??
If I understand the question correctly, what you're looking for is a store. Here's an example:
Ext.define('AppName.store.Statuses', {
extend: 'Ext.data.Store',
config: {
model: 'AppName.model.ModelName',
data: [
{ name: 'name1', status: 'status1' },
{ name: 'name2', status: 'status2' },
{ name: 'name3', status: 'status3' },
]
}
});
The above code would go in a store directory within your app folder, in a file called StoreName.js. Here, the data is hard coded in, but a store is generally used to load data through an AJAX call. See the docs for more information about that. The store is generally named as the plural of the model name. For example, if your model was defined as Status, then the store would be named Statuses.
I hope that helps!
Just set the field type to 'auto', see this Sencha forum post