{"size": 10619, "ext": "js", "max_stars_repo_path": "docs/src/pages/settings/OpenSources.js", "max_stars_repo_name": "devncore-james/blazor-devncore", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "docs/src/pages/settings/OpenSources.js", "max_issues_repo_name": "devncore-james/blazor-devncore", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "docs/src/pages/settings/OpenSources.js", "max_forks_repo_name": "devncore-james/blazor-devncore", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 38.1978417266, "max_line_length": 130, "alphanum_fraction": 0.4662397589}
import React from "react";
import * as svc from "../../components/protocol/ServiceHelper";
import Axios from "axios";
import { Button, Divider, Drawer, Grid, Stack, Switch, TextField, Typography } from "@mui/material";
import DevNcoreSelect from "../../components/input/DevNcoreSelect";
import {AgGridColumn, AgGridReact} from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

const isUsedSource = [
    { name: "전체", value: "ALL"}, 
    { name: "사용", value: "true"}, 
    { name: "사용안함", value: "false"}
]

const newOpenSource = { 
    cateId: "", 
    id: -1, 
    title: "", 
    explanation: "", 
    gitHubUrl: "", 
    markdownUrl: "", 
    sort: "", 
    isUsed: false 
}

export default function OpenSources(props) {
    const [gridApi, setGridApi] = React.useState(null);
    const [data, setData] = React.useState([]);
    const [categories, setCategories] = React.useState([]);
    const [openSourceInfo, setOpenSourceInfo] = React.useState(newOpenSource);
    const [open, setOpen] = React.useState();

    const [cateId, setCateId] = React.useState("ALL");
    const [isUsed, setIsUsed] = React.useState("ALL");
    const [keyword, setKeyword] = React.useState("");
    const { menu } = props;

    const getOpenSources = React.useCallback(() => {
        const data = {
            cateId: cateId,
            isUsed: isUsed,
            keyword: keyword
        }
        Axios.get(svc.find("/api/openSource"), { params: data, ...svc.options() })
            .then(response => {
                setData(response.data);
            })
            .catch(function (error) {
                console.log("get openSource error:", error);
            })
            .then(function () {
                // some things..
            });
    }, [cateId, isUsed, keyword]);

    const getCategories = () => {
        const data = {
            isUsed: "ALL",
            keyword: ""
        }
        Axios.get(svc.find("/api/openSourceCategory/params"), { params: data, ...svc.options() })
            .then(response => {
                setCategories(response.data.map(cate => {
                    return { name: cate.cateName, value: cate.cateId}
                }));
            })
            .catch(function (error) {
                console.log("get openSource error:", error);
            })
            .then(function () {
                // some things..
            });
    }

    React.useEffect(() => {
        getOpenSources();
        getCategories();
    }, [menu, getOpenSources]);

    const addOpenSource = () => {
        Axios.post(svc.find("/api/openSource"), openSourceInfo, svc.options())
            .then(response => {
                if(response.data === 1) {
                    getOpenSources();
                }
            })
            .catch(function (error) {
                console.log("post openSource error: ", error);
            })
            .then(function () {
                // some things..
            });
    }

    const updateOpenSource = () => {
        Axios.put(svc.find("/api/openSource"), openSourceInfo, svc.options())
            .then(response => {
                if(response.data === 1) {
                    getOpenSources();
                }
            })
            .catch(function (error) {
                console.log("put openSource error: ", error);
            })
            .then(function () {
                // some things..
            });
    }

    const deleteOpenSource = () => {
        console.log(openSourceInfo);
        if(openSourceInfo.id === -1)
        {
            alert("선택된 데이터가 없습니다.!!!");
            return;
        }
        Axios.delete(svc.find("/api/openSource"), { data: openSourceInfo, ...svc.options()})
            .then(response => {
                if(response.data === 1) {
                    getOpenSources();
                }
            })
            .catch(function (error) {
                console.log("delete openSource error: ", error);
            })
            .then(function () {
                // some things..
            });
    }

    const onRemove = () => {
        if (window.confirm("선택된 데이터를 삭제 하시겠습니까?")) {
            deleteOpenSource();
        }
    };

    function onSelectionChanged() {
        var selectedRows = gridApi.getSelectedRows();
        console.log("selectedRows:", selectedRows);

        var row = selectedRows[0];
        setOpenSourceInfo(row);

        setOpen(true);
    }

    const onGridReady = (params) => {
        setGridApi(params.api);
    };

    const toggleDrawer = (open) => (event) => {
        if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
          return;
        }
  
        setOpen(open);
    };

    const searchClick = () => {
        getOpenSources();
    }

    const addOpenSourceClick = () => {
        setOpenSourceInfo(newOpenSource);
        setOpen(true);
    }

    const cateIdChanged = (e) => setOpenSourceInfo({ ...openSourceInfo, cateId: e.target.value });
    const titleChanged = (e) => setOpenSourceInfo({ ...openSourceInfo, title: e.target.value });
    const explanationChanged = (e) => setOpenSourceInfo({ ...openSourceInfo, explanation: e.target.value });
    const gitHubUrlChanged = (e) => setOpenSourceInfo({ ...openSourceInfo, gitHubUrl: e.target.value });
    const markdownUrlChanged = (e) => setOpenSourceInfo({ ...openSourceInfo, markdownUrl: e.target.value });
    const sortChanged = (e) => setOpenSourceInfo({ ...openSourceInfo, sort: e.target.value });
    const isUsedChanged = (e) => setOpenSourceInfo({ ...openSourceInfo, isUsed: e.target.checked });

    return (
        <Grid container>
            <Grid item sx={{ width: { xs: "100%", sm: "auto", md: "auto", lg: "auto" } }}>
                <Stack 
                    spacing={2} 
                    padding={2}>
                    <DevNcoreSelect 
                        label="카테고리" 
                        onChange={(e) => setCateId(e.target.value)}
                        source={[ { name: "전체", value: "ALL"}, ...categories]} 
                        value={cateId}/>
                    <DevNcoreSelect 
                        label="사용여부" 
                        onChange={(e) => setIsUsed(e.target.value)}
                        source={isUsedSource}
                        value={isUsed}/>
                    <TextField size="small"
                        label="키워드" 
                        onChange={(e) => setKeyword(e.target.value)}
                        value={keyword}/>   
                    <Button 
                        onClick={searchClick}
                        variant="contained" 
                        children="조회"/>
                    <Divider/>
                    <Button 
                        onClick={addOpenSourceClick}
                        variant="contained" 
                        children="OpenSource 등록"/>
                </Stack>
            </Grid>
            <Grid item xs style={{ minWidth: "300px", width: "auto", padding: "10px 0px 10px 0px"}}>
                <div 
                    className="ag-theme-alpine" 
                    style={{height: "calc(100vh - 48px)", margin: "10px",
                    width: "100%"}}>
                    <AgGridReact
                        defaultColDef={{
                            minWidth: 100,
                            resizable: true
                        }}
                        colResizeDefault={'shift'}
                        rowSelection={'single'}
                        onGridReady={onGridReady}
                        onRowDoubleClicked={onSelectionChanged}
                        rowData={data}>
                        <AgGridColumn sx={{ display: { xs: "none", lg: "block" }}} field="cateName" width={130}/>
                        <AgGridColumn sx={{ display: { xs: "none", lg: "block" }}} field="sort" width={30}/>
                        <AgGridColumn sx={{ display: { xs: "none", lg: "block" }}} field="isUsed" width={30}/>
                        <AgGridColumn field="title" width={260}/>
                        <AgGridColumn field="explanation" width={500}/>
                        <AgGridColumn field="gitHubUrl" width={400}/>
                        <AgGridColumn field="markdownUrl" width={700}/>
                    </AgGridReact>
                </div>
            </Grid>
            <Drawer
                PaperProps={{
                    sx: { width: "90%", maxWidth: "1000px" }
                }}
                anchor="right"
                open={open}
                onClose={toggleDrawer(false)}>

                <Stack 
                    sx={{ minWidth: "800px" }}
                    spacing={1.5} 
                    padding={2}>
                    <Typography>OpenSource Manager</Typography>
                    <Divider/>
                    <Switch checked={openSourceInfo.isUsed} onChange={isUsedChanged} inputProps={{ 'aria-label': 'controlled' }}/>
                    <DevNcoreSelect label="Category" value={openSourceInfo.cateId} onChange={cateIdChanged} source={categories}/>
                    <TextField label="제목" size="small" value={openSourceInfo.title} onChange={titleChanged}/>
                    <TextField label="설명" size="small" value={openSourceInfo.explanation} onChange={explanationChanged}/>
                    <TextField label="깃허브URL" size="small" value={openSourceInfo.gitHubUrl} onChange={gitHubUrlChanged}/>
                    <TextField label="마크다운URL" size="small" value={openSourceInfo.markdownUrl} onChange={markdownUrlChanged}/>
                    <TextField label="정렬" size="small" value={openSourceInfo.sort} onChange={sortChanged}/>
                    <Divider/>

                    {openSourceInfo.id === -1 ?
                        <Button 
                            onClick={addOpenSource}
                            children="등록" 
                            variant="contained"/>
                        :
                        <Stack> 
                            <Button 
                                onClick={updateOpenSource}
                                children="수정" 
                                variant="contained"/>
                            <Divider/>
                            <Button 
                                onClick={onRemove}
                                children="삭제" 
                                variant="contained"/>
                        </Stack>
                    }   
                </Stack>
            </Drawer>
        </Grid>
    );
}