From 5353584c9fedb3c13c46de273a40ce614c119091 Mon Sep 17 00:00:00 2001
From: Nick Kleine-Tebbe <nick@kleine-tebbe.de>
Date: Mon, 24 Jan 2022 12:39:44 +0100
Subject: [PATCH] separated logic for list items and kolloquium
---
components/AbgabeItem.vue | 36 ++++++++++++++++++++
components/KolloquiumItem.vue | 55 +++++++++++++++++++++++++++++++
components/ListItem.vue | 24 +++++---------
pages/index.vue | 62 +++++++++++++++++++++--------------
4 files changed, 138 insertions(+), 39 deletions(-)
create mode 100644 components/AbgabeItem.vue
create mode 100644 components/KolloquiumItem.vue
diff --git a/components/AbgabeItem.vue b/components/AbgabeItem.vue
new file mode 100644
index 0000000..27c95f0
--- /dev/null
+++ b/components/AbgabeItem.vue
@@ -0,0 +1,36 @@
+<template>
+ <ListItem
+ :selected="selected"
+ >
+ <div class="flex flex-row w-full">
+ <div v-if="!inEdit" class="w-full select-none text-left mr-1">
+ {{ title }}
+ </div>
+ <button
+ class="text-center text-white rounded-md select-none w-9 h-8 ml-1 bg-red-500 hover:bg-red-700 active:bg-red-900">╳</button>
+ </div>
+ </ListItem>
+</template>
+
+<script>
+import ListItem from '~/components/ListItem'
+
+export default {
+ components: {
+ ListItem
+ },
+ props: {
+ title: {
+ type: String,
+ required: true,
+ },
+ selected: {
+ type: Boolean,
+ required: false,
+ default: false,
+ },
+ },
+ methods: {
+ }
+}
+</script>
diff --git a/components/KolloquiumItem.vue b/components/KolloquiumItem.vue
new file mode 100644
index 0000000..08fd91a
--- /dev/null
+++ b/components/KolloquiumItem.vue
@@ -0,0 +1,55 @@
+<template>
+ <ListItem
+ :selected="selected"
+ >
+ <div class="flex flex-row w-full">
+ <div v-if="!inEdit" class="w-full select-none text-left mr-1">
+ {{ title }}
+ </div>
+ <input v-if="inEdit" class="w-full rounded border p-1" v-model="title" placeholder="Neues Kolloquium...">
+ <button
+ v-if="!inEdit"
+ class="text-center text-white rounded-md select-none w-9 h-8 ml-1 bg-blue-500 hover:bg-blue-700 active:bg-blue-900 pb-1">✉</button>
+ <button
+ v-if="inEdit"
+ @click.native="save()"
+ class="text-center text-white rounded-md select-none w-9 h-8 ml-1 bg-green-500 hover:bg-green-700 active:bg-green-900">✓</button>
+ <button
+ v-if="!inEdit"
+ class="text-center text-white rounded-md select-none w-9 h-8 ml-1 bg-yellow-500 hover:bg-yellow-700 active:bg-yellow-900">✎</button>
+ <button
+ class="text-center text-white rounded-md select-none w-9 h-8 ml-1 bg-red-500 hover:bg-red-700 active:bg-red-900">╳</button>
+ </div>
+ </ListItem>
+</template>
+
+<script>
+import ListItem from '~/components/ListItem'
+
+export default {
+ components: {
+ ListItem
+ },
+ props: {
+ title: {
+ type: String,
+ required: true,
+ },
+ selected: {
+ type: Boolean,
+ required: false,
+ default: false,
+ },
+ inEdit: {
+ type: Boolean,
+ required: false,
+ default: false
+ },
+ },
+ methods: {
+ save() {
+ console.log("save me!")
+ }
+ }
+}
+</script>
diff --git a/components/ListItem.vue b/components/ListItem.vue
index a5a8f72..9919e74 100644
--- a/components/ListItem.vue
+++ b/components/ListItem.vue
@@ -1,16 +1,10 @@
<template>
<button
- class="w-full border rounded mb-1 p-1 bg-blue-50 hover:bg-blue-100 active:bg-blue-300"
- :class="selected ? 'bg-blue-200' : ''"
+ class="w-full border rounded mb-1 p-1 bg-blue-50 active:bg-blue-300"
+ :class="selected ? 'bg-blue-200' : 'hover:bg-blue-100'"
>
<div class="flex flex-row">
- <div class="w-full select-none text-left mr-1">
- <slot></slot>
- </div>
- <button v-if="shareAction" class="bg-blue-500 hover:bg-blue-700 text-white pb-1 text-center rounded-md select-none w-9 h-8">✉</button>
- <button v-if="saveAction" class="bg-green-500 hover:bg-green-700 active:bg-green-900 text-white ml-1 pb-1 text-center rounded-md select-none w-9 h-8">✓</button>
- <button v-if="editAction" class="bg-yellow-500 hover:bg-yellow-700 active:bg-yellow-900 text-white ml-1 pb-1 text-center rounded-md select-none w-9 h-8">✎</button>
- <button v-if="deleteAction" class="bg-red-500 hover:bg-red-700 active:bg-red-900 text-white ml-1 pb-1 text-center rounded-md select-none w-9 h-8">╳</button>
+ <slot></slot>
</div>
</button>
</template>
@@ -18,11 +12,11 @@
<script>
export default {
props: {
- selected: Boolean,
- shareAction: String,
- editAction: String,
- deleteAction: String,
- saveAction: String
+ selected: {
+ type: Boolean,
+ required: false,
+ default: false,
+ },
}
}
-</script>
\ No newline at end of file
+</script>
diff --git a/pages/index.vue b/pages/index.vue
index 9c287ac..16c3613 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -15,23 +15,18 @@
Kolloquien
</template>
<template slot="content">
- <ListItem
+ <KolloquiumItem
v-for="kolloquium in kolloquiums"
- :key="kolloquium"
+ :key="kolloquium.title"
@click.native="selectKolloquium(kolloquium)"
- :selected="selectedKolloquium===kolloquium"
- :shareAction="'link'"
- :editAction="'edit me'"
- :deleteAction="'delete_this'"
- >{{ kolloquium }}</ListItem>
- <ListItem
- :saveAction="'saveMe'"
- :deleteAction="'abort'">
- <input class="w-full rounded border p-1" v-model="neuesKolloquium" placeholder="Neues Kolloquium...">
- </ListItem>
+ :selected="selectedKolloquium===kolloquium.title"
+ :title="kolloquium.title"
+ :inEdit="kolloquium.inEdit"
+ />
<ListItem
@click.native="createNewKolloquium()"
- >+ Neues Kolloquium erstellen...</ListItem>
+ >+ Neues Kolloquium erstellen...
+ </ListItem>
</template>
</box>
<box>
@@ -41,15 +36,16 @@
<template slot="content">
<p class="text-xl"><span class="font-semibold">Titel:</span> {{ selectedKolloquium }}</p>
<p class="font-semibold mt-4">Abgaben:</p>
- <ListItem
+ <AbgabeItem
v-for="abgabe in abgaben"
:key="abgabe"
@click.native="selectAbgabe(abgabe)"
- :deleteAction="'delete_this'"
- >{{ abgabe }}</ListItem>
+ :title="abgabe"
+ />
<button class="border rounded mt-4 p-2 font-semibold text-white bg-green-500 hover:bg-green-600 focus:bg-green-700">Aktivieren</button>
</template>
</box>
+ {{ kolloquiums }}
</div>
</template>
@@ -57,23 +53,35 @@
import Box from '~/components/Box'
import List from '~/components/List'
import ListItem from '~/components/ListItem'
+import KolloquiumItem from '~/components/KolloquiumItem'
+import AbgabeItem from '~/components/AbgabeItem'
export default {
components: {
Box,
List,
- ListItem
+ ListItem,
+ KolloquiumItem,
+ AbgabeItem
},
data() {
- return {
+ return {
selectedKolloquium: "",
selectedAbgabe: "",
kolloquiums: [
- "Hier ist eine Liste von Kolloquien.",
- "Man kann eines auswählen um zu sehen, welche Abgaben eingereicht wurden.",
- "Man kann ein Kolloquium erstellen oder löschen.",
+ {
+ title: "Hier ist eine Liste von Kolloquien.",
+ inEdit: false,
+ },
+ {
+ title: "Man kann eines auswählen um zu sehen, welche Abgaben eingereicht wurden.",
+ inEdit: false,
+ },
+ {
+ title: "Man kann ein Kolloquium erstellen oder löschen.",
+ inEdit: false,
+ },
],
- newKolloquium: "",
abgaben: [
"Hier ist eine Liste von Abgaben für das ausgewählte Kolloquium.",
"Man kann einzelne Abgaben löschen.",
@@ -83,14 +91,20 @@ export default {
},
methods: {
selectKolloquium(kolloquium) {
- this.selectedKolloquium = kolloquium
+ this.selectedKolloquium = kolloquium.title
this.selectedAbgabe = ''
},
selectAbgabe(abgabe) {
this.selectedAbgabe = abgabe
},
createNewKolloquium() {
- this.kolloquiums = [...this.kolloquiums, 'Neues Kolloquium']
+ this.kolloquiums.forEach(kolloquium => {
+ kolloquium.inEdit = false;
+ });
+ this.selectedKolloquium = "";
+ this.kolloquiums = this.kolloquiums.filter(kolloquium => kolloquium.title.length > 0);
+ this.kolloquiums = [...this.kolloquiums, {title: '', inEdit: true}];
+
}
}
}
--
GitLab