delete activity; style

src/App.vue

@@ -8,13 +8,19 @@ import { defineComponent } from 'vue'
 export default defineComponent({
   data() {
     return {
-      activities: [] as Activity[]
+      activities: [] as Activity[],
+      id: 0
     }
   },
   methods: {
     addActivity(title: String, time: Number, description: String) {
-      let a: Activity = { Title: title, Duration: time, Description: description }
+      let a: Activity = { Id: this.id, Title: title, Duration: time, Description: description }
+      this.id++
       this.activities.push(a)
+    },
+
+    removeActivity(id: Number) {
+      this.activities = this.activities.filter((x) => x.Id !== id)
     }
   },
   components: { InputForm, ActivityTable }
@@ -26,7 +32,11 @@ export default defineComponent({
     <div class="mt-10 w-[60em]">
       <h1 class="mb-10 p-4 text-center text-2xl font-bold">Diario tirocinio</h1>
       <InputForm @addActivity="addActivity" />
-      <ActivityTable :activities="activities" />
+      <ActivityTable
+        v-show="activities.length > 0"
+        :activities="activities"
+        @removeActivity="removeActivity"
+      />
     </div>
   </div>
 </template>

src/components/ActivityTable.vue

@@ -11,14 +11,41 @@ export default defineComponent({
       required: true
     }
   },
-  methods: {}
+  emits: ['removeActivity'],
+  methods: {
+    remove(id: Number) {
+      this.$emit('removeActivity', id)
+    },
+    countHours() {
+      return this.activities.reduce((acc, a) => a.Duration + acc, 0)
+    }
+  }
 })
 </script>
 
 <template>
   <div class="bg-cyan-50 mt-4 p-12 rounded-lg" style="background-color: #0f1f2a">
-    <div v-for="a in activities" class="p-2 m-2 bg-sky-100 rounded text-black">
-      {{ a }}
+    <div class="flex justify-between">
+      <h1 class="font-bold m-2 text-lg p-2">Total activities: {{ activities.length }}</h1>
+      <h1 class="font-bold m-2 text-lg p-2">Total hours: {{ countHours() }}</h1>
+    </div>
+    <div
+      v-for="a in activities"
+      class="p-2 m-2 bg-sky-100 rounded text-black flex flex-row justify-between"
+    >
+      <div class="flex-auto p-2">
+        <div class="flex justify-between">
+          <h1 class="text-black inline">Title: {{ a.Title }}</h1>
+          <span class="text-black">Duration: {{ a.Duration }}</span>
+          <span class="text-black">ID: {{ a.Id }}</span>
+        </div>
+        <p class="text-black whitespace-pre-line">{{ a.Description }}</p>
+      </div>
+      <div class="flex items-center">
+        <button class="p-2 bg-red-400 rounded h-16 hover:bg-red-500" @click="remove(a.Id)">
+          Delete
+        </button>
+      </div>
     </div>
   </div>
 </template>

src/components/InputForm.vue

@@ -5,7 +5,7 @@ export default defineComponent({
   data() {
     return {
       tmpTitle: '',
-      tmpTime: 0,
+      tmpTime: 1,
       tmpDescription: ''
     }
   },
@@ -15,6 +15,9 @@ export default defineComponent({
       // Should check for errors :)
 
       this.$emit('addActivity', this.tmpTitle, this.tmpTime, this.tmpDescription)
+      this.tmpTitle = ''
+      this.tmpTime = 1
+      this.tmpDescription = ''
     }
   }
 })
@@ -43,12 +46,17 @@ export default defineComponent({
         <textarea
           v-model="tmpDescription"
           placeholder="Add description..."
+          required
           class="block h-32 w-full rounded border p-2 outline-none bg-sky-100 text-black"
         ></textarea>
       </div>
 
       <div class="flex justify-center">
-        <button class="m-5 w-20 rounded border bg-blue-400 p-2 border-0 text-gray-50">Add</button>
+        <button
+          class="m-5 w-20 rounded bg-blue-400 p-2 border-0 text-gray-50 hover:bg-blue-500 hover:text-white"
+        >
+          Add
+        </button>
       </div>
     </form>
   </div>

src/types.ts

@@ -1,5 +1,6 @@
 export type Activity = {
-  Title: String
-  Duration: Number
-  Description: String
+  Id: number
+  Title: string
+  Duration: number
+  Description: string
 }