[composition-api] Migrate modals, cells, layouts and admin pages

src/App.vue

@@ -1649,7 +1649,17 @@ tbody:last-child .empty-line:last-child {
     text-transform: uppercase;
     top: 0;
     vertical-align: middle;
-    z-index: 2;
+    // Header z-index hierarchy is built around the body taglist metadata
+    // cells which bump their own z-index up to 1000 so the open combo
+    // dropdown can spill over the next row (see td.metadata-descriptor
+    // inline z-index in AssetList.vue / ShotList.vue):
+    //   body taglist               ≤ 1000
+    //   body sticky-left            1001  (.datatable-row-header)
+    //   header non-sticky           1002  (this rule)
+    //   header sticky-left          1003  (.datatable-head .datatable-row-header)
+    // The +1 between body sticky-left and header non-sticky breaks the
+    // document-order tie at the vertical-scroll seam.
+    z-index: 1002;
 
     a {
       color: var(--text-alt);
@@ -1700,7 +1710,7 @@ tbody:last-child .empty-line:last-child {
   }
 
   .datatable-row-header {
-    z-index: 4;
+    z-index: 1003;
   }
   .header-icon {
     visibility: hidden;
@@ -1894,7 +1904,7 @@ tbody:last-child .empty-line:last-child {
 .datatable-row-header {
   position: sticky;
   left: 0;
-  z-index: 1;
+  z-index: 1001;
   border-right: 1px solid rgba(var(--border-rgb), 0.5);
 
   &::after {

src/components/cells/BooleanCell.vue

@@ -4,23 +4,12 @@
   </td>
 </template>
 
-<script>
+<script setup>
 import BooleanRep from '@/components/widgets/BooleanRep.vue'
 
-export default {
-  name: 'boolean-cell',
-
-  components: {
-    BooleanRep
-  },
-
-  props: {
-    value: {
-      default: false,
-      type: Boolean
-    }
-  }
-}
+defineProps({
+  value: { type: Boolean, default: false }
+})
 </script>
 
 <style lang="scss" scoped>

src/components/cells/DepartmentNamesCell.vue

@@ -8,37 +8,27 @@
   </td>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { computed } from 'vue'
+import { useStore } from 'vuex'
 
 import { sortByName } from '@/lib/sorting'
 
 import DepartmentName from '@/components/widgets/DepartmentName.vue'
 
-export default {
-  name: 'department-names-cell',
+const store = useStore()
 
-  components: {
-    DepartmentName
-  },
+const props = defineProps({
+  departments: { type: Array, default: () => [] }
+})
 
-  props: {
-    departments: {
-      type: Array,
-      default: () => []
-    }
-  },
+const departmentMap = computed(() => store.getters.departmentMap)
 
-  computed: {
-    ...mapGetters(['departmentMap']),
-
-    sortedDepartments() {
-      return sortByName(
-        this.departments
-          .map(departmentId => this.departmentMap.get(departmentId))
-          .filter(Boolean)
-      )
-    }
-  }
-}
+const sortedDepartments = computed(() =>
+  sortByName(
+    props.departments
+      .map(departmentId => departmentMap.value.get(departmentId))
+      .filter(Boolean)
+  )
+)
 </script>

src/components/cells/DescriptionCell.vue

@@ -47,98 +47,73 @@
   </td>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { computed, nextTick, ref } from 'vue'
+import { useStore } from 'vuex'
 
 import { renderMarkdown } from '@/lib/render'
 import stringHelpers from '@/lib/string'
 
-export default {
-  name: 'description-cell',
-
-  data() {
-    return {
-      isEditing: false,
-      isOpen: false,
-      tooltipPosition: { top: 0, left: 0 }
-    }
-  },
-
-  props: {
-    editable: {
-      type: Boolean,
-      default: false
-    },
-    entry: {
-      type: Object,
-      default: () => {}
-    },
-    full: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  emits: ['description-changed'],
-
-  computed: {
-    ...mapGetters(['isDarkTheme']),
-
-    tooltipStyle() {
-      return {
-        top: this.tooltipPosition.top + 'px',
-        left: this.tooltipPosition.left + 'px'
-      }
-    }
-  },
-
-  methods: {
-    renderMarkdown,
-
-    shortenText: stringHelpers.shortenText,
-
-    onClick(event) {
-      if (
-        (event.currentTarget.classList.contains('description-cell') &&
-          !event.target.closest('.description-cell .tooltip')) ||
-        event.keyCode === 27
-      ) {
-        this.isOpen = !this.isOpen
-        if (this.isOpen) {
-          const td = event.currentTarget
-          const rect = td.getBoundingClientRect()
-          const scrollTop =
-            window.pageYOffset || document.documentElement.scrollTop
-          const scrollLeft =
-            window.pageXOffset || document.documentElement.scrollLeft
-          this.tooltipPosition = {
-            top: rect.top + scrollTop - 105,
-            left: rect.left + scrollLeft + rect.width / 2 - 160
-          }
-        } else if (this.isEditing) {
-          this.isEditing = false
-          const val = this.$refs.text.value
-          this.$emit('description-changed', val)
-        }
-      }
-    },
-
-    onDoubleClick() {
-      if (this.editable) {
-        if (this.isEditing) {
-          const val = this.$refs.text.value
-          this.$emit('description-changed', val)
-        }
-        this.isEditing = !this.isEditing
-        if (this.isEditing) {
-          this.$nextTick(() => {
-            this.$refs.text.focus()
-          })
-        }
+const store = useStore()
+
+const props = defineProps({
+  editable: { type: Boolean, default: false },
+  entry: { type: Object, default: () => ({}) },
+  full: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['description-changed'])
+
+const isDarkTheme = computed(() => store.getters.isDarkTheme)
+
+const isEditing = ref(false)
+const isOpen = ref(false)
+const text = ref(null)
+const tooltipPosition = ref({ top: 0, left: 0 })
+
+const tooltipStyle = computed(() => ({
+  top: tooltipPosition.value.top + 'px',
+  left: tooltipPosition.value.left + 'px'
+}))
+
+const shortenText = stringHelpers.shortenText
+
+const onClick = event => {
+  if (
+    (event.currentTarget.classList.contains('description-cell') &&
+      !event.target.closest('.description-cell .tooltip')) ||
+    event.keyCode === 27
+  ) {
+    isOpen.value = !isOpen.value
+    if (isOpen.value) {
+      const td = event.currentTarget
+      const rect = td.getBoundingClientRect()
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop
+      const scrollLeft =
+        window.pageXOffset || document.documentElement.scrollLeft
+      tooltipPosition.value = {
+        top: rect.top + scrollTop - 105,
+        left: rect.left + scrollLeft + rect.width / 2 - 160
       }
+    } else if (isEditing.value) {
+      isEditing.value = false
+      emit('description-changed', text.value.value)
     }
   }
 }
+
+const onDoubleClick = () => {
+  if (!props.editable) return
+  if (isEditing.value) {
+    emit('description-changed', text.value.value)
+  }
+  isEditing.value = !isEditing.value
+  if (isEditing.value) {
+    nextTick(() => {
+      text.value.focus()
+    })
+  }
+}
 </script>
 
 <style lang="scss" scoped>

src/components/cells/LastCommentCell.vue

@@ -27,49 +27,25 @@
   </td>
 </template>
 
-<script>
+<script setup>
+import { computed } from 'vue'
+
 import { renderMarkdown } from '@/lib/render'
 
 import PeopleAvatar from '@/components/widgets/PeopleAvatar.vue'
 
-export default {
-  name: 'last-comment-cell',
-
-  emits: ['click'],
-
-  components: {
-    PeopleAvatar
-  },
+const props = defineProps({
+  task: { type: Object, required: true }
+})
 
-  data() {
-    return {
-      timeout: null
-    }
-  },
+defineEmits(['click'])
 
-  props: {
-    task: {
-      type: Object,
-      required: true
-    }
-  },
-
-  computed: {
-    commentText() {
-      const text = this.task.last_comment.text
-      const maxLength = 140
-      let result = text || ''
-      if (text !== undefined && text.length > maxLength) {
-        result = text.slice(0, maxLength) + '...'
-      }
-      return result
-    }
-  },
-
-  methods: {
-    renderMarkdown
-  }
-}
+const commentText = computed(() => {
+  const text = props.task.last_comment.text
+  const maxLength = 140
+  if (text === undefined) return ''
+  return text.length > maxLength ? text.slice(0, maxLength) + '...' : text
+})
 </script>
 
 <style lang="scss" scoped>

src/components/cells/MetadataInput.vue

@@ -292,6 +292,16 @@ const onNumberFieldKeyDown = event => {
     width: 1.15rem;
   }
 
+  &[type='number'] {
+    -moz-appearance: textfield;
+
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+
   &:active,
   &:focus,
   &:hover {

src/components/cells/PeopleNameCell.vue

@@ -7,25 +7,13 @@
   </td>
 </template>
 
-<script>
+<script setup>
 import PeopleAvatar from '@/components/widgets/PeopleAvatar.vue'
 import PeopleName from '@/components/widgets/PeopleName.vue'
 
-export default {
-  name: 'people-name-cell',
-
-  components: {
-    PeopleAvatar,
-    PeopleName
-  },
-
-  props: {
-    person: {
-      type: Object,
-      required: true
-    }
-  }
-}
+defineProps({
+  person: { type: Object, required: true }
+})
 </script>
 
 <style lang="scss" scoped>