small test with new contaent updates data

livingtongues · Jan 21, 2025 · b43f565 · b43f565
1 parent 092be6f
commit b43f565
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 44 deletions.
diff --git a/packages/site/src/routes/[dictionaryId]/entry/[entryId]/EntryHistory.svelte b/packages/site/src/routes/[dictionaryId]/entry/[entryId]/EntryHistory.svelte
@@ -22,12 +22,12 @@
     {#await get_entry_history(entry_id)}
       Loading...
     {:then { entry_content_updates, error }}
-      <pre>{JSON.stringify(entry_content_updates, null, 2)}</pre>
-      <pre>{JSON.stringify(error, null, 2)}</pre>
+      <!-- <pre>{JSON.stringify(entry_content_updates, null, 2)}</pre>
+      <pre>{JSON.stringify(error, null, 2)}</pre> -->
+      {#each entry_content_updates as record}
+        <p class="m-3">{record.user_id} edited this entry on {formatter.format(new Date(record.timestamp))}</p>
+      {/each}
     {/await}
-    <!-- {#each history as record}
-      <p class="m-3">{record.updatedName} edited this entry on {formatter.format(new Date(record.updatedAtMs))}</p>
-    {/each} -->
   {:else}
     <p class="m-3">Last edited on {new Date(history[0].updatedAtMs).toDateString()}</p>
   {/if}

diff --git a/packages/site/src/routes/[dictionaryId]/history/+page.svelte b/packages/site/src/routes/[dictionaryId]/history/+page.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
   import type { Change } from '@living-dictionaries/types'
-  import { getActionValue } from './getActionValue'
-  import { downloadObjectsAsCSV } from '$lib/export/csv'
-  import { printDateTime } from '$lib/helpers/time'
+  import { Button, ResponsiveTable } from 'svelte-pieces'
+  import RecordRow from './RecordRow.svelte'
+  import SortRecords from './sortRecords.svelte'
   import { page } from '$app/stores'
+  import Filter from '$lib/components/Filter.svelte'
 
   export let data
   $: ({ dictionary, can_edit, content_updates } = data)
@@ -19,29 +20,29 @@
       date: $page.data.t('history.date'),
     }
 
-    const formattedUsers = records.map((record) => {
+    const formattedUsers = content_updates.map((record) => {
       return {
-        entryName: record.entryName,
-        updatedName: record.updatedName,
-        action: $page.data.t(`history.${getActionValue(record)}`),
-        previousValue: JSON.stringify(record.previousValue),
-        currentValue: JSON.stringify(record.currentValue),
-        field: $page.data.t(`entry_field.${record.field}`),
-        date: printDateTime(record.updatedAtMs),
+        entryName: record.entry_id,
+      // updatedName: record.updatedName,
+        // action: $page.data.t(`history.${getActionValue(record)}`),
+        // previousValue: JSON.stringify(record.previousValue),
+        // currentValue: JSON.stringify(record.currentValue),
+        // field: $page.data.t(`entry_field.${record.field}`),
+        // date: printDateTime(record.updatedAtMs),
       }
     })
 
-    downloadObjectsAsCSV(headers, formattedUsers, `${$dictionary.id}-history`)
+  // downloadObjectsAsCSV(headers, formattedUsers, `${$dictionary.id}-history`)
   }
 </script>
 
 {#if $can_edit}
-  <pre>{JSON.stringify(content_updates, null, 2)}</pre>
   {#if content_updates?.length > 0}
-    <!-- <div class="sticky top-0 h-[calc(100vh-1.5rem)] z-2 relative flex flex-col">
+    <!-- <pre>{JSON.stringify(content_updates, null, 2)}</pre> -->
+    <div class="sticky top-0 h-[calc(100vh-1.5rem)] z-2 relative flex flex-col">
       <Filter items={content_updates} let:filteredItems={filteredRecords} placeholder={$page.data.t('history.history_search')}>
         <div slot="right">
-          <Button form="filled" color="black" class="flex items-center space-x-1" onclick={() => exportHistoryAsCSV(filteredRecords)}>
+          <Button form="filled" color="black" class="flex items-center space-x-1" onclick={() => console.info('exportHistoryAsCSV(filteredRecords) will be exported')}>
             <i class="fas fa-download" />
             <span class="hidden sm:inline">{$page.data.t('history.download_history')}</span>
           </Button>
@@ -55,7 +56,7 @@
           </SortRecords>
         </ResponsiveTable>
       </Filter>
-    </div> -->
+    </div>
   {:else}
     {$page.data.t('history.empty')}
   {/if}

diff --git a/packages/site/src/routes/[dictionaryId]/history/RecordRow.svelte b/packages/site/src/routes/[dictionaryId]/history/RecordRow.svelte
@@ -1,35 +1,38 @@
 <script lang="ts">
-  import type { Change } from '@living-dictionaries/types'
+  import type { Tables } from '@living-dictionaries/types'
   import { getActionValue } from './getActionValue'
   import { sortedColumn } from './sortedColumnStore'
   import { printDateTime } from '$lib/helpers/time'
   import { page } from '$app/stores'
 
-  export let record: Change
+  export let record: Tables<'content_updates'>
   const maxNumChar = 50
   const htmlRegex = /<[^>]*>/g
 </script>
 
 <tr>
   <td class:font-bold={$sortedColumn === 'entryName'}>
-    <a class="underline hover:no-underline text-blue-500 visited:text-purple-500" href="entry/{record.entryId}" target="_blank">{record.entryName}</a>
+    <a class="underline hover:no-underline text-blue-500 visited:text-purple-500" href="entry/{record.entry_id}" target="_blank">{record.id}</a>
   </td>
   <td class:font-bold={$sortedColumn === 'updatedName'}>
-    {record.updatedName || ''}
+    {record.user_id || ''}
   </td>
   <td class:font-bold={$sortedColumn === 'action'}>
     {$page.data.t(`history.${getActionValue(record)}`) || ''}
   </td>
-  <td class:font-bold={$sortedColumn === 'previousValue'}>
+  <!-- <td class:font-bold={$sortedColumn === 'previousValue'}>
     {record.previousValue?.slice(0, maxNumChar).toString().replace(htmlRegex, '') || ''}{#if record.previousValue?.length >= maxNumChar}<a href="entry/{record.entryId}" target="_blank">...</a>{/if}
   </td>
   <td class:font-bold={$sortedColumn === 'currentValue'}>
     {record.currentValue?.slice(0, maxNumChar).toString().replace(htmlRegex, '') || ''}{#if record.currentValue?.length >= maxNumChar}<a href="entry/{record.entryId}" target="_blank">...</a>{/if}
-  </td>
+  </td> -->
   <td class:font-bold={$sortedColumn === 'field'}>
-    {$page.data.t(`entry_field.${record.field}`) || ''}
+    {`${JSON.stringify(record.change.data)}` || ''}
+  </td>
+  <td class:font-bold={$sortedColumn === 'type'}>
+    {`${JSON.stringify(record.change.type)}` || ''}
   </td>
   <td class:font-bold={$sortedColumn === 'date'}>
-    {printDateTime(record.updatedAtMs) || ''}
+    {printDateTime(new Date(record.timestamp)) || ''}
   </td>
 </tr>
diff --git a/packages/site/src/routes/[dictionaryId]/history/getActionValue.ts b/packages/site/src/routes/[dictionaryId]/history/getActionValue.ts
@@ -1,10 +1,11 @@
-import type { Change } from '@living-dictionaries/types'
+import type { Tables } from '@living-dictionaries/types'
 
-export function getActionValue(record: Change): 'created' | 'edited' | 'deleted' {
-  if (record.previousValue?.length === 0)
-    return 'created'
-  else if (record.currentValue?.length === 0)
-    return 'deleted'
+export function getActionValue(record: Tables<'content_updates'>): 'created' | 'edited' | 'deleted' {
+  console.info(record)
+  // if (record.previousValue?.length === 0)
+  //   return 'created'
+  // else if (record.currentValue?.length === 0)
+  //   return 'deleted'
 
   return 'edited'
 }
diff --git a/packages/site/src/routes/[dictionaryId]/history/historyFields.ts b/packages/site/src/routes/[dictionaryId]/history/historyFields.ts
@@ -2,8 +2,10 @@ export enum HistoryFields {
   entryName = 'entry',
   updatedName = 'editor',
   action = 'action',
-  previousValue = 'old_value',
-  currentValue = 'new_value',
-  field = 'field',
+  // previousValue = 'old_value',
+  // currentValue = 'new_value',
+  change = 'change',
+  type = 'type',
+  // field = 'field',
   date = 'date',
 }
diff --git a/packages/site/src/routes/[dictionaryId]/history/sortRecords.svelte b/packages/site/src/routes/[dictionaryId]/history/sortRecords.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-  import type { Change } from '@living-dictionaries/types'
+  import type { Tables } from '@living-dictionaries/types'
   import { getActionValue } from './getActionValue'
   import { sortedColumn } from './sortedColumnStore'
   import { HistoryFields } from './historyFields'
-  import { page } from '$app/stores'
 
-  export let history: Change[] = []
+  export let history: Tables<'content_updates'>[] = []
 
   type SortFields = keyof typeof HistoryFields
   // @ts-ignore
@@ -28,8 +27,8 @@
     // prettier-ignore
     switch (sortKey) {
       case 'date':
-        valueA = String(a.updatedAtMs || 0)
-        valueB = String(b.updatedAtMs || 0)
+        valueA = String(a.timestamp || 0)
+        valueB = String(b.timestamp || 0)
         break
       case 'action':
         valueA = getActionValue(a)
@@ -57,7 +56,7 @@
       class="cursor-pointer"
       on:click={() => setSortSettings(field.key)}
       title="Click to sort asc/desc">
-      {$page.data.t(`history.${field.value}`)}
+      <!-- {$page.data.t(`history.${field.value}`)} -->
       {#if sortKey === field.key}
         {#if sortDescending}
           <i class="fas fa-sort-amount-down" />