Refactor the StateMachineViewer component (#228)

Co-authored-by: Ioannis Pourliotis <PheysX@users.noreply.github.com>

src/Controller/StateMachineController.php

@@ -14,6 +14,8 @@
 use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\Routing\Annotation\Route;
+use Shopware\Core\Framework\Uuid\Uuid;
+use Shopware\Core\System\StateMachine\StateMachineEntity;
 
 #[Route(path: '/api/_action/frosh-tools', defaults: ['_routeScope' => ['api'], '_acl' => ['frosh_tools:read']])]
 final class StateMachineController extends AbstractController
@@ -22,26 +24,26 @@ public function __construct(private readonly EntityRepository $stateMachineRepos
     {
     }
 
-    #[Route(path: '/state-machines/load', name: 'api.frosh.tools.state-machines.load', methods: ['GET'])]
-    public function load(Request $request): JsonResponse
+    #[Route(path: '/state-machines/load/{stateMachineId}', name: 'api.frosh.tools.state-machines.load', methods: ['GET'])]
+    public function load(string $stateMachineId, Request $request): JsonResponse
     {
-        $stateMachineType = $request->query->get('stateMachine');
-
-        if (empty($stateMachineType)) {
+        if (!Uuid::isValid($stateMachineId)) {
             return new JsonResponse();
         }
 
-        $tmp = explode('.', $stateMachineType);
-        $title = ucwords(str_replace('_', ' ', $tmp[0]));
-
-        $criteria = new Criteria();
-        $criteria->addFilter(new EqualsFilter('technicalName', $stateMachineType));
+        $criteria = new Criteria([$stateMachineId]);
         $criteria->addAssociations([
             'states',
             'transitions',
         ]);
 
         $stateMachine = $this->stateMachineRepository->search($criteria, Context::createDefaultContext())->first();
+        if (!$stateMachine instanceof StateMachineEntity) {
+            return new JsonResponse();
+        }
+
+        $tmp = explode('.', $stateMachine->getTechnicalName());
+        $title = ucwords(str_replace('_', ' ', $tmp[0]));
 
         $exporter = new Plantuml();
         $generatedPlantuml = $exporter->export($stateMachine, $title);

src/Resources/app/administration/src/api/frosh-tools.js

@@ -178,14 +178,11 @@ class FroshTools extends ApiService {
         });
     }
 
-    stateMachines(stateMachine) {
-        const apiRoute = `${this.getApiBasePath()}/state-machines/load`;
+    stateMachines(id) {
+        const apiRoute = `${this.getApiBasePath()}/state-machines/load/${id}`;
         return this.httpClient.get(
             apiRoute,
             {
-                params: {
-                    stateMachine,
-                },
                 headers: this.getBasicHeaders()
             }
         ).then((response) => {

src/Resources/app/administration/src/module/frosh-tools/component/frosh-tools-tab-state-machines/index.js

@@ -16,6 +16,7 @@ Component.register('frosh-tools-tab-state-machines', {
 
     data() {
         return {
+            selectedStateMachine: null,
             image: null,
             isLoading: true,
         }
@@ -30,9 +31,14 @@ Component.register('frosh-tools-tab-state-machines', {
             this.isLoading = false;
         },
 
-        async onStateMachineChange(value) {
-            const response = (await this.froshToolsService.stateMachines(value));
-            const elem = document.getElementById('state_machine'); 
+        async onStateMachineChange(stateMachineChangeId) {
+            if (!stateMachineChangeId) {
+                return;
+            }
+
+            const response = await this.froshToolsService.stateMachines(stateMachineChangeId);
+
+            const elem = document.getElementById('state_machine');
             if ("svg" in response) {
                 this.image = response.svg;
                 elem.src = this.image;

src/Resources/app/administration/src/module/frosh-tools/component/frosh-tools-tab-state-machines/style.scss

@@ -1,4 +1,23 @@
 .frosh-tools-tab-state-machines__state-machines-card {
+    .sw-card__toolbar {
+        .sw-select {
+            margin: 0;
+            display: flex;
+            flex-direction: row;
+            gap: 10px;
+            align-items: center;
+
+            .sw-field__label {
+                gap: 6px;
+                margin-bottom: 2px;
+            }
+
+            .sw-block-field__block {
+                flex: 1;
+            }
+        }
+    }
+
     .sw-card__content {
         padding: 0;
 

src/Resources/app/administration/src/module/frosh-tools/component/frosh-tools-tab-state-machines/template.html.twig

@@ -1,10 +1,10 @@
 <sw-card-view>
     <sw-card
-            class="frosh-tools-tab-state-machines__state-machines-card"
-            :title="$tc('frosh-tools.tabs.state-machines.title')"
-            :isLoading="isLoading"
-            :large="true"
-            positionIdentifier="frosh-tools-tab-state-machines"
+        class="frosh-tools-tab-state-machines__state-machines-card"
+        :title="$tc('frosh-tools.tabs.state-machines.title')"
+        :isLoading="isLoading"
+        :large="true"
+        positionIdentifier="frosh-tools-tab-state-machines"
     >
 
         <div class="frosh-tools-tab-state-machines__state-machines-card-image-wrapper">
@@ -20,19 +20,15 @@
         </div>
 
         <template #toolbar>
-            <sw-select-field
-                    size="small"
-                    :aside="true"
-                    @change="onStateMachineChange"
-                    :label=" $tc('frosh-tools.tabs.state-machines.label')"
-                    :helpText="$tc('frosh-tools.tabs.state-machines.helpText')"
-            >
-                <option selected="selected" value="">{{ $tc('frosh-tools.chooseStateMachine') }}</option>
-                <option value="order.state">{{ $tc('frosh-tools.order') }}</option>
-                <option value="order_transaction.state">{{ $tc('frosh-tools.transaction') }}</option>
-                <option value="order_delivery.state">{{ $tc('frosh-tools.delivery') }}</option>
-            </sw-select-field>
+            <sw-entity-single-select
+                v-model="selectedStateMachine"
+                entity="state_machine"
+                :aside="true"
+                @change="onStateMachineChange"
+                :label="$tc('frosh-tools.tabs.state-machines.label')"
+                :placeholder="$tc('frosh-tools.chooseStateMachine')"
+                :helpText="$tc('frosh-tools.tabs.state-machines.helpText')"
+            />
         </template>
-
     </sw-card>
 </sw-card-view>