react

Author: Throyer

…boot/controllers/app/RoleController.java …boot/controllers/app/JSONController.javasrc/main/java/com/github/throyer/common/springboot/controllers/app/RoleController.java renamed to src/main/java/com/github/throyer/common/springboot/controllers/app/JSONController.java src/main/java/com/github/throyer/common/springboot/controllers/app/RoleController.java renamed to src/main/java/com/github/throyer/common/springboot/controllers/app/JSONController.java

@@ -8,22 +8,36 @@
 import org.springframework.http.ResponseEntity;
 import org.springframework.security.access.prepost.PreAuthorize;
 import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
 
 import com.github.throyer.common.springboot.domain.role.entity.Role;
 import com.github.throyer.common.springboot.domain.role.repository.RoleRepository;
+import com.github.throyer.common.springboot.domain.user.model.UserDetails;
+import com.github.throyer.common.springboot.domain.user.repository.UserRepository;
 
 @RestController
-@RequestMapping("/app/roles")
+@RequestMapping("/app/json")
 @PreAuthorize("hasAnyAuthority('ADM')")
-public class RoleController {
+public class JSONController {
 
     @Autowired
-    private RoleRepository repository;
+    private RoleRepository roles;
 
-    @GetMapping
-    public ResponseEntity<List<Role>> index() {
-        return ok(repository.findAll());
+    @Autowired
+    private UserRepository users;
+
+    @GetMapping("roles")
+    public ResponseEntity<List<Role>> roles() {
+        return ok(roles.findAll());
+    }
+
+    @GetMapping("user/{id}")
+    public ResponseEntity<UserDetails> user(@PathVariable Long id) {
+        var user = users.findByIdFetchRoles(id)
+            .orElseThrow();
+
+        return ok(new UserDetails(user));
     }
 }

src/main/java/com/github/throyer/common/springboot/controllers/app/UserController.java

@@ -48,8 +48,14 @@ public String index(
     }
 
     @GetMapping("/form")
-    public String form(Model model) {        
-        model.addAttribute("user", new CreateOrUpdateUserByAppForm());
+    public String createForm(Model model) {
+        model.addAttribute("create", true);
+        return "app/users/form";
+    }
+
+    @GetMapping("/form/{id}")
+    public String editForm(Model model) {
+        model.addAttribute("create", false);
         return "app/users/form";
     }
 

src/main/resources/static/js/forms/users-form.js

@@ -1,22 +1,51 @@
 const App = () => {
 
+    const [waiting, setWaiting] = React.useState(true)
+
     const [roles, setRoles] = React.useState([])
+    const [user, setUser] = React.useState()
 
     const findAllRoles = React.useCallback(async () => {
         const { data: roles } = await axios
-            .get('app/roles');
+            .get('app/json/roles');
 
         setRoles(roles);
     }, []);
 
+    const findUser = React.useCallback(async () => {
+        const id = Number(window.location.pathname.split('/').pop())
+
+        if (Number.isSafeInteger(Number(id))) {
+            const { data: user } = await axios
+                .get(`app/json/user/${id}`);
+
+            setUser(user);
+            return;
+        }
+
+        setUser({
+            id: null,
+            name: "",
+            email: "",
+            roles: []
+        })
+    }, []);
+
+    const fetch = React.useCallback(async () => {
+        await Promise.all([findUser(), findAllRoles()]);
+        setWaiting(false);
+    }, []);
+
 
     React.useEffect(() => {
-        findAllRoles();
+        fetch();
     }, [])
 
-
-    return (
+    return !waiting && (
         <div className="col-md-4 shadow-sm p-3 mb-5 bg-body rounded">
+            <pre>
+                {JSON.stringify(user, undefined, 4)}
+            </pre>
             <div className="row">
                 <div className="col-md-12">
                     <div className="form-group">
@@ -32,7 +61,12 @@ const App = () => {
                             required
                             name="name"
                             type="text"
+                            value={user.name}
                             className="form-control form-control-sm"
+                            onChange={({ target: { value } }) => setUser({
+                                ...user,
+                                name: value
+                            })}
                         />
                     </div>
                 </div>
@@ -47,10 +81,15 @@ const App = () => {
                             </small>
                         </label>
                         <input
+                            required
                             name="email"
                             type="email"
+                            value={user.email}
                             className="form-control form-control-sm"
-                            required
+                            onChange={({ target: { value } }) => setUser({
+                                ...user,
+                                email: value
+                            })}
                         />
 
                         <div className="invalid-feedback">
@@ -73,8 +112,8 @@ const App = () => {
                         className="form-select form-select-sm"
                     >
                         <option value="">Selecione</option>
-                        {roles.map(({ id, name }) => (
-                            <option value={id}>{name}</option>
+                        {roles.map(({ id, name, initials }) => (
+                            <option selected={user.roles[0] == initials} value={id}>{name}</option>
                         ))}
                     </select>
 

src/main/resources/templates/app/users/form.html

@@ -6,7 +6,7 @@
       <div class="col-md-12">
           <h3 class="font-weight-light">
             <i class="fas fa-user"></i>
-            <span th:text="${user.id == null ? 'Create' : 'Edit'}"></span>
+            <span th:text="${create ? 'Create' : 'Edit'}"></span>
             User
           </h3>
           <hr>
@@ -17,7 +17,6 @@ <h3 class="font-weight-light">
       novalidate
       method="POST"
       th:action="@{/app/users}"
-      th:data-user="${user}"
       class="row d-flex justify-content-center needs-validation">
     </form>
   </section>