rede5/photum
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Merge pull request #16 from rede5/Front-back-integracao-task1

Browse source 
feat: (eventos) vincula dropdown com api
This commit is contained in:
Andre F. Rodrigues 2025-12-11 13:33:33 -03:00 committed by GitHub
commit 0f001232b1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 34 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
frontend/components/EventForm.tsx
View file

@ -26,7 +26,7 @@ import { useData } from "../contexts/DataContext";
import { UserRole } from "../types";
import { InstitutionForm } from "./InstitutionForm";
import { MapboxMap } from "./MapboxMap";
import { getEventTypes } from "../services/apiService";
import { getEventTypes, EventTypeResponse } from "../services/apiService";
interface EventFormProps {
onCancel: () => void;
@ -56,7 +56,7 @@ export const EventForm: React.FC<EventFormProps> = ({
const [showToast, setShowToast] = useState(false);
const [showInstitutionForm, setShowInstitutionForm] = useState(false);
const [availableCourses, setAvailableCourses] = useState<any[]>([]);
const [eventTypes, setEventTypes] = useState<string[]>([]);
const [eventTypes, setEventTypes] = useState<EventTypeResponse[]>([]);
const [isBackendDown, setIsBackendDown] = useState(false);
const [isLoadingEventTypes, setIsLoadingEventTypes] = useState(true);
@ -101,15 +101,15 @@ export const EventForm: React.FC<EventFormProps> = ({
const formTitle = initialData
? "Editar Evento"
: isClientRequest
? "Solicitar Orçamento/Evento"
: "Cadastrar Novo Evento";
? "Solicitar Orçamento/Evento"
: "Cadastrar Novo Evento";
// Buscar tipos de eventos do backend
useEffect(() => {
const fetchEventTypes = async () => {
setIsLoadingEventTypes(true);
const response = await getEventTypes();
if (response.isBackendDown) {
setIsBackendDown(true);
setEventTypes([]);
@ -117,7 +117,7 @@ export const EventForm: React.FC<EventFormProps> = ({
setIsBackendDown(false);
setEventTypes(response.data);
}
setIsLoadingEventTypes(false);
};
@ -126,8 +126,8 @@ export const EventForm: React.FC<EventFormProps> = ({
const submitLabel = initialData
? "Salvar Alterações"
: isClientRequest
? "Enviar Solicitação"
: "Criar Evento";
? "Enviar Solicitação"
: "Criar Evento";
// Carregar cursos disponíveis quando instituição for selecionada
useEffect(() => {
@ -342,16 +342,14 @@ export const EventForm: React.FC<EventFormProps> = ({
{["details", "location", "briefing", "files"].map((tab, idx) => (
<div
key={tab}
className={`flex flex-col items-center ${
activeTab === tab ? "opacity-100" : "opacity-40"
}`}
className={`flex flex-col items-center ${activeTab === tab ? "opacity-100" : "opacity-40"
}`}
>
<span
className={`w-7 h-7 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-xs font-bold mb-1 ${
activeTab === tab
? "bg-[#492E61] text-white"
: "bg-gray-200 text-gray-600"
}`}
className={`w-7 h-7 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-xs font-bold mb-1 ${activeTab === tab
? "bg-[#492E61] text-white"
: "bg-gray-200 text-gray-600"
}`}
>
{idx + 1}
</span>
@ -377,11 +375,10 @@ export const EventForm: React.FC<EventFormProps> = ({
<button
key={item.id}
onClick={() => setActiveTab(item.id as any)}
className={`flex-1 px-4 py-3 text-xs sm:text-sm font-medium transition-colors border-b-2 whitespace-nowrap ${
activeTab === item.id
? "text-brand-gold border-brand-gold bg-brand-gold/5"
: "text-gray-500 border-transparent hover:bg-gray-50"
}`}
className={`flex-1 px-4 py-3 text-xs sm:text-sm font-medium transition-colors border-b-2 whitespace-nowrap ${activeTab === item.id
? "text-brand-gold border-brand-gold bg-brand-gold/5"
: "text-gray-500 border-transparent hover:bg-gray-50"
}`}
>
<span
className="inline-block w-5 h-5 rounded-full text-[10px] leading-5 text-center mr-1.5 ${
@ -411,11 +408,10 @@ export const EventForm: React.FC<EventFormProps> = ({
<button
key={item.id}
onClick={() => setActiveTab(item.id as any)}
className={`w-full text-left px-4 py-3 rounded-sm text-sm font-medium transition-colors ${
activeTab === item.id
? "bg-white shadow-sm text-brand-gold border-l-4 border-brand-gold"
: "text-gray-500 hover:bg-gray-100"
}`}
className={`w-full text-left px-4 py-3 rounded-sm text-sm font-medium transition-colors ${activeTab === item.id
? "bg-white shadow-sm text-brand-gold border-l-4 border-brand-gold"
: "text-gray-500 hover:bg-gray-100"
}`}
>
{item.label}
</button>
@ -478,8 +474,8 @@ export const EventForm: React.FC<EventFormProps> = ({
>
<option value="">Selecione o tipo de evento</option>
{eventTypes.map((type) => (
<option key={type} value={type}>
{type}
<option key={type.id} value={type.nome}>
{type.nome}
</option>
))}
</select>
@ -888,9 +884,8 @@ export const EventForm: React.FC<EventFormProps> = ({
/>
<button
onClick={() => removeContact(idx)}
className={`mt-1 p-2 text-gray-400 hover:text-red-500 ${
idx === 0 ? "mt-7" : ""
}`}
className={`mt-1 p-2 text-gray-400 hover:text-red-500 ${idx === 0 ? "mt-7" : ""
}`}
>
<X size={16} />
</button>

10
frontend/services/apiService.ts
View file

@ -46,11 +46,17 @@ export async function getProfessionalRoles(): Promise<ApiResponse<string[]>> {
return fetchFromBackend<string[]>('/professional-roles');
}
export interface EventTypeResponse {
id: string;
nome: string;
precos: any[];
}
/**
* Busca os tipos de eventos disponíveis
*/
export async function getEventTypes(): Promise<ApiResponse<string[]>> {
return fetchFromBackend<string[]>('/event-types');
export async function getEventTypes(): Promise<ApiResponse<EventTypeResponse[]>> {
return fetchFromBackend<EventTypeResponse[]>('/api/tipos-eventos');
}
/**