Work in progress

client/components/open/tables/components/OpenCheckbox.vue

@@ -0,0 +1,33 @@
+<template>
+  <svg v-if="value===true" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-auto" fill="none"
+       viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
+  </svg>
+  <svg v-else-if="value===false" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-auto" fill="none"
+       viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+  </svg>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    value: {
+      required: true
+    },
+
+  },
+  mounted() {
+  },
+
+  data() {
+    return {}
+  },
+
+  computed: {
+  },
+
+  methods: {},
+}
+</script>

client/components/open/tables/components/OpenDate.vue

@@ -0,0 +1,35 @@
+<template>
+  <span v-if="valueIsObject">
+    <template v-if="value[0]">{{ value[0] }}</template>
+    <template v-if="value[1]"><b>to</b> {{ value[1] }}</template>
+  </span>
+  <span v-else>
+    {{ value }}
+  </span>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    value: {
+      required: true
+    }
+  },
+  data () {
+    return {}
+  },
+  computed: {
+    valueIsObject () {
+      if (typeof this.value === 'object' && this.value !== null) {
+        return true
+      }
+      return false
+    }
+  },
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>

client/components/open/tables/components/OpenFile.vue

@@ -0,0 +1,71 @@
+<template>
+  <p class="text-xs">
+    <span v-for="file in value" :key="file.file_url"
+          class="whitespace-nowrap rounded-md transition-colors hover:decoration-none"
+          :class="{'open-file text-gray-700 dark:text-gray-300 truncate':!isImage(file.file_url), 'open-file-img':isImage(file.file_url)}"
+    >
+      <a class="text-gray-700 dark:text-gray-300" :href="file.file_url" target="_blank"
+         rel="nofollow"
+      >
+  <div v-if="isImage(file.file_url)" class="w-8 h-8">
+    <img class="object-cover h-full w-full rounded" :src="file.file_url">
+  </div>
+  <span v-else
+        class="py-1 px-2"
+  >
+          <a :href="file.file_url" target="_blank" download>{{ displayedFileName(file.file_name) }}</a>
+        </span>
+  </a>
+  </span>
+  </p>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    value: {
+      type: Array,
+      required: false
+    }
+  },
+
+  data() {
+    return {}
+  },
+
+  computed: {},
+  mounted() {
+  },
+
+  methods: {
+    isImage(url) {
+      return ['png', 'gif', 'jpg', 'jpeg', 'tif'].some((suffix) => {
+        return url && url.endsWith(suffix)
+      })
+    },
+    displayedFileName(fileName) {
+      const extension = fileName.substr(fileName.lastIndexOf(".") + 1)
+      const filename = fileName.substr(0, fileName.lastIndexOf("."))
+
+      if (filename.length > 12) {
+        return filename.substr(0, 12) + '(...).' + extension
+      }
+      return filename + '.' + extension
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.open-file {
+  max-width: 120px;
+  background-color: #e3e2e0;
+}
+
+.dark {
+  .open-file {
+    background-color: #5a5a5a;
+  }
+}
+</style>

client/components/open/tables/components/OpenSelect.vue

@@ -0,0 +1,39 @@
+<template>
+  <span v-if="value" class="-mb-2">
+    <template v-if="valueIsObject">
+      <open-tag v-for="(val,index) in value" :key="index+val" :opt="val" />
+    </template>
+    <open-tag v-else :opt="value" />
+  </span>
+</template>
+
+<script>
+import OpenTag from './OpenTag.vue'
+
+export default {
+  components: { OpenTag },
+  props: {
+    value: {
+      type: Object | null,
+      required: true
+    }
+
+  },
+
+  data () {
+    return {}
+  },
+
+  computed: {
+    valueIsObject () {
+      if (typeof this.value === 'object' && this.value !== null) {
+        return true
+      }
+      return false
+    }
+  },
+  mounted () {
+  },
+  methods: {}
+}
+</script>

client/components/open/tables/components/OpenTag.vue

@@ -0,0 +1,101 @@
+<template>
+  <span :id="opt"
+        class="py-1 px-2 mb-1 open-tag default mr-2 text-gray-700 dark:text-gray-300 text-xs whitespace-nowrap rounded-md transition-colors"
+  >
+    {{ opt }}
+  </span>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    opt: {
+      type: String,
+      required: true
+    }
+  },
+
+  data () {
+    return {}
+  },
+
+  computed: {
+  },
+  mounted () {
+  },
+
+  methods: {}
+}
+</script>
+
+<style lang="scss">
+.open-tag {
+  display: inline-block;
+  &.gray {
+    background-color: #e3e2e0;
+  }
+  &.light-gray,&.default {
+    background-color: #e3e2e080;
+  }
+  &.brown {
+    background-color: #eee0da;
+  }
+  &.orange {
+    background-color: #fadec9;
+  }
+  &.yellow {
+    background-color: #fdecc8;
+  }
+  &.green {
+    background-color: #dbeddb;
+  }
+  &.blue {
+    background-color: #d3e5ef;
+  }
+  &.purple {
+    background-color: #e8deee;
+  }
+  &.pink {
+    background-color: #f5e0e9;
+  }
+  &.red {
+    background-color: #ffe2dd;
+  }
+}
+
+.dark {
+  .open-tag {
+    &.gray {
+      background-color: #5a5a5a;
+    }
+    &.light-gray,&.default {
+      background-color: #ffffff21;
+    }
+    &.brown {
+      background-color: #603b2c;
+    }
+    &.orange {
+      background-color: #854c1d;
+    }
+    &.yellow {
+      background-color: #89632a;
+    }
+    &.green {
+      background-color: #2b593f;
+    }
+    &.blue {
+      background-color: #28456c;
+    }
+    &.purple {
+      background-color: #492f64;
+    }
+    &.pink {
+      background-color: #69314c;
+    }
+    &.red {
+      background-color: #6e3630;
+    }
+  }
+}
+</style>

