From 88bbe62910522644015035540a7e4e3fefb137e7 Mon Sep 17 00:00:00 2001
From: Stanislav Romanov <kaermorchen@gmail.com>
Date: Mon, 12 Sep 2022 14:59:26 +0300
Subject: [PATCH] Add erros catcher to index-setting component

---
 app/components/form/element.hbs  |  8 ++++++++
 app/components/index-setting.hbs |  2 +-
 app/components/index-setting.js  | 13 +++++++++++--
 config/tailwind.config.js        |  2 +-
 4 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/app/components/form/element.hbs b/app/components/form/element.hbs
index c156a55..f2e39d5 100644
--- a/app/components/form/element.hbs
+++ b/app/components/form/element.hbs
@@ -15,6 +15,14 @@
     {{@value}}
   {{/if}}
 
+  {{#if @errors.length}}
+    {{#each @errors as |item|}}
+      <div class='mt-1 text-sm text-red'>
+        {{item}}
+      </div>
+    {{/each}}
+  {{/if}}
+
   {{#if @helper}}
     <div class='mt-1 text-sm'>
       {{@helper}}
diff --git a/app/components/index-setting.hbs b/app/components/index-setting.hbs
index 0cc2925..d99cd0c 100644
--- a/app/components/index-setting.hbs
+++ b/app/components/index-setting.hbs
@@ -1,4 +1,4 @@
-<Form::Element @label={{namelize @name}}>
+<Form::Element @label={{namelize @name}} @errors={{array this.error}}>
   <MonacoEditor
     @value={{json-stringify this.value}}
     @language='json'
diff --git a/app/components/index-setting.js b/app/components/index-setting.js
index c82f29c..76c0281 100644
--- a/app/components/index-setting.js
+++ b/app/components/index-setting.js
@@ -4,6 +4,7 @@ import { tracked } from '@glimmer/tracking';
 
 export default class FormIndexSettingComponent extends Component {
   @tracked value;
+  @tracked error;
 
   constructor() {
     super(...arguments);
@@ -13,16 +14,24 @@ export default class FormIndexSettingComponent extends Component {
 
   @action
   save(newValue) {
-    this.args.index.updateSetting(this.args.name, JSON.parse(newValue));
+    this.error = null;
+
+    try {
+      this.args.index.updateSetting(this.args.name, JSON.parse(newValue));
+    } catch (error) {
+      this.error = error.error || error;
+    }
   }
 
   @action
   async setInitialValue() {
     this.value = await this.args.index.getSetting(this.args.name);
+    this.error = null;
   }
 
   @action
   async reset() {
-    this.args.index.resetSetting(this.args.name);
+    await this.args.index.resetSetting(this.args.name);
+    this.error = null;
   }
 }
diff --git a/config/tailwind.config.js b/config/tailwind.config.js
index b217dc3..7b4dfae 100644
--- a/config/tailwind.config.js
+++ b/config/tailwind.config.js
@@ -35,7 +35,7 @@ module.exports = {
         },
         red: {
           light: colors.red['100'],
-          DEFAULT: colors.red['400'],
+          DEFAULT: colors.red['500'],
           dark: colors.red['800'],
         },
       },