From b42e310d69bb50673c05eefb20c3aee0a58fcd7d Mon Sep 17 00:00:00 2001
From: Anton Tranelis <mail@antontranelis.de>
Date: Tue, 30 Jul 2024 13:32:05 +0200
Subject: [PATCH] added contact, start and end to tabs form

---
 .../PopupStartEndInput.tsx                    | 13 ++++--
 src/Components/Profile/ProfileForm.tsx        |  8 +++-
 src/Components/Profile/Templates/TabsForm.tsx | 42 +++++++++++++++----
 src/Components/Profile/Templates/TabsView.tsx |  4 +-
 src/Components/Profile/itemFunctions.ts       | 21 +++++-----
 5 files changed, 65 insertions(+), 23 deletions(-)

diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx
index 6fe081ce..13b3bf18 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx
@@ -2,11 +2,18 @@ import * as React from 'react'
 import { TextInput } from '../../../Input'
 import { Item } from '../../../../types'
 
-export const PopupStartEndInput = ({item}:{item?:Item}) => {
+type StartEndInputProps = {
+  item?:Item,
+  showLabels?: boolean
+  updateStartValue?: (value: string ) => void;
+  updateEndValue?: (value: string ) => void;
+}
+
+export const PopupStartEndInput = ({item, showLabels = true, updateStartValue, updateEndValue}:StartEndInputProps) => {
     return (
         <div className='tw-grid tw-grid-cols-2 tw-gap-2 tw-mb-5'>
-                <TextInput type='date' placeholder='start' dataField='start' inputStyle='tw-text-sm tw-px-2' labelTitle='start' defaultValue={item && item.start? item.start.substring(0, 10) : ""} autocomplete='one-time-code'></TextInput>
-                <TextInput type='date' placeholder='end' dataField='end' inputStyle='tw-text-sm tw-px-2' labelTitle='end' defaultValue={item && item.end ? item.end.substring(0, 10) : ""} autocomplete='one-time-code'></TextInput>
+                <TextInput type='date' placeholder='start' dataField='start' inputStyle='tw-text-sm tw-px-2' labelTitle={showLabels ? "start" :""} defaultValue={item && item.start? item.start.substring(0, 10) : ""} autocomplete='one-time-code' updateFormValue={updateStartValue}></TextInput>
+                <TextInput type='date' placeholder='end' dataField='end' inputStyle='tw-text-sm tw-px-2' labelTitle={showLabels ? "end" :""} defaultValue={item && item.end ? item.end.substring(0, 10) : ""} autocomplete='one-time-code' updateFormValue={updateEndValue}></TextInput>
         </div>
       )
 }
diff --git a/src/Components/Profile/ProfileForm.tsx b/src/Components/Profile/ProfileForm.tsx
index 892f0b1e..a01a2177 100644
--- a/src/Components/Profile/ProfileForm.tsx
+++ b/src/Components/Profile/ProfileForm.tsx
@@ -31,7 +31,9 @@ export function ProfileForm({ userType }: { userType: string }) {
         markerIcon: "",
         offers: [] as Tag[],
         needs: [] as Tag[],
-        relations: [] as Item[]
+        relations: [] as Item[],
+        start: "",
+        end: ""
     });
 
     const [updatePermission, setUpdatePermission] = useState<boolean>(false);
@@ -105,7 +107,9 @@ export function ProfileForm({ userType }: { userType: string }) {
             markerIcon: item?.marker_icon ?? "",
             offers: offers,
             needs: needs,
-            relations: relations
+            relations: relations,
+            start: item?.start ?? "",
+            end: item?.end ?? ""
         });
     }, [item, tags, items]);
 
diff --git a/src/Components/Profile/Templates/TabsForm.tsx b/src/Components/Profile/Templates/TabsForm.tsx
index 75978faf..9712d170 100644
--- a/src/Components/Profile/Templates/TabsForm.tsx
+++ b/src/Components/Profile/Templates/TabsForm.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react"
-import { TextAreaInput } from "../../Input"
-import { TextView } from "../../Map"
+import { TextAreaInput, TextInput } from "../../Input"
+import { PopupStartEndInput, TextView } from "../../Map"
 import { ActionButton } from "../Subcomponents/ActionsButton"
 import { LinkedItemsHeaderView } from "../Subcomponents/LinkedItemsHeaderView"
 import { TagsWidget } from "../Subcomponents/TagsWidget"
