From 77b0ddb8f9d3bfd8d74620f22e0648315706c42a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Per=C3=B4nico=20Barbotin?=
 <lucas.peronico@dcx.ufpb.br>
Date: Sat, 18 Nov 2023 10:19:17 -0300
Subject: [PATCH 01/18] =?UTF-8?q?Formulario=20b=C3=A1sico?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../UniversiForm/ManageMaterial.less          | 220 ++++++++++++++++++
 .../UniversiForm/ManageMaterial.tsx           | 206 ++++++++++++++++
 src/components/UniversiForm/UniversiForm.tsx  | 121 ++++++++++
 .../ManageMaterial/ManageMaterial.tsx         |  14 ++
 4 files changed, 561 insertions(+)
 create mode 100644 src/components/UniversiForm/ManageMaterial.less
 create mode 100644 src/components/UniversiForm/ManageMaterial.tsx
 create mode 100644 src/components/UniversiForm/UniversiForm.tsx

diff --git a/src/components/UniversiForm/ManageMaterial.less b/src/components/UniversiForm/ManageMaterial.less
new file mode 100644
index 00000000..9241d4ef
--- /dev/null
+++ b/src/components/UniversiForm/ManageMaterial.less
@@ -0,0 +1,220 @@
+@import url(/src/layouts/colors.less);
+@import url(/src/layouts/fonts.less);
+@import url(/src/layouts/border-radius.less);
+
+#manage-material {
+    @left-padding: 2.1rem;
+
+    display: flex;
+    flex-direction: column;
+
+    background-color: white;
+    border-radius: var(--border-radius);
+
+    width: 45rem;
+    overflow: hidden;
+
+    box-sizing: 0px 4px 4px 0px rgba(0, 0, 0, 0.50);
+
+    @header-padding: 1rem;
+    @header-image-size: 3rem;
+
+    .header {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        padding: @header-padding @left-padding;
+
+        background-color: @primary-color;
+        border-bottom: 5px solid @secondary-color;
+
+        color: white;
+
+        gap: 1rem;
+
+        img {
+            width: @header-image-size;
+            height: @header-image-size;
+        }
+
+        .title {
+            color: @font-color-v1;
+        }
+    }
+
+    .manage-material.fields {
+        max-height: calc(90vh - (@header-padding * 2) - @header-image-size);
+        overflow: auto;
+
+        .url-wrapper {
+            display: flex;
+            flex-direction: row;
+            align-items: start;
+
+            .type-fieldset {
+                padding-right: calc(@left-padding / 2);
+
+                .material-type-trigger {
+                    height: 3rem;
+                    padding: .5rem;
+                    aspect-ratio: 1;
+
+                    background-color: @card-background-color;
+
+                    cursor: pointer;
+                }
+
+                .type-dropdown-menu {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    justify-content: space-between;
+
+                    background-color: @card-background-color;
+                    border-radius: @border-radius;
+
+                    border: 1px solid @primary-color;
+
+                    .type-dropdown-arrow {
+                        fill: @card-background-color
+                    }
+
+                    .type-dropdown-option {
+                        outline: none;
+
+                        .material-type-icon {
+                            height: calc(4rem - 10px);
+                            cursor: pointer;
+                            padding: 5px;
+                            margin: 5px;
+
+                            border-radius: 10px;
+
+                            &:hover {
+                                outline: 2px solid @primary-color;
+                            }
+                        }
+                    }
+
+                }
+            }
+
+
+            .url-fieldset {
+                width: 100%;
+                padding-left: 0;
+            }
+        }
+
+        fieldset {
+            border: none;
+            padding: 0 @left-padding;
+            margin-top: 1rem;
+
+            &:not(:last-child) {
+                margin-bottom: 1rem;
+            }
+
+            .field-input {
+                width: 100%;
+                background-color: @card-background-color;
+            }
+
+            input {
+                font-size: 1rem;
+                padding: 1rem .5rem;
+            }
+
+            textarea {
+                min-height: 2em;
+                max-height: 8rem;
+                padding: .5rem;
+
+                resize: vertical;
+            }
+
+            input, textarea, .material-type-trigger {
+                border: none;
+                border-radius: .625rem;
+
+                &:focus {
+                    outline: solid 2px @primary-color;
+                }
+            }
+
+            > legend {
+                display: flex;
+                flex-direction: row;
+                align-items: end;
+                justify-content: space-between;
+
+                width: 100%;
+
+                font-size: 1.25rem;
+                padding-bottom: 0.75rem;
+
+                .char-counter {
+                    display: inline;
+                    margin-right: .25em;
+
+                    font-size: .75em;
+                }
+            }
+        }
+
+        .operation-buttons {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: flex-end;
+            margin: 2.1rem;
+            gap: 1rem;
+
+            > button {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: center;
+
+                border: none;
+                width: 7.5em;
+                max-height: 2rem;
+                padding: .75em 0;
+                border-radius: .625rem;
+
+                gap: .5rem;
+
+                color: @font-color-v1;
+                font-size: .9rem;
+                font-weight: @font-weight-bold;
+
+                cursor: pointer;
+                will-change: background-color;
+
+                &.cancel-button {
+                    background-color: @secondary-color;
+                }
+
+                &.submit-button {
+                    &:not(:disabled) {
+                        background-color: @primary-color;
+                        &:hover {
+                            background-color: @secondary-color;
+                        }
+                    }
+
+                    &:disabled {
+                        background-color: @font-color-v3;
+                    }
+                }
+
+                .bi {
+                    width: 1rem;
+                    font-size: 1.2rem;
+                    margin: 0;
+                }
+            }
+        }
+    }
+}
diff --git a/src/components/UniversiForm/ManageMaterial.tsx b/src/components/UniversiForm/ManageMaterial.tsx
new file mode 100644
index 00000000..db3eb779
--- /dev/null
+++ b/src/components/UniversiForm/ManageMaterial.tsx
@@ -0,0 +1,206 @@
+import { useContext, useEffect, useState } from "react";
+import Select from 'react-select';
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+
+import { CATEGORY_SELECT_STYLES, GroupContext } from "@/pages/Group";
+import UniversimeApi from "@/services/UniversimeApi";
+import { UniversiModal } from "@/components/UniversiModal";
+import { setStateAsValue } from "@/utils/tsxUtils";
+import { type OptionInMenu, renderOption } from "@/utils/dropdownMenuUtils";
+
+import type { ContentCreate_ResponseDTO, ContentEdit_ResponseDTO } from "@/services/UniversimeApi/Capacity";
+import type { Category, ContentType } from "@/types/Capacity";
+import "./ManageMaterial.less";
+import { FormInputs, UniversiForm } from "./UniversiForm";
+
+export type ManageMaterialProps = {
+    refreshMaterials: () => any;
+}
+
+const MAX_TITLE_LENGTH = 50;
+const MAX_DESC_LENGTH = 150;
+const MAX_URL_LENGTH = 100;
+
+export function ManageMaterial(props: Readonly<ManageMaterialProps>) {
+    const context = useContext(GroupContext);
+
+    const [title, setTitle] = useState<string>(context?.editMaterial?.title ?? "");
+    const [description, setDescription] = useState<string>(context?.editMaterial?.description ?? "");
+    const [url, setUrl] = useState<string>(context?.editMaterial?.url ?? "");
+    const [type, setType] = useState<ContentType>(context?.editMaterial?.type ?? "LINK");
+    // const [contentsIds, setContentsIds] = useState<string[]>((context?.editMaterial?.folders ?? []).map(c => c.id));
+    const [categoriesIds, setCategoriesIds] = useState<string[]>((context?.editMaterial?.categories ?? []).map(c => c.id));
+
+    const [availableCategories, setAvailableCategories] = useState<Category[]>([]);
+    useEffect(()=>{
+        UniversimeApi.Capacity.categoryList()
+            .then(response => {
+                if (response.success && response.body) {
+                    setAvailableCategories(response.body.categories);
+                }
+            })
+    }, []);
+
+    useEffect(() => {
+        if (context?.editMaterial === undefined)
+            return;
+
+        setTitle(context?.editMaterial?.title ?? "");
+        setDescription(context?.editMaterial?.description ?? "");
+        setUrl(context?.editMaterial?.url ?? "");
+        setType(context?.editMaterial?.type ?? "LINK");
+        // setContentsIds((context?.editMaterial?.folders ?? []).map(c => c.id));
+        setCategoriesIds((context?.editMaterial?.categories ?? []).map(c => c.id));
+    }, [context?.editMaterial]);
+
+    // prevent later checks
+    if (!context)
+        return null;
+
+    if (context.editMaterial === undefined)
+        return null;
+
+    const canSave = (title.length > 0) && (description.length > 0) && (url.length > 0);
+    const isNewMaterial = context.editMaterial === null;
+
+    const contentTypeIcon = getContentTypeIcon(type);
+
+    const MATERIAL_TYPE_OPTIONS: [OptionInMenu<ContentType>, ContentType][] = AVAILABLE_MATERIAL_TYPES
+        .map(t => {
+            return [{
+                text: getContentTypeOptionText(t[0], t[1]),
+                className: "type-dropdown-option",
+                onSelect(data){ setType(data); },
+            }, t[0]]
+        });
+
+
+    return <UniversiModal>
+        <div id="manage-material">
+
+            <div className="header">
+                <img src="/assets/imgs/create-content.png" />
+                <h1 className="title">{ isNewMaterial ? "Criar" : "Editar" } material</h1>
+            </div>
+
+
+            <div className="manage-material fields">
+                <fieldset>
+                    <legend>
+                        Título do Material
+                        <div className="char-counter">
+                            {title.length} / {MAX_TITLE_LENGTH}
+                        </div>
+                    </legend>
+                    <input className="field-input" type="text" defaultValue={context.editMaterial?.title} onChange={setStateAsValue(setTitle)} maxLength={MAX_TITLE_LENGTH}/>
+                </fieldset>
+
+                <fieldset>
+                    <legend>
+                        Descrição
+                        <div className="char-counter">
+                            {description.length} / {MAX_DESC_LENGTH}
+                        </div>
+                    </legend>
+                    <textarea className="field-input" defaultValue={context.editMaterial?.description ?? undefined} onChange={setStateAsValue(setDescription)} maxLength={MAX_DESC_LENGTH} />
+                </fieldset>
+
+                <section className="url-wrapper">
+                    <fieldset className="type-fieldset">
+                        <legend>Tipo</legend>
+                        <DropdownMenu.Root>
+                            <DropdownMenu.Trigger asChild>
+                                <img className="material-type-trigger" src={`/assets/imgs/${contentTypeIcon}.png`} />
+                            </DropdownMenu.Trigger>
+
+                            <DropdownMenu.Content className="type-dropdown-menu" side="top">
+                                { MATERIAL_TYPE_OPTIONS.map(([def, data]) => renderOption(data, def)) }
+                            </DropdownMenu.Content>
+                        </DropdownMenu.Root>
+                    </fieldset>
+
+                    <fieldset className="url-fieldset">
+                        <legend>
+                            Link de acesso
+                            <div className="char-counter">{url.length}/{MAX_URL_LENGTH}</div>
+                        </legend>
+                        <input className="field-input" type="url" defaultValue={context.editMaterial?.url} onChange={setStateAsValue(setUrl)} maxLength={MAX_URL_LENGTH} />
+                    </fieldset>
+                </section>
+
+                <fieldset>
+                    <legend>Categorias</legend>
+                    <Select placeholder="Selecionar categorias..." className="category-select" isMulti options={availableCategories}
+                        onChange={(value) => {setCategoriesIds(value.map(v => v.id))}}
+                        defaultValue={ availableCategories.filter(c => context.editMaterial?.categories.map(c => c.id).includes(c.id)) } noOptionsMessage={()=>"Categoria Não Encontrada"}
+                        getOptionLabel={c => c.name} getOptionValue={c => c.id} classNamePrefix="category-item" styles={CATEGORY_SELECT_STYLES}
+                    />
+                </fieldset>
+
+
+                <section className="operation-buttons">
+                    <button type="button" className="cancel-button" onClick={() => {context.setEditMaterial(undefined)}}>
+                        <i className="bi bi-x-circle-fill" />
+                        Cancelar
+                    </button>
+                    <button type="button" className="submit-button" onClick={handleSaveMaterial} disabled={!canSave} title={canSave ? undefined : "Preencha os dados antes de salvar"}>
+                        <i className="bi bi-check-circle-fill" />
+                        { isNewMaterial ? "Criar" : "Salvar" }
+                    </button>
+                </section>
+            </div>
+        </div>
+    </UniversiModal>
+
+    function handleSaveMaterial() {
+        if (!context || context.editMaterial === undefined)
+            return;
+
+        if (context.editMaterial === null) {
+            UniversimeApi.Capacity.createContent({
+                title, description, url, type, addCategoriesByIds: categoriesIds, addFoldersByIds: context.currentContent?.id, rating: 5,
+                // todo: image upload
+            }).then(afterSave);
+        }
+
+        else {
+            const addCategoriesByIds = categoriesIds
+                .filter(c => undefined === context.editMaterial!.categories.find(check => c === check.id));
+            const removeCategoriesByIds = context.editMaterial.categories
+                .filter(c => undefined === categoriesIds.find(check => c.id === check))
+                .map(c => c.id);
+
+            UniversimeApi.Capacity.editContent({
+                id: context.editMaterial.id, title, description, url, type, addCategoriesByIds, removeCategoriesByIds
+                // todo: image upload
+                // todo: verify if editing contents will be a thing
+            }).then(afterSave);
+        }
+
+        function afterSave(response: ContentCreate_ResponseDTO | ContentEdit_ResponseDTO) {
+            context!.setEditMaterial(undefined);
+            props.refreshMaterials();
+        }
+    }
+}
+
+function getContentTypeIcon(type: ContentType) {
+    return type === "FILE" || type === "FOLDER" ? "file"
+        : type === "LINK" ? "link"
+        : type === "VIDEO" ? "video"
+        : "link";
+}
+
+function getContentTypeOptionText(type: ContentType, title: string) {
+    return <img
+        className="material-type-icon"
+        src={`/assets/imgs/${getContentTypeIcon(type)}.png`}
+        title={title}
+    />
+}
+
+const AVAILABLE_MATERIAL_TYPES: [ContentType, string][] = [
+    ["LINK", "Link"],
+    ["VIDEO", "Vídeo"],
+    ["FILE", "Arquivo"],
+];
diff --git a/src/components/UniversiForm/UniversiForm.tsx b/src/components/UniversiForm/UniversiForm.tsx
new file mode 100644
index 00000000..2cef624f
--- /dev/null
+++ b/src/components/UniversiForm/UniversiForm.tsx
@@ -0,0 +1,121 @@
+import { ApiResponse } from "@/types/UniversimeApi"
+import { ReactNode, useState, useContext } from "react"
+
+import "./ManageMaterial.less"
+import { GroupContext } from "@/pages/Group"
+import UniversimeApi from "@/services/UniversimeApi"
+
+export type formProps = {
+
+    objects: FormObject[],
+    requisition : any
+    
+}
+
+export type FormObject = {
+    DTOName : string,
+    label : string,
+    type : FormInputs,
+    charLimit? : undefined | number,
+    fileType? : undefined | string,
+    value? : undefined | any,
+    required? : undefined | boolean
+}
+
+export enum FormInputs {
+    TEXT,
+    LONG_TEXT,
+    FILE,
+    URL,
+    LIST,
+    NONE
+}
+
+export function UniversiForm(props : formProps){
+
+    const [objects, setObjects] = useState<FormObject[]>(props.objects);
+    const MAX_TEXT_LENGTH = 50
+    const MAX_LONG_TEXT_LENGTH = 150
+    const MAX_URL_LENGTH = 100
+
+    const context = useContext(GroupContext)
+
+    const handleChange = (index : number, newValue : any) => {
+        setObjects((oldObjects) =>{
+            const updatedObjects = [...oldObjects]
+            updatedObjects[index].value = newValue;
+            return updatedObjects
+        })
+    }
+
+    function getCharLimit(object : FormObject){
+        if(object.type == FormInputs.TEXT)
+            return MAX_TEXT_LENGTH;
+        else if(object.type == FormInputs.LONG_TEXT)
+            return MAX_LONG_TEXT_LENGTH
+        else
+            return MAX_URL_LENGTH
+        return undefined;
+    }
+
+    function getInput(object : FormObject){
+        if(object.type == FormInputs.TEXT || object.type == FormInputs.LONG_TEXT || object.type == FormInputs.URL)
+            return "text"
+        else if(object.type == FormInputs.FILE)
+            return "file"
+    }
+
+    function renderObjects() : ReactNode{
+        return objects.map((object, index) =>(
+            object.type == FormInputs.NONE ? <></> : 
+            <fieldset key={index}>
+                <legend>
+                    {object.label}
+                    {
+                        object.charLimit != undefined
+                        ?
+                        <div className="char-counter">
+                            {object.value?.length}/{object.charLimit}
+                        </div>
+                        :
+                        <div className="char-counter">
+                            {object.value?.length}/{object.type == FormInputs.TEXT ? MAX_TEXT_LENGTH : object.type === FormInputs.LONG_TEXT ? MAX_LONG_TEXT_LENGTH : MAX_URL_LENGTH}
+                        </div>
+                    }
+                </legend>
+                <input className="field-input" type={`${getInput(object)}`} defaultValue={object.value} onChange={(e) => {handleChange(index, e.target.value)}} maxLength={getCharLimit(object)}/>
+            </fieldset>
+        
+        ))
+    }
+
+    const convertToDTO = (formObjects: FormObject[]) => {
+        return formObjects.reduce((formData, currentObject) => {
+            formData[currentObject.DTOName] = currentObject.value;
+            return formData;
+        }, {} as Record<string, any>);
+    };
+
+    function makeRequest(){
+        props.requisition(convertToDTO(objects))
+    }
+
+    return(
+        <div className="manage-material fields">
+        {
+        renderObjects()
+        }   
+        <section className="operation-buttons">
+            <button type="button" className="cancel-button" onClick={() => {context?.setEditMaterial(undefined)}}>
+                <i className="bi bi-x-circle-fill" />
+                Cancelar
+            </button>
+            <button type="button" className="submit-button" onClick={makeRequest} /*disabled={!canSave} title={canSave ? undefined : "Preencha os dados antes de salvar"}*/>
+                <i className="bi bi-check-circle-fill" />
+                "Salvar"
+            </button>
+        </section>
+        </div>
+    )
+
+}
\ No newline at end of file
diff --git a/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx b/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
index 70da8023..41d0611b 100644
--- a/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
+++ b/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
@@ -11,6 +11,7 @@ import { type OptionInMenu, renderOption } from "@/utils/dropdownMenuUtils";
 import type { ContentCreate_ResponseDTO, ContentEdit_ResponseDTO } from "@/services/UniversimeApi/Capacity";
 import type { Category, ContentType } from "@/types/Capacity";
 import "./ManageMaterial.less";
