@propbinder/mobile-design 0.2.47 → 0.2.50

package/src/components/post-detail-modal/ds-mobile-post-detail-modal.ts

@@ -0,0 +1,722 @@
+import { Component, signal, computed, CUSTOM_ELEMENTS_SCHEMA, Input, ViewChild, ElementRef, OnInit, AfterViewInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Keyboard } from '@capacitor/keyboard';
+import { DsIconComponent, DsIconButtonComponent } from '@propbinder/design-system';
+import { DsAvatarComponent } from '@propbinder/design-system';
+import { PostContentComponent, PostTextComponent, PostMediaComponent, PostActionsComponent, ActionLikeComponent, ActionCommentComponent } from '../interactive-list-item-post';
+import { DsMobileCommentComponent } from '../comment/ds-mobile-comment';
+import { DsMobileLightboxService, LightboxAuthor } from '../lightbox';
+import { DsMobileBottomSheetService, DsMobileCommentActionsBottomSheetComponent, CommentActionResult } from '../bottom-sheet';
+import { DsMobileModalBaseComponent } from '../modal-base/ds-mobile-modal-base';
+import { DsMobileEmptyStateComponent } from '../empty-state';
+import { DsMobileSectionComponent } from '../section';
+
+/**
+ * Post data interface for the modal
+ *
+ * Represents a post with its content, author info, and comments.
+ * Use this interface to map your API response data to the component.
+ *
+ * @example
+ * ```typescript
+ * const postData: PostDetailData = {
+ *   postId: '123',
+ *   authorName: 'John Doe',
+ *   authorRole: 'Tenant',
+ *   timestamp: '2h ago',
+ *   avatarInitials: 'JD',
+ *   content: 'Post content here...',
+ *   likeCount: 42,
+ *   commentCount: 12,
+ *   comments: [...]
+ * };
+ * ```
+ */
+export interface PostDetailData {
+  /** Unique post identifier */
+  postId: string;
+  /** Post author name */
+  authorName: string;
+  /** Author role (e.g., 'Tenant', 'Manager') */
+  authorRole: string;
+  /** Post timestamp (e.g., '2h ago', 'Yesterday') */
+  timestamp: string;
+  /** Author avatar initials (1-2 letters) */
+  avatarInitials?: string;
+  /** Avatar display type */
+  avatarType?: 'photo' | 'initials';
+  /** Author avatar image URL */
+  avatarSrc?: string;
+  /** Post text content */
+  content: string;
+  /** Optional post image URL */
+  imageSrc?: string;
+  /** Image alt text */
+  imageAlt?: string;
+  /** Whether the current user has liked this post */
+  isLiked?: boolean;
+  /** Number of likes */
+  likeCount?: number;
+  /** Number of comments */
+  commentCount?: number;
+  /** Array of comments */
+  comments?: CommentData[];
+  /** Auto-focus comment input when modal opens */
+  focusComment?: boolean;
+}
+
+/**
+ * Comment data interface
+ *
+ * Represents a single comment on a post.
+ *
+ * @example
+ * ```typescript
+ * const comment: CommentData = {
+ *   authorName: 'Jane Smith',
+ *   authorRole: 'Tenant',
+ *   timestamp: '1h ago',
+ *   avatarInitials: 'JS',
+ *   content: 'Great post!',
+ *   isLiked: false,
+ *   likeCount: 5,
+ *   isOwnComment: false
+ * };
+ * ```
+ */
+export interface CommentData {
+  /** Unique comment identifier */
+  id?: string;
+  /** Comment author name */
+  authorName: string;
+  /** Author role */
+  authorRole: string;
+  /** Comment timestamp */
+  timestamp: string;
+  /** Author avatar initials */
+  avatarInitials: string;
+  /** Comment text content */
+  content: string;
+  /** Whether the current user has liked this comment */
+  isLiked?: boolean;
+  /** Number of likes on this comment */
+  likeCount?: number;
+  /** Whether this comment belongs to the current user */
+  isOwnComment?: boolean;
+}
+
+/**
+ * DsMobilePostDetailModalComponent
+ *
+ * Modal wrapper for displaying post details with comments.
+ * Follows the same pattern as the lightbox modal for consistent behavior.
+ *
+ * Features:
+ * - Full post content display
+ * - Comments section
+ * - Image lightbox integration
+ * - Native modal controls (close, swipe down)
+ * - Safe area support
+ *
+ * This component is typically not used directly - use DsMobilePostDetailModalService instead.
+ *
+ * @example
+ * ```typescript
+ * // Don't instantiate directly - use the service:
+ * constructor(private postModal: DsMobilePostDetailModalService) {}
+ *
+ * openPost() {
+ *   this.postModal.open({
+ *     postId: '123',
+ *     authorName: 'John Doe',
+ *     content: 'Post content...'
+ *   });
+ * }
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-post-detail-modal',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    DsIconComponent,
+    DsIconButtonComponent,
+    DsAvatarComponent,
+    PostTextComponent,
+    PostMediaComponent,
+    ActionLikeComponent,
+    ActionCommentComponent,
+    DsMobileCommentComponent,
+    DsMobileModalBaseComponent,
+    DsMobileEmptyStateComponent,
+    DsMobileSectionComponent
+  ],
+  styleUrls: ['../shared/mobile-common.css', './ds-mobile-post-detail-modal.css'],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `
+    <ds-mobile-modal-base
+      [loading]="loading"
+      [error]="error"
+      [headerTitle]="post().authorName"
+      [headerMeta]="post().authorRole + ' · ' + post().timestamp"
+      [hasFixedBottom]="true"
+      [enableKeyboardHandling]="true"
+      closeButtonLabel="Luk opslag"
+    >
+      <!-- Header Avatar -->
+      <ds-avatar header-leading [initials]="post().avatarInitials || ''" [type]="post().avatarType || 'initials'" [src]="post().avatarSrc || ''" size="md" />
+      
+      <!-- Post Section -->
+      <ds-mobile-section>
+        <div class="post-content-only">
+          <post-text>
+            <div [innerHTML]="post().content"></div>
+          </post-text>
+          @if (post().imageSrc) {
+          <post-media>
+            <img [src]="post().imageSrc" [alt]="post().imageAlt || 'Post image'" class="clickable-image" (click)="openImageLightbox()" />
+          </post-media>
+          }
+        </div>
+
+        <!-- Post actions -->
+        <div class="post-actions">
+          <action-like 
+            [active]="post().isLiked || false" 
+            [count]="post().likeCount || 0" 
+            (likeClick)="handlePostLikeToggle($event)" 
+          />
+          <action-comment [count]="post().commentCount || 0" (commentClick)="focusCommentInput()" />
+        </div>
+      </ds-mobile-section>
+
+      <!-- Comments Section -->
+      <ds-mobile-section 
+        [headline]="post().comments && post().comments!.length > 0 ? (post().comments!.length + ' ' + (post().comments!.length === 1 ? 'reply' : 'replies')) : ''">
+        @if (post().comments && post().comments!.length > 0) {
+        <div class="comments-list">
+          @for (comment of post().comments!; track comment.id) {
+          <ds-mobile-comment
+            [authorName]="comment.authorName"
+            [authorRole]="comment.authorRole"
+            [timestamp]="comment.timestamp"
+            [avatarInitials]="comment.avatarInitials"
+            [content]="comment.content"
+            [isLiked]="comment.isLiked || false"
+            [likeCount]="comment.likeCount || 0"
+            [clickable]="true"
+            [isOwnComment]="comment.isOwnComment || false"
+            (likeToggled)="handleCommentLikeToggle(comment, $event)"
+            (replyClick)="handleReply(comment.authorName, comment.content)"
+            (editClick)="handleEditComment(comment)"
+            (longPress)="handleCommentLongPress(comment.authorName, comment.content, comment.isOwnComment || false)" />
+          }
+        </div>
+        } @else {
+        <!-- Empty State -->
+        <ds-mobile-empty-state
+          [imageSrc]="'/Assets/empty-state-inquiry.svg'"
+          [imageAlt]="'Ingen kommentarer endnu'"
+          [title]="'Ingen svar endnu'"
+          [description]="'Vær den første til at svare på dette opslag'">
+        </ds-mobile-empty-state>
+        }
+      </ds-mobile-section>
+      
+      <!-- Fixed comment composer -->
+      <div fixed-bottom>
+        <div class="comment-composer">
+          <!-- Edit indicator -->
+          @if (editingComment()) {
+          <div class="edit-indicator">
+            <div class="edit-indicator-content">
+              <ds-icon name="remixEditLine" size="16px" />
+              <span class="edit-text">Redigerer kommentar</span>
+            </div>
+            <button class="cancel-edit" (click)="cancelEdit()">
+              <ds-icon name="remixCloseLine" size="16px" />
+            </button>
+          </div>
+          } @else if (replyingTo()) {
+          <!-- Reply indicator -->
+          <div class="reply-indicator">
+            <div class="reply-indicator-content">
+              <ds-icon name="remixReplyLine" size="16px" />
+              <span class="reply-to-text">
+                Svarer til <span class="reply-author">{{ replyingTo()!.authorName }}</span>
+              </span>
+            </div>
+            <button class="cancel-reply" (click)="cancelReply()">
+              <ds-icon name="remixCloseLine" size="16px" />
+            </button>
+          </div>
+          }
+
+          <div class="composer-content">
+            <ds-avatar [initials]="currentUserInitials()" [type]="'initials'" size="md" />
+            <div class="composer-input-wrapper">
+              <textarea
+                #commentInput
+                class="composer-input"
+                [placeholder]="editingComment() ? 'Rediger din kommentar...' : replyingTo() ? 'Tilføj et svar...' : 'Tilføj et svar...'"
+                [ngModel]="commentText()"
+                (ngModelChange)="commentText.set($event)"
+                (input)="handleInput($event)"
+                (focus)="showKeyboard()"
+                (click)="showKeyboard()"
+                rows="1"
+              ></textarea>
+            </div>
+            <ds-icon-button
+              icon="remixCheckLine"
+              variant="primary"
+              size="sm"
+              (clicked)="submitComment()"
+              aria-label="Send kommentar"
+              [class.send-button-fixed]="true"
+              [class.show]="commentText().trim().length > 0"
+            >
+            </ds-icon-button>
+          </div>
+        </div>
+      </div>
+    </ds-mobile-modal-base>
+  `,
+})
+export class DsMobilePostDetailModalComponent implements OnInit, AfterViewInit {
+  // Post data passed from service
+  @Input() postData!: PostDetailData;
+
+  // Current user info for comment composer
+  @Input() currentUserName: string = '';
+  @Input() currentUserInitialsInput: string = '';
+
+  // State management inputs (passed to modal base)
+  @Input() loading: boolean = false;
+  @Input() error: string | undefined;
+
+  // Callback for toggling like on the main post
+  @Input() onTogglePostLike?: (payload: { postId: string; active: boolean }) => void;
+
+  // Callback for submitting a new comment
+  @Input() onSubmitComment?: (payload: { postId: string; text: string }) => void;
+
+  // Callback for liking/unliking a comment
+  @Input() onToggleCommentLike?: (payload: { commentId: string; active: boolean }) => void;
+
+  // Callback for editing a comment
+  @Input() onEditComment?: (payload: { commentId: string; newText: string }) => void;
+
+  // Callback for deleting a comment
+  @Input() onDeleteComment?: (payload: { commentId: string }) => void;
+
+  // ViewChild for comment input
+  @ViewChild('commentInput') commentInput?: ElementRef<HTMLTextAreaElement>;
+
+  // Signal for reactive post data
+  post = signal<PostDetailData>({
+    postId: '',
+    authorName: '',
+    authorRole: '',
+    timestamp: '',
+    content: '',
+    comments: [],
+  });
+
+  // Comment composer state
+  commentText = signal('');
+  currentUserInitials = signal('');
+  replyingTo = signal<{ authorName: string; content: string } | null>(null);
+  editingComment = signal<{ id?: string; authorName: string; originalContent: string; timestamp: string } | null>(null);
+
+  constructor(private lightbox: DsMobileLightboxService, private bottomSheet: DsMobileBottomSheetService) {}
+
+  ngOnInit(): void {
+    // Initialize post data from input
+    if (this.postData) {
+      this.post.set(this.postData);
+    }
+
+    // Set current user initials
+    if (this.currentUserInitialsInput) {
+      this.currentUserInitials.set(this.currentUserInitialsInput);
+    } else if (this.currentUserName) {
+      // fallback: derive from name
+      const initials = this.currentUserName
+        .trim()
+        .split(/\s+/)
+        .map((p) => p[0])
+        .join('')
+        .substring(0, 2)
+        .toUpperCase();
+      this.currentUserInitials.set(initials);
+    }
+  }
+
+  ngAfterViewInit(): void {
+    // Auto-focus comment input if requested
+    if (this.postData?.focusComment) {
+      // Small delay to ensure modal animation is complete
+      setTimeout(() => {
+        this.commentInput?.nativeElement.focus();
+        // Show keyboard on mobile
+        this.showKeyboard();
+      }, 300);
+    }
+  }
+
+  /**
+   * Show the keyboard when user interacts with input
+   */
+  showKeyboard(): void {
+    Keyboard.show().catch((e) => {
+      // console.log('Keyboard.show() not available')
+    });
+  }
+
+  /**
+   * Focus the comment input when comment icon is tapped
+   */
+  focusCommentInput(): void {
+    // Focus the input
+    this.commentInput?.nativeElement.focus();
+    // Show keyboard on mobile
+    this.showKeyboard();
+  }
+
+  /**
+   * Handle input changes for auto-resize
+   */
+  handleInput(event: Event): void {
+    const textarea = event.target as HTMLTextAreaElement;
+
+    // Auto-resize textarea
+    textarea.style.height = 'auto';
+    textarea.style.height = textarea.scrollHeight + 'px';
+  }
+
+  /**
+   * Handle reply to a comment
+   */
+  handleReply(authorName: string, content: string): void {
+    this.replyingTo.set({ authorName, content });
+    // Focus the input and show keyboard
+    setTimeout(() => {
+      this.commentInput?.nativeElement.focus();
+      this.showKeyboard();
+    }, 100);
+  }
+
+  /**
+   * Cancel reply
+   */
+  cancelReply(): void {
+    this.replyingTo.set(null);
+  }
+
+  /**
+   * Cancel edit
+   */
+  cancelEdit(): void {
+    this.editingComment.set(null);
+    this.commentText.set('');
+  }
+
+  /**
+   * Handle edit comment
+   */
+  handleEditComment(comment: CommentData): void {
+    // Clear reply state if active
+    this.replyingTo.set(null);
+
+    // Set edit state
+    this.editingComment.set({
+      id: comment.id,
+      authorName: comment.authorName,
+      originalContent: comment.content,
+      timestamp: comment.timestamp,
+    });
+
+    // Populate the input with existing content
+    this.commentText.set(comment.content);
+
+    // Focus the input, show keyboard, and auto-resize
+    setTimeout(() => {
+      if (this.commentInput?.nativeElement) {
+        const textarea = this.commentInput.nativeElement;
+        textarea.focus();
+
+        // Auto-resize textarea to fit content
+        textarea.style.height = 'auto';
+        textarea.style.height = textarea.scrollHeight + 'px';
+
+        this.showKeyboard();
+      }
+    }, 100);
+  }
+
+  /**
+   * Handle post like/unlike toggle
+   */
+  handlePostLikeToggle(ev: { active: boolean; count: number }): void {
+    const currentPost = this.post();
+    
+    // Update local state immediately for responsiveness
+    this.post.set({
+      ...currentPost,
+      isLiked: ev.active,
+      likeCount: ev.count
+    });
+
+    // Call the callback if provided
+    if (this.onTogglePostLike) {
+      this.onTogglePostLike({
+        postId: currentPost.postId,
+        active: ev.active
+      });
+    }
+  }
+
+  /**
+   * Handle comment like/unlike toggle
+   * @param comment The comment being liked/unliked
+   * @param ev Event data with active state and new count
+   */
+  handleCommentLikeToggle(comment: CommentData, ev: { active: boolean; count: number }): void {
+    // Update local state immediately for responsiveness
+    const currentPost = this.post();
+    const updatedComments = currentPost.comments?.map((c) => (c.id === comment.id ? { ...c, isLiked: ev.active, likeCount: ev.count } : c));
+
+    this.post.set({
+      ...currentPost,
+      comments: updatedComments,
+    });
+
+    // Call the callback if provided
+    if (this.onToggleCommentLike) {
+      this.onToggleCommentLike({
+        commentId: comment.id!,
+        active: ev.active,
+      });
+    }
+  }
+
+  // Note: close() method is inherited from MobileModalBase
+
+  /**
+   * Submit a comment
+   */
+  submitComment(): void {
+    const text = this.commentText().trim();
+    if (!text) return;
+
+    const currentPost = this.post();
+    const postId = currentPost.postId;
+
+    // Create new comment
+    const finalText = this.replyingTo() ? `@${this.replyingTo()!.authorName} ${text}` : text;
+
+    // Check if we're editing an existing comment
+    if (this.editingComment()) {
+      // console.log('[PostDetailModal] Updating comment:', text);
+
+      const editing = this.editingComment()!;
+
+      const updatedComments = currentPost.comments?.map((comment) => {
+        if (comment.id && editing.id && comment.id === editing.id) {
+          return {
+            ...comment,
+            content: text,
+            timestamp: 'Just now (edited)',
+          };
+        }
+        return comment;
+      });
+
+      this.post.set({
+        ...currentPost,
+        comments: updatedComments,
+      });
+
+      // Call the edit callback
+      if (this.onEditComment && editing.id) {
+        this.onEditComment({
+          commentId: editing.id,
+          newText: finalText, // or finalText if you want to include @mention
+        });
+      }
+
+      this.editingComment.set(null);
+    } else {
+      // console.log('[PostDetailModal] Submitting comment:', finalText);
+      // console.log('[PostDetailModal] onSubmitComment =', this.onSubmitComment);
+
+      const newComment: CommentData = {
+        authorName: this.currentUserName || 'Dig',
+        authorRole: 'Dig',
+        timestamp: 'Just now',
+        avatarInitials: this.currentUserInitials(),
+        content: finalText,
+        isLiked: false,
+        likeCount: 0,
+        isOwnComment: true,
+      };
+
+      // Add comment to the list
+      const updatedComments = [...(currentPost.comments || []), newComment];
+
+      this.post.set({
+        ...currentPost,
+        comments: updatedComments,
+        commentCount: updatedComments.length,
+      });
+
+      // Clear reply state
+      this.replyingTo.set(null);
+    }
+
+    // Clear the input
+    this.commentText.set('');
+
+    if (this.commentInput?.nativeElement) {
+      // Reset textarea height to initial state
+      this.commentInput.nativeElement.style.height = 'auto';
+      // Blur the input to hide the keyboard
+      this.commentInput?.nativeElement.blur();
+    }
+
+    // Hide keyboard explicitly
+    Keyboard.hide().catch(() => {});
+
+    // In a real app, you would also send this to your backend
+    // this.commentService.addComment(currentPost.postId, text);
+    if (this.onSubmitComment) {
+      this.onSubmitComment({ postId, text: finalText });
+    }
+  }
+
+  /**
+   * Open image in lightbox
+   */
+  openImageLightbox(): void {
+    const postData = this.post();
+
+    if (!postData.imageSrc) return;
+
+    const authorMeta: LightboxAuthor = {
+      name: postData.authorName,
+      role: postData.authorRole,
+      avatarInitials: postData.avatarInitials || '',
+      avatarType: postData.avatarType || 'initials',
+      avatarSrc: postData.avatarSrc || '',
+      timestamp: postData.timestamp,
+    };
+
+    this.lightbox.open({
+      images: [
+        {
+          type: 'image',
+          src: postData.imageSrc,
+          alt: postData.imageAlt || 'Post image',
+          title: postData.imageAlt || '',
+          description: postData.content,
+          isLiked: postData.isLiked || false,
+          likeCount: postData.likeCount || 0,
+          commentCount: postData.commentCount || 0,
+        },
+      ],
+      author: authorMeta,
+      enableZoom: true,
+      showControls: false,
+      showInfo: true,
+    });
+  }
+
+  /**
+   * Handle long press on a comment to show action sheet
+   */
+  async handleCommentLongPress(authorName: string, content: string, isOwnComment: boolean): Promise<void> {
+    const sheet = await this.bottomSheet.create({
+      component: DsMobileCommentActionsBottomSheetComponent,
+      componentProps: {
+        isOwnContent: isOwnComment,
+      },
+      breakpoints: [0, 1],
+      initialBreakpoint: 1,
+      handle: true,
+      backdropDismiss: true,
+      cssClass: 'auto-height',
+    });
+
+    const result = await sheet.onWillDismiss();
+
+    if (result.role === 'select' && result.data) {
+      const action = (result.data as CommentActionResult).action;
+      const currentPost = this.post();
+
+      switch (action) {
+        case 'like':
+          // console.log('Like comment by', authorName);
+          let toggledCommentId: string | null = null;
+          let newActive = false;
+          // Update the comment like state locally
+          const updatedComments = currentPost.comments?.map((comment) => {
+            if (comment.authorName === authorName && comment.content === content) {
+              newActive = !comment.isLiked;
+              toggledCommentId = comment.id!;
+
+              return {
+                ...comment,
+                isLiked: newActive,
+                likeCount: newActive ? (comment.likeCount || 0) + 1 : Math.max(0, (comment.likeCount || 0) - 1),
+              };
+            }
+            return comment;
+          });
+
+          this.post.set({ ...currentPost, comments: updatedComments });
+
+          // Call the like callback
+          if (toggledCommentId && this.onToggleCommentLike) {
+            this.onToggleCommentLike({
+              commentId: toggledCommentId,
+              active: newActive,
+            });
+          }
+          break;
+        case 'reply':
+          // console.log('Reply to comment by', authorName);
+          this.handleReply(authorName, content);
+          break;
+        case 'edit':
+          // console.log('Edit comment by', authorName);
+          // Find the full comment data to get timestamp
+          const commentToEdit = currentPost.comments?.find((comment) => comment.authorName === authorName && comment.content === content);
+          if (commentToEdit) {
+            this.handleEditComment(commentToEdit);
+          }
+          break;
+        case 'delete':
+          // console.log('Delete comment by', authorName);
+          // Show confirmation before deleting
+          if (confirm('Are you sure you want to delete this comment?')) {
+            const commentToDelete = currentPost.comments?.find((comment) => comment.authorName === authorName && comment.content === content);
+            const updatedCommentsAfterDelete = currentPost.comments?.filter((comment) => !(comment.authorName === authorName && comment.content === content));
+            this.post.set({
+              ...currentPost,
+              comments: updatedCommentsAfterDelete,
+              commentCount: updatedCommentsAfterDelete?.length || 0,
+            });
+
+            // Call the delete callback
+            if (commentToDelete?.id && this.onDeleteComment) {
+              this.onDeleteComment({ commentId: commentToDelete.id });
+            }
+          }
+          break;
+      }
+    }
+  }
+}