@stoker-platform/web-app 0.5.27 → 0.5.29

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @stoker-platform/web-app
 
+## 0.5.29
+
+### Patch Changes
+
+- feat: skip file permissions selection when no optional permissions present
+
+## 0.5.28
+
+### Patch Changes
+
+- feat: add month picker
+    - @stoker-platform/node-client@0.5.19
+    - @stoker-platform/utils@0.5.13
+    - @stoker-platform/web-client@0.5.14
+
 ## 0.5.27
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stoker-platform/web-app",
-    "version": "0.5.27",
+    "version": "0.5.29",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE.md",
     "scripts": {
@@ -51,9 +51,9 @@
         "@radix-ui/react-tooltip": "^1.2.8",
         "@react-google-maps/api": "^2.20.8",
         "@sentry/react": "^10.38.0",
-        "@stoker-platform/node-client": "0.5.18",
-        "@stoker-platform/utils": "0.5.12",
-        "@stoker-platform/web-client": "0.5.13",
+        "@stoker-platform/node-client": "0.5.19",
+        "@stoker-platform/utils": "0.5.13",
+        "@stoker-platform/web-client": "0.5.14",
         "@tanstack/react-table": "^8.21.3",
         "@types/react": "18.3.13",
         "@types/react-dom": "18.3.1",

package/src/Form.tsx

@@ -158,6 +158,7 @@ import Collection from "./Collection"
 import { Separator } from "./components/ui/separator"
 import { SearchResult } from "minisearch"
 import { sortList } from "./utils/sortList"
+import MonthPicker from "./components/ui/month-picker"
 
 interface FormLabelWithIconProps {
     collection: CollectionSchema
@@ -286,6 +287,7 @@ const RecordFormField = (props: FieldProps) => {
     const [isTextarea, setIsTextarea] = useState(false)
     const [isSwitch, setIsSwitch] = useState(false)
     const [isTime, setIsTime] = useState(false)
+    const [isMonth, setIsMonth] = useState(false)
     const [isSlider, setIsSlider] = useState(false)
     const [isRichText, setIsRichText] = useState(false)
     const [isLocation, setIsLocation] = useState<LocationFieldAdmin | undefined>(undefined)
@@ -306,6 +308,7 @@ const RecordFormField = (props: FieldProps) => {
                 textarea,
                 isSwitch,
                 isTime,
+                isMonth,
                 isSlider,
                 isRichText,
                 image,
@@ -320,6 +323,7 @@ const RecordFormField = (props: FieldProps) => {
                 tryPromise(admin?.textarea),
                 tryPromise(admin?.switch),
                 tryPromise(admin?.time),
+                tryPromise(admin?.month),
                 tryPromise(admin?.slider),
                 tryPromise(admin?.richText),
                 tryPromise(admin?.image),
@@ -336,6 +340,7 @@ const RecordFormField = (props: FieldProps) => {
             setIsTextarea(!!textarea)
             setIsSwitch(!!isSwitch)
             setIsTime(!!isTime)
+            setIsMonth(!!isMonth)
             setIsSlider(!!isSlider)
             setIsRichText(!!isRichText)
             setIsImage(!!image)
@@ -462,6 +467,7 @@ const RecordFormField = (props: FieldProps) => {
                     description={description}
                     isDisabled={isDisabled}
                     isTime={isTime}
+                    isMonth={isMonth}
                     icon={icon}
                 />
             )
@@ -1139,8 +1145,9 @@ function TimestampField({
     form,
     isDisabled,
     isTime,
+    isMonth,
     icon,
-}: FieldProps & { isTime?: boolean }) {
+}: FieldProps & { isTime?: boolean; isMonth?: boolean }) {
     const [open, setOpen] = useState(false)
     const globalConfig = getGlobalConfigModule()
     const timezone = getTimezone()
@@ -1163,7 +1170,39 @@ function TimestampField({
                 const currentValue = formField.value
                     ? DateTime.fromJSDate(formField.value.toDate()).setZone(timezone)
                     : undefined
-                if (isTime) {
+                if (isMonth) {
+                    return (
+                        <FormItem>
+                            <FormLabelWithIcon
+                                collection={collection}
+                                label={label}
+                                field={field}
+                                operation={operation}
+                                icon={icon}
+                                form={form}
+                            />
+                            <FormControl>
+                                <div className="flex w-fit flex-col gap-2 rounded-md border border-input">
+                                    <MonthPicker
+                                        currentMonth={
+                                            currentValue
+                                                ? keepTimezone(currentValue.toJSDate(), timezone)
+                                                : keepTimezone(new Date(), timezone)
+                                        }
+                                        onMonthChange={(date: Date | undefined) => {
+                                            if (!date) return
+                                            const newDate = DateTime.fromJSDate(date).setZone(timezone)
+                                            formField.onChange(Timestamp.fromDate(newDate.toJSDate()))
+                                        }}
+                                        disabled={isDisabled}
+                                    />
+                                </div>
+                            </FormControl>
+                            {description && <FormDescription>{description}</FormDescription>}
+                            <FormMessage className="bg-destructive p-4 rounded-md text-background dark:text-primary" />
+                        </FormItem>
+                    )
+                } else if (isTime) {
                     // Use HH:mm for broad browser compatibility (iOS Safari returns HH:mm)
                     const timeString = currentValue?.toFormat("HH:mm") || "00:00"
 
@@ -2283,6 +2322,36 @@ function RecordForm({
         [collectionPath, record, path],
     )
 
+    const getUserRoleAssignment = useCallback(() => {
+        const userRole = permissions?.Role
+        if (!userRole) return null
+        // eslint-disable-next-line security/detect-object-injection
+        const assignment = collection.access?.files?.assignment?.[userRole]
+        return assignment || null
+    }, [collection, permissions])
+
+    const shouldSkipPermissionsDialog = useCallback(() => {
+        const assignment = getUserRoleAssignment()
+        if (!assignment) return false
+        const optional = assignment.optional || {}
+        const hasOptional = Boolean(
+            (optional.read && optional.read.length) ||
+            (optional.update && optional.update.length) ||
+            (optional.delete && optional.delete.length),
+        )
+        return !hasOptional
+    }, [getUserRoleAssignment])
+
+    const getDefaultPermissions = useCallback((): FilePermissions => {
+        const assignment = getUserRoleAssignment()
+        const required = assignment?.required || {}
+        return {
+            read: (required.read || []).join(","),
+            update: (required.update || []).join(","),
+            delete: (required.delete || []).join(","),
+        }
+    }, [getUserRoleAssignment])
+
     const uploadFilesToRecord = useCallback(
         async (targetId: string, files: File[] | FileList, permissions: FilePermissions, customFilename?: string) => {
             if (!files || !currentUser) return
@@ -2368,56 +2437,6 @@ function RecordForm({
         [computeBasePath, currentUser, path, record],
     )
 
-    const enqueueImageForCreate = useCallback((fieldName: string, file: File) => {
-        setPermissionsContext("image-create")
-        setPendingImageFieldName(fieldName)
-        setPendingUploadFile(file)
-        setPendingUploadField(fieldName)
-        setEditingFilename(file.name)
-        setIsMultipleFileUpload(false)
-        setShowPermissionsDialog(true)
-    }, [])
-
-    const uploadImageForUpdate = useCallback(async (fieldName: string, file: File) => {
-        return await new Promise<void>((resolve) => {
-            setPermissionsContext("image-update")
-            setPendingImageForUpdate({ fieldName, file })
-            setEditingFilename(file.name)
-            setIsMultipleFileUpload(false)
-            setShowPermissionsDialog(true)
-            setImageUpdateResolver(() => resolve)
-        })
-    }, [])
-
-    const handleFormFileUpload = useCallback(async (event: React.ChangeEvent<HTMLInputElement>) => {
-        const files = event.target.files
-        if (!files) return
-        if (files.length === 1) {
-            const file = files[0]
-            setPendingUploadFile(file)
-            setPendingUploadField(null)
-            setEditingFilename(file.name)
-            setIsMultipleFileUpload(false)
-            setShowFilenameDialog(true)
-        } else {
-            setPendingUploadFiles(Array.from(files))
-            setIsMultipleFileUpload(true)
-            setShowPermissionsDialog(true)
-        }
-        event.target.value = ""
-    }, [])
-
-    const handleConfirmFilename = useCallback(() => {
-        if (!pendingUploadFile) return
-        const trimmed = editingFilename.trim()
-        const validationError = validateStorageName(trimmed)
-        if (validationError) {
-            toast({ title: "Invalid file name", description: validationError, variant: "destructive" })
-            return
-        }
-        setShowPermissionsDialog(true)
-    }, [pendingUploadFile, editingFilename])
-
     const handlePermissionsConfirm = useCallback(
         async (selectedPermissions: FilePermissions) => {
             if (permissionsContext === "files") {
@@ -2581,6 +2600,91 @@ function RecordForm({
         ],
     )
 
+    const enqueueImageForCreate = useCallback(
+        (fieldName: string, file: File) => {
+            if (shouldSkipPermissionsDialog()) {
+                setQueuedImageUploads((prev) => ({
+                    ...prev,
+                    [fieldName]: { file, permissions: getDefaultPermissions() },
+                }))
+            } else {
+                setPermissionsContext("image-create")
+                setPendingImageFieldName(fieldName)
+                setPendingUploadFile(file)
+                setEditingFilename(file.name)
+                setIsMultipleFileUpload(false)
+                setShowPermissionsDialog(true)
+            }
+        },
+        [shouldSkipPermissionsDialog, getDefaultPermissions],
+    )
+
+    const uploadImageForUpdate = useCallback(
+        async (fieldName: string, file: File) => {
+            return await new Promise<void>((resolve) => {
+                setPermissionsContext("image-update")
+                setPendingImageForUpdate({ fieldName, file })
+                setEditingFilename(file.name)
+                setIsMultipleFileUpload(false)
+                setImageUpdateResolver(() => resolve)
+                if (shouldSkipPermissionsDialog()) {
+                    setTimeout(() => handlePermissionsConfirm(getDefaultPermissions()), 0)
+                } else {
+                    setShowPermissionsDialog(true)
+                }
+            })
+        },
+        [shouldSkipPermissionsDialog, getDefaultPermissions, handlePermissionsConfirm],
+    )
+
+    const handleFormFileUpload = useCallback(
+        async (event: React.ChangeEvent<HTMLInputElement>) => {
+            const files = event.target.files
+            if (!files) return
+            if (files.length === 1) {
+                const file = files[0]
+                setPendingUploadFile(file)
+                setPendingUploadField(null)
+                setEditingFilename(file.name)
+                setIsMultipleFileUpload(false)
+                setShowFilenameDialog(true)
+            } else {
+                const fileList = Array.from(files)
+                if (shouldSkipPermissionsDialog()) {
+                    setQueuedUploads((prev) => [...prev, { files: fileList, permissions: getDefaultPermissions() }])
+                } else {
+                    setPendingUploadFiles(fileList)
+                    setIsMultipleFileUpload(true)
+                    setShowPermissionsDialog(true)
+                }
+            }
+            event.target.value = ""
+        },
+        [shouldSkipPermissionsDialog, getDefaultPermissions],
+    )
+
+    const handleConfirmFilename = useCallback(() => {
+        if (!pendingUploadFile) return
+        const trimmed = editingFilename.trim()
+        const validationError = validateStorageName(trimmed)
+        if (validationError) {
+            toast({ title: "Invalid file name", description: validationError, variant: "destructive" })
+            return
+        }
+        if (shouldSkipPermissionsDialog()) {
+            setQueuedUploads((prev) => [
+                ...prev,
+                { files: [pendingUploadFile], permissions: getDefaultPermissions(), customFilename: trimmed },
+            ])
+            setShowFilenameDialog(false)
+            setPendingUploadFile(null)
+            setPendingUploadField(null)
+            setEditingFilename("")
+        } else {
+            setShowPermissionsDialog(true)
+        }
+    }, [pendingUploadFile, editingFilename, shouldSkipPermissionsDialog, getDefaultPermissions])
+
     const handlePermissionsCancel = useCallback(() => {
         if (permissionsContext === "image-create" && pendingImageFieldName) {
             setTimeout(() => {

package/src/utils/getFormattedFieldValue.tsx

@@ -79,7 +79,7 @@ export const getFormattedFieldValue = (
         if (badge) {
             if (badge === true) {
                 return (
-                    <Badge variant="outline" className="text-center">
+                    <Badge variant="outline" className="text-xs text-center">
                         {value}
                     </Badge>
                 )