mirror of
https://github.com/InvoiceShelf/InvoiceShelf.git
synced 2026-04-15 09:14:08 +00:00
e6eeacb6d4
Adds the read-only company "Active Modules" index page (lists every
instance-activated module with a Settings shortcut) and the schema-driven
settings framework (generic BaseSchemaForm.vue renderer + per-company
persistence in CompanySetting). Bundled because they share the same
routes/api.php edit and the index page's Settings button targets the
settings page.
Backend:
- CompanyModulesController::index() returns every Module::enabled = true row
with a kebab-case slug (via Str::kebab()) and a has_settings flag computed
from \InvoiceShelf\Modules\Registry::settingsFor(). nwidart stores module
names in PascalCase ("HelloWorld") but URLs and registry keys use kebab
("hello-world") — the controller normalizes so module authors can call
Registry::registerSettings('hello-world') naturally without thinking
about the storage format.
- ModuleSettingsController::show(\$slug) returns the registered Schema +
per-company values from CompanySetting (defaults flow through when nothing
has been saved yet). update(\$slug) builds Laravel validator rules from
the Schema's per-field rules arrays — with type-rule fallbacks for
switch -> boolean, number -> numeric, multiselect -> array — silently
drops unknown keys, and persists via CompanySetting::setSettings() under
the module.{slug}.{key} prefix. Activation is instance-global, but
settings are per-company: two companies on the same instance can
configure the same activated module differently.
- routes/api.php mounts GET /api/v1/company-modules at the root of the
company API group and GET/PUT /api/v1/modules/{slug}/settings inside the
existing modules prefix.
Frontend:
- BaseSchemaForm.vue is the central new component — a generic schema-driven
form renderer that maps schema fields to BaseInput / BaseTextarea /
BaseSwitch / BaseMultiselect by type, and builds Vuelidate rules
dynamically from each field's rules array (supports required, email, url,
numeric, min:N, max:N). New fields are added by extending the type ->
component map.
- CompanyModulesIndexView.vue fetches /company-modules and renders a card
grid (with empty/loading states); CompanyModuleCard.vue is the per-row
component with the Settings button. ModuleSettingsView.vue fetches
/modules/{slug}/settings, hands {schema, values} to BaseSchemaForm, and
posts back on submit.
- Company-context routes.ts is rebuilt after the previous commit relocated
the marketplace browser away. It now declares modules.index +
modules.settings, both gated by manage-module ability.
- New api/services/{companyModules,moduleSettings}.service.ts thin clients.
- lang/en.json adds modules.index.{description,empty_title,empty_description},
modules.settings.{title,open,saved,not_found,none}, and
modules.sidebar.section_title. The sidebar key is added here even though
the dynamic sidebar rendering lands in the next commit — keeping all i18n
additions in one file edit avoids hunk-splitting lang/en.json.
66 lines
1.8 KiB
Vue
66 lines
1.8 KiB
Vue
<template>
|
|
<BasePage>
|
|
<BasePageHeader :title="$t('modules.title')">
|
|
<BaseBreadcrumb>
|
|
<BaseBreadcrumbItem :title="$t('general.home')" to="dashboard" />
|
|
<BaseBreadcrumbItem :title="$t('modules.module', 2)" to="#" active />
|
|
</BaseBreadcrumb>
|
|
</BasePageHeader>
|
|
|
|
<p class="mt-4 text-sm text-muted max-w-3xl">
|
|
{{ $t('modules.index.description') }}
|
|
</p>
|
|
|
|
<!-- Loading skeleton -->
|
|
<div
|
|
v-if="store.isFetching && store.modules.length === 0"
|
|
class="grid mt-8 w-full grid-cols-1 items-start gap-6 lg:grid-cols-2 xl:grid-cols-3"
|
|
>
|
|
<div v-for="n in 3" :key="n" class="h-32 bg-surface-tertiary rounded-lg animate-pulse" />
|
|
</div>
|
|
|
|
<!-- Empty state -->
|
|
<div
|
|
v-else-if="store.modules.length === 0"
|
|
class="mt-16 flex flex-col items-center justify-center text-center"
|
|
>
|
|
<div class="
|
|
h-16 w-16 rounded-full bg-surface-tertiary
|
|
flex items-center justify-center mb-4
|
|
">
|
|
<BaseIcon name="PuzzlePieceIcon" class="h-8 w-8 text-subtle" />
|
|
</div>
|
|
<h3 class="text-lg font-medium text-heading">
|
|
{{ $t('modules.index.empty_title') }}
|
|
</h3>
|
|
<p class="text-sm text-muted mt-2 max-w-md">
|
|
{{ $t('modules.index.empty_description') }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Module list -->
|
|
<div
|
|
v-else
|
|
class="grid mt-8 w-full grid-cols-1 items-start gap-6 lg:grid-cols-2 xl:grid-cols-3"
|
|
>
|
|
<CompanyModuleCard
|
|
v-for="mod in store.modules"
|
|
:key="mod.slug"
|
|
:data="mod"
|
|
/>
|
|
</div>
|
|
</BasePage>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted } from 'vue'
|
|
import { useCompanyModulesStore } from '../store'
|
|
import CompanyModuleCard from '../components/CompanyModuleCard.vue'
|
|
|
|
const store = useCompanyModulesStore()
|
|
|
|
onMounted(() => {
|
|
store.fetchModules()
|
|
})
|
|
</script>
|