# vue js query example

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>



<div id="main-container">
    <form>
        <label for="collectionName">
            Collection
            <select v-model="selectedCollection">
                <option v-for="collection in collections" v-bind:value="collection"> {{ collection.name }}</option>
            </select>
        </label>
        <div v-if="!!selectedCollection" class="fieldsList">
            <h3 class="fieldsTitle">
                Fields
            </h3>
            <label class="field" v-for="field in selectedCollection.fields"> {{field.dataKey}}
                <input type="checkbox" v-model="field.isChecked">
            </label>
        </div>
    </form>
    <p v-if="successed">success</p>
    <!-- <code id="result-box"></code> -->
</div>

<script>
    async function query(queryBody) {



        try {
            console.log("query called with", queryBody)

            // const response = await fetch("/api/2.0/search", {
            //     // url: "/api/2.0/search",
            //     headers: {
            //         "Content-Type": "application/json",
            //         accept: "application/json, text/plain, */*",
            //         "accept-language": "en-US,en;q=0.9",
            //         "cache-control": "no-cache",
            //         pragma: "no-cache",
            //         "sec-fetch-dest": "empty",
            //         "sec-fetch-mode": "cors",
            //         "sec-fetch-site": "same-origin",
            //     },
            //     method: "POST",
            //     mode: "cors",
            //     credentials: "include",
            //     body: queryBody,
            // });
            // const jsonResponse = await response.json();

            // return jsonResponse;
        } catch (error) {
            alert("Error in api calling. ");
        }
    }
    let messageFields = [
        "attachments",
        "author",
        "board",
        "board_relative_id",
        "body",
        "can_accept_solution",
        "canonical_url",
        "context_workflow",
        "context_id",
        "context_url",
        "contributors",
        "conversation",
        "conver_image",
        "current_revision",
        "custom_tag_scope",
        "custom_tags",
        "depth",
        "device_id",
        "excluded_from_kudos_lea",
        "href",
        "id",
        "images",
        "is_answer",
        "is_escalated",
        "is_image_comment",
        "is_promoted",
        "is_solution",
        "kudos",
        "labels",
        "language",
        "last_publish_time",
        "manual_sort",
        "me_toos",
        "metrics",
        "moderation_approval_date",
        "moderation_status",
        "moderation_style",
        "moderation_style",
        "occasion_data",
        "parent",
        "placeholder",
        "popularity",
        "post_time",
        "post_time_friendly",
        "ratings",
        "read_only",
        "replies",
        "search_snippet",
        "seo_description",
        "seo_title",
        "soluation_data",
        "status",
        "subject",
        "tags",
        "teaser",
        "tkb_helpfulness_ratings",
        "topic",
        "user_context",
        "videos",
        "view_href",
        "winner",
    ]
    function handleResponse(response) {
        const strignifiedResponse = JSON.stringify(response, null, 2);
        document.getElementById("result-box").innerText = strignifiedResponse;
    }

    new Vue({
        el: "#main-container",
        data: {
            successed: false,
            selectedCollection: null,
            collections: [
                {
                    name: "messages",
                    fields: messageFields.map(i => ({
                        dataKey: i,
                        isChecked: false
                    }))
                },

            ]
        },
        methods: {
            submitQuery: async function (inputText) {
                let jsonParsed;
                try {
                    jsonParsed = JSON.stringify(JSON.parse(inputText));
                    console.log("value is ", jsonParsed);

                } catch (error) {
                    alert("invalid json");
                    return;
                }
                const queryResponse = await query(jsonParsed);
                this.successed = true


                handleResponse(queryResponse);
            }
        }
    })
</script>

<style>
    #input-box {
        height: 300px;
        width: 90%;
    }

    #result-box {
        height: 300px;
        width: 90%;
        border-style: solid;
        border-width: 0.5 px;
        border-color: grey;
        border-radius: 8px;
    }

    .fieldsList {
        display: flex;
        margin-left: 3rem;
        margin-top: 3rem;
        margin-bottom: 1rem;
        flex-direction: column;

    }

    .fieldsTitle {
        margin-bottom: 2rem;
    }

    .field {
        margin-bottom: 1rem;
    }
</style>