react-bootstrap#Glyphicon JavaScript Examples

The following examples show how to use react-bootstrap#Glyphicon. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: PlotSelection.jsx    From mapstore2-cadastrapp with GNU General Public License v3.0 6 votes vote down vote up
function PlotSelectionTabActionButtons({onNewTab = () => {}, onTabDelete = () => {}}) {
    return (
        <ButtonGroup className="pull-right">
            <OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.search.addTab'}/></Tooltip>}>
                <Button
                    className="pull-right"
                    onClick={onNewTab}
                ><span className="glyphicon glyphicon-plus"></span>
                </Button>
            </OverlayTrigger>
            <OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.search.deleteTab'}/></Tooltip>}>
                <ConfirmButton
                    className="pull-right"
                    confirmContent={<Message msgId={'cadastrapp.search.confirmDeleteTab'}/>}
                    onClick={onTabDelete}>
                    <Glyphicon glyph="trash" />
                </ConfirmButton>
            </OverlayTrigger>
        </ButtonGroup>
    );
}
Example #2
Source File: SearchButtons.jsx    From mapstore2-cadastrapp with GNU General Public License v3.0 6 votes vote down vote up
export default function({
    loading, valid, onClear = () => {}, onSearch = () => {}
}) {
    return (<ButtonGroup style={{ margin: "10px", "float": "right" }}>
        {loading ? <Spinner spinnerName="circle" noFadeIn overrideSpinnerClassName="spinner" /> : null}
        <Button
            onClick={onClear}
        ><Message msgId={'cadastrapp.search.clear'}/> </Button>
        <Button
            disabled={loading || !valid}
            bsStyle="primary"
            onClick={onSearch}
        ><Glyphicon glyph="search"/> <Message msgId={'cadastrapp.search.title'}/></Button>
    </ButtonGroup>);
}
Example #3
Source File: Welcome.jsx    From mapstore2-cadastrapp with GNU General Public License v3.0 6 votes vote down vote up
export default function WelcomeMessage(props) {
    const { isShown, configuration: { dateValiditeEDIGEO = '', dateValiditeMajic = '' } = {}, data } = props;
    let className = isShown ? "welcome-message" : "collapse";
    if (data.length > 0) {
        className = "collapse";
    }


    return (
        <div className={className}>
            <div>
                <Glyphicon glyph="search-coords"
                    style={{
                        margin: "0px",
                        fontSize: "36px"
                    }}/>
                <h3 className="welcome-message-items"><Message msgId={'cadastrapp.title'}/></h3>
                <h4 className="welcome-message-items"><Message msgId={'cadastrapp.selectTool'}/></h4>
            </div>
            <table className="welcome-message-versions">
                <tr><td><Message msgId={'cadastrapp.dateValiditeEDIGEO'}/>: </td><td>{dateValiditeEDIGEO}</td></tr>
                <tr><td><Message msgId={'cadastrapp.dateValiditeMajic'}/>: </td><td>{dateValiditeMajic}</td></tr>
            </table>
            <div className="welcome-message-build">build &nbsp;
                {/* eslint-disable-next-line no-undef */}
                <a target="_blank" href={`${__REPOURL__?.replace('.git', '')}/commit/${__COMMITHASH__}`}>{__COMMITHASH__?.substr(0, 8)}</a>
            </div>
        </div>
    );
}
Example #4
Source File: StrList.jsx    From mapstore2-cadastrapp with GNU General Public License v3.0 6 votes vote down vote up
export function StrList({items = [], onAdd, onRemove, onSetValue}) {

    return (
        <>
            <div style={{ width: "100%", "float": "left" }}>

                <Button
                    onClick={() => onAdd()}
                    className="pull-left">
                    <Glyphicon glyph="plus"/>

                </Button>
                <span
                    style={{ marginLeft: 6, marginTop: 4 }}
                    className="pull-left"><Message msgId={'cadastrapp.proprietaire.proprietaires.addMoreProprietaire'}/>
                </span>
            </div>
            <div style={{ width: "100%", height: "calc(50vh - 290px)", minHeight: 96, "overflowY": "auto" }}>
                {items.map((v, index) => (
                    <div style={{ width: "100%", "float": "left" }}>
                        <FormControl
                            value={v}
                            className="pull-left"
                            style={{ width: 240, marginTop: 5, marginRight: 5 }}
                            onChange={e => onSetValue(index, e.target.value)}
                        />
                        <Button
                            style={{ marginTop: 5, marginRight: 5 }}
                            className="pull-right"
                            onClick={() => onRemove(index)}
                        >
                            <Glyphicon glyph="trash"/>
                        </Button>
                    </div>
                ))}
            </div>
        </>
    );
}
Example #5
Source File: Owners.jsx    From mapstore2-cadastrapp with GNU General Public License v3.0 6 votes vote down vote up
export default function Owners({ owners = [], parcelle}) {
    const [expanded, setExpanded] = useState(false);
    const togglePanel = () => {
        setExpanded(!expanded);
    };
    const [selected, setSelected] = useState([]);
    const onRowClick = r =>  {
        if (r?.rowIdx >= 0) { // prevent header click
            setSelected([r.rowIdx]);
        }
    };
    const onRowsSelected = (rows) => setSelected(selected.concat(rows.map(r => r.rowIdx)));
    const onRowsDeselected = (rows) => setSelected(selected.filter(i => rows.map(r => r.rowIdx).indexOf(i) === -1));
    const atLeastOneSelected = selected.length > 0;
    return (<>
        <div style={{ margin: 10 }}>
            <Button
                bsStyle={expanded ? "primary" : "default"}
                onClick={togglePanel}
                {...(!atLeastOneSelected ? { disabled: 'true' } : {})}>
                <Glyphicon style={{ marginRight: 4 }} glyph="1-pdf" />
                <Message msgId={"cadastrapp.duc.releve.depropriete"}/>
            </Button>
        </div>
        <PropertiesRadio parcelle={parcelle} expanded={expanded} data={owners} selected={selected} />
        <OwnersTable
            data={owners}
            selected={selected}
            onRowClick={onRowClick}
            onRowsSelected={onRowsSelected}
            onRowsDeselected={onRowsDeselected} />
    </>);

}
Example #6
Source File: CoOwners.jsx    From mapstore2-cadastrapp with GNU General Public License v3.0 6 votes vote down vote up
// 350238000AD0053 for a set of many coowners.
export default function CoOwners({parcelle}) {
    const [expanded, setExpanded] = useState(false);
    const togglePanel = () => {
        setExpanded(!expanded);
    };
    // handle table data.
    const [data, setData] = useState([]);
    const [selected, setSelected] = useState([]);
    const onRowsSelected = (rows) => setSelected(selected.concat(rows.map(r => r.rowIdx)));
    const onRowsDeselected = (rows) => setSelected(selected.filter(i => rows.map(r => r.rowIdx).indexOf(i) === -1));
    const atLeastOneSelected = selected.length > 0;
    return (<>
        <div style={{ margin: 10 }}>
            <Button
                bsStyle={expanded ? "primary" : "default"}
                onClick={togglePanel}
                {...(!atLeastOneSelected ? { disabled: 'true' } : {})}>
                <Glyphicon style={{ marginRight: 4 }} glyph="1-pdf" />
                <Message msgId={"cadastrapp.duc.releve.depropriete"} />
            </Button>
        </div>
        <PropertiesRadio parcelle={parcelle} expanded={expanded} data={data} selected={selected} />
        <CoOwnersTable
            data={data}
            setData={setData}
            setSelected={setSelected}
            loadData={({ start, limit }) => getCoProprietaire({start, limit, parcelle})}
            selected={selected}
            onRowsSelected={onRowsSelected}
            onRowsDeselected={onRowsDeselected} />
    </>);

}
Example #7
Source File: OwnerLot.jsx    From mapstore2-cadastrapp with GNU General Public License v3.0 6 votes vote down vote up
/**
 * This form takes a file with the list of comptecommunal.
 * E.g.
 * ```
 * 350238*02795,350238*03107
 */
