refactor(ui/web): remove redundant connector status column from classic skin

The connector status is now accessible via the Set Status dropdown in
the Actions column, making the dedicated read-only Status column
redundant. Move status/error-code selects to the top of Actions and
style them to fill the column width consistently with buttons.

diff --git a/ui/web/src/skins/classic/components/charging-stations/CSConnector.vue b/ui/web/src/skins/classic/components/charging-stations/CSConnector.vue
index ba75298cd6807c873f34b99faa5e367acc4936ab..4c4e292ff259d735a037ba748f011d87e034aadf 100644 (file)
--- a/ui/web/src/skins/classic/components/charging-stations/CSConnector.vue
+++ b/ui/web/src/skins/classic/components/charging-stations/CSConnector.vue
@@ -3,9 +3,6 @@
     <td>
       {{ evseId != null ? `${evseId}/${connectorId}` : connectorId }}
     </td>
-    <td>
-      {{ connector.status ?? EMPTY_VALUE_PLACEHOLDER }}
-    </td>
     <td>
       {{ connector.locked === true ? 'Yes' : 'No' }}
     </td>
@@ -16,6 +13,35 @@
       {{ atgStatus?.start === true ? 'Yes' : 'No' }}
     </td>
     <td>
+      <select
+        v-model="selectedStatus"
+        class="connector-action-select"
+        :aria-label="`Set status for connector ${connectorId}`"
+        @change="applyConnectorStatus"
+      >
+        <option
+          v-for="s in statusOptions"
+          :key="s"
+          :value="s"
+        >
+          {{ s }}
+        </option>
+      </select>
+      <select
+        v-if="!isOCPP20x(ocppVersion)"
+        v-model="selectedErrorCode"
+        class="connector-action-select"
+        :aria-label="`Set error code for connector ${connectorId}`"
+        @change="applyConnectorStatus"
+      >
+        <option
+          v-for="e in errorCodeOptions"
+          :key="e"
+          :value="e"
+        >
+          {{ e }}
+        </option>
+      </select>
       <StateButton
         :active="connector.locked === true"
         :off="() => unlockConnector()"
@@ -61,35 +87,6 @@
         :on="() => startAutomaticTransactionGenerator()"
         on-label="Start ATG"
       />
-      <select
-        v-model="selectedStatus"
-        class="connector-status-select"
-        :aria-label="`Set status for connector ${connectorId}`"
-        @change="applyConnectorStatus"
-      >
-        <option
-          v-for="s in statusOptions"
-          :key="s"
-          :value="s"
-        >
-          {{ s }}
-        </option>
-      </select>
-      <select
-        v-if="!isOCPP20x(ocppVersion)"
-        v-model="selectedErrorCode"
-        class="connector-status-select"
-        :aria-label="`Set error code for connector ${connectorId}`"
-        @change="applyConnectorStatus"
-      >
-        <option
-          v-for="e in errorCodeOptions"
-          :key="e"
-          :value="e"
-        >
-          {{ e }}
-        </option>
-      </select>
     </td>
   </tr>
 </template>
