feat(dashboard): add public dataset card view

amber/src/main/scala/org/apache/texera/web/resource/dashboard/DatasetSearchQueryBuilder.scala

@@ -48,7 +48,8 @@ object DatasetSearchQueryBuilder extends SearchQueryBuilder with LazyLogging {
     repositoryName = DATASET.REPOSITORY_NAME,
     isDatasetPublic = DATASET.IS_PUBLIC,
     isDatasetDownloadable = DATASET.IS_DOWNLOADABLE,
-    datasetUserAccess = DATASET_USER_ACCESS.PRIVILEGE
+    datasetUserAccess = DATASET_USER_ACCESS.PRIVILEGE,
+    datasetCoverImage = DATASET.COVER_IMAGE
   )
 
   /*

amber/src/main/scala/org/apache/texera/web/resource/dashboard/UnifiedResourceSchema.scala

@@ -72,7 +72,8 @@ object UnifiedResourceSchema {
       repositoryName: Field[String] = DSL.inline(""),
       isDatasetPublic: Field[java.lang.Boolean] = DSL.cast(null, classOf[java.lang.Boolean]),
       isDatasetDownloadable: Field[java.lang.Boolean] = DSL.cast(null, classOf[java.lang.Boolean]),
-      datasetUserAccess: Field[PrivilegeEnum] = DSL.castNull(classOf[PrivilegeEnum])
+      datasetUserAccess: Field[PrivilegeEnum] = DSL.castNull(classOf[PrivilegeEnum]),
+      datasetCoverImage: Field[String] = DSL.cast(null, classOf[String])
   ): UnifiedResourceSchema = {
     new UnifiedResourceSchema(
       Seq(
@@ -96,7 +97,8 @@ object UnifiedResourceSchema {
         repositoryName -> repositoryName.as("repository_name"),
         isDatasetPublic -> isDatasetPublic.as("is_dataset_public"),
         isDatasetDownloadable -> isDatasetDownloadable.as("is_dataset_downloadable"),
-        datasetUserAccess -> datasetUserAccess.as("user_dataset_access")
+        datasetUserAccess -> datasetUserAccess.as("user_dataset_access"),
+        datasetCoverImage -> datasetCoverImage.as("cover_image")
       )
     )
   }

frontend/src/app/common/util/format.util.ts

@@ -54,3 +54,40 @@ export const formatTime = (seconds?: number): string => {
 
   return min === 0 ? `${h}h` : `${h}h${min}m`;
 };
+
+/** Format a count: "1.5k" for >= 1000, otherwise the number. */
+export const formatCount = (count: number): string => {
+  if (count >= 1000) return (count / 1000).toFixed(1) + "k";
+  return String(count);
+};
+
+/** Format a timestamp as relative time ("5 minutes ago", "3 months ago", "1 year ago"). */
+export const formatRelativeTime = (timestamp: number | undefined): string => {
+  if (timestamp === undefined) {
+    return "Unknown";
+  }
+
+  const currentTime = new Date().getTime();
+  const timeDifference = currentTime - timestamp;
+
+  const minutesAgo = Math.floor(timeDifference / (1000 * 60));
+  const hoursAgo = Math.floor(timeDifference / (1000 * 60 * 60));
+  const daysAgo = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
+  const weeksAgo = Math.floor(daysAgo / 7);
+  const monthsAgo = Math.floor(daysAgo / 30);
+  const yearsAgo = Math.floor(daysAgo / 365);
+
+  if (minutesAgo < 60) {
+    return `${minutesAgo} minutes ago`;
+  } else if (hoursAgo < 24) {
+    return `${hoursAgo} hours ago`;
+  } else if (daysAgo < 7) {
+    return `${daysAgo} days ago`;
+  } else if (weeksAgo < 4) {
+    return `${weeksAgo} weeks ago`;
+  } else if (monthsAgo < 12) {
+    return `${monthsAgo} months ago`;
+  } else {
+    return `${yearsAgo} years ago`;
+  }
+};

frontend/src/app/dashboard/component/user/dataset-card-item/dataset-card-item.component.html