export default function Lot({ values = {}, setValue = () => { } }) {
    const onDrop = files => {
        setValue("file", files[0]);
    };
    const removeFile = (event) => {
        setValue("file", undefined);
        event.stopPropagation();
        event.preventDefault();
    };
    const fileName = values.file?.name;
    return (<div className="item-row">
        <div className="label-col">
            <ControlLabel><Message msgId={'cadastrapp.proprietaire.file.title'}/></ControlLabel>
        </div>
        <div className="form-col" style={{ position: 'relative' }}>
            <DropZone
                style={dropZoneStyle}
                activeStyle={dropZoneActiveStyle}
                multiple={false}
                accept={["text/csv", "text/plain", ".csv"]}
                onDrop={onDrop}>
                {fileName ? <span><Glyphicon glyph="remove" onClick={removeFile} /> {fileName} </span> : <Message msgId={'cadastrapp.parcelle.file.example'} />}
            </DropZone>
            <div
                style={{ width: "100%", "float": "left" }}
                className="text-muted"><Message msgId={'cadastrapp.proprietaire.file.explanation'}/></div>
        </div>
    </div>);
}
Example #8
Source File: Profile.js    From React-Messenger-App with MIT License 6 votes vote down vote up
render() {
  // Using destructuring assignment to set the constant profile to the state
  const { profile } = this.state;
  return (
    <div className="container">
      <div className="profile-area">
        <h1>{profile.name}</h1>
        <Panel header="Profile">
        <img src={profile.picture} alt="profile" />
            <div>
              <ControlLabel><Glyphicon glyph="user" /> Nickname</ControlLabel>
              <h3>{profile.nickname}</h3>
            </div>
            <pre>{JSON.stringify(profile, null, 2)}</pre>
          </Panel>
        </div>
      </div>
    );
  }
