mirror of
https://github.com/InvoiceShelf/InvoiceShelf.git
synced 2026-04-16 01:34:08 +00:00
feat(modules): company-context module surfaces and schema-driven settings
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.
This commit is contained in:
@@ -0,0 +1,65 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user