From f7e47e620c411e9d533d01308b9a1d2dcf988407 Mon Sep 17 00:00:00 2001
From: Axolotle <nchesnais@mailoo.org>
Date: Tue, 6 Oct 2020 23:48:48 +0200
Subject: [PATCH] add basic components to be used from props

---
 .../globals/formItems/CheckboxItem.vue        | 28 +++++++++
 .../globals/formItems/FormItemHelper.vue      | 59 +++++++++++++++++++
 .../globals/formItems/InputItem.vue           | 34 +++++++++++
 .../globals/formItems/SelectItem.vue          | 29 +++++++++
 app/src/components/globals/formItems/index.js |  5 ++
 app/src/components/globals/index.js           |  1 +
 6 files changed, 156 insertions(+)
 create mode 100644 app/src/components/globals/formItems/CheckboxItem.vue
 create mode 100644 app/src/components/globals/formItems/FormItemHelper.vue
 create mode 100644 app/src/components/globals/formItems/InputItem.vue
 create mode 100644 app/src/components/globals/formItems/SelectItem.vue
 create mode 100644 app/src/components/globals/formItems/index.js

diff --git a/app/src/components/globals/formItems/CheckboxItem.vue b/app/src/components/globals/formItems/CheckboxItem.vue
new file mode 100644
index 00000000..3f70e6cd
--- /dev/null
+++ b/app/src/components/globals/formItems/CheckboxItem.vue
@@ -0,0 +1,28 @@
+<template>
+  <b-checkbox
+    v-model="checked"
+    @input="$emit('input', checked)"
+    :id="id"
+    :aria-describedby="id + '-feedback'"
+    switch
+  >
+    {{ $t(checked ? 'yes' : 'no') }}
+  </b-checkbox>
+</template>
+
+<script>
+export default {
+  name: 'CheckboxItem',
+
+  props: {
+    value: { type: Boolean, required: true },
+    id: { type: String, required: true }
+  },
+
+  data () {
+    return {
+      checked: this.value
+    }
+  }
+}
+</script>
diff --git a/app/src/components/globals/formItems/FormItemHelper.vue b/app/src/components/globals/formItems/FormItemHelper.vue
new file mode 100644
index 00000000..bd57446a
--- /dev/null
+++ b/app/src/components/globals/formItems/FormItemHelper.vue
@@ -0,0 +1,59 @@
+<template>
+  <b-form-group
+    label-cols="0" label-class="font-weight-bold" class="mb-4"
+    :label="label" :label-for="'form-item-' + props.id"
+  >
+    <slot name="default">
+      <component
+        :is="component" v-bind="props"
+        v-model="props.value" @input="test"
+      />
+    </slot>
+
+    <template v-if="description || example || link" v-slot:description>
+      <div class="d-flex">
+        <span v-if="example">{{ $t('form_input_example', { example }) }}</span>
+
+        <b-link v-if="link" :to="link" class="ml-auto">
+          {{ link.text }}
+        </b-link>
+      </div>
+
+      <template v-if="description">
+        {{ description }}
+      </template>
+    </template>
+
+    <b-form-invalid-feedback v-if="'isValid' in props" :id="props.id + '-feedback'" :state="props.value.isValid">
+      {{ props.error }}
+    </b-form-invalid-feedback>
+  </b-form-group>
+</template>
+
+<script>
+export default {
+  name: 'FormItemHelper',
+
+  props: {
+    component: { type: String, default: 'InputItem' },
+    props: { type: Object, required: true },
+    label: { type: String, required: true },
+    description: { type: String, default: null },
+    example: { type: String, default: null },
+    link: { type: Object, default: null }
+  },
+
+  data () {
+    return {
+      content: this.value
+    }
+  },
+
+  methods: {
+    test () {
+      console.log(this.props.value)
+      // this.props.isValid = false
+    }
+  }
+}
+</script>
diff --git a/app/src/components/globals/formItems/InputItem.vue b/app/src/components/globals/formItems/InputItem.vue
new file mode 100644
index 00000000..2008470c
--- /dev/null
+++ b/app/src/components/globals/formItems/InputItem.vue
@@ -0,0 +1,34 @@
+<template>
+  <b-input
+    v-model="input"
+    @input="$emit('input', input)"
+    :id="id"
+    :placeholder="placeholder"
+    :aria-describedby="id + '-feedback'"
+    :type="type"
+    :state="isValid"
+    :required="required"
+  />
+</template>
+
+<script>
+export default {
+  name: 'InputItem',
+
+  props: {
+    value: { type: [String, Number, null], default: null },
+    id: { type: String, required: true },
+    placeholder: { type: String, default: null },
+    isValid: { type: [Boolean, null], default: null },
+    error: { type: String, default: '' },
+    type: { type: String, default: 'text' },
+    required: { type: Boolean, default: true }
+  },
+
+  data () {
+    return {
+      input: this.value
+    }
+  }
+}
+</script>
diff --git a/app/src/components/globals/formItems/SelectItem.vue b/app/src/components/globals/formItems/SelectItem.vue
new file mode 100644
index 00000000..b0373d4e
--- /dev/null
+++ b/app/src/components/globals/formItems/SelectItem.vue
@@ -0,0 +1,29 @@
+<template>
+  <b-select
+    v-model="selected"
+    :options="choices"
+    @input="$emit('input', selected)"
+    :required="required"
+    :id="id"
+    :aria-describedby="id + '-feedback'"
+  />
+</template>
+
+<script>
+export default {
+  name: 'SelectItem',
+
+  props: {
+    value: { type: [String, null], default: null },
+    choices: { type: [Array, Object], required: true },
+    required: { type: Boolean, default: true },
+    id: { type: String, required: true }
+  },
+
+  data () {
+    return {
+      selected: this.value
+    }
+  }
+}
+</script>
diff --git a/app/src/components/globals/formItems/index.js b/app/src/components/globals/formItems/index.js
new file mode 100644
index 00000000..8857af8f
--- /dev/null
+++ b/app/src/components/globals/formItems/index.js
@@ -0,0 +1,5 @@
+export { default as FormItemHelper } from './FormItemHelper'
+
+export { default as InputItem } from './InputItem'
+export { default as SelectItem } from './SelectItem'
+export { default as CheckboxItem } from './CheckboxItem'
diff --git a/app/src/components/globals/index.js b/app/src/components/globals/index.js
index 58b2ce17..eefbb66d 100644
--- a/app/src/components/globals/index.js
+++ b/app/src/components/globals/index.js
@@ -1,2 +1,3 @@
 export { default as Icon } from './Icon'
 export { default as Breadcrumb } from './Breadcrumb'
+export { FormItemHelper, InputItem, SelectItem, CheckboxItem } from './formItems'