@inventreedb/ui 0.0.1

package/src/states/SettingsState.tsx

@@ -0,0 +1,206 @@
+/**
+ * State management for remote (server side) settings
+ */
+import { create, createStore } from 'zustand';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { apiUrl } from '@lib/functions/Api';
+import type { PathParams } from '@lib/types/Core';
+import type {
+  Setting,
+  SettingsLookup,
+  SettingsStateProps
+} from '@lib/types/Settings';
+import { api } from '../App';
+import { isTrue } from '../functions/conversion';
+import { useUserState } from './UserState';
+
+/**
+ * State management for global (server side) settings
+ */
+export const useGlobalSettingsState = create<SettingsStateProps>(
+  (set, get) => ({
+    settings: [],
+    lookup: {},
+    endpoint: ApiEndpoints.settings_global_list,
+    fetchSettings: async () => {
+      let success = true;
+      const { isLoggedIn } = useUserState.getState();
+
+      if (!isLoggedIn()) {
+        return success;
+      }
+
+      await api
+        .get(apiUrl(ApiEndpoints.settings_global_list))
+        .then((response) => {
+          set({
+            settings: response.data,
+            lookup: generate_lookup(response.data)
+          });
+        })
+        .catch((_error) => {
+          console.error('ERR: Error fetching global settings');
+          success = false;
+        });
+
+      return success;
+    },
+    getSetting: (key: string, default_value?: string) => {
+      return get().lookup[key] ?? default_value ?? '';
+    },
+    isSet: (key: string, default_value?: boolean) => {
+      const value = get().lookup[key] ?? default_value ?? 'false';
+      return isTrue(value);
+    }
+  })
+);
+
+/**
+ * State management for user (server side) settings
+ */
+export const useUserSettingsState = create<SettingsStateProps>((set, get) => ({
+  settings: [],
+  lookup: {},
+  endpoint: ApiEndpoints.settings_user_list,
+  fetchSettings: async () => {
+    let success = true;
+    const { isLoggedIn } = useUserState.getState();
+
+    if (!isLoggedIn()) {
+      return success;
+    }
+
+    await api
+      .get(apiUrl(ApiEndpoints.settings_user_list))
+      .then((response) => {
+        set({
+          settings: response.data,
+          lookup: generate_lookup(response.data)
+        });
+      })
+      .catch((_error) => {
+        console.error('ERR: Error fetching user settings');
+        success = false;
+      });
+
+    return success;
+  },
+  getSetting: (key: string, default_value?: string) => {
+    return get().lookup[key] ?? default_value ?? '';
+  },
+  isSet: (key: string, default_value?: boolean) => {
+    const value = get().lookup[key] ?? default_value ?? 'false';
+    return isTrue(value);
+  }
+}));
+
+/**
+ * State management for plugin settings
+ */
+interface CreatePluginSettingStateProps {
+  plugin: string;
+}
+
+export const createPluginSettingsState = ({
+  plugin
+}: CreatePluginSettingStateProps) => {
+  const pathParams: PathParams = { plugin };
+
+  return createStore<SettingsStateProps>()((set, get) => ({
+    settings: [],
+    lookup: {},
+    endpoint: ApiEndpoints.plugin_setting_list,
+    pathParams,
+    fetchSettings: async () => {
+      let success = true;
+
+      await api
+        .get(apiUrl(ApiEndpoints.plugin_setting_list, undefined, { plugin }))
+        .then((response) => {
+          const settings = response.data;
+          set({
+            settings,
+            lookup: generate_lookup(settings)
+          });
+        })
+        .catch((_error) => {
+          console.error(`Error fetching plugin settings for plugin ${plugin}`);
+          success = false;
+        });
+
+      return success;
+    },
+    getSetting: (key: string, default_value?: string) => {
+      return get().lookup[key] ?? default_value ?? '';
+    },
+    isSet: (key: string, default_value?: boolean) => {
+      const value = get().lookup[key] ?? default_value ?? 'false';
+      return isTrue(value);
+    }
+  }));
+};
+
+/**
+ * State management for machine settings
+ */
+interface CreateMachineSettingStateProps {
+  machine: string;
+  configType: 'M' | 'D';
+}
+
+export const createMachineSettingsState = ({
+  machine,
+  configType
+}: CreateMachineSettingStateProps) => {
+  const pathParams: PathParams = { machine, config_type: configType };
+
+  return createStore<SettingsStateProps>()((set, get) => ({
+    settings: [],
+    lookup: {},
+    endpoint: ApiEndpoints.machine_setting_detail,
+    pathParams,
+    fetchSettings: async () => {
+      let success = true;
+
+      await api
+        .get(apiUrl(ApiEndpoints.machine_setting_list, undefined, { machine }))
+        .then((response) => {
+          const settings = response.data.filter(
+            (s: any) => s.config_type === configType
+          );
+          set({
+            settings,
+            lookup: generate_lookup(settings)
+          });
+        })
+        .catch((error) => {
+          console.error(
+            `Error fetching machine settings for machine ${machine} with type ${configType}:`,
+            error
+          );
+          success = false;
+        });
+
+      return success;
+    },
+    getSetting: (key: string, default_value?: string) => {
+      return get().lookup[key] ?? default_value ?? '';
+    },
+    isSet: (key: string, default_value?: boolean) => {
+      const value = get().lookup[key] ?? default_value ?? 'false';
+      return isTrue(value);
+    }
+  }));
+};
+
+/*
+  return a lookup dictionary for the value of the provided Setting list
+*/
+function generate_lookup(data: Setting[]) {
+  const lookup_dir: SettingsLookup = {};
+  for (const setting of data) {
+    lookup_dir[setting.key] = setting.value;
+  }
+  return lookup_dir;
+}

