Merge pull request #2231 from AletheiaFact/Refactor/generalizing-drawer-forms

Refactor: Unified Dynamic Form for Creation and Edition Flows

Author: caneppelevitor

public/locales/en/badges.json

@@ -1,7 +1,9 @@
 {
-    "nameColumn": "Name",
-    "descriptionColumn": "Description",
-    "imageColumn": "Image",
+    "nameLabel": "Name",
+    "namePlaceholder": "Enter badge name",
+    "descriptionLabel": "Description",
+    "descriptionPlaceholder": "Enter description",
+    "imageFieldLabel": "Image",
     "title": "Badges area",
     "addBadge": "Add badge",
     "editBadge": "Edit badge",

public/locales/en/namespaces.json

@@ -1,5 +1,6 @@
 {
-    "nameColumn": "Name",
+    "nameLabel": "Name",
+    "namePlaceholder":"Namespace name",
     "title": "Namespaces area",
     "addNameSpace": "Add namespace",
     "editNameSpace": "Edit namespace",

public/locales/pt/badges.json

@@ -1,7 +1,9 @@
 {
-    "nameColumn": "Nome",
-    "descriptionColumn": "Descrição",
-    "imageColumn": "Imagem",
+    "nameLabel": "Nome",
+    "namePlaceholder": "Insira o nome da insígnia",
+    "descriptionLabel": "Descrição",
+    "descriptionPlaceholder": "Insira a descrição",
+    "imageFieldLabel": "Imagem",
     "title": "Área de Insígnias",
     "addBadge": "Adicionar Insígnia",
     "editBadge": "Editar Insígnia",

public/locales/pt/claimForm.json

@@ -24,7 +24,7 @@
     "checkboxAcceptTerms": "Eu atesto pessoalmente que toda informação adicionada é confiável.",
     "cancelButton": "Cancelar",
     "updateButton": "Atualizar",
-    "saveButton": "Adicionar",
+    "saveButton": "Salvar",
     "contentModelTitle": "Formato",
     "selectContentModel": "Que formato de afirmação você quer incluir?",
     "Image": "Imagem",

public/locales/pt/namespaces.json

@@ -1,5 +1,6 @@
 {
-    "nameColumn": "Nome",
+    "nameLabel": "Nome",
+    "namePlaceholder":"Nome do namespace",
     "title": "Área de namespaces",
     "addNameSpace": "Adicionar namespace",
     "editNameSpace": "Editar namespace",

server/auth/name-space/name-space.controller.ts

@@ -22,14 +22,16 @@ import { Types } from "mongoose";
 import { Roles } from "../../auth/ability/ability.factory";
 import { NotificationService } from "../../notifications/notifications.service";
 import slugify from "slugify";
+import { ConfigService } from "@nestjs/config";
 
 @Controller()
 export class NameSpaceController {
     constructor(
         private nameSpaceService: NameSpaceService,
         private usersService: UsersService,
         private viewService: ViewService,
-        private notificationService: NotificationService
+        private notificationService: NotificationService,
+        private configService: ConfigService,
     ) {}
 
     @AdminOnly()
@@ -59,13 +61,14 @@ export class NameSpaceController {
             ...namespaceBody,
         };
 
-        newNameSpace.slug = slugify(nameSpace.name, {
+        newNameSpace.slug = slugify(newNameSpace.name, {
             lower: true,
             strict: true,
         });
 
         newNameSpace.users = await this.updateNameSpaceUsers(
             newNameSpace.users,
+            newNameSpace.slug,
             nameSpace.slug
         );
 
@@ -100,25 +103,35 @@ export class NameSpaceController {
         const users = await this.usersService.findAll({});
         const parsedUrl = parse(req.url, true);
 
-        const query = Object.assign(parsedUrl.query, { nameSpaces, users });
+        const query = Object.assign(
+            parsedUrl.query,
+            {
+                sitekey: this.configService.get<string>("recaptcha_sitekey"),
+                nameSpaces,
+                users
+            }
+        );
 
         await this.viewService.render(req, res, "/admin-namespaces", query);
     }
 
-    private async updateNameSpaceUsers(users, key) {
+    private async updateNameSpaceUsers(users, newKey, oldKey = null) {
         const promises = users.map(async (user) => {
             const userId = Types.ObjectId(user._id);
             const existingUser = await this.usersService.getById(userId);
 
-            if (!existingUser.role[key]) {
-                await this.usersService.updateUser(existingUser._id, {
-                    role: {
-                        ...existingUser.role,
-                        [key]: Roles.Regular,
-                    },
-                });
+            let updatedRoles = { ...existingUser.role };
+
+            if (oldKey && oldKey !== newKey) {
+                delete updatedRoles[oldKey];
             }
 
+            updatedRoles[newKey] = Roles.Regular;
+
+            await this.usersService.updateUser(existingUser._id, {
+                role: updatedRoles,
+            });
+
             return userId;
         });
 

server/badge/badge.controller.ts

@@ -20,6 +20,7 @@ import { Types } from "mongoose";
 import { ApiTags } from "@nestjs/swagger";
 import { UtilService } from "../util";
 import { AdminOnly } from "../auth/decorators/auth.decorator";
+import { ConfigService } from "@nestjs/config";
 
 @Controller(":namespace?")
 export class BadgeController {
@@ -28,7 +29,8 @@ export class BadgeController {
         private viewService: ViewService,
         private imageService: ImageService,
         private usersService: UsersService,
-        private util: UtilService
+        private util: UtilService,
+        private configService: ConfigService,
     ) {}
 
     @AdminOnly()
@@ -152,6 +154,7 @@ export class BadgeController {
             badges,
             users,
             nameSpace: req.params.namespace,
+            sitekey: this.configService.get<string>("recaptcha_sitekey"),
         });
 
         await this.viewService.render(req, res, "/admin-badges", query);

server/verification-request/verification-request.service.ts

@@ -704,15 +704,7 @@ export class VerificationRequestService {
                         return src._id;
                     })
                 );
-
-                updatedVerificationRequestData.source = Array.from(
-                    new Set([
-                        ...(verificationRequest.source || []).map((sourceId) =>
-                            sourceId.toString()
-                        ),
-                        ...newSourceIds.map((id) => id.toString()),
-                    ])
-                ).map((id) => Types.ObjectId(id));
+                updatedVerificationRequestData.source = newSourceIds.map((id) => Types.ObjectId(id));
             }
 
             if (
@@ -743,7 +735,8 @@ export class VerificationRequestService {
                 verificationRequest._id,
                 updatedVerificationRequestData,
                 { new: true, upsert: true }
-            ).populate("source");
+            ).populate("source")
+             .populate("impactArea");
         } catch (error) {
             this.logger.error("Failed to update verification request:", error);
             throw error;

src/components/Form/DatePickerInput.tsx

@@ -41,7 +41,7 @@ const StyledTextField = styled(TextField)`
 
 const DatePickerInput = (props) => {
   const { t } = useTranslation();
-  const [value, setValue] = useState(null);
+  const [value, setValue] = useState(props.defaultValue || null);
   const [open, setOpen] = useState(false);
 
   return (

src/components/Form/DynamicInput.tsx

@@ -10,20 +10,26 @@ import { VisualEditorContext } from "../Collaborative/VisualEditorProvider";
 import AletheiaInput from "../AletheiaInput";
 import DatePickerInput from "./DatePickerInput";
 import { Checkbox, FormControlLabel } from "@mui/material";
-import ReportTypeSelect from "../VerificationRequest/CreateVerificationRequest/ReportTypeSelect";
-import ImpactAreaSelect from "../VerificationRequest/CreateVerificationRequest/ImpactAreaSelect";
 import colors from "../../styles/colors";
+import ReportTypeSelect from "../VerificationRequest/verificationRequestForms/formInputs/ReportTypeSelect";
+import ImpactAreaSelect from "../VerificationRequest/verificationRequestForms/formInputs/ImpactAreaSelect";
+import InputExtraSourcesList from "../VerificationRequest/verificationRequestForms/formInputs/InputExtraSourcesList";
+import { Topic } from "../../types/Topic";
+import { SourceType } from "../../types/Source";
+import ImageUpload, { UploadFile } from "../ImageUpload";
 
 const VisualEditor = lazy(() => import("../Collaborative/VisualEditor"));
 
+export type UnifiedDefaultValue = Topic | SourceType[] | UploadFile[] | string
+
 interface DynamicInputProps {
     fieldName: string;
     type: string;
     placeholder: string;
-    value: string | [];
+    value: UnifiedDefaultValue;
     onChange: any;
     addInputLabel: string;
-    defaultValue: string | [];
+    defaultValue: UnifiedDefaultValue;
     "data-cy": string;
     extraProps: any;
     disabledDate?: any;
@@ -83,6 +89,15 @@ const DynamicInput = (props: DynamicInputProps) => {
                     white="true"
                 />
             );
+        case "sourceList":
+            return (
+                <InputExtraSourcesList
+                    sources={props.value}
+                    onChange={props.onChange}
+                    disabled={props.disabled}
+                    placeholder={props.placeholder}
+                />
+            );
         case "select":
             return (
                 <ClaimReviewSelect
@@ -98,14 +113,23 @@ const DynamicInput = (props: DynamicInputProps) => {
                     defaultValue={props.defaultValue}
                     onChange={(value) => props.onChange(value)}
                     placeholder={t(props.placeholder)}
-
+                    isDisabled={props.disabled}
                 />
             );
         case "selectImpactArea":
             return (
                 <ImpactAreaSelect
+                    defaultValue={props.defaultValue}
                     onChange={(value) => props.onChange(value)}
                     placeholder={t(props.placeholder)}
+                    isDisabled={props.disabled}
+                />
+            );
+        case "imageUpload":
+            return (
+                <ImageUpload
+                    onChange={(value) => props.onChange(value)}
+                    defaultFileList={props.defaultValue}
                 />
             );
         case "textbox":
@@ -141,6 +165,7 @@ const DynamicInput = (props: DynamicInputProps) => {
         case "date":
             return (
                 <DatePickerInput
+                    defaultValue={props.defaultValue}
                     placeholder={t(props.placeholder)}
                     onChange={(value) => props.onChange(value)}
                     data-cy={"testSelectDate"}