@@ -20,7 +20,7 @@ export const TabsForm = ({ item, state, setState, updatePermission, linkItem, un
         let urlTab = params.get("tab");
         if (!urlTab?.includes(id.toString()))
             params.set("tab", `${id ? id : ""}`)
-        navigate(location.pathname+ "?" + params.toString());
+        navigate(location.pathname + "?" + params.toString());
     }
 
     useEffect(() => {
@@ -30,13 +30,41 @@ export const TabsForm = ({ item, state, setState, updatePermission, linkItem, un
     }, [location])
 
     return (
-        <div role="tablist" className="tw-tabs tw-tabs-lifted tw-mt-4">
+        <div role="tablist" className="tw-tabs tw-tabs-lifted tw-mt-3">
             <input type="radio" name="my_tabs_2" role="tab" className={`tw-tab  [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]`} aria-label="Info" checked={activeTab == 1 && true} onChange={() => updateActiveTab(1)} />
             <div role="tabpanel" className="tw-tab-content tw-bg-base-100 tw-border-[var(--fallback-bc,oklch(var(--bc)/0.2))] tw-rounded-box tw-h-[calc(100dvh-332px)] tw-min-h-56 tw-border-none">
-                <TextAreaInput placeholder="About me ..." defaultValue={item?.text ? item.text : ""} updateFormValue={(v) => setState(prevState => ({
+                <div className="tw-flex tw-flex-col tw-h-full tw-pt-4">
+                {item.layer.itemType.show_start_end_input &&
+                <PopupStartEndInput
+                item={item}
+                showLabels={false}
+                updateEndValue={(e) => setState(prevState => ({
                     ...prevState,
-                    text: v
-                }))} containerStyle='tw-h-full' inputStyle='tw-h-full tw-border-t-0 tw-rounded-tl-none' />
+                    end: e
+                }))}
+                updateStartValue={(s) => setState(prevState => ({
+                    ...prevState,
+                    start: s
+                }))}></PopupStartEndInput>
+                }
+
+                    <TextAreaInput placeholder="About ..." defaultValue={item?.text ? item.text : ""} updateFormValue={(v) => setState(prevState => ({
+                        ...prevState,
+                        text: v
+                    }))} containerStyle='tw-grow' inputStyle={`tw-h-full  ${!item.layer.itemType.show_start_end_input && "tw-border-t-0 tw-rounded-tl-none"}`} />
+                    <div>
+                    <TextAreaInput
+                            placeholder="contact info"
+                            defaultValue={state.contact || ""}
+                            updateFormValue={(c) => setState(prevState => ({
+                                ...prevState,
+                                contact: c
+                            }))}
+                            inputStyle="tw-h-24"
+                            containerStyle="tw-pt-4"
+                        />
+                    </div>
+                </div>
             </div>
             {item.layer?.itemType.offers_and_needs &&
                 <>
diff --git a/src/Components/Profile/Templates/TabsView.tsx b/src/Components/Profile/Templates/TabsView.tsx
index 6f8d4c19..eeeead02 100644
--- a/src/Components/Profile/Templates/TabsView.tsx
+++ b/src/Components/Profile/Templates/TabsView.tsx
@@ -48,11 +48,13 @@ export const TabsView = ({ item, offers, needs, relations, updatePermission, loa
         aria-label="Info" checked={activeTab == 1 && true}
         onChange={() => updateActiveTab(1)} />
       <div role="tabpanel"
-        className="tw-tab-content tw-bg-base-100 tw-rounded-box tw-h-[calc(100dvh-280px)] tw-overflow-y-auto fade tw-pt-2 tw-pb-4 tw-mb-4 tw-overflow-x-hidden">
+        className="tw-tab-content tw-bg-base-100 tw-rounded-box tw-h-[calc(100dvh-280px)] tw-overflow-y-auto fade tw-pt-2 tw-pb-4 tw-mb-4 tw-overflow-x-hidden tw-flex tw-flex-col">
         {item.layer?.itemType.show_start_end &&
           <div className='tw-max-w-xs'><StartEndView item={item}></StartEndView></div>
         }
         <TextView item={item} />
+        <div className='tw-h-4'></div>
+        <TextView item={item} itemTextField='contact'/>
       </div>
 
       {item.layer?.itemType.offers_and_needs &&
diff --git a/src/Components/Profile/itemFunctions.ts b/src/Components/Profile/itemFunctions.ts
index 45af4d53..25343946 100644
--- a/src/Components/Profile/itemFunctions.ts
+++ b/src/Components/Profile/itemFunctions.ts
@@ -119,23 +119,24 @@ export const onUpdateItem = async (state, item, tags, addTag, setLoading, naviga
         existingNeed && needs_updates.push(existingNeed.id)
         !existingNeed && needs_updates.push({ items_id: item?.id, tags_id: n.id })
         !existingNeed && !tags.some(t => t.id === n.id) && addTag({ ...n, offer_or_need: true })
-    });
-
+    });    
 
     // update profile item in current state
     changedItem = {
         id: state.id,
-        group_type: state.groupType,
-        status: state.status,
         name: state.name,
-        subname: state.subname,
-        text: state.text,
-        color: state.color,
+        ...state.subname && {subname: state.subname},
+        ...state.text && {text: state.text},
+        ...state.color && {color: state.color},
         position: item.position,
-        contact: state.contact,
-        telephone: state.telephone,
+        ...state.groupType && {group_type: state.groupType},
+        ...state.status && {status: state.status},
+        ...state.contact && {contact: state.contact},
+        ...state.telephone && {telephone: state.telephone},
+        ...state.end && {end: state.end},
+        ...state.start && {start: state.start},
         ...state.markerIcon && { markerIcon: state.markerIcon },
-        next_appointment: state.nextAppointment,
+        ...state.nextAppointment && {next_appointment: state.nextAppointment},
         ...state.image.length > 10 && { image: state.image },
         ...state.offers.length > 0 && { offers: offer_updates },
         ...state.needs.length > 0 && { needs: needs_updates }