get_my/client/ListItems/listItemsForm.js

import { ListItems } from '../../imports/api/listItems.js'
import { Lists } from '../../imports/api/lists.js';
import { Products } from '../../imports/api/products.js';
import { M } from '../lib/assets/materialize.js';
import { UserLast } from '../../imports/api/userLast.js';

Template.listItemsForm.onCreated(function() {
    this.subscribe("myListItems", Session.get("listId"));
    this.subscribe("myLists");
    this.subscribe("myProducts");
    this.subscribe("userLastView");
});

Template.listItemsForm.onRendered(function() {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems, {});
    Session.set("listItemEditMode", false);
    Session.set("itemReqErr", false);
    Session.set("showReceivedItems", false);
    Session.set("filtering", false);
    Session.set("findListItems", {});
    this.autorun(() => {
        var elems = document.querySelectorAll('.autocomplete');
        var instances = M.Autocomplete.init(elems, {
            minLength: 0,
            data: Session.get("findListItems"),
        });
    });
});

Template.listItemsForm.helpers({
    selListName: function() {
        let selListId = "";
        if (Session.get("listId")) {
            selListId = Session.get("listId");
        } else {
            selListInfo = UserLast.findOne({ view: "List" });
            if (selListInfo) {
                selListId = selListInfo.viewId;
                Session.set("listId", selListId);
            } else {
                console.log("not finding any value for viewId.");
            }
        }
        let listInfo = Lists.findOne({ _id: selListId });
        if (listInfo) {
            return listInfo.listName;
        }
    },
    itemProdName: function() {
        
        return Products.find({});
    },
    editMode: function() {
        return Session.get("listItemEditMode");
    },
    filtering: function() {
        return Session.get("filtering");
    }
});

Template.listItemsForm.events({
    'click .saveListItem' (event) {
        event.preventDefault();
        let item = $("#findListItems").val();
        let listId = Session.get("listId");
        if (item == null || item == "") {
            Session.set("itemReqErr", true);
        } else {
            addItem(item, listId);
        }
    },
    'keydown #findListItems' (event) {
        if (event.which === 13) {
            let item = $("#findListItems").val();
            let listId = Session.get("listId");
            if (item == null || item == "") {
                Session.set("itemReqErr", true);
            } else {
                addItem(item, listId);
            }
        }
    },
    'click #showReceivedItems' (event) {
        if ($("#showReceivedItems").prop('checked') == true) {
            Session.set("showReceivedItems", true);
        } else {
            Session.set("showReceivedItems", false);
        }
    },
    'keyup #searchListItems' (event) {
        if (event.which !== 13) {
            let searchVal = $("#searchListItems").val();
            Session.set("searchVal", searchVal);
        }
    },
    'keyup #findListItems' (event) {
        if (event.which !== 13) {
            let findItemVal = $("#findListItems").val();
            // console.log(findItemVal);
            let listItemInfo = Products.find({ prodName: {$regex: findItemVal + '.*', $options: 'i'}}).fetch();
            if (!listItemInfo) {
                console.log("No data for key input.");
            } else {
                getDataList(listItemInfo);
            }
        }
    },
    'click #filterOn' (event) {
        Session.set("filtering", true);
    },
    'click #filterOff' (event) {
        // clear filter field
        Session.set("searchVal", "");
        $("#searchListItems").val("");
        Session.set("filtering", false);
    }
});

getDataList = function(listItemInfo) {
    // console.log(listItemInfo);
    let listItemObjArray = [];
    listItemObjArray = listItemInfo.map(info => ({ id: info._id, text: info.prodName, store: info.prodStore }))
    Session.set("findListItems", listItemObjArray);
}

const addItem = async(item, listId) => {
    let result = await Meteor.callAsync("add.listItem", item, listId);
    try {
        if (!result) {
            console.log("    ISSUE adding list item. See logs.");
        } else {
            $("#findListItems").val("");
        }
    } catch(error) {
        console.log("   ERROR adding list item: " + error);
    }
}