+import { FormInputs, UniversiForm } from "@/components/UniversiForm/UniversiForm";
 
 export type ManageMaterialProps = {
     refreshMaterials: () => any;
@@ -82,6 +83,19 @@ export function ManageMaterial(props: Readonly<ManageMaterialProps>) {
                 <h1 className="title">{ isNewMaterial ? "Criar" : "Editar" } material</h1>
             </div>
 
+            <UniversiForm objects={[
+                {DTOName: "name", label: "Nome do grupo", type: FormInputs.TEXT},
+                {DTOName: "description", label: "Descrição do grupo", type: FormInputs.LONG_TEXT},
+                {DTOName: "nickname", label: "Apelido do grupo", type: FormInputs.TEXT},
+                {DTOName: "groupType", label: "tipo de grupo", type: FormInputs.NONE, value: "CAMPUS"},
+                {DTOName: "imageUrl", label: "Link da imagem", type: FormInputs.URL},
+                {DTOName: "canHaveSubGroup", label: "Pode ter subgrupo?", type: FormInputs.NONE, value: true},
+                {DTOName: "isPublic", label: "é publico", type: FormInputs.NONE, value: true},
+                {DTOName: "canJoin", label: "pode entrar", type: FormInputs.NONE, value: true},
+                {DTOName: "isRootGroup", label: "é grupo raiz", type: FormInputs.NONE, value: false},
+                {DTOName: "parentGroupId", label: "id do grupo pai", type: FormInputs.NONE, value: context.group.id}
+            ]} requisition={UniversimeApi.Group.create}></UniversiForm>
+
             <div className="manage-material fields">
                 <fieldset>
                     <legend>

From 887d4b8fecf68cd524b923987d7e4194ed919177 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Per=C3=B4nico=20Barbotin?=
 <lucas.peronico@dcx.ufpb.br>
Date: Sat, 18 Nov 2023 11:37:59 -0300
Subject: [PATCH 02/18] =?UTF-8?q?adi=C3=A7=C3=A3o=20de=20imagem,=20aftersa?=
 =?UTF-8?q?ve=20e=20boolean?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../UniversiForm/ManageMaterial.less          |   8 ++
 src/components/UniversiForm/UniversiForm.less |  31 +++++
 src/components/UniversiForm/UniversiForm.tsx  | 117 ++++++++++++++++--
 .../ManageMaterial/ManageMaterial.tsx         |  10 +-
 4 files changed, 154 insertions(+), 12 deletions(-)
 create mode 100644 src/components/UniversiForm/UniversiForm.less

diff --git a/src/components/UniversiForm/ManageMaterial.less b/src/components/UniversiForm/ManageMaterial.less
index 9241d4ef..1342cbd5 100644
--- a/src/components/UniversiForm/ManageMaterial.less
+++ b/src/components/UniversiForm/ManageMaterial.less
@@ -2,6 +2,14 @@
 @import url(/src/layouts/fonts.less);
 @import url(/src/layouts/border-radius.less);
 
+.checkbox-input{
+    .checkbox{
+        width: 1rem !important;
+    }
+    legend{
+        display: contents !important;
+    }
+}
 #manage-material {
     @left-padding: 2.1rem;
 
diff --git a/src/components/UniversiForm/UniversiForm.less b/src/components/UniversiForm/UniversiForm.less
new file mode 100644
index 00000000..5598c435
--- /dev/null
+++ b/src/components/UniversiForm/UniversiForm.less
@@ -0,0 +1,31 @@
+.image-wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .image-preview {
+        height: 5rem;
+        aspect-ratio: 1;
+
+        border-radius: 1rem;
+        border: 1px solid var(--secondary-color);
+        object-fit: cover;
+
+        &.default-image {
+            padding: .5rem;
+        }
+    }
+
+    fieldset {
+        margin-top: 0;
+    }
+        .image-button{
+            background-color: var(--primary-color);
+            color: white;
+            text-align: center;
+            padding: 0.5rem 0.5rem ;
+            border-radius: 0.675rem;
+            cursor: pointer;
+        }
+
+}
\ No newline at end of file
diff --git a/src/components/UniversiForm/UniversiForm.tsx b/src/components/UniversiForm/UniversiForm.tsx
index 2cef624f..23478f84 100644
--- a/src/components/UniversiForm/UniversiForm.tsx
+++ b/src/components/UniversiForm/UniversiForm.tsx
@@ -1,14 +1,17 @@
 import { ApiResponse } from "@/types/UniversimeApi"
-import { ReactNode, useState, useContext } from "react"
+import { ReactNode, useState, useContext, ChangeEvent } from "react"
 
 import "./ManageMaterial.less"
+import "./UniversiForm.less"
 import { GroupContext } from "@/pages/Group"
 import UniversimeApi from "@/services/UniversimeApi"
+import { arrayBufferToBase64 } from "@/utils/fileUtils"
 
 export type formProps = {
 
     objects: FormObject[],
-    requisition : any
+    requisition : any,
+    afterSave? : any
     
 }
 
@@ -19,7 +22,9 @@ export type FormObject = {
     charLimit? : undefined | number,
     fileType? : undefined | string,
     value? : undefined | any,
-    required? : undefined | boolean
+    required? : undefined | boolean,
+    options? : undefined | any[],
+    file?: undefined | any
 }
 
 export enum FormInputs {
@@ -28,6 +33,8 @@ export enum FormInputs {
     FILE,
     URL,
     LIST,
+    BOOLEAN,
+    IMAGE,
     NONE
 }
 
@@ -39,6 +46,7 @@ export function UniversiForm(props : formProps){
     const MAX_URL_LENGTH = 100
 
     const context = useContext(GroupContext)
+    const DEFAULT_IMAGE_PATH = "/assets/imgs/default-content.png";
 
     const handleChange = (index : number, newValue : any) => {
         setObjects((oldObjects) =>{
@@ -47,6 +55,15 @@ export function UniversiForm(props : formProps){
             return updatedObjects
         })
     }
+    const handleFileChange = (index : number, newValue : any) => {
+        setObjects((oldObjects) =>{
+            const updatedObjects = [...oldObjects]
+            updatedObjects[index].file = newValue;
+            return updatedObjects
+        })
+    }
+
+
 
     function getCharLimit(object : FormObject){
         if(object.type == FormInputs.TEXT)
@@ -65,10 +82,9 @@ export function UniversiForm(props : formProps){
             return "file"
     }
 
-    function renderObjects() : ReactNode{
-        return objects.map((object, index) =>(
-            object.type == FormInputs.NONE ? <></> : 
-            <fieldset key={index}>
+    function getTextInput(object : FormObject, index : number){
+        return (
+            <div>
                 <legend>
                     {object.label}
                     {
@@ -83,7 +99,90 @@ export function UniversiForm(props : formProps){
                         </div>
                     }
                 </legend>
-                <input className="field-input" type={`${getInput(object)}`} defaultValue={object.value} onChange={(e) => {handleChange(index, e.target.value)}} maxLength={getCharLimit(object)}/>
+                <input className="field-input" type="text" defaultValue={object.value} onChange={(e) => {handleChange(index, e.target.value)}} maxLength={getCharLimit(object)}/>
+            </div>
+        )
+    }
+
+    function getImageBuffer(object : FormObject){
+        if(object.value)
+            return "data:image/jpeg;base64,"+arrayBufferToBase64(object.file);
+        return DEFAULT_IMAGE_PATH
+    }
+
+    function getImageInput(object : FormObject, index : number){
+
+        const imageBuffer = getImageBuffer(object)
+
+        return(
+            <div className="image-wrapper">
+                <img src={imageBuffer} className={"image-preview "+((imageBuffer === DEFAULT_IMAGE_PATH) ? "default-image" : "")}/>
+                <fieldset className="label-button">
+                    <legend>{object.label}</legend>
+                    <input type="file" style={{display: "none"}} id="file-input" accept="image/*" onChange={(e) =>{changeFile(e, index)}}/>
+                    <label htmlFor="file-input" className="image-button">
+                        Selecionar arquivo
+                    </label>
+                </fieldset>
+            </div>
+        )
+
+    }
+
+    async function changeFile(e : ChangeEvent<HTMLInputElement>, index: number){
+        const imageFile = e.currentTarget.files?.item(0);
+        if(!imageFile){
+            handleFileChange(index, undefined);
+            return;
+        }
+
+        const reader = new FileReader();
+        reader.onloadend = renderLoadedImage;
+        reader.readAsArrayBuffer(imageFile)
+
+        async function renderLoadedImage(this: FileReader, ev: ProgressEvent<FileReader>){
+            if(ev.target?.readyState == FileReader.DONE && ev.target.result){
+                handleFileChange(index, ev.target.result as ArrayBuffer)
+                const imageFile = (document.getElementById("file-input") as HTMLInputElement).files?.item(0) 
+                if(imageFile){
+                    const res = await UniversimeApi.Image.upload({image: imageFile})
+                    if(res.success && res.body)
+                        handleChange(index, res.body.link)
+                }
+                
+            }
+        }
+    }
+
+    function getBooleanInput(object : FormObject, index : number){
+
+        return(
+
+            <div className="checkbox-input">
+                <fieldset>
+                    <legend>{object.label}</legend>
+                    <input id={index.toString()} name={index.toString()} checked={object.value} type="checkbox" className="field-input checkbox" onChange={(e) =>{handleChange(index, e.target.checked)}}></input>
+                </fieldset>
+            </div>
+
+        )
+    }
+
+    function renderObjects() : ReactNode{
+        return objects.map((object, index) =>(
+            object.type == FormInputs.NONE ? <></> : 
+            <fieldset key={index}>
+                {
+                    object.type == FormInputs.TEXT ||
+                    object.type == FormInputs.LONG_TEXT ||
+                    object.type == FormInputs.URL ?
+                    getTextInput(object, index)
+                    : object.type == FormInputs.IMAGE ?
+                    getImageInput(object, index)
+                    :
+                    getBooleanInput(object, index)
+
+                }
             </fieldset>
         
         ))
@@ -98,6 +197,8 @@ export function UniversiForm(props : formProps){
 
     function makeRequest(){
         props.requisition(convertToDTO(objects))
+        if(props.afterSave)
+            props.afterSave()
     }
 
     return(
diff --git a/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx b/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
index 41d0611b..9113e113 100644
--- a/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
+++ b/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
@@ -88,13 +88,15 @@ export function ManageMaterial(props: Readonly<ManageMaterialProps>) {
                 {DTOName: "description", label: "Descrição do grupo", type: FormInputs.LONG_TEXT},
                 {DTOName: "nickname", label: "Apelido do grupo", type: FormInputs.TEXT},
                 {DTOName: "groupType", label: "tipo de grupo", type: FormInputs.NONE, value: "CAMPUS"},
-                {DTOName: "imageUrl", label: "Link da imagem", type: FormInputs.URL},
+                {DTOName: "imageUrl", label: "Link da imagem", type: FormInputs.IMAGE},
                 {DTOName: "canHaveSubGroup", label: "Pode ter subgrupo?", type: FormInputs.NONE, value: true},
-                {DTOName: "isPublic", label: "é publico", type: FormInputs.NONE, value: true},
-                {DTOName: "canJoin", label: "pode entrar", type: FormInputs.NONE, value: true},
+                {DTOName: "isPublic", label: "é publico", type: FormInputs.BOOLEAN, value: true},
+                {DTOName: "canJoin", label: "pode entrar", type: FormInputs.BOOLEAN, value: true},
                 {DTOName: "isRootGroup", label: "é grupo raiz", type: FormInputs.NONE, value: false},
                 {DTOName: "parentGroupId", label: "id do grupo pai", type: FormInputs.NONE, value: context.group.id}
-            ]} requisition={UniversimeApi.Group.create}></UniversiForm>
+            ]}  requisition={UniversimeApi.Group.create}
+                afterSave={() => {context.setEditMaterial(undefined); props.refreshMaterials()}}
+            ></UniversiForm>
 
             <div className="manage-material fields">
                 <fieldset>

From d8bfa376d11a2d47579dfecd88b4d3ab000d6c6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Per=C3=B4nico=20Barbotin?=
 <lucas.peronico@dcx.ufpb.br>
Date: Mon, 20 Nov 2023 11:49:05 -0300
Subject: [PATCH 03/18] Adicionando select

---
 src/components/UniversiForm/UniversiForm.tsx  | 72 ++++++++++++++++---
 .../ManageMaterial/ManageMaterial.tsx         | 24 +++----
 2 files changed, 73 insertions(+), 23 deletions(-)

diff --git a/src/components/UniversiForm/UniversiForm.tsx b/src/components/UniversiForm/UniversiForm.tsx
index 23478f84..6c04c253 100644
--- a/src/components/UniversiForm/UniversiForm.tsx
+++ b/src/components/UniversiForm/UniversiForm.tsx
@@ -3,15 +3,19 @@ import { ReactNode, useState, useContext, ChangeEvent } from "react"
 
 import "./ManageMaterial.less"
 import "./UniversiForm.less"
-import { GroupContext } from "@/pages/Group"
+import { CATEGORY_SELECT_STYLES, GroupContext } from "@/pages/Group"
 import UniversimeApi from "@/services/UniversimeApi"
 import { arrayBufferToBase64 } from "@/utils/fileUtils"
+import Select from "react-select"
 
 export type formProps = {
 
     objects: FormObject[],
     requisition : any,
-    afterSave? : any
+    afterSave? : any,
+    isNew? : boolean,
+    cancelClick : () => void,
+    formTitle : string
     
 }
 
@@ -21,10 +25,12 @@ export type FormObject = {
     type : FormInputs,
     charLimit? : undefined | number,
     fileType? : undefined | string,
-    value? : undefined | any,
+    value? : undefined | any | any[],
     required? : undefined | boolean,
     options? : undefined | any[],
-    file?: undefined | any
+    file?: undefined | any,
+    isListMulti? : true | undefined,
+    listObjects? : any[]
 }
 
 export enum FormInputs {
@@ -35,12 +41,14 @@ export enum FormInputs {
     LIST,
     BOOLEAN,
     IMAGE,
-    NONE
+    NONE,
+    NUMBER
 }
 
 export function UniversiForm(props : formProps){
 
     const [objects, setObjects] = useState<FormObject[]>(props.objects);
+    const [canSave, setCanSave] = useState<boolean>(false)
     const MAX_TEXT_LENGTH = 50
     const MAX_LONG_TEXT_LENGTH = 150
     const MAX_URL_LENGTH = 100
@@ -84,7 +92,7 @@ export function UniversiForm(props : formProps){
 
     function getTextInput(object : FormObject, index : number){
         return (
-            <div>
+            <>
                 <legend>
                     {object.label}
                     {
@@ -100,7 +108,7 @@ export function UniversiForm(props : formProps){
                     }
                 </legend>
                 <input className="field-input" type="text" defaultValue={object.value} onChange={(e) => {handleChange(index, e.target.value)}} maxLength={getCharLimit(object)}/>
-            </div>
+            </>
         )
     }
 
@@ -168,6 +176,36 @@ export function UniversiForm(props : formProps){
         )
     }
 
+    const handleSelectChange = (index : number, newValue : any) => {
+        setObjects((oldObjects) =>{
+            const updatedObjects = [...oldObjects]
+            if(!updatedObjects[index].value)
+                updatedObjects[index].value = []
+            updatedObjects[index].value.push(newValue);
+            return updatedObjects
+        })
+    }
+
+    function getListInput(object : FormObject, index : number){
+        return(
+            <div>
+                <legend>{object.label}</legend>
+                <Select placeholder={`Selecionar ${object.label}`} className="category-select" isMulti={object.isListMulti} options={object.listObjects}
+                onChange={(value) => handleSelectChange(index, value)}
+                noOptionsMessage={()=>`Não foi possível encontrar ${object.label}`}
+                classNamePrefix="category-item"
+                styles={CATEGORY_SELECT_STYLES}
+                defaultValue={null}
+                />
+
+            </div>
+        )
+    }
+
+    function getNumberInput(object : FormObject, index : number){
+        return <></>
+    }
+
     function renderObjects() : ReactNode{
         return objects.map((object, index) =>(
             object.type == FormInputs.NONE ? <></> : 
@@ -179,8 +217,13 @@ export function UniversiForm(props : formProps){
                     getTextInput(object, index)
                     : object.type == FormInputs.IMAGE ?
                     getImageInput(object, index)
-                    :
+                    : object.type == FormInputs.BOOLEAN ? 
                     getBooleanInput(object, index)
+                    : object.type == FormInputs.LIST ?
+                    getListInput(object, index)
+                    : object.type == FormInputs.NUMBER ?
+                    getNumberInput(object, index)
+                    : <></>
 
                 }
             </fieldset>
@@ -201,19 +244,26 @@ export function UniversiForm(props : formProps){
             props.afterSave()
     }
 
-    return(
+    return(        
         <div className="manage-material fields">
+
+        <div className="header">
+            <img src="/assets/imgs/create-content.png" />
+            <h1 className="title">{ (props.isNew ? "Criar " : "Editar ")+props.formTitle } </h1>
+        </div>
+
         {
         renderObjects()
         }   
+
         <section className="operation-buttons">
-            <button type="button" className="cancel-button" onClick={() => {context?.setEditMaterial(undefined)}}>
+            <button type="button" className="cancel-button" onClick={props.cancelClick}>
                 <i className="bi bi-x-circle-fill" />
                 Cancelar
             </button>
             <button type="button" className="submit-button" onClick={makeRequest} /*disabled={!canSave} title={canSave ? undefined : "Preencha os dados antes de salvar"}*/>
                 <i className="bi bi-check-circle-fill" />
-                "Salvar"
+                Salvar
             </button>
         </section>
         </div>
diff --git a/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx b/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
index 9113e113..2c4c3a79 100644
--- a/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
+++ b/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
@@ -83,19 +83,19 @@ export function ManageMaterial(props: Readonly<ManageMaterialProps>) {
                 <h1 className="title">{ isNewMaterial ? "Criar" : "Editar" } material</h1>
             </div>
 
-            <UniversiForm objects={[
-                {DTOName: "name", label: "Nome do grupo", type: FormInputs.TEXT},
-                {DTOName: "description", label: "Descrição do grupo", type: FormInputs.LONG_TEXT},
-                {DTOName: "nickname", label: "Apelido do grupo", type: FormInputs.TEXT},
-                {DTOName: "groupType", label: "tipo de grupo", type: FormInputs.NONE, value: "CAMPUS"},
-                {DTOName: "imageUrl", label: "Link da imagem", type: FormInputs.IMAGE},
-                {DTOName: "canHaveSubGroup", label: "Pode ter subgrupo?", type: FormInputs.NONE, value: true},
-                {DTOName: "isPublic", label: "é publico", type: FormInputs.BOOLEAN, value: true},
-                {DTOName: "canJoin", label: "pode entrar", type: FormInputs.BOOLEAN, value: true},
-                {DTOName: "isRootGroup", label: "é grupo raiz", type: FormInputs.NONE, value: false},
-                {DTOName: "parentGroupId", label: "id do grupo pai", type: FormInputs.NONE, value: context.group.id}
-            ]}  requisition={UniversimeApi.Group.create}
+            <UniversiForm 
+            formTitle="material"
+            objects={[
+                {DTOName: "name", label: "Nome do material", type: FormInputs.TEXT},
+                {DTOName: "description", label: "Descrição do material", type: FormInputs.LONG_TEXT},
+                {DTOName: "url", label: "Link do material", type: FormInputs.URL},
+                {DTOName: "type", label: "Tipo do material", type: FormInputs.LIST, listObjects: AVAILABLE_MATERIAL_TYPES.map(([t] : [ContentType, string])=>({value: t, label: t}))},
+                {DTOName: "addCategoriesByIds", label: "Categorias", type: FormInputs.LIST, listObjects: availableCategories.map(t => ({value: t.id, label: t.name})), isListMulti: true},
+                {DTOName: "addFoldersById", label: "", type: FormInputs.NONE, value: context.currentContent?.id}
+            ]}  requisition={UniversimeApi.Capacity.createContent}
                 afterSave={() => {context.setEditMaterial(undefined); props.refreshMaterials()}}
+                isNew={context.editMaterial == null}
+                cancelClick={() => {context.setEditMaterial(undefined)}}
             ></UniversiForm>
 
             <div className="manage-material fields">

From 0d325e5c1268e1f69876722928905750939db8a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Per=C3=B4nico=20Barbotin?=
 <lucas.peronico@dcx.ufpb.br>
Date: Tue, 21 Nov 2023 10:44:51 -0300
Subject: [PATCH 04/18] =?UTF-8?q?aplicando=20estrategias=20de=20valida?=
 =?UTF-8?q?=C3=A7=C3=A3o=20substituindo=20form=20de=20manageMaterial=20par?=
 =?UTF-8?q?a=20universi-form?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UniversiForm/UniversiForm.tsx  |  98 +++++++++----
 .../Validation/RequiredValidation.tsx         |  13 ++
 .../Validation/TextValidation.tsx             |  18 +++
 .../UniversiForm/Validation/Validation.tsx    |   7 +
 .../ManageMaterial/ManageMaterial.tsx         | 132 +-----------------
 5 files changed, 114 insertions(+), 154 deletions(-)
 create mode 100644 src/components/UniversiForm/Validation/RequiredValidation.tsx
 create mode 100644 src/components/UniversiForm/Validation/TextValidation.tsx
 create mode 100644 src/components/UniversiForm/Validation/Validation.tsx

diff --git a/src/components/UniversiForm/UniversiForm.tsx b/src/components/UniversiForm/UniversiForm.tsx
index 6c04c253..086f036d 100644
--- a/src/components/UniversiForm/UniversiForm.tsx
+++ b/src/components/UniversiForm/UniversiForm.tsx
@@ -1,5 +1,4 @@
-import { ApiResponse } from "@/types/UniversimeApi"
-import { ReactNode, useState, useContext, ChangeEvent } from "react"
+import { ReactNode, useState, useContext, ChangeEvent, useEffect } from "react"
 
 import "./ManageMaterial.less"
 import "./UniversiForm.less"
@@ -7,14 +6,16 @@ import { CATEGORY_SELECT_STYLES, GroupContext } from "@/pages/Group"
 import UniversimeApi from "@/services/UniversimeApi"
 import { arrayBufferToBase64 } from "@/utils/fileUtils"
 import Select from "react-select"
+import { UniversiModal } from "../UniversiModal"
+import { Validation } from "./Validation/Validation"
+import { object } from "prop-types"
 
 export type formProps = {
 
     objects: FormObject[],
     requisition : any,
-    afterSave? : any,
     isNew? : boolean,
-    cancelClick : () => void,
+    callback : () => void,
     formTitle : string
     
 }
@@ -30,7 +31,8 @@ export type FormObject = {
     options? : undefined | any[],
     file?: undefined | any,
     isListMulti? : true | undefined,
-    listObjects? : any[]
+    listObjects? : any[],
+    validation? : Validation
 }
 
 export enum FormInputs {
@@ -56,6 +58,31 @@ export function UniversiForm(props : formProps){
     const context = useContext(GroupContext)
     const DEFAULT_IMAGE_PATH = "/assets/imgs/default-content.png";
 
+    useEffect(()=>{
+
+        objects.forEach(obj => { 
+            if(obj.type in [FormInputs.TEXT, FormInputs.LONG_TEXT, FormInputs.URL] && !obj.charLimit){
+                obj.charLimit = obj.type == FormInputs.TEXT ? MAX_TEXT_LENGTH : obj.type == FormInputs.LONG_TEXT ? MAX_LONG_TEXT_LENGTH : MAX_URL_LENGTH;
+            }
+        })
+
+    }, [])
+
+    useEffect(()=>{
+
+        let isValid = true
+
+        console.log(objects)
+
+        objects.forEach(obj => {
+            if(obj.validation && !obj.validation.validate(obj)) {
+                isValid = false
+            }
+        });
+        setCanSave(isValid)
+        
+    }, [objects])
+
     const handleChange = (index : number, newValue : any) => {
         setObjects((oldObjects) =>{
             const updatedObjects = [...oldObjects]
@@ -177,16 +204,26 @@ export function UniversiForm(props : formProps){
     }
 
     const handleSelectChange = (index : number, newValue : any) => {
+        console.log("AAAAAAAAAA", newValue.value)
+        console.log("AAAAAAAAAA", newValue)
         setObjects((oldObjects) =>{
             const updatedObjects = [...oldObjects]
-            if(!updatedObjects[index].value)
+            if(!updatedObjects[index].value && updatedObjects[index].isListMulti)
                 updatedObjects[index].value = []
-            updatedObjects[index].value.push(newValue);
+            if(updatedObjects[index].isListMulti){
+                newValue.forEach(value =>{
+                updatedObjects[index].value.push(value.value);
+                })
+            }
+            else
+                updatedObjects[index].value = newValue.value
             return updatedObjects
         })
     }
 
     function getListInput(object : FormObject, index : number){
+        if(!object.listObjects)
+            return
         return(
             <div>
                 <legend>{object.label}</legend>
@@ -232,6 +269,7 @@ export function UniversiForm(props : formProps){
     }
 
     const convertToDTO = (formObjects: FormObject[]) => {
+        console.log(formObjects)
         return formObjects.reduce((formData, currentObject) => {
             formData[currentObject.DTOName] = currentObject.value;
             return formData;
@@ -240,33 +278,37 @@ export function UniversiForm(props : formProps){
 
     function makeRequest(){
         props.requisition(convertToDTO(objects))
-        if(props.afterSave)
-            props.afterSave()
+        if(props.callback)
+            props.callback()
     }
 
     return(        
-        <div className="manage-material fields">
+    <UniversiModal>
+        <div id="manage-material">
+            <div className="manage-material fields">
 
-        <div className="header">
-            <img src="/assets/imgs/create-content.png" />
-            <h1 className="title">{ (props.isNew ? "Criar " : "Editar ")+props.formTitle } </h1>
-        </div>
+                <div className="header">
+                    <img src="/assets/imgs/create-content.png" />
+                    <h1 className="title">{ (props.isNew ? "Criar " : "Editar ")+props.formTitle } </h1>
+                </div>
 
-        {
-        renderObjects()
-        }   
-
-        <section className="operation-buttons">
-            <button type="button" className="cancel-button" onClick={props.cancelClick}>
-                <i className="bi bi-x-circle-fill" />
-                Cancelar
-            </button>
-            <button type="button" className="submit-button" onClick={makeRequest} /*disabled={!canSave} title={canSave ? undefined : "Preencha os dados antes de salvar"}*/>
-                <i className="bi bi-check-circle-fill" />
-                Salvar
-            </button>
-        </section>
+                {
+                renderObjects()
+                }   
+
+                <section className="operation-buttons">
+                    <button type="button" className="cancel-button" onClick={props.callback}>
+                        <i className="bi bi-x-circle-fill" />
+                        Cancelar
+                    </button>
+                    <button type="button" className="submit-button" onClick={makeRequest} disabled={!canSave} title={canSave ? undefined : "Preencha os dados antes de salvar"}>
+                        <i className="bi bi-check-circle-fill" />
+                        Salvar
+                    </button>
+                </section>
+            </div>
         </div>
+    </UniversiModal>
     )
 
 }
\ No newline at end of file
diff --git a/src/components/UniversiForm/Validation/RequiredValidation.tsx b/src/components/UniversiForm/Validation/RequiredValidation.tsx
new file mode 100644
index 00000000..2246292f
--- /dev/null
+++ b/src/components/UniversiForm/Validation/RequiredValidation.tsx
@@ -0,0 +1,13 @@
+import { Validation, ValidationParams } from "./Validation";
+
+export class RequiredValidation implements Validation<any>{
+
+    validate(required: boolean | undefined, value: any, params?: ValidationParams | undefined): boolean {
+        if(!required)
+            return true
+        if(required && value != null && value != undefined)
+            return true
+        return false
+    }
+
+}
\ No newline at end of file
diff --git a/src/components/UniversiForm/Validation/TextValidation.tsx b/src/components/UniversiForm/Validation/TextValidation.tsx
new file mode 100644
index 00000000..005477e1
--- /dev/null
+++ b/src/components/UniversiForm/Validation/TextValidation.tsx
@@ -0,0 +1,18 @@
+import { FormInputs, FormObject } from "../UniversiForm";
+import { Validation} from "./Validation";
+
+export class TextValidation implements Validation{
+
+    validate(object: FormObject): boolean {
+        if(!object.required)
+            return true;
+        if(!object.value)
+            return false
+        if(object.charLimit && object.value.length > object.charLimit)
+            return false
+        if(object.value.trim().length == 0)
+            return false
+        return true;
+    }
+
+}
\ No newline at end of file
diff --git a/src/components/UniversiForm/Validation/Validation.tsx b/src/components/UniversiForm/Validation/Validation.tsx
new file mode 100644
index 00000000..a0540bc1
--- /dev/null
+++ b/src/components/UniversiForm/Validation/Validation.tsx
@@ -0,0 +1,7 @@
+import { FormObject } from "../UniversiForm";
+
+export interface Validation{
+
+    validate(object : FormObject) : boolean
+
+}
\ No newline at end of file
diff --git a/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx b/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
index 2c4c3a79..71fc6b55 100644
--- a/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
+++ b/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
@@ -12,6 +12,7 @@ import type { ContentCreate_ResponseDTO, ContentEdit_ResponseDTO } from "@/servi
 import type { Category, ContentType } from "@/types/Capacity";
 import "./ManageMaterial.less";
 import { FormInputs, UniversiForm } from "@/components/UniversiForm/UniversiForm";
+import { TextValidation } from "@/components/UniversiForm/Validation/TextValidation";
 
 export type ManageMaterialProps = {
     refreshMaterials: () => any;
@@ -60,142 +61,21 @@ export function ManageMaterial(props: Readonly<ManageMaterialProps>) {
     if (context.editMaterial === undefined)
         return null;
 
-    const canSave = (title.length > 0) && (description.length > 0) && (url.length > 0);
-    const isNewMaterial = context.editMaterial === null;
-
-    const contentTypeIcon = getContentTypeIcon(type);
-
-    const MATERIAL_TYPE_OPTIONS: [OptionInMenu<ContentType>, ContentType][] = AVAILABLE_MATERIAL_TYPES
-        .map(t => {
-            return [{
-                text: getContentTypeOptionText(t[0], t[1]),
-                className: "type-dropdown-option",
-                onSelect(data){ setType(data); },
-            }, t[0]]
-        });
-
-
-    return <UniversiModal>
-        <div id="manage-material">
-
-            <div className="header">
-                <img src="/assets/imgs/create-content.png" />
-                <h1 className="title">{ isNewMaterial ? "Criar" : "Editar" } material</h1>
-            </div>
-
-            <UniversiForm 
+    return <UniversiForm 
             formTitle="material"
             objects={[
-                {DTOName: "name", label: "Nome do material", type: FormInputs.TEXT},
+                {DTOName: "title", label: "Nome do material", type: FormInputs.TEXT},
                 {DTOName: "description", label: "Descrição do material", type: FormInputs.LONG_TEXT},
+                {DTOName: "rating", label: "Rating do material", type: FormInputs.LONG_TEXT},
                 {DTOName: "url", label: "Link do material", type: FormInputs.URL},
                 {DTOName: "type", label: "Tipo do material", type: FormInputs.LIST, listObjects: AVAILABLE_MATERIAL_TYPES.map(([t] : [ContentType, string])=>({value: t, label: t}))},
                 {DTOName: "addCategoriesByIds", label: "Categorias", type: FormInputs.LIST, listObjects: availableCategories.map(t => ({value: t.id, label: t.name})), isListMulti: true},
-                {DTOName: "addFoldersById", label: "", type: FormInputs.NONE, value: context.currentContent?.id}
+                {DTOName: "addFoldersByIds", label: "", type: FormInputs.NONE, value: context.currentContent?.id}
             ]}  requisition={UniversimeApi.Capacity.createContent}
-                afterSave={() => {context.setEditMaterial(undefined); props.refreshMaterials()}}
+                callback={() => {context.setEditMaterial(undefined); props.refreshMaterials()}}
                 isNew={context.editMaterial == null}
-                cancelClick={() => {context.setEditMaterial(undefined)}}
             ></UniversiForm>
 
-            <div className="manage-material fields">
-                <fieldset>
-                    <legend>
-                        Título do Material
-                        <div className="char-counter">
-                            {title.length} / {MAX_TITLE_LENGTH}
-                        </div>
-                    </legend>
-                    <input className="field-input" type="text" defaultValue={context.editMaterial?.title} onChange={setStateAsValue(setTitle)} maxLength={MAX_TITLE_LENGTH}/>
-                </fieldset>
-
-                <fieldset>
-                    <legend>
-                        Descrição
-                        <div className="char-counter">
-                            {description.length} / {MAX_DESC_LENGTH}
-                        </div>
-                    </legend>
-                    <textarea className="field-input" defaultValue={context.editMaterial?.description ?? undefined} onChange={setStateAsValue(setDescription)} maxLength={MAX_DESC_LENGTH} />
-                </fieldset>
-
-                <section className="url-wrapper">
-                    <fieldset className="type-fieldset">
-                        <legend>Tipo</legend>
-                        <DropdownMenu.Root>
-                            <DropdownMenu.Trigger asChild>
-                                <img className="material-type-trigger" src={`/assets/imgs/${contentTypeIcon}.png`} />
-                            </DropdownMenu.Trigger>
-
-                            <DropdownMenu.Content className="type-dropdown-menu" side="top">
-                                { MATERIAL_TYPE_OPTIONS.map(([def, data]) => renderOption(data, def)) }
-                            </DropdownMenu.Content>
-                        </DropdownMenu.Root>
-                    </fieldset>
-
-                    <fieldset className="url-fieldset">
-                        <legend>
-                            Link de acesso
-                            <div className="char-counter">{url.length}/{MAX_URL_LENGTH}</div>
-                        </legend>
-                        <input className="field-input" type="url" defaultValue={context.editMaterial?.url} onChange={setStateAsValue(setUrl)} maxLength={MAX_URL_LENGTH} />
-                    </fieldset>
-                </section>
-
-                <fieldset>
-                    <legend>Categorias</legend>
-                    <Select placeholder="Selecionar categorias..." className="category-select" isMulti options={availableCategories}
-                        onChange={(value) => {setCategoriesIds(value.map(v => v.id))}}
-                        defaultValue={ availableCategories.filter(c => context.editMaterial?.categories.map(c => c.id).includes(c.id)) } noOptionsMessage={()=>"Categoria Não Encontrada"}
-                        getOptionLabel={c => c.name} getOptionValue={c => c.id} classNamePrefix="category-item" styles={CATEGORY_SELECT_STYLES}
-                    />
-                </fieldset>
-
-
-                <section className="operation-buttons">
-                    <button type="button" className="cancel-button" onClick={() => {context.setEditMaterial(undefined)}}>
-                        <i className="bi bi-x-circle-fill" />
-                        Cancelar
-                    </button>
-                    <button type="button" className="submit-button" onClick={handleSaveMaterial} disabled={!canSave} title={canSave ? undefined : "Preencha os dados antes de salvar"}>
-                        <i className="bi bi-check-circle-fill" />
-                        { isNewMaterial ? "Criar" : "Salvar" }
-                    </button>
-                </section>
-            </div>
-        </div>
-    </UniversiModal>
-
-    function handleSaveMaterial() {
-        if (!context || context.editMaterial === undefined)
-            return;
-
-        if (context.editMaterial === null) {
-            UniversimeApi.Capacity.createContent({
-                title, description, url, type, addCategoriesByIds: categoriesIds, addFoldersByIds: context.currentContent?.id, rating: 5,
-                // todo: image upload
-            }).then(afterSave);
-        }
-
-        else {
-            const addCategoriesByIds = categoriesIds
-                .filter(c => undefined === context.editMaterial!.categories.find(check => c === check.id));
-            const removeCategoriesByIds = context.editMaterial.categories
-                .filter(c => undefined === categoriesIds.find(check => c.id === check))
-                .map(c => c.id);
-
-            UniversimeApi.Capacity.editContent({
-                id: context.editMaterial.id, title, description, url, type, addCategoriesByIds, removeCategoriesByIds
-                // todo: image upload
-                // todo: verify if editing contents will be a thing
-            }).then(afterSave);
-        }
-
-        function afterSave(response: ContentCreate_ResponseDTO | ContentEdit_ResponseDTO) {
-            context!.setEditMaterial(undefined);
-            props.refreshMaterials();
-        }
-    }
 }
 
 function getContentTypeIcon(type: ContentType) {

From dcc10c392a748728b38b3ef8364e416c09d7f93e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Per=C3=B4nico=20Barbotin?=
 <lucas.peronico@dcx.ufpb.br>
Date: Tue, 21 Nov 2023 13:16:33 -0300
Subject: [PATCH 05/18] removendo console.log

---
 src/components/UniversiForm/UniversiForm.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/UniversiForm/UniversiForm.tsx b/src/components/UniversiForm/UniversiForm.tsx
index 086f036d..d1478a8d 100644
--- a/src/components/UniversiForm/UniversiForm.tsx
+++ b/src/components/UniversiForm/UniversiForm.tsx
@@ -204,14 +204,12 @@ export function UniversiForm(props : formProps){
     }
 
     const handleSelectChange = (index : number, newValue : any) => {
-        console.log("AAAAAAAAAA", newValue.value)
-        console.log("AAAAAAAAAA", newValue)
         setObjects((oldObjects) =>{
             const updatedObjects = [...oldObjects]
             if(!updatedObjects[index].value && updatedObjects[index].isListMulti)
                 updatedObjects[index].value = []
             if(updatedObjects[index].isListMulti){
-                newValue.forEach(value =>{
+                newValue.forEach((value : any) =>{
                 updatedObjects[index].value.push(value.value);
                 })
             }
@@ -269,7 +267,6 @@ export function UniversiForm(props : formProps){
     }
 
     const convertToDTO = (formObjects: FormObject[]) => {
-        console.log(formObjects)
         return formObjects.reduce((formData, currentObject) => {
             formData[currentObject.DTOName] = currentObject.value;
             return formData;

From 3258e12a0049c9f6b3da101a519c70684b74967f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Per=C3=B4nico=20Barbotin?=
 <lucas.peronico@dcx.ufpb.br>
Date: Tue, 21 Nov 2023 13:35:24 -0300
Subject: [PATCH 06/18] =?UTF-8?q?Ajustando=20componente=20para=20edi=C3=A7?=
 =?UTF-8?q?=C3=A3o=20de=20materiais?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UniversiForm/UniversiForm.tsx  |  2 +-
 .../ManageContent/ManageContent.tsx           |  6 ++++++
 .../ManageMaterial/ManageMaterial.tsx         | 19 ++++++++++---------
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/components/UniversiForm/UniversiForm.tsx b/src/components/UniversiForm/UniversiForm.tsx
index d1478a8d..a27c2b14 100644
--- a/src/components/UniversiForm/UniversiForm.tsx
+++ b/src/components/UniversiForm/UniversiForm.tsx
@@ -286,7 +286,7 @@ export function UniversiForm(props : formProps){
 
                 <div className="header">
                     <img src="/assets/imgs/create-content.png" />
-                    <h1 className="title">{ (props.isNew ? "Criar " : "Editar ")+props.formTitle } </h1>
+                    <h1 className="title">{ props.formTitle } </h1>
                 </div>
 
                 {
diff --git a/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx b/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
index 5d9fa7d4..6b96d17b 100644
--- a/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
+++ b/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
@@ -10,6 +10,7 @@ import { arrayBufferToBase64 } from "@/utils/fileUtils";
 import type { FolderCreate_ResponseDTO, FolderEdit_ResponseDTO } from "@/services/UniversimeApi/Capacity";
 import type { Category } from "@/types/Capacity";
 import "./ManageContent.less";
+import { UniversiForm } from "@/components/UniversiForm/UniversiForm";
 
 const MAX_NAME_LENGTH = 50;
 const MAX_DESC_LENGTH = 200;
@@ -63,6 +64,11 @@ export function ManageContent() {
     const isNewContent = context.editContent === null;
 
     return <UniversiModal>
+        {/* <UniversiForm
+        formTitle="Conteúdo"
+        isNew={context.editMaterial ==null}
+
+        /> */}
         <div id="manage-content">
 
             <div className="header">
diff --git a/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx b/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
index 71fc6b55..ffde6489 100644
--- a/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
+++ b/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
@@ -29,7 +29,8 @@ export function ManageMaterial(props: Readonly<ManageMaterialProps>) {
     const [description, setDescription] = useState<string>(context?.editMaterial?.description ?? "");
     const [url, setUrl] = useState<string>(context?.editMaterial?.url ?? "");
     const [type, setType] = useState<ContentType>(context?.editMaterial?.type ?? "LINK");
-    // const [contentsIds, setContentsIds] = useState<string[]>((context?.editMaterial?.folders ?? []).map(c => c.id));
+    const [rating, setRating] = useState<number>(context?.editMaterial?.rating ?? 0);
+    const [contentsIds, setContentsIds] = useState<string[]>((context?.editMaterial?.folders ?? []).map(c => c.id));
     const [categoriesIds, setCategoriesIds] = useState<string[]>((context?.editMaterial?.categories ?? []).map(c => c.id));
 
     const [availableCategories, setAvailableCategories] = useState<Category[]>([]);
@@ -62,15 +63,15 @@ export function ManageMaterial(props: Readonly<ManageMaterialProps>) {
         return null;
 
     return <UniversiForm 
-            formTitle="material"
+            formTitle={context.editMaterial == null ? "Criar material" : "Editar material"}
             objects={[
-                {DTOName: "title", label: "Nome do material", type: FormInputs.TEXT},
-                {DTOName: "description", label: "Descrição do material", type: FormInputs.LONG_TEXT},
-                {DTOName: "rating", label: "Rating do material", type: FormInputs.LONG_TEXT},
-                {DTOName: "url", label: "Link do material", type: FormInputs.URL},
-                {DTOName: "type", label: "Tipo do material", type: FormInputs.LIST, listObjects: AVAILABLE_MATERIAL_TYPES.map(([t] : [ContentType, string])=>({value: t, label: t}))},
-                {DTOName: "addCategoriesByIds", label: "Categorias", type: FormInputs.LIST, listObjects: availableCategories.map(t => ({value: t.id, label: t.name})), isListMulti: true},
-                {DTOName: "addFoldersByIds", label: "", type: FormInputs.NONE, value: context.currentContent?.id}
+                {DTOName: "title", label: "Nome do material", type: FormInputs.TEXT, value: context.editMaterial?.title},
+                {DTOName: "description", label: "Descrição do material", type: FormInputs.LONG_TEXT, value: context.editMaterial?.description},
+                {DTOName: "rating", label: "Rating do material", type: FormInputs.NUMBER, value: context.editMaterial?.rating},
+                {DTOName: "url", label: "Link do material", type: FormInputs.URL, value: context.editMaterial?.url},
+                {DTOName: "type", label: "Tipo do material", type: FormInputs.LIST, value : context.editMaterial?.type, listObjects: AVAILABLE_MATERIAL_TYPES.map(([t] : [ContentType, string])=>({value: t, label: t}))},
+                {DTOName: "addCategoriesByIds", label: "Categorias", type: FormInputs.LIST, value: context.editMaterial?.categories, listObjects: availableCategories.map(t => ({value: t.id, label: t.name})), isListMulti: true},
+                {DTOName: "addFoldersByIds", label: "", type: FormInputs.NONE, value: context.editMaterial ? context.editMaterial.folders : context.currentContent?.id}
             ]}  requisition={UniversimeApi.Capacity.createContent}
                 callback={() => {context.setEditMaterial(undefined); props.refreshMaterials()}}
                 isNew={context.editMaterial == null}

From 61d313714f8fa3b71658fce58704796e55aaf54a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Per=C3=B4nico=20Barbotin?=
 <lucas.peronico@dcx.ufpb.br>
Date: Tue, 21 Nov 2023 15:10:03 -0300
Subject: [PATCH 07/18] ajustando carregamento de parametros predefinidos

---
 src/components/UniversiForm/UniversiForm.tsx  |  2 +-
 .../ManageContent/ManageContent.tsx           | 17 ++++++++++++-----
 .../ManageMaterial/ManageMaterial.tsx         | 19 +++++++++++--------
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/components/UniversiForm/UniversiForm.tsx b/src/components/UniversiForm/UniversiForm.tsx
index a27c2b14..e3b5da58 100644
--- a/src/components/UniversiForm/UniversiForm.tsx
+++ b/src/components/UniversiForm/UniversiForm.tsx
@@ -230,7 +230,7 @@ export function UniversiForm(props : formProps){
                 noOptionsMessage={()=>`Não foi possível encontrar ${object.label}`}
                 classNamePrefix="category-item"
                 styles={CATEGORY_SELECT_STYLES}
-                defaultValue={null}
+                defaultValue={object.value}
                 />
 
             </div>
diff --git a/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx b/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
index 6b96d17b..1ad7f5a0 100644
--- a/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
+++ b/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
@@ -10,7 +10,7 @@ import { arrayBufferToBase64 } from "@/utils/fileUtils";
 import type { FolderCreate_ResponseDTO, FolderEdit_ResponseDTO } from "@/services/UniversimeApi/Capacity";
 import type { Category } from "@/types/Capacity";
 import "./ManageContent.less";
-import { UniversiForm } from "@/components/UniversiForm/UniversiForm";
+import { FormInputs, UniversiForm } from "@/components/UniversiForm/UniversiForm";
 
 const MAX_NAME_LENGTH = 50;
 const MAX_DESC_LENGTH = 200;
@@ -64,11 +64,18 @@ export function ManageContent() {
     const isNewContent = context.editContent === null;
 
     return <UniversiModal>
-        {/* <UniversiForm
-        formTitle="Conteúdo"
+        <UniversiForm
+        formTitle={context.editContent == null ? "Criar conteúdo" : "Editar conteúdo"}
         isNew={context.editMaterial ==null}
-
-        /> */}
+        objects={[
+            {DTOName: "name", label: "Nome do conteúdo", type: FormInputs.TEXT, value: context.editContent?.name, required: true},
+            {DTOName: "description", label: "Descrição do conteúdo", type: FormInputs.LONG_TEXT, value: context.editContent?.description, required: true},
+            {DTOName: "image", label: "Imagem do conteúdo", type: FormInputs.IMAGE, value: context.editContent?.description},
+            {DTOName: "rating", label: "Rating do conteúdo", type: FormInputs.NUMBER, value: context.editContent?.rating},
+            {DTOName: "addCategoriesByIds", label: "Categorias do conteúdo", type: FormInputs.LIST, value: context.editContent?.categories, },
+
+        ]}
+        />
         <div id="manage-content">
 
             <div className="header">
diff --git a/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx b/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
index ffde6489..33e32bf0 100644
--- a/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
+++ b/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
@@ -51,7 +51,7 @@ export function ManageMaterial(props: Readonly<ManageMaterialProps>) {
         setDescription(context?.editMaterial?.description ?? "");
         setUrl(context?.editMaterial?.url ?? "");
         setType(context?.editMaterial?.type ?? "LINK");
-        // setContentsIds((context?.editMaterial?.folders ?? []).map(c => c.id));
+        setContentsIds((context?.editMaterial?.folders ?? []).map(c => c.id));
         setCategoriesIds((context?.editMaterial?.categories ?? []).map(c => c.id));
     }, [context?.editMaterial]);
 
@@ -62,17 +62,20 @@ export function ManageMaterial(props: Readonly<ManageMaterialProps>) {
     if (context.editMaterial === undefined)
         return null;
 
+    console.log(context.editMaterial?.categories)
+
     return <UniversiForm 
             formTitle={context.editMaterial == null ? "Criar material" : "Editar material"}
             objects={[
-                {DTOName: "title", label: "Nome do material", type: FormInputs.TEXT, value: context.editMaterial?.title},
-                {DTOName: "description", label: "Descrição do material", type: FormInputs.LONG_TEXT, value: context.editMaterial?.description},
+                {DTOName: "title", label: "Nome do material", type: FormInputs.TEXT, value: context.editMaterial?.title, required: true},
+                {DTOName: "description", label: "Descrição do material", type: FormInputs.LONG_TEXT, value: context.editMaterial?.description, required: true},
                 {DTOName: "rating", label: "Rating do material", type: FormInputs.NUMBER, value: context.editMaterial?.rating},
-                {DTOName: "url", label: "Link do material", type: FormInputs.URL, value: context.editMaterial?.url},
-                {DTOName: "type", label: "Tipo do material", type: FormInputs.LIST, value : context.editMaterial?.type, listObjects: AVAILABLE_MATERIAL_TYPES.map(([t] : [ContentType, string])=>({value: t, label: t}))},
-                {DTOName: "addCategoriesByIds", label: "Categorias", type: FormInputs.LIST, value: context.editMaterial?.categories, listObjects: availableCategories.map(t => ({value: t.id, label: t.name})), isListMulti: true},
-                {DTOName: "addFoldersByIds", label: "", type: FormInputs.NONE, value: context.editMaterial ? context.editMaterial.folders : context.currentContent?.id}
-            ]}  requisition={UniversimeApi.Capacity.createContent}
+                {DTOName: "url", label: "Link do material", type: FormInputs.URL, value: context.editMaterial?.url, required: true},
+                {DTOName: "type", label: "Tipo do material", type: FormInputs.LIST, value : {value: context.editMaterial?.type, label: context.editMaterial?.type}, listObjects: AVAILABLE_MATERIAL_TYPES.map(([t] : [ContentType, string])=>({value: t, label: t}))},
+                {DTOName: "addCategoriesByIds", label: "Categorias", type: FormInputs.LIST, value: context.editMaterial?.categories.map((t)=>({label: t.name, value: t.id})), listObjects: availableCategories.map(t => ({value: t.id, label: t.name})), isListMulti: true},
+                {DTOName: "addFoldersByIds", label: "", type: FormInputs.NONE, value: context.editMaterial ? context.editMaterial?.folders.map(t=>(t.id)) : context.currentContent?.id},
+                {DTOName: "id", label: "", type: FormInputs.NONE, value: context.editMaterial?.id}
+            ]}  requisition={context.editMaterial ? UniversimeApi.Capacity.editContent : UniversimeApi.Capacity.createContent}
                 callback={() => {context.setEditMaterial(undefined); props.refreshMaterials()}}
                 isNew={context.editMaterial == null}
             ></UniversiForm>

From 92440cecb5712fb98577bb421e1112d57b0448dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Per=C3=B4nico=20Barbotin?=
 <lucas.peronico@dcx.ufpb.br>
Date: Tue, 21 Nov 2023 15:24:30 -0300
Subject: [PATCH 08/18] =?UTF-8?q?implementando=20formul=C3=A1rio=20em=20co?=
 =?UTF-8?q?nte=C3=BAdos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UniversiForm/UniversiForm.tsx  |  8 +-
 .../ManageContent/ManageContent.tsx           | 75 ++-----------------
 .../ManageMaterial/ManageMaterial.tsx         |  1 -
 3 files changed, 14 insertions(+), 70 deletions(-)

diff --git a/src/components/UniversiForm/UniversiForm.tsx b/src/components/UniversiForm/UniversiForm.tsx
index e3b5da58..4920950a 100644
--- a/src/components/UniversiForm/UniversiForm.tsx
+++ b/src/components/UniversiForm/UniversiForm.tsx
@@ -14,7 +14,6 @@ export type formProps = {
 
     objects: FormObject[],
     requisition : any,
-    isNew? : boolean,
     callback : () => void,
     formTitle : string
     
@@ -238,7 +237,12 @@ export function UniversiForm(props : formProps){
     }
 
     function getNumberInput(object : FormObject, index : number){
-        return <></>
+        return(
+            <>
+                <legend>{object.label}</legend>
+                <input max={object.charLimit} type="number" value={object.value} className="field-input" onChange={(e) => {handleChange(index, e.target.value)}}/>
+            </>
+        )
     }
 
     function renderObjects() : ReactNode{
diff --git a/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx b/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
index 1ad7f5a0..5c472e94 100644
--- a/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
+++ b/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
@@ -63,80 +63,21 @@ export function ManageContent() {
     const canSave = (name.length > 0) && (description.length > 0);
     const isNewContent = context.editContent === null;
 
-    return <UniversiModal>
-        <UniversiForm
+    return<UniversiForm
         formTitle={context.editContent == null ? "Criar conteúdo" : "Editar conteúdo"}
-        isNew={context.editMaterial ==null}
         objects={[
             {DTOName: "name", label: "Nome do conteúdo", type: FormInputs.TEXT, value: context.editContent?.name, required: true},
             {DTOName: "description", label: "Descrição do conteúdo", type: FormInputs.LONG_TEXT, value: context.editContent?.description, required: true},
             {DTOName: "image", label: "Imagem do conteúdo", type: FormInputs.IMAGE, value: context.editContent?.description},
-            {DTOName: "rating", label: "Rating do conteúdo", type: FormInputs.NUMBER, value: context.editContent?.rating},
-            {DTOName: "addCategoriesByIds", label: "Categorias do conteúdo", type: FormInputs.LIST, value: context.editContent?.categories, },
-
+            {DTOName: "rating", label: "Rating do conteúdo", type: FormInputs.NUMBER, value: context.editContent?.rating, charLimit: 5},
+            {DTOName: "addCategoriesByIds", label: "Categorias do conteúdo", type: FormInputs.LIST, value: context.editContent?.categories.map((t) => ({value: t.id, label: t.name})), listObjects: availableCategories.map((t) => ({value: t.id, label: t.name})), isListMulti: true},
+            {DTOName: "groupId", label: "Id do grupo", type: FormInputs.NONE, value: context.group.id},
+            {DTOName: "groupPath", label: "Path do grupo", type: FormInputs.NONE, value: context.group.path},
+            {DTOName: "id", label: "id do content", type: FormInputs.NONE, value: context.editContent?.id}
         ]}
+        requisition = {context.editContent ? UniversimeApi.Capacity.editFolder : UniversimeApi.Capacity.createFolder}
+        callback={()=>{context.setEditContent(undefined); context.refreshData()}}
         />
-        <div id="manage-content">
-
-            <div className="header">
-                <img src="/assets/imgs/create-content.png"/>
-                <h1 className="title">{isNewContent ? "Criar" : "Editar"} conteúdo</h1>
-            </div>
-
-            <div className="fields">
-            <fieldset>
-                <legend>
-                    Título do Conteúdo
-                    <div className="char-counter" style={name.length >= MAX_NAME_LENGTH-5 ? {color: "red"} : {}}>
-                        {name.length} / {MAX_NAME_LENGTH}
-                    </div>
-                </legend>
-                <input className="field-input" type="text" defaultValue={context.editContent?.name} onChange={setStateAsValue(setName)} maxLength={MAX_NAME_LENGTH}/>
-            </fieldset>
-
-            <fieldset>
-                <legend>
-                    Descrição
-                    <div className="char-counter" style={description.length >= MAX_DESC_LENGTH-5 ? {color: "red"} : {}}>
-                        {description.length} / {MAX_DESC_LENGTH}
-                    </div>
-                </legend>
-                <textarea className="field-input" defaultValue={context.editContent?.description ?? undefined} onChange={setStateAsValue(setDescription)} maxLength={MAX_DESC_LENGTH} />
-            </fieldset>
-
-            <div className="multiple-buttons">
-                <div className="label-button">
-                    <legend>Categorias</legend>
-                    <Select placeholder="Selecionar categorias..." className="field-input category-select" isMulti options={availableCategories}
-                        onChange={(value) => {setCategoriesIds(value.map(v => v.id))}}
-                        defaultValue={ availableCategories.filter(c => context.editContent?.categories.map(c => c.id).includes(c.id)) } noOptionsMessage={()=>"Categoria Não Encontrada"}
-                        getOptionLabel={c => c.name} getOptionValue={c => c.id} classNamePrefix="category-item" styles={CATEGORY_SELECT_STYLES}
-                    />
-                </div>
-                <div className="image-wrapper">
-                    <img src={imageRender} className={"image-preview" + (imageRender === DEFAULT_IMAGE_PATH ? " default-image" : "")} />
-
-                    <fieldset className="label-button">
-                        <legend>Imagem de conteúdo</legend>
-                        <input type="file" style={{display: "none"}} id="file-input" accept="image/*" onChange={changeImage}/>
-                        <label htmlFor="file-input" className="image-button">
-                            Selecionar arquivo
-                        </label>
-                    </fieldset>
-                </div>
-            </div>
-
-
-            <section className="operation-buttons">
-                <button type="button" className="finish-button cancel-button" onClick={() => {context.setEditContent(undefined)}}><i className="bi bi-x-circle-fill" />Cancelar</button>
-                <button type="button" className="finish-button submit-button" onClick={handleSaveContent} disabled={!canSave} title={canSave ? undefined : "Preencha os dados antes de salvar"}>
-                    <i className="bi bi-check-circle-fill"></i>
-                    { isNewContent ? "Criar" : "Salvar" }
-                </button>
-            </section>
-            </div>
-        </div>
-    </UniversiModal>
 
     async function handleSaveContent() {
         if (!context || context.editContent === undefined)
diff --git a/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx b/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
index 33e32bf0..599ca5e3 100644
--- a/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
+++ b/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
@@ -77,7 +77,6 @@ export function ManageMaterial(props: Readonly<ManageMaterialProps>) {
                 {DTOName: "id", label: "", type: FormInputs.NONE, value: context.editMaterial?.id}
             ]}  requisition={context.editMaterial ? UniversimeApi.Capacity.editContent : UniversimeApi.Capacity.createContent}
                 callback={() => {context.setEditMaterial(undefined); props.refreshMaterials()}}
-                isNew={context.editMaterial == null}
             ></UniversiForm>
 
 }

From cb30ae8f8136bb4ee57242269e528b513532148d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Per=C3=B4nico=20Barbotin?=
 <lucas.peronico@dcx.ufpb.br>
Date: Wed, 22 Nov 2023 17:54:28 -0300
Subject: [PATCH 09/18] Finalizando e implementando em tela de grupo
 adicionando group.editGroup em GroupContext

---
 src/components/UniversiForm/UniversiForm.tsx  |  19 ++-
 .../Validation/RequiredValidation.tsx         |  11 +-
 src/pages/Group/Group.tsx                     |   5 +
 src/pages/Group/GroupContext.tsx              |   9 ++
 .../ManageContent/ManageContent.tsx           |   2 +-
 .../GroupTabs/GroupGroups/GroupGroups.less    |  81 +++++++++++
 .../GroupTabs/GroupGroups/GroupGroups.tsx     | 129 ++++++++++++++----
 7 files changed, 220 insertions(+), 36 deletions(-)

diff --git a/src/components/UniversiForm/UniversiForm.tsx b/src/components/UniversiForm/UniversiForm.tsx
index 4920950a..e02824f3 100644
--- a/src/components/UniversiForm/UniversiForm.tsx
+++ b/src/components/UniversiForm/UniversiForm.tsx
@@ -9,6 +9,7 @@ import Select from "react-select"
 import { UniversiModal } from "../UniversiModal"
 import { Validation } from "./Validation/Validation"
 import { object } from "prop-types"
+import { RequiredValidation } from "./Validation/RequiredValidation"
 
 export type formProps = {
 
@@ -63,6 +64,8 @@ export function UniversiForm(props : formProps){
             if(obj.type in [FormInputs.TEXT, FormInputs.LONG_TEXT, FormInputs.URL] && !obj.charLimit){
                 obj.charLimit = obj.type == FormInputs.TEXT ? MAX_TEXT_LENGTH : obj.type == FormInputs.LONG_TEXT ? MAX_LONG_TEXT_LENGTH : MAX_URL_LENGTH;
             }
+            if(!obj.validation && obj.required)
+                obj.validation = new RequiredValidation
         })
 
     }, [])
@@ -240,11 +243,25 @@ export function UniversiForm(props : formProps){
         return(
             <>
                 <legend>{object.label}</legend>
-                <input max={object.charLimit} type="number" value={object.value} className="field-input" onChange={(e) => {handleChange(index, e.target.value)}}/>
+                <input max={object.charLimit} type="number" value={object.value} className="field-input" onChange={(e) => {handleNumberChange(index, e.target.value)}}/>
             </>
         )
     }
 
+    function handleNumberChange(index : number, newValue : any){
+
+        const obj = objects[index]
+
+        if(!obj)
+            return
+
+        if(obj.charLimit && newValue > obj.charLimit)
+            newValue = obj.charLimit
+
+        handleChange(index, newValue)
+
+    }
+
     function renderObjects() : ReactNode{
         return objects.map((object, index) =>(
             object.type == FormInputs.NONE ? <></> : 
diff --git a/src/components/UniversiForm/Validation/RequiredValidation.tsx b/src/components/UniversiForm/Validation/RequiredValidation.tsx
index 2246292f..a3b4665b 100644
--- a/src/components/UniversiForm/Validation/RequiredValidation.tsx
+++ b/src/components/UniversiForm/Validation/RequiredValidation.tsx
@@ -1,11 +1,12 @@
-import { Validation, ValidationParams } from "./Validation";
+import { FormObject } from "../UniversiForm";
+import { Validation } from "./Validation";
 
-export class RequiredValidation implements Validation<any>{
+export class RequiredValidation implements Validation{
 
-    validate(required: boolean | undefined, value: any, params?: ValidationParams | undefined): boolean {
-        if(!required)
+    validate(object : FormObject): boolean {
+        if(!object.required)
             return true
-        if(required && value != null && value != undefined)
+        if(object.required && (object.value != null || object.value != undefined))
             return true
         return false
     }
diff --git a/src/pages/Group/Group.tsx b/src/pages/Group/Group.tsx
index f1fdff8d..13809cb3 100644
--- a/src/pages/Group/Group.tsx
+++ b/src/pages/Group/Group.tsx
@@ -94,6 +94,11 @@ export function GroupPage() {
                 setContext({...this, editMaterial: c});
             },
 
+            editGroup: undefined,
+            setEditGroup(c) {
+                setContext({...this, editGroup: c});
+            },
+
             refreshData: refreshGroupData,
         };
     }
diff --git a/src/pages/Group/GroupContext.tsx b/src/pages/Group/GroupContext.tsx
index 61fbe989..55847c28 100644
--- a/src/pages/Group/GroupContext.tsx
+++ b/src/pages/Group/GroupContext.tsx
@@ -31,6 +31,15 @@ export type GroupContextType = null | {
     editMaterial: Content | null | undefined;
     setEditMaterial(material: Content | null | undefined): any;
 
+    /**
+     * The group being edited/created.
+     *
+     * If `null`, should handle creation of a group. If has a value, should handle
+     * group edit. If `undefined`, no group is being edited nor created.
+     */
+    editGroup: Group | null | undefined;
+    setEditGroup(group: Group | null | undefined) : any;
+
     loggedData: {
         isParticipant: boolean;
         profile:       Profile;
diff --git a/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx b/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
index 5c472e94..b3cc482a 100644
--- a/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
+++ b/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
@@ -68,7 +68,7 @@ export function ManageContent() {
         objects={[
             {DTOName: "name", label: "Nome do conteúdo", type: FormInputs.TEXT, value: context.editContent?.name, required: true},
             {DTOName: "description", label: "Descrição do conteúdo", type: FormInputs.LONG_TEXT, value: context.editContent?.description, required: true},
-            {DTOName: "image", label: "Imagem do conteúdo", type: FormInputs.IMAGE, value: context.editContent?.description},
+            {DTOName: "image", label: "Imagem do conteúdo", type: FormInputs.IMAGE, value: context.editContent?.image},
             {DTOName: "rating", label: "Rating do conteúdo", type: FormInputs.NUMBER, value: context.editContent?.rating, charLimit: 5},
             {DTOName: "addCategoriesByIds", label: "Categorias do conteúdo", type: FormInputs.LIST, value: context.editContent?.categories.map((t) => ({value: t.id, label: t.name})), listObjects: availableCategories.map((t) => ({value: t.id, label: t.name})), isListMulti: true},
             {DTOName: "groupId", label: "Id do grupo", type: FormInputs.NONE, value: context.group.id},
diff --git a/src/pages/Group/GroupTabs/GroupGroups/GroupGroups.less b/src/pages/Group/GroupTabs/GroupGroups/GroupGroups.less
index 37e2389f..eac90380 100644
--- a/src/pages/Group/GroupTabs/GroupGroups/GroupGroups.less
+++ b/src/pages/Group/GroupTabs/GroupGroups/GroupGroups.less
@@ -43,6 +43,87 @@
                     text-align: justify;
                 }
             }
+            .group-options-button {
+                margin-right: 1rem;
+                margin-left: auto;
+
+                display: flex;
+                padding-bottom: 3px;
+                align-items: center;
+                justify-content: center;
+
+                border: none;
+                border-radius: 50%;
+                background-color: transparent;
+
+                font-size: 1.5rem;
+                height: 2rem;
+                aspect-ratio: 1;
+
+                will-change: background-color;
+                cursor: pointer;
+
+                &:hover {
+                    background-color: #C1C1C1;
+                }
+            }
+
+            .group-options {
+                background-color: @card-background-color;
+                border-radius: .625rem;
+                padding: .25rem .5rem;
+
+                min-width: 7rem;
+
+                .group-options-arrow {
+                    fill: @card-background-color;
+                }
+
+                .dropdown-options-item {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    width: 100%;
+
+                    padding: .25rem .5rem;
+                    border-radius: .625rem;
+
+                    font-size: .9rem;
+
+                    cursor: pointer;
+
+                    &:hover {
+                        background-color: @button-hover-color;
+                        outline: none;
+
+                        &.delete {
+                            background-color: @alert-color;
+                            color: @font-color-v1;
+                        }
+                    }
+
+                    &[data-disabled] {
+                        color: @font-disabled-color;
+
+                        &:hover {
+                            background-color: transparent;
+                        }
+                    }
+
+                    &:not(:last-child) {
+                        margin-bottom: .25rem;
+                    }
+
+                    .right-slot {
+                        width: fit-content;
+                        margin-left: auto;
+
+                        &.bi {
+                            font-size: 1.2em;
+                        }
+                    }
+                }
+            }
         }
     }
 }
diff --git a/src/pages/Group/GroupTabs/GroupGroups/GroupGroups.tsx b/src/pages/Group/GroupTabs/GroupGroups/GroupGroups.tsx
index 1bfb5834..1641b6f2 100644
--- a/src/pages/Group/GroupTabs/GroupGroups/GroupGroups.tsx
+++ b/src/pages/Group/GroupTabs/GroupGroups/GroupGroups.tsx
@@ -2,7 +2,6 @@ import { useContext, useState } from "react";
 import { Link } from "react-router-dom";
 
 import { EMPTY_LIST_CLASS, GroupContext } from "@/pages/Group";
-import { setStateAsValue } from "@/utils/tsxUtils";
 import { groupImageUrl } from "@/utils/apiUtils";
 
 import type { Group } from "@/types/Group";
@@ -10,58 +9,130 @@ import "./GroupGroups.less";
 import { Filter } from "@/components/Filter/Filter";
 import { AuthContext } from "@/contexts/Auth";
 import { ActionButton } from "@/components/ActionButton/ActionButton";
+import { FormInputs, UniversiForm } from "@/components/UniversiForm/UniversiForm";
+import { TextValidation } from "@/components/UniversiForm/Validation/TextValidation";
+import UniversimeApi from "@/services/UniversimeApi";
+import { OptionInMenu, hasAvailableOption, renderOption } from "@/utils/dropdownMenuUtils";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 
 export function GroupGroups() {
     const groupContext = useContext(GroupContext);
     const [filterGroups, setFilterGroups] = useState<string>("");
     const authContext = useContext(AuthContext);
 
-    if (!groupContext)
-        return null;
+    if(groupContext == null)
+        return
+
+    const OPTIONS_DEFINITION: OptionInMenu<Group>[] = [
+        {
+            text: "Editar",
+            biIcon: "pencil-fill",
+            onSelect(data) {
+                groupContext.setEditGroup(data);
+            },
+            hidden() {
+                return (groupContext?.group.admin.id !== groupContext?.loggedData.profile.id || groupContext.loggedData.profile.id == groupContext.group.organization?.admin.id);
+            },
+        }
+    ];
+
+    const groupTypes = [
+        ["INSTITUTION", "Instituição"],
+        ["CAMPUS", "Campus"],
+        ["COURSE", "Curso"],
+        ["PROJECT", "Projeto"],
+        ["CLASSROOM", "Sala de aula"],
+        ["MONITORIA", "Monitoria"],
+        ["LABORATORY", "Laboratório"],
+        ["ACADEMIC_CENTER", "Centro acadêmico"],
+        ["DEPARTMENT", "Departamento"],
+        ["STUDY_GROUP", "Grupo de estudo"]
+    ]
 
     return (
         <section id="groups" className="group-tab">
             <div className="heading top-container">
                 <div className="go-right">
                     <Filter setter={setFilterGroups} placeholderMessage={`Buscar grupos em ${groupContext.group.name}`}/>
+                    {
+                        (groupContext.loggedData.profile.id == groupContext.group.admin.id || groupContext.loggedData.profile.id == groupContext.group.organization?.admin.id) && (groupContext.group.canCreateGroup) ? 
+                        <ActionButton name="Criar grupo" buttonProps={{onClick(){groupContext.setEditGroup(null)}}}/>
+                        : <></>
+                    }
                 </div>
             </div>
 
             <div className="group-list tab-list"> { makeGroupList(groupContext.subgroups, filterGroups) } </div>
+            {
+                groupContext.editGroup !== undefined ?
+
+                <UniversiForm
+                    formTitle={groupContext.editGroup == null ? "Criar grupo" : "Editar grupo"}
+                    objects={[
+                        {DTOName: "nickname", label: "Apelido do grupo", type: FormInputs.TEXT, value: groupContext.editGroup?.name, required: true, validation: new TextValidation},
+                        {DTOName: "name", label: "Nome do grupo", type: FormInputs.TEXT, value: groupContext.editGroup?.nickname, required: true, validation: new TextValidation},
+                        {DTOName: "description", label: "Descrição do grupo", type: FormInputs.LONG_TEXT, value: groupContext.editGroup?.description, required: true, validation: new TextValidation},
+                        {DTOName: "imageUrl", label: "Imagem do grupo", type: FormInputs.IMAGE, value: groupContext.editGroup ? groupImageUrl(groupContext.editGroup) : undefined},
+                        {DTOName: "groupType", label: "Tipo do grupo", type: FormInputs.LIST, value: groupContext.editGroup?.type, listObjects: groupTypes.map((t) => ({value: t[0], label: t[1]})), required: true, },
+                        {DTOName: "canHaveSubgroup", label: "Pode criar grupo", type: FormInputs.BOOLEAN, value: groupContext.editGroup?.canCreateGroup},
+                        {DTOName: "isPublic", label: "Grupo público", type: FormInputs.BOOLEAN, value: groupContext.editGroup?.publicGroup},
+                        {DTOName: "canJoin", label: "Usuários podem entrar", type: FormInputs.BOOLEAN, value: groupContext.editGroup?.canEnter},
+                        {DTOName: "isRootGroup", label: "Grupo raiz", type: FormInputs.BOOLEAN, value: groupContext.editGroup?.rootGroup},
+                        {DTOName: "parentGroupId", label: "Id do grupo pai (grupo atual)", type: FormInputs.NONE, value: groupContext.group.id},
+                    ]}
+                    requisition={groupContext.editGroup ? UniversimeApi.Group.update : UniversimeApi.Group.create}
+                    callback={()=>{groupContext.setEditGroup(undefined); groupContext.refreshData()}}
+                />
+                :
+                <></>
+            }
         </section>
     );
-}
+    function makeGroupList(groups: Group[], filter: string) {
+        if (groups.length === 0) {
+            return <p className={EMPTY_LIST_CLASS}>Esse grupo não possui grupos.</p>
+        }
 
-function makeGroupList(groups: Group[], filter: string) {
-    if (groups.length === 0) {
-        return <p className={EMPTY_LIST_CLASS}>Esse grupo não possui grupos.</p>
-    }
+        const filteredGroups = filter.length === 0
+            ? groups
+            : groups.filter(c => c.name.toLowerCase().includes(filter.toLowerCase()));
 
-    const filteredGroups = filter.length === 0
-        ? groups
-        : groups.filter(c => c.name.toLowerCase().includes(filter.toLowerCase()));
+        if (filteredGroups.length === 0) {
+            return <p className={EMPTY_LIST_CLASS}>Nenhum grupo encontrado com a pesquisa.</p>
+        }
 
-    if (filteredGroups.length === 0) {
-        return <p className={EMPTY_LIST_CLASS}>Nenhum grupo encontrado com a pesquisa.</p>
+        return filteredGroups
+            .map(renderGroup);
     }
 
-    return filteredGroups
-        .map(renderGroup);
-}
+    function renderGroup(group: Group) {
+        const linkToGroup = `/group${group.path}`;
 
-function renderGroup(group: Group) {
-    const linkToGroup = `/group${group.path}`;
+        return (
+            <div className="group-item tab-item" key={group.id}>
+                <Link to={linkToGroup}>
+                    <img className="group-image" src={groupImageUrl(group)} />
+                </Link>
 
-    return (
-        <div className="group-item tab-item" key={group.id}>
-            <Link to={linkToGroup}>
-                <img className="group-image" src={groupImageUrl(group)} />
-            </Link>
-
-            <div className="info">
-                <Link to={linkToGroup} className="group-name">{group.name}</Link>
-                <p className="group-description">{group.description}</p>
+                <div className="info">
+                    <Link to={linkToGroup} className="group-name">{group.name}</Link>
+                    <p className="group-description">{group.description}</p>
+                </div>
+                { !hasAvailableOption(OPTIONS_DEFINITION) ? null :
+                    <DropdownMenu.Root>
+                        <DropdownMenu.Trigger asChild>
+                            <button className="group-options-button">
+                                <i className="bi bi-three-dots-vertical" />
+                            </button>
+                        </DropdownMenu.Trigger>
+
+                        <DropdownMenu.Content className="group-options" side="left">
+                            { OPTIONS_DEFINITION.map(def => renderOption(group, def)) }
+                            <DropdownMenu.Arrow className="group-options-arrow" height=".5rem" width="1rem" />
+                        </DropdownMenu.Content>
+                    </DropdownMenu.Root>
+                }
             </div>
-        </div>
-    );
+        );
+    }
 }

From f8d87a39fb61b12b5af7ee0338c5dfbb891f79eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Per=C3=B4nico=20Barbotin?=
 <lucas.peronico@dcx.ufpb.br>
Date: Wed, 22 Nov 2023 17:55:14 -0300
Subject: [PATCH 10/18] removendo console.log

---
 src/components/UniversiForm/UniversiForm.tsx                  | 2 --
 .../GroupContentMaterials/GroupContentMaterials.tsx           | 4 ----
 .../GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx | 1 -
 src/pages/Profile/ProfileSettings/ProfileSettings.tsx         | 2 --
 4 files changed, 9 deletions(-)

diff --git a/src/components/UniversiForm/UniversiForm.tsx b/src/components/UniversiForm/UniversiForm.tsx
index e02824f3..9567ff02 100644
--- a/src/components/UniversiForm/UniversiForm.tsx
+++ b/src/components/UniversiForm/UniversiForm.tsx
@@ -74,8 +74,6 @@ export function UniversiForm(props : formProps){
 
         let isValid = true
 
-        console.log(objects)
-
         objects.forEach(obj => {
             if(obj.validation && !obj.validation.validate(obj)) {
                 isValid = false
diff --git a/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials/GroupContentMaterials.tsx b/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials/GroupContentMaterials.tsx
index 50534aa0..18a9db0c 100644
--- a/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials/GroupContentMaterials.tsx
+++ b/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials/GroupContentMaterials.tsx
@@ -189,12 +189,9 @@ export function GroupContentMaterials() {
     async function handleWatchedButton(material : Content, event : any){
 
         event.stopPropagation();
-        console.log(material)
 
         let nextStatus : ContentStatusEnum = material.contentStatus.status == "DONE"  ? "NOT_VIEWED" : "DONE"
 
-        console.log(nextStatus)
-        console.log(material.contentStatus.status)
 
 
         await UniversimeApi.Capacity.createContentStatus({contentId : material.id});
@@ -242,7 +239,6 @@ export function GroupContentMaterials() {
     function expand(id : string){
 
         let containers = getVideoContainers()
-        console.log(containers)
 
         containers.popupContainer?.classList.remove("mini-player")
         containers.popupContainer?.classList.add("popup-container")
diff --git a/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx b/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
index 599ca5e3..374cde34 100644
--- a/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
+++ b/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
@@ -62,7 +62,6 @@ export function ManageMaterial(props: Readonly<ManageMaterialProps>) {
     if (context.editMaterial === undefined)
         return null;
 
-    console.log(context.editMaterial?.categories)
 
     return <UniversiForm 
             formTitle={context.editMaterial == null ? "Criar material" : "Editar material"}
diff --git a/src/pages/Profile/ProfileSettings/ProfileSettings.tsx b/src/pages/Profile/ProfileSettings/ProfileSettings.tsx
index 76bbd3b5..94bebd35 100644
--- a/src/pages/Profile/ProfileSettings/ProfileSettings.tsx
+++ b/src/pages/Profile/ProfileSettings/ProfileSettings.tsx
@@ -238,7 +238,6 @@ export function ProfileSettings(props: ProfileSettingsProps) {
                 const nameElement = itemBox
                     .querySelector(`[name="link-name"]`) as HTMLInputElement;
 
-                console.log("create-name", nameElement);
 
                 return {
                     ...l,
@@ -263,7 +262,6 @@ export function ProfileSettings(props: ProfileSettingsProps) {
                 const urlElement = linkItem
                     .querySelector(`[name="link-url"]`) as HTMLInputElement;
 
-                console.log("update-name", nameElement);
 
                 return {
                     id: nameAttr,

From 74a830664e5e5251253e9cc78e7eab391ef1172e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Per=C3=B4nico=20Barbotin?=
 <lucas.peronico@dcx.ufpb.br>
Date: Thu, 23 Nov 2023 19:46:07 -0300
Subject: [PATCH 11/18] =?UTF-8?q?finalizando=20=E2=9C=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../UniversiForm/ManageMaterial.less          | 228 -----------------
 .../UniversiForm/ManageMaterial.tsx           | 206 ---------------
 src/components/UniversiForm/UniversiForm.less | 240 +++++++++++++++++-
 src/components/UniversiForm/UniversiForm.tsx  |  63 +++--
 .../Validation/RequiredValidation.tsx         |   2 +-
 .../GroupContentMaterials.less                |  12 +
 .../GroupContentMaterials.tsx                 |   1 +
 .../ManageContent/ManageContent.tsx           |   8 +-
 .../ManageMaterial/ManageMaterial.tsx         |  41 +--
 .../GroupTabs/GroupGroups/GroupGroups.tsx     |   6 +-
 10 files changed, 300 insertions(+), 507 deletions(-)
 delete mode 100644 src/components/UniversiForm/ManageMaterial.less
 delete mode 100644 src/components/UniversiForm/ManageMaterial.tsx

diff --git a/src/components/UniversiForm/ManageMaterial.less b/src/components/UniversiForm/ManageMaterial.less
deleted file mode 100644
index 1342cbd5..00000000
--- a/src/components/UniversiForm/ManageMaterial.less
+++ /dev/null
@@ -1,228 +0,0 @@
-@import url(/src/layouts/colors.less);
-@import url(/src/layouts/fonts.less);
-@import url(/src/layouts/border-radius.less);
-
-.checkbox-input{
-    .checkbox{
-        width: 1rem !important;
-    }
-    legend{
-        display: contents !important;
-    }
-}
-#manage-material {
-    @left-padding: 2.1rem;
-
-    display: flex;
-    flex-direction: column;
-
-    background-color: white;
-    border-radius: var(--border-radius);
-
-    width: 45rem;
-    overflow: hidden;
-
-    box-sizing: 0px 4px 4px 0px rgba(0, 0, 0, 0.50);
-
-    @header-padding: 1rem;
-    @header-image-size: 3rem;
-
-    .header {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-
-        padding: @header-padding @left-padding;
-
-        background-color: @primary-color;
-        border-bottom: 5px solid @secondary-color;
-
-        color: white;
-
-        gap: 1rem;
-
-        img {
-            width: @header-image-size;
-            height: @header-image-size;
-        }
-
-        .title {
-            color: @font-color-v1;
-        }
-    }
-
-    .manage-material.fields {
-        max-height: calc(90vh - (@header-padding * 2) - @header-image-size);
-        overflow: auto;
-
-        .url-wrapper {
-            display: flex;
-            flex-direction: row;
-            align-items: start;
-
-            .type-fieldset {
-                padding-right: calc(@left-padding / 2);
-
-                .material-type-trigger {
-                    height: 3rem;
-                    padding: .5rem;
-                    aspect-ratio: 1;
-
-                    background-color: @card-background-color;
-
-                    cursor: pointer;
-                }
-
-                .type-dropdown-menu {
-                    display: flex;
-                    flex-direction: row;
-                    align-items: center;
-                    justify-content: space-between;
-
-                    background-color: @card-background-color;
-                    border-radius: @border-radius;
-
-                    border: 1px solid @primary-color;
-
-                    .type-dropdown-arrow {
-                        fill: @card-background-color
-                    }
-
-                    .type-dropdown-option {
-                        outline: none;
-
-                        .material-type-icon {
-                            height: calc(4rem - 10px);
-                            cursor: pointer;
-                            padding: 5px;
-                            margin: 5px;
-
-                            border-radius: 10px;
-
-                            &:hover {
-                                outline: 2px solid @primary-color;
-                            }
-                        }
-                    }
-
-                }
-            }
-
-
-            .url-fieldset {
-                width: 100%;
-                padding-left: 0;
-            }
-        }
-
-        fieldset {
-            border: none;
-            padding: 0 @left-padding;
-            margin-top: 1rem;
-
-            &:not(:last-child) {
-                margin-bottom: 1rem;
-            }
-
-            .field-input {
-                width: 100%;
-                background-color: @card-background-color;
-            }
-
-            input {
-                font-size: 1rem;
-                padding: 1rem .5rem;
-            }
-
-            textarea {
-                min-height: 2em;
-                max-height: 8rem;
-                padding: .5rem;
-
-                resize: vertical;
-            }
-
-            input, textarea, .material-type-trigger {
-                border: none;
-                border-radius: .625rem;
-
-                &:focus {
-                    outline: solid 2px @primary-color;
-                }
-            }
-
-            > legend {
-                display: flex;
-                flex-direction: row;
-                align-items: end;
-                justify-content: space-between;
-
-                width: 100%;
-
-                font-size: 1.25rem;
-                padding-bottom: 0.75rem;
-
-                .char-counter {
-                    display: inline;
-                    margin-right: .25em;
-
-                    font-size: .75em;
-                }
-            }
-        }
-
-        .operation-buttons {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: flex-end;
-            margin: 2.1rem;
-            gap: 1rem;
-
-            > button {
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                justify-content: center;
-
-                border: none;
-                width: 7.5em;
-                max-height: 2rem;
-                padding: .75em 0;
-                border-radius: .625rem;
-
-                gap: .5rem;
-
-                color: @font-color-v1;
-                font-size: .9rem;
-                font-weight: @font-weight-bold;
-
-                cursor: pointer;
-                will-change: background-color;
-
-                &.cancel-button {
-                    background-color: @secondary-color;
-                }
-
-                &.submit-button {
-                    &:not(:disabled) {
-                        background-color: @primary-color;
-                        &:hover {
-                            background-color: @secondary-color;
-                        }
-                    }
-
-                    &:disabled {
-                        background-color: @font-color-v3;
-                    }
-                }
-
-                .bi {
-                    width: 1rem;
-                    font-size: 1.2rem;
-                    margin: 0;
-                }
-            }
-        }
-    }
-}
diff --git a/src/components/UniversiForm/ManageMaterial.tsx b/src/components/UniversiForm/ManageMaterial.tsx
deleted file mode 100644
index db3eb779..00000000
--- a/src/components/UniversiForm/ManageMaterial.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-import { useContext, useEffect, useState } from "react";
-import Select from 'react-select';
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-
-import { CATEGORY_SELECT_STYLES, GroupContext } from "@/pages/Group";
-import UniversimeApi from "@/services/UniversimeApi";
-import { UniversiModal } from "@/components/UniversiModal";
-import { setStateAsValue } from "@/utils/tsxUtils";
-import { type OptionInMenu, renderOption } from "@/utils/dropdownMenuUtils";
-
-import type { ContentCreate_ResponseDTO, ContentEdit_ResponseDTO } from "@/services/UniversimeApi/Capacity";
-import type { Category, ContentType } from "@/types/Capacity";
-import "./ManageMaterial.less";
-import { FormInputs, UniversiForm } from "./UniversiForm";
-
-export type ManageMaterialProps = {
-    refreshMaterials: () => any;
-}
-
-const MAX_TITLE_LENGTH = 50;
-const MAX_DESC_LENGTH = 150;
-const MAX_URL_LENGTH = 100;
-
-export function ManageMaterial(props: Readonly<ManageMaterialProps>) {
-    const context = useContext(GroupContext);
-
-    const [title, setTitle] = useState<string>(context?.editMaterial?.title ?? "");
-    const [description, setDescription] = useState<string>(context?.editMaterial?.description ?? "");
-    const [url, setUrl] = useState<string>(context?.editMaterial?.url ?? "");
-    const [type, setType] = useState<ContentType>(context?.editMaterial?.type ?? "LINK");
-    // const [contentsIds, setContentsIds] = useState<string[]>((context?.editMaterial?.folders ?? []).map(c => c.id));
-    const [categoriesIds, setCategoriesIds] = useState<string[]>((context?.editMaterial?.categories ?? []).map(c => c.id));
-
-    const [availableCategories, setAvailableCategories] = useState<Category[]>([]);
-    useEffect(()=>{
-        UniversimeApi.Capacity.categoryList()
-            .then(response => {
-                if (response.success && response.body) {
-                    setAvailableCategories(response.body.categories);
-                }
-            })
-    }, []);
-
-    useEffect(() => {
-        if (context?.editMaterial === undefined)
-            return;
-
-        setTitle(context?.editMaterial?.title ?? "");
-        setDescription(context?.editMaterial?.description ?? "");
-        setUrl(context?.editMaterial?.url ?? "");
-        setType(context?.editMaterial?.type ?? "LINK");
-        // setContentsIds((context?.editMaterial?.folders ?? []).map(c => c.id));
-        setCategoriesIds((context?.editMaterial?.categories ?? []).map(c => c.id));
-    }, [context?.editMaterial]);
-
-    // prevent later checks
-    if (!context)
-        return null;
-
-    if (context.editMaterial === undefined)
-        return null;
-
-    const canSave = (title.length > 0) && (description.length > 0) && (url.length > 0);
-    const isNewMaterial = context.editMaterial === null;
-
-    const contentTypeIcon = getContentTypeIcon(type);
-
-    const MATERIAL_TYPE_OPTIONS: [OptionInMenu<ContentType>, ContentType][] = AVAILABLE_MATERIAL_TYPES
-        .map(t => {
-            return [{
-                text: getContentTypeOptionText(t[0], t[1]),
-                className: "type-dropdown-option",
-                onSelect(data){ setType(data); },
-            }, t[0]]
-        });
-
-
-    return <UniversiModal>
-        <div id="manage-material">
-
-            <div className="header">
-                <img src="/assets/imgs/create-content.png" />
-                <h1 className="title">{ isNewMaterial ? "Criar" : "Editar" } material</h1>
-            </div>
-
-
-            <div className="manage-material fields">
-                <fieldset>
-                    <legend>
-                        Título do Material
-                        <div className="char-counter">
-                            {title.length} / {MAX_TITLE_LENGTH}
-                        </div>
-                    </legend>
-                    <input className="field-input" type="text" defaultValue={context.editMaterial?.title} onChange={setStateAsValue(setTitle)} maxLength={MAX_TITLE_LENGTH}/>
-                </fieldset>
-
-                <fieldset>
-                    <legend>
-                        Descrição
-                        <div className="char-counter">
-                            {description.length} / {MAX_DESC_LENGTH}
-                        </div>
-                    </legend>
-                    <textarea className="field-input" defaultValue={context.editMaterial?.description ?? undefined} onChange={setStateAsValue(setDescription)} maxLength={MAX_DESC_LENGTH} />
-                </fieldset>
-
-                <section className="url-wrapper">
-                    <fieldset className="type-fieldset">
-                        <legend>Tipo</legend>
-                        <DropdownMenu.Root>
-                            <DropdownMenu.Trigger asChild>
-                                <img className="material-type-trigger" src={`/assets/imgs/${contentTypeIcon}.png`} />
-                            </DropdownMenu.Trigger>
-
-                            <DropdownMenu.Content className="type-dropdown-menu" side="top">
-                                { MATERIAL_TYPE_OPTIONS.map(([def, data]) => renderOption(data, def)) }
-                            </DropdownMenu.Content>
-                        </DropdownMenu.Root>
-                    </fieldset>
-
-                    <fieldset className="url-fieldset">
-                        <legend>
-                            Link de acesso
-                            <div className="char-counter">{url.length}/{MAX_URL_LENGTH}</div>
-                        </legend>
-                        <input className="field-input" type="url" defaultValue={context.editMaterial?.url} onChange={setStateAsValue(setUrl)} maxLength={MAX_URL_LENGTH} />
-                    </fieldset>
-                </section>
-
-                <fieldset>
-                    <legend>Categorias</legend>
-                    <Select placeholder="Selecionar categorias..." className="category-select" isMulti options={availableCategories}
-                        onChange={(value) => {setCategoriesIds(value.map(v => v.id))}}
-                        defaultValue={ availableCategories.filter(c => context.editMaterial?.categories.map(c => c.id).includes(c.id)) } noOptionsMessage={()=>"Categoria Não Encontrada"}
-                        getOptionLabel={c => c.name} getOptionValue={c => c.id} classNamePrefix="category-item" styles={CATEGORY_SELECT_STYLES}
-                    />
-                </fieldset>
-
-
-                <section className="operation-buttons">
-                    <button type="button" className="cancel-button" onClick={() => {context.setEditMaterial(undefined)}}>
-                        <i className="bi bi-x-circle-fill" />
-                        Cancelar
-                    </button>
-                    <button type="button" className="submit-button" onClick={handleSaveMaterial} disabled={!canSave} title={canSave ? undefined : "Preencha os dados antes de salvar"}>
-                        <i className="bi bi-check-circle-fill" />
-                        { isNewMaterial ? "Criar" : "Salvar" }
-                    </button>
-                </section>
-            </div>
-        </div>
-    </UniversiModal>
-
-    function handleSaveMaterial() {
-        if (!context || context.editMaterial === undefined)
-            return;
-
-        if (context.editMaterial === null) {
-            UniversimeApi.Capacity.createContent({
-                title, description, url, type, addCategoriesByIds: categoriesIds, addFoldersByIds: context.currentContent?.id, rating: 5,
-                // todo: image upload
-            }).then(afterSave);
-        }
-
-        else {
-            const addCategoriesByIds = categoriesIds
-                .filter(c => undefined === context.editMaterial!.categories.find(check => c === check.id));
-            const removeCategoriesByIds = context.editMaterial.categories
-                .filter(c => undefined === categoriesIds.find(check => c.id === check))
-                .map(c => c.id);
-
-            UniversimeApi.Capacity.editContent({
-                id: context.editMaterial.id, title, description, url, type, addCategoriesByIds, removeCategoriesByIds
-                // todo: image upload
-                // todo: verify if editing contents will be a thing
-            }).then(afterSave);
-        }
-
-        function afterSave(response: ContentCreate_ResponseDTO | ContentEdit_ResponseDTO) {
-            context!.setEditMaterial(undefined);
-            props.refreshMaterials();
-        }
-    }
-}
-
-function getContentTypeIcon(type: ContentType) {
-    return type === "FILE" || type === "FOLDER" ? "file"
-        : type === "LINK" ? "link"
-        : type === "VIDEO" ? "video"
-        : "link";
-}
-
-function getContentTypeOptionText(type: ContentType, title: string) {
-    return <img
-        className="material-type-icon"
-        src={`/assets/imgs/${getContentTypeIcon(type)}.png`}
-        title={title}
-    />
-}
-
-const AVAILABLE_MATERIAL_TYPES: [ContentType, string][] = [
-    ["LINK", "Link"],
-    ["VIDEO", "Vídeo"],
-    ["FILE", "Arquivo"],
-];
diff --git a/src/components/UniversiForm/UniversiForm.less b/src/components/UniversiForm/UniversiForm.less
index 5598c435..2603a931 100644
--- a/src/components/UniversiForm/UniversiForm.less
+++ b/src/components/UniversiForm/UniversiForm.less
@@ -1,3 +1,6 @@
+@import url(/src/layouts/colors.less);
+@import url(/src/layouts/fonts.less);
+@import url(/src/layouts/border-radius.less);
 .image-wrapper {
     display: flex;
     flex-direction: row;
@@ -28,4 +31,239 @@
             cursor: pointer;
         }
 
-}
\ No newline at end of file
+}
+.checkbox-input{
+    .checkbox{
+        width: 1rem !important;
+    }
+    legend{
+        display: contents !important;
+    }
+    fieldset{
+        display: flex;
+        justify-content: space-between;
+    }
+}
+#universi-form-container {
+    @left-padding: 2.1rem;
+
+    display: flex;
+    flex-direction: column;
+
+    background-color: white;
+    border-radius: var(--border-radius);
+
+    width: 45rem;
+    overflow: hidden;
+
+    box-sizing: 0px 4px 4px 0px rgba(0, 0, 0, 0.50);
+
+    @header-padding: 1rem;
+    @header-image-size: 3rem;
+
+    .header {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        padding: @header-padding @left-padding;
+
+        background-color: @primary-color;
+        border-bottom: 5px solid @secondary-color;
+
+        color: white;
+
+        gap: 1rem;
+
+        img {
+            width: @header-image-size;
+            height: @header-image-size;
+        }
+
+        .title {
+            color: @font-color-v1;
+        }
+    }
+
+    .universi-form-container.fields {
+        max-height: calc(90vh - (@header-padding * 2) - @header-image-size);
+        overflow: auto;
+
+        .url-wrapper {
+            display: flex;
+            flex-direction: row;
+            align-items: start;
+
+            .type-fieldset {
+                padding-right: calc(@left-padding / 2);
+
+                .material-type-trigger {
+                    height: 3rem;
+                    padding: .5rem;
+                    aspect-ratio: 1;
+
+                    background-color: @card-background-color;
+
+                    cursor: pointer;
+                }
+
+                .type-dropdown-menu {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    justify-content: space-between;
+
+                    background-color: @card-background-color;
+                    border-radius: @border-radius;
+
+                    border: 1px solid @primary-color;
+
+                    .type-dropdown-arrow {
+                        fill: @card-background-color
+                    }
+
+                    .type-dropdown-option {
+                        outline: none;
+
+                        .material-type-icon {
+                            height: calc(4rem - 10px);
+                            cursor: pointer;
+                            padding: 5px;
+                            margin: 5px;
+
+                            border-radius: 10px;
+
+                            &:hover {
+                                outline: 2px solid @primary-color;
+                            }
+                        }
+                    }
+
+                }
+            }
+
+
+            .url-fieldset {
+                width: 100%;
+                padding-left: 0;
+            }
+        }
+
+        fieldset {
+            border: none;
+            padding: 0 @left-padding;
+            margin-top: 1rem;
+
+            &:not(:last-child) {
+                margin-bottom: 1rem;
+            }
+
+            .field-input {
+                width: 100%;
+                background-color: @card-background-color;
+            }
+
+            input {
+                font-size: 1rem;
+                padding: 1rem .5rem;
+            }
+
+
+            textarea {
+                min-height: 2em;
+                max-height: 8rem;
+                padding: .5rem;
+
+                resize: vertical;
+            }
+
+            input, textarea, .material-type-trigger {
+                border: none;
+                border-radius: .625rem;
+
+                &:focus {
+                    outline: solid 2px @primary-color;
+                }
+            }
+
+            > legend {
+                display: flex;
+                flex-direction: row;
+                align-items: end;
+                justify-content: space-between;
+
+                width: 100%;
+
+                font-size: 1.25rem;
+                padding-bottom: 0.75rem;
+
+                .char-counter {
+                    display: inline;
+                    margin-right: .25em;
+
+                    font-size: .75em;
+                }
+            }
+        }
+
+        .operation-buttons {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: flex-end;
+            margin: 2.1rem;
+            gap: 1rem;
+
+            > button {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: center;
+
+                border: none;
+                width: 7.5em;
+                max-height: 2rem;
+                padding: .75em 0;
+                border-radius: .625rem;
+
+                gap: .5rem;
+
+                color: @font-color-v1;
+                font-size: .9rem;
+                font-weight: @font-weight-bold;
+
+                cursor: pointer;
+                will-change: background-color;
+
+                &.cancel-button {
+                    background-color: @secondary-color;
+                }
+
+                &.submit-button {
+                    &:not(:disabled) {
+                        background-color: @primary-color;
+                        &:hover {
+                            background-color: @secondary-color;
+                        }
+                    }
+
+                    &:disabled {
+                        background-color: @font-color-v3;
+                    }
+                }
+
+                .bi {
+                    width: 1rem;
+                    font-size: 1.2rem;
+                    margin: 0;
+                }
+            }
+        }
+    }
+}
+input:required:valid, textarea:required:valid{
+    border: 2px solid var(--success-color) !important;
+}
+input:required:invalid, textarea:required:invalid{
+    border: 2px solid var(--wrong-invalid-color) !important;
+}
diff --git a/src/components/UniversiForm/UniversiForm.tsx b/src/components/UniversiForm/UniversiForm.tsx
index 9567ff02..dfde296f 100644
--- a/src/components/UniversiForm/UniversiForm.tsx
+++ b/src/components/UniversiForm/UniversiForm.tsx
@@ -1,15 +1,15 @@
 import { ReactNode, useState, useContext, ChangeEvent, useEffect } from "react"
 
-import "./ManageMaterial.less"
 import "./UniversiForm.less"
-import { CATEGORY_SELECT_STYLES, GroupContext } from "@/pages/Group"
+import { GroupContext, CATEGORY_SELECT_STYLES } from "@/pages/Group"
 import UniversimeApi from "@/services/UniversimeApi"
 import { arrayBufferToBase64 } from "@/utils/fileUtils"
-import Select from "react-select"
+import Select, { CSSObjectWithLabel, GroupBase, StylesConfig } from "react-select"
+import CreatableSelect from "react-select"
 import { UniversiModal } from "../UniversiModal"
 import { Validation } from "./Validation/Validation"
-import { object } from "prop-types"
 import { RequiredValidation } from "./Validation/RequiredValidation"
+import { Category } from "@/types/Capacity"
 
 export type formProps = {
 
@@ -28,11 +28,11 @@ export type FormObject = {
     fileType? : undefined | string,
     value? : undefined | any | any[],
     required? : undefined | boolean,
-    options? : undefined | any[],
     file?: undefined | any,
     isListMulti? : true | undefined,
     listObjects? : any[],
-    validation? : Validation
+    validation? : Validation,
+    listCanCreate? : boolean
 }
 
 export enum FormInputs {
@@ -110,13 +110,6 @@ export function UniversiForm(props : formProps){
         return undefined;
     }
 
-    function getInput(object : FormObject){
-        if(object.type == FormInputs.TEXT || object.type == FormInputs.LONG_TEXT || object.type == FormInputs.URL)
-            return "text"
-        else if(object.type == FormInputs.FILE)
-            return "file"
-    }
-
     function getTextInput(object : FormObject, index : number){
         return (
             <>
@@ -134,7 +127,12 @@ export function UniversiForm(props : formProps){
                         </div>
                     }
                 </legend>
-                <input className="field-input" type="text" defaultValue={object.value} onChange={(e) => {handleChange(index, e.target.value)}} maxLength={getCharLimit(object)}/>
+                {
+                    object.type == FormInputs.LONG_TEXT ? 
+                        <textarea className="field-input" defaultValue={object.value} onChange={(e) => {handleChange(index, e.target.value)}} maxLength={getCharLimit(object)} required={object.required}/>
+                    :
+                        <input className="field-input" type="text" defaultValue={object.value} onChange={(e) => {handleChange(index, e.target.value)}} maxLength={getCharLimit(object)} required={object.required}/>
+                }
             </>
         )
     }
@@ -154,7 +152,7 @@ export function UniversiForm(props : formProps){
                 <img src={imageBuffer} className={"image-preview "+((imageBuffer === DEFAULT_IMAGE_PATH) ? "default-image" : "")}/>
                 <fieldset className="label-button">
                     <legend>{object.label}</legend>
-                    <input type="file" style={{display: "none"}} id="file-input" accept="image/*" onChange={(e) =>{changeFile(e, index)}}/>
+                    <input type="file" style={{display: "none"}} id="file-input" accept="image/*" onChange={(e) =>{changeFile(e, index)}} required={object.required}/>
                     <label htmlFor="file-input" className="image-button">
                         Selecionar arquivo
                     </label>
@@ -196,7 +194,7 @@ export function UniversiForm(props : formProps){
             <div className="checkbox-input">
                 <fieldset>
                     <legend>{object.label}</legend>
-                    <input id={index.toString()} name={index.toString()} checked={object.value} type="checkbox" className="field-input checkbox" onChange={(e) =>{handleChange(index, e.target.checked)}}></input>
+                    <input id={index.toString()} name={index.toString()} checked={object.value} type="checkbox" className="field-input checkbox" onChange={(e) =>{handleChange(index, e.target.checked)}} required={object.required}></input>
                 </fieldset>
             </div>
 
@@ -225,13 +223,26 @@ export function UniversiForm(props : formProps){
         return(
             <div>
                 <legend>{object.label}</legend>
-                <Select placeholder={`Selecionar ${object.label}`} className="category-select" isMulti={object.isListMulti} options={object.listObjects}
-                onChange={(value) => handleSelectChange(index, value)}
-                noOptionsMessage={()=>`Não foi possível encontrar ${object.label}`}
-                classNamePrefix="category-item"
-                styles={CATEGORY_SELECT_STYLES}
-                defaultValue={object.value}
-                />
+                {
+                    object.listCanCreate != undefined && object.listCanCreate ? 
+                        <CreatableSelect isClearable placeholder={`Selecionar ${object.label}`} className="category-select" isMulti={object.isListMulti} options={object.listObjects}
+                        onChange={(value) => handleSelectChange(index, value)}
+                        noOptionsMessage={()=>`Não foi possível encontrar ${object.label}`}
+                        classNamePrefix="category-item"
+                        styles={CATEGORY_SELECT_STYLES}
+                        defaultValue={object.value}
+                        required={object.required}
+                    />
+                    :
+                        <Select placeholder={`Selecionar ${object.label}`} className="category-select" isMulti={object.isListMulti} options={object.listObjects}
+                        onChange={(value) => handleSelectChange(index, value)}
+                        noOptionsMessage={()=>`Não foi possível encontrar ${object.label}`}
+                        classNamePrefix="category-item"
+                        styles={CATEGORY_SELECT_STYLES}
+                        defaultValue={Array.isArray(object.value)? object.listObjects.filter((item)=>object.value.includes(item.value)) : object.value != undefined ? object.listObjects.find((item)=> item.value == object.value) : null}
+                        required={object.required}
+                        />
+                }
 
             </div>
         )
@@ -241,7 +252,7 @@ export function UniversiForm(props : formProps){
         return(
             <>
                 <legend>{object.label}</legend>
-                <input max={object.charLimit} type="number" value={object.value} className="field-input" onChange={(e) => {handleNumberChange(index, e.target.value)}}/>
+                <input max={object.charLimit} type="number" value={object.value} className="field-input" onChange={(e) => {handleNumberChange(index, e.target.value)}} required={object.required}/>
             </>
         )
     }
@@ -300,8 +311,8 @@ export function UniversiForm(props : formProps){
 
     return(        
     <UniversiModal>
-        <div id="manage-material">
-            <div className="manage-material fields">
+        <div id="universi-form-container">
+            <div className="universi-form-container fields">
 
                 <div className="header">
                     <img src="/assets/imgs/create-content.png" />
diff --git a/src/components/UniversiForm/Validation/RequiredValidation.tsx b/src/components/UniversiForm/Validation/RequiredValidation.tsx
index a3b4665b..070c5886 100644
--- a/src/components/UniversiForm/Validation/RequiredValidation.tsx
+++ b/src/components/UniversiForm/Validation/RequiredValidation.tsx
@@ -6,7 +6,7 @@ export class RequiredValidation implements Validation{
     validate(object : FormObject): boolean {
         if(!object.required)
             return true
-        if(object.required && (object.value != null || object.value != undefined))
+        if(object.required && object.value != undefined && object.value.trim().length > 0)
             return true
         return false
     }
diff --git a/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials/GroupContentMaterials.less b/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials/GroupContentMaterials.less
index ef2ceebe..826e529b 100644
--- a/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials/GroupContentMaterials.less
+++ b/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials/GroupContentMaterials.less
@@ -9,6 +9,18 @@
         color: inherit;
     }
 
+    .content-title{
+        font-weight: bold;
+        font-size: larger;
+        width: 100%;
+    }
+
+    .top-container{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
 
     .material-list {
         .fullscreen-video{
diff --git a/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials/GroupContentMaterials.tsx b/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials/GroupContentMaterials.tsx
index 18a9db0c..800aa9c6 100644
--- a/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials/GroupContentMaterials.tsx
+++ b/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials/GroupContentMaterials.tsx
@@ -55,6 +55,7 @@ export function GroupContentMaterials() {
     return (
         <section id="materials" className="group-tab">
             <div className="heading top-container">
+                <div className="content-title">{groupContext.currentContent.name}</div>
                 <div className="go-right">
                     <Filter setter={setFilterMaterials} placeholderMessage={`Buscar em ${groupContext.group.name}`}/>
                         {  
diff --git a/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx b/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
index b3cc482a..3fcff116 100644
--- a/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
+++ b/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
@@ -1,10 +1,8 @@
 import { ChangeEvent, useContext, useEffect, useState } from "react";
-import Select, { CSSObjectWithLabel, GroupBase, StylesConfig } from 'react-select';
+import  { CSSObjectWithLabel, GroupBase, StylesConfig } from 'react-select';
 
 import UniversimeApi from "@/services/UniversimeApi";
-import { UniversiModal } from "@/components/UniversiModal";
 import { GroupContext } from "@/pages/Group/GroupContext";
-import { setStateAsValue } from "@/utils/tsxUtils";
 import { arrayBufferToBase64 } from "@/utils/fileUtils";
 
 import type { FolderCreate_ResponseDTO, FolderEdit_ResponseDTO } from "@/services/UniversimeApi/Capacity";
@@ -12,8 +10,6 @@ import type { Category } from "@/types/Capacity";
 import "./ManageContent.less";
 import { FormInputs, UniversiForm } from "@/components/UniversiForm/UniversiForm";
 
-const MAX_NAME_LENGTH = 50;
-const MAX_DESC_LENGTH = 200;
 
 const DEFAULT_IMAGE_PATH = "/assets/imgs/default-content.png";
 
@@ -70,7 +66,7 @@ export function ManageContent() {
             {DTOName: "description", label: "Descrição do conteúdo", type: FormInputs.LONG_TEXT, value: context.editContent?.description, required: true},
             {DTOName: "image", label: "Imagem do conteúdo", type: FormInputs.IMAGE, value: context.editContent?.image},
             {DTOName: "rating", label: "Rating do conteúdo", type: FormInputs.NUMBER, value: context.editContent?.rating, charLimit: 5},
-            {DTOName: "addCategoriesByIds", label: "Categorias do conteúdo", type: FormInputs.LIST, value: context.editContent?.categories.map((t) => ({value: t.id, label: t.name})), listObjects: availableCategories.map((t) => ({value: t.id, label: t.name})), isListMulti: true},
+            {DTOName: "addCategoriesByIds", label: "Categorias do conteúdo", type: FormInputs.LIST, value: context.editContent?.categories.map((t) => t.id), listObjects: availableCategories.map((t) => ({value: t.id, label: t.name})), isListMulti: true},
             {DTOName: "groupId", label: "Id do grupo", type: FormInputs.NONE, value: context.group.id},
             {DTOName: "groupPath", label: "Path do grupo", type: FormInputs.NONE, value: context.group.path},
             {DTOName: "id", label: "id do content", type: FormInputs.NONE, value: context.editContent?.id}
diff --git a/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx b/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
index 374cde34..26b29eb3 100644
--- a/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
+++ b/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
@@ -1,18 +1,11 @@
 import { useContext, useEffect, useState } from "react";
-import Select from 'react-select';
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 
-import { CATEGORY_SELECT_STYLES, GroupContext } from "@/pages/Group";
+import { GroupContext } from "@/pages/Group";
 import UniversimeApi from "@/services/UniversimeApi";
-import { UniversiModal } from "@/components/UniversiModal";
-import { setStateAsValue } from "@/utils/tsxUtils";
-import { type OptionInMenu, renderOption } from "@/utils/dropdownMenuUtils";
 
-import type { ContentCreate_ResponseDTO, ContentEdit_ResponseDTO } from "@/services/UniversimeApi/Capacity";
 import type { Category, ContentType } from "@/types/Capacity";
 import "./ManageMaterial.less";
 import { FormInputs, UniversiForm } from "@/components/UniversiForm/UniversiForm";
-import { TextValidation } from "@/components/UniversiForm/Validation/TextValidation";
 
 export type ManageMaterialProps = {
     refreshMaterials: () => any;
@@ -25,14 +18,6 @@ const MAX_URL_LENGTH = 100;
 export function ManageMaterial(props: Readonly<ManageMaterialProps>) {
     const context = useContext(GroupContext);
 
-    const [title, setTitle] = useState<string>(context?.editMaterial?.title ?? "");
-    const [description, setDescription] = useState<string>(context?.editMaterial?.description ?? "");
-    const [url, setUrl] = useState<string>(context?.editMaterial?.url ?? "");
-    const [type, setType] = useState<ContentType>(context?.editMaterial?.type ?? "LINK");
-    const [rating, setRating] = useState<number>(context?.editMaterial?.rating ?? 0);
-    const [contentsIds, setContentsIds] = useState<string[]>((context?.editMaterial?.folders ?? []).map(c => c.id));
-    const [categoriesIds, setCategoriesIds] = useState<string[]>((context?.editMaterial?.categories ?? []).map(c => c.id));
-
     const [availableCategories, setAvailableCategories] = useState<Category[]>([]);
     useEffect(()=>{
         UniversimeApi.Capacity.categoryList()
@@ -43,17 +28,6 @@ export function ManageMaterial(props: Readonly<ManageMaterialProps>) {
             })
     }, []);
 
-    useEffect(() => {
-        if (context?.editMaterial === undefined)
-            return;
-
-        setTitle(context?.editMaterial?.title ?? "");
-        setDescription(context?.editMaterial?.description ?? "");
-        setUrl(context?.editMaterial?.url ?? "");
-        setType(context?.editMaterial?.type ?? "LINK");
-        setContentsIds((context?.editMaterial?.folders ?? []).map(c => c.id));
-        setCategoriesIds((context?.editMaterial?.categories ?? []).map(c => c.id));
-    }, [context?.editMaterial]);
 
     // prevent later checks
     if (!context)
@@ -70,12 +44,12 @@ export function ManageMaterial(props: Readonly<ManageMaterialProps>) {
                 {DTOName: "description", label: "Descrição do material", type: FormInputs.LONG_TEXT, value: context.editMaterial?.description, required: true},
                 {DTOName: "rating", label: "Rating do material", type: FormInputs.NUMBER, value: context.editMaterial?.rating},
                 {DTOName: "url", label: "Link do material", type: FormInputs.URL, value: context.editMaterial?.url, required: true},
-                {DTOName: "type", label: "Tipo do material", type: FormInputs.LIST, value : {value: context.editMaterial?.type, label: context.editMaterial?.type}, listObjects: AVAILABLE_MATERIAL_TYPES.map(([t] : [ContentType, string])=>({value: t, label: t}))},
-                {DTOName: "addCategoriesByIds", label: "Categorias", type: FormInputs.LIST, value: context.editMaterial?.categories.map((t)=>({label: t.name, value: t.id})), listObjects: availableCategories.map(t => ({value: t.id, label: t.name})), isListMulti: true},
+                {DTOName: "type", label: "Tipo do material", type: FormInputs.LIST, value : context.editMaterial?.type, listObjects: AVAILABLE_MATERIAL_TYPES.map(([t] : [ContentType, string])=>({value: t, label: t}))},
+                {DTOName: "addCategoriesByIds", label: "Categorias", type: FormInputs.LIST, value: context.editMaterial?.categories.map((t)=>(t.id)),  listObjects: availableCategories.map(t => ({value: t.id, label: t.name})), isListMulti: true},
                 {DTOName: "addFoldersByIds", label: "", type: FormInputs.NONE, value: context.editMaterial ? context.editMaterial?.folders.map(t=>(t.id)) : context.currentContent?.id},
                 {DTOName: "id", label: "", type: FormInputs.NONE, value: context.editMaterial?.id}
             ]}  requisition={context.editMaterial ? UniversimeApi.Capacity.editContent : UniversimeApi.Capacity.createContent}
-                callback={() => {context.setEditMaterial(undefined); props.refreshMaterials()}}
+                callback={() => {context.setEditMaterial(undefined);  props.refreshMaterials()}}
             ></UniversiForm>
 
 }
@@ -87,13 +61,6 @@ function getContentTypeIcon(type: ContentType) {
         : "link";
 }
 
-function getContentTypeOptionText(type: ContentType, title: string) {
-    return <img
-        className="material-type-icon"
-        src={`/assets/imgs/${getContentTypeIcon(type)}.png`}
-        title={title}
-    />
-}
 
 const AVAILABLE_MATERIAL_TYPES: [ContentType, string][] = [
     ["LINK", "Link"],
diff --git a/src/pages/Group/GroupTabs/GroupGroups/GroupGroups.tsx b/src/pages/Group/GroupTabs/GroupGroups/GroupGroups.tsx
index 1641b6f2..27585ce9 100644
--- a/src/pages/Group/GroupTabs/GroupGroups/GroupGroups.tsx
+++ b/src/pages/Group/GroupTabs/GroupGroups/GroupGroups.tsx
@@ -31,7 +31,7 @@ export function GroupGroups() {
                 groupContext.setEditGroup(data);
             },
             hidden() {
-                return (groupContext?.group.admin.id !== groupContext?.loggedData.profile.id || groupContext.loggedData.profile.id == groupContext.group.organization?.admin.id);
+                return (groupContext?.group.admin.id !== groupContext?.loggedData.profile.id && groupContext.loggedData.profile.id == groupContext.group.organization?.admin.id);
             },
         }
     ];
@@ -72,13 +72,15 @@ export function GroupGroups() {
                         {DTOName: "nickname", label: "Apelido do grupo", type: FormInputs.TEXT, value: groupContext.editGroup?.name, required: true, validation: new TextValidation},
                         {DTOName: "name", label: "Nome do grupo", type: FormInputs.TEXT, value: groupContext.editGroup?.nickname, required: true, validation: new TextValidation},
                         {DTOName: "description", label: "Descrição do grupo", type: FormInputs.LONG_TEXT, value: groupContext.editGroup?.description, required: true, validation: new TextValidation},
-                        {DTOName: "imageUrl", label: "Imagem do grupo", type: FormInputs.IMAGE, value: groupContext.editGroup ? groupImageUrl(groupContext.editGroup) : undefined},
+                        {DTOName: "imageUrl", label: "Imagem do grupo", type: FormInputs.IMAGE, value: (groupContext.editGroup ? groupImageUrl(groupContext.editGroup) : undefined)},
                         {DTOName: "groupType", label: "Tipo do grupo", type: FormInputs.LIST, value: groupContext.editGroup?.type, listObjects: groupTypes.map((t) => ({value: t[0], label: t[1]})), required: true, },
                         {DTOName: "canHaveSubgroup", label: "Pode criar grupo", type: FormInputs.BOOLEAN, value: groupContext.editGroup?.canCreateGroup},
                         {DTOName: "isPublic", label: "Grupo público", type: FormInputs.BOOLEAN, value: groupContext.editGroup?.publicGroup},
                         {DTOName: "canJoin", label: "Usuários podem entrar", type: FormInputs.BOOLEAN, value: groupContext.editGroup?.canEnter},
                         {DTOName: "isRootGroup", label: "Grupo raiz", type: FormInputs.BOOLEAN, value: groupContext.editGroup?.rootGroup},
                         {DTOName: "parentGroupId", label: "Id do grupo pai (grupo atual)", type: FormInputs.NONE, value: groupContext.group.id},
+                        {DTOName: "groupPath", label: "path", type: FormInputs.NONE, value: groupContext.editGroup?.path},
+
                     ]}
                     requisition={groupContext.editGroup ? UniversimeApi.Group.update : UniversimeApi.Group.create}
                     callback={()=>{groupContext.setEditGroup(undefined); groupContext.refreshData()}}

From 6de06d3569dc2652505279237e4876e9d1c2e2e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Per=C3=B4nico=20Barbotin?=
 <lucas.peronico@dcx.ufpb.br>
Date: Thu, 23 Nov 2023 19:48:40 -0300
Subject: [PATCH 12/18] Corrigindo erro de build

---
 src/pages/Group/GroupTabs/GroupGroups/GroupGroups.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Group/GroupTabs/GroupGroups/GroupGroups.tsx b/src/pages/Group/GroupTabs/GroupGroups/GroupGroups.tsx
index 27585ce9..046fb00b 100644
--- a/src/pages/Group/GroupTabs/GroupGroups/GroupGroups.tsx
+++ b/src/pages/Group/GroupTabs/GroupGroups/GroupGroups.tsx
@@ -21,7 +21,7 @@ export function GroupGroups() {
     const authContext = useContext(AuthContext);
 
     if(groupContext == null)
-        return
+        return <></>
 
     const OPTIONS_DEFINITION: OptionInMenu<Group>[] = [
         {

From 1b270273b3480c915df61cfafd70c601c7af1ab6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Per=C3=B4nico=20Barbotin?=
 <lucas.peronico@dcx.ufpb.br>
Date: Fri, 24 Nov 2023 10:32:57 -0300
Subject: [PATCH 13/18] Corrigindo erros do CreatableSelect

---
 src/components/UniversiForm/UniversiForm.tsx  | 24 +++++++++++++----
 .../ManageContent/ManageContent.tsx           | 19 +++++++++++++-
 .../ManageMaterial/ManageMaterial.tsx         | 26 ++++++++++++++++---
 3 files changed, 60 insertions(+), 9 deletions(-)

diff --git a/src/components/UniversiForm/UniversiForm.tsx b/src/components/UniversiForm/UniversiForm.tsx
index dfde296f..c10512f8 100644
--- a/src/components/UniversiForm/UniversiForm.tsx
+++ b/src/components/UniversiForm/UniversiForm.tsx
@@ -5,7 +5,7 @@ import { GroupContext, CATEGORY_SELECT_STYLES } from "@/pages/Group"
 import UniversimeApi from "@/services/UniversimeApi"
 import { arrayBufferToBase64 } from "@/utils/fileUtils"
 import Select, { CSSObjectWithLabel, GroupBase, StylesConfig } from "react-select"
-import CreatableSelect from "react-select"
+import CreatableSelect from "react-select/creatable"
 import { UniversiModal } from "../UniversiModal"
 import { Validation } from "./Validation/Validation"
 import { RequiredValidation } from "./Validation/RequiredValidation"
@@ -33,6 +33,7 @@ export type FormObject = {
     listObjects? : any[],
     validation? : Validation,
     listCanCreate? : boolean
+    onCreate? : undefined | ((value : any) =>any) 
 }
 
 export enum FormInputs {
@@ -220,26 +221,39 @@ export function UniversiForm(props : formProps){
     function getListInput(object : FormObject, index : number){
         if(!object.listObjects)
             return
+        const [optionsList, setOptionsList] = useState(object.listObjects);
+        
+        function createOption(inputValue : string){
+            if(!object.onCreate)
+                return
+            object.onCreate(inputValue)
+            .then((options : any)=>{
+                console.log(options)
+                setOptionsList(options)
+            })
+        }
+
         return(
             <div>
                 <legend>{object.label}</legend>
                 {
                     object.listCanCreate != undefined && object.listCanCreate ? 
-                        <CreatableSelect isClearable placeholder={`Selecionar ${object.label}`} className="category-select" isMulti={object.isListMulti} options={object.listObjects}
+                        <CreatableSelect isClearable placeholder={`Selecionar ${object.label}`} className="category-select" isMulti={object.isListMulti} options={optionsList}
                         onChange={(value) => handleSelectChange(index, value)}
                         noOptionsMessage={()=>`Não foi possível encontrar ${object.label}`}
                         classNamePrefix="category-item"
                         styles={CATEGORY_SELECT_STYLES}
-                        defaultValue={object.value}
+                        defaultValue={Array.isArray(object.value)? optionsList.filter((item)=>object.value.includes(item.value)) : object.value != undefined ? optionsList.find((item)=> item.value == object.value) : null}
                         required={object.required}
+                        onCreateOption={createOption}
                     />
                     :
-                        <Select placeholder={`Selecionar ${object.label}`} className="category-select" isMulti={object.isListMulti} options={object.listObjects}
+                        <Select placeholder={`Selecionar ${object.label}`} className="category-select" isMulti={object.isListMulti} options={optionsList}
                         onChange={(value) => handleSelectChange(index, value)}
                         noOptionsMessage={()=>`Não foi possível encontrar ${object.label}`}
                         classNamePrefix="category-item"
                         styles={CATEGORY_SELECT_STYLES}
-                        defaultValue={Array.isArray(object.value)? object.listObjects.filter((item)=>object.value.includes(item.value)) : object.value != undefined ? object.listObjects.find((item)=> item.value == object.value) : null}
+                        defaultValue={Array.isArray(object.value)? optionsList.filter((item)=>object.value.includes(item.value)) : object.value != undefined ? optionsList.find((item)=> item.value == object.value) : null}
                         required={object.required}
                         />
                 }
diff --git a/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx b/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
index 3fcff116..e0c27a80 100644
--- a/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
+++ b/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
@@ -59,6 +59,23 @@ export function ManageContent() {
     const canSave = (name.length > 0) && (description.length > 0);
     const isNewContent = context.editContent === null;
 
+    function handleCreateOption(value:any){
+        return UniversimeApi.Capacity.createCategory({name: value, image: ""})
+        .then(createResponse =>{
+            if(createResponse.success){
+                return UniversimeApi.Capacity.categoryList()
+                .then(response =>{
+                    if (response.success && response.body) {
+                        setAvailableCategories(response.body.categories);
+
+                        const options = response.body.categories.map(t => ({ value: t.id, label: t.name }));
+                        return options;
+                    }
+                })
+            }
+        }) 
+    }
+
     return<UniversiForm
         formTitle={context.editContent == null ? "Criar conteúdo" : "Editar conteúdo"}
         objects={[
@@ -66,7 +83,7 @@ export function ManageContent() {
             {DTOName: "description", label: "Descrição do conteúdo", type: FormInputs.LONG_TEXT, value: context.editContent?.description, required: true},
             {DTOName: "image", label: "Imagem do conteúdo", type: FormInputs.IMAGE, value: context.editContent?.image},
             {DTOName: "rating", label: "Rating do conteúdo", type: FormInputs.NUMBER, value: context.editContent?.rating, charLimit: 5},
-            {DTOName: "addCategoriesByIds", label: "Categorias do conteúdo", type: FormInputs.LIST, value: context.editContent?.categories.map((t) => t.id), listObjects: availableCategories.map((t) => ({value: t.id, label: t.name})), isListMulti: true},
+            {DTOName: "addCategoriesByIds", label: "Categorias do conteúdo", type: FormInputs.LIST, value: context.editContent?.categories.map((t) => t.id), listObjects: availableCategories.map((t) => ({value: t.id, label: t.name})), isListMulti: true, listCanCreate: true, onCreate: handleCreateOption},
             {DTOName: "groupId", label: "Id do grupo", type: FormInputs.NONE, value: context.group.id},
             {DTOName: "groupPath", label: "Path do grupo", type: FormInputs.NONE, value: context.group.path},
             {DTOName: "id", label: "id do content", type: FormInputs.NONE, value: context.editContent?.id}
diff --git a/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx b/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
index 26b29eb3..95e014ee 100644
--- a/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
+++ b/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
@@ -19,14 +19,18 @@ export function ManageMaterial(props: Readonly<ManageMaterialProps>) {
     const context = useContext(GroupContext);
 
     const [availableCategories, setAvailableCategories] = useState<Category[]>([]);
-    useEffect(()=>{
+    const fetchData = ()=>{
         UniversimeApi.Capacity.categoryList()
             .then(response => {
                 if (response.success && response.body) {
                     setAvailableCategories(response.body.categories);
                 }
             })
-    }, []);
+    };
+
+    useEffect(()=>{
+        fetchData()
+    }, [])
 
 
     // prevent later checks
@@ -36,6 +40,22 @@ export function ManageMaterial(props: Readonly<ManageMaterialProps>) {
     if (context.editMaterial === undefined)
         return null;
 
+    function handleCreateOption(value:any){
+        return UniversimeApi.Capacity.createCategory({name: value, image: ""})
+        .then(createResponse =>{
+            if(createResponse.success){
+                return UniversimeApi.Capacity.categoryList()
+                .then(response =>{
+                    if (response.success && response.body) {
+                        setAvailableCategories(response.body.categories);
+
+                        const options = response.body.categories.map(t => ({ value: t.id, label: t.name }));
+                        return options;
+                    }
+                })
+            }
+        }) 
+    }
 
     return <UniversiForm 
             formTitle={context.editMaterial == null ? "Criar material" : "Editar material"}
@@ -45,7 +65,7 @@ export function ManageMaterial(props: Readonly<ManageMaterialProps>) {
                 {DTOName: "rating", label: "Rating do material", type: FormInputs.NUMBER, value: context.editMaterial?.rating},
                 {DTOName: "url", label: "Link do material", type: FormInputs.URL, value: context.editMaterial?.url, required: true},
                 {DTOName: "type", label: "Tipo do material", type: FormInputs.LIST, value : context.editMaterial?.type, listObjects: AVAILABLE_MATERIAL_TYPES.map(([t] : [ContentType, string])=>({value: t, label: t}))},
-                {DTOName: "addCategoriesByIds", label: "Categorias", type: FormInputs.LIST, value: context.editMaterial?.categories.map((t)=>(t.id)),  listObjects: availableCategories.map(t => ({value: t.id, label: t.name})), isListMulti: true},
+                {DTOName: "addCategoriesByIds", label: "Categorias", type: FormInputs.LIST, value: context.editMaterial?.categories.map((t)=>(t.id)),  listObjects: availableCategories.map(t => ({value: t.id, label: t.name})), isListMulti: true, listCanCreate: true, onCreate: handleCreateOption},
                 {DTOName: "addFoldersByIds", label: "", type: FormInputs.NONE, value: context.editMaterial ? context.editMaterial?.folders.map(t=>(t.id)) : context.currentContent?.id},
                 {DTOName: "id", label: "", type: FormInputs.NONE, value: context.editMaterial?.id}
             ]}  requisition={context.editMaterial ? UniversimeApi.Capacity.editContent : UniversimeApi.Capacity.createContent}

From 44764e26bfa1f4748ed5dbdea5a9460822f9984c Mon Sep 17 00:00:00 2001
From: 710lucas <lucasperonicobarbotin@gmail.com>
Date: Wed, 29 Nov 2023 16:22:49 -0300
Subject: [PATCH 14/18] =?UTF-8?q?Refatorando=20c=C3=B3digo=20de=20Universi?=
 =?UTF-8?q?Form?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Douglas Sebastian <douglas.sebastian.mme@gmail.com>
---
 src/components/UniversiForm/UniversiForm.tsx  | 296 +++++++++++++-----
 .../Validation/NumberValidation.tsx           |  12 +
 .../Validation/RequiredValidation.tsx         |  16 +-
 .../Validation/TextValidation.tsx             |  17 +-
 .../UniversiForm/Validation/Validation.tsx    |   6 +-
 .../Validation/ValidationComposite.tsx        |  44 +++
 .../ManageContent/ManageContent.tsx           |  31 +-
 .../ManageMaterial/ManageMaterial.tsx         |  38 ++-
 .../GroupTabs/GroupGroups/GroupGroups.tsx     |  42 ++-
 9 files changed, 367 insertions(+), 135 deletions(-)
 create mode 100644 src/components/UniversiForm/Validation/NumberValidation.tsx
 create mode 100644 src/components/UniversiForm/Validation/ValidationComposite.tsx

diff --git a/src/components/UniversiForm/UniversiForm.tsx b/src/components/UniversiForm/UniversiForm.tsx
index c10512f8..b1839305 100644
--- a/src/components/UniversiForm/UniversiForm.tsx
+++ b/src/components/UniversiForm/UniversiForm.tsx
@@ -10,6 +10,9 @@ import { UniversiModal } from "../UniversiModal"
 import { Validation } from "./Validation/Validation"
 import { RequiredValidation } from "./Validation/RequiredValidation"
 import { Category } from "@/types/Capacity"
+import { ValidationComposite } from "./Validation/ValidationComposite"
+import { object } from "prop-types"
+import { makeClassName } from "@/utils/tsxUtils"
 
 export type formProps = {
 
@@ -20,31 +23,61 @@ export type formProps = {
     
 }
 
-export type FormObject = {
+type FormObjectBase<FormType extends FormInputs, ValueType> = {
     DTOName : string,
     label : string,
-    type : FormInputs,
-    charLimit? : undefined | number,
-    fileType? : undefined | string,
-    value? : undefined | any | any[],
-    required? : undefined | boolean,
-    file?: undefined | any,
-    isListMulti? : true | undefined,
-    listObjects? : any[],
-    validation? : Validation,
-    listCanCreate? : boolean
-    onCreate? : undefined | ((value : any) =>any) 
+    type: FormType,
+
+    value?: ValueType,
+    required?: boolean,
+    validation?: ValidationComposite<ValueType>,
+};
+
+export type FormObjectText = FormObjectBase<FormInputs.TEXT | FormInputs.LONG_TEXT | FormInputs.URL, string> & {
+    charLimit?: number;
+};
+
+export type FormObjectNumber = FormObjectBase<FormInputs.NUMBER, number> & {
+    minValue?: number;
+    maxValue?: number;
+};
+
+export type FormObjectBoolean = FormObjectBase<FormInputs.BOOLEAN, boolean>;
+
+export type FormObjectImage = FormObjectBase<FormInputs.IMAGE, string> & {
+    defaultImageUrl?: string;
+};
+
+export type FormObjectFile = FormObjectBase<FormInputs.FILE, File> & {
+    fileType?: string;
+};
+
+export type FormObjectHidden<T> = FormObjectBase<FormInputs.HIDDEN, T>;
+
+export type FormObjectSelectSingle<T> = FormObjectBase<FormInputs.SELECT_SINGLE, T> & SelectProps<T> & { stylesConfig?: StylesConfig<SelectOption<T>, true, GroupBase<T & SelectOption<T>>> };
+export type FormObjectSelectMulti<T> = FormObjectBase<FormInputs.SELECT_MULTI, T[]> & SelectProps<T> & { stylesConfig?: StylesConfig<SelectOption<T>, true, GroupBase<T&SelectOption<T>>> };
+type SelectProps<T> = {
+    canCreate?: boolean,
+    onCreate?: (value : string) => any,
+    options?: SelectOption<T>[],
+};
+type SelectOption<T> = {
+    label: string,
+    value: T
 }
 
+export type FormObject<T = any> = FormObjectText | FormObjectNumber | FormObjectBoolean | FormObjectImage | FormObjectFile | FormObjectHidden<T> | FormObjectSelectSingle<T> | FormObjectSelectMulti<T>;
+
 export enum FormInputs {
     TEXT,
     LONG_TEXT,
-    FILE,
     URL,
-    LIST,
-    BOOLEAN,
+    FILE,
     IMAGE,
-    NONE,
+    SELECT_SINGLE,
+    SELECT_MULTI,
+    BOOLEAN,
+    HIDDEN,
     NUMBER
 }
 
@@ -61,12 +94,28 @@ export function UniversiForm(props : formProps){
 
     useEffect(()=>{
 
-        objects.forEach(obj => { 
-            if(obj.type in [FormInputs.TEXT, FormInputs.LONG_TEXT, FormInputs.URL] && !obj.charLimit){
-                obj.charLimit = obj.type == FormInputs.TEXT ? MAX_TEXT_LENGTH : obj.type == FormInputs.LONG_TEXT ? MAX_LONG_TEXT_LENGTH : MAX_URL_LENGTH;
+        objects.forEach(obj => {
+            if ((obj.type === FormInputs.TEXT || obj.type === FormInputs.LONG_TEXT || obj.type === FormInputs.URL)) {
+                if(!obj.charLimit){
+                    obj.charLimit = obj.type === FormInputs.TEXT
+                        ? MAX_TEXT_LENGTH
+                        : obj.type === FormInputs.LONG_TEXT
+                            ? MAX_LONG_TEXT_LENGTH
+                            : MAX_URL_LENGTH;
+                }
+                if(obj.value == undefined)
+                    obj.value = ""
             }
-            if(!obj.validation && obj.required)
-                obj.validation = new RequiredValidation
+
+            if (!obj.validation) {
+                obj.validation = ValidationComposite.generate(obj.type);
+            }
+
+            if (obj.required) {
+                obj.validation.addValidation(new RequiredValidation());
+            }
+
+
         })
 
     }, [])
@@ -91,11 +140,17 @@ export function UniversiForm(props : formProps){
             return updatedObjects
         })
     }
-    const handleFileChange = (index : number, newValue : any) => {
+    const handleFileChange = (index : number, newValue : File | undefined) => {
         setObjects((oldObjects) =>{
-            const updatedObjects = [...oldObjects]
-            updatedObjects[index].file = newValue;
-            return updatedObjects
+            const updatedObjects = [...oldObjects];
+            const updatedObject = updatedObjects[index];
+
+            if (updatedObject.type === FormInputs.IMAGE || updatedObject.type === FormInputs.FILE) {
+                updatedObject.value = newValue;
+                updatedObjects[index] = updatedObject;
+            }
+
+            return updatedObjects;
         })
     }
 
@@ -111,7 +166,7 @@ export function UniversiForm(props : formProps){
         return undefined;
     }
 
-    function getTextInput(object : FormObject, index : number){
+    function getTextInput(object : FormObjectText, index : number) {
         return (
             <>
                 <legend>
@@ -138,22 +193,57 @@ export function UniversiForm(props : formProps){
         )
     }
 
-    function getImageBuffer(object : FormObject){
-        if(object.value)
-            return "data:image/jpeg;base64,"+arrayBufferToBase64(object.file);
-        return DEFAULT_IMAGE_PATH
-    }
+    // function getImageBuffer(object : FormObjectImage) {
+    //     if(object.value)
+    //         return "data:image/jpeg;base64,"+arrayBufferToBase64(object.value);
+    //     return DEFAULT_IMAGE_PATH
+    // }
+
+    function getImageInput(object : FormObjectImage, index : number){
+        const [imageFile, setImageFile] = useState<File>();
+        const [imageBuffer, setImageBuffer] = useState<ArrayBuffer>();
+
+        useEffect(() => {
+            if (!imageFile) {
+                setImageBuffer(undefined);
+                return;
+            }
+
+            const reader = new FileReader();
+            reader.onloadend = async function (this, ev) {
+                if (ev.target?.readyState == FileReader.DONE && ev.target.result) {
+                    setImageBuffer(ev.target.result as ArrayBuffer);
+
+                    if (!imageFile)
+                        return;
+
+                    const res = await UniversimeApi.Image.upload({image: imageFile})
+                    if(res.success && res.body)
+                        handleChange(index, res.body.link)
+                }
+            };
+
+            reader.readAsArrayBuffer(imageFile);
 
-    function getImageInput(object : FormObject, index : number){
+        }, [imageFile]);
 
-        const imageBuffer = getImageBuffer(object)
+        const renderedImageUrl = imageBuffer != undefined
+            ? "data:image/jpeg;base64, " + arrayBufferToBase64(imageBuffer)
+            : object.defaultImageUrl ? 
+                object.defaultImageUrl
+            : DEFAULT_IMAGE_PATH;
+
+        const className = makeClassName([
+            "image-preview",
+            imageBuffer ? "default-image" : undefined,
+        ]);
 
         return(
             <div className="image-wrapper">
-                <img src={imageBuffer} className={"image-preview "+((imageBuffer === DEFAULT_IMAGE_PATH) ? "default-image" : "")}/>
+                <img src={renderedImageUrl} className={className}/>
                 <fieldset className="label-button">
                     <legend>{object.label}</legend>
-                    <input type="file" style={{display: "none"}} id="file-input" accept="image/*" onChange={(e) =>{changeFile(e, index)}} required={object.required}/>
+                    <input type="file" style={{display: "none"}} id="file-input" accept="image/*" onChange={(e) =>{ setImageFile(e.currentTarget.files?.item(0) ?? undefined) }} required={object.required}/>
                     <label htmlFor="file-input" className="image-button">
                         Selecionar arquivo
                     </label>
@@ -163,30 +253,30 @@ export function UniversiForm(props : formProps){
 
     }
 
-    async function changeFile(e : ChangeEvent<HTMLInputElement>, index: number){
-        const imageFile = e.currentTarget.files?.item(0);
-        if(!imageFile){
-            handleFileChange(index, undefined);
-            return;
-        }
-
-        const reader = new FileReader();
-        reader.onloadend = renderLoadedImage;
-        reader.readAsArrayBuffer(imageFile)
-
-        async function renderLoadedImage(this: FileReader, ev: ProgressEvent<FileReader>){
-            if(ev.target?.readyState == FileReader.DONE && ev.target.result){
-                handleFileChange(index, ev.target.result as ArrayBuffer)
-                const imageFile = (document.getElementById("file-input") as HTMLInputElement).files?.item(0) 
-                if(imageFile){
-                    const res = await UniversimeApi.Image.upload({image: imageFile})
-                    if(res.success && res.body)
-                        handleChange(index, res.body.link)
-                }
+    // async function changeFile(e : ChangeEvent<HTMLInputElement>, index: number){
+    //     const imageFile = e.currentTarget.files?.item(0);
+    //     if(!imageFile){
+    //         handleFileChange(index, undefined);
+    //         return;
+    //     }
+
+    //     const reader = new FileReader();
+    //     reader.onloadend = renderLoadedImage;
+    //     reader.readAsArrayBuffer(imageFile)
+
+    //     async function renderLoadedImage(this: FileReader, ev: ProgressEvent<FileReader>){
+    //         if(ev.target?.readyState == FileReader.DONE && ev.target.result){
+    //             handleFileChange(index, ev.target.result as ArrayBuffer)
+    //             const imageFile = (document.getElementById("file-input") as HTMLInputElement).files?.item(0) 
+    //             if(imageFile){
+    //                 const res = await UniversimeApi.Image.upload({image: imageFile})
+    //                 if(res.success && res.body)
+    //                     handleChange(index, res.body.link)
+    //             }
                 
-            }
-        }
-    }
+    //         }
+    //     }
+    // }
 
     function getBooleanInput(object : FormObject, index : number){
 
@@ -203,25 +293,32 @@ export function UniversiForm(props : formProps){
     }
 
     const handleSelectChange = (index : number, newValue : any) => {
+        console.log(newValue)
         setObjects((oldObjects) =>{
-            const updatedObjects = [...oldObjects]
-            if(!updatedObjects[index].value && updatedObjects[index].isListMulti)
-                updatedObjects[index].value = []
-            if(updatedObjects[index].isListMulti){
-                newValue.forEach((value : any) =>{
-                updatedObjects[index].value.push(value.value);
-                })
+            const updatedObjects = [...oldObjects];
+            const updatedObject = updatedObjects[index];
+
+            if (updatedObject.type === FormInputs.SELECT_SINGLE) {
+                updatedObject.value = newValue.value;
+            }
+
+            if(updatedObject.type === FormInputs.SELECT_MULTI){
+                if(!updatedObject.value)
+                    updatedObject.value = []
+
+                updatedObject.value = updatedObject.value.concat(newValue.map((m: any) => m.value));
             }
-            else
-                updatedObjects[index].value = newValue.value
+
+            updatedObjects[index] = updatedObject;
             return updatedObjects
         })
     }
 
-    function getListInput(object : FormObject, index : number){
-        if(!object.listObjects)
+
+    function getListInput<T>(object : FormObjectSelectMulti<T> | FormObjectSelectSingle<T>, index : number){
+        if(!object.options && !object.canCreate)
             return
-        const [optionsList, setOptionsList] = useState(object.listObjects);
+        const [optionsList, setOptionsList] = useState(object.options);
         
         function createOption(inputValue : string){
             if(!object.onCreate)
@@ -233,27 +330,54 @@ export function UniversiForm(props : formProps){
             })
         }
 
+        function getDefaultValueMulti<T>(object : FormObjectSelectMulti<T>, optionsList : typeof object.options){
+            return Array.isArray(object.value)?
+                optionsList?.filter((option)=>
+                    object.value?.some((item) => Object.is(item, option.value))
+                ).map((item)=> ({value: item.value, label: item.label}))
+            :
+                undefined
+        }
+        function getDefaultValueSingle<T>(object : FormObjectSelectSingle<T>, optionsList : typeof object.options){
+            return Array.isArray(object.value) && object.value.every((item)=>'some' in item)?
+                optionsList?.filter((option)=>
+                    option.value == object.value
+                ).map((item)=>({value: item.value, label: item.label}))
+            :
+                undefined
+        }
+
         return(
             <div>
                 <legend>{object.label}</legend>
                 {
-                    object.listCanCreate != undefined && object.listCanCreate ? 
-                        <CreatableSelect isClearable placeholder={`Selecionar ${object.label}`} className="category-select" isMulti={object.isListMulti} options={optionsList}
+                    object.canCreate != undefined && object.canCreate ? 
+                        <CreatableSelect isClearable placeholder={`Selecionar ${object.label}`} className="category-select" isMulti={object.type === FormInputs.SELECT_MULTI ? true : undefined} options={optionsList}
                         onChange={(value) => handleSelectChange(index, value)}
                         noOptionsMessage={()=>`Não foi possível encontrar ${object.label}`}
                         classNamePrefix="category-item"
-                        styles={CATEGORY_SELECT_STYLES}
-                        defaultValue={Array.isArray(object.value)? optionsList.filter((item)=>object.value.includes(item.value)) : object.value != undefined ? optionsList.find((item)=> item.value == object.value) : null}
+                        styles={object.stylesConfig}
+                        defaultValue={
+                            object.type === FormInputs.SELECT_MULTI ? 
+                                getDefaultValueMulti(object, optionsList)
+                            :
+                                getDefaultValueSingle(object, optionsList)
+                        }
                         required={object.required}
                         onCreateOption={createOption}
                     />
                     :
-                        <Select placeholder={`Selecionar ${object.label}`} className="category-select" isMulti={object.isListMulti} options={optionsList}
+                        <Select isClearable placeholder={`Selecionar ${object.label}`} className="category-select" isMulti={object.type === FormInputs.SELECT_MULTI ? true : undefined} options={optionsList}
                         onChange={(value) => handleSelectChange(index, value)}
                         noOptionsMessage={()=>`Não foi possível encontrar ${object.label}`}
                         classNamePrefix="category-item"
-                        styles={CATEGORY_SELECT_STYLES}
-                        defaultValue={Array.isArray(object.value)? optionsList.filter((item)=>object.value.includes(item.value)) : object.value != undefined ? optionsList.find((item)=> item.value == object.value) : null}
+                        styles={object.stylesConfig}
+                        defaultValue={
+                            object.type === FormInputs.SELECT_MULTI ? 
+                                getDefaultValueMulti(object, optionsList)
+                            :
+                                getDefaultValueSingle(object, optionsList)
+                        }
                         required={object.required}
                         />
                 }
@@ -262,11 +386,11 @@ export function UniversiForm(props : formProps){
         )
     }
 
-    function getNumberInput(object : FormObject, index : number){
+    function getNumberInput(object : FormObjectNumber, index : number){
         return(
             <>
                 <legend>{object.label}</legend>
-                <input max={object.charLimit} type="number" value={object.value} className="field-input" onChange={(e) => {handleNumberChange(index, e.target.value)}} required={object.required}/>
+                <input max={object.maxValue} type="number" value={object.value} className="field-input" onChange={(e) => {handleNumberChange(index, e.target.value)}} required={object.required}/>
             </>
         )
     }
@@ -275,11 +399,13 @@ export function UniversiForm(props : formProps){
 
         const obj = objects[index]
 
-        if(!obj)
+        if(!obj || obj.type != FormInputs.NUMBER)
             return
 
-        if(obj.charLimit && newValue > obj.charLimit)
-            newValue = obj.charLimit
+        if(obj.maxValue && newValue > obj.maxValue)
+            newValue = obj.maxValue
+        if(obj.minValue && newValue < obj.minValue)
+            newValue = obj.minValue
 
         handleChange(index, newValue)
 
@@ -287,7 +413,7 @@ export function UniversiForm(props : formProps){
 
     function renderObjects() : ReactNode{
         return objects.map((object, index) =>(
-            object.type == FormInputs.NONE ? <></> : 
+            object.type == FormInputs.HIDDEN ? <></> : 
             <fieldset key={index}>
                 {
                     object.type == FormInputs.TEXT ||
@@ -298,7 +424,7 @@ export function UniversiForm(props : formProps){
                     getImageInput(object, index)
                     : object.type == FormInputs.BOOLEAN ? 
                     getBooleanInput(object, index)
-                    : object.type == FormInputs.LIST ?
+                    : object.type == FormInputs.SELECT_SINGLE || object.type == FormInputs.SELECT_MULTI?
                     getListInput(object, index)
                     : object.type == FormInputs.NUMBER ?
                     getNumberInput(object, index)
@@ -352,4 +478,4 @@ export function UniversiForm(props : formProps){
     </UniversiModal>
     )
 
-}
\ No newline at end of file
+}
diff --git a/src/components/UniversiForm/Validation/NumberValidation.tsx b/src/components/UniversiForm/Validation/NumberValidation.tsx
new file mode 100644
index 00000000..ff40dc5c
--- /dev/null
+++ b/src/components/UniversiForm/Validation/NumberValidation.tsx
@@ -0,0 +1,12 @@
+import { FormObjectNumber } from "../UniversiForm";
+import { Validation } from "./Validation";
+
+export class NumberValidation implements Validation<number> {
+    validate(object: FormObjectNumber) {
+        if(!object.value)
+            return false
+        if((object.maxValue && object.value > object.maxValue) || (object.minValue && object.value < object.minValue))
+            return false;
+        return true;
+    }
+}
diff --git a/src/components/UniversiForm/Validation/RequiredValidation.tsx b/src/components/UniversiForm/Validation/RequiredValidation.tsx
index 070c5886..79d46fb2 100644
--- a/src/components/UniversiForm/Validation/RequiredValidation.tsx
+++ b/src/components/UniversiForm/Validation/RequiredValidation.tsx
@@ -1,14 +1,14 @@
 import { FormObject } from "../UniversiForm";
 import { Validation } from "./Validation";
 
-export class RequiredValidation implements Validation{
-
-    validate(object : FormObject): boolean {
+export class RequiredValidation implements Validation<any> {
+    validate(object : FormObject<any>): boolean {
         if(!object.required)
             return true
-        if(object.required && object.value != undefined && object.value.trim().length > 0)
-            return true
-        return false
-    }
 
-}
\ No newline at end of file
+        if (object.value === undefined)
+            return false;
+
+        return true;
+    }
+}
diff --git a/src/components/UniversiForm/Validation/TextValidation.tsx b/src/components/UniversiForm/Validation/TextValidation.tsx
index 005477e1..5fa2facd 100644
--- a/src/components/UniversiForm/Validation/TextValidation.tsx
+++ b/src/components/UniversiForm/Validation/TextValidation.tsx
@@ -1,18 +1,19 @@
-import { FormInputs, FormObject } from "../UniversiForm";
-import { Validation} from "./Validation";
+import { FormInputs, FormObjectText } from "../UniversiForm";
+import { RequiredValidation } from "./RequiredValidation";
+import { Validation } from "./Validation";
 
-export class TextValidation implements Validation{
+export class TextValidation implements Validation<string> {
 
-    validate(object: FormObject): boolean {
-        if(!object.required)
-            return true;
+    validate(object: FormObjectText): boolean {
         if(!object.value)
             return false
+
         if(object.charLimit && object.value.length > object.charLimit)
             return false
+
         if(object.value.trim().length == 0)
             return false
+
         return true;
     }
-
-}
\ No newline at end of file
+}
diff --git a/src/components/UniversiForm/Validation/Validation.tsx b/src/components/UniversiForm/Validation/Validation.tsx
index a0540bc1..597277af 100644
--- a/src/components/UniversiForm/Validation/Validation.tsx
+++ b/src/components/UniversiForm/Validation/Validation.tsx
@@ -1,7 +1,7 @@
 import { FormObject } from "../UniversiForm";
 
-export interface Validation{
+export interface Validation<ValueType> {
 
-    validate(object : FormObject) : boolean
+    validate(object : FormObject<ValueType>): boolean;
 
-}
\ No newline at end of file
+}
diff --git a/src/components/UniversiForm/Validation/ValidationComposite.tsx b/src/components/UniversiForm/Validation/ValidationComposite.tsx
new file mode 100644
index 00000000..a5759b70
--- /dev/null
+++ b/src/components/UniversiForm/Validation/ValidationComposite.tsx
@@ -0,0 +1,44 @@
+import { FormInputs, FormObject } from "../UniversiForm";
+import { Validation } from "./Validation";
+
+export class ValidationComposite<ValueType> {
+    private validations: Validation<ValueType>[];
+
+    constructor() {
+      this.validations = [];
+    }
+
+    addValidation(validation : Validation<ValueType>) {
+        this.validations.push(validation);
+        return this;
+    }
+
+    validate(object : FormObject<any>) {
+        for(const v of this.validations) {
+            const isValid = v.validate(object);
+            if (!isValid) return false;
+        }
+
+        return true;
+    }
+
+    static generate(type: FormInputs) {
+      if (type === FormInputs.TEXT || type === FormInputs.LONG_TEXT || type === FormInputs.URL) {
+         return new ValidationComposite<string>();
+      }
+
+      if (type === FormInputs.FILE || type === FormInputs.IMAGE) {
+         return new ValidationComposite<File>();
+      }
+
+      if (type === FormInputs.NUMBER) {
+         return new ValidationComposite<number>();
+      }
+
+      if (type === FormInputs.BOOLEAN) {
+         return new ValidationComposite<boolean>();
+      }
+
+      return new ValidationComposite<any>();
+    }
+}
diff --git a/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx b/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
index e0c27a80..c9fe8c50 100644
--- a/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
+++ b/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
@@ -79,14 +79,29 @@ export function ManageContent() {
     return<UniversiForm
         formTitle={context.editContent == null ? "Criar conteúdo" : "Editar conteúdo"}
         objects={[
-            {DTOName: "name", label: "Nome do conteúdo", type: FormInputs.TEXT, value: context.editContent?.name, required: true},
-            {DTOName: "description", label: "Descrição do conteúdo", type: FormInputs.LONG_TEXT, value: context.editContent?.description, required: true},
-            {DTOName: "image", label: "Imagem do conteúdo", type: FormInputs.IMAGE, value: context.editContent?.image},
-            {DTOName: "rating", label: "Rating do conteúdo", type: FormInputs.NUMBER, value: context.editContent?.rating, charLimit: 5},
-            {DTOName: "addCategoriesByIds", label: "Categorias do conteúdo", type: FormInputs.LIST, value: context.editContent?.categories.map((t) => t.id), listObjects: availableCategories.map((t) => ({value: t.id, label: t.name})), isListMulti: true, listCanCreate: true, onCreate: handleCreateOption},
-            {DTOName: "groupId", label: "Id do grupo", type: FormInputs.NONE, value: context.group.id},
-            {DTOName: "groupPath", label: "Path do grupo", type: FormInputs.NONE, value: context.group.path},
-            {DTOName: "id", label: "id do content", type: FormInputs.NONE, value: context.editContent?.id}
+            {
+                DTOName: "name", label: "Nome do conteúdo", type: FormInputs.TEXT, value: context.editContent?.name, required: true, charLimit: 100,
+            }, {
+                DTOName: "description", label: "Descrição do conteúdo", type: FormInputs.LONG_TEXT, value: context.editContent?.description ?? undefined, required: true, charLimit: 200,
+            }, {
+                DTOName: "image", label: "Imagem do conteúdo", type: FormInputs.IMAGE, value: undefined, required: false,
+                defaultImageUrl: context.editContent?.image
+                    ? context.editContent.image.startsWith("/")
+                        ? import.meta.env.VITE_UNIVERSIME_API + context.editContent.image
+                        : context.editContent.image
+                    : undefined,
+            }, {
+                DTOName: "rating", label: "Rating do conteúdo", type: FormInputs.NUMBER, value: context.editContent?.rating, minValue: 0, maxValue: 5, required: true,
+            }, {
+                DTOName: "addCategoriesByIds", label: "Categorias do conteúdo", type: FormInputs.SELECT_MULTI,
+                value: context.editContent?.categories.map(t => ({ label: t.name, value: t.id })) ?? [],
+                options: availableCategories.map(c => ({ label: c.name, value: c.id })),
+                canCreate: true, required: false, onCreate: handleCreateOption,
+            }, {
+                DTOName: "groupId", label: "Id do grupo", type: FormInputs.HIDDEN, value: context.group.id,
+            }, {
+                DTOName: "id", label: "Id do conteúdo", type: FormInputs.HIDDEN, value: context.editContent?.id,
+            },
         ]}
         requisition = {context.editContent ? UniversimeApi.Capacity.editFolder : UniversimeApi.Capacity.createFolder}
         callback={()=>{context.setEditContent(undefined); context.refreshData()}}
diff --git a/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx b/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
index 95e014ee..35621b60 100644
--- a/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
+++ b/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
@@ -58,16 +58,30 @@ export function ManageMaterial(props: Readonly<ManageMaterialProps>) {
     }
 
     return <UniversiForm 
+
             formTitle={context.editMaterial == null ? "Criar material" : "Editar material"}
             objects={[
-                {DTOName: "title", label: "Nome do material", type: FormInputs.TEXT, value: context.editMaterial?.title, required: true},
-                {DTOName: "description", label: "Descrição do material", type: FormInputs.LONG_TEXT, value: context.editMaterial?.description, required: true},
-                {DTOName: "rating", label: "Rating do material", type: FormInputs.NUMBER, value: context.editMaterial?.rating},
-                {DTOName: "url", label: "Link do material", type: FormInputs.URL, value: context.editMaterial?.url, required: true},
-                {DTOName: "type", label: "Tipo do material", type: FormInputs.LIST, value : context.editMaterial?.type, listObjects: AVAILABLE_MATERIAL_TYPES.map(([t] : [ContentType, string])=>({value: t, label: t}))},
-                {DTOName: "addCategoriesByIds", label: "Categorias", type: FormInputs.LIST, value: context.editMaterial?.categories.map((t)=>(t.id)),  listObjects: availableCategories.map(t => ({value: t.id, label: t.name})), isListMulti: true, listCanCreate: true, onCreate: handleCreateOption},
-                {DTOName: "addFoldersByIds", label: "", type: FormInputs.NONE, value: context.editMaterial ? context.editMaterial?.folders.map(t=>(t.id)) : context.currentContent?.id},
-                {DTOName: "id", label: "", type: FormInputs.NONE, value: context.editMaterial?.id}
+                {
+                    DTOName: "title", label: "Nome do material", type: FormInputs.TEXT, value: context.editMaterial?.title, required: true
+                }, {
+                    DTOName: "description", label: "Descrição do material", type: FormInputs.TEXT, value: context.editMaterial?.description ?? "", required: true
+                }, {
+                    DTOName: "rating", label: "Rating do material", type: FormInputs.NUMBER, value: context.editMaterial?.rating
+                }, {
+                    DTOName: "url", label: "Link do material", type: FormInputs.URL, value: context.editMaterial?.url, required: true
+                }, {
+                    DTOName: "type", label: "Tipo do material", type: FormInputs.SELECT_SINGLE, 
+                    options: AVAILABLE_MATERIAL_TYPES.map(t => ({value: t, label: t})), required: false, 
+                    value: context.editMaterial?.type ? { value: context.editMaterial.type, label: context.editMaterial.type } : undefined,
+                }, {
+                    DTOName: "addCategoriesByIds", label: "Categorias", type: FormInputs.SELECT_MULTI, 
+                    value: context.editMaterial?.categories.map((t)=>({value: t.id, label: t.name})) ?? [],  
+                    options: availableCategories.map(t => ({value: t.id, label: t.name})), canCreate: true, onCreate: handleCreateOption
+                }, {
+                    DTOName: "addFoldersByIds", label: "", type: FormInputs.HIDDEN, value: context.editMaterial ? context.editMaterial?.folders.map(t=>(t.id)) : context.currentContent?.id
+                }, {
+                    DTOName: "id", label: "", type: FormInputs.HIDDEN, value: context.editMaterial?.id
+                }
             ]}  requisition={context.editMaterial ? UniversimeApi.Capacity.editContent : UniversimeApi.Capacity.createContent}
                 callback={() => {context.setEditMaterial(undefined);  props.refreshMaterials()}}
             ></UniversiForm>
@@ -82,8 +96,8 @@ function getContentTypeIcon(type: ContentType) {
 }
 
 
-const AVAILABLE_MATERIAL_TYPES: [ContentType, string][] = [
-    ["LINK", "Link"],
-    ["VIDEO", "Vídeo"],
-    ["FILE", "Arquivo"],
+const AVAILABLE_MATERIAL_TYPES: string[] = [
+    "LINK",
+    "VIDEO",
+    "FILE",
 ];
diff --git a/src/pages/Group/GroupTabs/GroupGroups/GroupGroups.tsx b/src/pages/Group/GroupTabs/GroupGroups/GroupGroups.tsx
index 046fb00b..36bb1ceb 100644
--- a/src/pages/Group/GroupTabs/GroupGroups/GroupGroups.tsx
+++ b/src/pages/Group/GroupTabs/GroupGroups/GroupGroups.tsx
@@ -14,6 +14,7 @@ import { TextValidation } from "@/components/UniversiForm/Validation/TextValidat
 import UniversimeApi from "@/services/UniversimeApi";
 import { OptionInMenu, hasAvailableOption, renderOption } from "@/utils/dropdownMenuUtils";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { ValidationComposite } from "@/components/UniversiForm/Validation/ValidationComposite";
 
 export function GroupGroups() {
     const groupContext = useContext(GroupContext);
@@ -69,17 +70,36 @@ export function GroupGroups() {
                 <UniversiForm
                     formTitle={groupContext.editGroup == null ? "Criar grupo" : "Editar grupo"}
                     objects={[
-                        {DTOName: "nickname", label: "Apelido do grupo", type: FormInputs.TEXT, value: groupContext.editGroup?.name, required: true, validation: new TextValidation},
-                        {DTOName: "name", label: "Nome do grupo", type: FormInputs.TEXT, value: groupContext.editGroup?.nickname, required: true, validation: new TextValidation},
-                        {DTOName: "description", label: "Descrição do grupo", type: FormInputs.LONG_TEXT, value: groupContext.editGroup?.description, required: true, validation: new TextValidation},
-                        {DTOName: "imageUrl", label: "Imagem do grupo", type: FormInputs.IMAGE, value: (groupContext.editGroup ? groupImageUrl(groupContext.editGroup) : undefined)},
-                        {DTOName: "groupType", label: "Tipo do grupo", type: FormInputs.LIST, value: groupContext.editGroup?.type, listObjects: groupTypes.map((t) => ({value: t[0], label: t[1]})), required: true, },
-                        {DTOName: "canHaveSubgroup", label: "Pode criar grupo", type: FormInputs.BOOLEAN, value: groupContext.editGroup?.canCreateGroup},
-                        {DTOName: "isPublic", label: "Grupo público", type: FormInputs.BOOLEAN, value: groupContext.editGroup?.publicGroup},
-                        {DTOName: "canJoin", label: "Usuários podem entrar", type: FormInputs.BOOLEAN, value: groupContext.editGroup?.canEnter},
-                        {DTOName: "isRootGroup", label: "Grupo raiz", type: FormInputs.BOOLEAN, value: groupContext.editGroup?.rootGroup},
-                        {DTOName: "parentGroupId", label: "Id do grupo pai (grupo atual)", type: FormInputs.NONE, value: groupContext.group.id},
-                        {DTOName: "groupPath", label: "path", type: FormInputs.NONE, value: groupContext.editGroup?.path},
+                        {
+                            DTOName: "nickname", label: "Apelido do grupo", type: FormInputs.TEXT, value: groupContext.editGroup?.name, required: true, 
+                            validation: new ValidationComposite<string>().addValidation(new TextValidation())
+                        }, {
+                            DTOName: "name", label: "Nome do grupo", type: FormInputs.TEXT, value: groupContext.editGroup?.nickname, required: true, 
+                            validation: new ValidationComposite<string>().addValidation(new TextValidation())
+                        }, {
+                            DTOName: "description", label: "Descrição do grupo", type: FormInputs.LONG_TEXT, value: groupContext.editGroup?.description, required: true, 
+                            validation: new ValidationComposite<string>().addValidation(new TextValidation())
+                        }, {
+                             DTOName: "imageUrl", label: "Imagem do grupo", type: FormInputs.IMAGE, value:undefined, 
+                             defaultImageUrl: groupContext.editGroup ? groupImageUrl(groupContext.editGroup) : undefined,
+                             required: false
+                        }, { 
+                            DTOName: "groupType", label: "Tipo do grupo", type: FormInputs.SELECT_SINGLE, 
+                            value: groupContext.editGroup ?  {value : groupContext.editGroup.type, label : groupContext.editGroup.type } : undefined, 
+                            options: groupTypes.map((t) => ({value: t[0], label: t[1]})), required: true
+                        }, {
+                            DTOName: "canHaveSubgroup", label: "Pode criar grupo", type: FormInputs.BOOLEAN, value: groupContext.editGroup?.canCreateGroup
+                        }, {
+                            DTOName: "isPublic", label: "Grupo público", type: FormInputs.BOOLEAN, value: groupContext.editGroup?.publicGroup
+                        }, {
+                            DTOName: "canJoin", label: "Usuários podem entrar", type: FormInputs.BOOLEAN, value: groupContext.editGroup?.canEnter
+                        }, {
+                            DTOName: "isRootGroup", label: "Grupo raiz", type: FormInputs.BOOLEAN, value: groupContext.editGroup?.rootGroup
+                        }, {
+                            DTOName: "parentGroupId", label: "Id do grupo pai (grupo atual)", type: FormInputs.HIDDEN, value: groupContext.group.id
+                        }, {
+                            DTOName: "groupPath", label: "path", type: FormInputs.HIDDEN, value: groupContext.editGroup?.path
+                        },
 
                     ]}
                     requisition={groupContext.editGroup ? UniversimeApi.Group.update : UniversimeApi.Group.create}

From 6a61cdba082889cfcc10552d68217872f21f35bc Mon Sep 17 00:00:00 2001
From: 710lucas <lucasperonicobarbotin@gmail.com>
Date: Thu, 30 Nov 2023 17:29:38 -0300
Subject: [PATCH 15/18] resolvendo bugs

---
 src/components/UniversiForm/UniversiForm.tsx | 176 ++++++++++++++-----
 1 file changed, 129 insertions(+), 47 deletions(-)

diff --git a/src/components/UniversiForm/UniversiForm.tsx b/src/components/UniversiForm/UniversiForm.tsx
index b1839305..694b7320 100644
--- a/src/components/UniversiForm/UniversiForm.tsx
+++ b/src/components/UniversiForm/UniversiForm.tsx
@@ -94,7 +94,8 @@ export function UniversiForm(props : formProps){
 
     useEffect(()=>{
 
-        objects.forEach(obj => {
+
+        for(const obj of objects) {
             if ((obj.type === FormInputs.TEXT || obj.type === FormInputs.LONG_TEXT || obj.type === FormInputs.URL)) {
                 if(!obj.charLimit){
                     obj.charLimit = obj.type === FormInputs.TEXT
@@ -115,8 +116,15 @@ export function UniversiForm(props : formProps){
                 obj.validation.addValidation(new RequiredValidation());
             }
 
+            if(obj.type == FormInputs.SELECT_MULTI){
+                obj.value = (obj.value?.map((v : any) => v.value ? v.value : v))
+            }
 
-        })
+            if(obj.type == FormInputs.SELECT_SINGLE){
+                obj.value = obj.value.value
+            }
+
+        }
 
     }, [])
 
@@ -292,60 +300,140 @@ export function UniversiForm(props : formProps){
         )
     }
 
-    const handleSelectChange = (index : number, newValue : any) => {
-        console.log(newValue)
-        setObjects((oldObjects) =>{
-            const updatedObjects = [...oldObjects];
-            const updatedObject = updatedObjects[index];
 
-            if (updatedObject.type === FormInputs.SELECT_SINGLE) {
-                updatedObject.value = newValue.value;
-            }
+    function getListInput<T>(object : FormObjectSelectMulti<T> | FormObjectSelectSingle<T>, index : number){
+
+        if(!object.options && !object.canCreate)
+            return
+        const [optionsList, setOptionsList] = useState(object.options);
 
-            if(updatedObject.type === FormInputs.SELECT_MULTI){
-                if(!updatedObject.value)
-                    updatedObject.value = []
+        const [values, setDefaultValues] = useState<any>();
 
-                updatedObject.value = updatedObject.value.concat(newValue.map((m: any) => m.value));
-            }
+        useEffect(() => {
 
-            updatedObjects[index] = updatedObject;
-            return updatedObjects
-        })
-    }
+              if (object.type === FormInputs.SELECT_MULTI && optionsList && object.value) {
 
+                let defaultValuesArr: { value: any, label: string }[] = []
+                for (const option of optionsList) {
+                  if (object.value.includes(option.value))
+                    defaultValuesArr.push(option)
+                }
 
-    function getListInput<T>(object : FormObjectSelectMulti<T> | FormObjectSelectSingle<T>, index : number){
-        if(!object.options && !object.canCreate)
-            return
-        const [optionsList, setOptionsList] = useState(object.options);
+                setDefaultValues(defaultValuesArr);
+
+              } else if(object.type === FormInputs.SELECT_SINGLE){
+
+                if(optionsList && object.value){
+                    for(const option of optionsList){
+                        console.log("Testando opção", option.value, "Com object.value: ", object.value)
+
+                        if(object.value === option.value){
+                            console.log("retornando: ", option);
+                            let values = [];
+                            values.push(option)
+                            setDefaultValues(values);
+                            break;
+                        }
+                    }
+                }
+
+              } else{
+                setDefaultValues(null)
+              }
+        
+          }, [object.type, object.options, object.value, optionsList]);
         
+
+        // useEffect(()=>{
+        //     if(object.type == FormInputs.SELECT_MULTI && object.options && object.value){
+        //         let defaultValuesArr : {value : any, label : string}[] = []
+        //         for(const option of object.options){
+        //             if(object.value.includes(option.value))
+        //                 defaultValuesArr.push(option)
+        //         }
+
+        //         setDefaultValues(defaultValuesArr)
+        //         console.log(".", defaultValues)
+        //         console.log(".", defaultValuesArr)
+
+        //     }
+        //     else
+        //         setDefaultValues(getDefaultValueSingle(object.value, optionsList))
+        // }, 
+        // [])
+
+        const handleSelectChange = (index : number, newValue : any) => {
+            console.log(newValue)
+            setDefaultValues(newValue)
+            setObjects((oldObjects) =>{
+                const updatedObjects = [...oldObjects];
+                const updatedObject = updatedObjects[index];
+
+                if (updatedObject.type === FormInputs.SELECT_SINGLE) {
+                    updatedObject.value = newValue?.value ?? null;
+                }
+
+                else if(updatedObject.type === FormInputs.SELECT_MULTI){
+                    if(!updatedObject.value)
+                        updatedObject.value = []
+
+                    updatedObject.value = newValue.map((n : any)=>n.value)
+                }
+
+                updatedObjects[index] = updatedObject;
+                return updatedObjects
+            })
+
+            console.log("objeto", object)
+
+        }
+
         function createOption(inputValue : string){
             if(!object.onCreate)
                 return
             object.onCreate(inputValue)
             .then((options : any)=>{
-                console.log(options)
                 setOptionsList(options)
             })
         }
 
         function getDefaultValueMulti<T>(object : FormObjectSelectMulti<T>, optionsList : typeof object.options){
-            return Array.isArray(object.value)?
-                optionsList?.filter((option)=>
-                    object.value?.some((item) => Object.is(item, option.value))
-                ).map((item)=> ({value: item.value, label: item.label}))
-            :
-                undefined
+            if(!Array.isArray(object.value) || optionsList === undefined){
+                console.log("primeiro return")
+                return undefined;
+            }
+
+            let defaultOptionsArr : {value : any, label: string}[]= []
+                
+            for(const option of optionsList){
+                if(object.value.includes(option.value))
+                    defaultOptionsArr.push(option)
+            }
+            console.log("A", defaultOptionsArr)
+            return defaultOptionsArr
+            // return Array.isArray(object.value)?
+            //     optionsList?.filter((option)=>
+            //         object.value?.includes(option.value)
+            //     ).map((item)=> ({value: item.value, label: item.label}))
+            // :
+            //     undefined
         }
         function getDefaultValueSingle<T>(object : FormObjectSelectSingle<T>, optionsList : typeof object.options){
-            return Array.isArray(object.value) && object.value.every((item)=>'some' in item)?
-                optionsList?.filter((option)=>
-                    option.value == object.value
-                ).map((item)=>({value: item.value, label: item.label}))
-            :
-                undefined
+            if(!optionsList || !object.value)
+                return undefined;
+            for(const option of optionsList){
+                console.log("Testando opção", option, "Com object.value: ", object.value)
+
+                if(object.value === option.value){
+                    console.log("retornando: ", option)
+                    return option
+                }
+            }
+            return undefined
         }
+        
+
+        console.log("A", values)
 
         return(
             <div>
@@ -357,14 +445,11 @@ export function UniversiForm(props : formProps){
                         noOptionsMessage={()=>`Não foi possível encontrar ${object.label}`}
                         classNamePrefix="category-item"
                         styles={object.stylesConfig}
-                        defaultValue={
-                            object.type === FormInputs.SELECT_MULTI ? 
-                                getDefaultValueMulti(object, optionsList)
-                            :
-                                getDefaultValueSingle(object, optionsList)
-                        }
                         required={object.required}
                         onCreateOption={createOption}
+                        value={
+                                values   
+                        }
                     />
                     :
                         <Select isClearable placeholder={`Selecionar ${object.label}`} className="category-select" isMulti={object.type === FormInputs.SELECT_MULTI ? true : undefined} options={optionsList}
@@ -372,11 +457,8 @@ export function UniversiForm(props : formProps){
                         noOptionsMessage={()=>`Não foi possível encontrar ${object.label}`}
                         classNamePrefix="category-item"
                         styles={object.stylesConfig}
-                        defaultValue={
-                            object.type === FormInputs.SELECT_MULTI ? 
-                                getDefaultValueMulti(object, optionsList)
-                            :
-                                getDefaultValueSingle(object, optionsList)
+                        value={
+                                values
                         }
                         required={object.required}
                         />

From a01e917d230e0169fb674522e8118a4503d16906 Mon Sep 17 00:00:00 2001
From: 710lucas <lucasperonicobarbotin@gmail.com>
Date: Mon, 4 Dec 2023 21:12:39 -0300
Subject: [PATCH 16/18] Corrigindo bugs finais

---
 src/components/UniversiForm/UniversiForm.tsx                    | 2 +-
 .../GroupTabs/GroupContents/ManageContent/ManageContent.tsx     | 2 +-
 .../GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/UniversiForm/UniversiForm.tsx b/src/components/UniversiForm/UniversiForm.tsx
index 694b7320..5f8fb912 100644
--- a/src/components/UniversiForm/UniversiForm.tsx
+++ b/src/components/UniversiForm/UniversiForm.tsx
@@ -121,7 +121,7 @@ export function UniversiForm(props : formProps){
             }
 
             if(obj.type == FormInputs.SELECT_SINGLE){
-                obj.value = obj.value.value
+                obj.value = obj.value?.value
             }
 
         }
diff --git a/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx b/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
index c9fe8c50..4aa15ded 100644
--- a/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
+++ b/src/pages/Group/GroupTabs/GroupContents/ManageContent/ManageContent.tsx
@@ -91,7 +91,7 @@ export function ManageContent() {
                         : context.editContent.image
                     : undefined,
             }, {
-                DTOName: "rating", label: "Rating do conteúdo", type: FormInputs.NUMBER, value: context.editContent?.rating, minValue: 0, maxValue: 5, required: true,
+                DTOName: "rating", label: "Rating do conteúdo", type: FormInputs.HIDDEN, value: context.editContent ?  context.editContent?.rating : 1,
             }, {
                 DTOName: "addCategoriesByIds", label: "Categorias do conteúdo", type: FormInputs.SELECT_MULTI,
                 value: context.editContent?.categories.map(t => ({ label: t.name, value: t.id })) ?? [],
diff --git a/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx b/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
index 35621b60..60df8c5d 100644
--- a/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
+++ b/src/pages/Group/GroupTabs/GroupContents/ManageMaterial/ManageMaterial.tsx
@@ -66,7 +66,7 @@ export function ManageMaterial(props: Readonly<ManageMaterialProps>) {
                 }, {
                     DTOName: "description", label: "Descrição do material", type: FormInputs.TEXT, value: context.editMaterial?.description ?? "", required: true
                 }, {
-                    DTOName: "rating", label: "Rating do material", type: FormInputs.NUMBER, value: context.editMaterial?.rating
+                    DTOName: "rating", label: "Rating do material", type: FormInputs.HIDDEN, value: context.editMaterial ? context.editMaterial?.rating : 1
                 }, {
                     DTOName: "url", label: "Link do material", type: FormInputs.URL, value: context.editMaterial?.url, required: true
                 }, {

From d4525bb2374580e9d064b4d1deca5f2c0de77524 Mon Sep 17 00:00:00 2001
From: Douglas Sebastian <kagnanii.miyo@gmail.com>
Date: Wed, 6 Dec 2023 13:41:12 -0300
Subject: [PATCH 17/18] change: remove unused imports

---
 src/components/UniversiForm/UniversiForm.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/UniversiForm/UniversiForm.tsx b/src/components/UniversiForm/UniversiForm.tsx
index 5f8fb912..ea1aa2bf 100644
--- a/src/components/UniversiForm/UniversiForm.tsx
+++ b/src/components/UniversiForm/UniversiForm.tsx
@@ -1,17 +1,14 @@
-import { ReactNode, useState, useContext, ChangeEvent, useEffect } from "react"
+import { ReactNode, useState, useContext, useEffect } from "react"
 
 import "./UniversiForm.less"
-import { GroupContext, CATEGORY_SELECT_STYLES } from "@/pages/Group"
+import { GroupContext } from "@/pages/Group"
 import UniversimeApi from "@/services/UniversimeApi"
 import { arrayBufferToBase64 } from "@/utils/fileUtils"
-import Select, { CSSObjectWithLabel, GroupBase, StylesConfig } from "react-select"
+import Select, { GroupBase, StylesConfig } from "react-select"
 import CreatableSelect from "react-select/creatable"
 import { UniversiModal } from "../UniversiModal"
-import { Validation } from "./Validation/Validation"
 import { RequiredValidation } from "./Validation/RequiredValidation"
-import { Category } from "@/types/Capacity"
 import { ValidationComposite } from "./Validation/ValidationComposite"
-import { object } from "prop-types"
 import { makeClassName } from "@/utils/tsxUtils"
 
 export type formProps = {

From 5131f25db33072d9a3b4fc011aa50ca7c50e559a Mon Sep 17 00:00:00 2001
From: Douglas Sebastian <kagnanii.miyo@gmail.com>
Date: Wed, 6 Dec 2023 13:44:15 -0300
Subject: [PATCH 18/18] change: remove unused context

---
 src/components/UniversiForm/UniversiForm.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/UniversiForm/UniversiForm.tsx b/src/components/UniversiForm/UniversiForm.tsx
index ea1aa2bf..12d6889d 100644
--- a/src/components/UniversiForm/UniversiForm.tsx
+++ b/src/components/UniversiForm/UniversiForm.tsx
@@ -1,7 +1,6 @@
-import { ReactNode, useState, useContext, useEffect } from "react"
+import { ReactNode, useState, useEffect } from "react"
 
 import "./UniversiForm.less"
-import { GroupContext } from "@/pages/Group"
 import UniversimeApi from "@/services/UniversimeApi"
 import { arrayBufferToBase64 } from "@/utils/fileUtils"
 import Select, { GroupBase, StylesConfig } from "react-select"
@@ -86,7 +85,6 @@ export function UniversiForm(props : formProps){
     const MAX_LONG_TEXT_LENGTH = 150
     const MAX_URL_LENGTH = 100
 
-    const context = useContext(GroupContext)
     const DEFAULT_IMAGE_PATH = "/assets/imgs/default-content.png";
 
     useEffect(()=>{