Create a system config page

specifyweb/context/urls.py

@@ -20,6 +20,7 @@
     url(r'^api_endpoints_all.json$', views.api_endpoints_all),
     url(r'^user.json$', views.user),
     url(r'^system_info.json$', views.system_info),
+    url(r'^all_system_data.json$', views.all_system_data),
     url(r'^domain.json$', views.domain),
     url(r'^view.json$', views.view),
     url(r'^views.json$', views.views),

specifyweb/context/views.py

@@ -25,7 +25,7 @@
     PermissionTargetAction, \
     check_permission_targets, skip_collection_access_check, query_pt, \
     CollectionAccessPT
-from specifyweb.specify.models import Collection, Institution, \
+from specifyweb.specify.models import Collection, Discipline, Division, Institution, \
     Specifyuser, Spprincipal, Spversion, Collectionobjecttype
 from specifyweb.specify.schema import base_schema
 from specifyweb.specify.api import uri_for_model
@@ -654,6 +654,53 @@ def system_info(request):
         )
     return HttpResponse(json.dumps(info), content_type='application/json')
 
+@require_http_methods(["GET"])
+@cache_control(max_age=86400, public=True)
+@skip_collection_access_check
+def all_system_data(request):
+    """
+    Returns all institutions, divisions, disciplines, and collections.
+    """
+    institution = Institution.objects.get()
+    divisions = list(Division.objects.all())
+    disciplines = list(Discipline.objects.all())
+    collections = list(Collection.objects.all())
+
+    discipline_map = {}
+    for discipline in disciplines:
+        discipline_map[discipline.id] = {
+            "id": discipline.id,
+            "name": discipline.name,
+            "children": []
+        }
+
+    for collection in collections:
+        if collection.discipline_id in discipline_map:
+            discipline_map[collection.discipline_id]["children"].append({
+                "id": collection.id,
+                "name": collection.collectionname
+            })
+
+    division_map = {}
+    for division in divisions:
+        division_map[division.id] = {
+            "id": division.id,
+            "name": division.name,
+            "children": []
+        }
+
+    for discipline in disciplines:
+        if discipline.division_id in division_map:
+            division_map[discipline.division_id]["children"].append(discipline_map[discipline.id])
+
+    institution_data = {
+            "id": institution.id,
+            "name": institution.name,
+            "children": list(division_map.values())
+    }
+
+    return JsonResponse(institution_data, safe=False)
+
 PATH_GROUP_RE = re.compile(r'\(\?P<([^>]+)>[^\)]*\)')
 PATH_GROUP_RE_EXTENDED = re.compile(r'<([^:]+):([^>]+)>')
 

specifyweb/frontend/js_src/lib/components/FormParse/webOnlyViews.ts

@@ -84,6 +84,11 @@ export const webOnlyViews = f.store(() =>
       'edit',
       ['name']
     ),
+    [collection]: autoGenerateViewDefinition(
+      tables.Collection,
+      'form',
+      'edit',
+      ['collectionName', 'code', 'catalogNumFormatName'])
   } as const)
 );
 
@@ -92,3 +97,4 @@ export const attachmentView = 'ObjectAttachment';
 export const spAppResourceView = '_SpAppResourceView_name';
 export const spViewSetNameView = '_SpViewSetObj_name';
 export const recordSetView = '_RecordSet_name';
+export const collection = '_Collection_setup';

specifyweb/frontend/js_src/lib/components/Header/userToolDefinitions.ts

@@ -79,6 +79,11 @@ const rawUserTools = ensure<IR<IR<Omit<MenuItem, 'name'>>>>()({
       url: '/specify/security/',
       icon: icons.fingerPrint,
     },
+    systemConfigurationTool: {
+      title: userText.systemConfigurationTool(),
+      url: '/specify/system-configuration/',
+      icon: icons.fingerPrint,
+    },
     repairTree: {
       title: headerText.repairTree(),
       url: '/specify/overlay/tree-repair/',

specifyweb/frontend/js_src/lib/components/Router/Routes.tsx

@@ -174,6 +174,12 @@ export const routes: RA<EnhancedRoute> = [
       },
     ],
   },
