lula2 0.3.1 → 0.3.2-nightly.0

package/src/lib/components/controls/ControlsList.svelte

@@ -4,16 +4,16 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
-	import { Dropdown, SearchBar, Tooltip } from '$components/ui';
+	import { SearchBar, Tooltip } from '$components/ui';
+	import FilterBuilder from '$components/ui/FilterBuilder.svelte';
 	import type { Control, FieldSchema } from '$lib/types';
 	import { appState } from '$lib/websocket';
-	import { complianceStore, searchTerm, selectedFamily } from '$stores/compliance';
-	import { Filter, Information } from 'carbon-icons-svelte';
+	import { complianceStore, searchTerm, activeFilters, getOperatorLabel } from '$stores/compliance';
+	import { Information } from 'carbon-icons-svelte';
 	import { derived } from 'svelte/store';
 
-	// Derive controls and families from appState
+	// Derive controls from appState
 	const controls = derived(appState, ($state) => $state.controls || []);
-	const families = derived(appState, ($state) => $state.families || []);
 	const loading = derived(appState, ($state) => !$state.isConnected);
 
 	// Derive controls with mappings
@@ -104,26 +104,64 @@
 
 	// Create filtered controls with mappings
 	const filteredControlsWithMappings = derived(
-		[controlsWithMappings, selectedFamily, searchTerm],
-		([$controlsWithMappings, $selectedFamily, $searchTerm]) => {
+		[controlsWithMappings, searchTerm, activeFilters],
+		([$controlsWithMappings, $searchTerm, $activeFilters]) => {
 			let results = $controlsWithMappings;
 
-			if ($selectedFamily) {
-				results = results.filter((c) => {
-					const family =
-						(c as any)?._metadata?.family ||
-						(c as any)?.family ||
-						(c as any)?.['control-acronym']?.split('-')[0] ||
-						'';
-					return family === $selectedFamily;
-				});
-			}
-
+			// Apply search term
 			if ($searchTerm) {
 				const term = $searchTerm.toLowerCase();
 				results = results.filter((c) => JSON.stringify(c).toLowerCase().includes(term));
 			}
 
+			// Apply advanced filters
+			if ($activeFilters.length > 0) {
+				results = results.filter((control) => {
+					// Control must match all filters
+					return $activeFilters.every(filter => {
+						const dynamicControl = control as Record<string, unknown>;
+						const fieldValue = dynamicControl[filter.fieldName];
+						
+						switch (filter.operator) {
+							case 'equals':
+								return fieldValue === filter.value;
+								
+							case 'not_equals':
+								return fieldValue !== filter.value;
+								
+							case 'exists':
+								return fieldValue !== undefined && fieldValue !== null && fieldValue !== '';
+								
+							case 'not_exists':
+								return fieldValue === undefined || fieldValue === null || fieldValue === '';
+								
+							case 'includes':
+								if (typeof fieldValue === 'string') {
+									return fieldValue.toLowerCase().includes(String(filter.value).toLowerCase());
+								} else if (Array.isArray(fieldValue)) {
+									return fieldValue.some(item => 
+										String(item).toLowerCase().includes(String(filter.value).toLowerCase())
+									);
+								}
+								return false;
+								
+							case 'not_includes':
+								if (typeof fieldValue === 'string') {
+									return !fieldValue.toLowerCase().includes(String(filter.value).toLowerCase());
+								} else if (Array.isArray(fieldValue)) {
+									return !fieldValue.some(item => 
+										String(item).toLowerCase().includes(String(filter.value).toLowerCase())
+									);
+								}
+								return true;
+								
+							default:
+								return true;
+						}
+					});
+				});
+			}
+
 			return results;
 		}
 	);
@@ -243,64 +281,53 @@
 				</span>
 			</div>
 
-			<!-- Search Bar, Family Filter, and Export -->
+			<!-- Search Bar, Filter, and Export -->
 			<div class="flex gap-3">
 				<div class="flex-1">
 					<SearchBar />
 				</div>
+				
+				<!-- Filter Builder -->
 				<div class="flex-shrink-0">
-					<Dropdown
-						buttonLabel={$selectedFamily || 'All Families'}
-						buttonIcon={Filter}
-						buttonClass="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
-						dropdownClass="w-64"
-					>
-						{#snippet children()}
-							<div class="space-y-1">
-								<button
-									onclick={() => {
-										complianceStore.setSelectedFamily(null);
-									}}
-									class="w-full text-left px-3 py-2 text-sm rounded-md transition-colors duration-200 flex items-center justify-between {$selectedFamily ===
-									null
-										? 'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200'
-										: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'}"
-								>
-									<span>All Families</span>
-									<span class="text-xs bg-gray-200 dark:bg-gray-600 px-2 py-1 rounded-full">
-										{$controls.length}
-									</span>
-								</button>
-
-								{#each $families as family}
-									{@const familyCount = $controls.filter((c) => {
-										const controlFamily =
-											(c as any)?._metadata?.family ||
-											(c as any)?.family ||
-											(c as any)?.['control-acronym']?.split('-')[0] ||
-											'';
-										return controlFamily === family;
-									}).length}
-									<button
-										onclick={() => {
-											complianceStore.setSelectedFamily(family);
-										}}
-										class="w-full text-left px-3 py-2 text-sm rounded-md transition-colors duration-200 flex items-center justify-between {$selectedFamily ===
-										family
-											? 'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200'
-											: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'}"
-									>
-										<span>{family}</span>
-										<span class="text-xs bg-gray-200 dark:bg-gray-600 px-2 py-1 rounded-full">
-											{familyCount}
-										</span>
-									</button>
-								{/each}
-							</div>
-						{/snippet}
-					</Dropdown>
+					<FilterBuilder />
 				</div>
 			</div>
+			
+			<!-- Active Filters Summary -->
+			{#if $activeFilters.length > 0}
+				<div class="mt-2 flex flex-wrap gap-2">
+					{#each $activeFilters as filter, index}
+						<div class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300">
+							<span>{filter.fieldName}: </span>
+							{#if filter.operator === 'exists' || filter.operator === 'not_exists'}
+								<span>{getOperatorLabel(filter.operator).toLowerCase()}</span>
+							{:else if filter.operator === 'equals'}
+								<span>= {filter.value}</span>
+							{:else if filter.operator === 'not_equals'}
+								<span>≠ {filter.value}</span>
+							{:else}
+								<span>{getOperatorLabel(filter.operator).toLowerCase()} "{filter.value}"</span>
+							{/if}
+							<button 
+								onclick={() => complianceStore.removeFilter(index)}
+								class="ml-1 text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100"
+								aria-label="Remove filter"
+							>
+								×
+							</button>
+						</div>
+					{/each}
+					
+					{#if $activeFilters.length > 1}
+						<button 
+							onclick={() => complianceStore.clearFilters()}
+							class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700"
+						>
+							Clear all
+						</button>
+					{/if}
+				</div>
+			{/if}
 		</div>
 
 		<!-- Controls Table -->
@@ -582,15 +609,14 @@
 					</svg>
 					<h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-white">No controls found</h3>
 					<p class="mt-2 text-sm text-gray-500 dark:text-gray-400 max-w-sm mx-auto">
-						{#if $searchTerm}
-							No controls match your search criteria. Try adjusting your search terms or clearing
-							filters.
-						{:else if $selectedFamily}
-							No controls available in this family. Select a different family or check your data.
+						{#if $activeFilters.length > 0}
+							No controls match your filter criteria. Try adjusting or removing some filters.
+						{:else if $searchTerm}
+							No controls match your search criteria. Try adjusting your search terms.
 						{:else if $controls.length === 0}
 							No controls have been imported yet.
 						{:else}
-							No controls available. Select a different family or check your data.
+							No controls available. Check your data.
 						{/if}
 					</p>
 					{#if $controls.length === 0}

package/src/lib/components/controls/tabs/CustomFieldsTab.svelte

@@ -127,4 +127,4 @@
 			<p class="text-gray-500 dark:text-gray-400">No custom fields configured</p>
 		</div>
 	{/if}
-</div>
+</div>

package/src/lib/components/controls/tabs/TimelineTab.svelte

@@ -11,7 +11,7 @@
 		timeline?: any; // Timeline type from control.timeline
 	}
 
-	let { control, timeline }: Props = $props();
+	let { timeline }: Props = $props();
 
 	const commits = $derived(timeline?.commits || []);
 </script>

package/src/lib/components/controls/utils/ProcessedTextRenderer.svelte

@@ -23,7 +23,7 @@
 			<div class="overflow-x-auto">
 				<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
 					<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
-						{#each section.data.rows as row, i}
+						{#each section.data.rows as row, _i}
 							<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
 								{#each row.columns as column, j}
 									<td class="px-3 py-2 text-sm {j === 0 ? 'font-medium text-gray-900 dark:text-gray-100' : 'text-gray-600 dark:text-gray-400'}">

package/src/lib/components/forms/DynamicControlForm.svelte

@@ -128,7 +128,7 @@
 {#if readonly}
 	<!-- View Mode: Clean minimal layout -->
 	<div class="space-y-6">
-		{#each Object.entries(fieldGroups) as [groupName, fields]}
+		{#each Object.entries(fieldGroups) as [_groupName, fields]}
 			{#each [fields] as fieldList}
 				{@const importantFields = fieldList.filter((f) =>
 					['id', 'title', 'priority', 'status'].includes(f.id)
@@ -226,7 +226,7 @@
 										</span>
 									</h3>
 									<div class="space-y-3">
-										{#each value as item, index}
+										{#each value as item, _index}
 											<div
 												class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700"
 											>

package/src/lib/components/setup/ExistingControlSets.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import { createEventDispatcher } from 'svelte';
 	import { appState } from '$lib/websocket';
 

package/src/lib/components/setup/SpreadsheetImport.svelte

@@ -784,8 +784,8 @@
 						aria-label="Overview tab drop zone"
 					>
 						{#each Array.from(fieldConfigs.entries())
-							.filter(([field, config]) => config.tab === 'overview')
-							.sort((a, b) => a[1].displayOrder - b[1].displayOrder) as [field, config], index (field)}
+							.filter(([_field, config]) => config.tab === 'overview')
+							.sort((a, b) => a[1].displayOrder - b[1].displayOrder) as [field, _config], _index (field)}
 							<div
 								draggable="true"
 								on:dragstart={(e) => handleFieldDragStart(e, field)}
@@ -805,7 +805,7 @@
 								<span class="truncate">{field}</span>
 							</div>
 						{/each}
-						{#if Array.from(fieldConfigs.entries()).filter(([field, config]) => config.tab === 'overview').length === 0}
+						{#if Array.from(fieldConfigs.entries()).filter(([_field, config]) => config.tab === 'overview').length === 0}
 							<p class="text-xs text-gray-400 dark:text-gray-500 text-center py-4">
 								Drop fields here
 							</p>
@@ -835,8 +835,8 @@
 						aria-label="Implementation tab drop zone"
 					>
 						{#each Array.from(fieldConfigs.entries())
-							.filter(([field, config]) => config.tab === 'implementation')
-							.sort((a, b) => a[1].displayOrder - b[1].displayOrder) as [field, config], index (field)}
+							.filter(([_field, config]) => config.tab === 'implementation')
+							.sort((a, b) => a[1].displayOrder - b[1].displayOrder) as [field, _config], index (field)}
 							<div
 								draggable="true"
 								on:dragstart={(e) => handleFieldDragStart(e, field)}
@@ -856,7 +856,7 @@
 								<span class="truncate">{field}</span>
 							</div>
 						{/each}
-						{#if Array.from(fieldConfigs.entries()).filter(([field, config]) => config.tab === 'implementation').length === 0}
+						{#if Array.from(fieldConfigs.entries()).filter(([_field, config]) => config.tab === 'implementation').length === 0}
 							<p class="text-xs text-gray-400 dark:text-gray-500 text-center py-4">
 								Drop fields here
 							</p>
@@ -889,7 +889,7 @@
 						<div class="space-y-2">
 							{#if justificationFields.length > 0}
 								<!-- Display justification fields -->
-								{#each justificationFields as field, index}
+								{#each justificationFields as field, _index}
 									<div
 										draggable="true"
 										on:dragstart={(e) => handleFieldDragStart(e, field)}
@@ -966,8 +966,8 @@
 						aria-label="Custom fields drop zone"
 					>
 						{#each Array.from(fieldConfigs.entries())
-							.filter(([field, config]) => config.tab === 'custom')
-							.sort((a, b) => a[1].displayOrder - b[1].displayOrder) as [field, config], index (field)}
+							.filter(([_field, config]) => config.tab === 'custom')
+							.sort((a, b) => a[1].displayOrder - b[1].displayOrder) as [field, _config], _index (field)}
 							<div
 								draggable="true"
 								on:dragstart={(e) => handleFieldDragStart(e, field)}
@@ -987,7 +987,7 @@
 								<span class="truncate">{field}</span>
 							</div>
 						{/each}
-						{#if Array.from(fieldConfigs.entries()).filter(([field, config]) => config.tab === 'custom').length === 0}
+						{#if Array.from(fieldConfigs.entries()).filter(([_field, config]) => config.tab === 'custom').length === 0}
 							<p class="text-xs text-gray-400 dark:text-gray-500 text-center py-4">
 								Drop fields here
 							</p>

package/src/lib/components/ui/CustomDropdown.svelte

@@ -0,0 +1,96 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2023-Present The Lula Authors -->
+
+<script lang="ts" generics="T">
+	import { clickOutside } from '$lib/actions/clickOutside';
+	import { fade } from 'svelte/transition';
+	import { twMerge } from 'tailwind-merge';
+	import { ChevronDown, ChevronUp } from 'carbon-icons-svelte';
+
+	// Props
+	export let value: T = undefined as unknown as T;
+	export let options: Array<{ value: T; label: string }> = [];
+	export let placeholder: string = 'Select an option';
+	export let label: string | undefined = undefined;
+	export let labelId: string | undefined = undefined;
+	export let getDisplayValue: (value: T) => string = (val) => {
+		const option = options.find((opt) => opt.value === val);
+		return option ? option.label : String(val);
+	};
+
+	// State
+	let isOpen = false;
+
+	// Handle selection
+	function selectOption(optionValue: T) {
+		value = optionValue;
+		isOpen = false;
+	}
+
+	// Handle toggle
+	function toggle() {
+		isOpen = !isOpen;
+	}
+
+	// Handle close
+	function close() {
+		isOpen = false;
+	}
+</script>
+
+<div>
+	{#if label}
+		<label for={labelId} class="block text-xs text-gray-600 dark:text-gray-400 mb-1">{label}</label>
+	{/if}
+	<div class="relative" use:clickOutside={close}>
+		<!-- Dropdown Trigger -->
+		<button
+			type="button"
+			id={labelId}
+			on:click={toggle}
+			class={twMerge(
+				'w-full flex items-center justify-between px-3 py-2 text-sm rounded-md border transition-colors',
+				isOpen
+					? 'border-blue-500 dark:border-blue-400 ring-2 ring-blue-200 dark:ring-blue-900'
+					: 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500',
+				'bg-white dark:bg-gray-700 text-gray-900 dark:text-white'
+			)}
+		>
+			<span class="truncate">
+				{value ? getDisplayValue(value) : placeholder}
+			</span>
+			{#if isOpen}
+				<ChevronUp class="h-4 w-4 text-gray-500 dark:text-gray-400" />
+			{:else}
+				<ChevronDown class="h-4 w-4 text-gray-500 dark:text-gray-400" />
+			{/if}
+		</button>
+
+		<!-- Dropdown Menu -->
+		{#if isOpen}
+			<div
+				class="absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg max-h-60 overflow-y-auto"
+				transition:fade={{ duration: 100 }}
+			>
+				<slot name="header" />
+
+				{#each options as option}
+					<button
+						type="button"
+						class={twMerge(
+							'w-full text-left px-3 py-2 text-sm',
+							value === option.value
+								? 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300'
+								: 'hover:bg-gray-100 dark:hover:bg-gray-700/50'
+						)}
+						on:click={() => selectOption(option.value)}
+					>
+						{option.label}
+					</button>
+				{/each}
+
+				<slot name="footer" />
+			</div>
+		{/if}
+	</div>
+</div>