Add a button to add new ranks in trees

specify · Mar 18, 2024 · 19bc954 · 19bc954
1 parent 0c6b825
commit 19bc954
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 5 deletions.
diff --git a/specifyweb/frontend/js_src/lib/components/TreeView/Tree.tsx b/specifyweb/frontend/js_src/lib/components/TreeView/Tree.tsx
@@ -22,6 +22,12 @@ import { userPreferences } from '../Preferences/userPreferences';
 import type { Conformations, Row, Stats } from './helpers';
 import { fetchStats } from './helpers';
 import { TreeRow } from './Row';
+import { commonText } from '../../localization/common';
+import { Dialog } from '../Molecules/Dialog';
+import { Form, Input, Label } from '../Atoms/Form';
+import { Submit } from '../Atoms/Submit';
+import { ping } from '../../utils/ajax/ping';
+import { LoadingContext } from '../Core/Contexts';
 
 const treeToPref = {
   Geography: 'geography',
@@ -100,6 +106,25 @@ export function Tree<SCHEMA extends AnyTree>({
     [baseUrl, statsThreshold]
   );
 
+  const loading = React.useContext(LoadingContext);
+  const rankId = useId('add-tree-rank')('');
+  const [isAddingRank, setIsAddingRank] = React.useState(false);
+  const [newRankName, setNewRankName] = React.useState('');
+  function addRank(parentRankName: string): void {
+    const url = `/api/specify_tree/${tableName.toLowerCase()}/add_tree_rank/`;
+    loading(
+      ping(url, {
+        method: 'POST',
+        body: {
+          newRankName: newRankName,
+          parentRankName: parentRankName,
+          treeName: tableName.toLowerCase(),
+        },
+      }).then(() => globalThis.location.reload())
+    );
+    setIsAddingRank(false);
+  }
+
   return (
     <div
       className={`
@@ -172,10 +197,50 @@ export function Tree<SCHEMA extends AnyTree>({
                       : rankName) as LocalizedString
                   }
                 </Button.LikeLink>
-                {isEditingRanks &&
-                collapsedRanks?.includes(rank.rankId) !== true ? (
-                  <EditTreeRank rank={rank} />
-                ) : undefined}
+                {isEditingRanks && (
+                  <>
+                    {collapsedRanks?.includes(rank.rankId) !== true ? (
+                      <EditTreeRank rank={rank} />
+                    ) : undefined}
+                    <Button.Icon
+                      icon="plus"
+                      title={treeText.addNewRank()}
+                      onClick={() => setIsAddingRank(true)}
+                    />
+                  </>
+                )}
+                {isAddingRank && (
+                  <Dialog
+                    buttons={
+                      <>
+                        <Button.DialogClose>
+                          {commonText.cancel()}
+                        </Button.DialogClose>
+                        <Submit.Info form={rankId}>
+                          {commonText.create()}
+                        </Submit.Info>
+                      </>
+                    }
+                    onClose={() => setIsAddingRank(false)}
+                    header={treeText.addNewRank()}
+                  >
+                    <Form
+                      id={rankId}
+                      onSubmit={(): void => {
+                        addRank(rankName);
+                      }}
+                    >
+                      <Label.Block>
+                        {treeText.newRankName()}
+                        <Input.Text
+                          required
+                          value={newRankName}
+                          onValueChange={setNewRankName}
+                        />
+                      </Label.Block>
+                    </Form>
+                  </Dialog>
+                )}
               </div>
             );
           })}

diff --git a/specifyweb/frontend/js_src/lib/components/TreeView/index.tsx b/specifyweb/frontend/js_src/lib/components/TreeView/index.tsx
@@ -212,6 +212,14 @@ function TreeView<SCHEMA extends AnyTree>({
         setLastFocusedTree={() => setLastFocusedTree(type)}
         tableName={tableName}
         treeDefinitionItems={treeDefinitionItems}
+        onRefresh={(): void => {
+          // Force re-load
+          setRows(undefined);
+          globalThis.setTimeout(() => {
+            setLastFocusedRow(undefined);
+            setRows(rows);
+          }, 0);
+        }}
       />
     );
 

diff --git a/specifyweb/frontend/js_src/lib/localization/tree.ts b/specifyweb/frontend/js_src/lib/localization/tree.ts
@@ -459,4 +459,10 @@ export const treeText = createDictionary({
     'uk-ua': 'Синхронізувати',
     'ru-ru': 'Это приведет к безвозвратному удалению следующего ресурса',
   },
+  addNewRank: {
+    'en-us': 'Add New Rank',
+  },
+  newRankName: {
+    'en-us': 'New Rank Name',
+  },
 } as const);
diff --git a/specifyweb/specify/tree_views.py b/specifyweb/specify/tree_views.py
@@ -514,6 +514,7 @@ def add_tree_rank(request, tree) -> HttpResponse:
     new_rank_name = data.get('newRankName')
     parent_rank_name = data.get('parentRankName')
     tree_id = data.get('treeID', 1)
+    tree_name = data.get('name')
     new_rank_title = data.get('newRankTitle', new_rank_name)
     use_default_rank_ids = data.get('useDefaultRankIDs', True)
 
@@ -533,7 +534,7 @@ def add_tree_rank(request, tree) -> HttpResponse:
 
     # Determine the new rank id parameters
     new_rank_id = None
-    tree_def = tree_def_model.objects.get(id=tree_id)
+    tree_def = tree_def_model.objects.get(name=tree_name) if tree_name else tree_def_model.objects.get(id=tree_id)
     parent_rank = tree_def_item_model.objects.filter(treedef=tree_def, name=parent_rank_name).first()
     if parent_rank is None and parent_rank_name != 'root':
         return HttpResponseBadRequest('Target rank name does not exist')
@@ -684,6 +685,7 @@ def delete_tree_rank(request, tree) -> HttpResponse:
     data = json.loads(request.body)
     rank_name = data.get('rankName')
     tree_id = data.get('treeID', 1)
+    tree_name = data.get('name')
 
     # Throw exceptions if the required parameters are not given correctly
     if rank_name is None:
@@ -697,6 +699,7 @@ def delete_tree_rank(request, tree) -> HttpResponse:
     tree_def_model = getattr(spmodels, tree_def_model_name)
     tree_def_item_model = getattr(spmodels, tree_def_item_model_name)
     tree_def = tree_def_model.objects.get(id=tree_id)
+    tree_def = tree_def_model.objects.get(name=tree_name) if tree_name else tree_def_model.objects.get(id=tree_id)
 
     # Make sure no nodes are present in the rank before deleting rank
     rank = tree_def_item_model.objects.get(name=rank_name)