LTroya/vue-vuex-items-modal-experiment.html

## vue-vuex-items-modal-experiment.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vuex Experiment</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<div id="app">
    <items></items>

    <modal></modal>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="  crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<script src="https://cdn.jsdelivr.net/vuex/2.3.0/vuex.min.js"></script>
<script>
    const data = [
        {
            "id": 1,
            "title": "Architecto",
            "body": "Aut omnis libero facere voluptates omnis qui. Magni consequatur illo tempora commodi. Sint aspernatur qui amet molestiae voluptatem qui. Praesentium sequi consequatur omnis quaerat.\n\nSunt voluptatem ullam ipsum cupiditate. Et sit incidunt culpa aliquam. Omnis sit asperiores labore ad itaque. Ut est labore ab sed.",
            "created_at": "2017-06-24 22:38:54",
            "updated_at": "2017-06-24 22:38:54"
        },
        {
            "id": 2,
            "title": "Provident",
            "body": "Odit tenetur in in fugiat enim ut. Architecto voluptas nemo aut. Beatae minima est velit enim quo sequi non.\n\nSequi numquam quos commodi deleniti incidunt et qui est. Fugit velit minus possimus voluptas officia et et. Nostrum sit et accusamus modi dicta doloremque in.",
            "created_at": "2017-06-24 22:38:54",
            "updated_at": "2017-06-24 22:38:54"
        },
        {
            "id": 3,
            "title": "Officia",
            "body": "Sapiente suscipit nostrum autem sed. Nisi at ipsum sit recusandae odit. Placeat asperiores quae quasi voluptatem autem error soluta aut.\n\nUt rerum itaque aliquid qui. Accusamus cum alias natus ut saepe et. Sunt rerum tempora necessitatibus iste est excepturi.",
            "created_at": "2017-06-24 22:38:54",
            "updated_at": "2017-06-24 22:38:54"
        }
    ];

    const store = new Vuex.Store({
        state: {
            items: [],
            parentItem: {}
        },

        mutations: {
            SET_ITEMS (state, items) {
                state.items = items;
            },

            SET_PARENT (state, item) {
                state.parentItem = item;
            },

            ADD_CHILD (state, child) {
                state.parentItem.children = state.parentItem.children || [];

                state.parentItem.children.push(child);
            },

            ADD_ITEM (state, item) {
                state.items.push(item);
            }
        },

        actions: {
            setItems({commit}, items) {
                commit('SET_ITEMS', items);
            },

            setParent({commit}, item) {
                commit('SET_PARENT', item);
            },

            addItem({commit}, item) {
                commit('ADD_ITEM', item);
            },

            addChild({commit}, child) {
                commit('ADD_CHILD', child);
            }
        }
    });

    Vue.component('modal', {
        template: `<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">{{ parent.title }}</h4>
                </div>
                    <div class="modal-body">
                        {{ parent.body }}

                        <h4 v-if="parent.children">Children</h4>

                        <ul>
                            <li v-for="child in parent.children">
                            {{ child.title }}
                            </li>
                        </ul>

                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Add child item" v-model="child.title"/>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" @click="addItem">Add Item</button>
                    </div>
                </div>
            </div>
        </div>`,

        data() {
            return {
                child: {
                    title: '',
                    body: ''
                }
            }
        },

        methods: {
            addItem() {
                if (!this.child.title) return;

                this.$store.dispatch('addChild', this.child);
            }
        },

        computed: {
            parent() {
                return this.$store.state.parentItem;
            }
        }
    });

    Vue.component('items', {
        template: `<div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="panel panel-default" v-for="item in items">
                        <div class="panel-heading">{{ item.title }}</div>

                        <div class="panel-body">
                            {{ item.body }}

                            <h4 v-if="item.children">Children</h4>

                            <ul>
                                <li v-for="child in item.children">
                                    {{ child.title }}
                                </li>
                            </ul>
                        </div>

                        <div class="panel-footer">
                            <button type="button" class="btn btn-primary btn-sm" @click="addItems(item)">
                            Add items to this parent
                            </button>
                        </div>
                    </div>
                </div>
            </div>
    </div>`,


        mounted() {
            this.$store.dispatch('setItems', data);
        },

        methods: {
            addItems(item) {
                this.$store.dispatch('setParent', item);

                $('#myModal').modal('show');
            }
        },

        computed: {
            items() {
                return this.$store.state.items;
            }
        }


    });

    const app = new Vue({
        store,
        el: '#app'
    });

</script>

