project-bocian/tools/Bocian.php.addItemToRaport.js

const createReactClass = window.p5VendorJs.createReactClass;
const h = window.p5VendorJs.React.createElement;
const ReactDOM = window.p5VendorJs.ReactDOM;
const AsyncTypeahead = window.p5VendorJs.AsyncTypeahead;
const swal = window.swal;
const DBG = 1;


var P5UI_AddItemToReport_BazaMenuItem = createReactClass({
    // this.props: { key: option.ID, baza: selectedBaza, data: option }
    render: function () {
        return h('div', {}, this.props.data.label);
    }
})

var P5UI_AddItemToReport = createReactClass({
    getInitialState: function () {
        return {
            baza: null,
            newItemBaza: null,
            isSearching: false,
            selected: null,
        };
    },
    _handleSelectBaza: function (baza) {
        this.setState({ baza: baza, newItemBaza: null });
    },
    _handleSelectNewItem: function (baza) {
        this.setState({ baza: null, newItemBaza: baza });
    },
    _handleSelected: function (selected) {
        this.setState({ selected: (selected.length > 0) ? selected[0] : null });
    },
    _handleSearch: function (query) {
        this.setState({ isSearching: true });
        var baza = this.state.baza;
        var options= [];
        window.fetch(URL_FETCH_FROM_BAZA, {
					method: 'POST',
					header: {
						'contentType': 'applications/json'
					},
					credentials: 'same-origin',
					body: JSON.stringify({
						baza: baza,
            query: query,
					})
				})
        .then(function(responseText) {
					try {
						return JSON.parse(responseText);
					} catch (e) {
						throw responseText;
					}
				})
				.then(function(result) {
					if (result.type == 'success') {
						p5UI__notifyAjaxCallback(result);
						resolve(result.body);
					}
				})
        .then(function(items) {
          options = items;
          this.setState({ isSearching: false, options: options });
        })
        .catch(function(error) {
          if(DBG) console.log('request failed', error);
        })
        // setTimeout(function () {
        //     var options = [];
        //     options.push({
        //         ID: 601900,
        //         nazwa: "ADEGROUP SPÓŁKA Z OGRANICZONĄ ODPOWIEDZIALNOŚCIĄ SPÓŁKA KOMANDYTOWA",
        //         krs: "0000721712", nip: "5862328735", regon: "369609850",
        //         S_kraj: "POLSKA", S_miejscowosc: "GDYNIA", A_kod: "81-310", A_ulica: "ŚLĄSKA", A_nrDomu: "35/37",
        //         searchLabel: "ADEGROUP SPÓŁKA Z OGRANICZONĄ ODPOWIEDZIALNOŚCIĄ SPÓŁKA KOMANDYTOWA, ŚLĄSKA 35/37, 81-310 GDYNIA, krs: 0000721712, nip: 5862328735, regon: 369609850",
        //         label: "ADEGROUP SPÓŁKA ..., ŚLĄSKA 35/37, 81-310 GDYNIA"
        //     })
        //     options.push({
        //         ID: 601900,
        //         nazwa: "BIZNESLIMIT.PL SPÓŁKA Z OGRANICZONĄ ODPOWIEDZIALNOŚCIĄ",
        //         krs: "0000721708", nip: "9452218050", regon: "369608402",
        //         S_kraj: "POLSKA", S_miejscowosc: "KRAKÓW", A_kod: "31-315", A_ulica: "ELIASZA RADZIKOWSKIEGO", A_nrLokalu: "16", A_nrDomu: "74",
        //         searchLabel: "BIZNESLIMIT.PL SPÓŁKA Z OGRANICZONĄ ODPOWIEDZIALNOŚCIĄ ELIASZA RADZIKOWSKIEGO 74/16, 31-315 KRAKÓW 0000721708 9452218050 369608402",
        //         label: "BIZNESLIMIT.PL ..., ELIASZA RADZIKOWSKIEGO 74/16, 31-315 KRAKÓW"
        //     })
        //     this.setState({ isSearching: false, options: options });
        // }.bind(this), 1000);
        // makeAndHandleRequest(query)
        //   .then(({ options }) => {
        //     this.setState({
        //       isLoading: false,
        //       options,
        //     });
        //   });
    },
    componentWillUnmount: function () {
        DBG && console.log("DBG: conponentDidUnmount...");
    },
    render: function () {
        // '<div>' +
        //   '<p style="text-align:center">' + 'Wybierz bazę' + '</p>' +
        //   '<div>' + .join(' ') + '</div>' +
        //   +
        //   '</div>',

        var bazaBtns = [];
        bazaBtns.push({ baza: "default_db/BI_audit_KRS/BI_audit_KRS", title: "KRS - Firmy", label: "KRS" });
        bazaBtns.push({ baza: "default_db/BI_audit_KRS_person/BI_audit_KRS_person", title: "KRS - Osoby", label: "KRS/p" });
        bazaBtns.push({ baza: "default_db/BI_audit_MSIG/BI_audit_MSIG", title: "MSIG - Firmy", label: "MSIG" });
        bazaBtns.push({ baza: "default_db/BI_audit_MSIG_person/BI_audit_MSIG_person", title: "KRS - Osoby", label: "MSIG/p" });
        bazaBtns.push({ baza: "default_db/BI_audit_taxpayer/BI_audit_taxpayer", title: "VAT - Aktywni płatnicy", label: "VATp" });
        bazaBtns.push({ baza: "default_db/BI_audit_CEIDG/BI_audit_CEIDG", title: "CEIDG", label: "CEIDG" });
        // bazaBtns.push({ baza: "default_db/BI_audit_ENERGA_RUM_UMOWY/BI_audit_ENERGA_RUM_UMOWY", title: "RUM Umowy", label: "RUM/u" });
        // bazaBtns.push({ baza: "default_db/BI_audit_ENERGA_RUM_KONTRAHENCI/BI_audit_ENERGA_RUM_KONTRAHENCI", title: "RUM Kontrahenci", label: "RUM/k" });
        // bazaBtns.push({ baza: "default_db/BI_audit_ENERGA_FAKTURY/BI_audit_ENERGA_FAKTURY", title: "Faktury - do imoportowania", label: "Faktury" });
        var newItemBtns = [];
        newItemBtns.push({ baza: "default_db/BI_audit_ENERGA_PRACOWNICY/BI_audit_ENERGA_PRACOWNICY", title: "Nowa osoba", label: "Nowa osoba" });
        newItemBtns.push({ baza: "default_db/BI_audit_ENERGA_RUM_KONTRAHENCI/BI_audit_ENERGA_RUM_KONTRAHENCI", title: "Nowy podmiot", label: "Nowy podmiot" });

        function generateBazaBtn(btn, opts) {
            return h('button', {
                title: btn.title,
                className: "btn btn-success" + (opts.selected ? " active" : ""),
                style: { margin: "3px" },
                onClick: function () {
                    opts.onClick(btn.baza)
                },
            }, btn.label)
        }

        function generateNewItemBtn(btn, opts) {
            return h('button', {
                title: btn.title,
                className: "btn btn-success" + (opts.selected ? " active" : ""),
                style: { margin: "3px" },
                onClick: function () {
                    opts.onClick(btn.baza)
                },
            }, btn.label)
        }

        var handleSelectBaza = this._handleSelectBaza.bind(this);
        var handleSelectNewItem = this._handleSelectNewItem.bind(this);
        var selectedBaza = this.state.baza;
        var selectedNewItem = this.state.newItemBaza;
        var selectedLabel = '';
        if (selectedBaza) {
            var selBazaBtn = bazaBtns.filter(function (btn) { return btn.baza === selectedBaza; })
            if (selBazaBtn) {
                selBazaBtn[0].title
            }
        }
        var handleSearch = this._handleSearch.bind(this);
        var handleSelected = this._handleSelected.bind(this);

        return h('div', {}, [
            h('p', { style: { textAlign: "center" } }, "Wybierz bazę"),
            h('div', { style: { marginBottom: '22px' } },
                bazaBtns.map(function (btn) {
                    return generateBazaBtn(btn, {
                        onClick: handleSelectBaza,
                        selected: (selectedBaza === btn.baza),
                    });
                }).concat(
                    newItemBtns.map(function (btn) {
                        return generateNewItemBtn(btn, {
                            onClick: handleSelectNewItem,
                            selected: (selectedNewItem === btn.baza),
                        });
                    })
                )
            ),
            selectedBaza && h(AsyncTypeahead, {
                isLoading: this.state.isSearching,
                allowNew: false,
                multiple: false,
                options: this.state.options,
                labelKey: "searchLabel",
                minLength: 2,
                onSearch: handleSearch,
                placeholder: "Wyszukaj...",
                onChange: handleSelected,
                autoFocus: true,
                // filterBy: function (option, text) {
                //   console.log('TODO: filterBy...', {option, text});
                //   return true;
                // },
                renderMenuItemChildren: function (option, props) {
                    return h(P5UI_AddItemToReport_BazaMenuItem, { key: option.ID, baza: selectedBaza, data: option });
                }
            }),
            selectedNewItem && h('p', {}, "Dodaj nowy ... " + selectedNewItem),
            //TODO dlaczego to nie działa
            // selectedNewItem && h('div', {className='form-group'},[
              // h('input',{
              //   className:'form-control required',
              //   id:'personName',
              //   placeholder:'Imię'
              // }),
              // h('input',{
              //   className:'form-control required',
              //   id:'personSurname',
              //   placeholder:'Nazwisko'
              // },[]),
              // h('input',{
              //   className:'form-control required',
              //   id:'personNip',
              //   placeholder:'NIP'
              // },[]),
              // h('input',{
              //   className:'form-control required',
              //   id:'personPesel',
              //   placeholder:'personPesel'
              // },[]),
              // h('input',{
              //   className:'form-control required',
              //   id:'personRegon',
              //   placeholder:'REGON'
              // },[])
            // ]
            // ),
            // '' === selectedNewItem && h
            (selectedBaza && this.state.selected) && h('div', { style: { marginTop: '22px' } }, [
                h('button', {
                    className: "btn btn-success active",
                    onClick: function () {
                        this.props.onSelect(this.state.baza, this.state.selected);
                        ReactDOM.unmountComponentAtNode(document.getElementById('createPracownikAjax__searchBaza'));
                        swal.close()
                    }
                }, "Dodaj")
            ])
        ])
    }
})

