FabledScribe/frontend/src/components/TaskLogSection.vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { apiGet, apiPost, apiPatch, apiDelete } from "@/api/client";
import { renderMarkdown } from "@/utils/markdown";
import type { TaskLog } from "@/types/task";

const props = defineProps<{ taskId: number }>();

const logs = ref<TaskLog[]>([]);
const newContent = ref("");
const newDuration = ref("");
const submitting = ref(false);

const editingId = ref<number | null>(null);
const editContent = ref("");
const editDuration = ref("");

function formatDate(iso: string): string {
  const d = new Date(iso);
  const datePart = d.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" });
  const timePart = d.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" });
  return `${datePart}, ${timePart}`;
}

function formatDuration(minutes: number): string {
  if (minutes < 60) return `${minutes} min`;
  const h = Math.floor(minutes / 60);
  const m = minutes % 60;
  return m > 0 ? `${h}h ${m}m` : `${h}h`;
}

async function loadLogs() {
  try {
    const data = await apiGet<{ logs: TaskLog[] }>(`/api/tasks/${props.taskId}/logs`);
    logs.value = data.logs;
  } catch {
    // silent
  }
}

async function submitLog() {
  const content = newContent.value.trim();
  if (!content || submitting.value) return;
  submitting.value = true;
  try {
    const duration = newDuration.value ? parseInt(newDuration.value) : null;
    const log = await apiPost<TaskLog>(`/api/tasks/${props.taskId}/logs`, {
      content,
      duration_minutes: isNaN(duration as number) ? null : duration,
    });
    logs.value = [...logs.value, log];
    newContent.value = "";
    newDuration.value = "";
  } catch {
    // silent
  } finally {
    submitting.value = false;
  }
}

function startEdit(log: TaskLog) {
  editingId.value = log.id;
  editContent.value = log.content;
  editDuration.value = log.duration_minutes != null ? String(log.duration_minutes) : "";
}

function cancelEdit() {
  editingId.value = null;
  editContent.value = "";
  editDuration.value = "";
}

async function saveEdit(log: TaskLog) {
  const content = editContent.value.trim();
  if (!content) return;
  const duration = editDuration.value ? parseInt(editDuration.value) : null;
  try {
    const updated = await apiPatch<TaskLog>(`/api/tasks/${props.taskId}/logs/${log.id}`, {
      content,
      duration_minutes: isNaN(duration as number) ? null : duration,
    });
    const idx = logs.value.findIndex((l) => l.id === log.id);
    if (idx !== -1) logs.value[idx] = updated;
    cancelEdit();
  } catch {
    // silent
  }
}

async function deleteLog(log: TaskLog) {
  try {
    await apiDelete(`/api/tasks/${props.taskId}/logs/${log.id}`);
    logs.value = logs.value.filter((l) => l.id !== log.id);
  } catch {
    // silent
  }
}

onMounted(loadLogs);
</script>

<template>
  <div class="log-section">
    <div class="log-header">Work Log</div>

    <div v-if="logs.length === 0" class="log-empty">No entries yet.</div>

    <div v-for="log in logs" :key="log.id" class="log-entry">
      <template v-if="editingId === log.id">
        <textarea
          v-model="editContent"
          class="log-textarea"
          rows="3"
          placeholder="What did you do?"
          @keydown.ctrl.enter="saveEdit(log)"
        ></textarea>
        <div class="log-edit-controls">
          <input
            v-model="editDuration"
            type="number"
            min="1"
            class="log-duration-input"
            placeholder="min"
          />
          <button class="btn-log-save" @click="saveEdit(log)">Save</button>
          <button class="btn-log-cancel" @click="cancelEdit">Cancel</button>
        </div>
      </template>
      <template v-else>
        <div class="log-entry-meta">
          <span class="log-date">{{ formatDate(log.created_at) }}</span>
          <span v-if="log.duration_minutes" class="log-duration-badge">
            {{ formatDuration(log.duration_minutes) }}
          </span>
          <div class="log-entry-actions">
            <button class="btn-log-edit" @click="startEdit(log)" title="Edit">Edit</button>
            <button class="btn-log-delete" aria-label="Delete log entry" @click="deleteLog(log)">&times;</button>
          </div>
        </div>
        <div class="log-content prose" v-html="renderMarkdown(log.content)"></div>
      </template>
    </div>

    <div class="log-add">
      <textarea
        v-model="newContent"
        class="log-textarea"
        rows="3"
        placeholder="What did you do?..."
        @keydown.ctrl.enter="submitLog"
        autofocus
      ></textarea>
      <div class="log-add-controls">
        <label class="log-duration-label">
          min:
          <input
            v-model="newDuration"
            type="number"
            min="1"
            class="log-duration-input"
            placeholder="—"
          />
        </label>
        <button
          class="btn-log-submit"
          @click="submitLog"
          :disabled="!newContent.trim() || submitting"
        >
          {{ submitting ? "Saving..." : "Log entry" }}
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.log-section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
  padding: 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.log-header {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
}

.log-empty {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.log-entry {
  border-top: 1px solid var(--color-border);
  padding-top: 0.5rem;
}

.log-entry-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  font-size: 0.8rem;
}

.log-date {
  color: var(--color-text-muted);
}

.log-duration-badge {
  background: var(--color-primary);
  color: #fff;
  border-radius: 99px;
  padding: 0.1rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
}

.log-entry-actions {
  margin-left: auto;
  display: flex;
  gap: 0.25rem;
}

.btn-log-edit,
.btn-log-delete {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-family: inherit;
  padding: 0.1rem 0.25rem;
  line-height: 1;
}

.btn-log-edit:hover { color: var(--color-primary); }
.btn-log-delete:hover { color: var(--color-danger, #e74c3c); }

.log-content {
  font-size: 0.875rem;
}

.log-content :deep(p) { margin: 0; }

.log-add {
  border-top: 1px solid var(--color-border);
  padding-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.log-textarea {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.875rem;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}

.log-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.log-add-controls,
.log-edit-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.log-duration-label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.log-duration-input {
  width: 5rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.875rem;
}

.log-duration-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.btn-log-submit,
.btn-log-save {
  margin-left: auto;
  padding: 0.3rem 0.75rem;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.8rem;
  font-family: inherit;
}

.btn-log-submit:disabled {
  opacity: 0.5;
  cursor: default;
}

.btn-log-cancel {
  padding: 0.3rem 0.6rem;
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.8rem;
  font-family: inherit;
}
</style>