<script setup>
import { useQuasar } from "quasar";
import { q, m, notify, useAsyncData } from "#imports";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const $q = useQuasar();
const { data, refresh } = await useAsyncData("role", async () => {
  const data2 = await q({
    app: {
      roles: {
        name: true,
        canDelete: true,
        canUpdate: true,
        children: true,
        user: {
          name: true,
          user_id: true
        }
      },
      listUser: {
        data: {
          user_id: true,
          name: true
        }
      }
    }
  });
  return data2.app;
});
let role_options = data.value.roles.map((r) => ({ label: r.name, value: r.name }));
let users = data.value.listUser.data;
const onDelete = async (role) => {
  $q.dialog({
    title: "Delete",
    message: "Are you sure you want to delete this role and related role relations?",
    cancel: true,
    persistent: true
  }).onOk(async () => {
    await m("deleteRole", { name: role });
    refresh();
  });
};
const columns = [
  {
    name: "_can_delete"
  },
  {
    name: "name",
    field: "name",
    label: t("Name"),
    align: "left",
    sortable: true
  },
  {
    name: "children",
    label: "Children",
    align: "left"
  },
  {
    label: "User",
    align: "left",
    name: "user"
  }
];
const onRemoveChild = async (value, child) => {
  await m("removeRoleChild", {
    name: value,
    child: child.value
  });
  notify("Role removed from role");
  refresh();
};
const onAddChild = async (value, child) => {
  try {
    await m("addRoleChild", {
      name: value,
      child: child.value.value
    });
  } catch (e) {
    $q.notify({
      type: "negative",
      message: e.message
    });
    return;
  }
  notify("Role added to role");
  refresh();
};
const onAddUser = async (value, user) => {
  await m("addUserRole", {
    role: value,
    user_id: user.value.user_id
  });
  notify("User added to role");
  refresh();
};
const onRemoveUser = async (value, user) => {
  await m("removeUserRole", {
    role: value,
    user_id: user.value.user_id
  });
  notify("User removed from role");
  refresh();
};
</script>

<template>
    <l-page>
        <q-table :rows="data.roles" flat bordered :columns="columns" :rows-per-page-options="[0]" dense>
            <template #body-cell-_can_delete="props">
                <q-td auto-width>
                    <q-btn v-if="props.row.canDelete" flat round dense icon="sym_o_delete"
                        @click="onDelete(props.row.name)" />
                </q-td>
            </template>

            <template #body-cell-children="props">
                <q-td>
                    <q-select :options="role_options" v-model="props.row.children" multiple use-chips dense
                        @remove="onRemoveChild(props.row.name, $event)" @add="onAddChild(props.row.name, $event)">
                    </q-select>
                </q-td>
            </template>
            <template #body-cell-user="props">
                <q-td>
                    <q-select :options="users" v-model="props.row.user" multiple use-chips dense option-label="name"
                        option-value="user_id" @add="onAddUser(props.row.name, $event)"
                        @remove="onRemoveUser(props.row.name, $event)">

                    </q-select>
                </q-td>
            </template>
        </q-table>
    </l-page>
</template>
