Solon 2024-04-18

projeto-cade-unb · Apr 18, 2024 · 26be035 · 26be035
1 parent 170db18
commit 26be035
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 51 deletions.
diff --git a/sei-camunda-modeler/client/RequestListPlugin.js b/sei-camunda-modeler/client/RequestListPlugin.js
@@ -1,6 +1,7 @@
 import React, { Fragment } from 'camunda-modeler-plugin-helpers/react';
 import { Modal, Fill } from 'camunda-modeler-plugin-helpers/components';
 import CandidateUserModal from './modal/CandidateUserModal';
+import AssigneeModal from './modal/AssigneeModal';
 import TipdocModal from './modal/TipdocModal';
 import CandidateGroupsModal from './modal/CandidateGroupsModal';
 import LoginModal from './modal/LoginModal';
@@ -140,6 +141,8 @@ export default class RequestListPlugin extends React.PureComponent {
   constructor(props) {
     super(props);
 
+    this.inputFiltro = React.createRef();
+
     this.loadingIcon = LoadingIcon;
     this.state = {
       showModal: false,
@@ -162,8 +165,12 @@ export default class RequestListPlugin extends React.PureComponent {
     this.setIdContent = this.setIdContent.bind(this);
     this.setIdProcess = this.setIdProcess.bind(this);
     this.selectContent = this.selectContent.bind(this);
+    this.setContentFilter = this.setContentFilter.bind(this);
     this.selectProcess = this.selectProcess.bind(this);
+    this.setProcessFilter = this.setProcessFilter.bind(this);
+    this.setAssignee = this.setAssignee.bind(this);
     this.selectAssignee = this.selectAssignee.bind(this);
+    this.setAssigneeFilter = this.setAssigneeFilter.bind(this);
 
     this.setCandidateUser = this.setCandidateUser.bind(this);
     this.selectCandidateUser = this.selectCandidateUser.bind(this);
@@ -350,7 +357,7 @@ export default class RequestListPlugin extends React.PureComponent {
       const { modeler } = event;
 
       modeler.on('propertiesPanel.changed', ({ current: { element } }) => {
-
+        
         if (TYPES.includes(element.type)) {
 
           if (element.type == 'bpmn:Participant') {
@@ -373,6 +380,9 @@ export default class RequestListPlugin extends React.PureComponent {
   }
 
   async componentDidUpdate(_, prevState) {
+    if (prevState.documentType != '') {
+      this.state.documentType = '';
+    }
     if (!prevState.showModal && this.state.showModal) {
 
       let usersData = [];
@@ -408,6 +418,7 @@ export default class RequestListPlugin extends React.PureComponent {
         data,
         filteredData: data,
         usersData,
+        filteredProcess: processData,
         filteredUsers: usersData,
         groupData,
         filteredGroups: groupData,
@@ -520,6 +531,18 @@ export default class RequestListPlugin extends React.PureComponent {
     }
   }
 
+  setContentFilter(e) {
+    const filter = e.target.value;
+    const { data } = this.state;
+
+    let filteredData = data;
+
+    if (filter) {
+      filteredData = data.filter(d => d.titulo.toLowerCase().includes(filter.toLowerCase()));
+    }
+    this.setState({ filteredData });
+  }
+
   selectProcess(e) {
     const target = e.target;
     if (target.classList.contains('btn-select-repo')) {
@@ -529,6 +552,18 @@ export default class RequestListPlugin extends React.PureComponent {
     }
   }
 
+  setProcessFilter(e) {
+    const filter = e.target.value;
+    const { processData } = this.state;
+
+    let filteredProcess = processData;
+
+    if (filter) {
+      filteredProcess = processData.filter(d => d.titulo.toLowerCase().includes(filter.toLowerCase()));
+    }
+    this.setState({ filteredProcess });
+  }
+
   setAssignee(value) {
     const assignee = document.querySelector('#camunda-assignee');
     assignee.value = value;
@@ -550,6 +585,18 @@ export default class RequestListPlugin extends React.PureComponent {
     }
   }
 
+  setAssigneeFilter(e) {
+    const filter = e.target.value;
+    const { assigneeData } = this.state;
+
+    let filteredAssignee = assigneeData;
+
+    if (filter) {
+      filteredAssignee = usersData.filter(d => d.nome.toLowerCase().includes(filter.toLowerCase()));
+    }
+    this.setState({ filteredAssignee });
+  }
+
   selectCandidateUser(e) {
     const target = e.target;
     if (target.classList.contains('btn-select-repo')) {
@@ -634,12 +681,12 @@ export default class RequestListPlugin extends React.PureComponent {
 
   setCandidateGroupFilter(e) {
     const filter = e.target.value;
-    const { groupsData } = this.state;
+    const { groupData } = this.state;
 
-    let filteredGroups = groupsData;
+    let filteredGroups = groupData;
 
     if (filter) {
-      filteredGroups = groupsData.filter(d => d.nome.toLowerCase().includes(filter.toLowerCase()));
+      filteredGroups = groupData.filter(d => d.titulo.toLowerCase().includes(filter.toLowerCase()));
     }
 
     this.setState({ filteredGroups });
@@ -649,25 +696,25 @@ export default class RequestListPlugin extends React.PureComponent {
     this.setState({ documentType: type });
   }
 
-  renderTipDocModal(data) {
+  renderTipDocModal() {
     const { filteredData = [] } = this.state;
 
     return <TipdocModal
       docs={filteredData}
-      setFilter={this.setFilter}
+      setFilter={this.setContentFilter}
       setSelected={this.selectContent}
       onClose={this.closeModal}
-      onSelectType={this.onSelectType}
+      onSelectType={this.onSelectType} 
       documentTypeIsSelect={this.state.documentType}
     />;
   }
 
-  renderProcessModal(data) {
-    const { processData = [] } = this.state;
+  renderProcessModal() {
+    const { filteredProcess = [] } = this.state;
 
     return <ProcessModal
-      docs={processData}
-      setFilter={this.setFilter}
+      procs={filteredProcess}
+      setFilter={this.setProcessFilter}
       setSelected={this.selectProcess}
       onClose={this.closeModal}
     />
@@ -695,15 +742,14 @@ export default class RequestListPlugin extends React.PureComponent {
   }
 
   renderAssigneeModal() {
-    const { filteredAssignee = [] } = this.state;
-    const selectedUsers = [];
-
-    return <CandidateUserModal
-      users={filteredAssignee}
-      setFilter={this.setCandidateUserFilter}
-      setCandidateUser={this.selectAssignee}
+    const { filteredAssignee = [], selectedAssignees = [] } = this.state;
+
+    return <AssigneeModal
+      assignees={filteredAssignee}
+      setFilter={this.setAssigneeFilter}
+      setAssignee={this.selectAssignee}
       onClose={this.closeModal}
-      selectedUsers={ selectedUsers }
+      selectedAssignees={selectedAssignees}
     />
   }
 
@@ -803,6 +849,7 @@ export default class RequestListPlugin extends React.PureComponent {
 
   renderModal() {
     const { modalType } = this.state;
+
     switch (modalType) {
       case MODAL_TYPE.listDoc:
         return this.renderTipDocModal();
@@ -847,4 +894,9 @@ export default class RequestListPlugin extends React.PureComponent {
           </Modal>}
       </Fragment>);
   }
+
+  focus() {
+    // Focalize a entrada de texto usando a API DOM
+    this.inputFiltro.current.focus();
+  }
 }
diff --git a/sei-camunda-modeler/client/modal/AssigneeModal.js b/sei-camunda-modeler/client/modal/AssigneeModal.js
@@ -8,23 +8,25 @@ const Body = Modal.Body || (({ children }) => <div>{children}</div>);
 const Footer = Modal.Footer || (({ children }) => <div>{children}</div>);
 
 
-export default function AssigneeModal({ assignees, setFilter, setAssignee, onClose }) {
+export default function AssigneeModal({ assignees, setFilter, setAssignee, onClose, selectedAssignees }) {
   return (
     <Fragment>
       <Title>
-        Lista de Cargos
+      Lista de Usuários
       </Title>
       <Body>
-        <div className="input-container">
-          <input type="text" onInput={setFilter} className="search-input form-control" id="search-input" style={{ zIndex: 2000 }} />
-        </div>
         <ul className="repo-list" onClick={setAssignee}>
-          {assignees.map(({ id, cargo }) => (
-            <li className="repo-item" key={id} data-id={id} data-value={cargo}>
-              <span>{cargo}</span>
-              <button className="btn-select-repo btn-primary btn-sm">
-                &#8658;
-              </button>
+          {assignees.map(({ id, nome, sigla }) => (
+            <li className="repo-item" key={id} data-id={id} data-value={nome}>
+              <strong>{sigla}</strong><span>{nome}</span>
+              {selectedAssignees.find(user => user === sigla) ? (
+                <button className="btn-select-repo btn-danger btn-sm">
+                  x
+                </button>) : (
+                <button className="btn-select-repo btn-primary btn-sm">
+                  &#8658;
+                </button>
+              )}
             </li>
           ))}
         </ul>

diff --git a/sei-camunda-modeler/client/modal/CandidateGroupsModal.js b/sei-camunda-modeler/client/modal/CandidateGroupsModal.js
@@ -14,9 +14,6 @@ export default function CandidateGroupsModal({ groups, setFilter, setCandidateGr
         Lista de Cargos
       </Title>
       <Body>
-        <div className="input-container">
-          <input type="text" onInput={setFilter} className="search-input form-control" id="search-input" style={{ zIndex: 2000 }} />
-        </div>
         <ul className="repo-list" onClick={setCandidateGroup}>
           {groups.map(({ id, titulo }) => (
             <li className="repo-item" key={id} data-id={id} data-value={titulo}>

diff --git a/sei-camunda-modeler/client/modal/CandidateUserModal.js b/sei-camunda-modeler/client/modal/CandidateUserModal.js
@@ -15,12 +15,9 @@ export default function CandidateUserModal({ users, setFilter, setCandidateUser,
         Lista de Usuários
       </Title>
       <Body>
-        <div className="input-container">
-          <input type="text" onInput={setFilter} className="search-input form-control" id="search-input" style={{ zIndex: 2000 }} />
-        </div>
         <ul className="repo-list" onClick={setCandidateUser}>
           {users.map(({ id, nome, sigla }) => (
-            <li className="repo-item" key={id} data-id={id} data-value={sigla}>
+            <li className="repo-item" key={id} data-id={id} data-value={nome}>
               <strong>{sigla}</strong><span>{nome}</span>
               {selectedUsers.find(user => user === sigla) ? (
                 <button className="btn-select-repo btn-danger btn-sm">

diff --git a/sei-camunda-modeler/client/modal/ProcessModal.js b/sei-camunda-modeler/client/modal/ProcessModal.js
@@ -8,18 +8,15 @@ const Body = Modal.Body || (({ children }) => <div>{children}</div>);
 const Footer = Modal.Footer || (({ children }) => <div>{children}</div>);
 
 
-export default function ProcessModal({ docs, setFilter, setSelected, onClose }) {
+export default function ProcessModal({ procs, setFilter, setSelected, onClose }) {
   return (
     <Fragment>
       <Modal.Title>
         Tipo de processo
       </Modal.Title>
       <Modal.Body>
-        <div className="input-container">
-          <input type="text" onInput={setFilter} className="search-input form-control" id="search-input" style={{ zIndex: 2000 }} />
-        </div>
         <ul className="repo-list" onClick={setSelected}>
-          {docs.map(({ id, titulo }) => (
+          {procs.map(({ id, titulo }) => (
             <li className="repo-item" key={id} data-id={id} data-value={titulo}>
               <span>{titulo}</span>
               <button className="btn-select-repo btn-primary btn-sm">

diff --git a/sei-camunda-modeler/client/modal/TipdocModal.js b/sei-camunda-modeler/client/modal/TipdocModal.js
@@ -7,7 +7,6 @@ const Title = Modal.Title || (({ children }) => <h2>{children}</h2>);
 const Body = Modal.Body || (({ children }) => <div>{children}</div>);
 const Footer = Modal.Footer || (({ children }) => <div>{children}</div>);
 
-
 export default function TipdocModal({ docs, setFilter, setSelected, onClose, onSelectType, documentTypeIsSelect }) {
   return (
     <Fragment>
@@ -17,9 +16,6 @@ export default function TipdocModal({ docs, setFilter, setSelected, onClose, onS
       <Modal.Body>
         {documentTypeIsSelect && (
           <>
-            <div className="input-container">
-              <input type="text" onInput={setFilter} className="search-input form-control" id="search-input" style={{ zIndex: 2000 }} />
-            </div>
             <ul className="repo-list" onClick={setSelected}>
               {docs.map(({ id, titulo }) => (
                 <li className="repo-item" key={id} data-id={id} data-value={titulo}>
@@ -50,11 +46,6 @@ export default function TipdocModal({ docs, setFilter, setSelected, onClose, onS
                 <input type="radio" name="tipoDoc" /> Publicação
               </label>
             </div>
-            <div>
-              <label onClick={() => onSelectType('Anexo')}>
-                <input type="radio" name="tipoDoc" /> Anexo
-              </label>
-            </div>
           </>
         )}
       </Modal.Body>