feat(ui): bulk select move to top of tables (#1861)

closes #1333

ui/src/components/layout/BulkSelect.vue

@@ -0,0 +1,69 @@
+<template>
+    <div class="bulk-select">
+        <el-checkbox
+            :model-value="selections.length > 0"
+            @change="toggle"
+            :indeterminate="partialCheck"
+        >
+            <span v-html="$t('selection.selected', {count: selectAll ? total : selections.length})" />
+        </el-checkbox>
+        <el-button-group>
+            <el-button
+                :type="selectAll ? 'primary' : 'default'"
+                @click="toggleAll"
+                v-if="selections.length < total"
+                v-html="$t('selection.all', {count: total})"
+            />
+            <slot />
+        </el-button-group>
+    </div>
+</template>
+<script>
+    export default {
+        props: {
+            total: {type: Number, required: true},
+            selections: {type: Array, required: true},
+            selectAll: {type: Boolean, required: true},
+        },
+        emits: ["update:selectAll", "unselect"],
+        methods: {
+            toggle(value) {
+                if (!value) {
+                    this.$emit("unselect");
+                }
+            },
+            toggleAll(value) {
+                this.$emit("update:selectAll", !this.selectAll);
+            }
+        },
+        computed: {
+            partialCheck() {
+                return !this.selectAll && this.selections.length < this.total;
+            },
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .bulk-select {
+        height: 100%;
+        display: flex;
+        align-items: center;
+
+        .el-checkbox {
+            height: 100%;
+
+            span {
+                padding-left: calc(var(--spacer) * 1.5);
+            }
+        }
+
+        > * {
+            padding: 0 8px;
+        }
+    }
+
+    span {
+        font-weight: bold;
+    }
+</style>

ui/src/components/layout/SelectTable.vue

@@ -0,0 +1,63 @@
+<script>
+    export default {
+        data() {
+            return {
+                hasSelection: false
+            }
+        },
+        methods: {
+            selectionChanged(selection) {
+                this.hasSelection = selection.length > 0;
+                this.$emit("selection-change", selection);
+            },
+            computeHeaderSize() {
+                const tableHead = this.$refs.table.$el.querySelector('thead');
+                this.$el.style.setProperty("--table-header-width", `${tableHead.clientWidth}px`);
+                this.$el.style.setProperty("--table-header-height", `${tableHead.clientHeight}px`);
+            }
+        },
+        props: {
+            selectable: {
+                type: Boolean,
+                default: true
+            },
+            data: {
+                type: Array
+            }
+        },
+        mounted() {
+            window.onresize = this.computeHeaderSize;
+        },
+        updated() {
+            this.computeHeaderSize();
+        }
+    }
+</script>
+
+<template>
+    <div class="position-relative">
+        <div v-if="hasSelection" class="bulk-select-header">
+            <slot name="select-actions" />
+        </div>
+        <el-table ref="table" v-bind="$attrs" :data="data" @selection-change="selectionChanged">
+            <el-table-column type="selection" v-if="selectable" />
+            <slot name="default" />
+        </el-table>
+    </div>
+</template>
+
+<style scoped lang="scss">
+    .bulk-select-header {
+        z-index: 1;
+        position: absolute;
+        height: var(--table-header-height);
+        width: var(--table-header-width);
+        background-color: var(--bs-gray-100-darken-3);
+        border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0;
+        border-bottom: 1px solid var(--bs-border-color);
+
+        & ~ .el-table {
+            z-index: 0;
+        }
+    }
+</style>