Refactoring #5 to FormInputTrainingComponent

Sofka-XT · Nov 26, 2021 · 73b3357 · 73b3357
1 parent d5445d0
commit 73b3357
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 21 deletions.
diff --git a/src/pages/crudTraning/components/FormInputTrainingComponent.css b/src/pages/crudTraning/components/FormInputTrainingComponent.css
@@ -147,6 +147,14 @@ main {
   justify-content: space-around;
 }
 
+.training__output-form {
+  /* background-color: blue; */
+  margin-top: 50px;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+
 .training__input-form-name {
   justify-content: space-evenly;
 }
@@ -227,17 +235,23 @@ main {
 }
 
 .training__coach-list {
-  margin-top: 20px;
-  width: 100%;
+  /* margin-top: 20px;
+  width: 100%; */
 }
 
 .training__coach-selected {
-  font-size: 1.1em;
-  width: 100%;
-  margin-top: 10px;
+  min-width: 300px;
+  overflow-wrap: wrap;
+  /* border: 1px solid red; */
+  margin-top: 20px;
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.btn-delete-coach {
+  width: 20%;
 }
 
 .training__table-apprentices {

diff --git a/src/pages/crudTraning/components/FormInputTrainingComponent.jsx b/src/pages/crudTraning/components/FormInputTrainingComponent.jsx
@@ -172,20 +172,6 @@ const FormInputTrainingComponent = () => {
                   <option value={coach.id}>{coach.name}</option>
                 ))}
               </select>
-              <ul className="training__coach-list">
-                {coaches.map((coach) => (
-                  <li key={coach.id} className="training__coach-selected">
-                    <span> - {coach.name}</span>
-                    <button
-                      id={`${coach.id}_button_delete_coach`}
-                      className="btn btn-danger"
-                      onClick={() => handleUnselectCoach(coach.id)}
-                    >
-                      <i className="fas fa-trash-alt"></i>
-                    </button>
-                  </li>
-                ))}
-              </ul>
             </div>
 
             <div className="training__input-container">
@@ -207,6 +193,27 @@ const FormInputTrainingComponent = () => {
             </div>
           </div>
 
+          <div className="training__output-form">
+            {coaches.length > 0 ? (
+              coaches.map((coach) => (
+                <div key={coach.id} className="training__coach-selected">
+                  <span className="text-center">{coach.name}</span>
+                  <button
+                    id={`${coach.id}_button_delete_coach`}
+                    className="btn btn-danger btn-delete-coach"
+                    onClick={() => handleUnselectCoach(coach.id)}
+                  >
+                    <i className="fas fa-trash-alt"></i>
+                  </button>
+                </div>
+              ))
+            ) : (
+              <div className="alert alert-primary text-center training__alert-primary mt-5 b-5">
+                No hay coaches asignados para el trainingss
+              </div>
+            )}
+          </div>
+
           <div className="training__input-form">
             <div className="training__input-container">
               <div className="training__file-input">