rewrite website
This commit is contained in:
		
							
								
								
									
										48
									
								
								src/components/admin/table/SortableTr.svelte
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										48
									
								
								src/components/admin/table/SortableTr.svelte
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,48 @@
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
  import { setContext, type Snippet } from 'svelte';
 | 
			
		||||
  import { type Writable, writable } from 'svelte/store';
 | 
			
		||||
  import { getObjectEntryByKey } from '@util/objects.ts';
 | 
			
		||||
 | 
			
		||||
  // types
 | 
			
		||||
  interface Props {
 | 
			
		||||
    data: Writable<{ [key: string]: any }[]>;
 | 
			
		||||
 | 
			
		||||
    children: Snippet;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  // inputs
 | 
			
		||||
  const { data, children, ...restProps }: Props & Record<string, any> = $props();
 | 
			
		||||
 | 
			
		||||
  setContext('sortableHeader', {
 | 
			
		||||
    headerKey: writable(null),
 | 
			
		||||
    onSort: onSort
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  // functions
 | 
			
		||||
  function onSort(key: string, order: 'asc' | 'desc') {
 | 
			
		||||
    data.update((old) => {
 | 
			
		||||
      old.sort((a, b) => {
 | 
			
		||||
        let entryA = getObjectEntryByKey(key, a);
 | 
			
		||||
        let entryB = getObjectEntryByKey(key, b);
 | 
			
		||||
 | 
			
		||||
        if (entryA === undefined || entryB === undefined) return 0;
 | 
			
		||||
 | 
			
		||||
        if (typeof entryA === 'string') entryA = entryA.toLowerCase();
 | 
			
		||||
        if (typeof entryB === 'string') entryB = entryB.toLowerCase();
 | 
			
		||||
 | 
			
		||||
        if (order === 'asc') {
 | 
			
		||||
          return entryA < entryB ? -1 : 1;
 | 
			
		||||
        } else if (order === 'desc') {
 | 
			
		||||
          return entryA > entryB ? -1 : 1;
 | 
			
		||||
        } else {
 | 
			
		||||
          return 0;
 | 
			
		||||
        }
 | 
			
		||||
      });
 | 
			
		||||
      return old;
 | 
			
		||||
    });
 | 
			
		||||
  }
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<tr {...restProps}>
 | 
			
		||||
  {@render children()}
 | 
			
		||||
</tr>
 | 
			
		||||
		Reference in New Issue
	
	Block a user