Example #9
Source File: Plot.jsx    From mapstore2-cadastrapp with GNU General Public License v3.0 5 votes vote down vote up
export default function Plot({
    isCNIL1,
    isCNIL2,
    selectedStyle,
    parcelle,
    fiuc,
    onGeneratePlotInformation = () => {},
    baseMaps = []
}) {
    let [isPlotShown, setIsPlotShown] = useState(false);
    const handlePlotClick = () => {
        setIsPlotShown(!isPlotShown);
    };
    if (!fiuc) {
        return "Loading";
    }
    return (<>
        <div style={{ margin: 10 }}>
            <Button
                bsStyle={isPlotShown ? "primary" : "default"}
                onClick={handlePlotClick}>
                <Glyphicon style={{ marginRight: 4 }} glyph="1-pdf" />
                <Message msgId={"cadastrapp.bordereauparcellaire.title"}/>
            </Button>
        </div>
        <PlotInformationRadio isCNIL1={isCNIL1} isCNIL2={isCNIL2} parcelle={parcelle} isShown={isPlotShown} baseMaps={baseMaps} onGeneratePlotInformation={onGeneratePlotInformation} selectedStyle={selectedStyle}/>
        <Table condensed>
            <thead>
                <tr>
                    <th><Message msgId={'cadastrapp.ficu.description'}/></th>
                    <th><Message msgId={'cadastrapp.ficu.value'}/></th>
                </tr>
            </thead>
            <tbody>
                <tr><td><Message msgId={'cadastrapp.ficu.commune'}/></td><td>{ fiuc.libcom + ' (' + fiuc.cgocommune + ')' }</td></tr>
                <tr><td><Message msgId={'cadastrapp.ficu.section'}/></td><td>{ fiuc.ccopre + fiuc.ccosec }</td></tr>
                <tr><td><Message msgId={'cadastrapp.ficu.parcelle'}/></td><td>{ fiuc.dnupla }</td></tr>
                <tr><td><Message msgId={'cadastrapp.ficu.voie'}/></td><td>{ fiuc.ccoriv }</td></tr>
                <tr><td><Message msgId={'cadastrapp.ficu.adresse'} /></td><td>{fiuc.dnvoiri + fiuc.dindic + " " + fiuc.cconvo + " " + fiuc.dvoilib}</td></tr>
                <tr><td><Message msgId={'cadastrapp.ficu.contenancedgfip'}/></td><td>{ fiuc?.dcntpa?.toLocaleString()}</td></tr>
                <tr><td><Message msgId={'cadastrapp.ficu.contenancesig'}/></td><td>{ fiuc?.surfc?.toLocaleString()}</td></tr>
                <tr><td><Message msgId={'cadastrapp.ficu.batie'}/></td><td><Message msgId={fiuc.gparbat === '1' ? 'cadastrapp.ficu.yes' : 'cadastrapp.ficu.no'} /></td></tr>
                <tr><td><Message msgId={'cadastrapp.ficu.urbain'}/></td><td><Message msgId={fiuc.gurbpa === 'U' ? 'cadastrapp.ficu.yes' : 'cadastrapp.ficu.no'} /></td></tr>
            </tbody>
        </Table>
    </>);
}
Example #10
Source File: BuildingButtons.jsx    From mapstore2-cadastrapp with GNU General Public License v3.0 5 votes vote down vote up
export default function BuildingsButtons({
    setShowDescription = () => {},
    selected = [],
    data = [],
    dnubat,
    parcelle

}) {
    let [propertiesSelected, setPropertiesSelected] = useState(false);
    let [bundleSelected, setBundleSelected] = useState(false);

    const onPropertiesClick = () => {
        setBundleSelected(false);
        setPropertiesSelected(!propertiesSelected);
    };

    const onBundleClick = () => {
        setPropertiesSelected(false);
        setBundleSelected(!bundleSelected);
    };
    // auto close panel if no row has been selected
    useEffect(() => {
        if (selected.length === 0) {
            setPropertiesSelected(false);
        }
    }, [selected]);

    return (<>
        <ButtonGroup className="pull-right">
            <OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.duc.releve.depropriete'}/></Tooltip>}>
                <Button
                    disabled={selected.length === 0}
                    bsStyle={propertiesSelected ? "primary" : "default"}
                    onClick={onPropertiesClick}>
                    <Glyphicon glyph="th-list" />
                </Button>
            </OverlayTrigger>
            <OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.duc.batiment_descriptif'}/></Tooltip>}>
                <Button
                    onClick={() => setShowDescription(true)}
                    disabled={selected.length === 0}>
                    <Glyphicon glyph="info-sign" />
                </Button>
            </OverlayTrigger>
            <OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.duc.batiment_bundle'}/></Tooltip>}>
                <Button
                    bsStyle={bundleSelected ? "primary" : "default"}
                    onClick={onBundleClick}>
                    <Glyphicon glyph="compressed" /></Button>
            </OverlayTrigger>
        </ButtonGroup>
        <PropertiesRadio parcelle={parcelle} expanded={propertiesSelected} data={data} selected={selected} />
        <BundleRadio
            dnubat={dnubat}
            parcelle={parcelle}
            show={bundleSelected} />
    </>);
}
Example #11
Source File: ReferencesList.jsx    From mapstore2-cadastrapp with GNU General Public License v3.0 5 votes vote down vote up
export default function ReferencesList({ references = [], cgocommune, onAddReference, onRemoveReference, onSetValue }) {

    const [sections, setSections] = useState();
    useEffect(() => {
        if (cgocommune) {
            getSection(cgocommune).then(results => {
                setSections(results);
                onAddReference({}); // when commune is selected, first line of references is added by default
            });
        }
    }, [cgocommune]);
    const validReferences = validateReferences(references);
    return (
        <>
            <div style={{ width: "100%", "float": "left" }}>
                <Button
                    disabled={
                        !sections
                        || !cgocommune
                        || sections
                            && cgocommune
                            && references.length > 0
                        && !validReferences
                    }
                    onClick={() => onAddReference({})}
                    className="pull-left">
                    <Glyphicon glyph="plus"/>

                </Button>
                <span
                    style={{ marginLeft: 6, marginTop: 4 }}
                    className="pull-left"><Message msgId={'cadastrapp.parcelle.addMoreReference'}/></span>
            </div>
            <div style={{ width: "100%", height: "calc(50vh - 290px)", minHeight: 96, "overflowY": "visible" }}>
                {
                    sections && references.map((row, index) => {
                        return (<ReferenceRow
                            row={row}
                            sections={sections}
                            onRemove={() => onRemoveReference(index)}
                            onSetValue={(column, value) => onSetValue(index, column, value)} />);
                    })
                }
            </div>
        </>
    );
}
Example #12
Source File: Preferences.jsx    From mapstore2-cadastrapp with GNU General Public License v3.0 5 votes vote down vote up
export default function PreferencesDialog({
    isShown,
    onClose,
    setLayerStyles = () => {},
    updateLayerStyle = () => {},
    styles = {
        selected: {},
        "default": {}
    },
    configStyles = {}
}) {
    const setDefaultStyles = () => {
        setLayerStyles(isEmpty(configStyles) ? LAYER_STYLES : configStyles);
    };

    useEffect(()=>{
        const isStateStylesEmpty = isEmpty(styles) || (isEmpty(styles.selected) && isEmpty(styles.default));
        isStateStylesEmpty && setDefaultStyles(); // Retain state styles (if any)
    }, [setLayerStyles]);

    if (!isShown) {
        return null;
    }

    return (
        <Portal container={document.querySelector('#container #viewer') || document.body}><Dialog
            className="cadastrapp-preferences-dialog"
            show={isShown} >
            <span role="header"><span><Message msgId={'cadastrapp.preferences.title'}/></span><button style={{ background: 'transparent', border: 'none', "float": "right" }}><Glyphicon glyph="1-close" onClick={() => onClose()} style={{  }} /></button></span>
            <div role="body" style={{height: 200}}>
                <Tabs defaultActiveKey={1} >
                    <Tab eventKey={1} title={<Message msgId={'cadastrapp.preferences.default'}/>}>
                        <StyleEditor
                            style={styles.default}
                            updateLayerStyle={( ...args ) => updateLayerStyle('default', ...args)} />
                    </Tab>
                    <Tab eventKey={2} title={<Message msgId={'cadastrapp.preferences.selected'}/>}>
                        <StyleEditor
                            style={styles.selected}
                            updateLayerStyle={(...args) => updateLayerStyle('selected', ...args)} />

                    </Tab>

                </Tabs>
            </div>
            <div role="footer">
                <Button onClick={setDefaultStyles}><Message msgId={'cadastrapp.preferences.defaultStyle'}/></Button>
                <Button onClick={() => { onClose(); }}><Message msgId={'cadastrapp.preferences.close'}/></Button>
            </div>
        </Dialog></Portal>
    );
}
Example #13
Source File: Lot.jsx    From mapstore2-cadastrapp with GNU General Public License v3.0 5 votes vote down vote up
export default function Lot({ values = {}, setValue = () => {}}) {
    const onDrop = files => {
        setValue('parcelle', undefined); // mutual exclusion
        setValue("file", files[0]);
    };
    const removeFile = (event) => {
        setValue("file", undefined);
        event.stopPropagation();
        event.preventDefault();
    };
    const setParcelle = (parcelle) => {
        setValue("file", undefined); // mutual exclusion
        setValue('parcelle', parcelle);
    };
    const fileName = values.file?.name;
    // const dropMessage = "Drag and drop the CSV file here or click to select";
    return (<>
        <div className="item-row">
            <div className="label-col">
                <ControlLabel><Message msgId={'cadastrapp.parcelle.lot.title'}/></ControlLabel>
            </div>
            <div className="form-col">
                <FormControl componentClassName="textarea"
                    type="text" bsSize="sm" value={values?.parcelle ?? ""} onChange={v => setParcelle(v.target.value)}/>
                <div className="text-muted"><Message msgId={'cadastrapp.parcelle.lot.example'}/></div>
            </div>
        </div>

        <div className="item-row">
            <div className="label-col">
                <ControlLabel/>
            </div>
            <div className="form-col">
                <div style={{ textAlign: "center" }} className="text-muted">or</div>
            </div>
        </div>

        <div className="item-row">
            <div className="label-col">
                <ControlLabel><Message msgId={'cadastrapp.parcelle.file.title'}/></ControlLabel>
            </div>
            <div className="form-col" style={{position: 'relative'}}>
                <DropZone
                    accept={["text/csv", "text/plain", ".csv"]}
                    style={dropZoneStyle}
                    activeStyle={dropZoneActiveStyle}
                    multiple={false}
                    onDrop={onDrop}>
                    {fileName ? <span><Glyphicon glyph="remove" onClick={removeFile} /> {fileName} </span> : <Message msgId={'cadastrapp.parcelle.file.example'}/>}
                </DropZone>
                <div
                    style={{ width: "100%", "float": "left" }}
                    className="text-muted"><Message msgId={'cadastrapp.parcelle.file.explanation'}/></div>
            </div>
        </div>
    </>);
}
Example #14
Source File: RequestObject.jsx    From mapstore2-cadastrapp with GNU General Public License v3.0 5 votes vote down vote up
/**
 * RequestObject component
 * @param {object} props Component props
 * @param {number} props.availableRequest contains number of available request allow for the user
 * @param {function} props.setAvailableRequest triggered when adding or deleting a request object
 */
