Render form elements

2020-04-23 15:23:51 +02:00
parent 5ac5a6c1db
commit 48f79ad03f
16 changed files with 844 additions and 90 deletions
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <oc-checkbox v-model="value" :label="setting.boolValue.label" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SettingBoolean',
+  props: {
+    setting: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      initialValue: null,
+      value: null
+    }
+  },
+  computed: {
+    isChanged() {
+      return this.initialValue !== this.value
+    }
+  },
+  methods: {
+    applyValue() {
+      // TODO: propagate value to parent
+      // TODO: show a spinner while the request for saving the value is running!
+    }
+  },
+  mounted() {
+    // TODO: load the settings value of the authenticated user and apply it to the value
+    if (this.value === null) {
+      this.value = this.setting.boolValue.default
+    }
+  }
+}
+</script>
@@ -0,0 +1,70 @@
+<template>
+  <oc-grid flex>
+    <div class="uk-width-expand">
+      <oc-text-input
+        type="number"
+        v-model="value"
+        v-bind="inputAttributes"
+        :placeholder="setting.intValue.placeholder"
+        :label="setting.description"
+        @keydown.enter="applyValue"
+      />
+    </div>
+    <div v-if="isChanged">
+      <oc-button @click="cancel" class="uk-margin-xsmall-left">
+        <translate>Cancel</translate>
+      </oc-button>
+      <oc-button @click="applyValue" class="uk-margin-xsmall-left" variation="primary">
+        <translate>Save</translate>
+      </oc-button>
+    </div>
+  </oc-grid>
+</template>
+
+<script>
+export default {
+  name: 'SettingNumber',
+  props: {
+    setting: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      initialValue: null,
+      value: null
+    }
+  },
+  computed: {
+    isChanged() {
+      return this.initialValue !== this.value
+    },
+    inputAttributes() {
+      const attributes = {}
+      if (this.setting.intValue.min !== null && this.setting.intValue.min !== undefined) {
+        attributes.min = this.setting.intValue.min
+      }
+      if (this.setting.intValue.max !== null && this.setting.intValue.max !== undefined) {
+        attributes.max = this.setting.intValue.max
+      }
+      if (this.setting.intValue.step !== null && this.setting.intValue.step !== undefined) {
+        attributes.step = this.setting.intValue.step
+      }
+      return attributes
+    }
+  },
+  methods: {
+    cancel() {
+      this.value = this.initialValue
+    },
+    applyValue() {
+      // TODO: propagate value to parent
+      // TODO: show a spinner while the request for saving the value is running!
+    }
+  },
+  mounted() {
+    // TODO: load the settings value of the authenticated user and apply it to the value
+  }
+}
+</script>
@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <oc-button :id="buttonElementId" class="uk-width-expand">
+      <span v-if="selectedOption">
+        {{ selectedOption.displayValue }}
+      </span>
+      <span v-else>
+        {{ setting.placeholder || $gettext('Please select') }}
+      </span>
+    </oc-button>
+    <oc-drop
+      close-on-click
+      :drop-id="dropElementId"
+      :toggle="`#${buttonElementId}`"
+      mode="click"
+      :options="{ offset: 0, delayHide: 0, flip: false }"
+      >
+      <ul class="uk-list">
+        <li v-for="(option, index) in setting.singleChoiceValue.options" :key="`${setting.key}-${index}`">
+          <oc-radio :label="option.displayValue" :value="selectedOption" @input="setSelectedOption(option)" />
+        </li>
+      </ul>
+    </oc-drop>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SettingSingleChoice',
+  props: {
+    setting: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      selectedOption: null
+    }
+  },
+  computed: {
+    dropElementId() {
+      return `single-choice-drop-${this.setting.key}`
+    },
+    buttonElementId() {
+      return `single-choice-toggle-${this.setting.key}`
+    },
+  },
+  methods: {
+    setSelectedOption(option) {
+      this.selectedOption = option
+      // TODO: propagate selection to parent
+      // TODO: show a spinner while the request for saving the value is running!
+    }
+  },
+  mounted() {
+    // TODO: load the settings value of the authenticated user and set it in `selected`
+  }
+}
+</script>
@@ -0,0 +1,55 @@
+<template>
+  <oc-grid flex>
+    <div class="uk-width-expand">
+      <oc-text-input
+        v-model="value"
+        :placeholder="setting.stringValue.placeholder"
+        :label="setting.description"
+        @keydown.enter="applyValue"
+      />
+    </div>
+    <div v-if="isChanged">
+      <oc-button @click="cancel" class="uk-margin-xsmall-left">
+        <translate>Cancel</translate>
+      </oc-button>
+      <oc-button @click="applyValue" class="uk-margin-xsmall-left" variation="primary">
+        <translate>Save</translate>
+      </oc-button>
+    </div>
+  </oc-grid>
+</template>
+
+<script>
+export default {
+  name: 'SettingString',
+  props: {
+    setting: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      initialValue: null,
+      value: null
+    }
+  },
+  computed: {
+    isChanged() {
+      return this.initialValue !== this.value
+    }
+  },
+  methods: {
+    applyValue() {
+      // TODO: propagate value to parent
+      // TODO: show a spinner while the request for saving the value is running!
+    },
+    cancel() {
+      this.value = this.initialValue
+    }
+  },
+  mounted() {
+    // TODO: load the settings value of the authenticated user and apply it to the value
+  }
+}
+</script>
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <translate :translate-params="{ type: setting.type }">Settings type not implemented: %{type}</translate>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SettingUnknown',
+  props: {
+    setting: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>