feat(ui): Add options to customize which columns show up in tables

ui/src/components/Properties.vue

@@ -0,0 +1,250 @@
+<template>
+    <div class="properties-wrapper">
+        <el-button type="primary" :icon="TableColumn" @click.stop="toggleContainer">
+            {{ $t("properties.button") }}
+        </el-button>
+
+        <div 
+            class="properties-container" 
+            :class="{visible: showContainer}" 
+            ref="containerRef"
+            @click.stop
+        >
+            <el-input
+                v-model="searchQuery"
+                :placeholder="$t('properties.searchPlaceholder')"
+                :prefix-icon="Magnify"
+                class="rounded-2 w-100 mb-2"
+            />
+            <div class="pe-2 scrollable-container">
+                <div class="mt-2 shown-group" v-if="shownProperties.length > 0">
+                    <div class="text-start mb-1 group-title">
+                        {{ $t("properties.shownInTable") }}
+                    </div>
+                    <ul class="property-list list-style-none m-0 p-0" id="shown-list">
+                        <li v-for="property in filteredShownProperties" :key="property">
+                            <span class="property-name fw-bold">{{ getColumnLabel(property) }}</span>
+                            <div class="eye-icon" @click="toggleProperty(property, true)">
+                                <Eye />
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+                <el-divider />
+                <div class="hidden-group">
+                    <div class="text-start mb-1 group-title" id="hidden-title" v-if="hiddenProperties.length > 0">
+                        {{ $t("properties.hiddenInTable") }}
+                    </div>
+                    <ul class="property-list list-style-none m-0 p-0" id="hidden-list">
+                        <li v-for="property in filteredHiddenProperties" :key="property">
+                            <span class="property-name fw-bold">{{ getColumnLabel(property) }}</span>
+                            <div class="eye-icon" @click="toggleProperty(property, false)">
+                                <EyeOff />
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import {ref, computed, onMounted, onUnmounted} from "vue";
+    import TableColumn from "vue-material-design-icons/TableColumn.vue";
+    import Eye from "vue-material-design-icons/Eye.vue";
+    import Magnify from "vue-material-design-icons/Magnify.vue";
+    import EyeOff from "vue-material-design-icons/EyeOff.vue";
+
+    const props = defineProps({
+        columns: {
+            type: Array,
+            required: true
+        },
+        modelValue: {
+            type: Array,
+            required: true
+        },
+        storageKey: {
+            type: String,
+            required: true,
+            default: "default-storage-key"
+        }
+    });
+
+    const emit = defineEmits(["update:modelValue"]);
+
+    const containerRef = ref(null);
+    const showContainer = ref(false);
+    const searchQuery = ref("");
+
+    const handleClickOutside = (event) => {
+        if (containerRef.value && !containerRef.value.contains(event.target)) {
+            showContainer.value = false;
+        }
+    };
+
+    // Initialize from localStorage when component mounts
+    onMounted(() => {
+        const savedColumns = localStorage.getItem(props.storageKey)?.split(",") || [];
+        if (savedColumns.length > 0) {
+            emit("update:modelValue", savedColumns);
+        }
+        document.addEventListener("click", handleClickOutside);
+    });
+
+    onUnmounted(() => {
+        document.removeEventListener("click", handleClickOutside);
+    });
+
+    const shownProperties = computed(() => {
+        return props.modelValue;
+    });
+
+    const hiddenProperties = computed(() => {
+        return props.columns
+            .map(col => col.prop)
+            .filter(prop => !props.modelValue.includes(prop));
+    });
+
+    const toggleContainer = () => {
+        showContainer.value = !showContainer.value;
+    };
+
+    const toggleProperty = (prop, isShown) => {
+        const newValue = [...props.modelValue];
+        if (isShown) {
+            // Removing from shown
+            const index = newValue.indexOf(prop);
+            if (index > -1) {
+                newValue.splice(index, 1);
+            }
+        } else {
+            // Adding to shown
+            newValue.push(prop);
+        }
+        // Saving to localStorage immediately when changed
+        localStorage.setItem(props.storageKey, newValue.join(","));
+        emit("update:modelValue", newValue);
+    };
+
+    const filteredShownProperties = computed(() => {
+        return [...shownProperties.value].filter(prop =>
+            getColumnLabel(prop).toLowerCase().includes(searchQuery.value.toLowerCase())
+        );
+    });
+
+    const filteredHiddenProperties = computed(() => {
+        return [...hiddenProperties.value].filter(prop =>
+            getColumnLabel(prop).toLowerCase().includes(searchQuery.value.toLowerCase())
+        );
+    });
+
+    const getColumnLabel = (prop) => {
+        const column = props.columns.find(col => col.prop === prop);
+        return column ? column.label : prop;
+    };
+</script>
+
+<style scoped lang="scss">
+.properties-wrapper {
+    position: relative;
+    display: inline-block;
+}
+
+.properties-container {
+    position: absolute;
+    z-index: 1000;
+    background-color: var(--bs-gray-100);
+    border: 1px solid var(--ks-border-primary);
+    border-radius: 8px;
+    padding: 1rem;
+    width: 280px;
+    opacity: 0;
+    visibility: hidden;
+    bottom: 100%;
+    right: 0;
+    margin-bottom: 7px;
+    transform: translateY(-10px);
+    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+
+    &.visible {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0);
+    }
+}
+
+.scrollable-container {
+    max-height: 300px;
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+        width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: var(--el-scrollbar-bg-color);
+        border-radius: 3px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: var(--el-color-primary);
+        border-radius: 3px;
+
+        &:hover {
+            background: var(--el-color-primary-light-3);
+        }
+    }
+}
+
+.container-header {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+.group-title {
+    color: var(--el-text-color-secondary);
+    font-size: var(--el-font-size-extra-small);
+}
+
+.property-list {
+    li {  
+        padding: 8px 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        line-height: 10px;
+    }
+}
+
+.property-name {
+    font-size: var(--el-font-size-small);
+    color: var(--el-text-color-regular);
+}
+
+:deep(.el-input__prefix-inner) {
+    color: var(--bs-gray-700);
+    font-size: var(--el-font-size-large);
+}
+
+.eye-icon {
+    cursor: pointer;
+    transition: opacity 0.2s;
+    color: var(--el-text-color-regular);
+    font-size: 16px;
+
+    &:hover {
+        color: var(--el-text-color-secondary);
+    }
+}
+
+:deep(.el-input__inner::placeholder) {
+    color: var(--bs-gray-700);
+    font-size: var(--el-font-size-small);
+}
+</style>