@@ -106,7 +103,7 @@ import {
 import { computed, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
-import { EMPTY_VALUE_PLACEHOLDER, ROUTE_NAMES } from '@/core/index.js'
+import { ROUTE_NAMES } from '@/core/index.js'
 import { useConnectorActions } from '@/shared/composables/useConnectorActions.js'
 
 import Button from '../buttons/ClassicButton.vue'
@@ -174,3 +171,13 @@ const applyConnectorStatus = (): void => {
   setConnectorStatus(selectedStatus.value, undefined, errorCode)
 }
 </script>
+
+<style scoped>
+.connector-action-select {
+  display: block;
+  width: 100%;
+  text-align: center;
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+}
+</style>

diff --git a/ui/web/src/skins/classic/components/charging-stations/CSData.vue b/ui/web/src/skins/classic/components/charging-stations/CSData.vue
index e83841123429bb45a32f6bc42bd454a74741b39b..4c1bd2ff3750b77845fc093e706681b89fc3d561 100644 (file)
--- a/ui/web/src/skins/classic/components/charging-stations/CSData.vue
+++ b/ui/web/src/skins/classic/components/charging-stations/CSData.vue
@@ -79,9 +79,6 @@
             <th scope="col">
               Identifier
             </th>
-            <th scope="col">
-              Status
-            </th>
             <th scope="col">
               Locked
             </th>

diff --git a/ui/web/tests/unit/skins/classic/CSConnector.test.ts b/ui/web/tests/unit/skins/classic/CSConnector.test.ts
index 0e79513b551efcedd5ff56104c822659761ed9e5..da2c9e2e896b6f13a80950b492ee5f394c17fac6 100644 (file)
--- a/ui/web/tests/unit/skins/classic/CSConnector.test.ts
+++ b/ui/web/tests/unit/skins/classic/CSConnector.test.ts
@@ -110,28 +110,12 @@ describe('CSConnector', () => {
       expect(cells[0].text()).toBe('1/3')
     })
 
-    it('should render connector status', () => {
-      const wrapper = mountConnector({
-        connectorOverrides: { status: OCPP16ChargePointStatus.CHARGING },
-      })
-      const cells = wrapper.findAll('td')
-      expect(cells[1].text()).toBe('Charging')
-    })
-
-    it('should render placeholder when status is undefined', () => {
-      const wrapper = mountConnector({
-        connectorOverrides: { status: undefined },
-      })
-      const cells = wrapper.findAll('td')
-      expect(cells[1].text()).toBe('Ø')
-    })
-
     it('should render "Yes" when locked', () => {
       const wrapper = mountConnector({
         connectorOverrides: { locked: true },
       })
       const cells = wrapper.findAll('td')
-      expect(cells[2].text()).toBe('Yes')
+      expect(cells[1].text()).toBe('Yes')
     })
 
     it('should render "No" when not locked', () => {
@@ -139,7 +123,7 @@ describe('CSConnector', () => {
         connectorOverrides: { locked: false },
       })
       const cells = wrapper.findAll('td')
-      expect(cells[2].text()).toBe('No')
+      expect(cells[1].text()).toBe('No')
     })
 
     it('should render transaction info when transaction is started', () => {
@@ -147,7 +131,7 @@ describe('CSConnector', () => {
         connectorOverrides: { transactionId: 42, transactionStarted: true },
       })
       const cells = wrapper.findAll('td')
-      expect(cells[3].text()).toBe('Yes (42)')
+      expect(cells[2].text()).toBe('Yes (42)')
     })
 
     it('should render "No" when no transaction', () => {
@@ -155,19 +139,19 @@ describe('CSConnector', () => {
         connectorOverrides: { transactionStarted: false },
       })
       const cells = wrapper.findAll('td')
-      expect(cells[3].text()).toBe('No')
+      expect(cells[2].text()).toBe('No')
     })
 
     it('should render ATG started "Yes" when atgStatus.start is true', () => {
       const wrapper = mountConnector({ atgStatus: { start: true } })
       const cells = wrapper.findAll('td')
-      expect(cells[4].text()).toBe('Yes')
+      expect(cells[3].text()).toBe('Yes')
     })
 
     it('should render ATG started "No" when atgStatus is undefined', () => {
       const wrapper = mountConnector({ atgStatus: undefined })
       const cells = wrapper.findAll('td')
-      expect(cells[4].text()).toBe('No')
+      expect(cells[3].text()).toBe('No')
     })
   })
 
@@ -262,7 +246,7 @@ describe('CSConnector', () => {
 
     it('should render OCPP 1.6 status options by default', () => {
       const wrapper = mountConnector()
-      const selects = wrapper.findAll('select.connector-status-select')
+      const selects = wrapper.findAll('select.connector-action-select')
       const statusSelect = selects[0]
       const options = statusSelect.findAll('option')
       expect(options.length).toBe(Object.values(OCPP16ChargePointStatus).length)
@@ -270,7 +254,7 @@ describe('CSConnector', () => {
 
     it('should render OCPP 2.0.x status options for OCPP 2.0.1 station', () => {
       const wrapper = mountConnector({ ocppVersion: OCPPVersion.VERSION_201 })
-      const selects = wrapper.findAll('select.connector-status-select')
+      const selects = wrapper.findAll('select.connector-action-select')
       const statusSelect = selects[0]
       const options = statusSelect.findAll('option')
       expect(options.length).toBe(Object.values(OCPP20ConnectorStatusEnumType).length)
@@ -278,13 +262,13 @@ describe('CSConnector', () => {
 
     it('should hide error code select for OCPP 2.0.x', () => {
       const wrapper = mountConnector({ ocppVersion: OCPPVersion.VERSION_201 })
-      const selects = wrapper.findAll('select.connector-status-select')
+      const selects = wrapper.findAll('select.connector-action-select')
       expect(selects.length).toBe(1)
     })
 
     it('should show error code select for OCPP 1.6', () => {
       const wrapper = mountConnector({ ocppVersion: OCPPVersion.VERSION_16 })
-      const selects = wrapper.findAll('select.connector-status-select')
+      const selects = wrapper.findAll('select.connector-action-select')
       expect(selects.length).toBe(2)
       const errorOptions = selects[1].findAll('option')
       expect(errorOptions.length).toBe(Object.values(OCPP16ChargePointErrorCode).length)
@@ -292,7 +276,7 @@ describe('CSConnector', () => {
 
     it('should call setConnectorStatus on status change', async () => {
       const wrapper = mountConnector()
-      const selects = wrapper.findAll('select.connector-status-select')
+      const selects = wrapper.findAll('select.connector-action-select')
       await selects[0].setValue(OCPP16ChargePointStatus.FAULTED)
       await flushPromises()
       expect(mockClient.setConnectorStatus).toHaveBeenCalledWith(