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.
101 lines
2.8 KiB
Vue
101 lines
2.8 KiB
Vue
<template>
|
|
<BasePage>
|
|
<BasePageHeader :title="pageTitle">
|
|
<BaseBreadcrumb>
|
|
<BaseBreadcrumbItem :title="$t('general.home')" to="dashboard" />
|
|
<BaseBreadcrumbItem :title="$t('modules.title')" to="/admin/modules" />
|
|
<BaseBreadcrumbItem :title="pageTitle" to="#" active />
|
|
</BaseBreadcrumb>
|
|
</BasePageHeader>
|
|
|
|
<div v-if="isFetching" class="mt-8 space-y-4">
|
|
<div class="h-6 bg-surface-tertiary rounded w-1/4 animate-pulse" />
|
|
<div class="h-12 bg-surface-tertiary rounded animate-pulse" />
|
|
<div class="h-12 bg-surface-tertiary rounded animate-pulse" />
|
|
</div>
|
|
|
|
<BaseCard v-else-if="schema" class="mt-6">
|
|
<BaseSchemaForm
|
|
:schema="schema"
|
|
:values="values"
|
|
:is-saving="isSaving"
|
|
@submit="onSubmit"
|
|
/>
|
|
</BaseCard>
|
|
|
|
<div v-else class="mt-16 text-center">
|
|
<p class="text-muted">{{ $t('modules.settings.not_found') }}</p>
|
|
</div>
|
|
</BasePage>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, onMounted, watch } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { useI18n } from 'vue-i18n'
|
|
import {
|
|
moduleSettingsService,
|
|
type ModuleSettingsSchema,
|
|
} from '@/scripts/api/services/moduleSettings.service'
|
|
import { useNotificationStore } from '@/scripts/stores/notification.store'
|
|
import { handleApiError } from '@/scripts/utils/error-handling'
|
|
|
|
const route = useRoute()
|
|
const { t } = useI18n()
|
|
const notificationStore = useNotificationStore()
|
|
|
|
const schema = ref<ModuleSettingsSchema | null>(null)
|
|
const values = ref<Record<string, unknown>>({})
|
|
const isFetching = ref<boolean>(false)
|
|
const isSaving = ref<boolean>(false)
|
|
|
|
const slug = computed<string>(() => route.params.slug as string)
|
|
|
|
const pageTitle = computed<string>(() => {
|
|
// Modules supply their own translatable title via the schema first section
|
|
return schema.value?.sections[0]?.title
|
|
? t(schema.value.sections[0].title)
|
|
: t('modules.settings.title')
|
|
})
|
|
|
|
watch(slug, () => {
|
|
loadSettings()
|
|
})
|
|
|
|
onMounted(() => {
|
|
loadSettings()
|
|
})
|
|
|
|
async function loadSettings(): Promise<void> {
|
|
if (!slug.value) return
|
|
|
|
isFetching.value = true
|
|
try {
|
|
const response = await moduleSettingsService.fetch(slug.value)
|
|
schema.value = response.schema
|
|
values.value = response.values
|
|
} catch (err: unknown) {
|
|
schema.value = null
|
|
handleApiError(err)
|
|
} finally {
|
|
isFetching.value = false
|
|
}
|
|
}
|
|
|
|
async function onSubmit(formValues: Record<string, unknown>): Promise<void> {
|
|
isSaving.value = true
|
|
try {
|
|
await moduleSettingsService.update(slug.value, formValues)
|
|
values.value = formValues
|
|
notificationStore.showNotification({
|
|
type: 'success',
|
|
message: t('modules.settings.saved'),
|
|
})
|
|
} catch (err: unknown) {
|
|
handleApiError(err)
|
|
} finally {
|
|
isSaving.value = false
|
|
}
|
|
}
|
|
</script>
|