edit page form format

ClinGen · Jul 2, 2024 · 9e4685c · 9e4685c
1 parent f70300d
commit 9e4685c
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 97 deletions.
diff --git a/src/affiliation.py b/src/affiliation.py
@@ -45,15 +45,15 @@ def __init__(
         """
         # pylint: disable=too-many-arguments
         self.id = id_
-        self.name = name
-        self.coordinator = coordinator
-        self.coordinator_email = coordinator_email
+        self.name = name if name else ""
+        self.coordinator = coordinator if coordinator else ""
+        self.coordinator_email = coordinator_email if coordinator_email else ""
         self.status = status
-        self.type = type_
-        self.family = family
-        self.members = members
-        self.approvers = approvers
-        self.clinvar_submitter_ids = clinvar_submitter_ids
+        self.type = type_ if type_ else ""
+        self.family = family if family else ""
+        self.members = members if members else []
+        self.approvers = approvers if approvers else []
+        self.clinvar_submitter_ids = clinvar_submitter_ids if clinvar_submitter_ids else []
         self.errors: dict = {}
 
     @classmethod

diff --git a/src/static/simple.css b/src/static/simple.css
@@ -22,7 +22,7 @@ https://github.com/kevquirk/simple.css
   --text-light: #585858;
   --border: #898EA4;
   --accent: #0d47a1;
-  /* --accent-hover: #1266e2; */
+  --accent-hover: #1266e2;
   --accent-text: var(--bg);
   --code: #d81b60;
   --preformatted: #444;
@@ -40,7 +40,7 @@ https://github.com/kevquirk/simple.css
     --text: #dcdcdc;
     --text-light: #ababab;
     --accent: #ffb300;
-    /* --accent-hover: #ffe099; */
+    --accent-hover: #ffe099;
     --accent-text: var(--bg);
     --code: #f06292;
     --preformatted: #ccc;
@@ -725,16 +725,16 @@ sub {
 
 .form-group{
   align-items: baseline;
-  padding-top: 10px;
-  padding-bottom: 10px;
+  margin-top: 15px;
 }
-.row {
-  display: flex;
+.form-grid {
+  display: grid;
+  grid-template-columns: 1fr 30%;
+  grid-template-rows: 1fr 1fr;
 }
 
 .column {
-  flex: 50%;
-  padding-left: 70px;
+  width: 100%;
 }
 
 label {
@@ -768,8 +768,11 @@ button.cancel-button:hover {
   border: #e06d53;
 }
 
-
 .buttons {
   display: inline;
   margin: auto;
-}
+}
+
+.center {
+  text-align: center;
+}
diff --git a/src/templates/edit.html b/src/templates/edit.html
@@ -1,93 +1,66 @@
 {% extends 'base.html' %}
 {% block header %}
-    <h1>ClinGen Affiliations Service</h1>
-    <nav>
-        <p>You are logged in as: {{ email }}</p>
-        <a href="/logout">Log out</a>
-    </nav>
+<h1>ClinGen Affiliations Service</h1>
+<nav>
+    <p>You are logged in as: {{ email }}</p>
+    <a href="/logout">Log out</a>
+</nav>
 {% endblock %}
 {% block content %}
 {% if not affiliation %}
-    <p>Not found</p>
+<p>Not found</p>
 {% else %}
 <div class="buttons">
     <button class="submit-button">Submit</button>
-<a href="/">
-    <button class="cancel-button">Cancel Edit</button>
-</a>
+    <a href="/">
+        <button class="cancel-button">Cancel Edit</button>
+    </a>
 </div>
-<div class="row">
-    <div class="column">
-        <div class="form-group">
-            <label>ID:</label>
-            <input type="text" value="{{affiliation.id}}"/>
-        </div>
-        <div class="form-group">
-            <label>Coordinator:</label>
-            <input type="text" value="{{affiliation.coordinator}}"/>
+<div class="center">
+    <h3>ID: {{affiliation.id}}</h3>
+</div>
+<form>
+    <div class="form-grid">
+        <div class="form-group column">
+            <label>Name:</label>
+            <input type="text" value="{{affiliation.name}}" placeholder="Name"/>
         </div>
-        <div class="form-group">
+        <div class="form-group column">
             <label>Status: {{affiliation.status}}</label>
             <select>
                 <option>Active</option>
                 <option>Inactive</option>
             </select>
         </div>
-        <div class="form-group">
-            <label>Family:</label>
-            <input type="text" value="{{affiliation.family}}"/>
-        </div>
-        <div class="form-group">
-            <label>Add New Member:</label>
-            <input type="text" value=""/>
-        </div>
-        <div class="form-group">
-            {% if not affiliation.members%}
-            <label>No Current Members</label>
-            {% else %}
-            <label>Current Members:</label>
-            <ul>
-            {% for member in affiliation.members %}
-                <li contenteditable="true">{{member}}</li>
-            {% endfor %}
-            </ul>
-            {% endif %}
-        </div>
-    </div>
-    <div class="column">
-        <div class="form-group">
-            <label>Name:</label>
-                <input type="text" value="{{affiliation.name}}"/>
+        <div class="form-group column">
+            <label>Coordinator:</label>
+            <input type="text" value="{{affiliation.coordinator}}" placeholder="Name" />
         </div>
-        <div class="form-group">
+        <div class="form-group column">
             <label>Coordinator Email:</label>
-            <input type="text" value="{{affiliation.coordinator_email}}"/>
+            <input type="text" value="{{affiliation.coordinator_email}}" placeholder="[email protected]"/>
         </div>
-        <div class="form-group">
-            <label>Type:</label>
-            <input type="text" value="{{affiliation.type}}"/>
-        </div>
-        <div class="form-group">
-            <label>ClinVar Submitter IDs:</label>
-            <input type="text" value="{{affiliation.clinvar_submitter_ids}}"/>
-        </div>
-        <div class="form-group">
-            <label>Add New Approver:</label>
-            <input type="text" value=""/>
+        <div class="form-group column">
+            <label>Family:</label>
+            <input type="text" value="{{affiliation.family}}" placeholder="Family"/>
         </div>
-        <div class="form-group">
-            {% if not affiliation.approvers%}
-            <label>No Current Approvers</label>
-            {% else %}
-            <label>Current Approvers:</label>
-            <ul>
-            {% for approver in affiliation.approvers %}
-                <li contenteditable="true">{{approver}}</li>
-            {% endfor %}
-            </ul>
-            {% endif %}
+        <div class="form-group column">
+            <label>Type:</label>
+            <input type="text" value="{{affiliation.type}}" placeholder="Type"/>
         </div>
     </div>
-</div>
+    <div class="form-group">
+        <label>Members:</label>
+        <textarea rows="5" cols="100" placeholder="Name One&#10;Name Two">{{'\n'.join(affiliation.members)|safe}}</textarea>
+    </div>
+    <div class="form-group">
+        <label>Approvers:</label>
+        <textarea rows="5" cols="100" placeholder="Name One&#10;Name Two">{{'\n'.join(affiliation.approvers)|safe}}</textarea>
+    </div>
+    <div class="form-group">
+        <label>ClinVar Submitter IDs:</label>
+        <textarea rows="5" cols="100" placeholder="001&#10;002">{{'\n'.join(affiliation.clinvar_submitter_ids)|safe}}</textarea>
+    </div>
+</form>
 {% endif %}
-{% endblock %}
+{% endblock %}
diff --git a/src/templates/index.html b/src/templates/index.html
@@ -34,22 +34,22 @@ <h1>ClinGen Affiliations Service</h1>
                 <tr>
                     <td>
                         <a href="/edit?affil={{affiliation.id}}">
-                            <button>Edit</button>
+                            <button class="edit-button">Edit</button>
                         </a>
                         <a href="/affiliation/{{ affiliation.id }}">
-                            <button>View</button>
+                            <button class="view-button">View</button>
                         </a>
                     </td>
                     <td>{{ affiliation.id }}</td>
                     <td>{{ affiliation.name }}</td>
-                    <td>{{ affiliation.coordinator }}</td>
-                    <td>{{ affiliation.coordinator_email }}</td>
+                    <td>{{ affiliation.coordinator if affiliation.coordinator else "None" }}</td>
+                    <td>{{ affiliation.coordinator_email if affiliation.coordinator_email else "None" }}</td>
                     <td>{{ affiliation.status }}</td>
-                    <td>{{ affiliation.type }}</td>
-                    <td>{{ affiliation.family }}</td>
-                    <td>{{ affiliation.clinvar_submitter_ids }}</td>
-                    <td>{{ affiliation.members }}</td>
-                    <td>{{ affiliation.approvers }}</td>
+                    <td>{{ affiliation.type if affiliation.type else "None" }}</td>
+                    <td>{{ affiliation.family if affiliation.family else "None" }}</td>
+                    <td>{{ affiliation.clinvar_submitter_ids if affiliation.clinvar_submitter_ids else "None" }}</td>
+                    <td>{{ affiliation.members if affiliation.members else "None" }}</td>
+                    <td>{{ affiliation.approvers if affiliation.approvers else "None" }}</td>
                 </tr>
             {% endfor %}
             </tbody>