export default function RequestObject({availableRequest = 0, setAvailableRequest = () => {}, ...props}) {
    let randomId = uuid();
    let item = {};
    if (availableRequest > 0) {
        item[randomId] = "";
    }
    let [requestObjects, setRequestObjects] = useState(item);

    useEffect(() => {
        setAvailableRequest(availableRequest - Object.keys(requestObjects).length);
    }, [setAvailableRequest]);

    let handleAdd = () => {
        let r = { ...requestObjects };
        let id = uuid();
        r[id] = "";
        setRequestObjects(r);
        setAvailableRequest(availableRequest - 1);
    };

    let handleChange = (id, value) => {
        let r = { ...requestObjects };
        r[id] = value;
        setRequestObjects(r);
    };

    let handleDelete = (id) => {
        let r = { ...requestObjects };
        delete r[id];
        setRequestObjects(r);
        setAvailableRequest(availableRequest + 1);
    };

    return (
        <div>
            <div className="pull-left" style={{ width: "100%", marginBottom: 10 }}>
                <Button disabled={availableRequest <= 0} className="pull-right" onClick={handleAdd} style={{ marginRight: 4 }}>
                    <Glyphicon glyph="plus"/>
                </Button>
                <small style={{ marginTop: 5, marginRight: 10, ...(availableRequest <= 0 && {color: "red"}) }} className="pull-right">
                    <Message msgId={availableRequest <= 0 ? 'cadastrapp.demandeinformation.exceded.maxNumber' : 'cadastrapp.demandeinformation.addMore'}/>
                </small>
            </div>
            <div>
                {Object.keys(requestObjects).map((v, index) => (
                    <RequestObjectItem
                        key={index}
                        dataId={v}
                        value={requestObjects[v]}
                        onChange={handleChange}
                        onDelete={handleDelete}
                        {...props}
                    />
                ))}
            </div>
        </div>
    );
}
Example #15
Source File: ReferenceRow.jsx    From mapstore2-cadastrapp with GNU General Public License v3.0 4 votes vote down vote up
/**
 * Row element for Reference(s) list in Reference plot search.
 * @prop {object} row the content. is an object of two "columns". "section" and "plot".
 * @prop {object[]} sections sections to show in the section selector combo box.
 * @prop {function} setValue handler to set the value for the current row. 2 arguments. (column, value); column should be "section" or "plot". Value is the object selected.
 * @prop {function} onRemove handler to remove the current row.
 * @prop {boolean} hideRemove flag to hide the remove button
 * @prop {object} containerStyle additional style props for the container (if any)
 * @prop {object} fieldStyle style props to override field styles
 */
