FEDEO/spaces/pages/tasks.vue

<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>