package/src/states/StatusState.tsx

@@ -0,0 +1,55 @@
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import type { ModelType } from '@lib/enums/ModelType';
+import { apiUrl } from '@lib/functions/Api';
+import { api } from '../App';
+import type { StatusCodeListInterface } from '../components/render/StatusRenderer';
+import { statusCodeList } from '../defaults/backendMappings';
+import { useUserState } from './UserState';
+
+export type StatusLookup = Record<ModelType | string, StatusCodeListInterface>;
+
+interface ServerStateProps {
+  status?: StatusLookup;
+  setStatus: (newStatus: StatusLookup) => void;
+  fetchStatus: () => void;
+}
+
+export const useGlobalStatusState = create<ServerStateProps>()(
+  persist(
+    (set) => ({
+      status: undefined,
+      setStatus: (newStatus: StatusLookup) => set({ status: newStatus }),
+      fetchStatus: async () => {
+        const { isLoggedIn } = useUserState.getState();
+
+        // Fetch status data for rendering labels
+        if (!isLoggedIn()) {
+          return;
+        }
+
+        await api
+          .get(apiUrl(ApiEndpoints.global_status))
+          .then((response) => {
+            const newStatusLookup: StatusLookup = {} as StatusLookup;
+            for (const key in response.data) {
+              newStatusLookup[statusCodeList[key] || key] = {
+                status_class: key,
+                values: response.data[key].values
+              };
+            }
+            set({ status: newStatusLookup });
+          })
+          .catch(() => {
+            console.error('ERR: Error fetching global status information');
+          });
+      }
+    }),
+    {
+      name: 'global-status-state',
+      storage: createJSONStorage(() => sessionStorage)
+    }
+  )
+);

package/src/states/UserState.tsx

