cturan
/
vendure
mirror of https://github.com/vendure-ecommerce/vendure


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Vue App</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="../devkit/ui-devkit.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/@clr/ui/clr-ui.min.css" />
    </head>
    <body>
        <div id="app" style="padding: 1rem;">
            <div>
                <h1>Hello from Vue.js!</h1>
                <button v-on:click="getProducts" class="btn btn-primary">Get products</button>
                <h3>Products</h3>
                <ol>
                    <li v-for="product in products">
                        {{ product.name }}
                        <span class="label label-success" v-if="product.enabled">Enabled</span>
                        <span class="label label-danger" v-else>Disabled</span>
                        <button
                            v-on:click="toggleEnabled(product.id, !product.enabled)"
                            class="btn btn-sm btn-secondary"
                        >
                            toggle
                        </button>
                    </li>
                </ol>
            </div>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!',
                    products: [],
                },
                methods: {
                    getProducts: function() {
                        const query = `
                        query GetProducts($skip: Int, $take: Int) {
                            products(options: { skip: $skip, take: $take }) {
                                items { id, name, enabled },
                                totalItems
                            }
                        }`;
                        this.sub = VendureUiDevkit.graphQlQuery(query, {
                            skip: 0,
                            take: 10,
                        }).stream.subscribe(
                            val => {
                                this.products = val.products.items;
                            },
                            err => console.error(err),
                            () => console.log('completed products stream'),
                        );
                    },
                    toggleEnabled: function(id, enabled) {
                        const mutation = `
                        mutation ToggleEnabled($id: ID!, $enabled: Boolean!) {
                            updateProduct(input: { id: $id, enabled: $enabled }) {
                                id
                                enabled
                            }
                        }
                        `;
                        VendureUiDevkit.graphQlMutation(mutation, { id, enabled }).then(val => {
                            VendureUiDevkit.notify({
                                message: 'Updated Product',
                            });
                        });
                    },
                },
                beforeDestroy: function() {
                    console.log('destroying!');
                    this.sub.unsubscribe();
                },
            });
        </script>
    </body>
</html>