feat(dataset-table): add configurable inline editing for editable columns

  Add a new dataset table column type, `editable`.
  For users with edit permission, editable cells show an edit icon on hover.
  Clicking the cell opens an inline input with a save button.

Author: emigun

src/app/datasets/dataset-table/dataset-inline-edit-cell.component.html

@@ -0,0 +1,40 @@
+<div
+  class="inline-edit-cell"
+  [class.can-edit]="canEdit"
+  [class.is-editing]="isEditing"
+  (click)="onCellClick($event)"
+  (dblclick)="onCellDoubleClick($event)"
+  (mousedown)="onCellMouseDown($event)"
+>
+  <ng-container *ngIf="isEditing; else readMode">
+    <div class="inline-edit-editor" (click)="$event.stopPropagation()">
+      <input
+        #valueInput
+        matInput
+        class="inline-edit-input"
+        [(ngModel)]="draftValue"
+        [disabled]="isSaving"
+        (click)="$event.stopPropagation()"
+        (keydown.enter)="saveValue($event)"
+        (keydown.escape)="cancelEdit($event)"
+      />
+      <button
+        mat-icon-button
+        type="button"
+        class="save-button"
+        aria-label="Save value"
+        [disabled]="isSaving"
+        (click)="saveValue($event)"
+      >
+        <mat-icon>save</mat-icon>
+      </button>
+    </div>
+  </ng-container>
+
+  <ng-template #readMode>
+    <span *ngIf="displayValue" class="inline-edit-text">
+      {{ displayValue }}
+    </span>
+    <mat-icon *ngIf="canEdit" class="edit-icon">edit</mat-icon>
+  </ng-template>
+</div>

src/app/datasets/dataset-table/dataset-inline-edit-cell.component.scss

@@ -0,0 +1,85 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.inline-edit-cell {
+  align-items: center;
+  display: flex;
+  gap: 4px;
+  justify-content: space-between;
+  min-height: 36px;
+  width: 100%;
+}
+
+.inline-edit-text,
+.inline-edit-input {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.inline-edit-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.inline-edit-editor {
+  align-items: center;
+  display: flex;
+  gap: 4px;
+  width: 100%;
+}
+
+.edit-icon {
+  color: rgba(0, 0, 0, 0.54);
+  flex: 0 0 auto;
+  font-size: 18px;
+  height: 18px;
+  line-height: 18px;
+  margin-left: auto;
+  opacity: 0;
+  transition: opacity 150ms ease;
+  width: 18px;
+}
+
+.inline-edit-cell.can-edit:hover .edit-icon {
+  opacity: 1;
+}
+
+.inline-edit-cell.is-editing {
+  cursor: text;
+}
+
+.inline-edit-input {
+  min-width: 0;
+  width: 100%;
+}
+
+.save-button {
+  align-self: stretch;
+  background: transparent;
+  border-radius: 0;
+  color: inherit;
+  display: flex;
+  justify-content: center;
+  flex: 0 0 auto;
+  height: auto;
+  line-height: normal;
+  padding: 0;
+  width: 36px;
+}
+
+.save-button .mat-icon {
+  margin: 0;
+  vertical-align: middle;
+}
+
+.save-button:hover,
+.save-button:focus,
+.save-button:active {
+  background: transparent;
+}

src/app/datasets/dataset-table/dataset-inline-edit-cell.component.spec.ts

@@ -0,0 +1,101 @@
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
+import { FormsModule } from "@angular/forms";
+import { MatIconModule } from "@angular/material/icon";
+import { MatInputModule } from "@angular/material/input";
+import { NoopAnimationsModule } from "@angular/platform-browser/animations";
+import { provideMockStore } from "@ngrx/store/testing";
+import { of } from "rxjs";
+import { AppConfigService } from "app-config.service";
+import { DatasetsService } from "@scicatproject/scicat-sdk-ts-angular";
+import {
+  selectIsAdmin,
+  selectProfile,
+} from "state-management/selectors/user.selectors";
+import { DatasetInlineEditCellComponent } from "./dataset-inline-edit-cell.component";
+
+describe("DatasetInlineEditCellComponent", () => {
+  let component: DatasetInlineEditCellComponent;
+  let fixture: ComponentFixture<DatasetInlineEditCellComponent>;
+  let datasetsService: jasmine.SpyObj<DatasetsService>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        MatIconModule,
+        MatInputModule,
+        NoopAnimationsModule,
+      ],
+      declarations: [DatasetInlineEditCellComponent],
+      providers: [
+        provideMockStore({
+          selectors: [
+            {
+              selector: selectProfile,
+              value: { accessGroups: ["owner-group"] },
+            },
+            { selector: selectIsAdmin, value: false },
+          ],
+        }),
+        {
+          provide: AppConfigService,
+          useValue: {
+            getConfig: () => ({ editDatasetEnabled: true }),
+          },
+        },
+        {
+          provide: DatasetsService,
+          useValue: jasmine.createSpyObj("DatasetsService", [
+            "datasetsControllerFindByIdAndUpdateV3",
+          ]),
+        },
+      ],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DatasetInlineEditCellComponent);
+    component = fixture.componentInstance;
+    datasetsService = TestBed.inject(
+      DatasetsService,
+    ) as jasmine.SpyObj<DatasetsService>;
+    component.row = {
+      pid: "dataset-1",
+      ownerGroup: "owner-group",
+      comment: "original",
+    } as any;
+    component.column = { name: "comment" } as any;
+    fixture.detectChanges();
+  });
+
+  it("should allow editing for users in the dataset owner group", () => {
+    expect(component.canEdit).toBeTrue();
+  });
+
+  it("should persist the updated field and update the row locally", () => {
+    datasetsService.datasetsControllerFindByIdAndUpdateV3.and.returnValue(
+      of(null),
+    );
+
+    component.beginEdit(new MouseEvent("click"));
+    component.draftValue = "updated";
+    component.saveValue();
+
+    expect(
+      datasetsService.datasetsControllerFindByIdAndUpdateV3,
+    ).toHaveBeenCalledWith("dataset-1", { comment: "updated" });
+    expect(component.row.comment).toBe("updated");
+    expect(component.isEditing).toBeFalse();
+  });
+
+  it("should not allow editing when the user lacks access", () => {
+    component.row = {
+      pid: "dataset-1",
+      ownerGroup: "other-group",
+      comment: "original",
+    } as any;
+    fixture.detectChanges();
+
+    expect(component.canEdit).toBeFalse();
+  });
+});