export default function ReferenceRow({
    row = {},
    sections,
    onSetValue = () => { },
    onRemove,
    hideRemove = false,
    containerStyle = {},
    fieldStyle = {width: 120, marginTop: 5, marginRight: 5},
    dropUp = false
}) {
    const [plots, setPlots] = useState();
    const [busy, setBusy] = useState();
    const [openPlot, setOpenPlot] = useState(false);
    const {section, plot} = row;
    useEffect(() => {
        if (section) {
            setBusy(true);
            const { ccopre, ccosec, cgocommune  } = section;
            getDnuplaList({ ccopre, ccosec, cgocommune }).then(values => {
                setPlots(values);
                setBusy(false);
                setOpenPlot(true);
                onSetValue('plot', undefined);
            });
        }
    }, [section]);
    return (<div style={{ width: "100%", "float": "left", display: "flex", ...containerStyle }}>
        <DropdownList
            dropUp={dropUp}
            defaultOpen
            disabled={isEmpty(sections)}
            style={fieldStyle}
            textField="ccosec"
            placeholder={'cadastrapp.parcelle.result.ccosec'}
            value={section}
            onChange={() => { }}
            onSelect={newSection => {
                onSetValue('section', newSection);
            }}
            filter="contains"
            data={sections.map(({ ccosec, ...rest}) => ({
                ccosec,
                ...rest,
                label: "" + ccosec
            }))}
        />
        <DropdownList
            dropUp={dropUp}
            onToggle={(v) => setOpenPlot(v)}
            open={openPlot}
            busy={busy}
            disabled={!plots}
            style={fieldStyle}
            value={plot}
            placeholder={'cadastrapp.parcelle.libcom'}
            textField="dnupla"
            filter="contains"
            onSelect={v => {
                onSetValue('plot', v);
            }}
            data={plots}
        />
        {!hideRemove && <Button
            style={{marginTop: 3, marginRight: 3}}
            className="pull-right"
            onClick={onRemove}
        >
            <Glyphicon glyph="trash"/>
        </Button>
        }
    </div>);
}
Example #16
Source File: Modal.jsx    From mapstore2-cadastrapp with GNU General Public License v3.0 4 votes vote down vote up
/* eslint-disable camelcase */

