Custom query to firebase to filter data

edited June 17 in Technical questions

I use webix jet. I want to retrive data from my realtime firebase, filter them by role and then make array of this users. But i did not get it. I think i need to make it async but i cannot find how can i do this. Here is my code:

import Datatable from "../components/datatable";

export default class Projects extends Datatable{
    constructor(app) {
        let team = [];
        webix.firebase.ref("team").orderByChild("role").equalTo("1").on("child_added", function(snapshot) {
            let item  = snapshot.val();
            item.id= snapshot.key;
            team.push({id:snapshot.key, value: snapshot.val().value});
        });
        super(app,
            "projects",
            [{id:"client", editor:"text", header:["Клиент", { content:"textFilter"}], sort:"string", fillspace:true},
                {id:"project", editor:"text", header:["Проект", { content:"textFilter"}], sort:"string", fillspace:true},
                {id:"pm", editor:"select", options: team, header:["PM", { content:"selectFilter"}], sort:"string", fillspace:true},
                {id:"team", header:["Команда", {content:"multiComboFilter"}], optionslist:true, options:team, editor:"multiselect", fillspace:true},
                {id:"hours_total", editor:"text", header:"Часов всего", sort:"int", fillspace:true},
                {id:"hours_used", editor:"text", header:"Часов затрачено", sort:"int", fillspace:true},
                {id:"status", editor:"text", header:["Статус", { content:"selectFilter"}], sort:"string", fillspace:true},
                {id:"deadline", editor:"text", header:["Дедлайн", { content:"dateFilter"}], sort:"date", fillspace:true},
                {id:"sum", editor:"text", header:"Сумма", sort:"int", fillspace:true},
                {id:"payed", editor:"text", header:"Уплачено", sort:"int", fillspace:true},
                {id:"owes", editor:"text", header:"Должны", width: 80, sort:"int"},
                {id: "projectDetails", width: 50, header:"", template:"<span class='webix_icon wxi-angle-double-right toProject'></span>"}],
            [{view: "text", name: "client", placeholder: "Клиент"},
                {view: "text", name: "project", placeholder: "Проект"},
                {view: "select", name: "pm", placeholder: "PM", options:team},
                {view: "multiselect", name: "team", placeholder: "Команда", optionslist: true, options: team},
                {view: "text", name: "hours_total", placeholder: "Часов всего"},
                {view: "text", name: "hours_used", placeholder: "Часов затрачено"},
                {view: "text", name: "status", placeholder: "Статус"},
                {view: "text", name: "deadline", placeholder: "Дедлайн"},
                {view: "text", name: "sum", placeholder: "Сумма"},
                {view: "text", name: "payed", placeholder: "Уплачено"},
                {view: "text", name: "owes", placeholder: "Должны", width: 130}]
        );
    }
}

Tagged:

Comments

  • Hi @dedli

    The Jet Views support asynchronous init by returning a promise from the config(). To configure a Datatable with some settings fetched from a remote source, you'll need to move your async logic to this handler.

    However, if the remote data does not affect the configuration and used only as options for columns) and other controls, it is not required for init and can be loaded afterwards.
    For example, you can create an empty DataCollection for options and load the data after init: https://snippet.webix.com/j9888g3f

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion