Rework LiquidsoapConfig page to use a single API back-and-forth.

config/routes/api_station_vue.php

@@ -19,11 +19,6 @@ return static function (RouteCollectorProxy $app) {
             ->add(new Middleware\StationSupportsFeature(StationFeatures::Media))
             ->add(new Middleware\Permissions(StationPermissions::Media, true));
 
-        $group->get('/ls_config', Controller\Api\Stations\Vue\EditLiquidsoapConfigAction::class)
-            ->setName('api:vue:stations:util:ls_config')
-            ->add(new Middleware\StationSupportsFeature(StationFeatures::CustomLiquidsoapConfig))
-            ->add(new Middleware\Permissions(StationPermissions::Broadcasting, true));
-
         $group->get(
             '/stereo_tool_config',
             Controller\Api\Stations\Vue\UploadStereoToolConfigAction::class

frontend/vue/components/Stations/LiquidsoapConfig.vue

@@ -78,40 +78,34 @@ import {forEach} from "lodash";
 import mergeExisting from "~/functions/mergeExisting";
 import InfoCard from "~/components/Common/InfoCard";
 import {useVuelidateOnForm} from "~/functions/useVuelidateOnForm";
-import {onMounted, ref} from "vue";
+import {computed, onMounted, ref} from "vue";
 import {useMayNeedRestart} from "~/functions/useMayNeedRestart";
 import {useAxios} from "~/vendor/axios";
 import {useNotify} from "~/functions/useNotify";
 import Loading from "~/components/Common/Loading.vue";
 import {getStationApiUrl} from "~/router";
 
-const props = defineProps({
-    config: {
-        type: Array,
-        required: true
-    },
-    sections: {
-        type: Array,
-        required: true
-    },
-});
-
 const settingsUrl = getStationApiUrl('/liquidsoap-config');
 
-const buildForm = () => {
-    const validations = {};
-    const blankForm = {};
+const config = ref([]);
+const sections = ref([]);
 
-    forEach(props.sections, (section) => {
-        validations[section] = {};
-        blankForm[section] = null;
-    });
-
-    return {validations, blankForm};
-}
-
-const {validations, blankForm} = buildForm();
-const {form, resetForm, v$, ifValid} = useVuelidateOnForm(validations, blankForm);
+const {form, resetForm, v$, ifValid} = useVuelidateOnForm(
+    computed(() => {
+        const validations = {};
+        forEach(sections.value, (section) => {
+            validations[section] = {};
+        });
+        return validations;
+    }),
+    () => {
+        const blankForm = {};
+        forEach(sections.value, (section) => {
+            blankForm[section] = null;
+        });
+        return blankForm;
+    }
+);
 
 const isLoading = ref(true);
 
@@ -120,11 +114,14 @@ const {mayNeedRestart} = useMayNeedRestart();
 const {axios} = useAxios();
 
 const relist = () => {
-    resetForm();
-
     isLoading.value = true;
     axios.get(settingsUrl.value).then((resp) => {
-        form.value = mergeExisting(form.value, resp.data);
+        config.value = resp.data.config;
+        sections.value = resp.data.sections;
+
+        resetForm();
+        form.value = mergeExisting(form.value, resp.data.contents);
+    }).finally(() => {
         isLoading.value = false;
     });
 };

frontend/vue/components/Stations/routes.ts

@@ -39,8 +39,7 @@ export default function useStationsRoutes() {
         {
             path: '/ls_config',
             component: () => import('~/components/Stations/LiquidsoapConfig.vue'),
-            name: 'stations:util:ls_config',
-            ...populateComponentRemotely(getStationApiUrl('/vue/ls_config'))
+            name: 'stations:util:ls_config'
         },
         {
             path: '/stereo_tool_config',

src/Controller/Api/Stations/LiquidsoapConfig/GetAction.php

@@ -6,24 +6,65 @@ namespace App\Controller\Api\Stations\LiquidsoapConfig;
 
 use App\Controller\SingleActionInterface;
 use App\Entity\StationBackendConfiguration;
+use App\Event\Radio\WriteLiquidsoapConfiguration;
 use App\Http\Response;
 use App\Http\ServerRequest;
+use App\Radio\Backend\Liquidsoap\ConfigWriter;
+use Psr\EventDispatcher\EventDispatcherInterface;
 use Psr\Http\Message\ResponseInterface;
 
 final class GetAction implements SingleActionInterface
 {
+    public function __construct(
+        private readonly EventDispatcherInterface $eventDispatcher,
+    ) {
+    }
+
     public function __invoke(
         ServerRequest $request,
         Response $response,
         array $params
     ): ResponseInterface {
-        $backendConfig = $request->getStation()->getBackendConfig();
+        $station = $request->getStation();
 
-        $return = [];
-        foreach (StationBackendConfiguration::getCustomConfigurationSections() as $field) {
-            $return[$field] = $backendConfig->getCustomConfigurationSection($field);
+        $configSections = StationBackendConfiguration::getCustomConfigurationSections();
+        $tokens = ConfigWriter::getDividerString();
+
+        $event = new WriteLiquidsoapConfiguration($station, true, false);
+        $this->eventDispatcher->dispatch($event);
+        $config = $event->buildConfiguration();
+
+        $areas = [];
+
+        $tok = strtok($config, $tokens);
+        while ($tok !== false) {
+            $tok = trim($tok);
+            if (in_array($tok, $configSections, true)) {
+                $areas[] = [
+                    'is_field' => true,
+                    'field_name' => $tok,
+                ];
+            } elseif (!empty($tok)) {
+                $areas[] = [
+                    'is_field' => false,
+                    'markup' => $tok,
+                ];
+            }
+
+            $tok = strtok($tokens);
         }
 
-        return $response->withJson($return);
+        $backendConfig = $request->getStation()->getBackendConfig();
+
+        $contents = [];
+        foreach ($configSections as $field) {
+            $contents[$field] = $backendConfig->getCustomConfigurationSection($field);
+        }
+
+        return $response->withJson([
+            'config' => $areas,
+            'sections' => $configSections,
+            'contents' => $contents,
+        ]);
     }
 }

src/Controller/Api/Stations/Vue/EditLiquidsoapConfigAction.php

@@ -1,64 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace App\Controller\Api\Stations\Vue;
-
-use App\Controller\SingleActionInterface;
-use App\Entity\StationBackendConfiguration;
-use App\Event\Radio\WriteLiquidsoapConfiguration;
-use App\Http\Response;
-use App\Http\ServerRequest;
-use App\Radio\Backend\Liquidsoap;
-use Psr\EventDispatcher\EventDispatcherInterface;
-use Psr\Http\Message\ResponseInterface;
-
-final class EditLiquidsoapConfigAction implements SingleActionInterface
-{
-    public function __construct(
-        private readonly EventDispatcherInterface $eventDispatcher,
-    ) {
-    }
-
-    public function __invoke(
-        ServerRequest $request,
-        Response $response,
-        array $params
-    ): ResponseInterface {
-        $station = $request->getStation();
-
-        $configSections = StationBackendConfiguration::getCustomConfigurationSections();
-        $tokens = Liquidsoap\ConfigWriter::getDividerString();
-
-        $event = new WriteLiquidsoapConfiguration($station, true, false);
-        $this->eventDispatcher->dispatch($event);
-        $config = $event->buildConfiguration();
-
-        $areas = [];
-
-        $tok = strtok($config, $tokens);
-        while ($tok !== false) {
-            $tok = trim($tok);
-            if (in_array($tok, $configSections, true)) {
-                $areas[] = [
-                    'is_field' => true,
-                    'field_name' => $tok,
-                ];
-            } else {
-                $areas[] = [
-                    'is_field' => false,
-                    'markup' => $tok,
-                ];
-            }
-
-            $tok = strtok($tokens);
-        }
-
-        $router = $request->getRouter();
-
-        return $response->withJson([
-            'config' => $areas,
-            'sections' => $configSections,
-        ]);
-    }
-}