feat: Add Assets history table

Signed-off-by: Jeroen Branje <[email protected]>
ASCS-eV · Dec 16, 2024 · c54e887 · c54e887
1 parent 6d526bb
commit c54e887
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 22 deletions.
diff --git a/apps/envited.ascs.digital/common/utils/index.ts b/apps/envited.ascs.digital/common/utils/index.ts
@@ -26,6 +26,7 @@ export {
   segmentsToPath,
   slugToLabel,
   isTrustAnchor,
+  truncateCID,
   truncateDID,
   isServer,
 } from './utils'
diff --git a/apps/envited.ascs.digital/common/utils/utils.ts b/apps/envited.ascs.digital/common/utils/utils.ts
@@ -76,6 +76,8 @@ export const truncate = (length: number) =>
 
 export const truncateDID = truncate(20)
 
+export const truncateCID = truncate(10)
+
 export const isServer = () => typeof window === 'undefined'
 
 export const addUrn = (type: string) => (uuid: string) => `urn:${type}:${uuid}`

diff --git a/apps/envited.ascs.digital/modules/AddAssets/AddAssets.actions.ts b/apps/envited.ascs.digital/modules/AddAssets/AddAssets.actions.ts
@@ -3,12 +3,13 @@
 import { revalidatePath } from 'next/cache'
 import { isNil } from 'ramda'
 
+import { createFilename } from '../../common/asset/validateAndCreateMetadata.utils'
 import { getServerSession } from '../../common/auth'
-import { getAssetUploadUrl, getUniqueFilename } from '../../common/aws'
+import { getAssetUploadUrl } from '../../common/aws'
 import { ERRORS } from '../../common/constants'
 import { log } from '../../common/logger'
 import { insertAsset } from '../../common/serverActions'
