From 9d02438348046c34f9e4b53206d182b95b8421e6 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 2 Mar 2022 19:42:01 +0100
Subject: [PATCH] add ReadOnlyField to display config readonly values

---
 app/src/components/globals/ReadOnlyField.vue | 65 ++++++++++++++++++++
 app/src/i18n/locales/en.json                 |  4 +-
 2 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 app/src/components/globals/ReadOnlyField.vue

diff --git a/app/src/components/globals/ReadOnlyField.vue b/app/src/components/globals/ReadOnlyField.vue
new file mode 100644
index 00000000..107165b5
--- /dev/null
+++ b/app/src/components/globals/ReadOnlyField.vue
@@ -0,0 +1,65 @@
+<template>
+  <b-row no-gutters class="description-row">
+    <b-col v-bind="cols_" class="font-weight-bold">
+      {{ label }}
+    </b-col>
+
+    <!-- FIXME not sure about rendering html -->
+    <b-col v-html="text" />
+  </b-row>
+</template>
+
+<script>
+export default {
+  name: 'ReadOnlyField',
+
+  inheritAttrs: false,
+
+  props: {
+    label: { type: String, required: true },
+    component: { type: String, default: 'InputItem' },
+    value: { type: null, default: null },
+    cols: { type: Object, default: () => ({ md: 4, lg: 3 }) }
+  },
+
+  computed: {
+    cols_ () {
+      return Object.assign({ md: 4, lg: 3 }, this.cols)
+    },
+
+    text () {
+      return this.parseValue(this.value)
+    }
+  },
+
+  methods: {
+    parseValue (value) {
+      const item = this.component
+      if (item === 'FileItem') value = value.file ? value.file.name : null
+      if (item === 'CheckboxItem') value = this.$i18n.t(value ? 'yes' : 'no')
+      if (item === 'TextAreaItem') value = value.replaceAll('\n', '<br>')
+      if (Array.isArray(value)) {
+        value = value.length ? value.join(this.$i18n.t('words.separator')) : null
+      }
+      if ([null, undefined, ''].includes(this.value)) value = this.$i18n.t('words.none')
+      return value
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.description-row {
+  @include media-breakpoint-up(md) {
+    margin: 1rem 0;
+  }
+  @include media-breakpoint-down(sm) {
+    flex-direction: column;
+    &:not(:last-of-type) {
+      margin-bottom: 0.5rem;
+      padding-bottom: 0.5rem;
+      border-bottom: $border-width solid $card-border-color;
+    }
+  }
+}
+</style>
diff --git a/app/src/i18n/locales/en.json b/app/src/i18n/locales/en.json
index 5062e796..e66541aa 100644
--- a/app/src/i18n/locales/en.json
+++ b/app/src/i18n/locales/en.json
@@ -544,7 +544,9 @@
     "words": {
         "browse": "Browse",
         "collapse": "Collapse",
-        "default": "Default"
+        "default": "Default",
+        "none": "None",
+        "separator": ", "
     },
     "wrong_password": "Wrong password",
     "yes": "Yes",