Component C

<template>
    <div class="container mt-2">
        <div class="row">
            <div class="d-inline col-lg-4 col-md-4 col-sm-4" padding="0px">
                Date
                <font color="red">*</font>
            </div>
            <div class="d-inline col-lg-8 col-md-8 col-sm-8" padding="0px">
                <date-picker
                        v-model="commentData.customDate"
                        :lang="lang"
                        type="date"
                        format="DD.MM.YYYY"
                        confirm
                ></date-picker>
            </div>
        </div>
        <div class="row">
            <div class="d-inline col-lg-4 col-md-4 col-sm-4" padding="0px">
                Comment
                <font color="red">*</font>
            </div>
            <div class="d-inline col-lg-8 col-md-8 col-sm-8" padding="0px">
                <input v-model="commentData.comment" type="text" class="form-control" size="16">
            </div>
        </div>

        <div class="row">
            <div class="d-inline col-lg-4 col-md-4 col-sm-4" padding="0px">
                Category
                <font color="red">*</font>
            </div>
            <div class="d-inline col-lg-8 col-md-8 col-sm-8" padding="0px">
                <select v-model="selectedCategory">
                    <option>Social (Comment)</option>
                    <option>Sport (Comment)</option>
                    <option>School (Comment)</option>
                    <option>Others (Comment)</option>
                </select>
            </div>
        </div>
        <button type="submit" class="btn btn-primary" @click.prevent="saveComment()">Save</button>
        <button type="submit" class="btn btn-primary float-right" @click.prevent="$emit('close')">Cancel</button>

    </div>
</template>

<script>
    import * as $ from "jquery";
    import DatePicker from "vue2-datepicker";

    let uuid = 0;

    export default {
        props: ["text", "commentRecId"],
        beforeCreate() {
            this.uuid = uuid.toString();
            uuid += 1;
            console.log("beforeCreate() uuid: " + this.uuid);
        },
        components: { DatePicker },
            data: function() {
                return {
                    commentData: {
                        comment: "",
                        customDate: ""
                    },
                    selectedCategory: "",
                    lang: {
                        default: "en"
                    },
                }
            },
            mounted: function() {
                // console.log("this._uid: " + this._uid);
                this.fillForm();
            },
        methods: {
            fillForm: function(){
                console.log("fillForm called!");
                var listCategory;
                var listComment;
                var listDate;

                let siteUrl = 'https://thesite.sharepoint.com/sites/Playercard/';
                let clientContext = new SP.ClientContext(siteUrl);
                let oList = clientContext.get_web().get_lists().getByTitle('Comment');
                let camlQuery = new SP.CamlQuery();

                var statID = this.commentRecId;
                console.log("EditComment CommentRecId: " + this.commentRecId);
                console.log("EditComment statID: " + statID);

                camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' +
                    '<Value Type=\'Number\'>'+statID+'</Value></Geq></Where></Query><View>');

                var collListItem = oList.getItems(camlQuery);
                clientContext.load(collListItem);
                console.log("clientContext loaded!");

                // First we much execute the query to retrieve the items
                clientContext.executeQueryAsync(()=> {
                        // Now colListItem is a collection, we must iterate through it
                        var listItemEnumerator = collListItem.getEnumerator();

                        while (listItemEnumerator.moveNext()) {
                            var oListItem = listItemEnumerator.get_current();
                            listDate = oListItem.get_item('Date');
                            listCategory = oListItem.get_item('Category');
                            listComment = oListItem.get_item('Comment');
                        }

                        console.log("listDate: " + listDate);
                        console.log("listCategory " + listCategory);
                        console.log("listComment: " + listComment);
                        this.commentData.customDate = listDate;
                        this.selectedCategory = listCategory;
                        this.commentData.comment = listComment;

                        clientContext.executeQueryAsync(
                            () => console.log('Item(s) edited')),
                            () => console.log('Failed to edit item(s)');
                    },
                    ()=>console.log('Failed to retrieve items'));
            },
            getFormDigest: function() {
                return $.ajax({
                    //url: "/DEV/BBUlm" + "/_api/contextinfo",
                    url: this.$store.state.baseUrlContextinfo,
                    method: "POST",
                    async: false,
                    headers: {
                        Accept: "application/json; odata=verbose"
                    }
                });
            },
            saveComment: function() {
                var playerID = this.$store.state.selectedPlayer.ID;
                var date = this.commentData.customDate.toISOString();
                var listName = "Comment";
                var $this = this;
                var itemType = this.GetItemTypeForListName(listName);
                var item = {
                    __metadata: {
                        type: itemType
                    },
                    Comment: this.commentData.comment,
                    Category: this.selectedCategory,
                    Date: date,
                    PlayerNameId: playerID
                };
                var baseUrl = this.$store.state.baseUrl;
                baseUrl += "GetByTitle('" + listName + "')/items"; // + filter;
                return this.getFormDigest(baseUrl).then(function(data) {
                    $.ajax({
                        url: baseUrl,
                        type: "POST",
                        contentType: "application/json;odata=verbose",
                        data: JSON.stringify(item),
                        headers: {
                            Accept: "application/json;odata=verbose",
                            "X-RequestDigest": data.d.GetContextWebInformation.FormDigestValue
                        },
                        async: false,
                        success: function(data, textStatus, xhr) {
                            $this.$emit("close");
                            $this.writeHistory(data.d.ID);
                            console.log("success!");
                        },
                        error: function(xhr, textStatus, errorThrown) {
                            alert("error:" + JSON.stringify(xhr));
                            $("#dialog" + "records").html(" [0]");
                        }
                    });
                });
            },
            writeHistory: function(commentRecId) {
                var playerID = this.$store.state.selectedPlayer.ID;
                var playerName = this.$store.state.selectedPlayer.Name;
                var $this = this;
                var listName = "History";
                var CurrentDate = this.commentData.customDate.toISOString();
                var itemType = this.GetItemTypeForListName(listName);
                var item = {
                    __metadata: {
                        type: itemType
                    },
                    PlayerNameId: playerID,
                    date: CurrentDate,
                    act: this.selectedCategory,
                    details: this.commentData.comment,
                    CorrespondingListID: commentRecId.toString()
                };
                // var baseUrl = "/DEV/BBUlm" + "/_api/web/lists/";
                var baseUrl = this.$store.state.baseUrl;
                baseUrl += "GetByTitle('" + listName + "')/items";
                return this.getFormDigest(baseUrl).then(function(data) {
                    $.ajax({
                        url: baseUrl,
                        type: "POST",
                        contentType: "application/json;odata=verbose",
                        data: JSON.stringify(item),
                        headers: {
                            Accept: "application/json;odata=verbose",
                            "X-RequestDigest": data.d.GetContextWebInformation.FormDigestValue
                        },
                        async: false,
                        success: function(data, textStatus, xhr) {
                            $this.$emit("close");
                        },
                        error: function(xhr, textStatus, errorThrown) {
                            alert("error:" + JSON.stringify(xhr));
                            $("#dialog" + "records").html(" [0]");
                        }
                    });
                });
            },
            GetItemTypeForListName: function(name) {
                return (
                    "SP.Data." +
                    name.charAt(0).toUpperCase() +
                    name
                        .split(" ")
                        .join("")
                        .slice(1) +
                    "ListItem"
                );
            }
        }
    };
</script>

<style scoped>
    .v--modal {
        padding: 10px;
    }
    .row {
        margin-bottom: 20px;
    }
    select {
        -webkit-appearance: menulist;
        border-style: solid;
    }
</style>