Fix OpenTable performances

client/.env.docker

@@ -1,13 +1,13 @@
 NUXT_LOG_LEVEL=
 NUXT_PUBLIC_APP_URL=http://localhost/
 NUXT_PUBLIC_API_BASE=http://localhost/api
-NUXT_PUBLIC_AI_ENABLED=
+NUXT_PUBLIC_AI_ENABLED=false
 NUXT_PUBLIC_AMPLITUDE_CODE=
 NUXT_PUBLIC_CRISP_WEBSITE_ID=
-NUXT_PUBLIC_CUSTOM_DOMAINS_ENABLED=
+NUXT_PUBLIC_CUSTOM_DOMAINS_ENABLED=false
 NUXT_PUBLIC_ENV=local
 NUXT_PUBLIC_GOOGLE_ANALYTICS_CODE=
 NUXT_PUBLIC_H_CAPTCHA_SITE_KEY=
-NUXT_PUBLIC_PAID_PLANS_ENABLED=
+NUXT_PUBLIC_PAID_PLANS_ENABLED=false
-NUXT_PUBLIC_S3_ENABLED=
+NUXT_PUBLIC_S3_ENABLED=false
 NUXT_API_SECRET=

client/components/open/tables/OpenTable.vue

@@ -13,14 +13,12 @@
                     class="n-table-cell p-0 relative"
                     @resize-width="resizeCol(col, $event)"
       >
-          <p
+        <p class="bg-gray-50 border-r dark:bg-notion-dark truncate sticky top-0 border-b border-gray-200 dark:border-gray-800 px-4 py-2 text-gray-500 font-semibold tracking-wider uppercase text-xs"
-            :class="{'border-r': index < columns.length - 1 || hasActions}"
-            class="bg-gray-50 dark:bg-notion-dark truncate sticky top-0 border-b border-gray-200 dark:border-gray-800 px-4 py-2 text-gray-500 font-semibold tracking-wider uppercase text-xs"
         >
           {{ col.name }}
         </p>
       </resizable-th>
-        <th v-if="hasActions" class="n-table-cell p-0 relative" style="width: 100px">
+      <th class="n-table-cell p-0 relative" style="width: 100px">
         <p
           class="bg-gray-50 dark:bg-notion-dark truncate sticky top-0 border-b border-gray-200 dark:border-gray-800 px-4 py-2 text-gray-500 font-semibold tracking-wider uppercase text-xs"
         >
@@ -40,7 +38,7 @@
         <slot name="actions"/>
       </td>
     </tr>
-      <tr v-for="row, index in data" :key="index" class="n-table-row" :class="{'first':index===0}">
+    <tr v-for="row, index in data" :key="row.id" class="n-table-row" :class="{'first':index===0}">
       <td v-for="col, colIndex in columns"
           :key="col.id"
           :style="{width: col.cell_width + 'px'}"
