<commit_before><template>

    <div class="row" v-bind="character">

        <!-- Left Side -->
        <div class="col-md-6">

            <h5 class="text-center">
                {{ character.name }}'s Inventory
            </h5>

            <form role="form" method="POST">
                <!--{!! csrf_field() !!}-->
                <div class="my-3 row mx-1 table-dark align-items-center">

                    <div v-for="index in total_inventory_slots"
                         :id="index-1"
                         :class="[isEquipped(index-1) ? 'inventory-item equipped' : 'inventory-item']">
                        <button @click.stop.prevent="moveToStore(getInventoryItem(index-1))"
                                class="btn btn-link-thin"
                                v-bind="getInventoryItem(index-1)"
                                v-if="getInventoryItem(index-1)">
                            <img :src="asset(getInventoryItem(index-1).image_file_path)">
                        </button>
                    </div>

                </div>
            </form>

        </div>

        <!-- Right Side -->
        <div class="col-md-6">

            <h5 class="text-center">
                {{ character.name }}'s Store
            </h5>

            <form role="form" method="POST">
                <!--{!! csrf_field() !!}-->
                <div class="my-3 row mx-1 table-dark align-items-center">

                    <div v-for="index in total_store_slots"
                         :id="index-1"
                         class="inventory-item">
                        <button type="submit"
                                @click.stop.prevent="moveToInventory(getStoreItem(index-1))"
                                class="btn btn-link-thin"
                                v-if="getStoreItem(index-1)">
                            <img :src="asset(getStoreItem(index-1).image_file_path)">
                        </button>
                    </div>

                </div>
            </form>

        </div>
        <!--<pre>{{ $data }}</pre>-->
    </div>
</template>

<script>

    export default {
        mounted() {
            console.log('Component mounted.')
        },

        data() {
            return {
                total_inventory_slots: 25,
                total_store_slots: 25,
                character: {
                    name: '',
                    inventory: {
                        items: [
                            {
                                pivot: {
                                    inventory_slot_number: null,
                                    status: ''
                                },
                                image_file_path: ''
                            }
                        ]
                    },
                    store: {
                        items: [
                            {
                                pivot: {
                                    inventory_slot_number: null,
                                    status: ''
                                },
                                image_file_path: ''
                            }
                        ]
                    }
                },
                renderKey: 0
            }
        },

        created() {
            console.log('created');

            this.character = this.$attrs.character;

            // this.getCharacter();
        },

        methods: {

            forceRerender() {
                this.renderKey += 1;
            },

            findFreeInventorySlot() {

                for (let slot in this.total_inventory_slots) {

                    if (this.getInventoryItem(slot) === null) {
                        return slot;
                    }
                }

                return null;
            },

            moveToInventory(item) {
                console.log('moveToInventory');

                if (item === null) {
                    return;
                }

                axios.post('/store/item/' + item.id + '/move-to-inventory')
                    .then(response => {
                        console.log(response);

                        item.pivot.inventory_slot_number = this.findFreeInventorySlot();

                        this.character.inventory.items.push(item);

                        this.forceRerender();

                    }).catch(error => {
                    console.log('error');
                    console.log(error.message);
                });
            },

            moveToStore(item) {
                console.log('moveToStore');

                if (item === null) {
                    return;
                }

                axios.post('/inventory/item/' + item.id + '/move-to-store')
                    .then(response => {
                        console.log(response);
                    }).catch(error => {
                    console.log('error');
                    console.log(error.message);
                });
            },

            getCharacter() {
                console.log('getCharacter');

                axios.get('/api/character')
                    .then(response => {
                        console.log(response);
                        this.character = response.data;
                    }).catch(error => {
                    console.log('error');
                    console.log(error.message);
                });
            },

            asset(path) {
                let base_path = window._asset || '';

                return base_path + path;
            },

            getInventoryItem(index) {
                return this.character.inventory.items.find(item => parseInt(item.pivot.inventory_slot_number) === index);
            },

            getStoreItem(index) {
                return this.character.store.items.find(item => parseInt(item.pivot.inventory_slot_number) === index);
            },

            isEquipped(index) {
                return this.getInventoryItem(index) && this.getInventoryItem(index).pivot.status === 'equipped';
            }
        }
    };
</script>

