I'm stuck with this problem : I'm trying to order 2 same-level components who both have their own datas with their own properties. But the 2 differents datas have the same "position" property.
DB structure
Chapter
chapterId
title (string)
position (integer)
Page
pageId
name (string)
position (integer)
body (text)
Here is my Summary.vue
<template>
<div>
<summary-chapter v-for="chapter in data.chapters" :chapter="chapter"></summary-chapter>
<summary-page v-for="page in data.pages" :page="page"></summary-page>
</div>
</template>
The data variable is :
data :
{
'chapters' : { {chapterId: 1, ...}, {chapterId: 2, ...}, {chapterId: 3, ...}, ... },
'pages' : { {pageId: 1, ...}, {pageId: 2, ...}, {pageId: 3, ...}, ... }
}
I'm looking for this kind of results : Mixed
Pos: 1 - Page with id of 12
Pos: 2 - Chapter with id of 7
Pos: 3 - Chapter with id of 2
Pos: 4 - Page with id of 4
Pos: 5 - Page with id of 13
Pos: 6 - Chapter with id of 1
But I always have all chapters first and then all pages :
Pos: 2 - Chapter with id of 7
Pos: 3 - Chapter with id of 2
Pos: 6 - Chapter with id of 1
Pos: 1 - Page with id of 12
Pos: 4 - Page with id of 4
Pos: 5 - Page with id of 13
I really have no clue how to do it the right way.
I tried to filter through a computed data property
I try dto built a parent component Summary row taht contains a chapter component or a page component depending on the type
I try 100 other ways ... :(
Do you guys have a tip ?
Thanks in advance for your time.
Louis
One way to solve this problem is combine those two arrays then sort by its position:
computed: {
sortedItems () {
let chapters = this.chapters.map(chapter => ({ ...chapter, type: 'chapter' }))
let pages = this.pages.map(page => ({ ...page, type: 'page' }))
return []
.concat(chapters)
.concat(pages)
.sort((a, b) => (a.position - b.position))
}
}
Then in you template render it by type:
<template v-for='item in sortedItems'>
<summary-chapter v-if='item.type === "chapter"' :chapter='item'/>
<summary-page v-if='item.type === "page"' :page='item'/>
</template>
Related
I have two arrays, one with 7 boolean values representing the weekdays, and the other with the weekdays names and the value of which day of the week it represents, kind of index of weekdays (0 beeing sunday, and 6 beeing saturday)
This sample is from the ts file belonging to the vue file where the autocomplete is.
export const scheduleDays: TextValueViewModel[] = [
{ Text: "Mon", Value: 1},
{ Text: "Tue", Value: 2 },
{ Text: "Wed", Value: 3 },
{ Text: "Thu", Value: 4 },
{ Text: "Fri", Value: 5 },
{ Text: "Sat", Value: 6 },
{ Text: "Sun", Value: 0 }
];
This is from a view model I have containing this array with booleans representing the weekdays.
public readonly SelectedDays: boolean[] = [false,false,false,false,false,false,false];
I then have a autocomplete where I want to save the clicked checkboxes and that would be saved into the boolean array
<v-autocomplete
v-model="editedReleaseSchedule.ScheduleInterval.SelectedDays"
:items="scheduleDays"
:item-text="item => `${item.Text}`"
:item-value="item => `${item.Value}`"
:label="'ADMINISTRATION_RELEASE_SCHEDULE_DETAILS_SCHEDULED_DAYS' | translate('Selected days')"
:disabled="formDisabled"
:rules="[rules.required]"
outlined
hide-details
multiple
dense
/>
How can I make the clicked value of the weekday array beeing saved into the boolean array in the right index spot? And at the same time I want the correct checkboxes be checked in the autocomplete field.
The implemented auto complete in the interface
Using Vue 2 at my workplace, so no solution for vue 3 would work out for me.
I've tried to google if I can get the index of the v-autocomplete row and use that in item-value like:
editedReleaseSchedule.ScheduleInterval.SelectedDays[index]
but that does not seem possible. I've also tried different ways of filtering before using v-autocomplete, but I still want the whole list, not only the clicked (marked) once.
Use an intermediate model for the selectedValues, watch it, and map the selected values ([1,2,3...,0]) into the real model.
data: () => ({
selectedValues: [],
// ...
<v-autocomplete
v-model="selectedValues"
<!-- etc -->
watch: {
selectedValues(newValues) {
const allFalse = [false,false,false,false,false,false,false];
this.editedReleaseSchedule.ScheduleInterval.SelectedDays = allFalse;
newValues.forEach(value => {
// presumes sunday is the last index, the others are offset by +1
let j = value === 0 ? 6 : value-1;
this.editedReleaseSchedule.ScheduleInterval.SelectedDays[j] = true;
})
},
Parent Table
id
name
1
ben
2
fred
3
david
Child Table
id
name
parent_id
1
sergey
1
2
jake
2
3
rudolp
1
I want to make a get request like this from my node server and this is my expected response.
also can you suggest best practices in this approach, I am thinking of getting all the data/table in server then looping on them to generate the array of objects . Thanks
[
{
id:1
name: "Ben",
childs:[{id: 1, name: "sergey"},{id: 3, name: "rudolp"}]
},
{
id:2
name: "Fred",
childs:[{id: 2, name: "Jake"}]
},
}
]
I'm trying to achieve this complex schema.
{
relation1_id : Number,
...
...
item_caption: [
{
caption: '',
subcaption: '',
products: [
{
pid: 1,
quantity: 5
},
{
pid: 2,
quantity: 52
}
]
},
{
...
}
]}
I did consider JSONB but i may need statistics of the child schemas ( products_heading & heading_items ). I heard JSONB isn't well verse with statistics.
What i'm trying to achieve :-
Each Headings will have a heading , subheading and a products property
Each heading will have multiple products
My current schema. I'm having a hard time writing CRUD api point for this. How would you tackle this ?
I am working on a project where we receive a flat file but the first and last lines have information that does not fit the fixed width pattern. Is there a way to dataweave all of this information correctly and if possible put the header and footer into variables and just have the contents in the payload.
Example File
HDMTFSBEUP00000220170209130400 MT HD07
DT01870977 FSFSS F3749261 CR00469002017020820170225 0000
DT01870978 FSFSS F3749262 CR00062002017020820170125 0000
TRMTFSBEUP00000220170209130400 000000020000002000000000000043330000000000000 0000
I know for CSV you can skip a line but dont see it with fixed width and also the header and footer will both start with the first 2 letters every time so maybe they can be filtered by dataweave?
Please refer to the DataWeave Flatfile Schemas documentation. There are several examples for processing several different types of data.
In this case, I tried to simplify your example data, and apply a custom schema as follow:
Example data:
HDMTFSBEUP00000220170209130400
DT01870977
DT01870978
TRMTFSBEUP00000220170209130400
Schema/Flat File Definition:
form: FLATFILE
structures:
- id: 'test'
name: test
tagStart: 0
tagLength: 2
data:
- { idRef: 'header' }
- { idRef: 'data', count: '>1' }
- { idRef: 'footer' }
segments:
- id: 'header'
name: header
tag: 'HD'
values:
- { name: 'header', type: String, length: 39 }
- id: 'data'
name: data
tag: 'DT'
values:
- { name: 'code', type: String, length: 17 }
- id: 'footer'
name: footer
tag: 'TR'
values:
- { name: 'footer', type: String, length: 30 }
The schema will validate the example data and identify based on the tag, the first 2 letters. The output will be grouped accordingly.
{
"header": {},
"data": [{}, {}],
"footer": {}
}
Since the expected result is only the data, then just select it: payload.data.
Use range selector to skip header and footer.
payload[1..-2] map {
field1: $[0..15],
field2: $[16..31]
...,
...
}
[1..-2] will select from 2nd line till the second last line in the payload.
$[0..15] will select from 1st column index to 16th index. $[16..31] select from 17th column index to 32nd index.
I was facing the same issue and the answer #sulthony h wrote needs a little tweak. I used these lines instead and it worked for me.
data:
- { idRef: 'header', count: 1 }
- { idRef: 'data', count: '>1' }
- { idRef: 'footer', count: 1 }
"count" was missing from header and footer, and that was throwing an exception. Hope this helps.
I have this query:
books = Book.includes(:tags).where(tags:{ id: [1, 2] })
The result contains all books having tags 1 OR 2. How can I change this to get only books which have both tags (1 AND 2)?
My approach was:
books = Book.includes(:tags).where(tags:{ id: 1 }).where(tags:{ id: 2 })
This went wrong, because the the second where overwrites the first one.
Not tested
books = Book.includes(:tags).where("tags:{ id: ? } AND tags:{ id: ?}", 1, 2)