From 79351f7f2750cbfe44ee868aee46ad0acfde5afe Mon Sep 17 00:00:00 2001
From: Frederick Muriuki Muriithi
Date: Mon, 17 Jul 2023 09:48:23 +0300
Subject: UI: Change input elements

Change the input elements from all "<textarea ...>" to more closely
adhere to the data that each element is concerned with.
---
 wqflask/wqflask/__init__.py                   |  4 +-
 wqflask/wqflask/templates/edit_phenotype.html | 61 ++++++++++++++++++++-------
 2 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/wqflask/wqflask/__init__.py b/wqflask/wqflask/__init__.py
index 25f72ec8..9a608474 100644
--- a/wqflask/wqflask/__init__.py
+++ b/wqflask/wqflask/__init__.py
@@ -1,6 +1,7 @@
 """Entry point for flask app"""
 # pylint: disable=C0413,E0611
 import time
+import datetime
 from typing import Tuple
 from urllib.parse import urljoin, urlparse
 
@@ -48,7 +49,8 @@ app.jinja_env.globals.update(
     logged_in=user_logged_in,
     authserver_authorise_uri=authserver_authorise_uri,
     user_details=user_details,
-    num_collections=num_collections)
+    num_collections=num_collections,
+    datetime=datetime)
 
 app.config["SESSION_REDIS"] = redis.from_url(app.config["REDIS_URL"])
 
diff --git a/wqflask/wqflask/templates/edit_phenotype.html b/wqflask/wqflask/templates/edit_phenotype.html
index 813947d6..240c5e60 100644
--- a/wqflask/wqflask/templates/edit_phenotype.html
+++ b/wqflask/wqflask/templates/edit_phenotype.html
@@ -52,7 +52,8 @@
                 Description will be ignored.  Do not enter any non-digit
                 character in this field. -->
             <div class="col-sm-7 col-lg-8">
-                <textarea name="pubmed-id" class="form-control" rows="1">{{ publication.pubmed_id |default('', true) }}</textarea>
+              <input type="text" name="pubmed-id" class="form-control"
+		     value="{{publication.pubmed_id |default('', true)}}">
 		<input name="old_id_" class="changed" type="hidden" value="{{ publication.id_ |default('', true) }}"/>
             </div>
         </div>
@@ -82,9 +83,11 @@
             </div>
         </div>
         <div class="form-group">
-            <label for="units" class="col-sm-3 col-lg-2 control-label text-left">Units</label>
+            <label for="txt:units" class="col-sm-3 col-lg-2 control-label text-left">Units</label>
             <div class="col-sm-7 col-lg-8">
-                <textarea name="units" class="form-control" rows="1">{{ phenotype.units |default('', true) }}</textarea>
+              <input id="txt:units" type="text" name="units"
+		     class="form-control"
+		     value="{{phenotype.units |default('', true)}}" />
                 <input name="old_units" class="changed" type="hidden" value="{{ phenotype.units |default('', true) }}"/>
             </div>
         </div>
@@ -93,7 +96,9 @@
                 Prepublication Abbreviation
             </label>
             <div class="col-sm-7 col-lg-8">
-                <textarea name="pre-pub-abbrev" class="form-control" rows="1">{{ phenotype.pre_pub_abbreviation |default('', true) }}</textarea>
+              <input id="pre-pub-abbrev" name="pre-pub-abbrev"
+		     class="form-control"
+		     value="{{phenotype.pre_pub_abbreviation |default('', true)}}" />
                 <input name="old_pre_pub_abbreviation" class="changed" type="hidden" value="{{ phenotype.pre_pub_abbreviation |default('', true) }}"/>
             </div>
         </div>
@@ -102,7 +107,9 @@
                 Postpublication Abbreviation
             </label>
             <div class="col-sm-7 col-lg-8">
-                <textarea name="post-pub-abbrev" class="form-control" rows="1">{{ phenotype.post_pub_abbreviation |default('', true) }}</textarea>
+              <input type="text" id="post-pub-abbrex" name="post-pub-abbrev"
+		     class="form-control"
+		     value="{{phenotype.post_pub_abbreviation |default('', true)}}" />
                 <input name="old_post_pub_abbreviation" class="changed" type="hidden" value="{{ phenotype.post_pub_abbreviation |default('', true) }}"/>
             </div>
         </div>
@@ -111,7 +118,9 @@
                 Lab Code
             </label>
             <div class="col-sm-7 col-lg-8">
-                <textarea name="labcode" class="form-control" rows="1">{{ phenotype.lab_code |default('', true) }}</textarea>
+              <input type="text" id="labcode" name="labcode"
+		     class="form-control"
+		     value="{{phenotype.lab_code |default('', true) }}" />
                 <input name="old_lab_code" class="changed" type="hidden" value="{{ phenotype.lab_code |default('', true) }}"/>
             </div>
         </div>
@@ -120,7 +129,9 @@
                 Submitter
             </label>
             <div class="col-sm-7 col-lg-8">
