wad-lab 1.2.2 → 1.2.3

package/templates/vue-symposium-system/src/components/AttendeeTable.vue

@@ -0,0 +1,100 @@
+<script setup>
+defineProps({
+  registrations: { type: Array, required: true }
+})
+
+const emit = defineEmits(['patch', 'delete'])
+
+function handlePatchCollege(reg) {
+  const newCollege = prompt('Update college for ' + reg.studentName + ':', reg.college)
+  if (newCollege !== null && newCollege.trim() !== '') {
+    emit('patch', { id: reg.id, college: newCollege.trim() })
+  }
+}
+</script>
+
+<template>
+  <div class="table-container">
+    <h3>Registered Attendees</h3>
+    <table class="attendee-table">
+      <thead>
+        <tr>
+          <th>Student Name</th>
+          <th>College</th>
+          <th>Email</th>
+          <th>Event</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="registrations.length === 0">
+          <td colspan="5" class="empty">No registrations recorded yet.</td>
+        </tr>
+        <tr v-for="reg in registrations" :key="reg.id">
+          <td><strong>{{ reg.studentName }}</strong></td>
+          <td>{{ reg.college }}</td>
+          <td>{{ reg.email }}</td>
+          <td>{{ reg.eventTitle }}</td>
+          <td class="action-cell">
+            <button type="button" class="btn btn-patch" @click="handlePatchCollege(reg)">Patch</button>
+            <button type="button" class="btn btn-delete" @click="emit('delete', reg.id)">Cancel</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.table-container {
+  overflow-x: auto;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.table-container h3 {
+  font-size: 16px;
+  margin-bottom: 12px;
+}
+
+.attendee-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+th, td {
+  padding: 10px;
+  border-bottom: 1px solid #f1f5f9;
+  text-align: left;
+}
+
+th {
+  background: #f8fafc;
+  color: #475569;
+}
+
+.action-cell {
+  display: flex;
+  gap: 6px;
+}
+
+.btn {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+.btn-patch { background: #8250df; color: #fff; }
+.btn-delete { background: #cf222e; color: #fff; }
+
+.empty {
+  text-align: center;
+  color: #94a3b8;
+  padding: 20px;
+}
+</style>

package/templates/vue-symposium-system/src/components/EventCard.vue

@@ -0,0 +1,67 @@
+<script setup>
+defineProps({
+  events: { type: Array, required: true },
+  getEventCount: { type: Function, required: true }
+})
+</script>
+
+<template>
+  <div class="event-cards">
+    <div v-for="ev in events" :key="ev.id" class="ev-card">
+      <span class="category">{{ ev.category }}</span>
+      <h3>{{ ev.title }}</h3>
+      <div class="ev-meta">
+        <span>Fee: ${{ ev.fee }}</span>
+        <span class="count-badge">Registered: {{ getEventCount(ev.id) }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.event-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.ev-card {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.category {
+  font-size: 11px;
+  text-transform: uppercase;
+  color: #64748b;
+  font-weight: 600;
+}
+
+.ev-card h3 {
+  font-size: 16px;
+  margin: 0;
+  color: #1e293b;
+}
+
+.ev-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 13px;
+  margin-top: 6px;
+}
+
+.count-badge {
+  background: #e0f2fe;
+  color: #0369a1;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-weight: 600;
+}
+</style>

package/templates/vue-symposium-system/src/components/RegistrationForm.vue

@@ -0,0 +1,118 @@
+<script setup>
+import { reactive } from 'vue'
+
+defineProps({
+  events: { type: Array, required: true }
+})
+
+const emit = defineEmits(['submit-registration'])
+
+const form = reactive({
+  studentName: '',
+  college: '',
+  email: '',
+  eventId: ''
+})
+
+function handleSubmit() {
+  if (!form.studentName.trim() || !form.college.trim() || !form.email.trim() || !form.eventId) return
+  emit('submit-registration', { ...form })
+  form.studentName = ''
+  form.college = ''
+  form.email = ''
+  form.eventId = ''
+}
+</script>
+
+<template>
+  <form @submit.prevent="handleSubmit" class="reg-form">
+    <h3>Student Event Registration</h3>
+
+    <div class="form-row">
+      <div class="form-group">
+        <label for="st-name">Student Name</label>
+        <input id="st-name" v-model="form.studentName" required placeholder="John Doe" />
+      </div>
+
+      <div class="form-group">
+        <label for="st-coll">College / University</label>
+        <input id="st-coll" v-model="form.college" required placeholder="MIT" />
+      </div>
+    </div>
+
+    <div class="form-row">
+      <div class="form-group">
+        <label for="st-email">Email Address</label>
+        <input id="st-email" v-model="form.email" type="email" required placeholder="john@example.com" />
+      </div>
+
+      <div class="form-group">
+        <label for="st-evt">Select Event</label>
+        <select id="st-evt" v-model="form.eventId" required>
+          <option value="" disabled>Choose an event...</option>
+          <option v-for="ev in events" :key="ev.id" :value="ev.id">
+            {{ ev.title }} (${{ ev.fee }})
+          </option>
+        </select>
+      </div>
+    </div>
+
+    <button type="submit" class="btn btn-primary">Register Student</button>
+  </form>
+</template>
+
+<style scoped>
+.reg-form {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.reg-form h3 {
+  font-size: 16px;
+  margin: 0;
+}
+
+.form-row {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.form-group {
+  flex: 1;
+  min-width: 160px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.form-group label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #475569;
+}
+
+.form-group input,
+.form-group select {
+  padding: 8px 10px;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+  font-size: 13px;
+}
+
+.btn-primary {
+  background: #0284c7;
+  color: #fff;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 6px;
+  cursor: pointer;
+  align-self: flex-start;
+}
+</style>

package/templates/vue-symposium-system/src/stores/symposiumStore.js

@@ -37,6 +37,16 @@ export const useSymposiumStore = defineStore('symposium', {
         eventTitle: matchedEvent ? matchedEvent.title : ''
       })
     },
+    patchRegistration(id, partial) {
+      const reg = this.registrations.find(r => r.id === id)
+      if (reg) {
+        Object.assign(reg, partial)
+        if (partial.eventId) {
+          const matchedEvent = this.events.find(e => e.id === partial.eventId)
+          if (matchedEvent) reg.eventTitle = matchedEvent.title
+        }
+      }
+    },
     deleteRegistration(id) {
       this.registrations = this.registrations.filter((reg) => reg.id !== id)
     }

package/templates/vue-todo-pinia/src/App.vue

@@ -1,13 +1,25 @@
 <script setup>
-import { ref } from 'vue'
 import { useTodoStore } from './stores/todoStore'
+import TodoInput from './components/TodoInput.vue'
+import TodoFilter from './components/TodoFilter.vue'
+import TodoList from './components/TodoList.vue'
 
 const store = useTodoStore()
-const newTodoText = ref('')
 
-function handleAdd() {
-  store.addTodo(newTodoText.value)
-  newTodoText.value = ''
+function handleAdd(text) {
+  store.addTodo(text)
+}
+
+function handleToggle(id) {
+  store.toggleTodo(id)
+}
+
+function handlePatch({ id, text }) {
+  store.patchTodo(id, { text })
+}
+
+function handleDelete(id) {
+  store.deleteTodo(id)
 }
 </script>
 
@@ -15,66 +27,22 @@ function handleAdd() {
   <div class="todo-app">
     <h1>Todo List (Pinia)</h1>
 
-    <form @submit.prevent="handleAdd" class="add-form">
-      <input
-        type="text"
-        v-model="newTodoText"
-        placeholder="What needs to be done?"
-        required
-      />
-      <button type="submit" class="btn btn-add">Add</button>
-    </form>
+    <TodoInput @add="handleAdd" />
 
-    <div class="filters">
-      <button
-        type="button"
-        class="filter-btn"
-        :class="{ active: store.filter === 'all' }"
-        @click="store.setFilter('all')"
-      >
-        All ({{ store.totalCount }})
-      </button>
-      <button
-        type="button"
-        class="filter-btn"
-        :class="{ active: store.filter === 'active' }"
-        @click="store.setFilter('active')"
-      >
-        Pending ({{ store.pendingCount }})
-      </button>
-      <button
-        type="button"
-        class="filter-btn"
-        :class="{ active: store.filter === 'completed' }"
-        @click="store.setFilter('completed')"
-      >
-        Completed ({{ store.completedCount }})
-      </button>
-    </div>
+    <TodoFilter
+      :current-filter="store.filter"
+      :total-count="store.totalCount"
+      :pending-count="store.pendingCount"
+      :completed-count="store.completedCount"
+      @change-filter="store.setFilter"
+    />
 
-    <ul class="todo-list">
-      <li v-for="item in store.filteredTodos" :key="item.id" class="todo-item">
-        <label>
-          <input
-            type="checkbox"
-            :checked="item.done"
-            @change="store.toggleTodo(item.id)"
-          />
-          <span :class="{ completed: item.done }">{{ item.text }}</span>
-        </label>
-        <button
-          type="button"
-          class="btn-delete"
-          @click="store.deleteTodo(item.id)"
-        >
-          ✕
-        </button>
-      </li>
-    </ul>
-
-    <div v-if="store.todos.length === 0" class="empty-state">
-      No todos found. Add one above!
-    </div>
+    <TodoList
+      :todos="store.filteredTodos"
+      @toggle="handleToggle"
+      @patch="handlePatch"
+      @delete="handleDelete"
+    />
 
     <div class="footer-actions" v-if="store.completedCount > 0">
       <button type="button" class="btn btn-clear" @click="store.clearCompleted()">
@@ -86,84 +54,15 @@ function handleAdd() {
 
 <style scoped>
 .todo-app {
-  max-width: 450px;
+  max-width: 480px;
   margin: 30px auto;
-  font-family: Arial, sans-serif;
-}
-
-.add-form {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 15px;
-}
-
-.add-form input {
-  flex: 1;
-  padding: 8px;
-  font-size: 14px;
-}
-
-.btn {
-  padding: 8px 16px;
-  cursor: pointer;
-}
-
-.btn-add {
-  background-color: #27ae60;
-  color: white;
-  border: none;
-}
-
-.filters {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 15px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
 
-.filter-btn {
-  padding: 5px 10px;
-  background-color: #eee;
-  border: 1px solid #ccc;
-  cursor: pointer;
-}
-
-.filter-btn.active {
-  background-color: #2980b9;
-  color: white;
-  border-color: #2980b9;
-}
-
-.todo-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.todo-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 0;
-  border-bottom: 1px solid #eee;
-}
-
-.completed {
-  text-decoration: line-through;
-  color: #888;
-}
-
-.btn-delete {
-  background: none;
-  border: none;
-  color: #e74c3c;
-  cursor: pointer;
-  font-size: 16px;
-}
-
-.empty-state {
-  text-align: center;
-  color: #888;
-  padding: 20px 0;
+h1 {
+  font-size: 24px;
+  margin-bottom: 16px;
+  color: #1e293b;
 }
 
 .footer-actions {
@@ -175,5 +74,8 @@ function handleAdd() {
   background-color: #e74c3c;
   color: white;
   border: none;
+  padding: 6px 12px;
+  border-radius: 4px;
+  cursor: pointer;
 }
 </style>

package/templates/vue-todo-pinia/src/components/TodoFilter.vue

@@ -0,0 +1,74 @@
+<script setup>
+defineProps({
+  currentFilter: {
+    type: String,
+    default: 'all'
+  },
+  totalCount: {
+    type: Number,
+    default: 0
+  },
+  pendingCount: {
+    type: Number,
+    default: 0
+  },
+  completedCount: {
+    type: Number,
+    default: 0
+  }
+})
+
+const emit = defineEmits(['change-filter'])
+</script>
+
+<template>
+  <div class="filters">
+    <button
+      type="button"
+      class="filter-btn"
+      :class="{ active: currentFilter === 'all' }"
+      @click="emit('change-filter', 'all')"
+    >
+      All ({{ totalCount }})
+    </button>
+    <button
+      type="button"
+      class="filter-btn"
+      :class="{ active: currentFilter === 'active' }"
+      @click="emit('change-filter', 'active')"
+    >
+      Pending ({{ pendingCount }})
+    </button>
+    <button
+      type="button"
+      class="filter-btn"
+      :class="{ active: currentFilter === 'completed' }"
+      @click="emit('change-filter', 'completed')"
+    >
+      Completed ({{ completedCount }})
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.filters {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 15px;
+}
+
+.filter-btn {
+  padding: 6px 12px;
+  background-color: #eee;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.filter-btn.active {
+  background-color: #2980b9;
+  color: white;
+  border-color: #2980b9;
+}
+</style>

package/templates/vue-todo-pinia/src/components/TodoInput.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { ref } from 'vue'
+
+const emit = defineEmits(['add'])
+const text = ref('')
+
+function handleSubmit() {
+  if (!text.value.trim()) return
+  emit('add', text.value.trim())
+  text.value = ''
+}
+</script>
+
+<template>
+  <form @submit.prevent="handleSubmit" class="add-form">
+    <input
+      type="text"
+      v-model="text"
+      placeholder="What needs to be done?"
+      required
+    />
+    <button type="submit" class="btn btn-add">Add</button>
+  </form>
+</template>
+
+<style scoped>
+.add-form {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 15px;
+}
+
+.add-form input {
+  flex: 1;
+  padding: 8px 12px;
+  font-size: 14px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.btn {
+  padding: 8px 16px;
+  cursor: pointer;
+  border: none;
+  border-radius: 4px;
+  font-weight: 500;
+}
+
+.btn-add {
+  background-color: #27ae60;
+  color: white;
+}
+</style>