client/components/open/tables/components/OpenText.vue

@@ -0,0 +1,99 @@
+<template>
+  <span v-if="!valueIsObject">
+    {{ value }}
+  </span>
+  <span v-else>
+    <span
+      v-for="(item, i) in value.responseData"
+      :key="i"
+      :class="{
+        'font-semibold': item.annotations.bold && !item.annotations.code,
+        italic: item.annotations.italic,
+        'line-through': item.annotations.strikethrough,
+        underline: item.annotations.underline,
+        'bg-pink-100 py-1 px-2 rounded-lg text-pink-500': item.annotations.code,
+        'font-serif': item.type == 'equation',
+      }"
+      :style="{
+        color:
+          item.annotations.color != 'default'
+            ? getColor(item.annotations.color)
+            : null,
+        'background-color':
+          item.annotations.color != 'default' &&
+          item.annotations.color.split('_')[1]
+            ? getBgColor(item.annotations.color.split('_')[0])
+            : 'none',
+      }"
+    >
+      <a
+        v-if="item.href"
+        :href="item.href"
+        rel="noopener noreferrer"
+        target="_blank"
+        class="text-blue-600 underline"
+      >{{ item.plain_text }}</a>
+      <span v-else-if="!item.href">{{ item.plain_text }}</span>
+    </span>
+  </span>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    value: {
+      required: true
+    }
+
+  },
+
+  data () {
+    return {}
+  },
+
+  computed: {
+    valueIsObject () {
+      if (
+        typeof this.value === 'object' &&
+        !Array.isArray(this.value) &&
+        this.value !== null
+      ) {
+        return true
+      }
+      return false
+    }
+  },
+  mounted () {
+  },
+
+  methods: {
+    getColor (color) {
+      return {
+        red: '#e03e3e',
+        gray: '#9b9a97',
+        brown: '#64473a',
+        orange: '#d9730d',
+        yellow: '#dfab01',
+        teal: '#0f7b6c',
+        blue: '#0b6e99',
+        purple: '#6940a5',
+        pink: '#ad1a72'
+      }[color]
+    },
+    getBgColor (color) {
+      return {
+        red: '#fbe4e4',
+        gray: '#ebeced',
+        brown: '#e9e5e3',
+        orange: '#faebdd',
+        yellow: '#fbf3db',
+        teal: '#ddedea',
+        blue: '#ddebf1',
+        purple: '#eae4f2',
+        pink: '#f4dfeb'
+      }[color]
+    }
+  }
+}
+</script>

client/components/open/tables/components/OpenUrl.vue

@@ -0,0 +1,26 @@
+<template>
+  <a class="text-gray-700 dark:text-gray-300 hover:underline" :href="value" target="_blank" rel="nofollow">{{ value }}</a>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    value: {
+      required: true
+    },
+
+  },
+  mounted() {
+  },
+
+  data() {
+    return {}
+  },
+
+  computed: {
+  },
+
+  methods: {},
+}
+</script>

client/components/open/tables/components/ResizableTh.vue

@@ -0,0 +1,67 @@
+<template>
+  <th ref="th" :style="{width: width}">
+    <slot />
+    <div v-if="allowResize" class="absolute right-0 top-0 w-0 z-10">
+      <div class="resize-handler bg-transparent cursor-move	 hover:bg-blue-500 opacity-80 transition-colors"
+           @mousedown="mouseDownHandler"
+      />
+    </div>
+  </th>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    allowResize: {
+      required: true
+    },
+    width: {
+      required: true
+    }
+  },
+
+  data () {
+    return {
+      x: 0,
+      w: 0
+    }
+  },
+
+  computed: {
+  },
+  mounted () {
+  },
+
+  methods: {
+    mouseDownHandler (e) {
+      // Get the current mouse position
+      this.x = e.clientX
+
+      // Calculate the dimension of element
+      const styles = window.getComputedStyle(this.$refs.th)
+      this.w = parseInt(styles.width, 10)
+
+      // Attach the listeners to `document`
+      if (process.server) {
+        document.addEventListener('mousemove', this.mouseMoveHandler)
+        document.addEventListener('mouseup', this.mouseUpHandler)
+      }
+    },
+    mouseMoveHandler (e) {
+      // How far the mouse has been moved
+      const dx = e.clientX - this.x
+
+      // Adjust the dimension of element
+      this.$emit('resize-width', this.w + dx)
+    },
+    mouseUpHandler () {
+      // Remove the handlers of `mousemove` and `mouseup`
+      if (process.server) {
+        document.removeEventListener('mousemove', this.mouseMoveHandler)
+        document.removeEventListener('mouseup', this.mouseUpHandler)
+      }
+    }
+  }
+}
+</script>