Refactor and handle removed items too

src-ui/messages.xlf

@@ -596,7 +596,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/bulk-editor/custom-fields-bulk-edit-dialog/custom-fields-bulk-edit-dialog.component.html</context>
-          <context context-type="linenumber">91</context>
+          <context context-type="linenumber">94</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.html</context>
@@ -1444,7 +1444,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/bulk-editor/custom-fields-bulk-edit-dialog/custom-fields-bulk-edit-dialog.component.html</context>
-          <context context-type="linenumber">90</context>
+          <context context-type="linenumber">93</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.html</context>
@@ -6939,7 +6939,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/bulk-editor/bulk-editor.component.ts</context>
-          <context context-type="linenumber">855</context>
+          <context context-type="linenumber">860</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7894972847287473517" datatype="html">
@@ -7185,7 +7185,7 @@
         <source>Bulk operation executed successfully</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/bulk-editor/bulk-editor.component.ts</context>
-          <context context-type="linenumber">845</context>
+          <context context-type="linenumber">850</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8100177157764133131" datatype="html">
@@ -7195,6 +7195,13 @@
           <context context-type="linenumber">12</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="7267500828215901463" datatype="html">
+        <source>This operation will also remove <x id="INTERPOLATION" equiv-text="{{fieldsToRemoveIds.length}}"/> custom field(s) from the selected documents.</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/components/document-list/bulk-editor/custom-fields-bulk-edit-dialog/custom-fields-bulk-edit-dialog.component.html</context>
+          <context context-type="linenumber">91</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="2784168796433474565" datatype="html">
         <source>Filter by tag</source>
         <context-group purpose="location">

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts

@@ -456,7 +456,7 @@ export class FilterableDropdownComponent implements OnDestroy, OnInit {
   opened = new EventEmitter()
 
   @Output()
-  extraButton = new EventEmitter()
+  extraButton = new EventEmitter<ChangedItems>()
 
   get modifierToggleEnabled(): boolean {
     return this.manyToOne
@@ -656,7 +656,7 @@ export class FilterableDropdownComponent implements OnDestroy, OnInit {
     const applyOnClose = this.applyOnClose
     this.applyOnClose = false
     this.dropdown.close()
-    this.extraButton.emit()
+    this.extraButton.emit(this.selectionModel.diff())
     this.applyOnClose = applyOnClose
   }
 }

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html

@@ -92,7 +92,7 @@
               [documentCounts]="customFieldDocumentCounts"
               extraButtonTitle="Set values"
               i18n-extraButtonTitle
-              (extraButton)="setCustomFieldValues()"
+              (extraButton)="setCustomFieldValues($event)"
               (apply)="setCustomFields($event)">
             </pngx-filterable-dropdown>
           }

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.spec.ts

@@ -1443,14 +1443,14 @@ describe('BulkEditorComponent', () => {
       { id: 1, name: 'Custom Field 1', data_type: CustomFieldDataType.String },
       { id: 2, name: 'Custom Field 2', data_type: CustomFieldDataType.String },
     ]
-    jest
-      .spyOn(component.customFieldsSelectionModel, 'getSelectedItems')
-      .mockReturnValue([{ id: 1 }, { id: 2 }])
 
-    component.setCustomFieldValues()
+    component.setCustomFieldValues({
+      itemsToAdd: [{ id: 1 }, { id: 2 }],
+      itemsToRemove: [],
+    } as any)
 
     expect(modal.componentInstance.customFields).toEqual(component.customFields)
-    expect(modal.componentInstance.selectedFieldsIds).toEqual([1, 2])
+    expect(modal.componentInstance.fieldsToAddIds).toEqual([1, 2])
     expect(modal.componentInstance.documents).toEqual([3, 4])
 
     modal.componentInstance.failed.emit()

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts

@@ -828,7 +828,7 @@ export class BulkEditorComponent
       })
   }
 
