Add a "Clear" button in the allele edit dialog

Refs #2758
pombase · Feb 28, 2024 · a21cf4c · a21cf4c
1 parent d34f141
commit a21cf4c
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 1 deletion.
diff --git a/root/static/css/style.css b/root/static/css/style.css
@@ -1356,6 +1356,15 @@ input[readonly="1"] {
   padding-bottom: 0.25em;
 }
 
+.curs-allele-edit .modal-footer {
+  text-align: unset;
+  display: flex;
+}
+
+.curs-allele-edit .modal-footer .curs-allele-edit-cancel {
+  margin-left: auto;
+}
+
 .curs-allele-evidence-select {
   width: 22em;
 }

diff --git a/root/static/js/canto-modules.js b/root/static/js/canto-modules.js
@@ -4162,6 +4162,7 @@ var alleleEditDialogCtrl =
       newSynonymsString: '',
     };
 
+    $scope.databaseName = CantoGlobals.database_name;
     $scope.userIsAdmin = CantoGlobals.current_user_is_admin;
     $scope.pathogenHostMode = CantoGlobals.pathogen_host_mode;
     $scope.allele_qc_api_url = CantoGlobals.allele_qc_api_url;
@@ -4258,6 +4259,16 @@ var alleleEditDialogCtrl =
       processSynonyms();
     };
 
+    $scope.clearExisting = function() {
+      $scope.alleleData.external_uniquename = undefined;
+      $scope.alleleData.existingSynonyms = [];
+      $scope.alleleData.newSynonyms = [];
+      $scope.alleleData.description = undefined;
+      $scope.alleleData.type = undefined;
+      $scope.alleleData.name = '';
+      $scope.alleleData.display_name = undefined;
+    };
+
     $scope.descriptionChanged = function() {
       $scope.descriptionNeedsChecking = false;
       $scope.descriptionState = 'unset';

diff --git a/root/static/ng_templates/allele_edit.html b/root/static/ng_templates/allele_edit.html
@@ -237,7 +237,12 @@ <h4 class="modal-title">
       </div>
 
       <div class="modal-footer">
-        <button class="btn btn-warning" ng-click="cancel()"
+        <button class="btn btn-secondary curs-allele-edit-clear-name" ng-click="clearExisting()"
+                ng-if="!!alleleData.external_uniquename"
+                title="Clear dialog to enter new details or to find a different allele from the {{databaseName}} database">Clear</button>
+
+        <button class="btn btn-warning curs-allele-edit-cancel" ng-click="cancel()"
+                title="Discard changes and close this dialog"
                 ng-disabled="okInProgress">Cancel</button>
         <button class="btn btn-primary" ng-click="ok()" ng-alt-enter="ok()"
                 title="{{okTitle()}}"