unsplashmodal.vue

<template>
    <div class="modal-root">

        <!-- Modal -->
        <div class="modal image-uploader" :class="modalId" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">
                            media manager
                        </h4>
                    </div>
                    <div class="modal-body">

                        </div>
                        
                        <div class="row" v-show="tab == 4" style="margin: 0; ">
                            <div class="col-md-9">
                                <input name="title" v-model="searchTerm" style="padding: 3px 5px 4px 5px;">
                                <button class="btn btn-primary" @click="()=>{performSearch(); hideDefaultUnsplashDisplay()}">Search</button>
                            </div>
                            
                            <div class="server-images col-md-9" style="width:69.666667%;height:434px;">
                                    <div class="columns" style="height: 65%;"> 
                                        <div class="server-image selectable-upload" style="width: 150px; max-height: 250px; overflow: hidden" v-for="result in results" :key="result.id"> 
                                            <img class="splash"
                                                :class="{ unSplashThumbActive: isActive[result.urls.small] }"
                                                :src="result.urls.small"
                                                @click="mouseDownSelect(result.urls.small)"
                                            />
                                            <div class="media-content">
                                                <p>{{ result.user.username }}</p>
                                            </div>
                                        </div>
                                    </div>
                            </div>
                            <div class="selected-info-container col-md-3">
                                <div class="selected-info-header">
                                    selected image
                                </div>
                                <div id="file" style="width: 100%; height: 100%; overflow: hidden; padding-top: 10px;" 
                                v-for="result in results" 
                                :key="result.id" 
                                v-if="isActive[result.urls.small]"
                                >
                                    <div class="form-group row">
                                        <img :src="result.urls.thumb" />
                                    </div>
                                    <div class="form-group row">
                                        <button id="unsplashSave" class="btn btn-primary pull-right" @click="saveSearchedUnsplashPhotoToServer(result)">save</button>
                                        <!-- <button class="btn btn-primary pull-right" @click="startCrop">crop</button> -->
                                    </div>
                                </div>
                            </div> <!-- selected info container end -->
                        </div> <!-- row end -->

                    </div> <!-- modal body end -->
                    
                </div> <!-- modal content end -->

            </div> <!-- modal dialog end -->
        </div> <!-- modal image uploader end -->

    <!-- </div> modal root -->
</template>

<script>

    import Modal from '../../../mixins/Modal.js';
    
    const url = 'https://api.unsplash.com/photos'

    export default {

        mixins: [Modal],


        data () {
            return {
                searchTerm: "field",
                currentPage: 1,
                perPage: 12,
                results: [],
                hideOnSearch: true,
                showOnSearch: false,
                isActive: {} // we will use his object to save each photo's active state
            }
        },

        methods: {

            /* removed a bunch of irrelevant stuff */

            /* Unsplash Tab Methods */

            performSearch: function() {
                console.log(this.searchTerm);
                var link = 'https://api.unsplash.com/search/photos?query=';
                var apiLink = link + this.searchTerm;
                const config = {
                    params: {
                        client_id: '11111',
                    }
                }

                axios
                    .get(apiLink, config)
                    .then(response => {
                    this.results = response.data.results;
                    })
                    .catch(error => {
                    console.log(error);
                    });
            },

            hideDefaultUnsplashDisplay () {
                this.hideOnSearch = false
                this.showOnSearch = true
            },

            mouseDownSelect(url) {
                if (!this.isActive[url]) {
                // we use $set and $delete because of this caveat:
                // https://vuejs.org/v2/guide/list.html#Object-Change-Detection-Caveats
                this.isActive = {}
                this.$set(this.isActive, url, true)
                } else {
                this.$delete(this.isActive, url)
                }
            },
            
            saveSearchedUnsplashPhotoToServer : function(result) {
                // var data = result.urls.full;
                // data.append('file', document.getElementById('file').files[0]);
                axios.post('/editor/upload-image', data  )
                    .then(this.handleSuccessfulSave)
                    .catch(this.catch);
                }, // error 500

        }
    }
</script>

<style lang="scss">

    /*removed a bunch of css */

    .unSplashThumbActive {border: 2px solid green}


</style>