export default function OwnersModal({
    loading,
    show,
    onSearch = () => {},
    owners = [],
    onClose
}) {
    const [downloading, setDownloading] = useState(false);
    const [selected, setSelected] = useState([]);
    const [expanded, setExpanded] = useState(false);
    const oneSelected = selected.length === 1;
    const onRowClick = (i) => {
        if (i >= 0 ) { // prevent header click to toggle invalid selection
            setSelected(selected.length === 1 && selected[0] === i ? [] : [i]); // toggle row selection
        }
    };
    const onRowsSelected = (rows) => setSelected(selected.concat(rows.map(r => r.rowIdx)));
    const onRowsDeselected = (rows) => setSelected(selected.filter(i => rows.map(r => r.rowIdx).indexOf(i) === -1));
    return (<Modal
        className="cadastrapp-owners-modal"
        style={{ maxHeight: "100%", overflowY: "auto", zIndex: 10000 }}
        show={show}
        onHide={onClose}>
        <Modal.Header closeButton>
            <Modal.Title><Message msgId={'cadastrapp.result.owner.title'}/></Modal.Title>
        </Modal.Header>
        <Modal.Body style={{ maxHeight: 700, overflow: "auto" }} >
            <div style={{ margin: 10 }}>
                <Button
                    disabled={loading || !oneSelected}
                    bsStyle={expanded ? "primary" : undefined}
                    onClick={() => {
                        setExpanded(!expanded);
                    }}
                >
                    <Glyphicon style={{ marginRight: 4 }} glyph="1-pdf" />
                    <Message msgId={'cadastrapp.result.owner.rp'}/>
                </Button>
                <PropertiesRadio showParcelle={false} expanded={expanded} data={owners} selected={selected} />
            </div>
            <OwnersListTable
                onRowClick={onRowClick}
                onRowsSelected={onRowsSelected}
                onRowsDeselected={onRowsDeselected}
                data={owners}
                selected={selected} />
        </Modal.Body>
        <Modal.Footer>
            <Button
                disabled={loading || !oneSelected}
                bsStyle="primary"
                onClick={() => {
                    onClose();
                    onSearch(SEARCH_TYPES.COMPTE_COMMUNAL, owners[selected[0]]);

                }}
            >
                <Message msgId={'cadastrapp.result.owner.show.parcelle'}/>
            </Button>
            <Button
                disabled={loading || downloading}
                bsStyle="primary"
                onClick={() => {
                    const titles = ["Owner id", "Full name information"]; // TODO: localize
                    const dataJson = oneSelected ? [owners[selected[0]]] : owners;
                    const rows = dataJson.map(({ comptecommunal, app_nom_usage }) => ([comptecommunal, app_nom_usage]));
                    setDownloading(true);
                    exportAsCsv({ data: [titles, rows[0]]})
                        .then(response => {
                            setDownloading(false);
                            if (oneSelected) {
                                downloadResponse(response, {});
                            } else {
                                // in case all list have to be downloaded,
                                // recreate the data to download
                                const separator = response.data[response.data.indexOf(titles[1]) - 1];
                                const data = [titles.join(separator), ...(rows.map(row => row.join(separator)))].join("\n");
                                downloadResponse({
                                    ...response,
                                    data
                                });
                            }

                        }).catch(() => {
                            setDownloading(false); // TODO: notify error.
                        });
                }}
            >
                {oneSelected
                    ? <Message msgId={'cadastrapp.selection.proprietaires.export.row'}/>
                    : <Message msgId={'cadastrapp.selection.proprietaires.export.list'}/>
                }
            </Button>
        </Modal.Footer>
    </Modal>);
}
Example #17
Source File: PlotSelectionToolbar.jsx    From mapstore2-cadastrapp with GNU General Public License v3.0 4 votes vote down vote up
export default function PlotSelectionToolbar({
    foncier,
    authLevel = {},
    currentData = [],
    loadInfo = () => {},
    onSaveAsAnnotation = () => {},
    zoomToSelection = () => {},
    removePlots = () => {},
    showLandedPropertyInformationByParcelle = () => {},
    selectedPlots = []
}) {
    const atLeastOneSelected = selectedPlots.length > 0;
    const onlyOneSelected = selectedPlots.length === 1;
    const isDataPresent = currentData.length > 0;
    const { isCNIL1, isCNIL2 } = authLevel;
    const [showBundleInformation, setShowBundleInformation] = useState(false);
    const [exportPlotModal, setExportPlotModal] = useState(false);
    return (
        <>
            <Toolbar
                btnGroupProps={{className: "pull-right"}}
                btnDefaultProps={{
                    tooltipPosition: 'bottom'
                }}
                buttons={[{
                    disabled: !isDataPresent,
                    glyph: "zoom-in",
                    tooltipId: atLeastOneSelected ? "cadastrapp.result.parcelle.zoom.selection" : "cadastrapp.result.parcelle.zoom.list",
                    onClick: zoomToSelection
                }, ...(foncier
                    ? [{
                        disabled: !onlyOneSelected,
                        glyph: "th-list",
                        tooltipId: "cadastrapp.result.parcelle.uf",
                        onClick: () => { showLandedPropertyInformationByParcelle(find(currentData, {parcelle: selectedPlots[0]})); }
                    }]
                    : []), {
                    disabled: !atLeastOneSelected,
                    glyph: "trash",
                    tooltipId: "cadastrapp.result.parcelle.delete",
                    onClick: () => { removePlots(selectedPlots); }
                }, {
                    disabled: !atLeastOneSelected,
                    glyph: "info-sign",
                    tooltipId: "cadastrapp.result.parcelle.fiche",
                    onClick: () => { loadInfo(selectedPlots);}
                }, {
                    disabled: !isDataPresent,
                    glyph: "comment",
                    tooltipId: "cadastrapp.result.parcelle.saveAsAnnotation",
                    onClick: () => { onSaveAsAnnotation(selectedPlots);}
                }, ((isCNIL1 || isCNIL2) ? {
                    renderButton:
                        (<DropdownButton
                            disabled={!atLeastOneSelected}
                            pullRight title={< Glyphicon glyph="export" />}>
                            <MenuItem onClick={() => exportParcellesAsCSV({ parcelles: selectedPlots }).then(downloadResponse)}>
                                <Message msgId={"cadastrapp.result.csv.button.parcelles"} />
                            </MenuItem>
                            <MenuItem onClick={() => exportProprietaireByParcelles({ parcelles: selectedPlots }).then(downloadResponse)}>
                                <Message msgId={"cadastrapp.result.csv.button.owner"} />
                            </MenuItem>
                            <MenuItem onClick={() => exportCoProprietaireByParcelles({ parcelles: selectedPlots }).then(downloadResponse)}>
                                <Message msgId={"cadastrapp.result.csv.button.coowner"} />
                            </MenuItem>
                            <MenuItem disabled={!onlyOneSelected} onClick={() => {
                                // prevent click event when disabled
                                if (onlyOneSelected) {
                                    setShowBundleInformation(true);
                                }
                            }}><Message msgId={"cadastrapp.result.csv.button.bundle"} /></MenuItem>
                            <MenuItem onClick={() => setExportPlotModal(true)}>
                                <Message msgId={"cadastrapp.result.pdf.export"} /></MenuItem>
                        </DropdownButton>)
                } : {
                    renderButton: (
                        <DropdownButton
                            disabled={!isDataPresent || !atLeastOneSelected}
                            pullRight title={< Glyphicon glyph="export" />}>
                            <MenuItem
                                onClick={() => exportParcellesAsCSV({ parcelles: selectedPlots }).then(downloadResponse)}>
                                <Message msgId={"cadastrapp.result.csv.export"} />
                            </MenuItem>
                            <MenuItem onClick={() => setExportPlotModal(true)}>
                                <Message msgId={"cadastrapp.result.pdf.export"} /></MenuItem>
                        </DropdownButton>
                    )
                })
                ]}
            />
            <BundleInformationModal show={showBundleInformation} onClose={() => setShowBundleInformation(false)} parcelle={selectedPlots[0]} />
            <ExportPlotsAsPDFModal show={exportPlotModal} onClose={()=> setExportPlotModal(false) }
                parcelle={selectedPlots} isCNIL1={isCNIL1} isCNIL2={isCNIL2}/>
        </>);
}
Example #18
Source File: RequestObjectItem.jsx    From mapstore2-cadastrapp with GNU General Public License v3.0 4 votes vote down vote up
/**
 * RequestObjectItem component
 * @param {object} props Component props
 * @param {function} props.setRequestFormData triggered when adding or updating request object's data
 * @param {object} props.requestFormData contains request form data
 * @param {id} props.dataId key/index of the request object
 * @param {string} props.value contains current request option value
 * @param {function} props.onDelete triggered when adding or deleting a request object
 * @param {function} props.onChange triggered when changing a request object
 * @param {function} props.setInValidField triggered when changing mandatory fields values
 * @param {bool} props.allow boolean variable to show restricted options
 */
