Use standard component

This commit is contained in:
Owen
2026-03-26 21:36:51 -07:00
parent 19a686b3e4
commit e05af54f76
2 changed files with 162 additions and 42 deletions

View File

@@ -36,6 +36,10 @@ import { useForm } from "react-hook-form";
import { z } from "zod"; import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import CopyTextBox from "@app/components/CopyTextBox"; import CopyTextBox from "@app/components/CopyTextBox";
import {
DateTimePicker,
DateTimeValue
} from "@app/components/DateTimePicker";
const FORM_ID = "create-site-provisioning-key-form"; const FORM_ID = "create-site-provisioning-key-form";
@@ -261,7 +265,34 @@ export default function CreateSiteProvisioningKeyCredenza({
<FormField <FormField
control={form.control} control={form.control}
name="validUntil" name="validUntil"
render={({ field }) => ( render={({ field }) => {
const dateTimeValue: DateTimeValue =
(() => {
if (!field.value) return {};
const d = new Date(
field.value
);
if (isNaN(d.getTime()))
return {};
const hours = d
.getHours()
.toString()
.padStart(2, "0");
const minutes = d
.getMinutes()
.toString()
.padStart(2, "0");
const seconds = d
.getSeconds()
.toString()
.padStart(2, "0");
return {
date: d,
time: `${hours}:${minutes}:${seconds}`
};
})();
return (
<FormItem> <FormItem>
<FormLabel> <FormLabel>
{t( {t(
@@ -269,9 +300,46 @@ export default function CreateSiteProvisioningKeyCredenza({
)} )}
</FormLabel> </FormLabel>
<FormControl> <FormControl>
<Input <DateTimePicker
type="datetime-local" value={dateTimeValue}
{...field} onChange={(value) => {
if (!value.date) {
field.onChange(
""
);
return;
}
const d = new Date(
value.date
);
if (value.time) {
const [
h,
m,
s
] =
value.time.split(
":"
);
d.setHours(
parseInt(
h,
10
),
parseInt(
m,
10
),
parseInt(
s || "0",
10
)
);
}
field.onChange(
d.toISOString()
);
}}
/> />
</FormControl> </FormControl>
<FormDescription> <FormDescription>
@@ -281,7 +349,8 @@ export default function CreateSiteProvisioningKeyCredenza({
</FormDescription> </FormDescription>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} );
}}
/> />
</form> </form>
</Form> </Form>

View File

@@ -33,7 +33,10 @@ import { useEffect, useState } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { z } from "zod"; import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import moment from "moment"; import {
DateTimePicker,
DateTimeValue
} from "@app/components/DateTimePicker";
const FORM_ID = "edit-site-provisioning-key-form"; const FORM_ID = "edit-site-provisioning-key-form";
@@ -109,9 +112,7 @@ export default function EditSiteProvisioningKeyCredenza({
name: provisioningKey.name, name: provisioningKey.name,
unlimitedBatchSize: provisioningKey.maxBatchSize == null, unlimitedBatchSize: provisioningKey.maxBatchSize == null,
maxBatchSize: provisioningKey.maxBatchSize ?? 100, maxBatchSize: provisioningKey.maxBatchSize ?? 100,
validUntil: provisioningKey.validUntil validUntil: provisioningKey.validUntil ?? ""
? moment(provisioningKey.validUntil).format("YYYY-MM-DDTHH:mm")
: ""
}); });
}, [open, provisioningKey, form]); }, [open, provisioningKey, form]);
@@ -257,15 +258,64 @@ export default function EditSiteProvisioningKeyCredenza({
<FormField <FormField
control={form.control} control={form.control}
name="validUntil" name="validUntil"
render={({ field }) => ( render={({ field }) => {
const dateTimeValue: DateTimeValue =
(() => {
if (!field.value) return {};
const d = new Date(field.value);
if (isNaN(d.getTime())) return {};
const hours = d
.getHours()
.toString()
.padStart(2, "0");
const minutes = d
.getMinutes()
.toString()
.padStart(2, "0");
const seconds = d
.getSeconds()
.toString()
.padStart(2, "0");
return {
date: d,
time: `${hours}:${minutes}:${seconds}`
};
})();
return (
<FormItem> <FormItem>
<FormLabel> <FormLabel>
{t("provisioningKeysValidUntil")} {t("provisioningKeysValidUntil")}
</FormLabel> </FormLabel>
<FormControl> <FormControl>
<Input <DateTimePicker
type="datetime-local" value={dateTimeValue}
{...field} onChange={(value) => {
if (!value.date) {
field.onChange("");
return;
}
const d = new Date(
value.date
);
if (value.time) {
const [h, m, s] =
value.time.split(
":"
);
d.setHours(
parseInt(h, 10),
parseInt(m, 10),
parseInt(
s || "0",
10
)
);
}
field.onChange(
d.toISOString()
);
}}
/> />
</FormControl> </FormControl>
<FormDescription> <FormDescription>
@@ -273,7 +323,8 @@ export default function EditSiteProvisioningKeyCredenza({
</FormDescription> </FormDescription>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} );
}}
/> />
</form> </form>
</Form> </Form>