@inventreedb/ui 0.0.1

package/src/components/settings/SettingItem.tsx

@@ -0,0 +1,176 @@
+import {
+  Button,
+  Group,
+  Paper,
+  Space,
+  Stack,
+  Switch,
+  Text,
+  useMantineColorScheme
+} from '@mantine/core';
+import { IconEdit } from '@tabler/icons-react';
+import { useEffect, useMemo, useState } from 'react';
+
+import { ModelType } from '@lib/enums/ModelType';
+import { apiUrl } from '@lib/functions/Api';
+import type { Setting } from '@lib/types/Settings';
+import { api } from '../../App';
+import { vars } from '../../theme';
+import { Boundary } from '../Boundary';
+import { RenderInstance } from '../render/Instance';
+import { ModelInformationDict } from '../render/ModelType';
+
+/**
+ * Render a single setting value
+ */
+function SettingValue({
+  setting,
+  onEdit,
+  onToggle
+}: Readonly<{
+  setting: Setting;
+  onEdit: (setting: Setting) => void;
+  onToggle: (setting: Setting, value: boolean) => void;
+}>) {
+  // Determine the text to display for the setting value
+  const valueText: string = useMemo(() => {
+    let value = setting.value;
+
+    // If the setting has a choice, display the choice label
+    if (setting?.choices && setting?.choices?.length > 0) {
+      const choice = setting.choices.find((c) => c.value == setting.value);
+      value = choice?.display_name || setting.value;
+    }
+
+    if (setting?.units) {
+      value = `${value} ${setting.units}`;
+    }
+
+    return value;
+  }, [setting]);
+
+  const [modelInstance, setModelInstance] = useState<any>(null);
+
+  // Does this setting map to an internal database model?
+  const modelType: ModelType | null = useMemo(() => {
+    if (setting.model_name) {
+      const model = setting.model_name.split('.')[1];
+      return ModelType[model as keyof typeof ModelType] || null;
+    }
+    return null;
+  }, [setting]);
+
+  useEffect(() => {
+    setModelInstance(null);
+
+    if (modelType && setting.value) {
+      const endpoint = ModelInformationDict[modelType].api_endpoint;
+
+      api
+        .get(apiUrl(endpoint, setting.value))
+        .then((response) => {
+          if (response.data) {
+            setModelInstance(response.data);
+          } else {
+            setModelInstance(null);
+          }
+        })
+        .catch((error) => {
+          setModelInstance(null);
+        });
+    }
+  }, [setting, modelType]);
+
+  // If a full model instance is available, render it
+  if (modelInstance && modelType && setting.value) {
+    return (
+      <Group justify='right' gap='xs'>
+        <RenderInstance instance={modelInstance} model={modelType} />
+        <Button
+          aria-label={`edit-setting-${setting.key}`}
+          variant='subtle'
+          onClick={() => onEdit(setting)}
+        >
+          <IconEdit />
+        </Button>
+      </Group>
+    );
+  }
+
+  switch (setting?.type || 'string') {
+    case 'boolean':
+      return (
+        <Switch
+          size='sm'
+          radius='lg'
+          aria-label={`toggle-setting-${setting.key}`}
+          checked={setting.value.toLowerCase() == 'true'}
+          onChange={(event) => onToggle(setting, event.currentTarget.checked)}
+          style={{
+            paddingRight: '20px'
+          }}
+        />
+      );
+    default:
+      return valueText ? (
+        <Group gap='xs' justify='right'>
+          <Space />
+          <Button
+            aria-label={`edit-setting-${setting.key}`}
+            variant='subtle'
+            onClick={() => onEdit(setting)}
+          >
+            {valueText}
+          </Button>
+        </Group>
+      ) : (
+        <Button
+          aria-label={`edit-setting-${setting.key}`}
+          variant='subtle'
+          onClick={() => onEdit(setting)}
+        >
+          <IconEdit />
+        </Button>
+      );
+  }
+}
+
+/**
+ * Display a single setting item, and allow editing of the value
+ */
+export function SettingItem({
+  setting,
+  shaded,
+  onEdit,
+  onToggle
+}: Readonly<{
+  setting: Setting;
+  shaded: boolean;
+  onEdit: (setting: Setting) => void;
+  onToggle: (setting: Setting, value: boolean) => void;
+}>) {
+  const { colorScheme } = useMantineColorScheme();
+
+  const style: Record<string, string> = { paddingLeft: '8px' };
+  if (shaded) {
+    style['backgroundColor'] =
+      colorScheme === 'light' ? vars.colors.gray[1] : vars.colors.gray[9];
+  }
+
+  return (
+    <Paper style={style}>
+      <Group justify='space-between' p='3'>
+        <Stack gap='2' p='4px'>
+          <Text>
+            {setting.name}
+            {setting.required ? ' *' : ''}
+          </Text>
+          <Text size='xs'>{setting.description}</Text>
+        </Stack>
+        <Boundary label={`setting-value-${setting.key}`}>
+          <SettingValue setting={setting} onEdit={onEdit} onToggle={onToggle} />
+        </Boundary>
+      </Group>
+    </Paper>
+  );
+}

package/src/components/settings/SettingList.tsx

