<template>
  <q-page
    padding
    style="grid-auto-rows: 1fr"
    class="fit row justify-around items-start q-col-gutter-sm"
  >
    <div v-for="(item, index) in widgets" :key="index" class="col-4 full-height col-sm-6 col-xs-12">
      <component v-bind:is="item" />
    </div>
  </q-page>
</template>

<script lang="ts">
import { Component, defineComponent, onMounted, inject, ref } from 'vue';
import { hasPermissions } from 'src/utils/permission';
import { FG_Plugin } from 'src/plugins';
export default defineComponent({
  name: 'Dashboard',
  setup() {
    const widgets = ref<Array<Component>>([]);
    const flaschengeistPlugins = inject<FG_Plugin.LoadedPlugins>('flaschengeistPlugins');

    onMounted(() => {
      flaschengeistPlugins?.widgets.forEach((widget) => {
        if (hasPermissions(widget.permissions)) widgets.value.push(widget.widget);
      });
    });

    return {
      widgets,
    };
  },
});
</script>