diff --git a/package.json b/package.json index 8d9b4165..6d6a7282 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "iSunFA", - "version": "0.8.2+18", + "version": "0.8.2+19", "private": false, "scripts": { "dev": "next dev", diff --git a/src/components/asset_status_setting_modal/asset_status_setting_modal.tsx b/src/components/asset_status_setting_modal/asset_status_setting_modal.tsx new file mode 100644 index 00000000..36d682f9 --- /dev/null +++ b/src/components/asset_status_setting_modal/asset_status_setting_modal.tsx @@ -0,0 +1,118 @@ +import React, { useEffect, useState } from 'react'; +import { useTranslation } from 'next-i18next'; +import { RxCross2 } from 'react-icons/rx'; +import { BiSave } from 'react-icons/bi'; +import DatePicker, { DatePickerType } from '@/components/date_picker/date_picker'; +import { IDatePeriod } from '@/interfaces/date_period'; +import { default30DayPeriodInSec, radioButtonStyle } from '@/constants/display'; +import { Button } from '@/components/button/button'; +import { AssetStatus } from '@/constants/asset'; + +interface IAssetStatusSettingModal { + isModalVisible: boolean; + modalVisibilityHandler: () => void; + defaultStatus: string; +} + +const AssetStatusSettingModal = ({ + isModalVisible, + modalVisibilityHandler, + defaultStatus, +}: IAssetStatusSettingModal) => { + const { t } = useTranslation('common'); + + const [selectedPeriod, setSelectedPeriod] = useState(default30DayPeriodInSec); + const [assetStatus, setAssetStatus] = useState(defaultStatus); + + useEffect(() => { + if (!isModalVisible) { + setSelectedPeriod(default30DayPeriodInSec); + setAssetStatus(defaultStatus); + } + }, [isModalVisible]); + + // Info: (20240926 - Julian) 沒填日期時,禁用 Save 按鈕 + const saveBtnDisabled = selectedPeriod.startTimeStamp === 0 && selectedPeriod.endTimeStamp === 0; + + const statusRadio = Object.values(AssetStatus).map((status) => { + const changeStatus = (e: React.ChangeEvent) => { + setAssetStatus(e.target.value); + }; + + const statusText = t(`asset:ASSET.STATUS_${status.toUpperCase()}`); + + return ( + + ); + }); + + const isDisplayedAssetStatusSettingModal = isModalVisible ? ( +
+
+ {/* Info: (20240926 - Julian) Close button */} + + {/* Info: (20240926 - Julian) Title */} +
+

+ {t('asset:STATUS_SETTING_MODAL.TITLE')} +

+

+ {t('asset:STATUS_SETTING_MODAL.SUBTITLE')} +

+
+ {/* Info: (20240926 - Julian) Date picker */} +
+

+ {t('asset:STATUS_SETTING_MODAL.UPDATE_DATE')} + * +

+ +
+ {/* Info: (20240926 - Julian) Status */} +
+

+ {t('asset:STATUS_SETTING_MODAL.STATUS')} +

+
{statusRadio}
+
+ {/* Info: (20240926 - Julian) buttons */} +
+ + {/* ToDo: (20240926 - Julian) Implement SAVE function */} + +
+
+
+ ) : null; + + return isDisplayedAssetStatusSettingModal; +}; + +export default AssetStatusSettingModal; diff --git a/src/constants/asset.ts b/src/constants/asset.ts index 6493c0c7..adcec190 100644 --- a/src/constants/asset.ts +++ b/src/constants/asset.ts @@ -1,7 +1,7 @@ export enum AssetStatus { + SCRAPPED = 'scrapped', SOLD = 'sold', DONATED = 'donated', - SCRAPPED = 'scrapped', MISSING = 'missing', NORMAL = 'normal', } diff --git a/src/contexts/global_context.tsx b/src/contexts/global_context.tsx index bd5d9759..241b9b94 100644 --- a/src/contexts/global_context.tsx +++ b/src/contexts/global_context.tsx @@ -41,6 +41,7 @@ import { UploadType } from '@/constants/file'; import LoginConfirmModal from '@/components/login_confirm_modal/login_confirm_modal'; import { useModalContext } from '@/contexts/modal_context'; import ExportVoucherModal from '@/components/export_voucher_modal/export_voucher_modal'; +import AssetStatusSettingModal from '@/components/asset_status_setting_modal/asset_status_setting_modal'; interface IGlobalContext { width: number; @@ -114,6 +115,10 @@ interface IGlobalContext { isExportVoucherModalVisible: boolean; exportVoucherModalVisibilityHandler: () => void; + isAssetStatusSettingModalVisible: boolean; + assetStatusSettingModalVisibilityHandler: () => void; + assetStatusSettingModalDataHandler: (status: string) => void; + termsOfServiceConfirmModalVisibilityHandler: (visibility: boolean) => void; } @@ -209,6 +214,9 @@ export const GlobalProvider = ({ children }: IGlobalProvider) => { const [isExportVoucherModalVisible, setIsExportVoucherModalVisible] = useState(false); + const [isAssetStatusSettingModalVisible, setIsAssetStatusSettingModalVisible] = useState(false); + const [defaultStatus, setDefaultStatus] = useState(''); + const { width, height } = windowSize; const layoutAssertion = useMemo(() => { @@ -344,6 +352,14 @@ export const GlobalProvider = ({ children }: IGlobalProvider) => { setIsExportVoucherModalVisible(!isExportVoucherModalVisible); }; + const assetStatusSettingModalVisibilityHandler = () => { + setIsAssetStatusSettingModalVisible(!isAssetStatusSettingModalVisible); + }; + + const assetStatusSettingModalDataHandler = (status: string) => { + setDefaultStatus(status); + }; + useEffect(() => { if (!signedIn) return; @@ -515,6 +531,10 @@ export const GlobalProvider = ({ children }: IGlobalProvider) => { isExportVoucherModalVisible, exportVoucherModalVisibilityHandler, + isAssetStatusSettingModalVisible, + assetStatusSettingModalVisibilityHandler, + assetStatusSettingModalDataHandler, + termsOfServiceConfirmModalVisibilityHandler, }), [ @@ -575,6 +595,10 @@ export const GlobalProvider = ({ children }: IGlobalProvider) => { isExportVoucherModalVisible, exportVoucherModalVisibilityHandler, + isAssetStatusSettingModalVisible, + assetStatusSettingModalVisibilityHandler, + assetStatusSettingModalDataHandler, + termsOfServiceConfirmModalVisibilityHandler, ] ); @@ -728,6 +752,12 @@ export const GlobalProvider = ({ children }: IGlobalProvider) => { modalVisibilityHandler={exportVoucherModalVisibilityHandler} /> + + {children} ); diff --git a/src/locales/cn/asset.json b/src/locales/cn/asset.json index 3664c949..ee70f009 100644 --- a/src/locales/cn/asset.json +++ b/src/locales/cn/asset.json @@ -14,5 +14,11 @@ "STATUS_SCRAPPED": "已报废", "STATUS_MISSING": "已遗失", "STATUS_NORMAL": "使用中" + }, + "STATUS_SETTING_MODAL": { + "TITLE": "状态设定", + "SUBTITLE": "请输入资产信息", + "UPDATE_DATE": "更新日期", + "STATUS": "状态" } } diff --git a/src/locales/cn/common.json b/src/locales/cn/common.json index 6c681935..787c7a88 100644 --- a/src/locales/cn/common.json +++ b/src/locales/cn/common.json @@ -280,7 +280,8 @@ "TRANSFER": "移转", "LOADING": "加载中...", "COMPLETED": "已完成", - "DAY": "日" + "DAY": "日", + "SAVE": "保存" }, "DASHBOARD": { "PROFIT_CHANGE": "利润变化", diff --git a/src/locales/en/asset.json b/src/locales/en/asset.json index 71d4fbb0..0d5be061 100644 --- a/src/locales/en/asset.json +++ b/src/locales/en/asset.json @@ -14,5 +14,11 @@ "STATUS_SCRAPPED": "Scrapped", "STATUS_MISSING": "Missing", "STATUS_NORMAL": "Normal" + }, + "STATUS_SETTING_MODAL": { + "TITLE": "Status Setting", + "SUBTITLE": "Please enter the information of asset", + "UPDATE_DATE": "Update Date", + "STATUS": "Status" } } diff --git a/src/locales/en/common.json b/src/locales/en/common.json index 274c274c..49d080eb 100644 --- a/src/locales/en/common.json +++ b/src/locales/en/common.json @@ -280,7 +280,8 @@ "TRANSFER": "Transfer", "LOADING": "Loading...", "COMPLETED": "Completed", - "DAY": "Day" + "DAY": "Day", + "SAVE": "Save" }, "DASHBOARD": { "PROFIT_CHANGE": "Profit Change", diff --git a/src/locales/tw/asset.json b/src/locales/tw/asset.json index bfd9d02b..a3cf4acc 100644 --- a/src/locales/tw/asset.json +++ b/src/locales/tw/asset.json @@ -14,5 +14,11 @@ "STATUS_SCRAPPED": "已報廢", "STATUS_MISSING": "已遺失", "STATUS_NORMAL": "使用中" + }, + "STATUS_SETTING_MODAL": { + "TITLE": "狀態設定", + "SUBTITLE": "請輸入資產資訊", + "UPDATE_DATE": "更新日期", + "STATUS": "狀態" } } diff --git a/src/locales/tw/common.json b/src/locales/tw/common.json index 5964ad75..8228037e 100644 --- a/src/locales/tw/common.json +++ b/src/locales/tw/common.json @@ -280,7 +280,8 @@ "TRANSFER": "移轉", "LOADING": "載入中...", "COMPLETED": "已完成", - "DAY": "日" + "DAY": "日", + "SAVE": "保存" }, "DASHBOARD": { "PROFIT_CHANGE": "利潤變化",