Преглед изворни кода

[editor] Support variable alternatives in the VariableSubstitution component

Johan Ahlen пре 4 година
родитељ
комит
444593515f

+ 35 - 2
desktop/core/src/desktop/js/apps/editor/components/variableSubstitution/VariableSubstitution.scss

@@ -2,15 +2,48 @@
 @import '../../../../components/styles/mixins.scss';
 
 .variable-substitution {
-  margin: 10px 5px 0 5px;
+  padding: 5px;
 
   >:not(:first-child) {
     margin-left: 10px;
   }
 
+  > div {
+    display: inline-block;
+    height: 28px;
+    vertical-align: top;
+    line-height: 20px;
+  }
+
   .variable-value {
     display: inline-block;
-    font-size: 0; // Removes space between label and input
+    height: 28px;
+
+    .combo-box {
+      display: inline-block;
+      border: 0;
+      padding: 0;
+      width: 160px;
+      height: 28px;
+
+      .typeahead-input {
+        height: 100%;
+      }
+
+      input {
+        font-size: 14px;
+        border: 1px solid $fluid-gray-300;
+        margin: 0;
+        padding: 3px 6px;
+        border-radius: 0 2px 2px 0;
+
+        &:active,
+        &:focus {
+          outline: none;
+          border-color: $hue-primary-color-dark;
+        }
+      }
+    }
 
     .variable-label,
     .variable-input {

+ 12 - 14
desktop/core/src/desktop/js/apps/editor/components/variableSubstitution/VariableSubstitution.vue

@@ -18,16 +18,19 @@
 
 <template>
   <div class="variable-substitution">
-    <span v-for="variable of activeVariables" :key="variable.name">
+    <div v-for="variable of activeVariables" :key="variable.name">
       <div class="variable-value">
         <div class="variable-label">{{ variable.name }}</div>
         <input
+          v-if="variable.meta.options.length === 0"
           v-model="variable.value"
           class="variable-input"
+          autocomplete="no"
           :placeholder="variable.meta.placeholder"
         />
+        <ComboBox v-else v-model="variable.value" :options="variable.meta.options" />
       </div>
-    </span>
+    </div>
   </div>
 </template>
 
@@ -37,8 +40,9 @@
   import { cloneDeep } from 'lodash';
 
   import { Variable, VariableIndex, VariableOption } from './types';
-  import { IdentifierLocation } from 'parse/types';
   import DataCatalogEntry, { FieldSourceMeta } from 'catalog/DataCatalogEntry';
+  import ComboBox from 'components/ComboBox.vue';
+  import { IdentifierLocation } from 'parse/types';
   import { noop } from 'utils/hueUtils';
 
   const NAMED_OPTION_REGEX = /^(.+)\(([^)]+)\)$/;
@@ -54,13 +58,13 @@
     if (namedMatch) {
       return {
         value: namedMatch[1].trim(),
-        text: namedMatch[2].trim()
+        label: namedMatch[2].trim()
       };
     }
     const trimmed = val.trim();
     return {
       value: trimmed,
-      text: trimmed
+      label: trimmed
     };
   };
 
@@ -117,6 +121,7 @@
 
   export default defineComponent({
     name: 'VariableSubstitution',
+    components: { ComboBox },
     props: {
       initialVariables: {
         type: Object as PropType<{ [name: string]: Variable }>,
@@ -129,17 +134,12 @@
         default: undefined
       }
     },
-
     emits: ['variables-changed'],
-
-    data(): {
-      knownVariables: { [name: string]: KnownVariable };
-    } {
+    data() {
       return {
-        knownVariables: {}
+        knownVariables: {} as { [name: string]: KnownVariable }
       };
     },
-
     computed: {
       activeVariables(): Variable[] {
         const active = Object.values(this.knownVariables).filter(variable => variable.active);
@@ -147,7 +147,6 @@
         return active;
       }
     },
-
     watch: {
       activeVariables(): void {
         this.$emit(
@@ -244,7 +243,6 @@
         });
       }
     },
-
     mounted(): void {
       if (this.initialVariables) {
         Object.values(this.initialVariables).forEach((variable, index) => {

+ 1 - 1
desktop/core/src/desktop/js/apps/editor/components/variableSubstitution/types.ts

@@ -17,7 +17,7 @@
 import DataCatalogEntry from 'catalog/DataCatalogEntry';
 
 export interface VariableOption {
-  text: string;
+  label: string;
   value: string;
 }
 

Разлика између датотеке није приказан због своје велике величине
+ 0 - 0
desktop/libs/notebook/src/notebook/static/notebook/css/editor2.css


+ 21 - 0
desktop/libs/notebook/src/notebook/static/notebook/less/editor2.less

@@ -79,6 +79,27 @@
         .flexRowLayoutRow(1 0 5px);
       }
 
+      .editor-code-editor {
+        .flexRowLayoutRow(0 1 100%);
+
+        .ace_gutter {
+          background-color: transparent !important;
+          border-right: 1px solid @cui-gray-100;
+
+          > .ace_layer {
+            border-left: none;
+          }
+        }
+      }
+
+      .editor-variable-substitution {
+        .flexRowLayoutRow(1);
+      }
+
+      .editor-execute-status {
+        .flexRowLayoutRow(1 0 5px);
+      }
+
       .editor-execute-actions {
         .flexRowLayoutRow(0 0 36px);
       }

+ 16 - 14
desktop/libs/notebook/src/notebook/templates/editor2.mako

@@ -899,24 +899,26 @@
         <div class="editor-code-editor">
           <!-- ko template: { name: 'editor-code-editor' } --><!-- /ko -->
         </div>
-  ##      <!-- ko template: { name: 'snippet-variables' }--><!-- /ko -->
-          <variable-substitution-ko-bridge data-bind="
-            vueEvents: {
-              'variables-changed': function (event) {
-                setVariables(event.detail);
-              }
-            },
-            vueKoProps: {
-              'initial-variables': executor.variables
-            }
-          "></variable-substitution-ko-bridge>
-  ##      <!-- ko template: { name: 'editor-executable-snippet-body' } --><!-- /ko -->
         <div class="editor-execute-status">
-          <executable-progress-bar-ko-bridge data-bind="vueKoProps: {
+              <executable-progress-bar-ko-bridge data-bind="vueKoProps: {
             'executable-observable': activeExecutable
           }"></executable-progress-bar-ko-bridge>
-  ##      <!-- ko template: { name: 'editor-snippet-execution-status' } --><!-- /ko -->
+              ##      <!-- ko template: { name: 'editor-snippet-execution-status' } --><!-- /ko -->
+        </div>
+  ##      <!-- ko template: { name: 'snippet-variables' }--><!-- /ko -->
+        <div class="editor-variable-substitution">
+          <variable-substitution-ko-bridge data-bind="
+              vueEvents: {
+                'variables-changed': function (event) {
+                  setVariables(event.detail);
+                }
+              },
+              vueKoProps: {
+                'initial-variables': executor.variables
+              }
+            "></variable-substitution-ko-bridge>
         </div>
+  ##      <!-- ko template: { name: 'editor-executable-snippet-body' } --><!-- /ko -->
         <div class="editor-execute-actions">
           <!-- ko template: { name: 'editor-execution-controls' } --><!-- /ko -->
         </div>

Неке датотеке нису приказане због велике количине промена