@commonpub/layer 0.8.2 → 0.8.4

package/pages/contests/[slug]/edit.vue

@@ -5,8 +5,10 @@ const route = useRoute();
 const slug = route.params.slug as string;
 const toast = useToast();
 const { extract: extractError } = useApiError();
+const { user, isAdmin } = useAuth();
 
 const { data: contest, refresh } = useLazyFetch(`/api/contests/${slug}`);
+const isOwner = computed(() => isAdmin.value || !!(user.value?.id && contest.value?.createdById === user.value.id));
 useSeoMeta({ title: () => `Edit: ${contest.value?.title ?? 'Contest'} — ${useSiteName()}` });
 
 const saving = ref(false);
@@ -15,20 +17,95 @@ const description = ref('');
 const rules = ref('');
 const startDate = ref('');
 const endDate = ref('');
+const judgingEndDate = ref('');
+const prizes = ref<Array<{ place: number; title: string; description: string; value: string }>>([]);
+const judgeIds = ref<string[]>([]);
+const judgeSearch = ref('');
+const judgeSearchResults = ref<Array<{ id: string; username: string; displayName: string | null }>>([]);
+const searchingJudges = ref(false);
+
+interface JudgeDisplay { id: string; username: string; displayName: string | null }
+const resolvedJudges = ref<JudgeDisplay[]>([]);
 
 // Load current data