@@ -0,0 +1,158 @@
+<!--
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied.  See the License for the
+ specific language governing permissions and limitations
+ under the License.
+-->
+
+<nz-card
+  nzHoverable
+  class="dataset-card"
+  [nzCover]="coverTpl"
+  [routerLink]="entryLink">
+  <div class="dataset-card-body-link">
+    <div class="card-title-row">
+      <span
+        class="card-title"
+        [title]="entry.name">
+        {{ entry.name }}
+      </span>
+      <button
+        *ngIf="editable"
+        class="more-btn"
+        nz-dropdown
+        nzTrigger="click"
+        nzPlacement="bottomRight"
+        [nzDropdownMenu]="cardActionsMenu"
+        (click)="$event.stopPropagation(); $event.preventDefault()"
+        nz-tooltip="More actions">
+        <i
+          nz-icon
+          nzType="more"
+          nzTheme="outline"></i>
+      </button>
+    </div>
+
+    <div class="card-meta">
+      <div class="meta-line meta-line--owner">
+        <span
+          class="meta-owner"
+          [title]="entry.ownerName || entry.ownerEmail || 'Unknown'">
+          <texera-user-avatar
+            class="meta-avatar"
+            [googleAvatar]="entry.ownerGoogleAvatar"
+            userColor="#1E90FF"
+            [userName]="entry.ownerName || entry.ownerEmail || 'Unknown'"
+            [isOwner]="entry.ownerId === currentUid">
+          </texera-user-avatar>
+          <span class="meta-owner-name truncate-single-line">
+            {{ entry.ownerName || entry.ownerEmail || 'Unknown' }}
+          </span>
+        </span>
+        <span
+          class="meta-dot"
+          aria-hidden="true"
+          >·</span
+        >
+        <span class="meta-updated">Updated {{ formatRelativeTime(entry.lastModifiedTime) }}</span>
+      </div>
+      <div class="meta-hr"></div>
+      <div class="meta-line meta-line--stats">
+        <div class="meta-stats-left">
+          <span class="meta-stat">
+            <i
+              nz-icon
+              nzType="database"
+              nzTheme="outline"></i>
+            {{ entry.size ? formatSize(entry.size) : '-' }}
+          </span>
+          <span class="meta-stat">
+            <i
+              nz-icon
+              nzType="eye"
+              nzTheme="outline"></i>
+            {{ formatCount(viewCount) }}
+          </span>
+        </div>
+        <button
+          type="button"
+          class="meta-stat meta-stat--like"
+          [class.liked]="isLiked"
+          [class.disabled]="!currentUid"
+          (click)="$event.stopPropagation(); $event.preventDefault(); currentUid && toggleLike()">
+          <i
+            nz-icon
+            nzType="like"
+            [nzTheme]="isLiked ? 'fill' : 'outline'"></i>
+          {{ formatCount(likeCount) }}
+        </button>
+      </div>
+    </div>
+  </div>
+</nz-card>
+
+<ng-template #coverTpl>
+  <div class="cover-container">
+    <img
+      class="cover-image"
+      [src]="coverImageSrc"
+      (error)="onCoverError($event)"
+      loading="lazy"
+      decoding="async"
+      alt="dataset cover" />
+    <span class="cover-id-badge">#{{ entry.id }}</span>
+  </div>
+</ng-template>
+
+<nz-dropdown-menu #cardActionsMenu="nzDropdownMenu">
+  <ul
+    nz-menu
+    class="dataset-card-actions-menu">
+    <li
+      nz-menu-item
+      (click)="onClickOpenShareAccess()">
+      <i
+        nz-icon
+        nzType="share-alt"
+        nzTheme="outline"></i>
+      Share
+    </li>
+    <li
+      nz-menu-item
+      (click)="onClickDownload()">
+      <i
+        nz-icon
+        nzType="cloud-download"
+        nzTheme="outline"></i>
+      Download
+    </li>
+    <li
+      *ngIf="editable"
+      nz-menu-item
+      nzDanger
+      [nzDisabled]="!canDelete"
+      nz-popconfirm
+      nzPopconfirmTitle="Confirm to delete this dataset."
+      nzOkText="Delete"
+      nzOkDanger
+      (nzOnConfirm)="deleted.emit()">
+      <i
+        nz-icon
+        nzType="delete"
+        nzTheme="outline"></i>
+      Delete
+    </li>
+  </ul>
+</nz-dropdown-menu>