add new columns

papermerge/core/alembic/README

@@ -12,3 +12,10 @@ Run migration:
  ```
  $ alembic upgrade head
  ```
+
+
+Create a migration:
+
+```
+$ alembic revision -m "add value_yearmonth column to custom_field_values"
+```

papermerge/core/alembic/versions/cea868700f4e_add_value_yearmonth_and_value_year_.py

@@ -0,0 +1,29 @@
+"""add value_yearmonth and value_year columns to custom_field_values
+
+Revision ID: cea868700f4e
+Revises: 85fda75f19f1
+Create Date: 2024-11-27 07:30:19.631965
+
+"""
+
+from typing import Sequence, Union
+
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision: str = "cea868700f4e"
+down_revision: Union[str, None] = "85fda75f19f1"
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    op.add_column(
+        "custom_field_values", sa.Column("value_yearmonth", sa.Float(), nullable=True)
+    )
+
+
+def downgrade() -> None:
+    op.drop_column("custom_field_values", "value_yearmonth")

ui2/src/cconstants.ts

@@ -58,7 +58,9 @@ export const CUSTOM_FIELD_DATA_TYPES: Array<CustomFieldDataType> = [
   "boolean",
   "int",
   "float",
-  "monetary"
+  "monetary",
+  "yearmonth",
+  "year"
 ]
 
 export const CURRENCIES = [

ui2/src/features/document/components/DocumentDetails/CustomFields.tsx

@@ -5,7 +5,8 @@ import PanelContext from "@/contexts/PanelContext"
 import {useGetDocumentQuery} from "@/features/document/apiSlice"
 import {
   CustomFieldDate,
-  CustomFieldMonetary
+  CustomFieldMonetary,
+  CustomFieldYearMonth
 } from "@/features/document/components/customFields"
 import {skipToken} from "@reduxjs/toolkit/query"
 
@@ -246,6 +247,12 @@ function GenericCustomField({
     return <CustomFieldBoolean customField={customField} onChange={onChange} />
   }
 
+  if (customField.type == "yearmonth") {
+    return (
+      <CustomFieldYearMonth customField={customField} onChange={onChange} />
+    )
+  }
+
   return (
     <TextInput
       label={customField.name}

ui2/src/features/document/components/customFields/Monetary.tsx

@@ -35,7 +35,7 @@ export default function CustomFieldMonetary({
   onChange
 }: CustomFieldArgs) {
   const [value, setValue] = useState<string | number>(
-    customField.value.toString()
+    customField.value ? customField.value.toString() : ""
   )
   const currency = getCurrency(customField.extra_data)
 
@@ -45,7 +45,7 @@ export default function CustomFieldMonetary({
   }
 
   useEffect(() => {
-    setValue(customField.value.toString())
+    setValue(customField.value ? customField.value.toString() : "")
   }, [customField.value])
 
   return (

ui2/src/features/document/components/customFields/YearMonth.tsx

@@ -0,0 +1,57 @@
+import {rem} from "@mantine/core"
+import {DateValue, MonthPickerInput} from "@mantine/dates"
+import {IconCalendar} from "@tabler/icons-react"
+import dayjs from "dayjs"
+import {useEffect, useState} from "react"
+import {CustomFieldArgs} from "./types"
+
+export default function CustomFieldYearMonth({
+  customField,
+  onChange
+}: CustomFieldArgs) {
+  const [value, setValue] = useState<Date | null>(null)
+  const icon = (
+    <IconCalendar style={{width: rem(18), height: rem(18)}} stroke={1.5} />
+  )
+
+  useEffect(() => {
+    if (customField.value && customField.value.toString().length > 0) {
+      const parts = customField.value.toString().split("-")
+      if (parts.length < 2) {
+        setValue(null)
+      } else {
+        const year = Number(parts[0])
+        const month = Number(parts[1]) - 1
+
+        const date = new Date(year, month, 1)
+        setValue(date)
+      }
+    }
+  }, [customField.value])
+
+  const onLocalChange = (value: DateValue) => {
+    if (value) {
+      const d = dayjs(value)
+      const DATE_FORMAT = "YYYY-MM"
+      const strValue = d.format(DATE_FORMAT)
+      onChange({customField, value: strValue})
+    } else {
+      onChange({customField, value: ""})
+    }
+    setValue(value)
+  }
+
+  return (
+    <MonthPickerInput
+      leftSection={icon}
+      leftSectionPointerEvents="none"
+      clearable
+      // `valueFormat` will be retrieved from user preferences
+      valueFormat="YYYY.MM"
+      label={customField.name}
+      placeholder="Pick date"
+      value={value}
+      onChange={onLocalChange}
+    />
+  )
+}

ui2/src/features/document/components/customFields/index.tsx

@@ -1,4 +1,5 @@
 import CustomFieldDate from "./Date"
 import CustomFieldMonetary from "./Monetary"
+import CustomFieldYearMonth from "./YearMonth"
 
-export {CustomFieldDate, CustomFieldMonetary}
+export {CustomFieldDate, CustomFieldMonetary, CustomFieldYearMonth}

ui2/src/types.ts

@@ -216,6 +216,8 @@ export type CustomFieldDataType =
   | "int"
   | "float"
   | "monetary"
+  | "yearmonth"
+  | "year"
 
 export type NewCustomField = {
   name: string