fix(ojoi): Input validation and bugfixes

apps/web/components/OfficialJournalOfIceland/OJOIAdvertCard.tsx

@@ -66,7 +66,7 @@ export const OJOIAdvertCard = ({
         marginTop={2}
         rowGap={1}
       >
-        {categories && categories.length && (
+        {categories && categories.length > 0 && (
           <Box display="flex" rowGap={1} columnGap={1} flexWrap="wrap">
             {categories.map((cat) => {
               return (

apps/web/screens/OfficialJournalOfIceland/OJOISearch.tsx

@@ -105,12 +105,8 @@ const OJOISearchPage: CustomScreen<OJOISearchProps> = ({
       category: [defaultSearchParams.malaflokkur],
       involvedParty: [defaultSearchParams.stofnun],
       type: [defaultSearchParams.tegund],
-      dateFrom: defaultSearchParams.dagsFra
-        ? new Date(defaultSearchParams.dagsFra)
-        : undefined,
-      dateTo: defaultSearchParams.dagsTil
-        ? new Date(defaultSearchParams.dagsTil)
-        : undefined,
+      dateFrom: defaultSearchParams.dagsFra,
+      dateTo: defaultSearchParams.dagsTil,
       search: defaultSearchParams.q,
       page: defaultSearchParams.sida,
       pageSize: defaultSearchParams.staerd,
@@ -176,12 +172,8 @@ const OJOISearchPage: CustomScreen<OJOISearchProps> = ({
           category: [searchValues.malaflokkur],
           involvedParty: [searchValues.stofnun],
           type: [searchValues.tegund],
-          dateFrom: searchValues.dagsFra
-            ? new Date(searchValues.dagsFra)
-            : undefined,
-          dateTo: searchValues.dagsTil
-            ? new Date(searchValues.dagsTil)
-            : undefined,
+          dateFrom: searchValues.dagsFra,
+          dateTo: searchValues.dagsTil,
           search: searchValues.q,
           page: searchValues.sida,
           pageSize: searchValues.staerd,
@@ -596,12 +588,8 @@ OJOISearch.getProps = async ({ apolloClient, locale, query }) => {
       variables: {
         input: {
           category: [defaultParams.malaflokkur],
-          dateFrom: defaultParams.dagsFra
-            ? new Date(defaultParams.dagsFra)
-            : undefined,
-          dateTo: defaultParams.dagsTil
-            ? new Date(defaultParams.dagsTil)
-            : undefined,
+          dateFrom: defaultParams.dagsFra,
+          dateTo: defaultParams.dagsTil,
           department: [defaultParams.deild],
           involvedParty: [defaultParams.stofnun],
           page: defaultParams.sida,

apps/web/screens/OfficialJournalOfIceland/hooks/useAdverts.ts

@@ -20,8 +20,8 @@ export type UseAdvertsVariables = {
   type?: Array<string>
   category?: Array<string>
   involvedParty?: Array<string>
-  dateFrom?: Date
-  dateTo?: Date
+  dateFrom?: string
+  dateTo?: string
 }
 
 export type UseAdvertsInput = {

libs/api/domains/official-journal-of-iceland/src/lib/models/advert.input.ts

@@ -28,10 +28,10 @@ export class AdvertsInput {
   @Field(() => [String], { nullable: true })
   involvedParty?: string[]
 
-  @Field(() => Date, { nullable: true })
+  @Field(() => String, { nullable: true })
   dateFrom?: string
 
-  @Field(() => Date, { nullable: true })
+  @Field(() => String, { nullable: true })
   dateTo?: string
 }
 

libs/application/templates/official-journal-of-iceland/src/components/additions/Additions.tsx

@@ -33,7 +33,9 @@ type Props = {
 type Addition = z.infer<typeof additionSchema>[number]
 
 export const Additions = ({ application }: Props) => {
-  const [asRoman, setAsRoman] = useState<boolean>(false)
+  const [asRoman, setAsRoman] = useState<boolean>(
+    application.answers.misc?.asRoman ?? false,
+  )
 
   const { formatMessage: f } = useLocale()
   const { setValue } = useFormContext()
@@ -57,8 +59,6 @@ export const Additions = ({ application }: Props) => {
   const onRemoveAddition = (index: number) => {
     const filtered = additions.filter((_, i) => i !== index)
     const mapped = filtered.map((addition, i) => {
-      if (addition.type !== 'html') return addition
-
       const title = f(attachments.additions.title, {
         index: asRoman ? convertNumberToRoman(i + 1) : i + 1,
       })
@@ -83,10 +83,8 @@ export const Additions = ({ application }: Props) => {
 
   const onRomanChange = (val: boolean) => {
     const handleTitleChange = (addition: Addition, i: number) => {
-      if (addition.type !== 'html') return addition
-
       const title = f(attachments.additions.title, {
-        index: asRoman ? convertNumberToRoman(i + 1) : i + 1,
+        index: val ? convertNumberToRoman(i + 1) : i + 1,
       })
       return {
         ...addition,
@@ -97,14 +95,17 @@ export const Additions = ({ application }: Props) => {
     const currentAnswers = structuredClone(currentApplication.answers)
     const updatedAdditions = additions.map(handleTitleChange)
 
-    const updatedAnswers = set(
+    let updatedAnswers = set(
       currentAnswers,
       InputFields.advert.additions,
       updatedAdditions,
     )
 
+    updatedAnswers = set(updatedAnswers, InputFields.misc.asRoman, val)
+
     setAsRoman(val)
     setValue(InputFields.advert.additions, updatedAdditions)
+    setValue(InputFields.misc.asRoman, val)
     updateApplication(updatedAnswers)
   }
 
@@ -206,7 +207,8 @@ export const Additions = ({ application }: Props) => {
                 <Button
                   variant="utility"
                   colorScheme="destructive"
-                  icon="remove"
+                  icon="trash"
+                  iconType="outline"
                   size="small"
                   onClick={() => onRemoveAddition(additionIndex)}
                 >

libs/application/templates/official-journal-of-iceland/src/components/input/OJOIInputController.tsx

@@ -14,6 +14,7 @@ type Props = {
   applicationId: string
   disabled?: boolean
   textarea?: boolean
+  maxLength?: number
   onChange?: (value: string) => void
 }
 
@@ -26,6 +27,7 @@ export const OJOIInputController = ({
   applicationId,
   disabled,
   textarea,
+  maxLength,
   onChange,
 }: Props) => {
   const { formatMessage: f } = useLocale()
@@ -70,6 +72,7 @@ export const OJOIInputController = ({
       disabled={disabled}
       textarea={textarea}
       rows={4}
+      maxLength={maxLength}
       required={false}
       onChange={(e) =>
         debouncedOnUpdateApplicationHandler(

libs/application/templates/official-journal-of-iceland/src/components/input/OJOISelectController.tsx

@@ -91,6 +91,8 @@ export const OJOISelectController = <T,>({
       backgroundColor="blue"
       options={options}
       defaultValue={defaultOpt}
+      isSearchable={true}
+      filterConfig={{ matchFrom: 'start' }}
       onChange={(opt) => {
         if (!opt?.value) return
         return handleChange(opt.value)

libs/application/templates/official-journal-of-iceland/src/components/signatures/Institution.tsx

@@ -141,6 +141,7 @@ export const InstitutionSignature = ({
       <Box className={styles.institution}>
         <Box flexGrow={1}>
           <Input
+            maxLength={100}
             name={`signature.${type}.institution${
               signatureIndex ? `.${signatureIndex}` : ''
             }`}

libs/application/templates/official-journal-of-iceland/src/components/signatures/Member.tsx

@@ -22,6 +22,7 @@ export const SignatureMember = ({
       size="sm"
       backgroundColor="blue"
       defaultValue={defaultValue}
+      maxLength={100}
       onChange={onChange}
     />
   )

libs/application/templates/official-journal-of-iceland/src/fields/Advert.tsx

@@ -98,6 +98,7 @@ export const Advert = ({ application }: OJOIFieldBaseProps) => {
             defaultValue={application.answers?.advert?.title}
             placeholder={advert.inputs.title.placeholder}
             textarea={true}
+            maxLength={600}
           />
         </Box>
         <Box>

libs/application/templates/official-journal-of-iceland/src/fields/Attachments.tsx

@@ -1,41 +1,64 @@
-import { OJOIFieldBaseProps } from '../lib/types'
+import { InputFields, OJOIFieldBaseProps } from '../lib/types'
 import { Box, Button, InputFileUpload, Stack } from '@island.is/island-ui/core'
 import { useFileUpload } from '../hooks/useFileUpload'
 import { ALLOWED_FILE_TYPES, ApplicationAttachmentType } from '../lib/constants'
 import { useLocale } from '@island.is/localization'
 import { attachments } from '../lib/messages/attachments'
 import { useState } from 'react'
 import { Additions } from '../components/additions/Additions'
+import { useApplication } from '../hooks/useUpdateApplication'
+import { useFormContext } from 'react-hook-form'
 
 export const Attachments = ({ application }: OJOIFieldBaseProps) => {
+  const { setValue } = useFormContext()
   const { formatMessage: f } = useLocale()
   const { files, onChange, onRemove } = useFileUpload({
     applicationId: application.id,
     attachmentType: ApplicationAttachmentType.ADDITIONS,
   })
 
-  const [asAddition, setAsAddition] = useState(true)
+  const { updateApplication, application: currentApplication } = useApplication(
+    {
+      applicationId: application.id,
+    },
+  )
+
+  const [asDocument, setAsDocument] = useState(
+    application.answers.misc?.asDocument ?? false,
+  )
+
+  const handleChange = () => {
+    const current = asDocument
+    setAsDocument((toggle) => !toggle)
+
+    setValue(InputFields.misc.asDocument, !current)
+    updateApplication({
+      ...currentApplication.answers,
+      misc: {
+        ...currentApplication.answers.misc,
+        asDocument: !current,
+      },
+    })
+  }
 
   return (
     <Stack space={4}>
       <Box>
         <Button
-          icon={asAddition ? 'upload' : 'document'}
+          icon={asDocument ? 'upload' : 'document'}
           iconType="outline"
           variant="ghost"
           size="small"
-          onClick={() => setAsAddition((toggle) => !toggle)}
+          onClick={handleChange}
         >
           {f(
-            asAddition
-              ? attachments.buttons.asAttachment
-              : attachments.buttons.asDocument,
+            asDocument
+              ? attachments.buttons.asDocument
+              : attachments.buttons.asAttachment,
           )}
         </Button>
       </Box>
-      {!asAddition ? (
-        <Additions application={application} />
-      ) : (
+      {asDocument ? (
         <InputFileUpload
           header={f(attachments.inputs.fileUpload.header)}
           description={f(attachments.inputs.fileUpload.description)}
@@ -50,6 +73,8 @@ export const Attachments = ({ application }: OJOIFieldBaseProps) => {
             icon: 'blue200',
           }}
         />
+      ) : (
+        <Additions application={application} />
       )}
     </Stack>
   )

libs/application/templates/official-journal-of-iceland/src/fields/Publishing.tsx

@@ -123,6 +123,9 @@ export const Publishing = ({ application }: OJOIFieldBaseProps) => {
               options={mappedCategories}
               defaultValue={mappedCategories?.[0]}
               onChange={(opt) => onCategoryChange(opt?.value)}
+              filterConfig={{
+                matchFrom: 'start',
+              }}
             />
             <Box marginTop={1}>
               <Inline space={1} flexWrap="wrap">

libs/application/templates/official-journal-of-iceland/src/lib/dataSchema.ts

@@ -83,6 +83,8 @@ const miscSchema = z
   .object({
     signatureType: z.string().optional(),
     selectedTemplate: z.string().optional(),
+    asDocument: z.boolean().optional(),
+    asRoman: z.boolean().optional(),
   })
   .partial()
 

libs/application/templates/official-journal-of-iceland/src/lib/messages/attachments.ts

@@ -34,7 +34,7 @@ export const attachments = {
     },
     asAttachment: {
       id: 'ojoi.application:attachments.buttons.additionType.asAttachment',
-      defaultMessage: 'Hlaða upp skjölum',
+      defaultMessage: 'Bæta við viðauka',
       description: 'Label of the button to upload attachments',
     },
     removeAddition: {

libs/application/templates/official-journal-of-iceland/src/lib/types.ts

@@ -33,6 +33,8 @@ export const InputFields = {
   [Routes.MISC]: {
     signatureType: 'misc.signatureType',
     selectedTemplate: 'misc.selectedTemplate',
+    asDocument: 'misc.asDocument',
+    asRoman: 'misc.asRoman',
   },
 }
 

libs/application/templates/official-journal-of-iceland/src/lib/utils.ts

@@ -18,6 +18,8 @@ import is from 'date-fns/locale/is'
 import { SignatureTypes, OJOI_DF, FAST_TRACK_DAYS } from './constants'
 import { MessageDescriptor } from 'react-intl'
 import { v4 as uuid } from 'uuid'
+import Hypher from 'hypher'
+import { hyphenateText } from '@island.is/island-ui/core'
 
 export const countDaysAgo = (date: Date) => {
   const now = new Date()
@@ -190,6 +192,8 @@ export const getRegularAnswers = (answers: OJOIApplication['answers']) => {
     signature: null,
   }
 }
+const hyphenate = (text = '') =>
+  hyphenateText(text, { locale: 'is', minLeft: 4, minRight: 4 })
 
 const getMembersMarkup = (member: z.infer<typeof memberItemSchema>) => {
   if (!member.name) return ''
@@ -198,18 +202,21 @@ const getMembersMarkup = (member: z.infer<typeof memberItemSchema>) => {
     marginBottom: member.below ? '0' : '1.5em',
   }
 
-  const aboveMarkup = member.above
-    ? `<p style="margin-bottom: 0;" align="center">${member.above}</p>`
-    : ''
-  const afterMarkup = member.after ? ` ${member.after}` : ''
-  const belowMarkup = member.below
-    ? `<p align="center">${member.below}</p>`
+  const name = hyphenate(member.name)
+  const above = hyphenate(member.above)
+  const after = hyphenate(member.after)
+  const below = hyphenate(member.below)
+
+  const aboveMarkup = above
+    ? `<p style="margin-bottom: 0;" align="center">${above}</p>`
     : ''
+  const afterMarkup = after ? ` ${after}` : ''
+  const belowMarkup = below ? `<p align="center">${below}</p>` : ''
 
   return `
     <div class="signature__member" style="margin-bottom: 1.5em;">
       ${aboveMarkup}
-      <p style="margin-bottom: ${styleObject.marginBottom}" align="center"><strong>${member.name}</strong>${afterMarkup}</p>
+      <p style="margin-bottom: ${styleObject.marginBottom}" align="center"><strong>${name}</strong>${afterMarkup}</p>
       ${belowMarkup}
     </div>
   `
@@ -261,7 +268,9 @@ const signatureTemplate = (
     .join('')
 
   const additionalMarkup = additionalSignature
-    ? `<p style="font-size: 16px;" align="right"><em>${additionalSignature}</em></p>`
+    ? `<p style="font-size: 16px;" align="right"><em>${hyphenate(
+        additionalSignature,
+      )}</em></p>`
     : ''
 
   return `${markup}${additionalMarkup}` as HTMLText

libs/island-ui/core/src/lib/Header/Header.css.ts

@@ -21,10 +21,14 @@ export const infoDescription = style({
   fontWeight: 300,
   lineHeight: 1.5,
   fontSize: 14,
+  maxHeight: 40,
+  position: 'relative',
+  overflow: 'auto',
 
   ...themeUtils.responsiveStyle({
     md: {
       fontSize: 18,
+      maxHeight: 66,
     },
   }),
 })