Fixes for grid and other views (baserow#4575)

Author: dimmur-brw

enterprise/web-frontend/modules/baserow_enterprise/pages/admin/authProviders.vue

@@ -41,7 +41,7 @@
 <script setup>
 import { ref, computed, nextTick } from 'vue'
 import { useStore } from 'vuex'
-import { useNuxtApp, definePageMeta, useI18n } from '#imports'
+import { useNuxtApp, definePageMeta, useI18n, useHead } from '#imports'
 import CreateAuthProviderContext from '@baserow_enterprise/components/admin/contexts/CreateAuthProviderContext.vue'
 import CreateAuthProviderModal from '@baserow_enterprise/components/admin/modals/CreateAuthProviderModal.vue'
 
@@ -56,6 +56,8 @@ const store = useStore()
 const { $registry } = useNuxtApp()
 const { t: $t } = useI18n()
 
+useHead({ title: $t('authProviders.title') })
+
 // Template refs
 const createContextLink = ref(null)
 const createContext = ref(null)

enterprise/web-frontend/modules/baserow_enterprise/pages/auditLog.vue

@@ -106,6 +106,7 @@ import {
   createError,
   definePageMeta,
   useI18n,
+  useHead,
 } from '#imports'
 import _ from 'lodash'
 import moment from '@baserow/modules/core/moment'
@@ -138,6 +139,8 @@ const router = useRouter()
 const { $client, $hasFeature, $hasPermission } = useNuxtApp()
 const { t: $t } = useI18n()
 
+useHead({ title: $t('auditLog.adminTitle') })
+
 // Helper function
 function initFilters(wsId = null) {
   const f = {}

premium/web-frontend/modules/baserow_premium/components/field/FieldAISubForm.vue

@@ -98,6 +98,8 @@
 
     <component
       :is="outputType.getFormComponent()"
+      v-if="hasChildFormComponent"
+      :key="values.ai_output_type"
       ref="childForm"
       v-bind="$props"
     />
@@ -221,6 +223,9 @@ export default {
         this.defaultValues.ai_output_type !== this.values.ai_output_type
       )
     },
+    hasChildFormComponent() {
+      return this.outputType && this.outputType.getFormComponent() !== null
+    },
   },
   watch: {
     'values.ai_prompt.mode': {

premium/web-frontend/modules/baserow_premium/components/row/RowEditFieldAI.vue

@@ -3,7 +3,7 @@
     <component
       :is="outputRowEditFieldComponent"
       ref="field"
-      v-bind="$attrs"
+      v-bind="$props"
       :read-only="generating || readOnly"
     ></component>
     <div v-if="!readOnly" class="margin-top-2">

premium/web-frontend/modules/baserow_premium/components/views/calendar/CalendarMonthDay.vue

@@ -51,6 +51,7 @@
     >
       {{
         $t('calendarMonthDay.hiddenRowsCount', {
+          count: hiddenRowsCount,
           hiddenRowsCount,
         })
       }}
@@ -151,16 +152,20 @@ export default {
   },
   mounted() {
     this.updateVisibleRowsCount()
-    window.addEventListener('resize', this.updateVisibleRowsCount)
+    this.$el.resizeListener = this.updateVisibleRowsCount.bind(this)
+    window.addEventListener('resize', this.$el.resizeListener)
   },
   beforeUnmount() {
-    window.removeEventListener('resize', this.updateVisibleRowsCount)
+    window.removeEventListener('resize', this.$el.resizeListener)
   },
   methods: {
     getClientHeight() {
-      return this.$refs.calendarMonthDay.clientHeight
+      return this.$refs.calendarMonthDay.clientHeight || 0
     },
     updateVisibleRowsCount() {
+      if (!this.$refs.calendarMonthDay) {
+        return
+      }
       const itemHeight = 28
       this.width = this.$refs.calendarMonthDay.clientWidth
       this.height = this.getClientHeight()

premium/web-frontend/modules/baserow_premium/components/views/calendar/CalendarMonthDayExpanded.vue

@@ -33,7 +33,6 @@
             :fields="fields"
             :store-prefix="storePrefix"
             :class="{ last: index == rows.length - 1 }"
-            :parent-width="contextWidth"
             :decorations-by-place="decorationsByPlace"
             @edit-row="$emit('edit-row', $event)"
             @row-context="$emit('row-context', $event)"
@@ -139,9 +138,6 @@ export default {
     maxContextHeight() {
       return this.parentHeight * 2 - 10
     },
-    contextWidth() {
-      return this.$refs.context.$el.clientWidth
-    },
     innerHeight() {
       return this.contextHeight - 48
     },

premium/web-frontend/modules/baserow_premium/components/views/calendar/CalendarViewHeader.vue

@@ -181,7 +181,7 @@ export default {
   },
   methods: {
     showChooseDateFieldModal() {
-      if (this.canChooseDateField) {
+      if (this.canChooseDateField && this.$refs.selectDateFieldModal) {
         this.$refs.selectDateFieldModal.show()
       }
     },

premium/web-frontend/modules/baserow_premium/components/views/kanban/KanbanViewStack.vue

@@ -5,7 +5,7 @@
       enabled: () => draggingRow !== null,
       speed: 3,
       padding: 24,
-      scrollElement: () => $refs.scroll.$el,
+      scrollElement: () => $refs.scroll?.$el,
     }"
     class="kanban-view__stack-wrapper"
     @mouseleave.stop="wrapperMouseLeave"
@@ -302,7 +302,9 @@ export default {
     },
   },
   mounted() {
-    this.updateBuffer()
+    this.$nextTick(() => {
+      this.updateBuffer()
+    })
 
     this.$el.resizeEvent = () => {
       this.updateBuffer()
@@ -312,11 +314,19 @@ export default {
     }
 
     window.addEventListener('resize', this.$el.resizeEvent)
-    this.$refs.scroll.$el.addEventListener('scroll', this.$el.scrollEvent)
+    this.$nextTick(() => {
+      const scrollEl = this.$refs.scroll?.$el
+      if (scrollEl) {
+        this.$el.scrollElement = scrollEl
+        scrollEl.addEventListener('scroll', this.$el.scrollEvent)
+      }
+    })
   },
   beforeUnmount() {
     window.removeEventListener('resize', this.$el.resizeEvent)
-    this.$refs.scroll.$el.removeEventListener('scroll', this.$el.scrollEvent)
+    if (this.$el.scrollElement) {
+      this.$el.scrollElement.removeEventListener('scroll', this.$el.scrollEvent)
+    }
   },
   methods: {
     /**
@@ -514,9 +524,10 @@ export default {
     },
     updateBuffer() {
       const scroll = this.$refs.scroll
+      if (!scroll) return
       const cardHeight = this.cardHeight
       const containerHeight = scroll.clientHeight()
-      const scrollTop = scroll.$el.scrollTop
+      const scrollTop = scroll.$el?.scrollTop || 0
       const min = Math.ceil(containerHeight / cardHeight) + 2
       const rows = this.stack.results.slice(
         Math.floor(scrollTop / cardHeight),

premium/web-frontend/modules/baserow_premium/components/views/timeline/TimelineContainer.vue

@@ -337,9 +337,6 @@ export default {
     rowCount() {
       return this.rows.length
     },
-    containerHeight() {
-      return this.rowsCount * this.rowHeight
-    },
     scrollAreaElement() {
       return this.$refs.gridBody
     },
@@ -409,6 +406,9 @@ export default {
     },
     'view.timescale'() {
       // Update the timescale as soon as it changes in the store.
+      if (!this.firstVisibleDate) {
+        return // Grid not initialized yet
+      }
       let currDate = this.firstVisibleDate
         .clone()
         .add(Math.floor(this.visibleColumnCount / 2), this.unit)
@@ -538,6 +538,9 @@ export default {
      */
     updateGridDimensions() {
       const el = this.scrollAreaElement
+      if (!el) {
+        return
+      }
       this.gridWidth = el.clientWidth
       this.gridHeight = el.clientHeight
       this.columnWidth = Math.max(
@@ -552,6 +555,9 @@ export default {
      */
     getVisibleColumnsRange() {
       const el = this.scrollAreaElement
+      if (!el) {
+        return { startIndex: 0, endIndex: 0 }
+      }
       const startIndex = Math.floor(el.scrollLeft / this.columnWidth)
       const endIndex = startIndex + this.visibleColumnCount + 1
       return { startIndex, endIndex }
@@ -570,6 +576,9 @@ export default {
      */
     onResizeUpdateGrid() {
       const el = this.scrollAreaElement
+      if (!el) {
+        return
+      }
       const prevPos = el.scrollLeft / el.scrollWidth
 
       this.updateGridDimensions()
@@ -634,12 +643,15 @@ export default {
      */
     getVisibleRowsRange() {
       const el = this.scrollAreaElement
+      if (!el) {
+        return { startIndex: 0, endIndex: 0 }
+      }
       const elHeight = el.clientHeight
       const minRowsToRender = Math.ceil(elHeight / this.rowHeight) + 1
       let startIndex = Math.floor(el.scrollTop / this.rowHeight)
       let endIndex = startIndex + minRowsToRender
-      if (endIndex > this.rowsCount) {
-        endIndex = this.rowsCount
+      if (endIndex > this.rowCount) {
+        endIndex = this.rowCount
         startIndex = Math.max(0, endIndex - minRowsToRender)
       }
       return { startIndex, endIndex }

premium/web-frontend/modules/baserow_premium/components/views/timeline/TimelineGrid.vue

@@ -438,28 +438,32 @@ export default {
      * This method is called when a row is resized or moved.
      */
     updateRow(row, { startOffset, endOffset }) {
-      const startField = this.startDateField
-      const newStartDate = this.getRowDateValue(row, startField).clone()
+      let start = null
+      let end = null
 
-      if (startOffset !== 0) {
+      if (startOffset !== 0 && !this.startDateFieldReadOnly) {
+        const startField = this.startDateField
+        const newStartDate = this.getRowDateValue(row, startField).clone()
         const numberOfUnits = Math.round(startOffset / this.stepPx)
         newStartDate.add(numberOfUnits, this.step)
+        start = this.$registry
+          .get('field', startField.type)
+          .formatValue(startField, newStartDate)
       }
-      const start = this.$registry
-        .get('field', startField.type)
-        .formatValue(startField, newStartDate)
 
-      const endField = this.endDateField
-      const newEndDate = this.getRowDateValue(row, endField).clone()
-      if (endOffset !== 0) {
+      if (endOffset !== 0 && !this.endDateFieldReadOnly) {
+        const endField = this.endDateField
+        const newEndDate = this.getRowDateValue(row, endField).clone()
         const numberOfUnits = Math.round(endOffset / this.stepPx)
         newEndDate.add(numberOfUnits, this.step)
+        end = this.$registry
+          .get('field', endField.type)
+          .formatValue(endField, newEndDate)
       }
-      const end = this.$registry
-        .get('field', endField.type)
-        .formatValue(endField, newEndDate)
 
-      this.$emit('update-row', { row, start, end })
+      if (start !== null || end !== null) {
+        this.$emit('update-row', { row, start, end })
+      }
     },
     /*
      * Returns the background color for the given row.