Show ressource change history issue223

desktop/src/app.scss

@@ -326,6 +326,14 @@ select.form-control:not([size]):not([multiple]) {
   overflow: hidden;
 }
 
+.history-modal-content .modal-content {
+  user-select: none;
+  width: fit-content;
+
+}
+
+
+
 .modal-dialog:not(.modal-dialog-centered) {
   top: 14px;
 }

desktop/src/app/components/docedit/core/edit-form.component.ts

@@ -50,9 +50,8 @@ export class EditFormComponent implements AfterViewInit, OnChanges {
         if (!this.scrollTargetField) this.focusFirstInputElement();
     }
 
-
     ngOnChanges() {
-
+        
         if (isUndefinedOrEmpty(this.originalGroups)) return;
 
         this.groups = [];
@@ -65,7 +64,7 @@ export class EditFormComponent implements AfterViewInit, OnChanges {
 
 
     public getLabel(group: Group): string {
-
+       
         return group.name === 'conflicts'
             ? $localize `:@@docedit.group.conflicts:Konflikte`
             : this.labels.get(group);

desktop/src/app/components/docedit/core/edit-form.html

@@ -16,11 +16,10 @@
                     </a>
                 </li>
             </ul>
-        </div>
-
+        </div>        
         <div class="col-md-9 forms-container">
             <div id="{{activeGroup}}-group" class="scrollable-group"
-                 *ngIf="activeGroup !== 'conflicts' && activeGroup !== 'images'">
+                 *ngIf="activeGroup !== 'conflicts' && activeGroup !== 'images' && activeGroup !== 'changes'">
                 <edit-form-group [document]="document"
                                  [originalDocument]="originalDocument"
                                  [fieldDefinitions]="getFields(activeGroup)"
@@ -29,7 +28,6 @@
                                  [scrollTargetField]="scrollTargetField">
                 </edit-form-group>
             </div>
-
             <div *ngIf="activeGroup === 'conflicts'" id="docedit-conflicts-tab">
                 <docedit-conflicts-tab [document]="document"
                                        [inspectedRevisions]="inspectedRevisions">

desktop/src/app/components/docedit/docedit.component.ts

@@ -14,8 +14,7 @@ import { ConflictDeletedModalComponent } from './dialog/conflict-deleted-modal.c
 import { DuplicateModalComponent } from './dialog/duplicate-modal.component';
 import { EditSaveDialogComponent } from '../widgets/edit-save-dialog.component';
 import { MessagesConversion } from './messages-conversion';
-
-
+import { ChangesHistoryModalComponent } from '../widgets/changes-history-modal.component';
 @Component({
     selector: 'detail-modal',
     templateUrl: './docedit.html',
@@ -207,6 +206,16 @@ export class DoceditComponent {
         }
     }
 
+
+    public showChangeHistory() {
+        const modalRef: NgbModalRef = this.modalService.open( 
+            ChangesHistoryModalComponent, 
+            { animation: false, backdrop: 'static', keyboard: false,  windowClass : "history-modal-content" }
+        );
+
+        modalRef.componentInstance.document = this.documentHolder.clonedDocument;
+    }
+
 
     private updateFields() {
 

desktop/src/app/components/docedit/docedit.html

@@ -22,6 +22,14 @@
             </div>
 
             <div>
+                <div class="btn-group" id="show-changes-history">
+                    <button class="btn btn-secondary"
+                            id="document-edit-button-show-changes-history"                            
+                            (click)="showChangeHistory()">
+                        <span class="mdi mdi-history"></span>                
+                        <span class="button-label" i18n="@@buttons.history">Änderungshistorie</span>
+                    </button>
+                </div>
                 <div class="btn-group" id="save-button-group">
                     <button class="btn btn-success disabled pull-right"
                             id="document-edit-button-save-document"

desktop/src/app/components/docedit/docedit.module.ts

@@ -72,7 +72,7 @@ import { LiteratureEntryModalComponent } from './core/forms/array-field/literatu
         MessagesModule,
         WidgetsModule,
         ImageGridModule,
-        ImageRowModule
+        ImageRowModule    
     ],
     declarations: [
         ConflictDeletedModalComponent,

desktop/src/app/components/docedit/docedit.scss

@@ -106,6 +106,7 @@
     outline: none;
   }
 
+  #document-edit-button-show-changes-history,
   #document-edit-button-save-document,
   #document-edit-button-goto-view,
   #document-edit-button-dropdown {
@@ -116,6 +117,11 @@
     color: #fff;
   }
 
+  #document-edit-button-show-changes-history {
+    margin-right: 7px;
+  }
+
+
   #document-edit-button-goto-view {
     margin-left: 7px;
   }

desktop/src/app/components/resources/map/list/sidebar-list.component.ts

@@ -12,7 +12,7 @@ import { MenuContext } from '../../../../services/menu-context';
 import { Menus } from '../../../../services/menus';
 import { ComponentHelpers } from '../../../component-helpers';
 import { WarningsService } from '../../../../services/warnings/warnings-service';
-
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
     selector: 'sidebar-list',
@@ -42,6 +42,7 @@ export class SidebarListComponent extends BaseList implements AfterViewInit, OnC
 
     constructor(private navigationService: NavigationService,
                 private warningsService: WarningsService,
+                private modalService: NgbModal,
                 resourcesComponent: ResourcesComponent,
                 loading: Loading,
                 viewFacade: ViewFacade,
@@ -147,6 +148,9 @@ export class SidebarListComponent extends BaseList implements AfterViewInit, OnC
             case 'move':
                 await this.resourcesComponent.moveDocuments(this.contextMenu.documents as Array<FieldDocument>);
                 break;
+            case 'show-history':
+                await this.resourcesComponent.showHistory(this.selectedDocument);
+                break;
             case 'delete':
                 await this.resourcesComponent.deleteDocument(this.contextMenu.documents as Array<FieldDocument>);
                 break;

desktop/src/app/components/resources/resources.component.ts

@@ -21,6 +21,7 @@ import { MsgWithParams } from '../messages/msg-with-params';
 import { QrCodeEditorModalComponent } from './actions/edit-qr-code/qr-code-editor-modal.component';
 import { StoragePlaceScanner } from './actions/scan-storage-place/storage-place-scanner';
 import { WarningsService } from '../../services/warnings/warnings-service';
+import { ChangesHistoryModalComponent } from '../widgets/changes-history-modal.component';
 
 
 @Component({
@@ -193,22 +194,12 @@ export class ResourcesComponent implements OnDestroy {
 
     public async editQRCode(document: Document) {
 
-        try {
-            this.menuService.setContext(MenuContext.QR_CODE_EDITOR);
+        this.initModal(document, QrCodeEditorModalComponent, MenuContext.QR_CODE_EDITOR)
+    }
 
-            const modalRef: NgbModalRef = this.modalService.open(
-                QrCodeEditorModalComponent,
-                { animation: false, backdrop: 'static', keyboard: false }
-            );
-            modalRef.componentInstance.document = document;
-            await modalRef.componentInstance.initialize();
-            AngularUtility.blurActiveElement();
-            await modalRef.result;
-        } catch (err) {
-            console.error(err);
-        } finally {
-            this.menuService.setContext(MenuContext.DEFAULT);
-        }
+    public async showHistory(document: Document) {
+
+        this.initModal(document, ChangesHistoryModalComponent, MenuContext.HISTORY_MODAL)
     }
 
 
@@ -449,4 +440,23 @@ export class ResourcesComponent implements OnDestroy {
             await this.routingService.jumpToResource(movedDocuments[0], false);
         }
     }
+
+    private async initModal(document: Document, component, menuContext){
+
+        try {
+            this.menuService.setContext(menuContext);
+            const modalRef: NgbModalRef = this.modalService.open(
+                component,
+                { animation: false, backdrop: 'static', keyboard: false}
+            );
+            modalRef.componentInstance.document = document;
+            await modalRef.componentInstance.initialize();
+            AngularUtility.blurActiveElement();
+            await modalRef.result;
+        } catch (err) {
+            console.error(err);
+        } finally {
+            this.menuService.setContext(MenuContext.DEFAULT);
+        }
+    }
 }

desktop/src/app/components/resources/widgets/resources-context-menu.component.ts

@@ -8,7 +8,7 @@ import { UtilTranslations } from '../../../util/util-translations';
 
 
 export type ResourcesContextMenuAction = 'edit'|'move'|'delete'|'warnings'|'edit-qr-code'|'edit-images'
-    |'scan-storage-place'|'create-polygon'|'create-line-string'|'create-point'|'edit-geometry';
+    |'scan-storage-place'|'create-polygon'|'create-line-string'|'create-point'|'edit-geometry'|'show-history';
 
 
 @Component({
@@ -49,6 +49,7 @@ export class ResourcesContextMenuComponent implements OnChanges {
     public areAnyOptionsAvailable(): boolean {
 
         return this.isDeleteOptionAvailable()
+            || this.isShowHistoryOptionAvailable()
             || this.isEditOptionAvailable()
             || this.isCreateGeometryOptionAvailable()
             || this.isEditGeometryOptionAvailable()
@@ -79,6 +80,10 @@ export class ResourcesContextMenuComponent implements OnChanges {
             && (!this.isReadonly() || !this.isTypeResource());
     }
 
+    public isShowHistoryOptionAvailable(): boolean {
+
+        return this.contextMenu.documents.length === 1 && !this.isReadonly();
+    }
 
     public isWarningsOptionAvailable(): boolean {
 

desktop/src/app/components/resources/widgets/resources-context-menu.html

@@ -39,6 +39,12 @@
         <span class="mdi mdi-file-tree"></span>
         <span class="dropdown-entry-label" i18n="@@resources.contextMenu.move">Verschieben</span>
     </div>
+    <div *ngIf="isShowHistoryOptionAvailable()"
+        id="context-menu-show-history-button" class="dropdown-item" 
+        (click)="selectAction('show-history')">
+        <span class="mdi mdi-history"></span>
+        <span class="dropdown-entry-label" i18n="@@resources.contextMenu.history">Änderungshistorie</span>
+    </div>
     <div *ngIf="isDeleteOptionAvailable()"
          id="context-menu-delete-button" class="dropdown-item" (click)="selectAction('delete')">
         <span class="mdi mdi-delete"></span>

desktop/src/app/components/widgets/changes-history-modal.component.ts

@@ -0,0 +1,47 @@
+import { Component} from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { Document } from 'idai-field-core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+    selector: 'changes-history-modal',
+    imports: [CommonModule],
+    templateUrl: './changes-history-modal.html',
+    styleUrls: ['./changes-history-modal.scss']
+})
+
+export class ChangesHistoryModalComponent {
+
+    public escapeKeyPressed: boolean;
+    public document: Document;
+
+    constructor( public activeModal: NgbActiveModal,
+    ) {}
+
+
+    public async onKeyDown(event: KeyboardEvent) {
+        if (event.key === 'Escape' && !this.escapeKeyPressed) {
+            this.activeModal.dismiss('cancel');
+        }
+
+    }
+
+
+    public async onKeyUp(event: KeyboardEvent) {
+        if (event.key === 'Escape') this.escapeKeyPressed = false;
+    }
+
+    public async initialize() {
+        // TODO remove this function  ( called in private function initModal() ) 
+         1
+    }
+
+    public formatDateTime( date: string | Date, locale: string = 'de-DE' ) { 
+        return new Date(date).toLocaleString(locale);
+    }
+
+    public sortModificationsBy(prop: string) {
+        return this.document.modified.sort((a, b) => a[prop] < b[prop] ? 1 : a[prop] === b[prop] ? 0 : -1);
+      }
+
+}

desktop/src/app/components/widgets/changes-history-modal.html

@@ -0,0 +1,33 @@
+<div class="modal-header">
+    <h5  class="modal-title" i18n="@@widgets.historyModal.header">Änderunghistorie</h5>
+</div>
+
+<div class="modal-body">
+    <p  i18n="@@document.created.information.text">Die Ressource <b>{{document.resource.identifier}}</b>  wurde vom Benutzer  {{document.created.user}} am {{formatDateTime(document.created.date)}} erstellt.</p>
+    <div id="changes-history-modal-body" class="modal-body">
+        <div *ngIf="document.modified[0].user">
+            <div id="list">               
+                <div id="list-header">  
+                    <div class="list-header-field" i18n="@@changes.list.colnames.date">Änderungsdatum</div>
+                    <div class="list-header-field" i18n="@@changes.list.colnames.user">Benutzer</div>
+                </div>            
+                <div class="list-body">
+                    <!-- <div *ngFor="let modification of document.modified.reverse()"  -->
+                    <!-- <div *ngFor="let modification of document.modified" -->
+                      <div *ngFor="let modification of sortModificationsBy('date')"
+                        class = "list-row">                    
+                        <div class= "list-body-field" [textContent]="formatDateTime(modification.date)"></div>
+                        <div class= "list-body-field" [textContent]="modification.user"></div>      
+                    </div> 
+                </div>
+            </div>
+        </div>    
+    </div>   
+</div>
+
+<div class="modal-footer">
+    <button id="overview-save-confirmation-modal-cancel-button" type="button" class="btn btn-secondary"
+            (click)="activeModal.dismiss('cancel')" i18n="@@buttons.cancel">Abbrechen</button>
+</div>
+
+

desktop/src/app/components/widgets/changes-history-modal.scss

@@ -0,0 +1,38 @@
+#list {
+  background: white;
+  margin-bottom: -20px;
+
+  #list-header {
+    user-select: none;
+    display: grid;
+    grid-template-columns: 230px 100px 250px;
+    font-size: 16px;
+    font-weight: 500;    
+
+    .list-header-field {
+      padding: 5px 5px 5px 10px;
+      color: rgb(73, 80, 87);
+      border: solid 1px rgb(221, 221, 221);
+    }
+  }
+
+  .list-body{    
+    max-height: 66vh;
+    overflow: auto;
+  }
+
+  .list-row {
+    user-select: none;
+    display: grid;
+    grid-template-columns: 230px 100px 250px;
+    font-size: 16px;
+    font-weight: 500;
+
+    .list-body-field {
+      padding: 5px 5px 0px 10px;
+      color: rgb(73, 80, 87);
+      border: solid 1px rgb(221, 221, 221);
+      border-top: none; 
+    }
+  }
+}

desktop/src/app/services/menu-context.ts

@@ -1,6 +1,6 @@
 export type MenuContext = 'default'|'docedit'|'modal'|'projects'|'configuration'|'geometryEdit'|'mapLayersEdit'
     |'georeferenceEdit'|'configurationEdit'|'configurationValuelistEdit'|'configurationSubfieldEdit'
-    |'configurationModal'|'configurationManagement'|'warnings'|'qrCodeEditor'|'qrCodeScanner'|'printSettingsModal';
+    |'configurationModal'|'configurationManagement'|'warnings'|'qrCodeEditor'|'qrCodeScanner'|'historyModal'|'printSettingsModal';
 
 
 /**
@@ -22,6 +22,7 @@ export module MenuContext {
     export const CONFIGURATION_MANAGEMENT = 'configurationManagement';
     export const WARNINGS = 'warnings';
     export const QR_CODE_EDITOR = 'qrCodeEditor';
+    export const HISTORY_MODAL = 'historyModal';
     export const QR_CODE_SCANNER = 'qrCodeScanner';
     export const PRINT_SETTINGS_MODAL = 'printSettingsModal';
 }