-watch(contest, (c) => {
+watch(contest, async (c) => {
   if (!c) return;
   title.value = c.title ?? '';
   description.value = c.description ?? '';
   rules.value = c.rules ?? '';
   startDate.value = c.startDate ? new Date(c.startDate).toISOString().slice(0, 16) : '';
   endDate.value = c.endDate ? new Date(c.endDate).toISOString().slice(0, 16) : '';
+  judgingEndDate.value = c.judgingEndDate ? new Date(c.judgingEndDate).toISOString().slice(0, 16) : '';
+  prizes.value = (c.prizes ?? []).map((p: { place: number; title: string; description?: string; value?: string }) => ({
+    place: p.place,
+    title: p.title,
+    description: p.description ?? '',
+    value: p.value ?? '',
+  }));
+  judgeIds.value = [...(c.judges ?? [])];
+  // Resolve judge IDs to display info
+  if (judgeIds.value.length > 0) {
+    try {
+      const data = await $fetch<{ items: JudgeDisplay[] }>('/api/users', { query: { ids: judgeIds.value.join(',') } });
+      resolvedJudges.value = data.items;
+    } catch { /* ignore */ }
+  }
 }, { immediate: true });
 
+async function searchJudge(): Promise<void> {
+  const q = judgeSearch.value.trim();
+  if (!q || q.length < 2) { judgeSearchResults.value = []; return; }
+  searchingJudges.value = true;
+  try {
+    const data = await $fetch<{ items: Array<{ id: string; username: string; displayName: string | null }> }>('/api/users', { query: { q, limit: 5 } });
+    judgeSearchResults.value = data.items.filter((u) => !judgeIds.value.includes(u.id));
+  } catch { judgeSearchResults.value = []; }
+  finally { searchingJudges.value = false; }
+}
+
+function addJudge(u: { id: string; username: string; displayName: string | null }): void {
+  if (!judgeIds.value.includes(u.id)) {
+    judgeIds.value.push(u.id);
+    resolvedJudges.value.push(u);
+  }
+  judgeSearch.value = '';
+  judgeSearchResults.value = [];
+}
+
+function removeJudge(id: string): void {
+  judgeIds.value = judgeIds.value.filter((jid) => jid !== id);
+  resolvedJudges.value = resolvedJudges.value.filter((j) => j.id !== id);
+}
+
+function addPrize(): void {
+  const nextPlace = prizes.value.length + 1;
+  prizes.value.push({ place: nextPlace, title: '', description: '', value: '' });
+}
+
+function removePrize(index: number): void {
+  prizes.value.splice(index, 1);
+  prizes.value.forEach((p, i) => { p.place = i + 1; });
+}
+
+function placeLabel(place: number): string {
+  if (place === 1) return '1st Place';
+  if (place === 2) return '2nd Place';
+  if (place === 3) return '3rd Place';
+  return `${place}th Place`;
+}
+
 async function handleSave(): Promise<void> {
   saving.value = true;
   try {
+    const prizeData = prizes.value
+      .filter((p) => p.title.trim())
+      .map((p) => ({
+        place: p.place,
+        title: p.title,
+        description: p.description || undefined,
+        value: p.value || undefined,
+      }));
+
     await $fetch(`/api/contests/${slug}`, {
       method: 'PUT',
       body: {
@@ -37,6 +114,9 @@ async function handleSave(): Promise<void> {
         rules: rules.value || undefined,
         startDate: startDate.value ? new Date(startDate.value).toISOString() : undefined,
         endDate: endDate.value ? new Date(endDate.value).toISOString() : undefined,
+        judgingEndDate: judgingEndDate.value ? new Date(judgingEndDate.value).toISOString() : undefined,
+        prizes: prizeData.length > 0 ? prizeData : undefined,
+        judges: judgeIds.value.length > 0 ? judgeIds.value : undefined,
       },
     });
     toast.success('Contest updated');
@@ -49,7 +129,10 @@ async function handleSave(): Promise<void> {
 }
 
 async function transitionStatus(newStatus: string): Promise<void> {
-  if (!confirm(`Change contest status to "${newStatus}"?`)) return;
+  const msg = newStatus === 'cancelled'
+    ? 'Cancel this contest? This cannot be undone.'
+    : `Change contest status to "${newStatus}"?`;
+  if (!confirm(msg)) return;
   try {
     await $fetch(`/api/contests/${slug}/transition`, {
       method: 'POST',
@@ -64,56 +147,129 @@ async function transitionStatus(newStatus: string): Promise<void> {
 </script>
 
 <template>
-  <div v-if="contest" class="contest-edit">
+  <div v-if="contest && !isOwner" class="cpub-not-found">
+    <p>You don't have permission to edit this contest.</p>
+    <NuxtLink :to="`/contests/${slug}`" class="cpub-btn cpub-btn-sm">Back to Contest</NuxtLink>
+  </div>
+  <div v-else-if="contest" class="cpub-contest-edit">
     <NuxtLink :to="`/contests/${slug}`" class="cpub-back-link"><i class="fa-solid fa-arrow-left"></i> Back to contest</NuxtLink>
-    <h1 class="page-title">Edit Contest</h1>
-    <p class="page-subtitle">
-      Status: <span class="status-badge" :class="`status-${contest.status}`">{{ contest.status }}</span>
+    <h1 class="cpub-edit-title">Edit Contest</h1>
+    <p class="cpub-edit-subtitle">
+      Status: <span class="cpub-status-badge" :class="`cpub-status-${contest.status}`">{{ contest.status }}</span>
     </p>
 
-    <form class="edit-form" @submit.prevent="handleSave">
-      <section class="form-section">
-        <h2 class="form-section-title">Details</h2>
-        <div class="form-field">
-          <label class="form-label">Title</label>
-          <input v-model="title" type="text" class="form-input" />
+    <form class="cpub-edit-form" @submit.prevent="handleSave">
+      <section class="cpub-form-section">
+        <h2 class="cpub-form-section-title">Details</h2>
+        <div class="cpub-form-field">
+          <label class="cpub-form-label">Title</label>
+          <input v-model="title" type="text" class="cpub-form-input" />
+        </div>
+        <div class="cpub-form-field">
+          <label class="cpub-form-label">Description</label>
+          <textarea v-model="description" class="cpub-form-textarea" rows="3" />
+        </div>
+        <div class="cpub-form-field">
+          <label class="cpub-form-label">Rules</label>
+          <textarea v-model="rules" class="cpub-form-textarea" rows="4" placeholder="One rule per line" />
+        </div>
+      </section>
+
+      <section class="cpub-form-section">
+        <h2 class="cpub-form-section-title">Schedule</h2>
+        <div class="cpub-form-row">
+          <div class="cpub-form-field">
+            <label class="cpub-form-label">Start Date</label>
+            <input v-model="startDate" type="datetime-local" class="cpub-form-input" />
+          </div>
+          <div class="cpub-form-field">
+            <label class="cpub-form-label">End Date</label>
+            <input v-model="endDate" type="datetime-local" class="cpub-form-input" />
+          </div>
         </div>
-        <div class="form-field">
-          <label class="form-label">Description</label>
-          <textarea v-model="description" class="form-textarea" rows="3" />
+        <div class="cpub-form-field">
+          <label class="cpub-form-label">Judging End Date</label>
+          <input v-model="judgingEndDate" type="datetime-local" class="cpub-form-input" />
         </div>
-        <div class="form-field">
-          <label class="form-label">Rules</label>
-          <textarea v-model="rules" class="form-textarea" rows="4" />
+      </section>
+
+      <section class="cpub-form-section">
+        <h2 class="cpub-form-section-title">Prizes</h2>
+        <div v-for="(prize, i) in prizes" :key="i" class="cpub-prize-row">
+          <div class="cpub-prize-header">
+            <span class="cpub-prize-label">{{ placeLabel(prize.place) }}</span>
+            <button type="button" class="cpub-prize-remove" @click="removePrize(i)"><i class="fa-solid fa-times"></i></button>
+          </div>
+          <div class="cpub-form-row">
+            <div class="cpub-form-field">
+              <label class="cpub-form-label">Title</label>
+              <input v-model="prize.title" type="text" class="cpub-form-input" placeholder="e.g. Gold Prize" />
+            </div>
+            <div class="cpub-form-field">
+              <label class="cpub-form-label">Value</label>
+              <input v-model="prize.value" type="text" class="cpub-form-input" placeholder="e.g. $500" />
+            </div>
+          </div>
+          <div class="cpub-form-field">
+            <label class="cpub-form-label">Description</label>
+            <input v-model="prize.description" type="text" class="cpub-form-input" placeholder="Optional description" />
+          </div>
         </div>
+        <button type="button" class="cpub-btn cpub-btn-sm" @click="addPrize"><i class="fa-solid fa-plus"></i> Add Prize</button>
       </section>
 
-      <section class="form-section">
-        <h2 class="form-section-title">Schedule</h2>
-        <div class="form-row">
-          <div class="form-field">
-            <label class="form-label">Start Date</label>
-            <input v-model="startDate" type="datetime-local" class="form-input" />
+      <section class="cpub-form-section">
+        <h2 class="cpub-form-section-title">Judges</h2>
+        <div v-if="resolvedJudges.length" class="cpub-judge-list">
+          <div v-for="judge in resolvedJudges" :key="judge.id" class="cpub-judge-chip">
+            <span>{{ judge.displayName || judge.username }}</span>
+            <button type="button" class="cpub-judge-chip-remove" @click="removeJudge(judge.id)"><i class="fa-solid fa-times"></i></button>
           </div>
-          <div class="form-field">
-            <label class="form-label">End Date</label>
-            <input v-model="endDate" type="datetime-local" class="form-input" />
+        </div>
+        <div v-else class="cpub-judge-empty">No judges assigned.</div>
+        <div class="cpub-judge-search">
+          <input
+            v-model="judgeSearch"
+            type="text"
+            class="cpub-form-input"
+            placeholder="Search users by name or username..."
+            @input="searchJudge"
+          />
+          <div v-if="judgeSearchResults.length" class="cpub-judge-dropdown">
+            <button
+              v-for="u in judgeSearchResults"
+              :key="u.id"
+              type="button"
+              class="cpub-judge-option"
+              @click="addJudge(u)"
+            >
+              <strong>{{ u.displayName || u.username }}</strong>
+              <span class="cpub-judge-option-username">@{{ u.username }}</span>
+            </button>
           </div>
         </div>
       </section>
 
-      <section class="form-section">
-        <h2 class="form-section-title">Status Transitions</h2>
-        <div class="status-actions">
-          <button v-if="contest.status === 'upcoming'" type="button" class="cpub-btn" style="color: var(--green); border-color: var(--green-border);" @click="transitionStatus('active')">
+      <section class="cpub-form-section">
+        <h2 class="cpub-form-section-title">Status Transitions</h2>
+        <div class="cpub-status-actions">
+          <button v-if="contest.status === 'upcoming'" type="button" class="cpub-btn cpub-transition-btn cpub-transition-activate" @click="transitionStatus('active')">
             <i class="fa-solid fa-play"></i> Start Contest
           </button>
-          <button v-if="contest.status === 'active'" type="button" class="cpub-btn" style="color: var(--yellow); border-color: var(--yellow-border);" @click="transitionStatus('judging')">
+          <button v-if="contest.status === 'active'" type="button" class="cpub-btn cpub-transition-btn cpub-transition-judging" @click="transitionStatus('judging')">
             <i class="fa-solid fa-gavel"></i> Begin Judging
           </button>
-          <button v-if="contest.status === 'judging'" type="button" class="cpub-btn" style="color: var(--accent); border-color: var(--accent-border);" @click="transitionStatus('completed')">
+          <button v-if="contest.status === 'judging'" type="button" class="cpub-btn cpub-transition-btn cpub-transition-complete" @click="transitionStatus('completed')">
             <i class="fa-solid fa-flag-checkered"></i> Complete
           </button>
+          <button
+            v-if="contest.status !== 'completed' && contest.status !== 'cancelled'"
+            type="button"
+            class="cpub-btn cpub-transition-btn cpub-transition-cancel"
+            @click="transitionStatus('cancelled')"
+          >
+            <i class="fa-solid fa-ban"></i> Cancel Contest
+          </button>
         </div>
       </section>
 
@@ -122,32 +278,58 @@ async function transitionStatus(newStatus: string): Promise<void> {
       </button>
     </form>
   </div>
-  <div v-else class="not-found"><p>Contest not found</p></div>
+  <div v-else class="cpub-not-found"><p>Contest not found</p></div>
 </template>
 
 <style scoped>
-.contest-edit { max-width: 700px; margin: 0 auto; padding: 32px; }
+.cpub-contest-edit { max-width: 700px; margin: 0 auto; padding: 32px; }
 .cpub-back-link { font-size: 11px; font-family: var(--font-mono); color: var(--text-faint); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; }
 .cpub-back-link:hover { color: var(--accent); }
-.page-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
-.page-subtitle { font-size: 13px; color: var(--text-dim); margin-bottom: 24px; display: flex; align-items: center; gap: 8px; }
-.status-badge { font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; padding: 2px 8px; border: var(--border-width-default) solid; }
-.status-upcoming { color: var(--yellow); border-color: var(--yellow-border); background: var(--yellow-bg); }
-.status-active { color: var(--green); border-color: var(--green-border); background: var(--green-bg); }
-.status-judging { color: var(--accent); border-color: var(--accent-border); background: var(--accent-bg); }
-.status-completed { color: var(--text-faint); border-color: var(--border2); background: var(--surface2); }
-
-.edit-form { display: flex; flex-direction: column; gap: 16px; }
-.form-section { border: var(--border-width-default) solid var(--border); background: var(--surface); padding: 20px; box-shadow: var(--shadow-md); }
-.form-section-title { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
-.form-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
-.form-field:last-child { margin-bottom: 0; }
-.form-label { font-size: 10px; font-weight: 600; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
-.form-input, .form-textarea { padding: 8px 10px; border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; font-family: inherit; }
-.form-input:focus, .form-textarea:focus { border-color: var(--accent); outline: none; }
-.form-textarea { resize: vertical; }
-.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
-.status-actions { display: flex; gap: 8px; }
-
-.not-found { text-align: center; padding: 64px; color: var(--text-dim); }
+.cpub-edit-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
+.cpub-edit-subtitle { font-size: 13px; color: var(--text-dim); margin-bottom: 24px; display: flex; align-items: center; gap: 8px; }
+
+.cpub-status-badge { font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; padding: 2px 8px; border: var(--border-width-default) solid; }
+.cpub-status-upcoming { color: var(--yellow); border-color: var(--yellow-border); background: var(--yellow-bg); }
+.cpub-status-active { color: var(--green); border-color: var(--green-border); background: var(--green-bg); }
+.cpub-status-judging { color: var(--accent); border-color: var(--accent-border); background: var(--accent-bg); }
+.cpub-status-completed { color: var(--text-faint); border-color: var(--border2); background: var(--surface2); }
+.cpub-status-cancelled { color: var(--red); border-color: var(--red-border); background: var(--red-bg); }
+
+.cpub-edit-form { display: flex; flex-direction: column; gap: 16px; }
+.cpub-form-section { border: var(--border-width-default) solid var(--border); background: var(--surface); padding: 20px; box-shadow: var(--shadow-md); }
+.cpub-form-section-title { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
+.cpub-form-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
+.cpub-form-field:last-child { margin-bottom: 0; }
+.cpub-form-label { font-size: 10px; font-weight: 600; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
+.cpub-form-input, .cpub-form-textarea { padding: 8px 10px; border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; font-family: inherit; }
+.cpub-form-input:focus, .cpub-form-textarea:focus { border-color: var(--accent); outline: none; }
+.cpub-form-textarea { resize: vertical; }
+.cpub-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+
+.cpub-prize-row { border: var(--border-width-default) solid var(--border); padding: 14px; margin-bottom: 10px; background: var(--surface2); }
+.cpub-prize-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
+.cpub-prize-label { font-size: 11px; font-weight: 700; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
+.cpub-prize-remove { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 12px; }
+.cpub-prize-remove:hover { color: var(--red); }
+
+.cpub-status-actions { display: flex; gap: 8px; flex-wrap: wrap; }
+.cpub-transition-btn { display: inline-flex; align-items: center; gap: 6px; }
+.cpub-transition-activate { color: var(--green); border-color: var(--green-border); }
+.cpub-transition-judging { color: var(--yellow); border-color: var(--yellow-border); }
+.cpub-transition-complete { color: var(--accent); border-color: var(--accent-border); }
+.cpub-transition-cancel { color: var(--red); border-color: var(--red-border); }
+
+.cpub-judge-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
+.cpub-judge-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--accent-bg); border: var(--border-width-default) solid var(--accent-border); font-size: 11px; font-family: var(--font-mono); color: var(--accent); }
+.cpub-judge-chip-remove { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 10px; padding: 0; }
+.cpub-judge-chip-remove:hover { color: var(--red); }
+.cpub-judge-empty { font-size: 12px; color: var(--text-faint); margin-bottom: 12px; }
+.cpub-judge-search { position: relative; }
+.cpub-judge-dropdown { position: absolute; z-index: 10; top: 100%; left: 0; right: 0; background: var(--surface); border: var(--border-width-default) solid var(--border); box-shadow: var(--shadow-lg); max-height: 200px; overflow-y: auto; }
+.cpub-judge-option { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; background: none; border: none; border-bottom: var(--border-width-default) solid var(--border); cursor: pointer; font-size: 12px; color: var(--text); text-align: left; }
+.cpub-judge-option:last-child { border-bottom: none; }
+.cpub-judge-option:hover { background: var(--surface2); }
+.cpub-judge-option-username { color: var(--text-faint); font-family: var(--font-mono); font-size: 11px; }
+
+.cpub-not-found { text-align: center; padding: 64px; color: var(--text-dim); display: flex; flex-direction: column; align-items: center; gap: 12px; }
 </style>