export default function RequestObjectItem({
    setRequestFormData = () => {},
    requestFormData = {},
    dataId,
    value,
    onDelete = () => {},
    onChange = () => {},
    setInValidField = () => {},
    allow = false
}) {
    const requestOptions = [
        { value: 'owner-id', label: 'cadastrapp.demandeinformation.object.type.1' },
        { value: 'plot', label: 'cadastrapp.demandeinformation.object.type.2' },
        { value: 'co-owners', label: 'cadastrapp.demandeinformation.object.type.3' },
        { value: 'plot-id', label: 'cadastrapp.demandeinformation.object.type.5' },
        { value: 'owner', label: 'cadastrapp.demandeinformation.object.type.4', style: {display: allow ? 'block' : 'none'} },
        { value: 'owner-birth-name', label: 'cadastrapp.demandeinformation.object.type.7', style: {display: allow ? 'block' : 'none'} },
        { value: 'lot-co-owners', label: 'cadastrapp.demandeinformation.object.type.6', style: {display: allow ? 'block' : 'none'} }
    ];

    const [fieldName, setFieldName] = useState('');
    const [mandatoryFields, setMandatoryFields] = useState(0);

    const handleOnChange = ({target}) => {
        const {name, value: data} = target || {};
        setRequestFormData({...requestFormData, [fieldName]: {
            ...requestFormData[fieldName],
            [dataId]: {
                ...requestFormData[fieldName][dataId],
                ...(includes(['propStatement', 'parcelSlip'], name)
                    ? {[name]: target.checked}
                    : {[name]: data})
            }}
        });
    };

    const handleSelectChange = (name, v) => {
        let result;
        if (name === "commune" && isEmpty(v)) {
            result = { [dataId]: {} };
            setRequestFormData({...requestFormData,
                [fieldName]: { ...requestFormData[fieldName] }});
        } else {
            result = {
                [dataId]: {
                    ...requestFormData[fieldName][dataId],
                    [name]: {...v}
                }
            };
        }
        setRequestFormData({...requestFormData,
            [fieldName]: { ...requestFormData[fieldName], ...result}});
    };

    useEffect(()=>{
        const data = requestFormData?.[fieldName]?.[dataId] || [];
        const fieldEquality = Object.keys(data).filter(k => !isEmpty(data[k]) && !includes(['propStatement', 'parcelSlip'], k));
        const booleanFields = Object.keys(data).filter(k => data[k] === true);
        // Mandatory field validation
        let inValid = true;
        if (!isEmpty(data) && !isEmpty(mandatoryFields)) {
            if (isEqual(fieldEquality.sort(), mandatoryFields.sort())) {
                if (booleanFields.length > 0) {
                    inValid = false;
                }
            }
        }
        setInValidField(inValid);
    }, [requestFormData]);

    function ownerId() {
        return (
            <div>
                <FormControl
                    className="pull-left"
                    placeholder={"cadastrapp.demandeinformation.idCompteCom"}
                    name="accountId"
                    value={requestFormData?.[fieldName]?.[dataId]?.accountId || ''}
                    style={{ height: 34, width: 248, margin: 4 }}
                    onChange={handleOnChange}
                />
            </div>
        );
    }

    const plot = () => {
        return (
            <div>
                <div style={{display: 'flex', "float": "left", margin: 4}}>
                    <MunicipalityCombo
                        dropUp
                        placeholder={'cadastrapp.commune'}
                        additionalStyle={{width: 300, marginRight: 4}} value={requestFormData?.[fieldName]?.[dataId]?.commune?.label}
                        onSelect={v =>handleSelectChange("commune", v)}
                    />
                    <SectionCombo
                        cgocommune={requestFormData?.[fieldName]?.[dataId]?.commune?.cgocommune}
                        value={{section: requestFormData?.[fieldName]?.[dataId]?.section,
                            plot: isEmpty(requestFormData?.[fieldName]?.[dataId]?.plot) ? null : requestFormData?.[fieldName]?.[dataId]?.plot}}
                        onSelect={(c, v) =>handleSelectChange(c, v)}
                    />
                </div>
            </div>
        );
    };

    const coOwners = () => {
        return (
            <div style={{ width: "300" }}>
                <FormControl
                    placeholder={'cadastrapp.demandeinformation.idCompteCom'}
                    name="accountId"
                    value={requestFormData?.[fieldName]?.[dataId]?.accountId || ''}
                    className={cs("pull-left", "request-obj-double")}
                    onChange={handleOnChange}
                />
                <FormControl
                    placeholder={'cadastrapp.demandeinformation.idParcelle'}
                    name={"plotId"}
                    value={requestFormData?.[fieldName]?.[dataId]?.plotId || ''}
                    className={cs("pull-left", "request-obj-double")}
                    onChange={handleOnChange}
                />
            </div>
        );
    };

    const plotId = () => {
        return (
            <div>
                <FormControl
                    placeholder={'cadastrapp.demandeinformation.idCompteCom'}
                    name="accountId"
                    value={requestFormData?.[fieldName]?.[dataId]?.accountId || ''}
                    className={cs("pull-left", "request-obj-double")}
                    onChange={handleOnChange}
                />
            </div>
        );
    };

    const owner = () => {
        return (
            <div key="owner">
                <div style={{display: 'flex', "float": "left", margin: 4}}>
                    <MunicipalityCombo
                        dropUp
                        placeholder={'cadastrapp.commune'}
                        additionalStyle={{width: 300, marginRight: 4}}
                        value={requestFormData?.[fieldName]?.[dataId]?.commune?.label}
                        onSelect={v =>handleSelectChange("commune", v)}
                    />
                    <ProprietaireCombo
                        dropUp
                        placeholder={'cadastrapp.demandeinformation.proprietaire'}
                        disabled={isEmpty(requestFormData?.[fieldName]?.[dataId]?.commune)}
                        birthsearch={false}
                        cgocommune={requestFormData?.[fieldName]?.[dataId]?.commune?.cgocommune}
                        additionalStyle={{width: 300, marginRight: 4}}
                        value={requestFormData?.[fieldName]?.[dataId]?.proprietaire?.value}
                        onSelect={v =>handleSelectChange("proprietaire", v)}
                    />
                </div>
            </div>
        );
    };

    const cadastrappDemandei = () => {
        return (
            <div>
                <div style={{display: 'flex', "float": "left", margin: 4}}>
                    <MunicipalityCombo
                        dropUp
                        placeholder={'cadastrapp.commune'}
                        additionalStyle={{width: 300, marginRight: 4}}
                        value={requestFormData?.[fieldName]?.[dataId]?.commune?.label}
                        onSelect={v =>handleSelectChange("commune", v)}
                    />
                    <ProprietaireCombo
                        dropUp
                        placeholder={'cadastrapp.demandeinformation.proprietaire'}
                        disabled={isEmpty(requestFormData?.[fieldName]?.[dataId]?.commune)}
                        birthsearch
                        cgocommune={requestFormData?.[fieldName]?.[dataId]?.commune?.cgocommune}
                        additionalStyle={{width: 300, marginRight: 4}}
                        value={requestFormData?.[fieldName]?.[dataId]?.proprietaire?.value }
                        onSelect={v =>handleSelectChange("proprietaire", v)}
                    />
                </div>
            </div>
        );
    };

    const lotCoOwners = () => {
        return (
            <div>
                <div style={{display: 'flex', margin: 4}}>
                    <MunicipalityCombo
                        dropUp
                        placeholder={'cadastrapp.commune'}
                        additionalStyle={{marginRight: 4}}
                        value={requestFormData?.[fieldName]?.[dataId]?.commune?.label}
                        onSelect={v =>handleSelectChange("commune", v)}
                    />
                    <SectionCombo
                        cgocommune={requestFormData?.[fieldName]?.[dataId]?.commune?.cgocommune}
                        value={{section: requestFormData?.[fieldName]?.[dataId]?.section,
                            plot: isEmpty(requestFormData?.[fieldName]?.[dataId]?.plot) ? null : requestFormData?.[fieldName]?.[dataId]?.plot}}
                        onSelect={(c, v) =>handleSelectChange(c, v)}/>

                    <ProprietaireComboList
                        placeholder={'cadastrapp.demandeinformation.proprietaire'}
                        disabled={isEmpty(requestFormData?.[fieldName]?.[dataId]?.plot)}
                        section={requestFormData?.[fieldName]?.[dataId]?.section?.ccosec}
                        numero={requestFormData?.[fieldName]?.[dataId]?.section?.plot?.dnupla}
                        commune={requestFormData?.[fieldName]?.[dataId]?.commune?.cgocommune}
                        onSelect={v =>handleSelectChange("proprietaire", v)}
                    />
                </div>
            </div>
        );
    };

    const inputTemplate = () => <div/>;
    const [compRender, setCompRender] = useState(inputTemplate);

    useEffect(()=>{
        switch (value) {
        case "owner-id":
            setFieldName("comptecommunaux");
            setMandatoryFields(["accountId"]);
            setCompRender(ownerId);
            break;
        case "plot":
            setFieldName("parcelles");
            setMandatoryFields(["commune", "section", "plot"]);
            setCompRender(plot);
            break;
        case "co-owners":
            setFieldName("coproprietes");
            setMandatoryFields(["accountId", "plotId"]);
            setCompRender(coOwners);
            break;
        case "plot-id":
            setFieldName("parcelleIds");
            setMandatoryFields(["accountId"]);
            setCompRender(plotId);
            break;
        case "owner":
            setFieldName("proprietaires");
            setMandatoryFields(["commune", "proprietaire"]);
            setCompRender(owner);
            break;
        case "owner-birth-name":
            setFieldName("proprietaires");
            setMandatoryFields(["commune", "proprietaire"]);
            setCompRender(cadastrappDemandei);
            break;
        case "lot-co-owners":
            setFieldName("proprietaireLots");
            setMandatoryFields(["commune", "section", "numero", "proprietaire"]);
            setCompRender(lotCoOwners);
            break;
        default: break;
        }
    }, [value, requestFormData, fieldName, allow, dataId]);

    let handleDelete = () => {
        onDelete(dataId);
        delete requestFormData?.[fieldName]?.[dataId];
        setRequestFormData({...requestFormData});
    };

    const handleChange = (item) => {
        onChange(dataId, item.value);
    };

    return (
        <div className="pull-left" style={{ width: "100%" }}>
            <div className={"request-obj-triple"}>
                <RequestSelect
                    className={"drop-up"}
                    options={requestOptions}
                    value={value}
                    onChange={handleChange}
                />
            </div>
            {compRender}
            <Button className="pull-right" onClick={handleDelete} style={{ margin: 4 }}>
                <Glyphicon glyph="trash"/>
            </Button>
            {!isEmpty(fieldName) && <RequestItemsCheckboxes
                handleOnChange={handleOnChange}
                requestFormData={requestFormData?.[fieldName]?.[dataId] || {}}
            />}
        </div>
    );
}