Add type: enum

app/Schema/EnumField.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Schema;
+
+class EnumField extends SchemaField
+{
+    public const TYPE = 'enum';
+
+    /**
+     * Set allowed values.
+     *
+     * @param array $values
+     */
+    public function setValues($values): void
+    {
+        $this->data['values'] = $values;
+    }
+
+    public function formatValue($id)
+    {
+        foreach ($this->data['values'] as $value) {
+            if ($value['id'] == $id) {
+                return $value['label'];
+            }
+        }
+
+        return '(ukjent verdi)';
+    }
+}

app/Schema/SchemaField.php

@@ -21,16 +21,17 @@ abstract class SchemaField implements JsonSerializable
 
     public $data = [];
 
-    public static $types = [
+    public static $types = array(
         'autocomplete' => AutocompleteField::class,
         'boolean' => BooleanField::class,
         'incrementing' => IncrementingField::class,
         'persons' => PersonsField::class,
         'select' => SelectField::class,
+        'enum' => EnumField::class,
         'simple' => SimpleField::class,
         'tags' => TagsField::class,
         'url' => UrlField::class,
-    ];
+    );
 
     public function __construct()
     {

resources/js/components/input/EnumInput.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <selectize
+      :name="name"
+      :settings="settings"
+      :value="value"
+      @input="onInput($event)"
+    >
+      <option v-for="val in values" :key="val.id" :value="val.id">{{ val.label }}</option>
+    </selectize>
+  </div>
+</template>
+
+<script>
+import { cloneDeep } from 'lodash/lang'
+import { get } from 'lodash/object'
+import Selectize from 'vue2-selectize'
+
+export default {
+  name: 'enum-input',
+  components: {
+    Selectize,
+  },
+  props: {
+    name: {
+      type: String,
+    },
+    schema: {
+      type: Object,
+    },
+    value: {
+      type: String,
+    },
+  },
+  data () {
+    return {
+      values: cloneDeep(this.schema.values),
+      settings: {
+        // Ref: https://github.com/selectize/selectize.js/blob/master/docs/usage.md
+        create: false,
+        valueField: 'id',
+        labelField: 'label',
+        searchField: 'label',
+        openOnFocus: true,
+        closeAfterSelect: true,
+      },
+    }
+  },
+  methods: {
+    onInput ($event) {
+      this.$emit('value', $event)
+    },
+  },
+}
+</script>

resources/js/components/input/index.js

@@ -5,3 +5,4 @@ export { default as PersonsInput } from './PersonsInput.vue'
 export { default as BooleanInput } from './BooleanInput.vue'
 export { default as TagsInput } from './TagsInput.vue'
 export { default as SelectInput } from './SelectInput.vue'
+export { default as EnumInput } from './EnumInput.vue'