feat: add disabled state for gv-cron-editor

gravitee-io · Nov 14, 2022 · 6e81ce0 · 6e81ce0
1 parent c61f4d5
commit 6e81ce0
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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) {