feat(app): popup customizing (#333)

* small form edits

* fix linting

* custom button label

* more popup customizing

* reset dev port

app/src/pages/MapContainer.tsx

@@ -19,6 +19,7 @@ import {
   PopupStartEndInput,
   PopupTextAreaInput,
   PopupTextInput,
+  HeaderView,
 } from 'utopia-ui'
 
 import { itemsApi } from '../api/itemsApi'
@@ -105,7 +106,7 @@ function MapContainer({ layers, map }: { layers: LayerProps[]; map: any }) {
                 layer.markerDefaultColor2 ? layer.markerDefaultColor2 : 'RGBA(35, 31, 32, 0.2)'
               }
               itemType={layer.itemType}
-              customEditLink='/edit-item'
+              customEditLink={layer.itemType.small_form_edit ? undefined : '/edit-item'}
               customEditParameter='id'
               public_edit_items={layer.public_edit_items}
               listed={layer.listed}
@@ -114,11 +115,16 @@ function MapContainer({ layers, map }: { layers: LayerProps[]; map: any }) {
               <PopupView>
                 {layer.itemType.show_start_end && <StartEndView></StartEndView>}
                 {layer.itemType.show_profile_button && (
-                  <PopupButton url={'/item'} parameterField={'id'} text={'Profile'} />
+                  <PopupButton
+                    url={'/item'}
+                    parameterField={'id'}
+                    text={layer.itemType.botton_label ?? 'Profile'}
+                  />
                 )}
                 {layer.itemType.show_text && <TextView truncate></TextView>}
               </PopupView>
               <PopupForm>
+                {layer.itemType.show_header_view_in_form && <HeaderView hideMenu />}
                 {layer.itemType.show_name_input && (
                   <PopupTextInput dataField='name' placeholder='Name'></PopupTextInput>
                 )}
@@ -129,7 +135,7 @@ function MapContainer({ layers, map }: { layers: LayerProps[]; map: any }) {
                   <div className='tw:mt-4'>
                     <PopupTextAreaInput
                       dataField='text'
-                      placeholder={'Text ...'}
+                      placeholder={layer.itemType.text_input_label ?? 'Text ...'}
                       style='tw:h-40'
                     ></PopupTextAreaInput>
                   </div>

lib/src/Components/Item/index.tsx

@@ -6,6 +6,7 @@ import {
   PopupCheckboxInput as PlainPopupCheckboxInput,
   PopupTextAreaInput as PlainPopupTextAreaInput,
   PopupStartEndInput as PlainPopupStartEndInput,
+  HeaderView as PlainHeaderView,
 } from '#components/Map/Subcomponents/ItemPopupComponents'
 
 import { templateify } from './templateify'
@@ -20,3 +21,4 @@ export const PopupButton = templateify(PlainPopupButton)
 export const PopupCheckboxInput = templateify(PlainPopupCheckboxInput)
 export const PopupTextAreaInput = templateify(PlainPopupTextAreaInput)
 export const PopupStartEndInput = templateify(PlainPopupStartEndInput)
+export const HeaderView = templateify(PlainHeaderView)

lib/src/Components/Map/Subcomponents/ItemFormPopup.tsx

@@ -254,7 +254,7 @@ export function ItemFormPopup(props: Props) {
           onSubmit={(e) => handleSubmit(e)}
         >
           {popupForm.item ? (
-            <div className='tw:h-3'></div>
+            <div className=''></div>
           ) : (
             <div className='tw:flex tw:justify-center'>
               <b className='tw:text-xl tw:text-center tw:font-bold'>{menuText}</b>

lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx

@@ -37,7 +37,7 @@ export function HeaderView({
   hideSubname = false,
   showAddress = false,
 }: {
-  item: Item
+  item?: Item
   api?: ItemsApi<any>
   editCallback?: any
   deleteCallback?: any
@@ -58,10 +58,10 @@ export function HeaderView({
   const [imageLoaded, setImageLoaded] = useState(false)
 
   const avatar =
-    (item.image && appState.assetsApi.url + item.image + '?width=160&heigth=160') ||
-    item.image_external
-  const title = item.name
-  const subtitle = item.subname
+    (item?.image && appState.assetsApi.url + item.image + '?width=160&heigth=160') ||
+    item?.image_external
+  const title = item?.name
+  const subtitle = item?.subname
 
   const [address] = useState<string>('')
 
@@ -71,7 +71,7 @@ export function HeaderView({
     setModalOpen(true)
     event.stopPropagation()
   }
-
+  if (!item) return null
   return (
     <>
       <div className='tw:flex tw:flex-row'>

lib/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx

@@ -22,6 +22,7 @@ export const PopupTextAreaInput = ({
       dataField={dataField}
       placeholder={placeholder}
       inputStyle={style}
+      required={false}
     ></TextAreaInput>
   )
 }

lib/src/Components/Map/Subcomponents/ItemPopupComponents/index.tsx

@@ -5,3 +5,4 @@ export { PopupCheckboxInput } from './PopupCheckboxInput'
 export { TextView } from './TextView'
 export { StartEndView } from './StartEndView'
 export { PopupButton } from './PopupButton'
+export { HeaderView } from './HeaderView'

lib/src/types/ItemType.d.ts

@@ -16,4 +16,8 @@ export interface ItemType {
   relations: boolean
   template: string
   questlog: boolean
+  small_form_edit?: boolean
+  botton_label?: string
+  text_input_label?: string
+  show_header_view_in_form?: boolean
 }