</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Vuex Experiment</title>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	</head>
	<body>

	<div id="app">
	<items></items>

	<modal></modal>
	</div>

	<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
	<script src="https://cdn.jsdelivr.net/vuex/2.3.0/vuex.min.js"></script>
	<script>
	const data = [
	{
	"id": 1,
	"title": "Architecto",
	"body": "Aut omnis libero facere voluptates omnis qui. Magni consequatur illo tempora commodi. Sint aspernatur qui amet molestiae voluptatem qui. Praesentium sequi consequatur omnis quaerat.\n\nSunt voluptatem ullam ipsum cupiditate. Et sit incidunt culpa aliquam. Omnis sit asperiores labore ad itaque. Ut est labore ab sed.",
	"created_at": "2017-06-24 22:38:54",
	"updated_at": "2017-06-24 22:38:54"
	},
	{
	"id": 2,
	"title": "Provident",
	"body": "Odit tenetur in in fugiat enim ut. Architecto voluptas nemo aut. Beatae minima est velit enim quo sequi non.\n\nSequi numquam quos commodi deleniti incidunt et qui est. Fugit velit minus possimus voluptas officia et et. Nostrum sit et accusamus modi dicta doloremque in.",
	"created_at": "2017-06-24 22:38:54",
	"updated_at": "2017-06-24 22:38:54"
	},
	{
	"id": 3,
	"title": "Officia",
	"body": "Sapiente suscipit nostrum autem sed. Nisi at ipsum sit recusandae odit. Placeat asperiores quae quasi voluptatem autem error soluta aut.\n\nUt rerum itaque aliquid qui. Accusamus cum alias natus ut saepe et. Sunt rerum tempora necessitatibus iste est excepturi.",
	"created_at": "2017-06-24 22:38:54",
	"updated_at": "2017-06-24 22:38:54"
	}
	];

	const store = new Vuex.Store({
	state: {
	items: [],
	parentItem: {}
	},

	mutations: {
	SET_ITEMS (state, items) {
	state.items = items;
	},

	SET_PARENT (state, item) {
	state.parentItem = item;
	},

	ADD_CHILD (state, child) {
	state.parentItem.children = state.parentItem.children \|\| [];

	state.parentItem.children.push(child);
	},

	ADD_ITEM (state, item) {
	state.items.push(item);
	}
	},

	actions: {
	setItems({commit}, items) {
	commit('SET_ITEMS', items);
	},

	setParent({commit}, item) {
	commit('SET_PARENT', item);
	},

	addItem({commit}, item) {
	commit('ADD_ITEM', item);
	},

	addChild({commit}, child) {
	commit('ADD_CHILD', child);
	}
	}
	});

	Vue.component('modal', {
	template: `<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
	<div class="modal-content">
	<div class="modal-header">
	<h4 class="modal-title" id="myModalLabel">{{ parent.title }}</h4>
	</div>
	<div class="modal-body">
	{{ parent.body }}

	<h4 v-if="parent.children">Children</h4>

	<ul>
	<li v-for="child in parent.children">
	{{ child.title }}
	</li>
	</ul>

	<div class="form-group">
	<input type="text" class="form-control" placeholder="Add child item" v-model="child.title"/>
	</div>
	</div>
	<div class="modal-footer">
	<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	<button type="button" class="btn btn-primary" @click="addItem">Add Item</button>
	</div>
	</div>
	</div>
	</div>`,

	data() {
	return {
	child: {
	title: '',
	body: ''
	}
	}
	},

	methods: {
	addItem() {
	if (!this.child.title) return;

	this.$store.dispatch('addChild', this.child);
	}
	},

	computed: {
	parent() {
	return this.$store.state.parentItem;
	}
	}
	});

	Vue.component('items', {
	template: `<div class="container">
	<div class="row">
	<div class="col-md-8 col-md-offset-2">
	<div class="panel panel-default" v-for="item in items">
	<div class="panel-heading">{{ item.title }}</div>

	<div class="panel-body">
	{{ item.body }}

	<h4 v-if="item.children">Children</h4>

	<ul>
	<li v-for="child in item.children">
	{{ child.title }}
	</li>
	</ul>
	</div>

	<div class="panel-footer">
	<button type="button" class="btn btn-primary btn-sm" @click="addItems(item)">
	Add items to this parent
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>`,


	mounted() {
	this.$store.dispatch('setItems', data);
	},

	methods: {
	addItems(item) {
	this.$store.dispatch('setParent', item);

	$('#myModal').modal('show');
	}
	},

	computed: {
	items() {
	return this.$store.state.items;
	}
	}


	});

	const app = new Vue({
	store,
	el: '#app'
	});

	</script>

	</body>
	</html>