@propbinder/mobile-design 0.2.50 → 0.2.53

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

@@ -1,722 +0,0 @@
-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;
-      }
-    }
-  }
-}