+
+
+
+ ();
@Output() duplicated = new EventEmitter();
@Output() modified = new EventEmitter();
diff --git a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-card-item/user-dataset-card-item.component.html b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-card-item/user-dataset-card-item.component.html
new file mode 100644
index 00000000000..8aa68163234
--- /dev/null
+++ b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-card-item/user-dataset-card-item.component.html
@@ -0,0 +1,139 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-card-item/user-dataset-card-item.component.scss b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-card-item/user-dataset-card-item.component.scss
new file mode 100644
index 00000000000..0d0fe2bef26
--- /dev/null
+++ b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-card-item/user-dataset-card-item.component.scss
@@ -0,0 +1,181 @@
+/**
+ * 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.
+ */
+
+.dataset-card {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ border-radius: 8px;
+ overflow: hidden;
+ cursor: pointer;
+}
+
+.dataset-card-body-link {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ min-height: 0;
+ color: inherit;
+}
+
+.cover-container {
+ position: relative;
+ height: 124px;
+ background: #f5f5f5;
+ overflow: hidden;
+
+ .cover-image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: block;
+ }
+
+ .cover-id-badge {
+ position: absolute;
+ left: 8px;
+ bottom: 8px;
+ padding: 2px 8px;
+ font-size: 12px;
+ border-radius: 12px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+ background: rgba(0, 0, 0, 0.55);
+ color: white;
+ }
+}
+
+.card-title-row {
+ display: flex;
+ align-items: flex-start;
+ gap: 6px;
+ margin-bottom: 10px;
+
+ .card-title {
+ flex: 1;
+ min-width: 0;
+ height: calc(15px * 1.35 * 2);
+ font-size: 15px;
+ font-weight: 600;
+ line-height: 1.35;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+ word-break: break-word;
+ }
+
+ .more-btn {
+ flex-shrink: 0;
+ width: 26px;
+ height: 26px;
+ border: none;
+ background: transparent;
+ color: #8c8c8c;
+ cursor: pointer;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ i {
+ font-size: 18px;
+ }
+ }
+}
+
+.truncate-single-line {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.card-meta {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ margin-top: auto;
+ padding-top: 10px;
+ border-top: 1px solid #f0f0f0;
+ min-width: 0;
+
+ .meta-line {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ color: #595959;
+ min-width: 0;
+
+ &--owner {
+ font-size: 13px;
+
+ .meta-owner {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ flex: 1;
+ min-width: 0;
+ }
+
+ .meta-avatar {
+ flex-shrink: 0;
+
+ ::ng-deep nz-avatar.ant-avatar {
+ width: 20px;
+ height: 20px;
+ line-height: 20px;
+ font-size: 10px;
+ }
+ ::ng-deep .owner-badge {
+ font-size: 9px;
+ }
+ }
+ }
+
+ &--stats,
+ &--activity {
+ justify-content: space-between;
+ font-size: 12px;
+ color: #8c8c8c;
+ }
+
+ &--stats .meta-size {
+ white-space: nowrap;
+ }
+
+ .meta-stat--like {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ flex-shrink: 0;
+ cursor: pointer;
+
+ i {
+ font-size: 12px;
+ }
+
+ &.liked,
+ &:not(.disabled):hover {
+ color: #ff4d4f;
+ }
+
+ &.disabled {
+ cursor: default;
+ }
+ }
+ }
+}
diff --git a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-card-item/user-dataset-card-item.component.spec.ts b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-card-item/user-dataset-card-item.component.spec.ts
new file mode 100644
index 00000000000..195bef1c323
--- /dev/null
+++ b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-card-item/user-dataset-card-item.component.spec.ts
@@ -0,0 +1,141 @@
+/**
+ * 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.
+ */
+
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { NO_ERRORS_SCHEMA } from "@angular/core";
+import { HttpClientTestingModule } from "@angular/common/http/testing";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { RouterTestingModule } from "@angular/router/testing";
+import { of } from "rxjs";
+import type { Mocked } from "vitest";
+
+import { UserDatasetCardItemComponent } from "./user-dataset-card-item.component";
+import { DashboardEntry } from "src/app/dashboard/type/dashboard-entry";
+import { DashboardEntryActionsService } from "../../../../service/user/dashboard-entry-actions.service";
+import { HubService } from "../../../../../hub/service/hub.service";
+import { UserService } from "../../../../../common/service/user/user.service";
+import { StubUserService } from "../../../../../common/service/user/stub-user.service";
+import { AppSettings } from "../../../../../common/app-setting";
+import { DASHBOARD_HUB_DATASET_RESULT_DETAIL, DASHBOARD_USER_DATASET } from "../../../../../app-routing.constant";
+import { commonTestProviders } from "../../../../../common/testing/test-utils";
+
+function makeDatasetEntry(overrides: Partial = {}): DashboardEntry {
+ // Only includes fields read by the component's logic; template fields are skipped
+ return {
+ type: "dataset",
+ id: 42,
+ accessibleUserIds: [1, 2],
+ coverImageUrl: undefined,
+ likeCount: 5,
+ isLiked: false,
+ ...overrides,
+ } as unknown as DashboardEntry;
+}
+
+describe("UserDatasetCardItemComponent", () => {
+ let component: UserDatasetCardItemComponent;
+ let fixture: ComponentFixture;
+ let hubService: Mocked;
+
+ beforeEach(async () => {
+ const entryActionsSpy = {
+ openShareAccess: vi.fn().mockResolvedValue(undefined),
+ download: vi.fn(),
+ };
+ const hubServiceSpy = {
+ toggleLike: vi.fn().mockReturnValue(of({ liked: true, likeCount: 7 })),
+ };
+
+ await TestBed.configureTestingModule({
+ imports: [UserDatasetCardItemComponent, HttpClientTestingModule, BrowserAnimationsModule, RouterTestingModule],
+ providers: [
+ { provide: DashboardEntryActionsService, useValue: entryActionsSpy },
+ { provide: HubService, useValue: hubServiceSpy },
+ { provide: UserService, useClass: StubUserService },
+ ...commonTestProviders,
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(UserDatasetCardItemComponent);
+ component = fixture.componentInstance;
+ hubService = TestBed.inject(HubService) as unknown as Mocked;
+ });
+
+ describe("entryLink", () => {
+ it("routes to the private dataset page when the current user has access", () => {
+ component.currentUid = 1;
+ component.entry = makeDatasetEntry({ id: 99, accessibleUserIds: [1, 2] });
+ component.ngOnChanges({ entry: { currentValue: component.entry } } as any);
+ expect(component.entryLink).toEqual([DASHBOARD_USER_DATASET, "99"]);
+ });
+
+ it("routes to the hub detail page when the current user has no access", () => {
+ component.currentUid = 5;
+ component.entry = makeDatasetEntry({ id: 99, accessibleUserIds: [1, 2] });
+ component.ngOnChanges({ entry: { currentValue: component.entry } } as any);
+ expect(component.entryLink).toEqual([DASHBOARD_HUB_DATASET_RESULT_DETAIL, "99"]);
+ });
+ });
+
+ describe("coverImageSrc", () => {
+ it("falls back to the default cover when coverImageUrl is missing", () => {
+ component.entry = makeDatasetEntry({ coverImageUrl: undefined });
+ component.ngOnChanges({ entry: { currentValue: component.entry } } as any);
+ expect(component.coverImageSrc).toBe(component.defaultCover);
+ });
+
+ it("builds the API URL when coverImageUrl is set", () => {
+ component.entry = makeDatasetEntry({ id: 7, coverImageUrl: "v1/img.png" });
+ component.ngOnChanges({ entry: { currentValue: component.entry } } as any);
+ expect(component.coverImageSrc).toBe(`${AppSettings.getApiEndpoint()}/dataset/7/cover`);
+ });
+ });
+
+ describe("toggleLike", () => {
+ beforeEach(() => {
+ component.currentUid = 1;
+ component.entry = makeDatasetEntry();
+ component.ngOnChanges({ entry: { currentValue: component.entry } } as any);
+ });
+
+ it("does nothing when the user is not signed in", () => {
+ component.currentUid = undefined;
+ component.toggleLike();
+ expect(hubService.toggleLike).not.toHaveBeenCalled();
+ });
+
+ it("toggles to liked and reconciles state from the server", () => {
+ component.isLiked = false;
+ component.toggleLike();
+ expect(hubService.toggleLike).toHaveBeenCalledWith(42, "dataset", false);
+ expect(component.isLiked).toBe(true);
+ expect(component.likeCount).toBe(7);
+ });
+
+ it("toggles to unliked and reconciles state from the server", () => {
+ hubService.toggleLike.mockReturnValueOnce(of({ liked: false, likeCount: 6 }));
+ component.isLiked = true;
+ component.toggleLike();
+ expect(hubService.toggleLike).toHaveBeenCalledWith(42, "dataset", true);
+ expect(component.isLiked).toBe(false);
+ expect(component.likeCount).toBe(6);
+ });
+ });
+});
diff --git a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-card-item/user-dataset-card-item.component.ts b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-card-item/user-dataset-card-item.component.ts
new file mode 100644
index 00000000000..3d01e48bced
--- /dev/null
+++ b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-card-item/user-dataset-card-item.component.ts
@@ -0,0 +1,173 @@
+/**
+ * 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.
+ */
+
+import {
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ Component,
+ EventEmitter,
+ Input,
+ OnChanges,
+ Output,
+ SimpleChanges,
+} from "@angular/core";
+import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
+import { NgIf } from "@angular/common";
+import { RouterLink } from "@angular/router";
+import { NzCardComponent } from "ng-zorro-antd/card";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzPopconfirmDirective } from "ng-zorro-antd/popconfirm";
+import { NzTooltipModule } from "ng-zorro-antd/tooltip";
+import { NzDropdownDirective, NzDropdownMenuComponent } from "ng-zorro-antd/dropdown";
+import { NzMenuDirective, NzMenuItemComponent } from "ng-zorro-antd/menu";
+import { DashboardEntry } from "../../../../type/dashboard-entry";
+import { UserAvatarComponent } from "../../user-avatar/user-avatar.component";
+import { DashboardEntryActionsService } from "../../../../service/user/dashboard-entry-actions.service";
+import { HubService } from "../../../../../hub/service/hub.service";
+import { AppSettings } from "../../../../../common/app-setting";
+import { formatSize } from "../../../../../common/util/size-formatter.util";
+import { formatCount, formatRelativeTime } from "../../../../../common/util/format.util";
+import { isDefined } from "../../../../../common/util/predicate";
+import { DASHBOARD_HUB_DATASET_RESULT_DETAIL, DASHBOARD_USER_DATASET } from "../../../../../app-routing.constant";
+
+@UntilDestroy()
+@Component({
+ selector: "texera-dataset-card-item",
+ templateUrl: "./user-dataset-card-item.component.html",
+ styleUrls: ["./user-dataset-card-item.component.scss"],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ imports: [
+ NgIf,
+ RouterLink,
+ NzCardComponent,
+ NzIconDirective,
+ NzPopconfirmDirective,
+ NzTooltipModule,
+ NzDropdownDirective,
+ NzDropdownMenuComponent,
+ NzMenuDirective,
+ NzMenuItemComponent,
+ UserAvatarComponent,
+ ],
+})
+export class UserDatasetCardItemComponent implements OnChanges {
+ @Input() editable = false;
+ @Input() currentUid: number | undefined;
+ @Output() deleted = new EventEmitter();
+ @Output() refresh = new EventEmitter();
+
+ private _entry?: DashboardEntry;
+ @Input()
+ get entry(): DashboardEntry {
+ if (!this._entry) {
+ throw new Error("entry property must be provided.");
+ }
+ return this._entry;
+ }
+ set entry(value: DashboardEntry) {
+ this._entry = value;
+ }
+
+ entryLink: string[] = [];
+ coverImageSrc: string = "";
+ readonly defaultCover = "assets/card_background.jpg";
+ likeCount = 0;
+ viewCount = 0;
+ isLiked = false;
+
+ constructor(
+ private entryActions: DashboardEntryActionsService,
+ private hubService: HubService,
+ private cdr: ChangeDetectorRef
+ ) {}
+
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes["entry"] || changes["currentUid"]) {
+ this.initializeEntry();
+ }
+ if (changes["entry"]) {
+ this.likeCount = this.entry.likeCount ?? 0;
+ this.viewCount = this.entry.viewCount ?? 0;
+ this.isLiked = this.entry.isLiked ?? false;
+ }
+ }
+
+ private initializeEntry(): void {
+ if (this.entry.type !== "dataset" || typeof this.entry.id !== "number") {
+ return;
+ }
+ const owners = this.entry.accessibleUserIds;
+ if (this.currentUid !== undefined && owners.includes(this.currentUid)) {
+ this.entryLink = [DASHBOARD_USER_DATASET, String(this.entry.id)];
+ } else {
+ this.entryLink = [DASHBOARD_HUB_DATASET_RESULT_DETAIL, String(this.entry.id)];
+ }
+ this.coverImageSrc = this.entry.coverImageUrl
+ ? `${AppSettings.getApiEndpoint()}/dataset/${this.entry.id}/cover`
+ : this.defaultCover;
+ }
+
+ onCoverError(event: Event): void {
+ const image = event.target as HTMLImageElement;
+ image.onerror = null;
+ image.src = this.defaultCover;
+ }
+
+ public async onClickOpenShareAccess(): Promise {
+ const modal = await this.entryActions.openShareAccess(this.entry);
+ modal?.componentInstance?.refresh.pipe(untilDestroyed(this)).subscribe(() => this.refresh.emit());
+ }
+
+ public onClickDownload = (): void => {
+ this.entryActions.download(this.entry);
+ };
+
+ toggleLike(): void {
+ if (!isDefined(this.currentUid) || !isDefined(this.entry.id)) return;
+ // Flip optimistically; reconcile or revert when the server responds.
+ const previousLiked = this.isLiked;
+ this.isLiked = !previousLiked;
+ this.likeCount += previousLiked ? -1 : 1;
+ this.cdr.markForCheck();
+
+ this.hubService
+ .toggleLike(this.entry.id, this.entry.type, previousLiked)
+ .pipe(untilDestroyed(this))
+ .subscribe({
+ next: ({ liked, likeCount }) => {
+ this.isLiked = liked;
+ this.likeCount = likeCount;
+ this.cdr.markForCheck();
+ },
+ error: () => {
+ this.isLiked = previousLiked;
+ this.likeCount += previousLiked ? 1 : -1;
+ this.cdr.markForCheck();
+ },
+ });
+ }
+
+ get canDelete(): boolean {
+ return this.entry.type === "dataset" && this.entry.dataset.isOwner;
+ }
+
+ formatSize = formatSize;
+ formatCount = formatCount;
+ formatRelativeTime = formatRelativeTime;
+}
diff --git a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.html b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.html
index 08ce28eac60..917a91f723f 100644
--- a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.html
+++ b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.html
@@ -33,6 +33,32 @@
+
-
-
-
-
-
+
diff --git a/frontend/src/app/dashboard/component/user/search-results/search-results.component.scss b/frontend/src/app/dashboard/component/user/search-results/search-results.component.scss
index 73ccb3127ae..e5e237e23a5 100644
--- a/frontend/src/app/dashboard/component/user/search-results/search-results.component.scss
+++ b/frontend/src/app/dashboard/component/user/search-results/search-results.component.scss
@@ -130,3 +130,21 @@ nz-content {
margin: 0 1rem 0 0; // add space to the right
}
}
+
+.card-scroll-container {
+ height: 100%;
+ overflow-y: auto;
+ padding: 12px;
+}
+
+.card-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+ gap: 10px;
+ justify-content: start;
+ align-items: stretch;
+
+ * {
+ max-width: 300px;
+ }
+}
diff --git a/frontend/src/app/dashboard/component/user/search-results/search-results.component.ts b/frontend/src/app/dashboard/component/user/search-results/search-results.component.ts
index 601a6534a53..fe372dfe2aa 100644
--- a/frontend/src/app/dashboard/component/user/search-results/search-results.component.ts
+++ b/frontend/src/app/dashboard/component/user/search-results/search-results.component.ts
@@ -25,12 +25,14 @@ import { ɵɵCdkVirtualScrollViewport, ɵɵCdkFixedSizeVirtualScroll } from "@an
import { NzListComponent } from "ng-zorro-antd/list";
import { NgFor, NgIf } from "@angular/common";
import { ListItemComponent } from "../list-item/list-item.component";
+import { UserDatasetCardItemComponent } from "../user-dataset/user-dataset-card-item/user-dataset-card-item.component";
import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
import { NzButtonComponent } from "ng-zorro-antd/button";
import { NzWaveDirective } from "ng-zorro-antd/core/wave";
import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
export type LoadMoreFunction = (start: number, count: number) => Promise<{ entries: DashboardEntry[]; more: boolean }>;
+export type SearchResultsViewMode = "list" | "card";
@Component({
selector: "texera-search-results",
@@ -43,6 +45,7 @@ export type LoadMoreFunction = (start: number, count: number) => Promise<{ entri
NzListComponent,
NgFor,
ListItemComponent,
+ UserDatasetCardItemComponent,
NgIf,
NzSpaceCompactItemDirective,
NzButtonComponent,
@@ -62,6 +65,9 @@ export class SearchResultsComponent {
@Input() editable = false;
@Input() searchKeywords: string[] = [];
@Input() currentUid: number | undefined;
+ @Input() viewMode: SearchResultsViewMode = "list";
+
+ trackByEntryId = (_: number, entry: DashboardEntry): string => `${entry.type}-${entry.id}`;
@Output() deleted = new EventEmitter
-
+ [editable]="editable"
+ [currentUid]="currentUid"
+ (deleted)="deleted.emit(entry)"
+ (refresh)="refresh.emit()">
+
+
+
+
+
+
+
+
+ {{ entry.name }}
+
+
+
+
+
+
+ ![dataset cover]()
+ #{{ entry.id }}
+
+Datasets
Create Dataset
+
+
+