<script setup lang="ts">
import Fieldset from 'primevue/fieldset';
import ModListEntry from './ModListEntry.vue';
import { usePkgStore, usePrfStore } from '../stores';

const pkg = usePkgStore();
const prf = usePrfStore();

const group = () => {
    const a = Object.assign(
        {},
        Object.groupBy(
            pkg.allLocal
                .sort((p1, p2) => p1.namespace.localeCompare(p2.namespace))
                .sort((p1, p2) => p1.name.localeCompare(p2.name)),
            ({ namespace }) => namespace
        )
    );
    return a;
};

prf.reload();
</script>

<template>
    <Fieldset v-for="(namespace, key) in group()" :legend="key.toString()">
        <ModListEntry v-for="p in namespace" :pkg="p" />
    </Fieldset>
</template>