function getWindowWidth() {
    var w = window, d = document,
        e = d.documentElement,
        g = d.getElementsByTagName('body')[0];
    return w.innerWidth || e.clientWidth || g.clientWidth;
}

function createPracownikAjax(event) {
    // default_db/BI_audit_KRS/BI_audit_KRS
    // default_db/BI_audit_KRS_person/BI_audit_KRS_person
    // default_db/BI_audit_MSIG/BI_audit_MSIG
    // default_db/BI_audit_MSIG_person/BI_audit_MSIG_person
    // default_db/BI_audit_taxpayer/BI_audit_taxpayer
    // default_db/BI_audit_CEIDG/BI_audit_CEIDG
    // default_db/BI_audit_ENERGA_RUM_UMOWY/BI_audit_ENERGA_RUM_UMOWY
    // default_db/BI_audit_ENERGA_RUM_KONTRAHENCI/BI_audit_ENERGA_RUM_KONTRAHENCI
    // default_db/BI_audit_ENERGA_FAKTURY/BI_audit_ENERGA_FAKTURY

    swal({
        title: "Dodaj osobę lub podmiot",
        width: (getWindowWidth() * 0.8),
        html: '<div id="createPracownikAjax__searchBaza" style="padding:0 24px 24px 24px"></div>',
        animation: false,
        showConfirmButton: false,
        showCancelButton: false,
        showCloseButton: true,
        onOpen: function () {
            ReactDOM.render(
                h(P5UI_AddItemToReport, {
                    onSelect: function (baza, selected) {
                        //insert do tabeli BI_audit_ENERGA_PRACOWNICY
                        console.log('TODO: selected ', { baza, selected });
                    }
                }),
                document.getElementById('createPracownikAjax__searchBaza')
            )
        }
    }).catch(function (err) {
        DBG && console.log('err', err)
    })
}

global.createPracownikAjax = createPracownikAjax;
// module.exports = {
//     P5UI_AddItemToReport_BazaMenuItem,
//     P5UI_AddItemToReport,
//     createPracownikAjax
// }