fix(source): fix index plus button (#239)

* 3.0.97

* 3.0.98

* 3.0.99

* fix index plus icon

* fix linting

src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx

@@ -9,6 +9,7 @@ export interface StartEndInputProps {
   labelStyle?: string
   updateStartValue?: (value: string) => void
   updateEndValue?: (value: string) => void
+  containerStyle?: string
 }
 
 /**
@@ -20,9 +21,10 @@ export const PopupStartEndInput = ({
   labelStyle,
   updateStartValue,
   updateEndValue,
+  containerStyle,
 }: StartEndInputProps) => {
   return (
-    <div className='tw:grid tw:grid-cols-2 tw:gap-2'>
+    <div className={`tw:grid tw:grid-cols-2 tw:gap-2 ${containerStyle ?? ''}`}>
       <TextInput
         type='date'
         placeholder='start'

src/Components/Profile/Subcomponents/PlusButton.tsx

@@ -21,18 +21,16 @@ export function PlusButton({
   return (
     <>
       {hasUserPermission(collection, 'create', undefined, layer) && (
-        <div className='tw:dropdown tw:dropdown-top tw:dropdown-end tw:dropdown-hover tw:z-3000 tw:absolute tw:right-4 tw:bottom-4'>
-          <button
-            tabIndex={0}
-            className='tw:z-500 tw:btn tw:btn-circle tw:shadow'
-            onClick={() => {
-              triggerAction()
-            }}
-            style={{ backgroundColor: color, color: '#fff' }}
-          >
-            <PlusIcon className='tw:w-5 tw:h-5 tw:stroke-[2.5]' />
-          </button>
-        </div>
+        <button
+          tabIndex={0}
+          className='tw:btn tw:btn-circle tw:shadow tw:z-3000 tw:absolute tw:right-4 tw:bottom-4'
+          onClick={() => {
+            triggerAction()
+          }}
+          style={{ backgroundColor: color, color: '#fff' }}
+        >
+          <PlusIcon className='tw:w-5 tw:h-5 tw:stroke-[2.5]' />
+        </button>
       )}
     </>
   )

src/Components/Templates/OverlayItemsIndexPage.tsx

@@ -8,7 +8,7 @@ import { useEffect, useRef, useState } from 'react'
 import { toast } from 'react-toastify'
 
 import { useAuth } from '#components/Auth/useAuth'
-import { TextInput, TextAreaInput } from '#components/Input'
+import { TextInput } from '#components/Input'
 import { useFilterTags } from '#components/Map/hooks/useFilter'
 import { useAddItem, useItems, useRemoveItem } from '#components/Map/hooks/useItems'
 import { useLayers } from '#components/Map/hooks/useLayers'
@@ -33,15 +33,13 @@ export const OverlayItemsIndexPage = ({
   url,
   layerName,
   parameterField,
-  plusButton = true,
 }: {
   layerName: string
   url: string
   parameterField?: string
-  plusButton?: boolean
 }) => {
   const [loading, setLoading] = useState<boolean>(false)
-  const [addItemPopupType, setAddItemPopupType] = useState<string>('')
+  const [addItemPopupOpen, setAddItemPopupOpen] = useState<boolean>(false)
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const parameterFieldDummy = parameterField
 
@@ -52,12 +50,10 @@ export const OverlayItemsIndexPage = ({
   }
 
   useEffect(() => {
-    scroll()
-  }, [addItemPopupType])
-
-  useEffect(() => {
-    setAddItemPopupType('')
-  }, [layerName])
+    if (addItemPopupOpen) {
+      scroll()
+    }
+  }, [addItemPopupOpen])
 
   const tags = useTags()
   const addTag = useAddTag()
@@ -106,7 +102,7 @@ export const OverlayItemsIndexPage = ({
     }
     addItem({ ...formItem, user_created: user ?? undefined, id: uuid, layer, public_edit: !user })
     setLoading(false)
-    setAddItemPopupType('')
+    setAddItemPopupOpen(false)
   }
 
   const deleteItem = async (item: Item) => {
@@ -174,15 +170,18 @@ export const OverlayItemsIndexPage = ({
                     />
                   </div>
                 ))}
-              {addItemPopupType === 'place' && (
+              {addItemPopupOpen && (
                 <form ref={tabRef} autoComplete='off' onSubmit={(e) => submitNewItem(e)}>
                   <div className='tw:cursor-pointer tw:break-inside-avoid card tw:border-[1px] tw:border-base-300 card-body tw:shadow-xl tw:bg-base-100 tw:text-base-content tw:p-6 tw:mb-10'>
                     <label
-                      className='btn btn-sm tw:rounded-2xl btn-circle btn-ghost tw:hover:bg-transparent tw:absolute tw:right-0 tw:top-0 tw:text-gray-600'
-                      onClick={() => setAddItemPopupType('')}
+                      className='tw:btn tw:btn-sm tw:rounded-2xl tw:btn-circle tw:btn-ghost tw:hover:bg-transparent tw:absolute tw:right-0 tw:top-0 tw:text-gray-600'
+                      onClick={() => setAddItemPopupOpen(false)}
                     >
                       <p className='tw:text-center'>✕</p>
                     </label>
+                    <div className='tw:flex tw:justify-center tw:mb-4'>
+                      <b className='tw:text-xl tw:text-center tw:font-bold'>{layer?.menuText}</b>
+                    </div>
                     <TextInput
                       type='text'
                       placeholder='Name'
@@ -190,13 +189,9 @@ export const OverlayItemsIndexPage = ({
                       defaultValue={''}
                       inputStyle=''
                     />
-                    {layer?.itemType.show_start_end_input && <PopupStartEndInput />}
-                    <TextAreaInput
-                      placeholder='Text'
-                      dataField='text'
-                      defaultValue={''}
-                      inputStyle='tw:h-40 tw:mt-5'
-                    />
+                    {layer?.itemType.show_start_end_input && (
+                      <PopupStartEndInput containerStyle='tw:mt-3' showLabels={false} />
+                    )}
                     <div className='tw:flex tw:justify-center'>
                       <button
                         className={
@@ -217,11 +212,11 @@ export const OverlayItemsIndexPage = ({
         </div>
       </MapOverlayPage>
 
-      {plusButton && (
+      {!layer?.userProfileLayer && (
         <PlusButton
           layer={layer}
           triggerAction={() => {
-            setAddItemPopupType('place')
+            setAddItemPopupOpen(true)
             scroll()
           }}
           color={'#777'}