<script setup>
import { reactive } from "vue";
import { utils, writeFileXLSX } from "xlsx";
import { q } from "#imports";
const obj = reactive({
  roles: []
});
const { app } = await q({
  app: {
    permissions: true,
    roles: {
      name: true,
      permissions: true
    }
  }
});
let roles = app.roles.map((role) => {
  return {
    label: role.name,
    value: role.name
  };
});
const submit = () => {
  let e = app.roles.filter((role) => {
    return obj.roles.indexOf(role.name) != -1;
  });
  let data = [];
  app.permissions.forEach((permission) => {
    let row = {
      permission
    };
    e.forEach((role) => {
      if (role.permissions.indexOf(permission) != -1) {
        row[role.name] = "Yes";
      } else {
        row[role.name] = "";
      }
    });
    data.push(row);
  });
  const ws = utils.json_to_sheet(data);
  const wb = utils.book_new();
  utils.book_append_sheet(wb, ws, "Roles");
  writeFileXLSX(wb, "permission.xlsx");
};
</script>

<template>
    <l-page>
        <l-form submit-label="Export" submit-icon="sym_o_download" @submit="submit">
            <l-field label="Roles" stack-label>
                <q-option-group type="checkbox" :options="roles" v-model="obj.roles" inline>
                </q-option-group>
            </l-field>
        </l-form>

    </l-page>
</template>