<style scoped>
</style>
<commit_msg>Moving items from inventory to store and back using Vue.js - Working.<commit_after><template>

    <div class="row" v-bind="character">

        <!-- Left Side -->
        <div class="col-md-6">

            <h5 class="text-center">
                {{ character.name }}'s Inventory
            </h5>

            <form role="form" method="POST">
                <!--{!! csrf_field() !!}-->
                <div class="my-3 row mx-1 table-dark align-items-center">

                    <div v-for="index in total_inventory_slots"
                         :id="index-1"
                         :class="[isEquipped(index-1) ? 'inventory-item equipped' : 'inventory-item']">
                        <button @click.stop.prevent="moveToStore(getInventoryItem(index-1))"
                                class="btn btn-link-thin"
                                v-bind="getInventoryItem(index-1)"
                                v-if="getInventoryItem(index-1)">
                            <img :src="asset(getInventoryItem(index-1).image_file_path)">
                        </button>
                    </div>

                </div>
            </form>

        </div>

        <!-- Right Side -->
        <div class="col-md-6">

            <h5 class="text-center">
                {{ character.name }}'s Store
            </h5>

            <form role="form" method="POST">
                <!--{!! csrf_field() !!}-->
                <div class="my-3 row mx-1 table-dark align-items-center">

                    <div v-for="index in total_store_slots"
                         :id="index-1"
                         class="inventory-item">
                        <button type="submit"
                                @click.stop.prevent="moveToInventory(getStoreItem(index-1))"
                                class="btn btn-link-thin"
                                v-if="getStoreItem(index-1)">
                            <img :src="asset(getStoreItem(index-1).image_file_path)">
                        </button>
                    </div>

                </div>
            </form>

        </div>
        <!--<pre>{{ $data }}</pre>-->
    </div>
</template>

<script>

    export default {
        mounted() {
            console.log('Component mounted.')
        },

        data() {
            return {
                total_inventory_slots: 25,
                total_store_slots: 25,
                character: {
                    name: '',
                    inventory: {
                        items: [
                            {
                                pivot: {
                                    inventory_slot_number: null,
                                    status: ''
                                },
                                image_file_path: ''
                            }
                        ]
                    },
                    store: {
                        items: [
                            {
                                pivot: {
                                    inventory_slot_number: null,
                                    status: ''
                                },
                                image_file_path: ''
                            }
                        ]
                    }
                }
            }
        },

        created() {
            console.log('created');

            this.character = this.$attrs.character;

            // this.getCharacter();
        },

        methods: {
            findFreeStoreSlot() {

                console.log('findFreeStoreSlot');

                for (let slot = 0; slot < this.total_store_slots; slot++) {

                    if (this.getStoreItem(slot) === undefined) {
                        return slot;
                    }
                }

                return null;
            },

            findFreeInventorySlot() {

                console.log('findFreeInventorySlot');

                for (let slot = 0; slot < this.total_inventory_slots; slot++) {

                    if (this.getInventoryItem(slot) === undefined) {
                        return slot;
                    }
                }

                return null;
            },

            moveToInventory(item) {
                console.log('moveToInventory');

                if (item === null) {
                    return;
                }

                axios.post('/store/item/' + item.id + '/move-to-inventory')
                    .then(response => {
                        console.log(response);

                        item.pivot.inventory_slot_number = this.findFreeInventorySlot();

                        this.character.inventory.items.push(item);

                        let index = this.character.store.items.indexOf(item);

                        if (index > -1) {
                            this.character.store.items.splice(index, 1);
                        }

                    }).catch(error => {
                    console.log('error');
                    console.log(error.message);
                });
            },

            moveToStore(item) {
                console.log('moveToStore');

                if (item === null) {
                    return;
                }

                axios.post('/inventory/item/' + item.id + '/move-to-store')
                    .then(response => {

                        console.log(response);

                        item.pivot.inventory_slot_number = this.findFreeStoreSlot();

                        this.character.store.items.push(item);

                        let index = this.character.inventory.items.indexOf(item);

                        if (index > -1) {
                            this.character.inventory.items.splice(index, 1);
                        }

                    }).catch(error => {
                    console.log('error');
                    console.log(error.message);
                });
            },

            getCharacter() {
                console.log('getCharacter');

                axios.get('/api/character')
                    .then(response => {
                        console.log(response);
                        this.character = response.data;
                    }).catch(error => {
                    console.log('error');
                    console.log(error.message);
                });
            },

            asset(path) {
                let base_path = window._asset || '';

                return base_path + path;
            },

            getInventoryItem(index) {
                return this.character.inventory.items.find(
                    item => parseInt(item.pivot.inventory_slot_number) === index
                );
            },

            getStoreItem(index) {
                return this.character.store.items.find(item => parseInt(item.pivot.inventory_slot_number) === index);
            },

            isEquipped(index) {
                return this.getInventoryItem(index) && this.getInventoryItem(index).pivot.status === 'equipped';
            }
        }
    };
</script>

<style scoped>
</style>

{'fraction_non_alphanumeric': 0.11765590912510344, 'fraction_numerical': 0.00421274354923644, 'mean_word_length': 0.8862088535754824, 'pattern_counts': {'":': 0, '<': 87, '<?xml version=': 0, '>': 103, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 8, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3859810', 'n_tokens_mistral': 3371, 'n_tokens_neox': 3055, 'n_words': 463}