feat: GUI to create smart views (#1997)

2022-11-14 19:40:00 +05:30
parent 1c23bc1747
commit f656185c16
28 changed files with 1032 additions and 78 deletions
--- a/packages/web/src/javascripts/Components/SmartViewBuilder/PredicateValue.tsx
+++ b/packages/web/src/javascripts/Components/SmartViewBuilder/PredicateValue.tsx
@@ -0,0 +1,76 @@
+import { getDropdownItemsForAllEditors } from '@/Utils/DropdownItemsForEditors'
+import { NoteType } from '@standardnotes/snjs'
+import { useApplication } from '../ApplicationView/ApplicationProvider'
+import { PredicateKeypath, PredicateKeypathTypes } from './PredicateKeypaths'
+
+type Props = {
+  keypath: PredicateKeypath
+  value: string
+  setValue: (value: string) => void
+}
+
+const PredicateValue = ({ keypath, value, setValue }: Props) => {
+  const application = useApplication()
+  const type = PredicateKeypathTypes[keypath]
+  const editorItems = getDropdownItemsForAllEditors(application)
+
+  return type === 'noteType' ? (
+    <select
+      className="flex-grow rounded border border-border bg-default py-1.5 px-2 focus:outline focus:outline-1 focus:outline-info"
+      value={value}
+      onChange={(event) => {
+        setValue(event.target.value)
+      }}
+    >
+      {Object.entries(NoteType).map(([key, value]) => (
+        <option key={key} value={value}>
+          {key}
+        </option>
+      ))}
+    </select>
+  ) : type === 'editorIdentifier' ? (
+    <select
+      className="flex-grow rounded border border-border bg-default py-1.5 px-2 focus:outline focus:outline-1 focus:outline-info"
+      value={value}
+      onChange={(event) => {
+        setValue(event.target.value)
+      }}
+    >
+      {editorItems.map((editor) => (
+        <option key={editor.value} value={editor.value}>
+          {editor.label}
+        </option>
+      ))}
+    </select>
+  ) : type === 'string' || type === 'date' ? (
+    <input
+      className="flex-grow rounded border border-border bg-default py-1.5 px-2"
+      value={value}
+      onChange={(event) => {
+        setValue(event.target.value)
+      }}
+    />
+  ) : type === 'boolean' ? (
+    <select
+      className="flex-grow rounded border border-border bg-default py-1.5 px-2 focus:outline focus:outline-1 focus:outline-info"
+      value={value}
+      onChange={(event) => {
+        setValue(event.target.value)
+      }}
+    >
+      <option value="true">True</option>
+      <option value="false">False</option>
+    </select>
+  ) : type === 'number' ? (
+    <input
+      type="number"
+      className="flex-grow rounded border border-border bg-default py-1.5 px-2"
+      value={value}
+      onChange={(event) => {
+        setValue(event.target.value)
+      }}
+    />
+  ) : null
+}
+
+export default PredicateValue