VRCX/src/views/Dashboard/components/DashboardRow.vue

<template>
    <div class="relative h-full min-h-[180px]">
        <div
            v-if="isEditing"
            class="flex h-full gap-2"
            :class="isVertical ? 'flex-col' : 'flex-row'">
            <DashboardPanel
                v-for="(panelKey, panelIndex) in row.panels"
                :key="panelIndex"
                :panel-key="panelKey"
                :is-editing="true"
                :class="panelEditClass"
                @select="(key) => emit('update-panel', rowIndex, panelIndex, key)" />

            <Button
                variant="ghost"
                size="icon-sm"
                class="absolute right-1 top-2 z-20 bg-background/80"
                @click="emit('remove-row', rowIndex)">
                <X class="size-4" />
            </Button>
        </div>

        <ResizablePanelGroup
            v-else-if="row.panels.length === 2"
            :direction="isVertical ? 'vertical' : 'horizontal'"
            :auto-save-id="`dashboard-${dashboardId}-row-${rowIndex}`"
            class="h-full min-h-[180px]">
            <ResizablePanel :default-size="50" :min-size="20">
                <DashboardPanel :panel-key="row.panels[0]" class="h-full" />
            </ResizablePanel>
            <ResizableHandle />
            <ResizablePanel :default-size="50" :min-size="20">
                <DashboardPanel :panel-key="row.panels[1]" class="h-full" />
            </ResizablePanel>
        </ResizablePanelGroup>

        <div v-else class="h-full">
            <DashboardPanel :panel-key="row.panels[0]" class="h-full" />
        </div>
    </div>
</template>

<script setup>
    import { computed } from 'vue';
    import { X } from 'lucide-vue-next';

    import { Button } from '@/components/ui/button';
    import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';

    import DashboardPanel from './DashboardPanel.vue';

    const props = defineProps({
        row: {
            type: Object,
            required: true
        },
        rowIndex: {
            type: Number,
            required: true
        },
        dashboardId: {
            type: String,
            required: true
        },
        isEditing: {
            type: Boolean,
            default: false
        }
    });

    const emit = defineEmits(['update-panel', 'remove-row']);

    const isVertical = computed(() => props.row.direction === 'vertical');

    const panelEditClass = computed(() => {
        if (props.row.panels.length === 1) {
            return 'w-full';
        }
        return isVertical.value ? 'h-1/2' : 'w-1/2';
    });
</script>