feat: add smart view with custom json (#2000)

packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModalController.ts

@@ -1,6 +1,6 @@
 import { WebApplication } from '@/Application/Application'
 import { CompoundPredicateBuilderController } from '@/Components/SmartViewBuilder/CompoundPredicateBuilderController'
-import { predicateFromJson } from '@standardnotes/snjs'
+import { predicateFromJson, PredicateJsonForm } from '@standardnotes/snjs'
 import { action, makeObservable, observable } from 'mobx'
 
 export class AddSmartViewModalController {
@@ -13,6 +13,9 @@ export class AddSmartViewModalController {
 
   predicateController = new CompoundPredicateBuilderController()
 
+  customPredicateJson: string | undefined = undefined
+  isCustomJsonValidPredicate: boolean | undefined = undefined
+
   constructor(private application: WebApplication) {
     makeObservable(this, {
       isAddingSmartView: observable,
@@ -26,6 +29,11 @@ export class AddSmartViewModalController {
 
       icon: observable,
       setIcon: action,
+
+      customPredicateJson: observable,
+      isCustomJsonValidPredicate: observable,
+      setCustomPredicateJson: action,
+      setIsCustomJsonValidPredicate: action,
     })
   }
 
@@ -45,12 +53,22 @@ export class AddSmartViewModalController {
     this.icon = icon
   }
 
+  setCustomPredicateJson = (customPredicateJson: string) => {
+    this.customPredicateJson = customPredicateJson
+  }
+
+  setIsCustomJsonValidPredicate = (isCustomJsonValidPredicate: boolean | undefined) => {
+    this.isCustomJsonValidPredicate = isCustomJsonValidPredicate
+  }
+
   closeModal = () => {
     this.setIsAddingSmartView(false)
     this.setTitle('')
     this.setIcon('')
     this.setIsSaving(false)
     this.predicateController.resetState()
+    this.setCustomPredicateJson('')
+    this.setIsCustomJsonValidPredicate(undefined)
   }
 
   saveCurrentSmartView = async () => {
@@ -61,10 +79,36 @@ export class AddSmartViewModalController {
       return
     }
 
-    const predicate = predicateFromJson(this.predicateController.toJson())
+    const predicateJson =
+      this.customPredicateJson && this.isCustomJsonValidPredicate
+        ? JSON.parse(this.customPredicateJson)
+        : this.predicateController.toJson()
+    const predicate = predicateFromJson(predicateJson as PredicateJsonForm)
     await this.application.items.createSmartView(this.title, predicate, this.icon)
 
     this.setIsSaving(false)
     this.closeModal()
   }
+
+  validateAndPrettifyCustomPredicate = () => {
+    if (!this.customPredicateJson) {
+      this.setIsCustomJsonValidPredicate(false)
+      return
+    }
+
+    try {
+      const parsedPredicate: PredicateJsonForm = JSON.parse(this.customPredicateJson)
+      const predicate = predicateFromJson(parsedPredicate)
+
+      if (predicate) {
+        this.setCustomPredicateJson(JSON.stringify(parsedPredicate, null, 2))
+        this.setIsCustomJsonValidPredicate(true)
+      } else {
+        this.setIsCustomJsonValidPredicate(false)
+      }
+    } catch (error) {
+      this.setIsCustomJsonValidPredicate(false)
+      return
+    }
+  }
 }