-import { badRequestError, formatError, internalServerErrorError, slugify, unauthorizedError } from '../../common/utils'
+import { badRequestError, formatError, internalServerErrorError, unauthorizedError } from '../../common/utils'
 
 export async function addAssetsForm(formData: FormData) {
   const assets = formData.getAll('assets') as File[]
@@ -29,7 +30,7 @@ export async function addAssetsForm(formData: FormData) {
 
     const result = assets.map(async (asset: File) => {
       const arrayBuffer = Buffer.from(await asset.arrayBuffer())
-      const uniqueFilename = getUniqueFilename(slugify(asset.name), asset.name)
+      const uniqueFilename = await createFilename(arrayBuffer)
       const signedUrl = await getAssetUploadUrl(uniqueFilename)
 
       const uploadResult = await fetch(signedUrl, {

diff --git a/apps/envited.ascs.digital/modules/UploadedAsset/UploadedAsset.tsx b/apps/envited.ascs.digital/modules/UploadedAsset/UploadedAsset.tsx
@@ -2,8 +2,9 @@
 
 import { LoadingIndicator } from '@envited-x-data-space/design-system'
 import { TrashIcon } from '@heroicons/react/24/outline'
+import { truncateCID } from 'apps/envited.ascs.digital/common/utils'
 import { useSession } from 'next-auth/react'
-import { equals, last, propOr } from 'ramda'
+import { equals, propOr } from 'ramda'
 import { FC, useEffect, useState } from 'react'
 import { match } from 'ts-pattern'
 
@@ -63,27 +64,27 @@ export const UploadedAsset: FC<UploadedAssetProps> = ({ assetIdx, asset, metadat
   return (
     <tr key={asset.id}>
       <td className={`${equals(assetIdx)(0) ? '' : 'border-t border-transparent'} relative py-4 pr-3 text-sm`}>
-        <div className="font-medium text-gray-900">
-          {equals(asset.status)(AssetStatus.processing) ? asset.cid : propOr('', 'name')(metadata)}
-        </div>
-        <div className="mt-1 flex flex-col text-gray-500 sm:block lg:hidden">
-          <span>{propOr('', 'type')(metadata)}</span>
-          <span className="hidden sm:inline">·</span>
-          <span>{propOr('', 'size')(metadata)}</span>
-        </div>
+        <div className="font-medium text-gray-900">{truncateCID(asset.cid)}</div>
         {assetIdx !== 0 ? <div className="absolute -top-px left-6 right-0 h-px bg-gray-200" /> : null}
       </td>
       <td
         className={`${
           equals(assetIdx)(0) ? '' : 'border-t border-gray-200'
         } hidden px-3 py-3.5 text-sm text-gray-500 lg:table-cell`}
       >
-        {equals(assetStatus)(AssetStatus.processing) ? <>&hellip;</> : last(propOr('', 'tags')(metadata))}
+        {equals(asset.status)(AssetStatus.processing) ? <>&hellip;</> : propOr('', 'name')(metadata)}
       </td>
       <td
         className={`${
-          equals(assetIdx)(0) ? '' : 'border-t border-transparent'
-        } relative py-3.5 pl-3 text-right text-sm font-medium space-x-2`}
+          equals(assetIdx)(0) ? '' : 'border-t border-gray-200'
+        } hidden px-3 py-3.5 text-sm text-gray-500 lg:table-cell`}
+      >
+        {equals(asset.status)(AssetStatus.processing) ? <>&hellip;</> : propOr('', 'date')(metadata)}
+      </td>
+      <td
+        className={`${
+          equals(assetIdx)(0) ? '' : 'border-t border-gray-200'
+        } hidden px-3 py-3.5 text-sm text-gray-500 lg:table-cell`}
       >
         {match(assetStatus)
           .with(AssetStatus.processing, () => (
@@ -93,6 +94,15 @@ export const UploadedAsset: FC<UploadedAssetProps> = ({ assetIdx, asset, metadat
             </div>
           ))
           .with(AssetStatus.minted, () => <span className="text-green-600">{t('[Status] minted')}</span>)
+          .with(AssetStatus.rejected, () => <span className="text-red-500">{t('[Status] rejected')}</span>)
+          .otherwise(() => '')}
+      </td>
+      <td
+        className={`${
+          equals(assetIdx)(0) ? '' : 'border-t border-transparent'
+        } relative py-3.5 pl-3 text-right text-sm font-medium space-x-2`}
+      >
+        {match(assetStatus)
           .with(AssetStatus.rejected, () => (
             <div className="flex items-center justify-end text-red-500">
               {t('[Status] rejected')}
@@ -105,7 +115,7 @@ export const UploadedAsset: FC<UploadedAssetProps> = ({ assetIdx, asset, metadat
               </button>
             </div>
           ))
-          .otherwise(() => (
+          .with(AssetStatus.pending, () => (
             <div className="flex items-center justify-end text-gray-500">
               <Mint assetId={asset.id} />
               <button
@@ -116,7 +126,8 @@ export const UploadedAsset: FC<UploadedAssetProps> = ({ assetIdx, asset, metadat
                 <TrashIcon className="h-5 w-5 text-red-500" aria-hidden="true" />
               </button>
             </div>
-          ))}
+          ))
+          .otherwise(() => '')}
         {!equals(assetIdx)(0) ? <div className="absolute -top-px left-0 right-6 h-px bg-gray-200" /> : null}
       </td>
     </tr>

diff --git a/apps/envited.ascs.digital/modules/UploadedAssets/UploadedAssets.tsx b/apps/envited.ascs.digital/modules/UploadedAssets/UploadedAssets.tsx
@@ -27,15 +27,28 @@ export const UploadedAssets: FC<UploadedAssetsProps> = ({ assets }) => {
           <thead>
             <tr>
               <th scope="col" className="py-3.5 text-left text-sm font-semibold text-gray-900">
-                {t('[Label] asset')}
+                {t('[Label] cid')}
               </th>
               <th
                 scope="col"
                 className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell"
               >
-                {t('[Label] type')}
+                {t('[Label] name')}
               </th>
-              <th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6">
+              <th
+                scope="col"
+                className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell"
+              >
+                {t('[Label] time')}
+              </th>
+              <th
+                scope="col"
+                className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell"
+              >
+                {t('[Label] status')}
+              </th>
+              <th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6 text-sm font-semibold text-gray-900">
+                {t('[Label] action')}
                 <span className="sr-only">{t('[Label] select')}</span>
               </th>
             </tr>

diff --git a/apps/envited.ascs.digital/modules/UploadedAssets/locales/de_DE.json b/apps/envited.ascs.digital/modules/UploadedAssets/locales/de_DE.json
@@ -1,10 +1,14 @@
 {
   "[Heading] uploaded assets": "Assets that are uploaded and ready for minting.",
   "[Description] uploaded assets": "You be able to see a \"preview\" of the asset detail page before you \"mint\" the asset, if there is something incorrect \"delete\" the asset and start over again.",
+  "[Label] name": "Name",
+  "[Label] cid": "CID",
+  "[Label] time": "Time",
+  "[Label] status": "Status",
   "[Label] asset": "Asset",
   "[Label] type": "Type",
-  "[Label] status": "Status",
   "[Label] select": "Select",
+  "[Label] action": "Action",
   "[Button] mint": "Mint",
   "[Button] preview": "Preview",
   "[Button] delete": "Delete"

diff --git a/apps/envited.ascs.digital/modules/UploadedAssets/locales/en_GB.json b/apps/envited.ascs.digital/modules/UploadedAssets/locales/en_GB.json
@@ -1,10 +1,14 @@
 {
   "[Heading] uploaded assets": "Assets that are uploaded and ready for minting.",
   "[Description] uploaded assets": "You be able to see a \"preview\" of the asset detail page before you \"mint\" the asset, if there is something incorrect \"delete\" the asset and start over again.",
+  "[Label] name": "Name",
+  "[Label] cid": "CID",
+  "[Label] time": "Time",
+  "[Label] status": "Status",
   "[Label] asset": "Asset",
   "[Label] type": "Type",
-  "[Label] status": "Status",
   "[Label] select": "Select",
+  "[Label] action": "Action",
   "[Button] mint": "Mint",
   "[Button] preview": "Preview",
   "[Button] delete": "Delete"