-                <textarea name="submitter" class="form-control" rows="1">{{ phenotype.submitter |default('', true) }}</textarea>
+              <input type="text" id="submitter" name="submitter"
+		     class="form-control"
+		     value="{{phenotype.submitter |default('', true)}}" />
                 <input name="old_submitter" class="changed" type="hidden" value="{{ phenotype.submitter |default('', true) }}"/>
             </div>
         </div>
@@ -129,7 +140,9 @@
                 Authorized Users
             </label>
             <div class="col-sm-7 col-lg-8">
-                <textarea name="authorized-users" class="form-control" rows="1">{{ phenotype.authorized_users |default('', true) }}</textarea>
+              <input type="text" id="authorized-users" name="authorized-users"
+		     class="form-control"
+		     value="{{phenotype.authorized_users |default('', true)}}" />
                 <input name="old_authorized_users" class="changed" type="hidden" value="{{ phenotype.authorized_users |default('', true) }}"/>
             </div>
         </div>
@@ -143,21 +156,33 @@
         <div class="form-group">
                 <label for="year" class="col-sm-3 col-lg-2 control-label text-left">Year</label>
                 <div class="col-sm-7 col-lg-8">
-                    <textarea name="year" class="form-control" rows="1">{{ publication.year |default('', true) }}</textarea>
+                  <input type="number" name="year" class="form-control"
+			 min="1000"
+			 value="{{publication.year |default(datetime.datetime.now().year) }}" />
                     <input name="old_year" class="changed" type="hidden" value="{{ publication.year |default('', true) }}"/>
                 </div>
         </div>
         <div class="form-group">
                 <label for="month" class="col-sm-3 col-lg-2 control-label text-left">Month</label>
                 <div class="col-sm-7 col-lg-8">
-                    <textarea name="month" class="form-control" rows="1">{{ publication.month |default('', true) }}</textarea>
+		  <select id="month" name="month" class="form-control">
+		    {%set selected_month =(publication.month or datetime.datetime.strftime("%b"))%}
+		    {%for smonth, lmonth in (("Jan", "January"),("Feb", "February"),("Mar", "March"),("Apr", "April"),("May", "May"),("Jun", "Jun"),("Jul", "July"),("Aug", "August"),("Sep", "September"),("Oct", "October"),("Nov", "November"),("Dec", "December"))%}
+		    <option value="{{smonth}}"
+			    {%if smonth == selected_month%}
+			    selected="selected"
+			    {%endif%}>{{lmonth}}</option>
+		    {%endfor%}
+		  </select>
                     <input name="old_month" class="changed" type="hidden" value="{{ publication.month |default('', true) }}"/>
                 </div>
         </div>
 	    <div class="form-group">
-            <label for="title" class="col-sm-3 col-lg-2 control-label text-left">Title</label>
+            <label for="txt:title" class="col-sm-3 col-lg-2 control-label text-left">Title</label>
             <div class="col-sm-7 col-lg-8">
-                <textarea name="title" class="form-control" rows="2">{{ publication.title |default('', true) }}</textarea>
+              <input type="text" id="txt:title" name="title"
+		     class="form-control"
+		     value="{{publication.title |default('', true)}}" />
                 <input name="old_title" class="changed" type="hidden" value="{{ publication.title |default('', true) }}"/>
             </div>
         </div>
@@ -171,21 +196,27 @@
         <div class="form-group">
                 <label for="volume" class="col-sm-3 col-lg-2 control-label text-left">Volume</label>
                 <div class="col-sm-7 col-lg-8">
-                    <textarea name="volume" class="form-control" rows="1">{{ publication.volume |default('', true) }}</textarea>
+                  <input type="text" id="volume" name="volume"
+			 class="form-control"
+			 value="{{publication.volume |default('', true)}}" />
                     <input name="old_volume" class="changed" type="hidden" value="{{ publication.volume |default('', true) }}"/>
                 </div>
         </div>
 		<div class="form-group">
             <label for="journal" class="col-sm-3 col-lg-2 control-label text-left">Journal</label>
             <div class="col-sm-7 col-lg-8">
-                <textarea name="journal" class="form-control" rows="1">{{ publication.journal |default('', true) }}</textarea>
+              <input type="text" id="journal" name="journal"
+		     class="form-control"
+		     value="{{publication.journal |default('', true)}}" />
                 <input name="old_journal" class="changed" type="hidden" value="{{ publication.journal_ |default('', true) }}"/>
             </div>
         </div>
         <div class="form-group">
             <label for="pages" class="col-sm-3 col-lg-2 control-label text-left">Pages</label>
             <div class="col-sm-7 col-lg-8">
-                <textarea name="pages" class="form-control" rows="1">{{ publication.pages |default('', true) }}</textarea>
+              <input type="text" id="pages" name="pages"
+		     class="form-control"
+		     value="{{publication.pages |default('', true)}}" />
                 <input name="old_pages" class="changed" type="hidden" value="{{ publication.pages |default('', true) }}"/>
             </div>
         </div>
-- 
cgit v1.2.3