Functionnal UI with All Files

src/app/view/components/list-item/list-item.component.html

@@ -0,0 +1,131 @@
+<!-- src/app/view/components/list-item/list-item.component.html -->
+<div [class]="rowClass" (click)="onRowClick()">
+
+  <!-- Edit Action -->
+  <div class="item-column actions-column">
+    <button 
+      class="action-btn edit-btn"
+      (click)="onEditClick()"
+      [disabled]="isEditing()"
+      [title]="'Edit title sheet'"
+      type="button">
+      <i class="fas fa-cog" aria-hidden="true"></i>
+    </button>
+  </div>
+
+  <!-- Last Name -->
+  <div class="item-column data-column" (click)="onCellClick('LastName', $event)">
+    @if (isFieldEditing('LastName')) {
+      <input
+        #editInput
+        type="text"
+        class="edit-input"
+        [value]="getFieldValue('LastName')"
+        (input)="onInputChange('LastName', $event)"
+        (keydown)="onInputKeyDown($event)"
+        (blur)="onInputBlur()"
+        placeholder="Last name..."
+        maxlength="50">
+    } @else {
+      <span class="cell-content" [class.empty]="!titleSheet().LastName">
+        {{ titleSheet().LastName || 'No last name' }}
+      </span>
+    }
+  </div>
+
+  <!-- First Name -->
+  <div class="item-column data-column" (click)="onCellClick('FirstName', $event)">
+    @if (isFieldEditing('FirstName')) {
+      <input
+        #editInput
+        type="text"
+        class="edit-input"
+        [value]="getFieldValue('FirstName')"
+        (input)="onInputChange('FirstName', $event)"
+        (keydown)="onInputKeyDown($event)"
+        (blur)="onInputBlur()"
+        placeholder="First name..."
+        maxlength="50">
+    } @else {
+      <span class="cell-content" [class.empty]="!titleSheet().FirstName">
+        {{ titleSheet().FirstName || 'No first name' }}
+      </span>
+    }
+  </div>
+
+  <!-- Function 1 -->
+  <div class="item-column data-column" (click)="onCellClick('Function1', $event)">
+    @if (isFieldEditing('Function1')) {
+      <input
+        #editInput
+        type="text"
+        class="edit-input"
+        [value]="getFieldValue('Function1')"
+        (input)="onInputChange('Function1', $event)"
+        (keydown)="onInputKeyDown($event)"
+        (blur)="onInputBlur()"
+        placeholder="Primary function..."
+        maxlength="100">
+    } @else {
+      <span class="cell-content" [class.empty]="!titleSheet().Function1">
+        {{ titleSheet().Function1 || 'No function' }}
+      </span>
+    }
+  </div>
+
+  <!-- Function 2 -->
+  <div class="item-column data-column" (click)="onCellClick('Function2', $event)">
+    @if (isFieldEditing('Function2')) {
+      <input
+        #editInput
+        type="text"
+        class="edit-input"
+        [value]="getFieldValue('Function2')"
+        (input)="onInputChange('Function2', $event)"
+        (keydown)="onInputKeyDown($event)"
+        (blur)="onInputBlur()"
+        placeholder="Secondary function..."
+        maxlength="100">
+    } @else {
+      <span class="cell-content" [class.empty]="!titleSheet().Function2">
+        {{ titleSheet().Function2 || 'No secondary function' }}
+      </span>
+    }
+  </div>
+
+  <!-- Control Actions -->
+  <div class="item-column controls-column">
+    <div class="control-buttons">
+      
+      <!-- Play Button -->
+      @if (!isPlaying()) {
+        <button 
+          class="control-btn play-btn"
+          (click)="onPlayClick()"
+          [title]="'Play rundown'"
+          type="button">
+          <i class="fas fa-play" aria-hidden="true"></i>
+        </button>
+      } @else {
+        <button 
+          class="control-btn stop-btn"
+          (click)="onStopClick()"
+          [title]="'Stop rundown'"
+          type="button">
+          <i class="fas fa-stop" aria-hidden="true"></i>
+        </button>
+      }
+
+      <!-- Delete Button -->
+      <button 
+        class="control-btn delete-btn"
+        (click)="onDeleteClick()"
+        [title]="'Delete title sheet'"
+        type="button">
+        <i class="fas fa-trash" aria-hidden="true"></i>
+      </button>
+      
+    </div>
+  </div>
+
+</div>