Initial

spaces/pages/tasks.vue

@@ -0,0 +1,288 @@
+<template>
+  <div>
+    <UModal
+        v-model="showCreateTask"
+    >
+      <UCard>
+        <template #header>
+          Aufgabe erstellen
+        </template>
+
+        <UFormGroup
+            label="Titel:"
+            class="mt-2"
+        >
+          <UInput
+              v-model="createTaskData.name"
+          />
+        </UFormGroup>
+
+        <UFormGroup
+            label="Beschreibung:"
+            class="mt-2"
+        >
+          <UTextarea
+              v-model="createTaskData.description"
+          />
+        </UFormGroup>
+
+        <UFormGroup
+            label="Kategorie:"
+            class="mt-2"
+        >
+          <USelectMenu
+              :options="taskCategories"
+              v-model="createTaskData.categorie"
+          />
+        </UFormGroup>
+
+        <UFormGroup
+            label="Benutzer:"
+            class="mt-2"
+        >
+          <USelectMenu
+              :options="usersForList"
+              v-model="createTaskData.users"
+              multiple
+          />
+        </UFormGroup>
+
+
+        <template #footer>
+          <UButton
+              @click="createTask"
+          >
+            Erstellen
+          </UButton>
+        </template>
+
+      </UCard>
+    </UModal>
+
+    <UModal
+        v-model="showTaskModal"
+    >
+      <UCard>
+        <template #header>
+          {{taskData.attributes.name}}
+        </template>
+        <p>{{taskData.attributes.description}}</p>
+        <p>Erstellt am: {{taskData.attributes.createdAt}}</p>
+        <UBadge
+            v-for="user in taskData.attributes.users"
+            class="mr-2"
+        >
+          {{user}}
+        </UBadge>
+        <template #footer>
+          <UButton
+            @click="finishTask"
+          >
+            Erledigt
+          </UButton>
+        </template>
+      </UCard>
+    </UModal>
+
+    <div id="menuBar">
+      <UButton
+          class="mb-3 mr-3"
+          @click="showCreateTask = true"
+      >
+        + Aufgabe
+      </UButton>
+      <USelectMenu
+          :options="usersForList"
+          v-model="usersSelected"
+          multiple
+          placeholder="Benutzer"
+          class="w-40"
+          v-on:change="filterTasks"
+      >
+        <template #label>
+          <span v-if="usersSelected.length" class="truncate">{{ usersSelected.join(', ') }}</span>
+          <span v-else>Benutzer auswählen</span>
+        </template>
+      </USelectMenu>
+    </div>
+
+
+
+
+    <div id="taskCatList">
+      <div id="catNew">
+        <h3>Neue Aufgaben</h3>
+        <div class="taskScrollList">
+          <a
+              v-for="taskNew in refTasks.filter(task => task.attributes.categorie == 'Neu')"
+              @click="inspectTask(taskNew)"
+          >
+            <UCard class="listItem">
+              {{taskNew.attributes.name}}
+              <UBadge
+                  v-for="user in taskNew.attributes.users"
+                  class="mr-2"
+              >
+                {{user}}
+              </UBadge>
+            </UCard>
+          </a>
+
+        </div>
+
+
+      </div>
+      <div id="catInProgress">
+        <h3>Aufgaben in Bearbeitung</h3>
+        <div class="taskScrollList">
+          <a
+              v-for="taskNew in refTasks.filter(task => task.attributes.categorie == 'In Bearbeitung')"
+              @click="inspectTask(taskNew)"
+          >
+            <UCard class="listItem">
+              {{taskNew.attributes.name}}
+              <UBadge
+                  v-for="user in taskNew.attributes.users"
+                  class="mr-2"
+              >
+                {{user}}
+              </UBadge>
+            </UCard>
+          </a>
+        </div>
+
+      </div>
+      <div id="catUrgent">
+        <h3>Dringende Aufgaben</h3>
+        <div class="taskScrollList">
+          <a
+              v-for="taskNew in refTasks.filter(task => task.attributes.categorie == 'Dringend')"
+              @click="inspectTask(taskNew)"
+          >
+            <UCard class="listItem">
+              {{taskNew.attributes.name}}
+              <UBadge
+                  v-for="user in taskNew.attributes.users"
+                  class="mr-2"
+              >
+                {{user}}
+              </UBadge>
+            </UCard>
+          </a>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+definePageMeta({
+  middleware: "auth"
+})
+
+const {find,create, update} = useStrapi4()
+
+let tasks = (await find('tasks',{populate: "*"})).data
+
+let refTasks = ref([])
+
+
+const users = (await find('users',{populate: "*"}))
+let usersForList = []
+users.forEach(user => usersForList.push(user.username))
+const usersSelected = ref([])
+usersSelected.value = usersForList
+
+
+
+const showCreateTask = ref(false)
+const taskCategories = ["Neu","In Bearbeitung", "Dringend"]
+const createTaskData = ref({
+  name: "",
+  description: "",
+  categorie: "Neu",
+  users: []
+})
+
+const taskData = ref({})
+const showTaskModal = ref(false)
+
+const createTask = async () => {
+  await create('tasks', createTaskData.value)
+  showCreateTask.value = false
+  createTaskData.value = {}
+}
+
+const updateTask = async () => {
+  await update('tasks', taskData.value.id, taskData.value.attributes)
+
+}
+
+
+const inspectTask = (task) => {
+  taskData.value = task
+  showTaskModal.value = true
+}
+
+const filterTasks = () => {
+  refTasks.value = tasks.filter(task => usersSelected.value.some(user => (task.attributes.users ? (task.attributes.users.includes(user)) : true )))
+
+}
+
+const finishTask = () => {
+  taskData.value.attributes.categorie = "Erledigt"
+  updateTask()
+}
+
+filterTasks()
+
+</script>
+
+<style scoped>
+
+#main {
+
+}
+
+h3 {
+  font-size: large;
+  font-weight: bold;
+}
+
+#menuBar {
+  display: flex;
+  flex-direction: row;
+}
+
+#taskCatList {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 65vh;
+}
+
+.taskScrollList {
+  height: 60vh;
+  overflow: auto;
+  padding: 3px
+}
+
+#catNew {
+  width: 30%;
+}
+#catInProgress {
+  width: 30%;
+  border-left: 2px solid #69c350;
+  margin-left: 1em;
+  padding-left: 1em;
+
+}
+#catUrgent {
+  width: 30%;
+  border-left: 2px solid #69c350;
+  margin-left: 1em;
+  padding-left: 1em;
+}
+</style>