+  {
+    path: 'system-configuration',
+    title: userText.securityPanel(),
+    element: () =>
+      import('../Toolbar/SystemConfigTool').then(({ SystemConfigurationTool }) => SystemConfigurationTool),
+  },
   {
     path: 'attachments',
     children: [

specifyweb/frontend/js_src/lib/components/Toolbar/SystemConfigTool.tsx

@@ -0,0 +1,161 @@
+import React from 'react';
+
+import { useBooleanState } from '../../hooks/useBooleanState';
+import { userText } from '../../localization/user';
+import type { RA } from '../../utils/types';
+import { Container, H2, H3, Ul } from '../Atoms';
+import { Button } from '../Atoms/Button';
+import type { SpecifyResource } from '../DataModel/legacyTypes';
+import { tables } from '../DataModel/tables';
+import type { Collection } from '../DataModel/types';
+import { collection } from '../FormParse/webOnlyViews';
+import { ResourceView } from '../Forms/ResourceView';
+import { load } from '../InitialContext';
+import { Dialog, LoadingScreen } from '../Molecules/Dialog';
+
+export function SystemConfigurationTool(): JSX.Element | null {
+  const [allInfo, setAllInfo] = React.useState<InstitutionData | null>(null);
+
+  const [newResourceOpen, handleNewResource, closeNewResource] = useBooleanState()
+
+  const [parentId, setParentId] = React.useState<number | undefined>()
+
+  const [newResource, setNewResource] = React.useState<SpecifyResource<Collection> | undefined>()
+
+  React.useEffect(() => {
+    fetchAllSystemData.then(setAllInfo).catch(() => console.warn('Error when fetching institution info'));
+  }, []);
+
+  const renderHierarchy = (institution: InstitutionData | null): JSX.Element => {
+    if (!institution) return <LoadingScreen />;
+
+    return (
+      <Ul className="m-4">
+        <li>
+          <div className='flex'>
+          <H2>{`Institution: ${institution.name}`}</H2>
+          <Button.Icon
+                  icon="plus"
+                  title="Add new division to institution"
+                  onClick={() => {
+                    console.log(`'Add new division to institution' ${institution.id}`)
+                    setParentId(institution.id)
+                    setNewResource(new tables.Division.Resource())
+                    handleNewResource()
+                  }}
+                />
+                </div>
+            <Ul className="m-6">
+              {institution.children.map((division) => (
+                <li key={division.id}>
+                  <div className='flex'>
+                  <H3>{`Division: ${division.name}`}</H3>
+                  <Button.Icon
+                  icon="plus"
+                  title="Add new discipline to institution"
+                  onClick={() => {
+                    console.log(`'Add new discipline to division' ${division.id}`)
+                    setParentId(division.id)
+                    setNewResource(new tables.Discipline.Resource())
+                    handleNewResource()
+                  }}
+                />
+                </div>
+                  {division.children.length > 0 && (
+                    <Ul className="m-6">
+                      {division.children.map((discipline) => (
+                        <li key={discipline.id}>
+                          <div className='flex'>
+                          <h4>{`Discipline: ${discipline.name}`}</h4>
+                          <Button.Icon
+                            icon="plus"
+                            title="Add new collection to discipline"
+                            onClick={() =>{
+                              console.log(`'Add new collection to discipline' ${discipline.id}`)
+                              setParentId(discipline.id)
+                              setNewResource(new tables.Collection.Resource())
+                              handleNewResource()
+                              }}/>
+                          </div>
+                          {discipline.children.length > 0 && (
+                            <Ul className="m-6">
+                              {discipline.children.map((collection) => (
+                                <li className="m-4 list-disc" key={collection.id}>
+                                  <p>{collection.name}</p>
+                                </li>
+                              ))}
+                            </Ul>
+                          )}
+                        </li>
+                      ))}
+                    </Ul>
+                  )}
+
+                </li>
+              ))}
+            </Ul>
+        </li>
+      </Ul>
+    );
+  };
+
+  return (
+    <Container.FullGray>
+      <H2 className="text-2xl">{userText.systemConfigurationTool()}</H2>
+      <div className="flex h-0 flex-1 flex-col gap-4 md:flex-row">
+      {allInfo === undefined || allInfo === null ? <LoadingScreen /> : renderHierarchy(allInfo)}
+      </div>
+      {newResourceOpen ?     
+        <Dialog header="Add new Resource" onClose={closeNewResource}>
+          <ResourceView
+                dialog="modal"
+                isDependent={false}
+                isSubForm={false}
+                resource={newResource}
+                viewName={collection}
+                onAdd={undefined}
+                onClose={closeNewResource}
+                onDeleted={undefined}
+                onSaved={() => console.log('Click')}
+              />
+          </Dialog> 
+        : undefined}
+    </Container.FullGray>
+  );
+}
+
+type InstitutionData = {
+  /*
+   * Readonly 'institution': {
+   *   // Institution
+   */
+  readonly id: number;
+  readonly name: string;
+  readonly children: RA<{
+    // Division
+    readonly id: number;
+    readonly name: string;
+    readonly children: RA<{
+      // Discipline
+      readonly id: number;
+      readonly name: string;
+      readonly children: RA<{
+        // Collection
+        readonly id: number;
+        readonly name: string;
+      }>;
+    }>;
+  }>;}
+// };
+
+let institutionData: InstitutionData;
+
+export const fetchAllSystemData = load<InstitutionData>(
+  '/context/all_system_data.json',
+  'application/json'
+).then((data: InstitutionData) => {
+  institutionData = data;
+  return data;
+});
+
+export const getAllInfo = ():InstitutionData => institutionData

specifyweb/frontend/js_src/lib/localization/user.ts

@@ -624,6 +624,9 @@ export const userText = createDictionary({
     'de-ch': 'Sicherheit und Konten',
     'ru-ru': 'Безопасность и учетные записи',
   },
+  systemConfigurationTool: {
+    'en-us': 'System Configuration Tool',
+  },
   userRoleLibrary: {
     'en-us': 'Institution Library of Role Templates',
     'ru-ru': 'Библиотека шаблонов ролей учреждения',