@@ -0,0 +1,217 @@
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import { Stack, Text } from '@mantine/core';
+import { notifications } from '@mantine/notifications';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
+import { useStore } from 'zustand';
+
+import type { ModelType } from '@lib/enums/ModelType';
+import { apiUrl } from '@lib/functions/Api';
+import type { Setting, SettingsStateProps } from '@lib/types/Settings';
+import { useApi } from '../../contexts/ApiContext';
+import { useEditApiFormModal } from '../../hooks/UseForm';
+import {
+  createMachineSettingsState,
+  createPluginSettingsState,
+  useGlobalSettingsState,
+  useUserSettingsState
+} from '../../states/SettingsState';
+import { SettingItem } from './SettingItem';
+
+/**
+ * Display a list of setting items, based on a list of provided keys
+ */
+export function SettingList({
+  settingsState,
+  keys,
+  onChange
+}: Readonly<{
+  settingsState: SettingsStateProps;
+  keys?: string[];
+  onChange?: () => void;
+}>) {
+  useEffect(() => {
+    settingsState.fetchSettings();
+  }, []);
+
+  const api = useApi();
+
+  const allKeys = useMemo(
+    () => settingsState?.settings?.map((s) => s.key) ?? [],
+    [settingsState?.settings]
+  );
+
+  const [setting, setSetting] = useState<Setting | undefined>(undefined);
+
+  // Determine the field type of the setting
+  const fieldType = useMemo(() => {
+    if (setting?.choices?.length) {
+      return 'choice';
+    }
+
+    if (setting?.type != undefined) {
+      return setting.type;
+    }
+
+    return 'string';
+  }, [setting]);
+
+  const key: string = useMemo(() => setting?.key ?? '', [setting]);
+
+  const editSettingModal = useEditApiFormModal({
+    url: settingsState.endpoint,
+    pk: key,
+    pathParams: settingsState.pathParams,
+    title: t`Edit Setting`,
+    fields: {
+      value: {
+        field_type: fieldType,
+        required: setting?.required ?? false,
+        label: setting?.name,
+        description: setting?.description,
+        api_url: setting?.api_url ?? '',
+        model: (setting?.model_name?.split('.')[1] as ModelType) ?? null,
+        filters: setting?.model_filters || undefined,
+        choices: setting?.choices ?? undefined
+      }
+    },
+    successMessage: t`Setting ${key} updated successfully`,
+    onFormSuccess: () => {
+      settingsState.fetchSettings();
+      onChange?.();
+    }
+  });
+
+  // Callback for editing a single setting instance
+  const onValueEdit = useCallback(
+    (setting: Setting) => {
+      setSetting(setting);
+      editSettingModal.open();
+    },
+    [editSettingModal]
+  );
+
+  // Callback for toggling a single boolean setting instance
+  const onValueToggle = useCallback(
+    (setting: Setting, value: boolean) => {
+      api
+        .patch(
+          apiUrl(settingsState.endpoint, setting.key, settingsState.pathParams),
+          {
+            value: value
+          }
+        )
+        .then(() => {
+          notifications.hide('setting');
+          notifications.show({
+            title: t`Setting updated`,
+            message: t`Setting ${setting.key} updated successfully`,
+            color: 'green',
+            id: 'setting'
+          });
+          onChange?.();
+        })
+        .catch((error) => {
+          notifications.hide('setting');
+          notifications.show({
+            title: t`Error editing setting`,
+            message: error.message,
+            color: 'red',
+            id: 'setting'
+          });
+        })
+        .finally(() => {
+          settingsState.fetchSettings();
+        });
+    },
+    [settingsState]
+  );
+
+  return (
+    <>
+      {editSettingModal.modal}
+      <Stack gap='xs'>
+        {(keys || allKeys)?.map((key, i) => {
+          const setting = settingsState?.settings?.find(
+            (s: any) => s.key === key
+          );
+
+          if (settingsState?.settings && !setting) {
+            console.error(`Setting ${key} not found`);
+          }
+
+          return (
+            <React.Fragment key={key}>
+              {setting ? (
+                <SettingItem
+                  setting={setting}
+                  shaded={i % 2 === 0}
+                  onEdit={onValueEdit}
+                  onToggle={onValueToggle}
+                />
+              ) : (
+                <Text size='sm' style={{ fontStyle: 'italic' }} c='red'>
+                  Setting {key} not found
+                </Text>
+              )}
+            </React.Fragment>
+          );
+        })}
+        {(keys || allKeys)?.length === 0 && (
+          <Text style={{ fontStyle: 'italic' }}>
+            <Trans>No settings specified</Trans>
+          </Text>
+        )}
+      </Stack>
+    </>
+  );
+}
+
+export function UserSettingList({ keys }: Readonly<{ keys: string[] }>) {
+  const userSettings = useUserSettingsState();
+
+  return <SettingList settingsState={userSettings} keys={keys} />;
+}
+
+export function GlobalSettingList({ keys }: Readonly<{ keys: string[] }>) {
+  const globalSettings = useGlobalSettingsState();
+
+  return <SettingList settingsState={globalSettings} keys={keys} />;
+}
+
+export function PluginSettingList({
+  pluginKey
+}: Readonly<{ pluginKey: string }>) {
+  const pluginSettingsStore = useRef(
+    createPluginSettingsState({ plugin: pluginKey })
+  ).current;
+  const pluginSettings = useStore(pluginSettingsStore);
+
+  return <SettingList settingsState={pluginSettings} />;
+}
+
+export function MachineSettingList({
+  machinePk,
+  configType,
+  onChange
+}: Readonly<{
+  machinePk: string;
+  configType: 'M' | 'D';
+  onChange?: () => void;
+}>) {
+  const machineSettingsStore = useRef(
+    createMachineSettingsState({
+      machine: machinePk,
+      configType: configType
+    })
+  ).current;
+  const machineSettings = useStore(machineSettingsStore);
+
+  return <SettingList settingsState={machineSettings} onChange={onChange} />;
+}