@@ -0,0 +1,202 @@
+import { create } from 'zustand';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import type { ModelType } from '@lib/enums/ModelType';
+import { UserPermissions, type UserRoles } from '@lib/enums/Roles';
+import { apiUrl } from '@lib/functions/Api';
+import type { UserProps, UserStateProps } from '@lib/types/User';
+import { api, setApiDefaults } from '../App';
+import { clearCsrfCookie } from '../functions/auth';
+
+/**
+ * Global user information state, using Zustand manager
+ */
+export const useUserState = create<UserStateProps>((set, get) => ({
+  user: undefined,
+  is_authed: false,
+  setAuthenticated: (authed = true) => {
+    set({ is_authed: authed });
+    setApiDefaults();
+  },
+  userId: () => {
+    const user: UserProps = get().user as UserProps;
+    return user?.pk;
+  },
+  username: () => {
+    const user: UserProps = get().user as UserProps;
+
+    if (user?.first_name || user?.last_name) {
+      return `${user.first_name} ${user.last_name}`.trim();
+    } else {
+      return user?.username ?? '';
+    }
+  },
+  setUser: (newUser: UserProps | undefined) => set({ user: newUser }),
+  getUser: () => get().user,
+  clearUserState: () => {
+    set({ user: undefined, is_authed: false });
+    clearCsrfCookie();
+    setApiDefaults();
+  },
+  fetchUserToken: async () => {
+    // If neither the csrf or session cookies are available, we cannot fetch a token
+    if (
+      !document.cookie.includes('csrftoken') &&
+      !document.cookie.includes('sessionid')
+    ) {
+      get().setAuthenticated(false);
+      return;
+    }
+
+    await api
+      .get(apiUrl(ApiEndpoints.auth_session))
+      .then((response) => {
+        if (response.status == 200 && response.data.meta.is_authenticated) {
+          get().setAuthenticated(true);
+        } else {
+          get().setAuthenticated(false);
+        }
+      })
+      .catch(() => {
+        get().setAuthenticated(false);
+      });
+  },
+  fetchUserState: async () => {
+    if (!get().isAuthed()) {
+      await get().fetchUserToken();
+    }
+
+    // If we still don't have a token, clear the user state and return
+    if (!get().isAuthed()) {
+      get().clearUserState();
+      return;
+    }
+
+    // Fetch user data
+    await api
+      .get(apiUrl(ApiEndpoints.user_me), {
+        timeout: 2000
+      })
+      .then((response) => {
+        if (response.status == 200) {
+          const user: UserProps = {
+            pk: response.data.pk,
+            first_name: response.data?.first_name ?? '',
+            last_name: response.data?.last_name ?? '',
+            email: response.data.email,
+            username: response.data.username,
+            groups: response.data.groups,
+            profile: response.data.profile
+          };
+          get().setUser(user);
+          // profile info
+        } else {
+          get().clearUserState();
+        }
+      })
+      .catch(() => {
+        get().clearUserState();
+      });
+
+    if (!get().isLoggedIn()) {
+      return;
+    }
+
+    // Fetch role data
+    await api
+      .get(apiUrl(ApiEndpoints.user_roles))
+      .then((response) => {
+        if (response.status == 200) {
+          const user: UserProps = get().user as UserProps;
+
+          // Update user with role data
+          if (user) {
+            user.roles = response.data?.roles ?? {};
+            user.permissions = response.data?.permissions ?? {};
+            user.is_staff = response.data?.is_staff ?? false;
+            user.is_superuser = response.data?.is_superuser ?? false;
+            get().setUser(user);
+          }
+        } else {
+          get().clearUserState();
+        }
+      })
+      .catch((_error) => {
+        console.error('ERR: Error fetching user roles');
+        get().clearUserState();
+      });
+  },
+  isAuthed: () => {
+    return get().is_authed;
+  },
+  isLoggedIn: () => {
+    if (!get().isAuthed()) {
+      return false;
+    }
+    const user: UserProps = get().user as UserProps;
+    return !!user && !!user.pk;
+  },
+  isStaff: () => {
+    const user: UserProps = get().user as UserProps;
+    return user?.is_staff ?? false;
+  },
+  isSuperuser: () => {
+    const user: UserProps = get().user as UserProps;
+    return user?.is_superuser ?? false;
+  },
+  checkUserRole: (role: UserRoles, permission: UserPermissions) => {
+    // Check if the user has the specified permission for the specified role
+    const user: UserProps = get().user as UserProps;
+
+    if (!user) {
+      return false;
+    }
+
+    if (user?.is_superuser) return true;
+    if (user?.roles === undefined) return false;
+    if (user?.roles[role] === undefined) return false;
+    if (user?.roles[role] === null) return false;
+
+    return user?.roles[role]?.includes(permission) ?? false;
+  },
+  hasDeleteRole: (role: UserRoles) => {
+    return get().checkUserRole(role, UserPermissions.delete);
+  },
+  hasChangeRole: (role: UserRoles) => {
+    return get().checkUserRole(role, UserPermissions.change);
+  },
+  hasAddRole: (role: UserRoles) => {
+    return get().checkUserRole(role, UserPermissions.add);
+  },
+  hasViewRole: (role: UserRoles) => {
+    return get().checkUserRole(role, UserPermissions.view);
+  },
+  checkUserPermission: (model: ModelType, permission: UserPermissions) => {
+    // Check if the user has the specified permission for the specified model
+    const user: UserProps = get().user as UserProps;
+
+    if (!user) {
+      return false;
+    }
+
+    if (user?.is_superuser) return true;
+
+    if (user?.permissions === undefined) return false;
+    if (user?.permissions[model] === undefined) return false;
+    if (user?.permissions[model] === null) return false;
+
+    return user?.permissions[model]?.includes(permission) ?? false;
+  },
+  hasDeletePermission: (model: ModelType) => {
+    return get().checkUserPermission(model, UserPermissions.delete);
+  },
+  hasChangePermission: (model: ModelType) => {
+    return get().checkUserPermission(model, UserPermissions.change);
+  },
+  hasAddPermission: (model: ModelType) => {
+    return get().checkUserPermission(model, UserPermissions.add);
+  },
+  hasViewPermission: (model: ModelType) => {
+    return get().checkUserPermission(model, UserPermissions.view);
+  }
+}));

