From 7d57fd855ebbb4e4a9fa0732a84f2a0e17b7ddc7 Mon Sep 17 00:00:00 2001 From: Chiyoung Jeong Date: Mon, 30 Oct 2023 10:00:28 +0900 Subject: [PATCH] fix: minor bugs in web (#70) * fix: qa2 * fix: feedback detail and description --- apps/web/public/locales/en/common.json | 3 +- apps/web/public/locales/ja/common.json | 3 +- apps/web/public/locales/ko/common.json | 3 +- .../etc/DateRangePicker/DateRangePicker.tsx | 55 ++++++++----------- .../components/layouts/SideNav/SideNav.tsx | 7 +-- .../setting-menu/ChannelSettingMenu.tsx | 2 +- .../setting-menu/ProjectSettingMenu.tsx | 2 +- .../setting-menu/TenantSettingMenu.tsx | 2 +- .../FeedbackDetail/FeedbackDetail.tsx | 9 +-- .../FeedbackTableBar/FeedbackTableBar.tsx | 1 + .../tables/IssueTable/IssueTable.tsx | 1 + .../src/pages/main/[projectId]/setting.tsx | 27 +++++++-- apps/web/src/utils/description-string.ts | 2 +- packages/ufb-ui/src/Tooltip/Tooltip.tsx | 4 +- 14 files changed, 61 insertions(+), 60 deletions(-) diff --git a/apps/web/public/locales/en/common.json b/apps/web/public/locales/en/common.json index db2b5de3e..59c17a024 100644 --- a/apps/web/public/locales/en/common.json +++ b/apps/web/public/locales/en/common.json @@ -264,8 +264,7 @@ "today": "Today", "yesterday": "Yesterday", "before-days": "Before {{day, number}} days", - "date-range-over-max-days": "The inquiry period can only be entered up to {{maxDays}} days", - "all-dates": "The entire period" + "date-range-over-max-days": "The inquiry period can only be entered up to {{maxDays}} days" }, "equal-search": "Equal", "like-search": "Like" diff --git a/apps/web/public/locales/ja/common.json b/apps/web/public/locales/ja/common.json index bb8ec839e..4ebe47eae 100644 --- a/apps/web/public/locales/ja/common.json +++ b/apps/web/public/locales/ja/common.json @@ -254,8 +254,7 @@ "today": "今日", "yesterday": "昨日", "before-days": "{{day, number}}日前", - "date-range-over-max-days": "照会期間は最大{{maxDays}}日まで入力可能です。", - "all-dates": "全期間" + "date-range-over-max-days": "照会期間は最大{{maxDays}}日まで入力可能です。" }, "equal-search": "完全一致", "like-search": "部分一致" diff --git a/apps/web/public/locales/ko/common.json b/apps/web/public/locales/ko/common.json index 4565b0d14..c8181362a 100644 --- a/apps/web/public/locales/ko/common.json +++ b/apps/web/public/locales/ko/common.json @@ -254,8 +254,7 @@ "today": "오늘", "yesterday": "어제", "before-days": "{{day, number}}일전", - "date-range-over-max-days": "조회 기간은 최대 {{maxDays}}일까지만 입력 가능합니다.", - "all-dates": "전체 기간" + "date-range-over-max-days": "조회 기간은 최대 {{maxDays}}일까지만 입력 가능합니다." }, "equal-search": "완전 일치", "like-search": "부분 일치" diff --git a/apps/web/src/components/etc/DateRangePicker/DateRangePicker.tsx b/apps/web/src/components/etc/DateRangePicker/DateRangePicker.tsx index 2d466ca38..2d7edf6ee 100644 --- a/apps/web/src/components/etc/DateRangePicker/DateRangePicker.tsx +++ b/apps/web/src/components/etc/DateRangePicker/DateRangePicker.tsx @@ -35,18 +35,19 @@ interface IProps extends React.PropsWithChildren { maxDate?: Date; maxDays?: number; isClearable?: boolean; + disableTotalDateRange?: boolean; } -const isTotalDateRange = (date: DateRangeType) => { - if (!date) return false; - if (!date.startDate || !date.endDate) return false; - return ( - dayjs(date.startDate).format(DATE_FORMAT) === '1900-01-01' && - dayjs(date.endDate).format(DATE_FORMAT) === '2999-12-31' - ); -}; const DateRangePicker: React.FC = (props) => { - const { value, onChange, maxDate, minDate, maxDays, isClearable } = props; + const { + value, + onChange, + maxDate, + minDate, + maxDays, + isClearable, + disableTotalDateRange, + } = props; const { t, i18n } = useTranslation(); @@ -55,8 +56,8 @@ const DateRangePicker: React.FC = (props) => { const [isOpen, setIsOpen] = useState(false); const [activeIdx, setActiveIdx] = useState(-1); - const items = useMemo( - () => [ + const items = useMemo(() => { + return [ { label: t('text.date.today'), startDate: dayjs().toDate(), @@ -82,14 +83,8 @@ const DateRangePicker: React.FC = (props) => { startDate: dayjs().subtract(90, 'days').toDate(), endDate: dayjs().toDate(), }, - { - label: t('text.date.all-dates'), - startDate: dayjs('1900.01.01').toDate(), - endDate: dayjs('2999.12.31').toDate(), - }, - ], - [t], - ); + ]; + }, [t, disableTotalDateRange]); useEffect(() => { setActiveIdx(-1); @@ -132,17 +127,15 @@ const DateRangePicker: React.FC = (props) => { >

{currentValue - ? isTotalDateRange(currentValue) - ? t('text.date.all-dates') - : `${ - currentValue?.startDate - ? dayjs(currentValue?.startDate).format(DATE_FORMAT) - : '' - } ~ ${ - currentValue?.endDate - ? dayjs(currentValue.endDate).format(DATE_FORMAT) - : '' - }` + ? `${ + currentValue?.startDate + ? dayjs(currentValue?.startDate).format(DATE_FORMAT) + : '' + } ~ ${ + currentValue?.endDate + ? dayjs(currentValue.endDate).format(DATE_FORMAT) + : '' + }` : 'YYYY-MM-DD ~ YYYY-MM-DD'}

@@ -193,7 +186,7 @@ const DateRangePicker: React.FC = (props) => { disabledKeyboardNavigation selectsRange inline - focusSelectedMonth={false} + autoFocus />
diff --git a/apps/web/src/components/layouts/SideNav/SideNav.tsx b/apps/web/src/components/layouts/SideNav/SideNav.tsx index 032676ec3..5e11d0928 100644 --- a/apps/web/src/components/layouts/SideNav/SideNav.tsx +++ b/apps/web/src/components/layouts/SideNav/SideNav.tsx @@ -120,12 +120,7 @@ const MenuItem: React.FC = ({ ) : ( - { - if (activePathname === router.pathname) router.reload(); - }} - > +
- - - - +
{channelData?.fields.sort(fieldSortType).map((field) => ( - -
+ {field.name} + {field.key === 'issues' ? (
{( diff --git a/apps/web/src/containers/tables/FeedbackTable/FeedbackTableBar/FeedbackTableBar.tsx b/apps/web/src/containers/tables/FeedbackTable/FeedbackTableBar/FeedbackTableBar.tsx index 27f23e0af..a31f2867e 100644 --- a/apps/web/src/containers/tables/FeedbackTable/FeedbackTableBar/FeedbackTableBar.tsx +++ b/apps/web/src/containers/tables/FeedbackTable/FeedbackTableBar/FeedbackTableBar.tsx @@ -173,6 +173,7 @@ const FeedbackTableBar: React.FC = (props) => { value={createdAtRange} maxDate={new Date()} maxDays={env.NEXT_PUBLIC_MAX_DAYS} + disableTotalDateRange />
{fieldData && ( diff --git a/apps/web/src/containers/tables/IssueTable/IssueTable.tsx b/apps/web/src/containers/tables/IssueTable/IssueTable.tsx index 9c5b5aa27..671dbafdf 100644 --- a/apps/web/src/containers/tables/IssueTable/IssueTable.tsx +++ b/apps/web/src/containers/tables/IssueTable/IssueTable.tsx @@ -323,6 +323,7 @@ const IssueTable: React.FC = ({ projectId }) => { value={createdAtRange} onChange={setCreatedAtRange} maxDate={new Date()} + isClearable /> = ({ projectId }) => { const { t } = useTranslation(); + const router = useRouter(); const [showList, setShowList] = useState([0, 1, 2]); const [channelId, setChannelId] = useState(null); + const settingMenu = useMemo(() => { + if (router.query?.menu) return router.query.menu as SettingMenuType; + else return null; + }, [router.query]); - const [settingMenu, setSettingMenu] = useState(); + console.log('settingMenu: ', settingMenu); + + const setSettingMenu = (input: SettingMenuType | null) => + router.push({ + pathname: Path.SETTINGS, + query: { menu: input ?? undefined, projectId }, + }); const onClickReset = () => { setShowList([0, 1, 2]); - setSettingMenu(undefined); + setSettingMenu(null); }; - - const onClickTarget = (target?: SettingMenuType) => () => { - switch (target) { + useEffect(() => { + switch (settingMenu) { case 'TENANT_INFO': case 'SIGNUP_SETTING': case 'USER_MANAGEMENT': @@ -87,6 +99,9 @@ const SettingPage: NextPageWithLayout = ({ projectId }) => { setShowList([0, 1, 2]); break; } + }, [router.query]); + + const onClickTarget = (target: SettingMenuType | null) => () => { setSettingMenu(target); }; diff --git a/apps/web/src/utils/description-string.ts b/apps/web/src/utils/description-string.ts index bab0201cd..0c8850d4c 100644 --- a/apps/web/src/utils/description-string.ts +++ b/apps/web/src/utils/description-string.ts @@ -16,5 +16,5 @@ export const getDescriptionStr = (str?: string | null) => { if (!str) return '-'; str = str.trim(); - return str.length === 0 ? str : '-'; + return str.length !== 0 ? str : '-'; }; diff --git a/packages/ufb-ui/src/Tooltip/Tooltip.tsx b/packages/ufb-ui/src/Tooltip/Tooltip.tsx index 70ff20be8..c32b469a3 100644 --- a/packages/ufb-ui/src/Tooltip/Tooltip.tsx +++ b/packages/ufb-ui/src/Tooltip/Tooltip.tsx @@ -91,7 +91,9 @@ export const Tooltip: React.FC = ({ style={floatingStyles} {...getFloatingProps()} > -

{description}

+

+ {description} +

)}