From 16337fde7a1dc97da123764529274f589049b31a Mon Sep 17 00:00:00 2001 From: Manasvi Agrawal Date: Mon, 19 May 2025 10:54:19 +0530 Subject: [PATCH] add due date picker for loc --- .../locui-create/components/dateTimePicker.js | 22 +++++++++++++++++ libs/blocks/locui-create/input-urls/index.js | 19 +++++++++++++-- libs/blocks/locui-create/input-urls/view.js | 24 +++++++++++++++++++ libs/blocks/locui-create/locui-create.css | 12 ++++++++++ libs/blocks/locui-create/utils/utils.js | 1 + 5 files changed, 76 insertions(+), 2 deletions(-) create mode 100644 libs/blocks/locui-create/components/dateTimePicker.js diff --git a/libs/blocks/locui-create/components/dateTimePicker.js b/libs/blocks/locui-create/components/dateTimePicker.js new file mode 100644 index 0000000000..b850b7354a --- /dev/null +++ b/libs/blocks/locui-create/components/dateTimePicker.js @@ -0,0 +1,22 @@ +import { html } from '../../../deps/htm-preact.js'; + +export default function DateTimePicker({ value, onInput, error }) { + const nowGMT = new Date().toISOString().slice(0, 16); + return html` +
+ + + (All times are in GMT timezone.) + + ${error && html`
${error}
`} +
+ `; +} diff --git a/libs/blocks/locui-create/input-urls/index.js b/libs/blocks/locui-create/input-urls/index.js index 43e0312f8e..35fefbe1a7 100644 --- a/libs/blocks/locui-create/input-urls/index.js +++ b/libs/blocks/locui-create/input-urls/index.js @@ -45,8 +45,9 @@ export function validateForm({ fragmentsEnabled, fragments, noOfValidFrag, + dueDate, }) { - const errors = { name: '', editBehavior: '', urlsStr: '', fragments: '' }; + const errors = { name: '', editBehavior: '', urlsStr: '', fragments: '', dueDate: '' }; if (name === '') { errors.name = 'Project name is required'; } @@ -62,12 +63,15 @@ export function validateForm({ if (fragmentsEnabled && noOfValidFrag > 0 && fragments.length === 0) { errors.fragments = 'Select atleast one fragment to proceed further'; } + if (new Date(`${dueDate}Z`) < new Date()) { + errors.dueDate = 'Please select a future date and time'; + } return errors; } export function checkForErrors(errors) { return ( - errors.name || errors.editBehavior || errors.urlsStr || errors.fragments + errors.name || errors.editBehavior || errors.urlsStr || errors.fragments || errors.dueDate ); } @@ -104,3 +108,14 @@ export function getInitialName(type) { const formattedDate = date.replace(/[-:]/g, '').replace(/T/g, '-'); return `${prefix}-${formattedDate}`; } + +export function formatDateTime(dueDate) { + const date = new Date(dueDate); + const year = date.getFullYear(); + const month = String(date.getMonth() + 1).padStart(2, '0'); + const day = String(date.getDate()).padStart(2, '0'); + const hours = String(date.getHours()).padStart(2, '0'); + const minutes = String(date.getMinutes()).padStart(2, '0'); + const seconds = String(date.getSeconds()).padStart(2, '0'); + return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; +} diff --git a/libs/blocks/locui-create/input-urls/view.js b/libs/blocks/locui-create/input-urls/view.js index f5b16679b7..4f00953aa1 100644 --- a/libs/blocks/locui-create/input-urls/view.js +++ b/libs/blocks/locui-create/input-urls/view.js @@ -25,14 +25,17 @@ import { findFragments, validateFragments, getInitialName, + formatDateTime, } from './index.js'; import { getUrls } from '../../locui/loc/index.js'; import { PROJECT_TYPES, PROJECT_TYPE_LABELS, URL_SEPARATOR_PATTERN, WORKFLOW } from '../utils/constant.js'; import Toast from '../components/toast.js'; +import DateTimePicker from '../components/dateTimePicker.js'; export default function InputUrls() { const [type, setType] = useState(PROJECT_TYPES.translation); const [name, setName] = useState(getInitialName(type)); + const [dueDate, setDueDate] = useState(''); const [htmlFlow, setHtmlFlow] = useState(true); const [editBehavior, setEditBehavior] = useState(''); const [urlsStr, setUrlsStr] = useState(''); @@ -46,6 +49,7 @@ export default function InputUrls() { editBehavior: '', urlsStr: '', fragments: '', + dueDate: '', }); const [apiError, setApiError] = useState(''); @@ -112,6 +116,11 @@ export default function InputUrls() { } } + function handleDueDateChange(ev) { + setDueDate(ev.target.value); + setErrors({ ...errors, dueDate: '' }); + } + const handleFragmentsChange = useCallback( (_fragments) => { setFragments(_fragments); @@ -137,6 +146,7 @@ export default function InputUrls() { fragmentsEnabled, fragments, noOfValidFrag, + dueDate, }); setErrors(formErrors); if (checkForErrors(formErrors)) { @@ -150,6 +160,7 @@ export default function InputUrls() { editBehavior: type === PROJECT_TYPES.rollout ? editBehavior : '', urls: urlsStr.split(/,|\n/), fragments, + dueDate: type === PROJECT_TYPES.translation ? formatDateTime(dueDate) : '', }); let error = ''; if (!projectCreated.value) { @@ -173,6 +184,7 @@ export default function InputUrls() { setUrlsStr(project.value?.urls?.join('\n')); setFragmentsEnabled(project.value?.fragments?.length > 0); setFragments(project.value?.fragments ?? []); + setDueDate(project.value?.dueDate ?? ''); if ( project.value?.fragments?.length > 0 && project.value?.urls.length > 0 @@ -239,6 +251,18 @@ export default function InputUrls() { + ${type === PROJECT_TYPES.translation + && html` +
+
Due Date
+ <${DateTimePicker} + value=${dueDate} + onInput=${handleDueDateChange} + error=${errors.dueDate} + /> +
+ `} + ${type === PROJECT_TYPES.translation && html`
diff --git a/libs/blocks/locui-create/locui-create.css b/libs/blocks/locui-create/locui-create.css index 08901f4859..68244d917a 100644 --- a/libs/blocks/locui-create/locui-create.css +++ b/libs/blocks/locui-create/locui-create.css @@ -944,3 +944,15 @@ div.locui-create .nav-label { width: 70px; } +.locui-date-picker-container > span { + padding-left: 10px; +} + +.locui-date-picker-container > input { + min-width: 212px; + padding: 4px 8px; + font-size: 14px; + border: 2px solid #c6c6c6; + border-radius: 8px; + outline: none; +} diff --git a/libs/blocks/locui-create/utils/utils.js b/libs/blocks/locui-create/utils/utils.js index 768876558b..ffef1f2039 100644 --- a/libs/blocks/locui-create/utils/utils.js +++ b/libs/blocks/locui-create/utils/utils.js @@ -52,6 +52,7 @@ export const createPayload = (project) => { env: env.value, regionalEditBehaviour: project.value.editBehavior, useHtmlFlow: project.value.htmlFlow, + dueDate: project.value.dueDate, }, }; };