Add LifetimeWithExpirationDate component

src/component-library/Pages/Rule/DIDSummaryTable.stories.tsx

@@ -1,3 +1,5 @@
+import { AccountStatus, AccountType, DIDType } from "@/lib/core/entity/rucio";
+import { ListDIDsViewModel } from "@/lib/infrastructure/data/view-model/list-did";
 import { Meta, StoryFn } from "@storybook/react";
 import { DIDSummaryTable } from "./DIDSummaryTable";
 
@@ -12,22 +14,26 @@ export const DIDSummaryTableStory = template.bind({});
 
 DIDSummaryTableStory.args = {
     numSamples: 1,
-    tabledata: [
+    takeSamples: false,
+    accountInfo: {
+        account: "test",
+        accountType: AccountType.USER,
+        accountStatus: AccountStatus.ACTIVE,
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        email: "",
+    },
+    numcopies: 1,
+    userAskedForApproval: false,
+    listDIDViewModels: [
         {
-            name: "user.jdoe:file1",
-            size: 100,
-            requestedSize: 100,
-            copies: 2,
-            tags: [
-                {
-                    status: "success",
-                    text: "Available"
-                },
-                {
-                    status: "warning",
-                    text: "Open"
-                }
-            ]
-        },
+            "status": "success",
+            "scope": "test",
+            "name": "test",
+            "did_type": DIDType.DATASET,
+            "bytes": 123123123123,
+            "length": 4,
+            "open": false,
+        } as ListDIDsViewModel
     ]
 }

src/component-library/Pages/Rule/LifetimeWithExpirationDateInput.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { LifetimeWithExpirationDateInput } from "./LifetimeWithExpiryDateInput";
+
+export default {
+    "title": "Components/Pages/Rule/Components",
+    component: LifetimeWithExpirationDateInput,
+} as Meta<typeof LifetimeWithExpirationDateInput>;
+
+const Template: StoryFn<typeof LifetimeWithExpirationDateInput> = (args) => <LifetimeWithExpirationDateInput {...args} />;
+
+export const LifeTimeWithExpirationDateInputStory = Template.bind({});
+
+LifeTimeWithExpirationDateInputStory.args = {
+    onChange: (date, lifetime) => {console.log(date, lifetime)},
+    initialdate: new Date(),
+    disabled: false,
+    placeholder: "Select a date",
+}

src/component-library/Pages/Rule/LifetimeWithExpiryDateInput.tsx

@@ -0,0 +1,84 @@
+import { DateInput } from "@/component-library/Input/DateInput"
+import { NumInput } from "@/component-library/Input/NumInput"
+import { type } from "@testing-library/user-event/dist/types/utility"
+import { useState } from "react"
+import { twMerge } from "tailwind-merge"
+
+type LifetimeWithExpirationDateInputProps = {
+    onChange(date: Date, lifetime: number): void, // communicate back to parent
+    initialdate?: Date, // the current value, set by the parent
+    disabled?: boolean,
+    placeholder?: string,
+}
+export const LifetimeWithExpirationDateInput: React.FC<LifetimeWithExpirationDateInputProps> = (
+    {
+        onChange,
+        initialdate,
+        disabled = false,
+        placeholder = "Select a date",
+    }: LifetimeWithExpirationDateInputProps) => {
+    const calculateLifetimeInDays = (date: Date) => {
+        const currentDate = new Date()
+        const diffInTime = date.getTime() - currentDate.getTime()
+        const diffInDays = diffInTime / (1000 * 3600 * 24)
+        return Math.ceil(diffInDays)
+    }
+    const calculateDateFromLifetime = (lifetime: number) => {
+        const currentDate = new Date()
+        const newDate = new Date(currentDate.getTime() + lifetime * 24 * 60 * 60 * 1000)
+        return newDate
+    }
+    const [lifetimeInDays, setLifetimeInDays] = useState<number>(() => {
+        if (initialdate) {
+            return calculateLifetimeInDays(initialdate)
+        }
+        return 0
+    })
+    const [date, setDate] = useState<Date | undefined>(initialdate)
+    const onDateChange = (date: Date) => {
+        console.log(date)
+        const newLifetime = calculateLifetimeInDays(date)
+        setLifetimeInDays(newLifetime)
+    }
+    return (
+        <div className={twMerge(
+            "p-2 space-y-4",
+            "rounded-md border",
+            "dark:border-2",
+            "bg-white dark:bg-gray-800"
+        )}
+        >
+            <div className="flex flex-col space-y-2">
+                <span className="text-xl dark:text-white">Lifetime (days)</span>
+                <NumInput
+                    value={lifetimeInDays}
+                    onChange={(event) => {
+                        const value = event.target.value
+                        if(value === undefined || value === null) {
+                            return
+                        }
+                        if(value === "") {
+                            setLifetimeInDays(0)
+                            setDate(new Date())
+                            return
+                        }
+                        if(typeof value === "string") {
+                            try {
+                                const intValue = parseInt(value)
+                                setLifetimeInDays(intValue)
+                                const newDate = calculateDateFromLifetime(parseInt(value))
+                                setDate(newDate)
+                            } catch (error) {
+                                console.error(error)
+                            }
+                        }
+                    }}
+                />
+            </div>
+            <div className="flex flex-col space-y-2">
+                <span className="text-xl dark:text-white">Expiry Date</span>
+                <DateInput onchange={onDateChange} initialdate={date} disabled={disabled} placeholder={placeholder} />
+            </div>
+        </div>
+    )
+}