<script setup>
defineProps(['objects']);
import { ref } from 'vue';
import { departments, getDepartments, isLoading, getDepartmentName} from "@/components/pagination/departmentTabs.vue";
import { loadList } from "@/components/pagination/paginatedList.vue";
import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";

// Get the departments (If the departments are not already loaded)
if (departments.value.length === 0) {
  getDepartments();
}

const parseCustomerName = (user) => {
  if (user.customer_name) {
    return user.customer_name;
  } else {
    return "-";
  }
}
import { showEditDepartmentForm } from "@/components/forms/superUser/editDepartmentForm.vue";

import { showEditUserForm } from "@/components/forms/superUser/editUserForm.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";

const redirect = (path) => {
  window.location = path;
}

</script>

<template>
    <table class="table is-fullwidth">
      <thead>
      <tr>
        <th>{{ SessionUser.objects.departments.columns.id.label }}</th>
        <th>{{ SessionUser.objects.departments.columns.name.label }}</th>
        <th>{{ SessionUser.objects.departments.columns.description.label }}</th>
        <th>{{ SessionUser.objects.departments.columns.economic_department_id.label }}</th>
        <th>Handlinger</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="department in objects" :key="department.id">
        <td>{{ department.id }}</td>
        <EditableTableColumn
            :object="department"
            :loadList="loadList"
            column="name"
            :edit-function="SessionUser.objects.departments.showEditObjectFieldForm"
        />
        <EditableTableColumn
            :object="department"
            :loadList="loadList"
            column="description"
            :edit-function="SessionUser.objects.departments.showEditObjectFieldForm"
        />
        <EditableTableColumn
            :object="department"
            :loadList="loadList"
            column="economic_department_id"
            :edit-function="SessionUser.objects.departments.showEditObjectFieldForm"
            :parse-function="SessionUser.objects.economic_departments.functions.getEconomicDepartmentName"
        />
        <td>
          <div class="buttons">
            <button class="button is-small is-dark" @click="showEditDepartmentForm(department.id, department.name, department.description, department.economic_department_id)">Rediger</button>
            <button class="button is-small is-darker" @click="redirect('/admin/' + department.id)">Gå til afdelingsside</button>
            <button class="button is-small is-dark" @click="redirect('/superuser/departments/' + department.id)">
                <span class="icon">
                  <i class="fas fa-cog"></i>
                </span>
            </button>
          </div>
        </td>
      </tr>
      </tbody>
    </table>
</template>

<style scoped>

</style>