settings modal

packages/web/src/settings/SettingsModal.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import FormButton from '../forms/FormButton.svelte';
+  import FormCheckboxField from '../forms/FormCheckboxField.svelte';
+
+  import FormProvider from '../forms/FormProvider.svelte';
+  import FormSubmit from '../forms/FormSubmit.svelte';
+  import FormTextField from '../forms/FormTextField.svelte';
+
+  import ModalBase from '../modals/ModalBase.svelte';
+  import { closeCurrentModal } from '../modals/modalTools';
+  import axiosInstance from '../utility/axiosInstance';
+  import { useSettings } from '../utility/metadataLoaders';
+
+  const settings = useSettings();
+
+  function handleOk(e) {
+    axiosInstance.post('config/update-settings', e.detail);
+    closeCurrentModal();
+  }
+</script>
+
+{#if $settings}
+  <FormProvider initialValues={$settings}>
+    <ModalBase {...$$restProps}>
+      <div slot="header">Settings</div>
+
+      <div class="heading">Data grid</div>
+      <FormCheckboxField name="dataGrid.hideLeftColumn" label="Hide left column by default" />
+      <FormTextField name="dataGrid.pageSize" label="Page size" defaultValue="100" />
+
+      <div slot="footer">
+        <FormSubmit value="OK" on:click={handleOk} />
+        <FormButton value="Cancel" on:click={closeCurrentModal} />
+      </div>
+    </ModalBase>
+  </FormProvider>
+{/if}
+
+<style>
+  .heading {
+    font-size: 20px;
+    margin: 5px;
+  }
+</style>

packages/web/src/settings/settingsTools.ts

@@ -0,0 +1,14 @@
+import _ from 'lodash';
+
+export function getIntSettingsValue(settings, name, defaultValue, min = null, max = null) {
+  const parsed = parseInt(settings[name]);
+  if (_.isNaN(parsed)) {
+    return defaultValue;
+  }
+  if (_.isNumber(parsed)) {
+    if (min != null && parsed < min) return min;
+    if (max != null && parsed > max) return max;
+    return parsed;
+  }
+  return defaultValue;
+}