-  public setCustomFieldValues() {
+  public setCustomFieldValues(changedCustomFields: ChangedItems) {
     const modal = this.modalService.open(CustomFieldsBulkEditDialogComponent, {
       backdrop: 'static',
       size: 'lg',
@@ -836,9 +836,14 @@ export class BulkEditorComponent
     const dialog =
       modal.componentInstance as CustomFieldsBulkEditDialogComponent
     dialog.customFields = this.customFields
-    dialog.selectedFieldsIds = this.customFieldsSelectionModel
+    dialog.fieldsToAddIds = changedCustomFields.itemsToAdd.map(
-      .getSelectedItems()
+      (item) => item.id
-      .map((item) => item.id)
+    )
+    dialog.fieldsToRemoveIds = changedCustomFields.itemsToRemove.map(
+      (item) => item.id
+    )
+    console.log(dialog.fieldsToRemoveIds, this.customFieldsSelectionModel)
+
     dialog.documents = Array.from(this.list.selected)
     dialog.succeeded.subscribe((result) => {
       this.toastService.showInfo(

src-ui/src/app/components/document-list/bulk-editor/custom-fields-bulk-edit-dialog/custom-fields-bulk-edit-dialog.component.html

@@ -8,13 +8,13 @@
         <pngx-input-select i18n-title title=""
             multiple="true"
             [items]="customFields"
-            [(ngModel)]="selectedFieldsIds"
+            [(ngModel)]="fieldsToAddIds"
             placeholder="Select custom fields"
             i18n-placeholder
             [ngModelOptions]="{standalone: true}">
         </pngx-input-select>
         <div class="d-flex flex-column gap-2">
-            @for (field of selectedFields; track field.id) {
+            @for (field of fieldsToAdd; track field.id) {
                 <div class="d-flex gap-2">
                     @switch (field.data_type) {
                         @case (CustomFieldDataType.String) {
@@ -87,6 +87,9 @@
         </div>
     </div>
     <div class="modal-footer">
+        @if (fieldsToRemoveIds.length) {
+            <p class="mb-0 small" i18n>This operation will also remove {{fieldsToRemoveIds.length}} custom field(s) from the selected documents.</p>
+        }
         <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
         <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
     </div>

src-ui/src/app/components/document-list/bulk-editor/custom-fields-bulk-edit-dialog/custom-fields-bulk-edit-dialog.component.spec.ts

@@ -40,7 +40,7 @@ describe('CustomFieldsBulkEditDialogComponent', () => {
       { id: 1, name: 'Field 1', data_type: CustomFieldDataType.String },
       { id: 2, name: 'Field 2', data_type: CustomFieldDataType.Integer },
     ]
-    component.selectedFieldsIds = [1, 2]
+    component.fieldsToAddIds = [1, 2]
     expect(component.form.contains('1')).toBeTruthy()
     expect(component.form.contains('2')).toBeTruthy()
   })
@@ -52,7 +52,7 @@ describe('CustomFieldsBulkEditDialogComponent', () => {
     const successSpy = jest.spyOn(component.succeeded, 'emit')
 
     component.documents = [1, 2]
-    component.selectedFieldsIds = [1]
+    component.fieldsToAddIds = [1]
     component.form.controls['1'].setValue('Value 1')
     component.save()
 
@@ -67,7 +67,7 @@ describe('CustomFieldsBulkEditDialogComponent', () => {
     const failSpy = jest.spyOn(component.failed, 'emit')
 
     component.documents = [1, 2]
-    component.selectedFieldsIds = [1]
+    component.fieldsToAddIds = [1]
     component.form.controls['1'].setValue('Value 1')
     component.save()
 
@@ -82,8 +82,8 @@ describe('CustomFieldsBulkEditDialogComponent', () => {
   })
 
   it('should remove field from selected fields', () => {
-    component.selectedFieldsIds = [1, 2]
+    component.fieldsToAddIds = [1, 2]
     component.removeField(1)
-    expect(component.selectedFieldsIds).toEqual([2])
+    expect(component.fieldsToAddIds).toEqual([2])
   })
 })

src-ui/src/app/components/document-list/bulk-editor/custom-fields-bulk-edit-dialog/custom-fields-bulk-edit-dialog.component.ts

@@ -23,23 +23,25 @@ export class CustomFieldsBulkEditDialogComponent {
 
   public customFields: CustomField[] = []
 
-  private _selectedFields: CustomField[] = [] // static object for change detection
+  private _fieldsToAdd: CustomField[] = [] // static object for change detection
-  public get selectedFields() {
+  public get fieldsToAdd() {
-    return this._selectedFields
+    return this._fieldsToAdd
   }
 
-  private _selectedFieldsIds: number[] = []
+  private _fieldsToAddIds: number[] = []
-  public get selectedFieldsIds() {
+  public get fieldsToAddIds() {
-    return this._selectedFieldsIds
+    return this._fieldsToAddIds
   }
-  public set selectedFieldsIds(ids: number[]) {
+  public set fieldsToAddIds(ids: number[]) {
-    this._selectedFieldsIds = ids
+    this._fieldsToAddIds = ids
-    this._selectedFields = this.customFields.filter((field) =>
+    this._fieldsToAdd = this.customFields.filter((field) =>
-      this._selectedFieldsIds.includes(field.id)
+      this._fieldsToAddIds.includes(field.id)
     )
     this.initForm()
   }
 
+  public fieldsToRemoveIds: number[] = []
+
   public form: FormGroup = new FormGroup({})
 
   public documents: number[]
@@ -51,7 +53,7 @@ export class CustomFieldsBulkEditDialogComponent {
 
   initForm() {
     this.form = new FormGroup({})
-    this._selectedFieldsIds.forEach((field_id) => {
+    this._fieldsToAddIds.forEach((field_id) => {
       this.form.addControl(field_id.toString(), new FormControl(null))
     })
   }
@@ -60,7 +62,7 @@ export class CustomFieldsBulkEditDialogComponent {
     this.documentService
       .bulkEdit(this.documents, 'modify_custom_fields', {
         add_custom_fields: this.form.value,
-        remove_custom_fields: [],
+        remove_custom_fields: this.fieldsToRemoveIds,
       })
       .pipe(first())
       .subscribe({
@@ -79,8 +81,6 @@ export class CustomFieldsBulkEditDialogComponent {
   }
 
   public removeField(fieldId: number) {
-    this.selectedFieldsIds = this._selectedFieldsIds.filter(
+    this.fieldsToAddIds = this._fieldsToAddIds.filter((id) => id !== fieldId)
-      (id) => id !== fieldId
-    )
   }
 }