package/src/states/states.tsx

@@ -0,0 +1,69 @@
+import type { PluginProps } from '@lib/types/Plugins';
+import type { NavigateFunction } from 'react-router-dom';
+import { setApiDefaults } from '../App';
+import { useServerApiState } from './ApiState';
+import { useIconState } from './IconState';
+import { useGlobalSettingsState, useUserSettingsState } from './SettingsState';
+import { useGlobalStatusState } from './StatusState';
+import { useUserState } from './UserState';
+
+// Type interface fully defining the current server
+export interface ServerAPIProps {
+  server: null | string;
+  version: null | string;
+  instance: null | string;
+  apiVersion: null | number;
+  worker_running: null | boolean;
+  worker_pending_tasks: null | number;
+  plugins_enabled: null | boolean;
+  plugins_install_disabled: null | boolean;
+  active_plugins: PluginProps[];
+  email_configured: null | boolean;
+  debug_mode: null | boolean;
+  docker_mode: null | boolean;
+  database: null | string;
+  system_health: null | boolean;
+  platform: null | string;
+  installer: null | string;
+  target: null | string;
+  default_locale: null | string;
+  django_admin: null | string;
+  settings: {
+    sso_registration: null | boolean;
+    registration_enabled: null | boolean;
+    password_forgotten_enabled: null | boolean;
+  } | null;
+  customize: null | {
+    logo: string;
+    splash: string;
+    login_message: string;
+    navbar_message: string;
+  };
+}
+
+/*
+ * Refetch all global state information.
+ * Necessary on login, or if locale is changed.
+ */
+export async function fetchGlobalStates(
+  navigate?: NavigateFunction | undefined
+) {
+  const { isLoggedIn } = useUserState.getState();
+
+  if (!isLoggedIn()) {
+    return;
+  }
+
+  setApiDefaults();
+
+  useServerApiState.getState().fetchServerApiState();
+  const result = await useUserSettingsState.getState().fetchSettings();
+  if (!result && navigate) {
+    console.log('MFA is required - setting up');
+    // call mfa setup
+    navigate('/mfa-setup');
+  }
+  useGlobalSettingsState.getState().fetchSettings();
+  useGlobalStatusState.getState().fetchStatus();
+  useIconState.getState().fetchIcons();
+}

package/src/tables/Column.tsx

@@ -0,0 +1,29 @@
+import type { ApiFormFieldType } from '@lib/types/Forms';
+
+export type TableColumnProps<T = any> = {
+  accessor?: string; // The key in the record to access
+  title?: string; // The title of the column - Note: this may be supplied by the API, and is not required, but it can be overridden if required
+  ordering?: string; // The key in the record to sort by (defaults to accessor)
+  sortable?: boolean; // Whether the column is sortable
+  switchable?: boolean; // Whether the column is switchable
+  hidden?: boolean; // Whether the column is hidden
+  editable?: boolean; // Whether the value of this column can be edited
+  definition?: ApiFormFieldType; // Optional field definition for the column
+  render?: (record: T, index?: number) => any; // A custom render function
+  filter?: any; // A custom filter function
+  filtering?: boolean; // Whether the column is filterable
+  width?: number; // The width of the column
+  noWrap?: boolean; // Whether the column should wrap
+  ellipsis?: boolean; // Whether the column should be ellipsized
+  textAlign?: 'left' | 'center' | 'right'; // The text alignment of the column
+  cellsStyle?: any; // The style of the cells in the column
+  extra?: any; // Extra data to pass to the render function
+  noContext?: boolean; // Disable context menu for this column
+};
+
+/**
+ * Interface for the table column definition
+ */
+export type TableColumn<T = any> = {
+  accessor: string; // The key in the record to access
+} & TableColumnProps<T>;