validate nested object array with vuelidate - vue.js

I want to validate an object array inside nested object array
FormData:Array[8]
0:Object
group:Object
id:1
cards:Array[8]
0:Object
id:2253
service:Object
name:"Service Name"
...
I need to validate from service only the name
I try with something like this, but no success...
validations() {
return {
FormData: {
$each: {
group: {
cards: {
$each: {
service: {
name: {
required
}
}
}
}
}
}
}
}
}
Seems like the $each is not working as i want to, what im doing wrong how can i get to correct nested object with $each ?

Related

Can you include an attributes based on type in GraphQL?

I have this GraphQL query which retrieved the pull requests' 3 types of timeline items from Github API. Within each type alias that I have(dismissed as an example) I'm getting all the other types but as empty objects(because I'm not querying any field in case it's not from the type I want) is there a way to exclude objects that aren't of the types I needed, maybe something like #include if(__typename = something)
query ($name: String!, $owner: String!, $pr: Int!) {
repository(name: $name, owner: $owner) {
pullRequest(number: $pr) {
timelineItems(first: 100) {
dismissed: nodes {
... on ReviewDismissedEvent {
actor {
login
}
review {
author {
login
}
}
}
}
removed: nodes {
... on ReviewRequestRemovedEvent {
actor {
login
}
requestedReviewer {
... on User {
name
login
id
}
}
}
}
added: nodes {
... on ReviewRequestedEvent {
actor {
login
}
requestedReviewer {
... on User {
name
login
id
}
}
}
}
}
}
}
}

Where should I use computed and methods in Vue js? (need proper guideline)

