Edit button functionality and styling, Submit still WIP

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

Hide file tree

Showing 4 changed files with 141 additions and 8 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
 # Environment variable files:
 .env
+**/.DS_Store
 
 # Python stuff:
 .coverage

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;
@@ -721,4 +721,55 @@ sub {
   margin: 2rem 0;
   overflow-x: auto;
   padding: 1.5rem;
+}
+
+.form-group{
+  align-items: baseline;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+.row {
+  display: flex;
+}
+
+.column {
+  flex: 50%;
+  padding-left: 70px;
+}
+
+label {
+  padding-right: 20px;
+}
+
+.submit-button {
+  color: white;
+  background-color: #31b033;
+  border: #31b033;
+  width: 150px;
+  height: 60px;
+  margin: 15px;
+}
+button.submit-button:hover {
+  background-color: #53d455;
+  border: #53d455;
+}
+
+.cancel-button {
+  color: white;
+  background-color: #b04831;
+  border: #b04831;
+  width: 150px;
+  height: 60px;
+  margin: 15px;
+}
+
+button.cancel-button:hover {
+  background-color: #e06d53;
+  border: #e06d53;
+}
+
+
+.buttons {
+  display: inline;
+  margin: auto;
 }
diff --git a/src/templates/edit.html b/src/templates/edit.html
@@ -10,6 +10,84 @@ <h1>ClinGen Affiliations Service</h1>
 {% if not affiliation %}
     <p>Not found</p>
 {% else %}
-    <p>{{affiliation.name}}</p>
+<div class="buttons">
+    <button class="submit-button">Submit</button>
+<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>
+        <div class="form-group">
+            <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>
+        <div class="form-group">
+            <label>Coordinator Email:</label>
+            <input type="text" value="{{affiliation.coordinator_email}}"/>
+        </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>
+        <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>
+    </div>
+</div>
 {% endif %}
 {% endblock %}
diff --git a/src/templates/index.html b/src/templates/index.html
@@ -24,18 +24,21 @@ <h1>ClinGen Affiliations Service</h1>
                 <th>Status</th>
                 <th>Type</th>
                 <th>Family</th>
+                <th>ClinVar Submitter IDs</th>
                 <th>Members</th>
                 <th>Approvers</th>
-                <th>ClinVar Submitter IDs</th>
             </tr>
             </thead>
             <tbody>
             {% for affiliation in affiliations %}
                 <tr>
                     <td>
-                        <a href="/edit?affil={{affiliation.id}}">Real edit</a>
-                        <a href="/affiliation/{{ affiliation.id }}/edit">Edit</a>
-                        <a href="/affiliation/{{ affiliation.id }}">View</a>
+                        <a href="/edit?affil={{affiliation.id}}">
+                            <button>Edit</button>
+                        </a>
+                        <a href="/affiliation/{{ affiliation.id }}">
+                            <button>View</button>
+                        </a>
                     </td>
                     <td>{{ affiliation.id }}</td>
                     <td>{{ affiliation.name }}</td>
@@ -44,9 +47,9 @@ <h1>ClinGen Affiliations Service</h1>
                     <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.clinvar_submitter_ids }}</td>
                 </tr>
             {% endfor %}
             </tbody>