pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-03-31 15:06:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use standard component

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

111
src/components/CreateSiteProvisioningKeyCredenza.tsx
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,27 +265,92 @@ export default function CreateSiteProvisioningKeyCredenza({
<FormField <FormField
control={form.control} control={form.control}
name="validUntil" name="validUntil"
render={({ field }) => ( render={({ field }) => {
<FormItem> const dateTimeValue: DateTimeValue =
<FormLabel> (() => {
{t( if (!field.value) return {};
"provisioningKeysValidUntil" const d = new Date(
)} field.value
</FormLabel> );
<FormControl> if (isNaN(d.getTime()))
<Input return {};
type="datetime-local" const hours = d
{...field} .getHours()
/> .toString()
</FormControl> .padStart(2, "0");
<FormDescription> const minutes = d
{t( .getMinutes()
"provisioningKeysValidUntilHint" .toString()
)} .padStart(2, "0");
</FormDescription> const seconds = d
<FormMessage /> .getSeconds()
</FormItem> .toString()
)} .padStart(2, "0");
return {
date: d,
time: `${hours}:${minutes}:${seconds}`
};
})();
return (
<FormItem>
<FormLabel>
{t(
"provisioningKeysValidUntil"
)}
</FormLabel>
<FormControl>
<DateTimePicker
value={dateTimeValue}
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>
<FormDescription>
{t(
"provisioningKeysValidUntilHint"
)}
</FormDescription>
<FormMessage />
</FormItem>
);
}}
/> />
</form> </form>
</Form> </Form>

93
src/components/EditSiteProvisioningKeyCredenza.tsx
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,23 +258,73 @@ export default function EditSiteProvisioningKeyCredenza({
<FormField <FormField
control={form.control} control={form.control}
name="validUntil" name="validUntil"
render={({ field }) => ( render={({ field }) => {
<FormItem> const dateTimeValue: DateTimeValue =
<FormLabel> (() => {
{t("provisioningKeysValidUntil")} if (!field.value) return {};
</FormLabel> const d = new Date(field.value);
<FormControl> if (isNaN(d.getTime())) return {};
<Input const hours = d
type="datetime-local" .getHours()
{...field} .toString()
/> .padStart(2, "0");
</FormControl> const minutes = d
<FormDescription> .getMinutes()
{t("provisioningKeysValidUntilHint")} .toString()
</FormDescription> .padStart(2, "0");
<FormMessage /> const seconds = d
</FormItem> .getSeconds()
)} .toString()
.padStart(2, "0");
return {
date: d,
time: `${hours}:${minutes}:${seconds}`
};
})();
return (
<FormItem>
<FormLabel>
{t("provisioningKeysValidUntil")}
</FormLabel>
<FormControl>
<DateTimePicker
value={dateTimeValue}
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>
<FormDescription>
{t("provisioningKeysValidUntilHint")}
</FormDescription>
<FormMessage />
</FormItem>
);
}}
/> />
</form> </form>
</Form> </Form>