Look at the image below and please explain where should I use computed instead of methods and vice versa? It confuses me.
As a rule of thumb: a computed is a simple getter (though they can be setters, but that's not something you'd typically use) that is dependent on one or more properties. It'll update automatically when those properties change. You cannot pass it parameters. You would use a method when you need to pass a parameter and/or need to perform an action or mutation.
data() {
firstName: 'Bert',
lastName: 'Ernie'
},
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`;
}
}
This will return "Bert Ernie" and will update automatically when either firstName or lastName change.
Now if you need to change something, or for example select something from a list using a parameter, you would use a method.
data() {
users: [
{ id: 1, name: 'Bert' }.
{ id: 2, name: 'Ernie' }
]
},
methods: {
getUser(userid) {
return this.users.find(user => user.id === userid);
},
setUserName(userid, newName) {
const user = this.users.find(user => user.id === userid);
if (user) {
user.name = newName;
}
}
}

How do I annotate an endpoint in NestJS for OpenAPI that takes Multipart Form Data

My NestJS server has an endpoint that accepts files and also additional form data
For example I pass a file and a user_id of the file creator in the form.
NestJS Swagger needs to be told explicitly that body contains the file and that the endpoint consumes multipart/form-data this is not documented in the NestJS docs https://docs.nestjs.com/openapi/types-and-parameters#types-and-parameters.
Luckily some bugs led to discussion about how to handle this use case
looking at these two discussions
https://github.com/nestjs/swagger/issues/167
https://github.com/nestjs/swagger/issues/417
I was able to put together the following
I have added annotation using a DTO:
the two critical parts are:
in the DTO add
#ApiProperty({
type: 'file',
properties: {
file: {
type: 'string',
format: 'binary',
},
},
})
public readonly file: any;
#IsString()
public readonly user_id: string;
in the controller add
#ApiConsumes('multipart/form-data')
this gets me a working endpoint
and this OpenAPI Json
{
"/users/files":{
"post":{
"operationId":"UsersController_addPrivateFile",
"summary":"...",
"parameters":[
],
"requestBody":{
"required":true,
"content":{
"multipart/form-data":{
"schema":{
"$ref":"#/components/schemas/UploadFileDto"
}
}
}
}
}
}
}
...
{
"UploadFileDto":{
"type":"object",
"properties":{
"file":{
"type":"file",
"properties":{
"file":{
"type":"string",
"format":"binary"
}
},
"description":"...",
"example":"'file': <any-kind-of-binary-file>"
},
"user_id":{
"type":"string",
"description":"...",
"example":"cus_IPqRS333voIGbS"
}
},
"required":[
"file",
"user_id"
]
}
}
Here is what I find a cleaner Approach:
#Injectable()
class FileToBodyInterceptor implements NestInterceptor {
intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
const ctx = context.switchToHttp();
const req = ctx.getRequest();
if(req.body && req.file?.fieldname) {
const { fieldname } = req.file;
if(!req.body[fieldname]) {
req.body[fieldname] = req.file;
}
}
return next
.handle();
}
}
const ApiFile = (options?: ApiPropertyOptions): PropertyDecorator => (
target: Object, propertyKey: string | symbol
) => {
ApiProperty({
type: 'file',
properties: {
[propertyKey]: {
type: 'string',
format: 'binary',
},
},
})(target, propertyKey);
};
class UserImageDTO {
#ApiFile()
file: Express.Multer.File; // you can name it something else like image or photo
#ApiProperty()
user_id: string;
}
#Controller('users')
export class UsersController {
#ApiBody({ type: UserImageDTO })
// #ApiResponse( { type: ... } ) // some dto to annotate the response
#Post('files')
#ApiConsumes('multipart/form-data')
#UseInterceptors(
FileInterceptor('file'), //this should match the file property name
FileToBodyInterceptor, // this is to inject the file into the body object
)
async addFile(#Body() userImage: UserImageDTO): Promise<void> { // if you return something to the client put it here
console.log({modelImage}); // all the fields and the file
console.log(userImage.file); // the file is here
// ... your logic
}
}
FileToBodyInterceptor and ApiFile are general, I wish they where in the NestJs
You probably need to install #types/multer to have to Express.Multer.File

Two-way filter updating on the fly | Vue.js

How one can do custom two-way filter for model, updating on the fly in Vue.js.
The following code example from docs works on input blur. But I need it work on keypress.
Vue.filter('currencyDisplay', {
read: function(val) {
return '$'+val.toFixed(2)
},
write: function(val, oldVal) {
var number = +val.replace(/[^\d.]/g, '')
return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
}
})
Many thanks in advance for any help!
You can apply a filter to a Vue data property by creating a computed property with a get and set method that fire the read and write methods of the filter, respectively:
data() {
return {
foo: 0,
}
},
computed: {
filteredFoo: {
get() {
return Vue.filter('currencyDisplay').read(this.foo);
},
set(value) {
this.foo = Vue.filter('currencyDisplay').write(value);
}
}
}
Here's a working fiddle.

Invocation from function in QML?

I can share an item easily using an InvokeActionItem in a Page but I need to be able to call it in a listview item. I've managed to trigger an invoke, but I cannot figure out how to add data when triggering it. I keep getting an error message of
InvocationPrivate::setQuery: you are not allowed to change InvokeQuery object
Note: I am trying to do this in purely QML, I will do it via c++ if necessary but QML would be preferable.
Code that works inside a Page object:
actions: [
InvokeActionItem {
ActionBar.placement: ActionBarPlacement.OnBar
title: "Share"
query {
mimeType: "text/plain"
invokeActionId: "bb.action.SHARE"
}
onTriggered: {
//myTextProperty is a string variable property for the page.
data = myTextProperty;
}
}
]
The code I've tried to use in the other item is as follows, but does NOT work:
Container {
gestureHandlers: [
TapHandler {
LongPressHandler {
onLongPressed: {
console.log("Longpress");
invokeQuery.setData("test");
invokeShare.trigger("bb.action.SHARE");
}
}
]
attachedObjects: [
Invocation {
id: invokeShare
query: InvokeQuery {
id:invokeQuery
mimeType: "text/plain"
}
}
]
}
Is there a way to change the data for an invoke purely with QML or do I need to just run it through c++ instead?
After a fair amount of browsing forums and testing various methods, I have finally found one that works.
Add the following in your attachedObjects:
attachedObjects: [
Invocation {
id: invokeShare
query: InvokeQuery {
id:invokeQuery
mimeType: "text/plain"
}
onArmed: {
if (invokeQuery.data != "") {
trigger("bb.action.SHARE");
}
}
}
]
Then wherever you need to call the invocation do the following:
invokeQuery.mimeType = "text/plain"
invokeQuery.data = "mytext";
invokeQuery.updateQuery();
Note that if you do not do a check in the onArmed for data it will automatically call the invocation on creation - in the case of a listview this can result in 20+ screens asking you to share on bbm... ;)
You can actually use the InvokeActionItem, you just have to call updateQuery to retrigger the invokeQuery.
When the ListItemData changes, the binding will cause the values to update.
InvokeActionItem {
enabled: recordItem.ListItem.data.videoId != undefined
id: invokeAction
query{
uri: "http://www.youtube.com/watch?v=" + recordItem.ListItem.data.videoId
onQueryChanged: {
updateQuery()
}
}
}
For remove "InvocationPrivate::setQuery: you are not allowed to change InvokeQuery object" message I use this:
attachedObjects: [
Invocation {
id: invoke
query {
mimeType: "text/plain"
invokeTargetId: "sys.bbm.sharehandler"
onDataChanged: {
console.log("change data")
}
}
onArmed: {
if (invoke.query.data != "") {
invoke.trigger("bb.action.SHARE");
}
}
}
]
function shareBBM(){
invoke.query.setData("TEXT TO SHARE");
invoke.query.updateQuery();
}