FEDEO/spaces/pages/tasks.vue

<template>
  <div>
<!-- TODO: Benutzer Aufgaben zuweisen und nach diesen Filtern    -->
    <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.name}}
        </template>
        <p>{{taskData.description}}</p>
        <p>Erstellt am: {{taskData.created_at}}</p>
        <UBadge
            v-for="user in taskData.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" v-if="tasks.length > 0">
          <a
              v-for="taskNew in tasks.filter(task => task.categorie == 'Neu')"
              @click="inspectTask(taskNew)"
          >
            <UCard class="listItem">
              {{taskNew.name}}
              <UBadge
                  v-for="user in taskNew.users"
                  class="mr-2"
              >
                {{user}}
              </UBadge>
            </UCard>
          </a>

        </div>


      </div>
      <div id="catInProgress">
        <h3>Aufgaben in Bearbeitung</h3>
        <div class="taskScrollList" v-if="tasks.length > 0">
          <a
              v-for="taskNew in tasks.filter(task => task.categorie == 'In Bearbeitung')"
              @click="inspectTask(taskNew)"
          >
            <UCard class="listItem">
              {{taskNew.name}}
              <UBadge
                  v-for="user in taskNew.users"
                  class="mr-2"
              >
                {{user}}
              </UBadge>
            </UCard>
          </a>
        </div>

      </div>
      <div id="catUrgent">
        <h3>Dringende Aufgaben</h3>
        <div class="taskScrollList" v-if="tasks.length > 0">
          <a
              v-for="taskNew in tasks.filter(task => task.categorie == 'Dringend')"
              @click="inspectTask(taskNew)"
          >
            <UCard class="listItem">
              {{taskNew.name}}
              <UBadge
                  v-for="user in taskNew.users"
                  class="mr-2"
              >
                {{user}}
              </UBadge>
            </UCard>
          </a>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup>

definePageMeta({
  middleware: "auth"
})


const supabase = useSupabaseClient()
const {tasks} = storeToRefs(useDataStore())
const {fetchTasks} = useDataStore()

let refTasks = ref([])


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: ["86e67794-0ea8-41b0-985a-1072e84f56e9"]*/
})

const taskData = ref({})
const showTaskModal = ref(false)

const createTask = async () => {
  //await create('tasks', createTaskData.value)
  const {data,error} = await supabase
      .from("tasks")
      .insert([createTaskData.value])
      .select()

  console.log(error)

  showCreateTask.value = false
  createTaskData.value = {}
  fetchTasks()
}

const updateTask = async () => {
  //await update('tasks', taskData.value.id, taskData.value)
  console.log(taskData.value)
  const {data,error} = await supabase
      .from("tasks")
      .update({categorie: taskData.value.categorie})
      .eq('id',taskData.value.id)
      .select()
  console.log(data)
  console.log(error)

}


const inspectTask = (task) => {
  taskData.value = task
  showTaskModal.value = true
}

const filterTasks = () => {
  refTasks.value = tasks.filter(task => usersSelected.value.some(user => (task.users ? (task.users.includes(user)) : true )))

}

const finishTask = async () => {
  console.log("Start")
  const {error} = await supabase
      .from("tasks")
      .update({categorie: "Erledigt"})
      .eq('id',taskData.value.id)
  //console.log(data)
  console.log(error)
  showTaskModal.value = false
}

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