Develop Reference

Shopware 6 <sw-media-list-selection-v2> component not updating after media selection

I'm working on slider CMS element where every slide has image gallery, for selecting images I use <sw-media-list-selection-v2> and <sw-media-modal-v2> components. Each slide is created as <sw-collapse>. In my config/index.js I keep object, 'mediaItems', where key is slide ID and property is array of image entities selected by mentioned components.
The problem is: while selected images are being added to my object property they are not displayed in component, when I collapse and expand slide then selected images are displayed but not immediately after being selected.
I think problem is that Vue "don't know" that array bound to object property was changed but I don't know how to make it work.
In default Shopware 6 image slider array of images, declared in data(), is directly set to <sw-media-list-selection-v2> and it works fine by in my case array is in object and it's not working as I would like it to.
<sw-media-list-selection-v2
:entity-media-items="mediaItems[sliderItem.id]"
:entity="entity"
:upload-tag="uploadTag"
:default-folder-name="defaultFolderName"
#upload-finish="onImageUpload($event, sliderItem)"
#item-remove="onItemRemove($event, sliderItem)"
#open-sidebar="onOpenMediaModal"
/>
data() {
return {
initialFolderId: null,
entity: this.element,
mediaItems: {},
mediaModalOpen: false
};
},
onMediaSelectionChange(mediaItems, sliderItem) {
mediaItems.forEach(item => {
sliderItem.mediaItems.push({
mediaId: item.id,
mediaUrl: item.url
});
});
this.mediaItems[sliderItem.id].push(...mediaItems);
this.emitUpdateEl();
},
emitUpdateEl() {
this.$emit('element-update', this.element);
},

If I understand your problem correctly it is caused by the mediaItems property not being mutated reactively. The component then won't "know" about the changes unless it is re-rendered. Try using the reactive vue setter instead:
this.$set(this.mediaItems, sliderItem.id, [...this.mediaItems[sliderItem.id], ...mediaItems]);

Customizable Sidebar - How to split components?

I'm currently working on a sidebar component. This sidebar contains multiple cards, like one with input and a list, one with input and buttons and one with only buttons. Now it should be as modifiable as possible. I thought of passing arrays with the needed types and labels in a card to the sidebar component.
So for a view like in the first card:
It could be like this:
const data=[
{
label:"Systems",
type: "heading"
},
{
label:"",
type: "input",
onChange: "search"
},
{
label: "",
type: "ul",
elements: [
"Item#1",
"Item#2",
"Item#3",
"Item#4",
]
}
]
<Sidebar card={data} />
I don't know if it's better style to do it like this and have a hard time processing all possibilites or better just focus on these hardcoded layouts and let them fill with data (i did this with ~6 types of other card-elements before).
Or is there a completely other way to create customizable elements like this?

JS Tree Selecting un selected items

I am using JsTree checkbox which contains lot of sub fields.
When I am selecting one field it automatically selects the sub category of another field.
So that field shows partially checked.
For instance:
In my JsTree When I clicked "United States" it partially selects
"Canada".
Please any one explains this behavior.
Since the tree is big I am not pasting the code instead of that I am posting an JsFiddle URL.
Code:
$(function () {
$("#tree").jstree({
"checkbox": {
"keep_selected_style": false
},
"plugins": ["checkbox"],
'core': {
'data': {
"id": "ALL",
"text": "ALL",
"children": [] ...
JSFiddle : http://jsfiddle.net/1r70vjmx/
Thanks in Advance.

Short answer: Duplicate ID's
Long answer: The jsfiddle example shows some nodes having a duplicate ID. jsTree requires that you have unique ID's for all nodes throughout your tree data. In your data, Ontario city in the United States and the Ontario province in Canada have the same id 'Ontario'. If in this case you apply a prefix of 'us-' to all the id's for United States you will see that the problem disappears.

Angular: Allow selection from only one group in drop-down list bootstrap-select

I am using bootstrap-select for drop-down selection with angular. What I want to actually do is to allow selection only from one group(suppose a user selects CS1607 from group Ground, the then selection from the other groups should be disabled and only selection from Ground is allowed then).
$scope.course = [{
id: "Ground",
code: ['CS1607','SD90','EE11','PO213']
}, {
id: "First",
code: ['PH006','EE2131','Aq122']
}, {
id: "Second",
code: ['CSB-9','AA22']
}];
I know, I have to use angular watchers for the changes. I tried a lot but could not get the desired result. Here is my version of code.
Any help would be appreciated.

I would link each select to a model (ng-model) and disable each select whenever the models of the other two are not null. Something like (for select_1):
...ng-if="!select_2_Value && !select_3_Value"...

Knockout mapping grid with dynamic adding of items not behaving

I have a nice knockout viewmodel with a list that is shown as a grid.
I do use the mapping plugin.
You can select items, reverse selection, remove items from the list and dynamically add items.
But if i do add an item, I can't remove it or any other items.
Also if I add another one it does not show.
But a computed value does show extra lines
Here is the fiddle isolating the issue:
http://jsfiddle.net/medo/7jrnb/
self.add = function () {
self.orderLines.push(ko.mapping.fromJS({ Sku: "", Qty: 1, Name: "", OriginalSKU: "", Description: "", Exists: false, Selected:false }));
};
delete and select items, all is well.
Press add item and deleting does not work.
pressing add again is also an unexpected result.
knockout-2.2.1.js
Knockout Mapping plugin v2.4.1

In your add function, you misspelled OriginalSku as OriginalSKU (different case). This causes the binding to fail and, it appears, to stop knockout from working. Fix your spelling and you're all set.