Ush 1521- Adding post-lock-functionality v1 (#1365)

* Renaming lock-icon to a more suitable name

* Preparing post-service and post-interface for locks

* Adding lock to post-head

* Locking and unlocking post when editing

* Hiding bulk-actions checkbox if post is locked

apps/web-mzima-client/src/app/core/enums/icons.ts

@@ -74,5 +74,5 @@ export enum Icons {
   infoCircle = 'info-circle',
   thumbUp = 'thumb-up',
   ellipses = 'ellipses',
-  https = 'https',
+  lock = 'lock',
 }

apps/web-mzima-client/src/app/feed/feed.component.html

@@ -250,7 +250,7 @@ <h3 class="menu-title">{{ 'app.mark_as' | translate }}</h3>
                 (refresh)="refreshPost(post)"
                 (deleted)="postDeleted([post])"
                 (click)="showPostDetails(post)"
-                [selectable]="isBulkOptionsVisible"
+                [selectable]="isBulkOptionsVisible && !isLocked(post)"
                 [isChecked]="isPostChecked(post)"
                 (statusChanged)="postStatusChanged()"
                 (selected)="isPostSelected($event, post)"

apps/web-mzima-client/src/app/feed/feed.component.ts

@@ -791,7 +791,9 @@ export class FeedComponent extends MainViewComponent implements OnInit, OnDestro
       });
     }
   }
-
+  public isLocked(post: PostResult) {
+    return this.postsService.isPostLockedForCurrentUser(post);
+  }
   public postStatusChanged(): void {
     this.getPosts({ params: this.params });
     this.selectedPosts = [];

apps/web-mzima-client/src/app/post/post-edit/post-edit.component.html

@@ -105,7 +105,7 @@ <h2 class="task-label">{{ task.translations[activeLanguage]?.label || task.label
                 aria-label="Field responses will be private"
                 *ngIf="field.response_private"
                 icon
-                svgIcon="https"
+                svgIcon="lock"
                 class="field__icon"
               ></mat-icon>
               {{ field?.translations[activeLanguage]?.label || field?.label }}

apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts

@@ -119,6 +119,7 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
   ) {
     super(sessionService, breakpointService);
     this.checkDesktop();
+    this.getUserData();
     this.filters = JSON.parse(
       localStorage.getItem(this.sessionService.getLocalStorageNameMapper('filters'))!,
     );
@@ -132,7 +133,6 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
       }
       if (params.get('id')) {
         this.postId = Number(params.get('id'));
-        this.postsService.lockPost(this.postId).subscribe();
         this.loadPostData(this.postId);
       }
       if (!this.formId) {
@@ -177,7 +177,12 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
       next: (post) => {
         this.formId = post.form_id;
         this.post = post;
-        this.loadSurveyData(this.formId!, post.post_content);
+        if (!this.postsService.isPostLockedForCurrentUser(this.post)) {
+          this.postsService.lockPost(this.post.id).subscribe();
+          this.loadSurveyData(this.formId!, post.post_content);
+        } else {
+          this.backNavigation();
+        }
       },
     });
   }
@@ -700,6 +705,7 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
   private updatePost(postId: number, postData: any) {
     this.postsService.update(postId, postData).subscribe({
       next: ({ result }) => {
+        this.postsService.unlockPost(postId).subscribe();
         this.eventBusService.next({
           type: EventType.UpdatedPost,
           payload: result,
@@ -789,6 +795,7 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
     }
 
     if (this.postId) {
+      this.postsService.unlockPost(this.postId).subscribe();
       this.cancel.emit();
     }
     // else {

apps/web-mzima-client/src/app/post/post-head/post-head.component.html

@@ -1,4 +1,15 @@
 <div class="post-head">
+  <div
+    class="post-lock"
+    *ngIf="isLocked"
+    matTooltipPosition="above"
+    [matTooltip]="'post.locking.locked_tooltip' | translate"
+    matTooltipClass="post-lock__tooltip"
+  >
+    <mat-icon icon svgIcon="lock" class="post-lock__icon"></mat-icon>
+    <span class="post-info__status post-info__status--draft" [data-qa]="'post_lock'">Locked</span>
+  </div>
+
   <mzima-client-button
     fill="clear"
     color="gray"
@@ -7,6 +18,7 @@
     [iconOnly]="true"
     (buttonClick)="editPost($event)"
     class="post-head__control"
+    [disabled]="isLocked"
   >
     <mat-icon icon svgIcon="edit-post" [data-qa]="'edit-post'"></mat-icon>
   </mzima-client-button>
@@ -43,6 +55,7 @@
       mat-menu-item
       (click)="addToCollection()"
       [data-qa]="'add-to-collection'"
+      [disabled]="isLocked"
     >
       <mat-icon svgIcon="collections"></mat-icon>
       {{ 'set.add_to_collection' | translate }}
@@ -54,6 +67,7 @@
         (click)="publish()"
         *ngIf="post.status !== PostStatus.Published"
         [data-qa]="'btn-publish-post'"
+        [disabled]="isLocked"
       >
         <mat-icon svgIcon="sort-up"></mat-icon>
         {{ 'post.post_actions.publish' | translate }}
@@ -63,6 +77,7 @@
         (click)="underReview()"
         *ngIf="post.status !== PostStatus.Draft"
         [data-qa]="'btn-underReview-post'"
+        [disabled]="isLocked"
       >
         {{ 'post.post_actions.put_under_review' | translate }}
       </button>
@@ -71,11 +86,18 @@
         (click)="archive()"
         *ngIf="post.status !== PostStatus.Archived"
         [data-qa]="'btn-archive-post'"
+        [disabled]="isLocked"
       >
         {{ 'post.post_actions.archive' | translate }}
       </button>
     </ng-container>
-    <button mat-menu-item *ngIf="deleteable" (click)="deletePost()" [data-qa]="'btn-delete-post'">
+    <button
+      mat-menu-item
+      *ngIf="deleteable"
+      (click)="deletePost()"
+      [data-qa]="'btn-delete-post'"
+      [disabled]="isLocked"
+    >
       {{ 'post.post_actions.delete' | translate }}
     </button>
   </mat-menu>

apps/web-mzima-client/src/app/post/post-head/post-head.component.scss

@@ -13,4 +13,19 @@
       --icon-size: 24px;
     }
   }
+  .post-lock {
+    color: var(--color-black);
+    background-color: var(--color-primary-60);
+    border-radius: 4px;
+    padding: 2px 8px;
+    display: flex;
+    align-items: baseline;
+    justify-content: center;
+    gap: 6px;
+
+    &__icon {
+      width: var(--size, 12px);
+      height: var(--size, 12px);
+    }
+  }
 }

apps/web-mzima-client/src/app/post/post-head/post-head.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { CollectionsComponent } from '../../shared/components';
@@ -20,7 +20,7 @@ import { ConfirmModalService } from '../../core/services/confirm-modal.service';
   templateUrl: './post-head.component.html',
   styleUrls: ['./post-head.component.scss'],
 })
