Exercicio 36.2: Bloco Gestor

frontend/packages/volto-portal-governo/src/components/Blocks/GestorBlock/Data.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { BlockDataForm } from '@plone/volto/components';
+import { gestorSchema } from './schema';
+import { useIntl } from 'react-intl';
+const GestorBlockData = (props) => {
+  const { data, block, onChangeBlock, blocksConfig, navRoot, contentType } =
+    props;
+  const intl = useIntl();
+  const schema = gestorSchema({ ...props, intl });
+  const onChangeField = (id, value) => {
+    onChangeBlock(block, {
+      ...data,
+      [id]: value,
+    });
+  };
+  return (
+    <BlockDataForm
+      schema={schema}
+      title={schema.title}
+      onChangeField={onChangeField}
+      onChangeBlock={onChangeBlock}
+      formData={data}
+      block={block}
+      blocksConfig={blocksConfig}
+      navRoot={navRoot}
+      contentType={contentType}
+    />
+  );
+};
+export default GestorBlockData;

frontend/packages/volto-portal-governo/src/components/Blocks/GestorBlock/DefaultView.jsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { Container } from '@plone/components';
 import GestorCard from '../../Gestor/GestorCard';
 
-const GestorView = ({ content }) => {
+const GestorView = ({ content, data }) => {
   return (
     <Container narrow className={`block gestor`}>
-      <h2 className="headline">Secretário</h2>
+      <h2 className="headline">{data.headline}</h2>
       <GestorCard content={content} />
     </Container>
   );

frontend/packages/volto-portal-governo/src/components/Blocks/GestorBlock/Edit.jsx

@@ -1,8 +1,24 @@
 import React from 'react';
-import View from './View';
+import { withBlockExtensions } from '@plone/volto/helpers';
+import { SidebarPortal } from '@plone/volto/components';
+
+import GestorBlockData from './Data';
+import GestorBlockView from './View';
 
 const Edit = (props) => {
-  return <View {...props} />;
+  const { data, onChangeBlock, block, selected } = props;
+  return (
+    <>
+      <GestorBlockView {...props} isEditMode />
+      <SidebarPortal selected={selected}>
+        <GestorBlockData
+          data={data}
+          block={block}
+          onChangeBlock={onChangeBlock}
+        />
+      </SidebarPortal>
+    </>
+  );
 };
 
 export default Edit;

frontend/packages/volto-portal-governo/src/components/Blocks/GestorBlock/View.jsx

@@ -1,10 +1,17 @@
 import React from 'react';
+import { Container } from '@plone/components';
 import GestorView from './DefaultView';
 
 const View = (props) => {
-  const { properties } = props;
+  const { data, isEditMode, properties } = props;
   const gestor = properties.gestor;
-  return <GestorView content={gestor} />;
+  return gestor ? (
+    <GestorView content={gestor} data={data} />
+  ) : (
+    <Container narrow className={'block gestor empty'}>
+      {isEditMode && <span>Por favor selecione um gestor.</span>}
+    </Container>
+  );
 };
 
 export default View;

frontend/packages/volto-portal-governo/src/components/Blocks/GestorBlock/schema.js

@@ -0,0 +1,19 @@
+export const gestorSchema = (props) => {
+  return {
+    title: 'Bloco do Gestor',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['headline'],
+      },
+    ],
+    properties: {
+      headline: {
+        title: 'Chamada do bloco',
+        default: 'Secretário',
+      },
+    },
+    required: ['headline'],
+  };
+};

frontend/packages/volto-portal-governo/src/index.js

@@ -37,6 +37,7 @@ const applyConfig = (config) => {
     icon: gestorSVG,
     edit: GestorEdit,
     view: GestorView,
+    sidebarTab: 1,
   };
 
   return config;