From 6e81ce0363850f24359e59c86a6b9ee2b1e10f18 Mon Sep 17 00:00:00 2001
From: ThibaudAv <thibaud.avenier@gmail.com>
Date: Thu, 10 Nov 2022 17:08:20 +0100
Subject: [PATCH] feat: add disabled state for gv-cron-editor

---
 .../gv-cron-editor/gv-cron-editor.js          | 23 +++++++++++++++++++
 .../gv-cron-editor/gv-cron-editor.stories.js  |  4 ++++
 src/organisms/gv-tabs/gv-tabs.js              |  6 ++++-
 3 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/molecules/gv-cron-editor/gv-cron-editor.js b/src/molecules/gv-cron-editor/gv-cron-editor.js
index 4bee1966..f030889e 100644
--- a/src/molecules/gv-cron-editor/gv-cron-editor.js
+++ b/src/molecules/gv-cron-editor/gv-cron-editor.js
@@ -388,6 +388,26 @@ export class GvCronEditor extends withResizeObserver(InputElement(LitElement)) {
   }
 
   render() {
+    if (this.disabled) {
+      return html`<div>
+        ${this.renderLabel()}
+        <div class="box">
+          <gv-tabs ?small="${this._small}" ?truncate="${this._truncateTabs}">
+            <div slot="title" class="generated-expression readonly">
+              <gv-input
+                name="pro.value"
+                .autofocus="${this.autofocus}"
+                .value="${this.value}"
+                disabled="true"
+                id="cron-input"
+                placeholder="* */30 * * * * (Every 30 min)"
+              ></gv-input>
+            </div>
+          </gv-tabs>
+        </div>
+      </div>`;
+    }
+
     return html`<div>
       ${this.renderLabel()}
       <div class="box">
@@ -576,6 +596,9 @@ export class GvCronEditor extends withResizeObserver(InputElement(LitElement)) {
           align-items: center;
           flex: 1;
         }
+        .generated-expression.disabled {
+          opacity: 0.4;
+        }
 
         .generated-expression > span,
         .generated-expression > code {
diff --git a/src/molecules/gv-cron-editor/gv-cron-editor.stories.js b/src/molecules/gv-cron-editor/gv-cron-editor.stories.js
index a30976db..9fd0382f 100644
--- a/src/molecules/gv-cron-editor/gv-cron-editor.stories.js
+++ b/src/molecules/gv-cron-editor/gv-cron-editor.stories.js
@@ -39,6 +39,10 @@ export const WithValue = makeStory(conf, {
   items: [{ value: '30 10 */5 * * MON-FRI' }],
 });
 
+export const Disabled = makeStory(conf, {
+  items: [{ value: '30 10 */5 * * MON-FRI', disabled: true }],
+});
+
 export const WithAutomaticModeSelection = makeStory(conf, {
   items: [{ value: '*/25 * * * * *' }, { value: '2 */25 * * * *' }, { value: '1 3 */25 * * *' }, { value: '* * */25 * * *' }],
 });
diff --git a/src/organisms/gv-tabs/gv-tabs.js b/src/organisms/gv-tabs/gv-tabs.js
index c0c98bbe..557080cb 100644
--- a/src/organisms/gv-tabs/gv-tabs.js
+++ b/src/organisms/gv-tabs/gv-tabs.js
@@ -153,7 +153,7 @@ export class GvTabs extends LitElement {
         target.classList.add('current');
       }
     } else {
-      content[0].classList.add('current');
+      content.length && content[0].classList.add('current');
     }
   }
 
@@ -182,6 +182,10 @@ export class GvTabs extends LitElement {
   }
 
   get _contextualOptions() {
+    if (!this.options) {
+      return [];
+    }
+
     if (this.truncate) {
       return this.options.map((option) => {
         if (this.value !== option.id) {