-export class PostHeadComponent extends BaseComponent {
+export class PostHeadComponent extends BaseComponent implements OnInit {
   PostStatus = PostStatus;
   @Input() public post: PostResult | PostPropertiesInterface;
   @Input() public editable: boolean;
@@ -30,6 +30,7 @@ export class PostHeadComponent extends BaseComponent {
   @Output() refresh = new EventEmitter();
   @Output() deleted = new EventEmitter();
   @Output() statusChanged = new EventEmitter();
+  public isLocked: boolean;
 
   constructor(
     protected override sessionService: SessionService,
@@ -46,9 +47,18 @@ export class PostHeadComponent extends BaseComponent {
     this.getUserData();
   }
 
+  ngOnInit(): void {
+    this.checkLock();
+  }
+
   loadData(): void {}
 
+  checkLock() {
+    this.isLocked = this.postsService.isPostLockedForCurrentUser(this.post);
+  }
+
   addToCollection() {
+    this.postsService.lockPost(this.post.id).subscribe();
     const dialogRef = this.dialog.open(CollectionsComponent, {
       width: '100%',
       maxWidth: '768px',
@@ -58,6 +68,7 @@ export class PostHeadComponent extends BaseComponent {
 
     dialogRef.afterClosed().subscribe({
       next: (response) => {
+        this.postsService.unlockPost(this.post.id).subscribe();
         this.refresh.emit();
         response ? console.log(response) : null;
       },

apps/web-mzima-client/src/assets/locales/en.json

@@ -858,7 +858,9 @@
       "unlocked": "Post successfully unlocked",
       "unlock": "Unlock",
       "lock_broken_by_other": "Your Post has been unlocked. Your current unsaved changes will be lost.",
-      "locked_message": "The post is locked because <strong>{{ user }}</strong> is working on it right now. Try editing a different post."
+      "locked_message": "The post is locked because <strong>{{ user }}</strong> is working on it right now. Try editing a different post.",
+      "locked_tooltip": "This post is being edited by someone else. Please try again later."
+
     },
     "modify": {
       "intro": "Select survey:",

apps/web-mzima-client/src/styles/_tooltip.scss

@@ -9,7 +9,7 @@
 }
 
 .mat-tooltip {
-  font-size: 12px;
+  font-size: 16px;
   line-height: 1.3;
   max-width: 371px !important;
   margin: 0 0 0 8px !important;

libs/sdk/src/lib/models/posts.interface.ts

@@ -58,6 +58,7 @@ export interface PostPropertiesInterface {
   status?: PostStatus;
   contact?: any;
   source?: string;
+  locks?: any[];
   data_source_message_id?: string;
   allowed_privileges: string[];
 }
@@ -91,7 +92,7 @@ export interface PostResult {
   form: PostForm;
   id: number;
   locale: string;
-  lock?: string | boolean;
+  locks?: any[];
   message?: string;
   parent_id?: number;
   post_date: Date;

libs/sdk/src/lib/services/posts.service.ts

@@ -10,7 +10,7 @@ import {
   Subject,
   tap,
 } from 'rxjs';
-import { apiHelpers } from '../helpers';
+import { apiHelpers, generalHelpers } from '../helpers';
 import { EnvLoader } from '../loader';
 import {
   GeoJsonFilter,
@@ -337,6 +337,21 @@ export class PostsService extends ResourceService<any> {
     return super.delete(id, 'lock');
   }
 
+  isPostLockedForCurrentUser(post: any) {
+    const currentUser = localStorage.getItem(`${generalHelpers.CONST.LOCAL_STORAGE_PREFIX}userId`);
+    if (!currentUser) {
+      return false;
+    }
+    if (post.locks.length > 0) {
+      if (currentUser) {
+        return parseInt(currentUser) !== parseInt(post.locks[0].user_id);
+      } else {
+        return false;
+      }
+    }
+    return false;
+  }
+
   public applyFilters(filters: any, updated = true): void {
     const newFilters: any = {};
     for (const key in filters) {