@@ -114,44 +112,29 @@ export default {
   setup() {
     const workingFormStore = useWorkingFormStore()
     return {
-      workingFormStore
+      workingFormStore,
+      form: storeToRefs(workingFormStore).content,
     }
   },
 
   data() {
     return {
       tableHash: null,
-      skip: false
+      skip: false,
-    }
+      hasActions: true,
-  },
+      internalColumns: [],
-
+      fieldComponents: {
-  computed: {
+        text: shallowRef(OpenText),
-    form: {
+        number: shallowRef(OpenText),
-      get () {
+        select: shallowRef(OpenSelect),
-        return this.workingFormStore.content
+        multi_select: shallowRef(OpenSelect),
-      },
+        date: shallowRef(OpenDate),
-      /* We add a setter */
+        files: shallowRef(OpenFile),
-      set (value) {
+        checkbox: shallowRef(OpenCheckbox),
-        this.workingFormStore.set(value)
+        url: shallowRef(OpenUrl),
-      }
+        email: shallowRef(OpenText),
-    },
+        phone_number: shallowRef(OpenText),
-    hasActions () {
+        signature: shallowRef(OpenFile)
-      // In future if want to hide based on condition
-      return true
-    },
-    fieldComponents () {
-      return {
-        text: OpenText,
-        number: OpenText,
-        select: OpenSelect,
-        multi_select: OpenSelect,
-        date: OpenDate,
-        files: OpenFile,
-        checkbox: OpenCheckbox,
-        url: OpenUrl,
-        email: OpenText,
-        phone_number: OpenText,
-        signature: OpenFile
       }
     }
   },
@@ -159,6 +142,7 @@ export default {
   watch: {
     'columns': {
       handler() {
+        this.internalColumns = clonedeep(this.columns)
         this.onStructureChange()
       },
       deep: true
@@ -171,6 +155,7 @@ export default {
   },
 
   mounted() {
+    this.internalColumns = clonedeep(this.columns)
     const parent = document.getElementById('table-page')
     this.tableHash = hash(JSON.stringify(this.form.properties))
     if (parent) {
@@ -216,11 +201,11 @@ export default {
       return [colAlign, colColor, colWrap, colFontWeight]
     },
     onStructureChange() {
-      if (this.columns) {
+      if (this.internalColumns) {
         this.$nextTick(() => {
-          this.columns.forEach(col => {
+          this.internalColumns.forEach(col => {
             if (!col.hasOwnProperty('cell_width')) {
-              if (this.allowResize && this.columns.length && document.getElementById('table-head-cell-' + col.id)) {
+              if (this.allowResize && this.internalColumns.length && document.getElementById('table-head-cell-' + col.id)) {
                 // Within editor
                 this.resizeCol(col, document.getElementById('table-head-cell-' + col.id).offsetWidth)
               }
@@ -231,10 +216,9 @@ export default {
     },
     resizeCol(col, width) {
       if (!this.form) return
-      const columns = clonedeep(this.columns)
+      const index = this.internalColumns.findIndex(c => c.id === col.id)
-      const index = this.columns.findIndex(c => c.id === col.id)
+      this.internalColumns[index].cell_width = width
-      columns[index].cell_width = width
+      this.setColumns(this.internalColumns)
-      this.setColumns(columns)
       this.$nextTick(() => {
         this.$emit('resize')
       })
@@ -299,87 +283,4 @@ export default {
     min-width: 80px;
   }
 }
-
-.notion-table {
-
-  td {
-    &.text-gray {
-      color: #787774;
-    }
-
-    &.text-brown {
-      color: #9f6b53;
-    }
-
-    &.text-orange {
-      color: #d9730d;
-    }
-
-    &.text-yellow {
-      color: #cb912f;
-    }
-
-    &.text-green {
-      color: #448361;
-    }
-
-    &.text-blue {
-      color: #337ea9;
-    }
-
-    &.text-purple {
-      color: #9065b0;
-    }
-
-    &.text-pink {
-      color: #c14c8a;
-    }
-
-    &.text-red {
-      color: #d44c47;
-    }
-  }
-}
-
-.dark {
-  .notion-table {
-    td {
-      &.text-gray {
-        color: #9b9b9b;
-      }
-
-      &.text-brown {
-        color: #ba856f;
-      }
-
-      &.text-orange {
-        color: #c77d48;
-      }
-
-      &.text-yellow {
-        color: #ca9849;
-      }
-
-      &.text-green {
-        color: #529e72;
-      }
-
-      &.text-blue {
-        color: #5e87c9;
-      }
-
-      &.text-purple {
-        color: #9d68d3;
-      }
-
-      &.text-pink {
-        color: #d15796;
-      }
-
-      &.text-red {
-        color: #df5452;
-      }
-    }
-  }
-}
 </style>

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

@@ -13,10 +13,7 @@ import OpenTag from './OpenTag.vue'
 export default {
   components: { OpenTag },
   props: {
-    value: {
+    value: {}
-      type: Object
-    }
-
   },
 
   data () {
@@ -31,8 +28,5 @@ export default {
       return false
     }
   },
-  mounted () {
-  },
-  methods: {}
 }
 </script>

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

@@ -1,41 +1,7 @@
 <template>
-  <span v-if="!valueIsObject">
+  <span>
     {{ 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>
@@ -45,55 +11,6 @@ export default {
     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/ResizableTh.vue

@@ -24,17 +24,15 @@ export default {
   data() {
     return {
       x: 0,
-      w: 0
+      w: 0,
+      lastEmit: Date.now(),
+      throttlePeriod: 50 // milliseconds
     }
   },
 
-  computed: {
-  },
-  mounted () {
-  },
-
   methods: {
     mouseDownHandler(e) {
+      if (process.server) return
       // Get the current mouse position
       this.x = e.clientX
 
@@ -43,25 +41,22 @@ export default {
       this.w = parseInt(styles.width, 10)
 
       // Attach the listeners to `document`
-      if (process.client) {
       document.addEventListener('mousemove', this.mouseMoveHandler)
       document.addEventListener('mouseup', this.mouseUpHandler)
-      }
     },
     mouseMoveHandler(e) {
-      // How far the mouse has been moved
+      const now = Date.now()
+      if (now - this.lastEmit > this.throttlePeriod) {
         const dx = e.clientX - this.x
-
-      // Adjust the dimension of element
         this.$emit('resize-width', this.w + dx)
+        this.lastEmit = now
+      }
     },
     mouseUpHandler() {
       // Remove the handlers of `mousemove` and `mouseup`
-      if (process.client) {
       document.removeEventListener('mousemove', this.mouseMoveHandler)
       document.removeEventListener('mouseup', this.mouseUpHandler)
     }
   }
 }
-}
 </script>