그리드 및 물건현황 추가 수정
This commit is contained in:
parent
fe45151e0a
commit
47dcdb8d74
6
public/static/images/sub/copy_grid_ico.svg
Normal file
6
public/static/images/sub/copy_grid_ico.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="elements">
|
||||
<path id="Rectangle 1705" d="M12.9999 6.6C12.998 4.23433 12.9622 3.00897 12.2736 2.16994C12.1407 2.00791 11.9921 1.85934 11.8301 1.72637C10.945 1 9.62999 1 7 1C4.37002 1 3.05502 1 2.16994 1.72637C2.00791 1.85934 1.85934 2.00791 1.72637 2.16994C1 3.05502 1 4.37001 1 7C1 9.62998 1 10.945 1.72637 11.8301C1.85934 11.9921 2.00791 12.1407 2.16994 12.2736C3.00897 12.9622 4.23433 12.998 6.6 12.9999" stroke="#45576F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Vector" d="M10.8462 6.25C10.4319 6.25 10.0962 6.58579 10.0962 7C10.0962 7.41421 10.4319 7.75 10.8462 7.75V6.25ZM13.1538 7.75C13.5681 7.75 13.9038 7.41421 13.9038 7C13.9038 6.58579 13.5681 6.25 13.1538 6.25V7.75ZM7.75 10.8462C7.75 10.4319 7.41421 10.0962 7 10.0962C6.58579 10.0962 6.25 10.4319 6.25 10.8462H7.75ZM6.25 13.1538C6.25 13.5681 6.58579 13.9038 7 13.9038C7.41421 13.9038 7.75 13.5681 7.75 13.1538H6.25ZM8.99016 7.74363C9.40086 7.68978 9.69014 7.31318 9.63628 6.90249C9.58242 6.49179 9.20583 6.20251 8.79513 6.25637L8.99016 7.74363ZM7.5814 7.48186L8.05787 8.06107L7.5814 7.48186ZM6.26469 8.39077C6.18312 8.79687 6.4462 9.19221 6.85231 9.27378C7.25841 9.35534 7.65374 9.09226 7.73531 8.68616L6.26469 8.39077ZM16.2647 8.68616C16.3463 9.09226 16.7416 9.35534 17.1477 9.27378C17.5538 9.19221 17.8169 8.79687 17.7353 8.39077L16.2647 8.68616ZM16.4186 7.48186L15.9421 8.06107L15.9421 8.06107L16.4186 7.48186ZM15.2049 6.25637C14.7942 6.20251 14.4176 6.49179 14.3637 6.90249C14.3099 7.31318 14.5991 7.68978 15.0098 7.74363L15.2049 6.25637ZM15.0098 16.2564C14.5991 16.3102 14.3099 16.6868 14.3637 17.0975C14.4176 17.5082 14.7942 17.7975 15.2049 17.7436L15.0098 16.2564ZM16.4186 16.5181L16.8951 17.0973L16.4186 16.5181ZM17.7353 15.6092C17.8169 15.2031 17.5538 14.8078 17.1477 14.7262C16.7416 14.6447 16.3463 14.9077 16.2647 15.3138L17.7353 15.6092ZM7.73531 15.3138C7.65374 14.9077 7.25841 14.6447 6.85231 14.7262C6.4462 14.8078 6.18312 15.2031 6.26469 15.6092L7.73531 15.3138ZM7.5814 16.5181L8.05787 15.9389L8.05787 15.9389L7.5814 16.5181ZM8.79513 17.7436C9.20583 17.7975 9.58243 17.5082 9.63628 17.0975C9.69014 16.6868 9.40086 16.3102 8.99016 16.2564L8.79513 17.7436ZM10.8462 16.25C10.4319 16.25 10.0962 16.5858 10.0962 17C10.0962 17.4142 10.4319 17.75 10.8462 17.75V16.25ZM13.1538 17.75C13.5681 17.75 13.9038 17.4142 13.9038 17C13.9038 16.5858 13.5681 16.25 13.1538 16.25V17.75ZM17.75 10.8462C17.75 10.4319 17.4142 10.0962 17 10.0962C16.5858 10.0962 16.25 10.4319 16.25 10.8462H17.75ZM16.25 13.1538C16.25 13.5681 16.5858 13.9038 17 13.9038C17.4142 13.9038 17.75 13.5681 17.75 13.1538H16.25ZM10.8462 7.75H13.1538V6.25H10.8462V7.75ZM6.25 10.8462V13.1538H7.75V10.8462H6.25ZM8.79513 6.25637C8.15219 6.34068 7.58031 6.51159 7.10493 6.90266L8.05787 8.06107C8.22678 7.92212 8.48234 7.81022 8.99016 7.74363L8.79513 6.25637ZM7.73531 8.68616C7.80384 8.34501 7.90801 8.18435 8.05787 8.06107L7.10493 6.90266C6.62056 7.30112 6.3817 7.8082 6.26469 8.39077L7.73531 8.68616ZM17.7353 8.39077C17.6183 7.8082 17.3794 7.30112 16.8951 6.90266L15.9421 8.06107C16.092 8.18435 16.1962 8.345 16.2647 8.68616L17.7353 8.39077ZM15.0098 7.74363C15.5177 7.81022 15.7732 7.92212 15.9421 8.06107L16.8951 6.90266C16.4197 6.51159 15.8478 6.34068 15.2049 6.25637L15.0098 7.74363ZM15.2049 17.7436C15.8478 17.6593 16.4197 17.4884 16.8951 17.0973L15.9421 15.9389C15.7732 16.0779 15.5177 16.1898 15.0098 16.2564L15.2049 17.7436ZM16.2647 15.3138C16.1962 15.655 16.092 15.8156 15.9421 15.9389L16.8951 17.0973C17.3794 16.6989 17.6183 16.1918 17.7353 15.6092L16.2647 15.3138ZM6.26469 15.6092C6.3817 16.1918 6.62056 16.6989 7.10493 17.0973L8.05787 15.9389C7.90801 15.8156 7.80384 15.655 7.73531 15.3138L6.26469 15.6092ZM8.99016 16.2564C8.48234 16.1898 8.22678 16.0779 8.05787 15.9389L7.10492 17.0973C7.58031 17.4884 8.15219 17.6593 8.79513 17.7436L8.99016 16.2564ZM10.8462 17.75H13.1538V16.25H10.8462V17.75ZM16.25 10.8462V13.1538H17.75V10.8462H16.25Z" fill="#45576F"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
4
public/static/images/sub/pagination_first.svg
Normal file
4
public/static/images/sub/pagination_first.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="9" height="8" viewBox="0 0 9 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.5 1L1.5 4L4.5 7" stroke="#6B6B6B"/>
|
||||
<path d="M8.5 1L5.5 4L8.5 7" stroke="#6B6B6B"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 195 B |
3
public/static/images/sub/pagination_prev.svg
Normal file
3
public/static/images/sub/pagination_prev.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.5 1L1.5 4L4.5 7" stroke="#6B6B6B"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 147 B |
@ -3,6 +3,8 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useAxios } from '@/hooks/useAxios'
|
||||
import QGrid from '@/components/common/grid/QGrid'
|
||||
import '@/styles/grid.scss'
|
||||
import Pagination from '@/components/common/grid/Pagination'
|
||||
|
||||
export default function GridPage() {
|
||||
const { get } = useAxios()
|
||||
@ -22,5 +24,12 @@ export default function GridPage() {
|
||||
fetchData()
|
||||
}, [])
|
||||
|
||||
return <QGrid {...gridProps} />
|
||||
return (
|
||||
<div className='q-grid'>
|
||||
<QGrid {...gridProps} />
|
||||
<div className='pagination-wrap mt10'>
|
||||
<Pagination/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
20
src/components/common/grid/Pagination.jsx
Normal file
20
src/components/common/grid/Pagination.jsx
Normal file
@ -0,0 +1,20 @@
|
||||
export default function Pagination (){
|
||||
return(
|
||||
<ol className="pagination">
|
||||
<li className="page-item first"><button></button></li>
|
||||
<li className="page-item prev"><button></button></li>
|
||||
<li className="page-item "><button>1</button></li>
|
||||
<li className="page-item on"><button>2</button></li>
|
||||
<li className="page-item "><button>3</button></li>
|
||||
<li className="page-item "><button>4</button></li>
|
||||
<li className="page-item "><button>5</button></li>
|
||||
<li className="page-item "><button>6</button></li>
|
||||
<li className="page-item "><button>7</button></li>
|
||||
<li className="page-item "><button>8</button></li>
|
||||
<li className="page-item "><button>9</button></li>
|
||||
<li className="page-item "><button>10</button></li>
|
||||
<li className="page-item next"><button></button></li>
|
||||
<li className="page-item last"><button></button></li>
|
||||
</ol>
|
||||
)
|
||||
}
|
||||
@ -21,13 +21,20 @@ export default function QGrid(props) {
|
||||
*/
|
||||
const [colDefs, setColDefs] = useState(
|
||||
gridColumns ?? [
|
||||
{ field: 'mission', filter: true },
|
||||
{ field: 'company' },
|
||||
{ field: 'location' },
|
||||
{ field: 'date' },
|
||||
{ field: 'price', valueFormatter: (params) => `₩ ${params.value.toLocaleString()}` },
|
||||
{ field: 'successful' },
|
||||
{ field: 'rocket' },
|
||||
{ headerName: "更新日時", field: 'mission', filter: true, cellStyle: {textAlign: "center"}},
|
||||
{ headerName: "品番", field: 'company' },
|
||||
{ headerName: "プラン数", field: 'location', flex: 1, cellRenderer: (params) => {
|
||||
return (
|
||||
<div className='copy-ico-wrap'>
|
||||
{params.value.toLocaleString()}
|
||||
<button className='copy_ico'></button>
|
||||
</div>
|
||||
);
|
||||
}},
|
||||
{ headerName: "商品名", field: 'date', cellStyle: {textAlign: "right"} },
|
||||
{ headerName: "商品名", field: 'price', valueFormatter: (params) => `₩ ${params.value.toLocaleString()}` },
|
||||
{ headerName: "販売店ID", field: 'successful', cellStyle: {display: "flex", justifyContent: 'center'} },
|
||||
{ headerName: "代理店名", field: 'rocket' },
|
||||
],
|
||||
)
|
||||
|
||||
@ -66,13 +73,14 @@ export default function QGrid(props) {
|
||||
// }
|
||||
|
||||
console.log('use effect')
|
||||
gridData ? setRowData(gridData) : ''
|
||||
// 임의 10개 지정
|
||||
gridData ? setRowData(gridData.slice(0, 10)) : ''
|
||||
}, [gridData])
|
||||
|
||||
return (
|
||||
<div
|
||||
className="ag-theme-quartz" // applying the Data Grid theme
|
||||
style={{ height: 500 }} // the Data Grid will fill the size of the parent container
|
||||
style={{ height: '100%' }} // the Data Grid will fill the size of the parent container
|
||||
>
|
||||
<AgGridReact
|
||||
rowBuffer={rowBuffer}
|
||||
@ -81,7 +89,7 @@ export default function QGrid(props) {
|
||||
defaultColDef={defaultColDef}
|
||||
isRowSelectable={isRowSelectable}
|
||||
onFilterOpened={onFilterOpened}
|
||||
pagination={isPageable}
|
||||
domLayout='autoHeight'
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -1,4 +1,28 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useAxios } from '@/hooks/useAxios'
|
||||
import Pagination from "@/components/common/grid/Pagination"
|
||||
import QGrid from "@/components/common/grid/QGrid"
|
||||
import '@/styles/grid.scss'
|
||||
|
||||
export default function ProductsList(){
|
||||
const { get } = useAxios()
|
||||
|
||||
const [gridProps, setGridProps] = useState({
|
||||
gridData: [],
|
||||
isPageable: true,
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
// const response = await fetch('https://www.ag-grid.com/example-assets/space-mission-data.json')
|
||||
// const data = await response.json()
|
||||
const data = await get({ url: 'https://www.ag-grid.com/example-assets/space-mission-data.json' })
|
||||
setGridProps({ ...gridProps, gridData: data })
|
||||
}
|
||||
fetchData()
|
||||
}, [])
|
||||
return(
|
||||
<div className="sub-table-box">
|
||||
<div className="table-box-title-wrap">
|
||||
@ -23,7 +47,12 @@ export default function ProductsList(){
|
||||
</div>
|
||||
</div>
|
||||
<div className="gird-table-wrap">
|
||||
gird
|
||||
<div className='q-grid'>
|
||||
<QGrid {...gridProps} />
|
||||
<div className='pagination-wrap'>
|
||||
<Pagination/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -50,44 +50,13 @@ export default function PropertyStatus(){
|
||||
<input type="text" className="input-light" />
|
||||
</div>
|
||||
</td>
|
||||
<th>販売代理店名</th>
|
||||
<td>
|
||||
<div className="input-wrap">
|
||||
<input type="text" className="input-light" />
|
||||
</div>
|
||||
</td>
|
||||
<th>仕様確認可否</th>
|
||||
<td>
|
||||
<div className="radio-wrap">
|
||||
<div className="d-check-radio light mr10">
|
||||
<input type="radio" name="radio01" id="ra01" />
|
||||
<label htmlFor="ra01">All</label>
|
||||
</div>
|
||||
<div className="d-check-radio light mr10">
|
||||
<input type="radio" name="radio01" id="ra02" />
|
||||
<label htmlFor="ra02">仕様確認</label>
|
||||
</div>
|
||||
<div className="d-check-radio light">
|
||||
<input type="radio" name="radio01" id="ra03 " />
|
||||
<label htmlFor="ra03 ">仕様未確認 </label>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>担当者</th>
|
||||
<td>
|
||||
<div className="input-wrap">
|
||||
<input type="text" className="input-light" />
|
||||
</div>
|
||||
</td>
|
||||
<th>見積もり</th>
|
||||
<td>
|
||||
<div className="input-wrap">
|
||||
<input type="text" className="input-light" />
|
||||
</div>
|
||||
</td>
|
||||
<th>2次点の選択</th>
|
||||
<th>販売代理店の選択</th>
|
||||
<td>
|
||||
<div className="select-wrap">
|
||||
<select className="select-light" name="" id="" >
|
||||
@ -96,9 +65,16 @@ export default function PropertyStatus(){
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>担当者</th>
|
||||
<td>
|
||||
<div className="input-wrap">
|
||||
<input type="text" className="input-light" />
|
||||
</div>
|
||||
</td>
|
||||
<th>期間検索</th>
|
||||
<td colSpan={5}>
|
||||
<td colSpan={3}>
|
||||
<div className="form-flex-wrap">
|
||||
<div className="radio-wrap">
|
||||
<div className="d-check-radio light mr10">
|
||||
@ -111,11 +87,11 @@ export default function PropertyStatus(){
|
||||
</div>
|
||||
</div>
|
||||
<div className="date-picker-wrap">
|
||||
<div className="date-picker" style={{width: '244px'}}>
|
||||
<div className="date-picker" style={{flex: 1}}>
|
||||
<SingleDatePicker/>
|
||||
</div>
|
||||
<span> ~ </span>
|
||||
<div className="date-picker" style={{width: '400px'}}>
|
||||
<div className="date-picker" style={{flex: 1}}>
|
||||
<SingleDatePicker/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -578,6 +578,9 @@
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.pagination-wrap{
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.infomation-box-wrap{
|
||||
|
||||
61
src/styles/_grid-detail.scss
Normal file
61
src/styles/_grid-detail.scss
Normal file
@ -0,0 +1,61 @@
|
||||
.q-grid{
|
||||
height: fit-content;
|
||||
.ag-theme-quartz {
|
||||
outline: none;
|
||||
border: none;
|
||||
--ag-border-radius: 0px;
|
||||
--ag-wrapper-border-radius: 0px;
|
||||
--ag-header-height: 40px;
|
||||
--ag-header-foreground-color: white;
|
||||
--ag-header-background-color: #5D6A76;
|
||||
// --ag-header-cell-hover-background-color: rgb(80, 40, 140);
|
||||
--ag-header-cell-moving-background-color: #5D6A76;
|
||||
.ag-root-wrapper{
|
||||
outline: none;
|
||||
border: none;
|
||||
|
||||
}
|
||||
.ag-header{
|
||||
border-bottom: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.ag-header-cell{
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
}
|
||||
.ag-header-cell-label{
|
||||
justify-content: center;
|
||||
}
|
||||
.ag-header-cell-resize{
|
||||
&:after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.ag-row{
|
||||
border-bottom: 1px solid #ECF0F4;
|
||||
&:nth-child(2n){
|
||||
background-color: #F7F9FA;
|
||||
}
|
||||
}
|
||||
.ag-cell{
|
||||
font-size: 13px;
|
||||
color: #45576F;
|
||||
}
|
||||
.ag-icon-desc::before,
|
||||
.ag-icon-asc::before,
|
||||
.ag-icon-filter::before{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.copy-ico-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.copy_ico{
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: url(../../public/static/images/sub/copy_grid_ico.svg)no-repeat center;
|
||||
background-size: cover;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
51
src/styles/_pagination.scss
Normal file
51
src/styles/_pagination.scss
Normal file
@ -0,0 +1,51 @@
|
||||
.pagination{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
.page-item{
|
||||
button{
|
||||
font-family: 'Pretendard';
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 1px solid #EAEAEA;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #808080;
|
||||
}
|
||||
&.on{
|
||||
button{
|
||||
border-color: #304961;
|
||||
font-weight: 600;
|
||||
color: #304961;
|
||||
}
|
||||
}
|
||||
&.last,
|
||||
&.first{
|
||||
button{
|
||||
background: url(../../public/static/images/sub/pagination_first.svg)no-repeat center;
|
||||
background-size: 9px 8px;
|
||||
}
|
||||
}
|
||||
&.last{
|
||||
button{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
&.next,
|
||||
&.prev{
|
||||
button{
|
||||
background: url(../../public/static/images/sub/pagination_prev.svg)no-repeat center;
|
||||
background-size: 5px 8px;
|
||||
}
|
||||
}
|
||||
&.next{
|
||||
button{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -22,6 +22,7 @@
|
||||
padding: 0px 9px;
|
||||
border: 1px solid #ECF0F4 ;
|
||||
.radio-wrap{
|
||||
flex: none;
|
||||
@include flexbox;
|
||||
}
|
||||
.form-flex-wrap{
|
||||
@ -29,6 +30,7 @@
|
||||
gap: 15px;
|
||||
}
|
||||
.date-picker-wrap{
|
||||
width: 100%;
|
||||
@include flexbox;
|
||||
span{
|
||||
margin: 0 4px;
|
||||
|
||||
2
src/styles/grid.scss
Normal file
2
src/styles/grid.scss
Normal file
@ -0,0 +1,2 @@
|
||||
@import '_grid-detail.scss';
|
||||
@import '_pagination.scss';
|
||||
Loading…
x
Reference in New Issue
Block a user