Merge pull request #2028 from semaphoreui/enum_survey_vars

enum survey vars

db/Template.go

@@ -21,16 +21,23 @@ const (
 type SurveyVarType string
 
 const (
-	SurveyVarStr TemplateType = ""
-	SurveyVarInt TemplateType = "int"
+	SurveyVarStr  TemplateType = ""
+	SurveyVarInt  TemplateType = "int"
+	SurveyVarEnum TemplateType = "enum"
 )
 
+type SurveyVarEnumValue struct {
+	Name  string `json:"name"`
+	Value string `json:"value"`
+}
+
 type SurveyVar struct {
-	Name        string        `json:"name"`
-	Title       string        `json:"title"`
-	Required    bool          `json:"required"`
-	Type        SurveyVarType `json:"type"`
-	Description string        `json:"description"`
+	Name        string               `json:"name"`
+	Title       string               `json:"title"`
+	Required    bool                 `json:"required"`
+	Type        SurveyVarType        `json:"type"`
+	Description string               `json:"description"`
+	Values      []SurveyVarEnumValue `json:"values"`
 }
 
 type TemplateFilter struct {

web/src/components/SurveyVars.vue

@@ -13,6 +13,12 @@
             lazy-validation
             v-if="editedVar != null"
           >
+            <v-alert
+              :value="formError"
+              color="error"
+            >{{ formError }}
+            </v-alert>
+
             <v-text-field
               :label="$t('name2')"
               v-model.trim="editedVar.name"
@@ -39,6 +45,57 @@
               item-value="id"
               item-text="name"
             ></v-select>
+
+            <v-data-table
+              v-if="editedVar.type === 'enum'"
+              :items="editedValues"
+              :items-per-page="-1"
+              class="elevation-1"
+              hide-default-footer
+              no-data-text="No values"
+            >
+              <template v-slot:item="props">
+                <tr>
+                  <td class="pa-1">
+                    <v-text-field
+                      solo-inverted
+                      flat
+                      hide-details
+                      v-model="props.item.name"
+                      class="v-text-field--solo--no-min-height"
+                    ></v-text-field>
+                  </td>
+                  <td class="pa-1">
+                    <v-text-field
+                      solo-inverted
+                      flat
+                      hide-details
+                      v-model="props.item.value"
+                      class="v-text-field--solo--no-min-height"
+                    ></v-text-field>
+                  </td>
+                  <td style="width: 38px;">
+                    <v-icon
+                      small
+                      class="pa-1"
+                      @click="removeEditedVarValue(props.item)"
+                    >
+                      mdi-delete
+                    </v-icon>
+                  </td>
+                </tr>
+              </template>
+            </v-data-table>
+
+            <div class="text-right mt-2">
+
+              <v-btn
+                color="primary"
+                v-if="editedVar.type === 'enum'"
+                @click="addEditedVarValue()"
+              >Add Value</v-btn>
+            </div>
+
             <v-checkbox
               :label="$t('required')"
               v-model="editedVar.required"
@@ -114,6 +171,7 @@ export default {
     return {
       editDialog: null,
       editedVar: null,
+      editedValues: [],
       editedVarIndex: null,
       modifiedVars: null,
       varTypes: [{
@@ -122,29 +180,83 @@ export default {
       }, {
         id: 'int',
         name: 'Integer',
+      }, {
+        id: 'enum',
+        name: 'Enum',
       }],
+      formError: null,
     };
   },
   methods: {
+    addEditedVarValue() {
+      this.editedValues.push({
+        name: '',
+        value: '',
+      });
+    },
+
+    removeEditedVarValue(val) {
+      const i = this.editedValues.findIndex((v) => v.name === val.name);
+      if (i > -1) {
+        this.editedValues.splice(i, 1);
+      }
+    },
+
     editVar(index) {
       this.editedVar = index != null ? { ...this.modifiedVars[index] } : {};
+
+      this.editedValues = [];
+      this.editedValues.push(...(this.editedVar.values || []));
+      this.editedVar.values = this.editedValues;
+
       this.editedVarIndex = index;
+
       if (this.$refs.form) {
         this.$refs.form.resetValidation();
       }
+
       this.editDialog = true;
     },
 
     saveVar() {
+      this.formError = null;
+
       if (!this.$refs.form.validate()) {
         return;
       }
 
+      if (this.editedVar.type === 'enum') {
+        if (this.editedValues.length === 0) {
+          this.formError = 'Enumeration must have values.';
+          return;
+        }
+
+        const uniq = new Set(this.editedValues.map((v) => v.name));
+
+        if (this.editedValues.length !== uniq.size) {
+          this.formError = 'Enumeration values must have unique names.';
+          return;
+        }
+
+        this.editedValues.forEach((v) => {
+          if (v.name === '') {
+            this.formError = 'Value name cannot be empty.';
+          }
+        });
+
+        if (this.formError != null) {
+          return;
+        }
+      } else {
+        this.editedVar.values = [];
+      }
+
       if (this.editedVarIndex != null) {
         this.modifiedVars[this.editedVarIndex] = this.editedVar;
       } else {
         this.modifiedVars.push(this.editedVar);
       }
+
       this.editDialog = false;
       this.editedVar = null;
       this.$emit('change', this.modifiedVars);

web/src/components/TaskForm.vue

@@ -45,19 +45,34 @@
       :disabled="formSaving"
     />
 
-    <v-text-field
-      v-for="(v) in template.survey_vars || []"
-      :key="v.name"
-      :label="v.title"
-      :hint="v.description"
-      v-model="editedEnvironment[v.name]"
-      :required="v.required"
-      :rules="[
-          val => !v.required || !!val || v.title + $t('isRequired'),
+    <div v-for="(v) in template.survey_vars || []" :key="v.name">
+      <v-select
+        clearable
+        v-if="v.type === 'enum'"
+        :label="v.title + (v.required ? ' *' : '')"
+        :hint="v.description"
+        v-model="editedEnvironment[v.name]"
+        :required="v.required"
+        :rules="[
+          val => !v.required || val != null || v.title + ' ' + $t('isRequired')
+        ]"
+        :items="v.values"
+        item-text="name"
+        item-value="value"
+      />
+      <v-text-field
+        v-else
+        :label="v.title + (v.required ? ' *' : '')"
+        :hint="v.description"
+        v-model="editedEnvironment[v.name]"
+        :required="v.required"
+        :rules="[
+          val => !v.required || !!val || v.title + ' ' + $t('isRequired'),
           val => !val || v.type !== 'int' || /^\d+$/.test(val) ||
           v.title + ' ' + $t('mustBeInteger'),
         ]"
-    />
+      />
+    </div>
 
     <v-row no-gutters class="mt-6">
       <v-col cols="12" sm="6">