부가세 신고 세금 계산서 리스트 및 상세, 필터, 캘린더 컴포넌트 month 형 추가
This commit is contained in:
focp212@naver.com
126
src/shared/ui/calendar/nice-calendar-month.tsx
Normal file
126
src/shared/ui/calendar/nice-calendar-month.tsx
Normal file
@@ -0,0 +1,126 @@
|
||||
import moment, { locale } from 'moment';
|
||||
import styled from "styled-components";
|
||||
import { useState } from 'react';
|
||||
import Calendar from 'react-calendar';
|
||||
import 'react-calendar/dist/Calendar.css';
|
||||
import { useEffect } from 'react';
|
||||
import { CalendarType } from '@/entities/common/model/types';
|
||||
|
||||
interface NiceCalendarProps {
|
||||
calendarOpen: boolean;
|
||||
setCalendarOpen: (calendarOpen: boolean) => void;
|
||||
startMonth?: string;
|
||||
endMonth?: string;
|
||||
singleMonth?: string;
|
||||
calendarType: CalendarType;
|
||||
setNewMonth: (month: string) => void;
|
||||
};
|
||||
|
||||
const NiceCalendarMonth = ({
|
||||
calendarOpen,
|
||||
setCalendarOpen,
|
||||
startMonth,
|
||||
endMonth,
|
||||
singleMonth,
|
||||
calendarType,
|
||||
setNewMonth
|
||||
}: NiceCalendarProps) => {
|
||||
const [valueMonth, setValueMonth] = useState<string>();
|
||||
const [minMonth, setMinMonth] = useState<Date | undefined>();
|
||||
const [maxMonth, setMaxMonth] = useState<Date | undefined>();
|
||||
const onchangeToMonth = (selectedMonth: any) => {
|
||||
setNewMonth(moment(selectedMonth).format('YYYY.MM'));
|
||||
setCalendarOpen(false);
|
||||
};
|
||||
|
||||
const onClickToClose = () => {
|
||||
// setCalendarOpen(false);
|
||||
};
|
||||
const setMinMaxValueDate = () => {
|
||||
if(calendarType === CalendarType.Start){
|
||||
setMinMonth(undefined);
|
||||
if(!!endMonth){
|
||||
setMaxMonth(new Date(endMonth));
|
||||
}
|
||||
setValueMonth(startMonth);
|
||||
}
|
||||
else if(calendarType === CalendarType.End){
|
||||
if(!!startMonth){
|
||||
setMinMonth(new Date(startMonth));
|
||||
}
|
||||
setMaxMonth(new Date());
|
||||
setValueMonth(endMonth);
|
||||
}
|
||||
else if(calendarType === CalendarType.Single){
|
||||
setValueMonth(singleMonth);
|
||||
}
|
||||
};
|
||||
|
||||
const formatMonthYear = (locale: string | undefined, date: Date) => {
|
||||
return date.toLocaleDateString('en', {
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
});
|
||||
};
|
||||
const formatYear = (locale: string | undefined, date: Date) => {
|
||||
return date.toLocaleDateString('en', {
|
||||
year: 'numeric'
|
||||
});
|
||||
};
|
||||
const formmatMonth = (locale: string | undefined, date: Date) => {
|
||||
return date.toLocaleDateString('en', {
|
||||
month: 'short'
|
||||
});
|
||||
};
|
||||
const formatDay = (locale: string | undefined, date: Date) => {
|
||||
return date.toLocaleString('en', {
|
||||
day: 'numeric'
|
||||
});
|
||||
};
|
||||
const formatShortWeekday = (locale: string | undefined, date: Date) => {
|
||||
return date.toLocaleString('en', {
|
||||
weekday: 'short'
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setMinMaxValueDate();
|
||||
|
||||
}, [calendarOpen])
|
||||
|
||||
return (
|
||||
<>
|
||||
{ (calendarOpen) &&
|
||||
<>
|
||||
<div className="bg-dim"></div>
|
||||
<CalendarWrapper onClick={ () => onClickToClose() }>
|
||||
<Calendar
|
||||
minDate={ minMonth }
|
||||
maxDate={ maxMonth }
|
||||
onClickMonth={ onchangeToMonth }
|
||||
value={ valueMonth }
|
||||
formatMonthYear={ formatMonthYear }
|
||||
formatYear= { formatYear }
|
||||
formatMonth={ formmatMonth }
|
||||
formatDay={ formatDay }
|
||||
formatShortWeekday={ formatShortWeekday }
|
||||
showNeighboringMonth={ true }
|
||||
defaultView='year'
|
||||
view='year'
|
||||
></Calendar>
|
||||
</CalendarWrapper>
|
||||
</>
|
||||
}
|
||||
</>
|
||||
);
|
||||
};
|
||||
const CalendarWrapper = styled.div`
|
||||
z-index: 1100;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
`;
|
||||
|
||||
export default NiceCalendarMonth;
|
||||
@@ -29,7 +29,7 @@ const NiceCalendar = ({
|
||||
const [minDate, setMinDate] = useState<Date | undefined>();
|
||||
const [maxDate, setMaxDate] = useState<Date | undefined>();
|
||||
const onchangeToDate = (selectedDate: any) => {
|
||||
setNewDate(moment(selectedDate).format('YYYY-MM-DD'));
|
||||
setNewDate(moment(selectedDate).format('YYYY.MM.DD'));
|
||||
setCalendarOpen(false);
|
||||
};
|
||||
|
||||
|
||||
@@ -11,7 +11,6 @@ export const FilterButtonGroups = ({
|
||||
let rs = [];
|
||||
|
||||
if(!!btnGroups && btnGroups.length > 0){
|
||||
console.log(' btnGroups.length : ', btnGroups.length)
|
||||
let emptySpanCnt = 4 - (btnGroups.length % 4);
|
||||
let innerList = [];
|
||||
|
||||
@@ -25,7 +24,10 @@ export const FilterButtonGroups = ({
|
||||
);
|
||||
if((i % 4) === 3 ){
|
||||
rs.push(
|
||||
<div className="chip-row">{ innerList }</div>
|
||||
<div
|
||||
key={ `key-btngroup-chip-row-${i}` }
|
||||
className="chip-row"
|
||||
>{ innerList }</div>
|
||||
);
|
||||
innerList = [];
|
||||
}
|
||||
@@ -41,7 +43,10 @@ export const FilterButtonGroups = ({
|
||||
);
|
||||
}
|
||||
rs.push(
|
||||
<div className="chip-row">{ innerList }</div>
|
||||
<div
|
||||
key={ `key-btngroup-chip-row-nodata` }
|
||||
className="chip-row"
|
||||
>{ innerList }</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
160
src/shared/ui/filter/calendar-month.tsx
Normal file
160
src/shared/ui/filter/calendar-month.tsx
Normal file
@@ -0,0 +1,160 @@
|
||||
import moment from 'moment';
|
||||
import { ChangeEvent, useState } from 'react';
|
||||
import { CalendarType, FilterMonthOptions } from '@/entities/common/model/types';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import NiceCalendarMonth from '../calendar/nice-calendar-month';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
interface FilterCalendarMonthProps {
|
||||
title?: string;
|
||||
startMonth: string;
|
||||
endMonth: string;
|
||||
setStartMonth: (startMonth: string) => void;
|
||||
setEndMonth: (endMonth: string) => void;
|
||||
};
|
||||
|
||||
export const FilterCalendarMonth = ({
|
||||
title,
|
||||
startMonth,
|
||||
endMonth,
|
||||
setStartMonth,
|
||||
setEndMonth
|
||||
}: FilterCalendarMonthProps) => {
|
||||
const [filterTitle, setFilterTitle] = useState<string>(title || '조회기간');
|
||||
const [monthReadOnly, setMonthReadyOnly] = useState<boolean>(false);
|
||||
const [filterMonthOptionsBtn, setFilterMonthOptionsBtn] = useState<FilterMonthOptions>(FilterMonthOptions.Input);
|
||||
const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
|
||||
const [calendarType, setCalendarType] = useState<CalendarType>(CalendarType.Start);
|
||||
|
||||
const setFilterMonth = (monthOptions: FilterMonthOptions) => {
|
||||
if(monthOptions === FilterMonthOptions.Month1){
|
||||
setStartMonth(moment().format('YYYY.MM'));
|
||||
setEndMonth(moment().format('YYYY.MM'));
|
||||
setMonthReadyOnly(true);
|
||||
setFilterMonthOptionsBtn(FilterMonthOptions.Month1);
|
||||
}
|
||||
else if(monthOptions === FilterMonthOptions.Month2){
|
||||
setStartMonth(moment().subtract(1, 'month').format('YYYY.MM'));
|
||||
setEndMonth(moment().format('YYYY.MM'));
|
||||
setMonthReadyOnly(true);
|
||||
setFilterMonthOptionsBtn(FilterMonthOptions.Month2);
|
||||
}
|
||||
else if(monthOptions === FilterMonthOptions.Month3){
|
||||
setStartMonth(moment().subtract(2, 'month').format('YYYY.MM'));
|
||||
setEndMonth(moment().format('YYYY.MM'));
|
||||
setMonthReadyOnly(true);
|
||||
setFilterMonthOptionsBtn(FilterMonthOptions.Month3);
|
||||
}
|
||||
else if(monthOptions === FilterMonthOptions.Input){
|
||||
setMonthReadyOnly(false);
|
||||
setFilterMonthOptionsBtn(FilterMonthOptions.Input);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
const onClickToOpenCalendar = (calendarType: CalendarType) => {
|
||||
if(!monthReadOnly){
|
||||
setCalendarOpen(true);
|
||||
setCalendarType(calendarType);
|
||||
}
|
||||
else{
|
||||
setCalendarOpen(false);
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
const setNewMonth = (month: string) => {
|
||||
console.log(month)
|
||||
if(calendarType === CalendarType.Start){
|
||||
setStartMonth(month);
|
||||
}
|
||||
else if(calendarType === CalendarType.End){
|
||||
setEndMonth(month);
|
||||
}
|
||||
setCalendarOpen(false);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">{ filterTitle }</div>
|
||||
<div className="opt-controls col below h36">
|
||||
<div className="chip-row">
|
||||
<span
|
||||
className={ `keyword-tag ${(filterMonthOptionsBtn === FilterMonthOptions.Month1)? 'active': ''}` }
|
||||
onClick={ () => setFilterMonth(FilterMonthOptions.Month1) }
|
||||
>당월</span>
|
||||
<span
|
||||
className={ `keyword-tag ${(filterMonthOptionsBtn === FilterMonthOptions.Month2)? 'active': ''}` }
|
||||
onClick={ () => setFilterMonth(FilterMonthOptions.Month2) }
|
||||
>2개월</span>
|
||||
<span
|
||||
className={ `keyword-tag ${(filterMonthOptionsBtn === FilterMonthOptions.Month3)? 'active': ''}` }
|
||||
onClick={ () => setFilterMonth(FilterMonthOptions.Month3) }
|
||||
>3개월</span>
|
||||
<span
|
||||
className={ `keyword-tag ${(filterMonthOptionsBtn === FilterMonthOptions.Input)? 'active': ''}` }
|
||||
onClick={ () => setFilterMonth(FilterMonthOptions.Input) }
|
||||
>직접입력</span>
|
||||
</div>
|
||||
<div className="range-row">
|
||||
<div className="input-wrapper date">
|
||||
<input
|
||||
id="startDate"
|
||||
className="date-input"
|
||||
type="text"
|
||||
placeholder="날짜 선택"
|
||||
value={ moment(startMonth).format('YYYY.MM') }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
|
||||
readOnly={ monthReadOnly }
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="date-btn"
|
||||
onClick={ () => onClickToOpenCalendar(CalendarType.Start) }
|
||||
>
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_date.svg' }
|
||||
alt="날짜 선택"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<span className="beetween">~</span>
|
||||
<div className="input-wrapper date">
|
||||
<input
|
||||
id="endDate"
|
||||
className="date-input"
|
||||
type="text"
|
||||
placeholder="날짜 선택"
|
||||
value={ moment(endMonth).format('YYYY.MM') }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
|
||||
readOnly={ monthReadOnly }
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="date-btn"
|
||||
onClick={ () => onClickToOpenCalendar(CalendarType.End) }
|
||||
>
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_date.svg' }
|
||||
alt="날짜 선택"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<NiceCalendarMonth
|
||||
calendarOpen={ calendarOpen }
|
||||
setCalendarOpen={ setCalendarOpen }
|
||||
startMonth={ startMonth }
|
||||
endMonth={ endMonth }
|
||||
calendarType={ calendarType }
|
||||
setNewMonth={ setNewMonth }
|
||||
></NiceCalendarMonth>
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user